feat(appearance): appearance set

frontend/src/components/about/index.vue

@@ -202,7 +202,7 @@ defineExpose({
   .color-overlay {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
-    background: #1cba901a;
+    background: var(--ed-color-primary-1a, #1cba901a);
     border: 1px solid #dee0e3;
     border-bottom: 0;
     height: 180px;

frontend/src/components/layout/Menu.vue

@@ -4,6 +4,7 @@ import { ElMenu } from 'element-plus-secondary'
 import { useRoute, useRouter } from 'vue-router'
 import MenuItem from './MenuItem.vue'
 import { useUserStore } from '@/stores/user'
+import { routes } from '@/router'
 const userStore = useUserStore()
 const router = useRouter()
 defineProps({
@@ -21,9 +22,25 @@ const showSysmenu = computed(() => {
   return route.path.includes('/system')
 })
 
+const formatRoute = (arr: any, parentPath = '') => {
+  return arr.map((element: any) => {
+    let children: any = []
+    const path = `${parentPath ? parentPath + '/' : ''}${element.path}`
+    if (element.children?.length) {
+      children = formatRoute(element.children, path)
+    }
+    return {
+      ...element,
+      path,
+      children,
+    }
+  })
+}
+
 const routerList = computed(() => {
   if (showSysmenu.value) {
-    return router.getRoutes().filter((route) => route.path.includes('/system') && !route.redirect)
+    const [sysRouter] = formatRoute(routes.filter((route) => route.path.includes('/system')))
+    return sysRouter.children
   }
   const list = router.getRoutes().filter((route) => {
     return (
@@ -71,7 +88,7 @@ const routerList = computed(() => {
 
   .ed-sub-menu.is-active {
     .ed-sub-menu__title {
-      color: #1cba90 !important;
+      color: var(--ed-color-primary) !important;
     }
   }
 

frontend/src/components/layout/Person.vue

@@ -118,7 +118,7 @@ const logout = () => {
                 <icon_translate_outlined></icon_translate_outlined>
               </el-icon>
               <div class="datasource-name">{{ $t('common.language') }}</div>
-              <el-icon style="transform: scale(1.33)" class="right" size="16">
+              <el-icon class="right" size="16">
                 <icon_right_outlined></icon_right_outlined>
               </el-icon>
             </div>

frontend/src/i18n/en.json

@@ -567,5 +567,36 @@
   "license": {
     "error_tips": "Do you want to refresh the page?",
     "offline_tips": "The service has been offline, please contact the administrator to restart the service!"
+  },
+  "system": {
+    "system_settings": "System Settings",
+    "appearance_settings": "Appearance Settings",
+    "platform_display_theme": "Platform Display Theme",
+    "default_turquoise": "Default (Turquoise)",
+    "tech_blue": "Tech Blue",
+    "custom": "Custom",
+    "platform_login_settings": "Platform Login Settings",
+    "page_preview": "Page Preview",
+    "restore_default": "Restore Default",
+    "website_logo": "Website Logo",
+    "tab": "Tab",
+    "replace_image": "Replace Image",
+    "larger_than_200kb": "Logo displayed at the top of the website: Recommended size: 48 x 48 pixels, supports JPG, PNG, and SVG, and no larger than 200KB",
+    "login_logo": "Login Logo",
+    "larger_than_200kb_de": "Logo on the right side of the login page: Recommended size: 204 x 52 pixels, supports JPG, PNG, and SVG, and no larger than 200KB",
+    "login_background_image": "Login Background Image",
+    "larger_than_5mb": "Background image on the left: Recommended size: 576 x 900 for vector images, 1152 x 1800 for bitmap images, supports JPG, PNG, and SVG, and no larger than 5MB",
+    "website_name": "Website Name",
+    "on_webpage_tabs": "Platform name displayed on webpage tabs",
+    "welcome_message": "Welcome Message",
+    "the_product_logo": "Welcome Message below the product logo",
+    "screen_customization_supported": "Defaults to the SQLBot login screen; customization supported",
+    "platform_settings": "Platform Settings",
+    "help_documentation": "Help Documentation",
+    "show_about": "Show About",
+    "abort_update": "Abort Update",
+    "save_and_apply": "Save and Apply",
+    "setting_successfully": "Setting Successfully",
+    "customize_theme_color": "Customize theme color"
   }
-}
+}

frontend/src/i18n/zh-CN.json

@@ -567,5 +567,36 @@
   "license": {
     "error_tips": "是否刷新页面？",
     "offline_tips": "服务已经下线，请联系管理员重启服务！"
+  },  
+  "system": {
+    "system_settings": "系统设置",
+    "appearance_settings": "外观设置",
+    "platform_display_theme": "平台显示主题",
+    "default_turquoise": "默认 (松石绿)",
+    "tech_blue": "科技蓝",
+    "custom": "自定义",
+    "platform_login_settings": "平台登录设置",
+    "page_preview": "页面预览",
+    "restore_default": "恢复默认",
+    "website_logo": "网站 Logo",
+    "tab": "页签",
+    "replace_image": "替换图片",
+    "larger_than_200kb": "顶部网站显示的 Logo，建议尺寸 48 x 48，支持 JPG、PNG、SVG，大小不超过 200KB",
+    "login_logo": "登录 Logo",
+    "larger_than_200kb_de": "登录页面右侧 Logo，建议尺寸 204*52，支持 JPG、PNG、SVG，大小不超过 200KB",
+    "login_background_image": "登录背景图",
+    "larger_than_5mb": "左侧背景图，矢量图建议尺寸 576*900，位图建议尺寸 1152*1800；支持 JPG、PNG、SVG，大小不超过 5M",
+    "website_name": "网站名称",
+    "on_webpage_tabs": "显示在网页 Tab 的平台名称",
+    "welcome_message": "欢迎语",
+    "the_product_logo": "产品 Logo 下的 欢迎语",
+    "screen_customization_supported": "默认为 SQLBot 登录界面，支持自定义设置",
+    "platform_settings": "平台设置",
+    "help_documentation": "帮助文档",
+    "show_about": "显示关于",
+    "abort_update": "放弃更新",
+    "save_and_apply": "保存并应用",
+    "setting_successfully": "设置成功",
+    "customize_theme_color": "自定义主题色"
   }
 }

frontend/src/router/index.ts

@@ -13,6 +13,7 @@ import Model from '@/views/system/model/Model.vue'
 import Embedded from '@/views/system/embedded/index.vue'
 import assistant from '@/views/embedded/index.vue'
 import Member from '@/views/system/member/index.vue'
+import Appearance from '@/views/system/appearance/index.vue'
 import Permission from '@/views/system/permission/index.vue'
 import User from '@/views/system/user/User.vue'
 import Workspace from '@/views/system/workspace/index.vue'
@@ -20,153 +21,169 @@ import { i18n } from '@/i18n'
 import { watchRouter } from './watch'
 
 const t = i18n.global.t
+export const routes = [
+  {
+    path: '/login',
+    name: 'login',
+    component: login,
+  },
+  {
+    path: '/chat',
+    component: LayoutDsl,
+    redirect: '/chat/index',
+    children: [
+      {
+        path: 'index',
+        name: 'chat',
+        component: chat,
+        props: (route: any) => {
+          return { startChatDsId: route.query.start_chat }
+        },
+        meta: { title: t('menu.Data Q&A'), iconActive: 'chat', iconDeActive: 'noChat' },
+      },
+    ],
+  },
+  {
+    path: '/dsTable',
+    component: SinglePage,
+    children: [
+      {
+        path: ':dsId/:dsName',
+        name: 'dsTable',
+        component: () => import('@/views/ds/TableList.vue'),
+        props: true,
+      },
+    ],
+  },
+  {
+    path: '/ds',
+    component: LayoutDsl,
+    redirect: '/ds/index',
+    children: [
+      {
+        path: 'index',
+        name: 'ds',
+        component: Datasource,
+        meta: { title: t('menu.Data Connections'), iconActive: 'ds', iconDeActive: 'noDs' },
+      },
+    ],
+  },
+  {
+    path: '/dashboard',
+    component: LayoutDsl,
+    redirect: '/dashboard/index',
+    children: [
+      {
+        path: 'index',
+        name: 'dashboard',
+        component: Dashboard,
+        meta: {
+          title: t('dashboard.dashboard'),
+          iconActive: 'dashboard',
+          iconDeActive: 'noDashboard',
+        },
+      },
+    ],
+  },
+  {
+    path: '/set',
+    component: LayoutDsl,
+    redirect: '/set/member',
+    meta: { title: t('workspace.set'), iconActive: 'set', iconDeActive: 'noSet' },
+    children: [
+      {
+        path: '/set/member',
+        name: 'member',
+        component: Member,
+        meta: { title: t('workspace.member_management') },
+      },
+      {
+        path: '/set/permission',
+        name: 'permission',
+        component: Permission,
+        meta: { title: t('workspace.permission_configuration') },
+      },
+    ],
+  },
+  {
+    path: '/canvas',
+    name: 'canvas',
+    component: DashboardEditor,
+    meta: { title: 'canvas', icon: 'dashboard' },
+  },
+  {
+    path: '/dashboard-preview',
+    name: 'preview',
+    component: DashboardPreview,
+    meta: { title: 'DashboardPreview', icon: 'dashboard' },
+  },
+  {
+    path: '/system',
+    component: LayoutDsl,
+    redirect: '/system/user',
+    meta: { hidden: true },
+    children: [
+      {
+        path: 'user',
+        name: 'user',
+        component: User,
+        meta: { title: t('user.user_management'), iconActive: 'user', iconDeActive: 'noUser' },
+      },
+      {
+        path: 'workspace',
+        name: 'workspace',
+        component: Workspace,
+        meta: {
+          title: t('user.workspace'),
+          iconActive: 'workspace',
+          iconDeActive: 'noWorkspace',
+        },
+      },
+      {
+        path: 'model',
+        name: 'model',
+        component: Model,
+        meta: {
+          title: t('model.ai_model_configuration'),
+          iconActive: 'model',
+          iconDeActive: 'noModel',
+        },
+      },
+      {
+        path: 'embedded',
+        name: 'embedded',
+        component: Embedded,
+        meta: {
+          title: t('embedded.embedded_management'),
+          iconActive: 'embedded',
+          iconDeActive: 'noEmbedded',
+        },
+      },
+      {
+        path: 'set',
+        meta: { title: t('system.system_settings'), iconActive: 'set', iconDeActive: 'noSet' },
+        redirect: 'set/appearance',
+        children: [
+          {
+            path: 'appearance',
+            name: 'appearance',
+            component: Appearance,
+            meta: { title: t('system.appearance_settings') },
+          },
+        ],
+      },
+    ],
+  },
+
+  {
+    path: '/assistant',
+    name: 'assistant',
+    component: assistant,
+  },
+]
 const router = createRouter({
   history: createWebHashHistory(),
-  routes: [
-    {
-      path: '/login',
-      name: 'login',
-      component: login,
-    },
-    {
-      path: '/chat',
-      component: LayoutDsl,
-      redirect: '/chat/index',
-      children: [
-        {
-          path: 'index',
-          name: 'chat',
-          component: chat,
-          props: (route) => {
-            return { startChatDsId: route.query.start_chat }
-          },
-          meta: { title: t('menu.Data Q&A'), iconActive: 'chat', iconDeActive: 'noChat' },
-        },
-      ],
-    },
-    {
-      path: '/dsTable',
-      component: SinglePage,
-      children: [
-        {
-          path: ':dsId/:dsName',
-          name: 'dsTable',
-          component: () => import('@/views/ds/TableList.vue'),
-          props: true,
-        },
-      ],
-    },
-    {
-      path: '/ds',
-      component: LayoutDsl,
-      redirect: '/ds/index',
-      children: [
-        {
-          path: 'index',
-          name: 'ds',
-          component: Datasource,
-          meta: { title: t('menu.Data Connections'), iconActive: 'ds', iconDeActive: 'noDs' },
-        },
-      ],
-    },
-    {
-      path: '/dashboard',
-      component: LayoutDsl,
-      redirect: '/dashboard/index',
-      children: [
-        {
-          path: 'index',
-          name: 'dashboard',
-          component: Dashboard,
-          meta: {
-            title: t('dashboard.dashboard'),
-            iconActive: 'dashboard',
-            iconDeActive: 'noDashboard',
-          },
-        },
-      ],
-    },
-    {
-      path: '/set',
-      component: LayoutDsl,
-      redirect: '/set/member',
-      meta: { title: t('workspace.set'), iconActive: 'set', iconDeActive: 'noSet' },
-      children: [
-        {
-          path: '/set/member',
-          name: 'member',
-          component: Member,
-          meta: { title: t('workspace.member_management') },
-        },
-        {
-          path: '/set/permission',
-          name: 'permission',
-          component: Permission,
-          meta: { title: t('workspace.permission_configuration') },
-        },
-      ],
-    },
-    {
-      path: '/canvas',
-      name: 'canvas',
-      component: DashboardEditor,
-      meta: { title: 'canvas', icon: 'dashboard' },
-    },
-    {
-      path: '/dashboard-preview',
-      name: 'preview',
-      component: DashboardPreview,
-      meta: { title: 'DashboardPreview', icon: 'dashboard' },
-    },
-    {
-      path: '/system',
-      component: LayoutDsl,
-      redirect: '/system/user',
-      children: [
-        {
-          path: 'user',
-          name: 'user',
-          component: User,
-          meta: { title: t('user.user_management'), iconActive: 'user', iconDeActive: 'noUser' },
-        },
-        {
-          path: 'workspace',
-          name: 'workspace',
-          component: Workspace,
-          meta: {
-            title: t('user.workspace'),
-            iconActive: 'workspace',
-            iconDeActive: 'noWorkspace',
-          },
-        },
-        {
-          path: 'model',
-          name: 'model',
-          component: Model,
-          meta: {
-            title: t('model.ai_model_configuration'),
-            iconActive: 'model',
-            iconDeActive: 'noModel',
-          },
-        },
-        {
-          path: 'embedded',
-          name: 'embedded',
-          component: Embedded,
-          meta: {
-            title: t('embedded.embedded_management'),
-            iconActive: 'embedded',
-            iconDeActive: 'noEmbedded',
-          },
-        },
-      ],
-    },
-    {
-      path: '/assistant',
-      name: 'assistant',
-      component: assistant,
-    },
-  ],
+  routes,
 })
 watchRouter(router)
 export default router

frontend/src/router/watch.ts

@@ -1,7 +1,10 @@
 import { ElMessage } from 'element-plus-secondary'
 import { useCache } from '@/utils/useCache'
+import { useAppearanceStoreWithOut } from '@/stores/appearance'
 import { useUserStore } from '@/stores/user'
 import { request } from '@/utils/request'
+
+const appearanceStore = useAppearanceStoreWithOut()
 const userStore = useUserStore()
 const { wsCache } = useCache()
 const whiteList = ['/login']
@@ -9,6 +12,7 @@ const assistantWhiteList = ['/assistant']
 export const watchRouter = (router: any) => {
   router.beforeEach(async (to: any, from: any, next: any) => {
     await loadXpackStatic()
+    await appearanceStore.setAppearance()
     LicenseGenerator.generateRouters(router)
     if (assistantWhiteList.includes(to.path)) {
       next()

frontend/src/style.less

@@ -8,8 +8,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  /* --primary-color: var(--el-color-primary); */
-  --primary-color: #1cba90;
+  --primary-color: var(--el-color-primary);
   --primary-light: #e8f0fe;
   --secondary-color: #5f6368;
   --danger-color: #ea4335;
@@ -24,13 +23,7 @@
   --header-height: 64px;
   --border-radius: 8px;
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-
-  --ed-color-primary: #1cba90 !important;
   --ed-border-radius-base: 6px !important;
-  --ed-color-primary-light-3: #3ec4a1 !important;
-  --ed-color-primary-dark-2: #189e7a !important;
-  --ed-color-primary-1a: #1cba901a;
-  --ed-color-primary-light-5: #3ec4a1 !important;
   --ed-border-color: #d9dcdf !important;
   --ed-color-primary-light-7: #d2f1e9 !important;
 }

frontend/src/utils/utils.ts

@@ -80,3 +80,26 @@ export const setSize = (size: any) => {
   }
   return size_str
 }
+
+export const isInIframe = () => {
+  try {
+    return window.top !== window.self
+  } catch (error) {
+    console.error(error)
+    return true
+  }
+}
+
+export const isBtnShow = (val: string) => {
+  if (!val || val === '0') {
+    return true
+  } else if (val === '1') {
+    return false
+  } else {
+    return !isInIframe()
+  }
+}
+
+export const setTitle = (title?: string) => {
+  document.title = title || 'SQLBot'
+}

frontend/src/views/chat/chat-block/ChartBlock.vue

@@ -723,11 +723,11 @@ watch(
 
     &:hover,
     &:focus {
-      color: #1cba90;
+      color: var(--ed-color-primary);
     }
 
     &:active {
-      color: #189e7a;
+      color: var(--ed-color-primary-dark-2);
     }
   }
 

frontend/src/views/dashboard/common/ResourceTree.vue

@@ -475,8 +475,8 @@ defineExpose({
   }
 
   &.active {
-    border: 1px solid #1cba90;
-    color: #1cba90;
+    border: 1px solid var(--ed-color-primary);
+    color: var(--ed-color-primary);
 
     &:hover,
     &:focus {

frontend/src/views/dashboard/editor/Toolbar.vue

@@ -291,7 +291,7 @@ const previewInner = () => {
         background-color: #f5f6f7;
         outline: none;
         font-size: 16px;
-        border: 1px solid #1cba90;
+        border: 1px solid var(--ed-color-primary);
         border-radius: 4px;
         padding-left: 4px;
         height: 100%;

frontend/src/views/ds/ChatCard.vue

@@ -162,8 +162,8 @@ const SelectDs = () => {
   }
 
   &.is-selected {
-    border: 1px solid #1cba90;
-    background: #1cba901a;
+    border: 1px solid var(--ed-color-primary);
+    background: var(--ed-color-primary-1a, #1cba901a);
   }
 }
 </style>

frontend/src/views/ds/DataTable.vue

@@ -491,12 +491,12 @@ const btnSelectClick = (val: any) => {
       color: #646a73;
 
       &:hover {
-        background: #1cba901a;
-        color: #1cba90;
+        background: var(--ed-color-primary-1a, #1cba901a);
+        color: var(--ed-color-primary);
       }
       &:active {
-        color: #189e7a;
-        background: #1cba9033;
+        color: var(--ed-color-primary-dark-2);
+        background: var(--ed-color-primary-33, #1cba9033);
       }
     }
 
@@ -564,7 +564,7 @@ const btnSelectClick = (val: any) => {
           }
 
           &.isActive {
-            background: #1cba901a;
+            background: var(--ed-color-primary-1a, #1cba901a);
             color: var(--ed-color-primary);
           }
         }
@@ -660,7 +660,7 @@ const btnSelectClick = (val: any) => {
           border-radius: 4px;
 
           .is-active {
-            background: #1cba901a;
+            background: var(--ed-color-primary-1a, #1cba901a);
           }
 
           .ed-button:not(.is-active) {

frontend/src/views/ds/DatasourceListSide.vue

@@ -97,7 +97,7 @@ const handleModelClick = (item: any) => {
       }
 
       &.isActive {
-        background: #1cba901a;
+        background: var(--ed-color-primary-1a, #1cba901a);
         color: var(--ed-color-primary);
       }
     }

frontend/src/views/ds/DelMessageBox.vue

@@ -48,7 +48,7 @@ defineProps({
       text-decoration: underline;
       text-decoration-style: solid;
       cursor: pointer;
-      color: #1cba90;
+      color: var(--ed-color-primary);
     }
   }
 }

frontend/src/views/embedded/assistant.vue

@@ -73,7 +73,7 @@ const textareaVal = ref('')
   background-color: #fff;
   position: relative;
   .header {
-    background: #1cba9014;
+    background: var(--ed-color-primary-14, #1cba9014);
     height: 56px;
     padding: 0 16px;
     display: flex;

frontend/src/views/embedded/index.vue

@@ -140,7 +140,7 @@ onBeforeUnmount(() => {
     z-index: 100;
     height: 56px;
     line-height: 56px;
-    background: #1cba9014;
+    background: var(--ed-color-primary-14, #1cba9014);
     height: 56px;
     padding: 0 16px;
     display: flex;

frontend/src/views/system/embedded/Card.vue

@@ -104,8 +104,8 @@ const handleEmbedded = () => {
       color: #d97400;
 
       &.is-base {
-        background: #1cba9033;
-        color: #189e7a;
+        background: var(--ed-color-primary-33, #1cba9033);
+        color: var(--ed-color-primary-dark-2);
       }
     }
   }

frontend/src/views/system/embedded/DsCard.vue

@@ -117,10 +117,10 @@ const handlePublic = () => {
     }
 
     .default {
-      background: #1cba9033;
+      background: var(--ed-color-primary-33, #1cba9033);
       padding: 0 4px;
       border-radius: 4px;
-      color: #189e7a;
+      color: var(--ed-color-primary-dark-2);
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;

frontend/src/views/system/embedded/index.vue

@@ -962,7 +962,7 @@ const saveHandler = () => {
       border-radius: 6px;
 
       .is-active {
-        background: #1cba901a;
+        background: var(--ed-color-primary-1a, #1cba901a);
       }
 
       .ed-button:not(.is-active) {

frontend/src/views/system/member/index.vue

@@ -506,8 +506,8 @@ const handleCurrentChange = (val: number) => {
           top: 0;
           width: calc(100% - 1px);
           height: calc(100% - 2px);
-          background: #1cba901a;
-          border: 1px solid #1cba90;
+          background: var(--ed-color-primary-1a, #1cba901a);
+          border: 1px solid var(--ed-color-primary);
           border-bottom-right-radius: 6px;
           border-top-right-radius: 6px;
           pointer-events: none;

frontend/src/views/system/model/Card.vue

@@ -122,10 +122,10 @@ defineExpose({ showErrorMask })
     }
     .default {
       margin-left: auto;
-      background: #1cba9033;
+      background: var(--ed-color-primary-33, #1cba9033);
       padding: 0 4px;
       border-radius: 4px;
-      color: #189e7a;
+      color: var(--ed-color-primary-dark-2);
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;

frontend/src/views/system/model/ModelForm.vue

@@ -558,7 +558,7 @@ defineExpose({
       }
 
       :deep(.ed-pager li.number:hover) {
-        background-color: #1cba901a;
+        background-color: var(--ed-color-primary-1a, #1cba901a);
       }
     }
 

frontend/src/views/system/model/ModelListSide.vue

@@ -88,7 +88,7 @@ const handleModelClick = (item: any) => {
       }
 
       &.isActive {
-        background: #1cba901a;
+        background: var(--ed-color-primary-1a, #1cba901a);
         color: var(--ed-color-primary);
       }
     }

frontend/src/views/system/permission/auth-tree/AuthTree.vue

@@ -239,9 +239,9 @@ const del = (index: any, child: any) => {
       padding: 0 10px;
       margin-right: 10px;
       font-size: 14px;
-      color: #1cba90;
+      color: var(--ed-color-primary);
       background: #fff;
-      border: 1px solid #1cba90;
+      border: 1px solid var(--ed-color-primary);
       border-radius: 6px;
     }
   }

frontend/src/views/system/workspace/index.vue

@@ -600,7 +600,7 @@ const handleCurrentChange = (val: number) => {
           position: absolute;
           width: 26px;
           height: 26px;
-          background: #1cba901a;
+          background: var(--ed-color-primary-1a, #1cba901a);
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
@@ -681,7 +681,7 @@ const handleCurrentChange = (val: number) => {
         }
 
         &.isActive {
-          background: #1cba901a;
+          background: var(--ed-color-primary-1a, #1cba901a);
           color: var(--ed-color-primary);
         }
       }

frontend/src/vite-env.d.ts

@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+declare module 'less/lib/less/functions/color.js'
+declare module 'less/lib/less/tree/color.js'