fix(appearance): After selecting Tech Blue, it will automatically replace buttons, pictures, etc. with corresponding color values.

dataeaseShu · dataeaseShu · commit ca57be2b9e7d · 2025-08-11T10:53:39.000+08:00
diff --git a/frontend/src/assets/blue/Default-avatar_blue.png b/frontend/src/assets/blue/Default-avatar_blue.png
diff --git a/frontend/src/assets/blue/LOGO-blue.png b/frontend/src/assets/blue/LOGO-blue.png
diff --git a/frontend/src/assets/blue/LOGO-head_blue.png b/frontend/src/assets/blue/LOGO-head_blue.png
diff --git a/frontend/src/assets/blue/login-image_blue.png b/frontend/src/assets/blue/login-image_blue.png
diff --git a/frontend/src/components/layout/Menu.vue b/frontend/src/components/layout/Menu.vue
@@ -76,6 +76,7 @@ const routerList = computed(() => {
   .ed-menu-item {
     height: 40px !important;
     border-radius: 6px !important;
+    margin-bottom: 2px;
     &.is-active {
       background-color: #fff !important;
       border-radius: 6px;
diff --git a/frontend/src/components/layout/MenuItem.vue b/frontend/src/components/layout/MenuItem.vue
@@ -5,6 +5,7 @@ import { useRouter, useRoute } from 'vue-router'
 import chat from '@/assets/svg/menu/icon_chat_filled.svg'
 import noChat from '@/assets/svg/menu/icon_chat_outlined.svg'
 import dashboard from '@/assets/svg/menu/icon_dashboard_filled.svg'
+import { useEmitt } from '@/utils/useEmitt'
 import noDashboard from '@/assets/svg/menu/icon_dashboard_outlined.svg'
 import ds from '@/assets/svg/menu/icon_database_filled.svg'
 import noDs from '@/assets/svg/menu/icon_database_outlined.svg'
@@ -58,6 +59,9 @@ const MenuItem = defineComponent({
     }
 
     const handleMenuClick = (e: any) => {
+      if (e.index === '/ds/index') {
+        useEmitt().emitter.emit('ds-index-click')
+      }
       if (e.index) {
         router.push(e.redirect || e.index)
       }
diff --git a/frontend/src/views/chat/ChatList.vue b/frontend/src/views/chat/ChatList.vue
@@ -324,6 +324,7 @@ const handleConfirmPassword = () => {
     line-height: 22px;
     font-size: 14px;
     font-weight: 400;
+    margin-bottom: 2px;
 
     display: flex;
     align-items: center;
diff --git a/frontend/src/views/dashboard/common/ResourceTree.vue b/frontend/src/views/dashboard/common/ResourceTree.vue
@@ -573,6 +573,9 @@ defineExpose({
 .custom-tree {
   height: calc(100vh - 148px);
   padding: 0 8px;
+  :deep(.ed-tree-node) {
+    margin-bottom: 2px;
+  }
 }
 
 .custom-tree-node {
diff --git a/frontend/src/views/dashboard/editor/DashboardChatList.vue b/frontend/src/views/dashboard/editor/DashboardChatList.vue
@@ -175,6 +175,7 @@ const filteredAndGroupedData = computed(() => {
     cursor: pointer;
     border-radius: 6px;
     line-height: 1em;
+    margin-bottom: 2px;
 
     display: flex;
     align-items: center;
diff --git a/frontend/src/views/ds/Datasource.vue b/frontend/src/views/ds/Datasource.vue
@@ -14,6 +14,7 @@ import DatasourceListSide from './DatasourceListSide.vue'
 import DatasourceForm from './DatasourceForm.vue'
 import { datasourceApi } from '@/api/datasource'
 import Card from './Card.vue'
+import { useEmitt } from '@/utils/useEmitt'
 import DelMessageBox from './DelMessageBox.vue'
 import { dsTypeWithImg } from './js/ds-type'
 import { useI18n } from 'vue-i18n'
@@ -234,6 +235,11 @@ const dataTableDetail = (ele: any) => {
 const back = () => {
   currentDataTable.value = null
 }
+
+useEmitt({
+  name: 'ds-index-click',
+  callback: back,
+})
 </script>
 
 <template>
diff --git a/frontend/src/views/system/appearance/LoginPreview.vue b/frontend/src/views/system/appearance/LoginPreview.vue
@@ -93,12 +93,13 @@
 import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
 import login_image from '@/assets/embedded/login_image.png'
 import aboutBg from '@/assets/embedded/LOGO-about.png'
+import logoHeader from '@/assets/blue/LOGO-head_blue.png'
+import logo from '@/assets/blue/LOGO-blue.png'
+import loginImage from '@/assets/blue/login-image_blue.png'
 import { propTypes } from '@/utils/propTypes'
 import { useI18n } from 'vue-i18n'
 import { computed, ref, onMounted, nextTick } from 'vue'
 import elementResizeDetectorMaker from 'element-resize-detector'
-import colorFunctions from 'less/lib/less/functions/color.js'
-import colorTree from 'less/lib/less/tree/color.js'
 const basePath = import.meta.env.VITE_API_BASEPATH
 const baseUrl = basePath + '/appearance/image/'
 const { t } = useI18n()
@@ -113,44 +114,47 @@ const props = defineProps({
   height: propTypes.number.def(425),
   foot: propTypes.string.def(''),
   footContent: propTypes.string.def(''),
+  isBlue: propTypes.bool.def(false),
 })
 const appLoginView = ref()
 const loginContainerWidth = ref(0)
 const pageWeb = computed(() => {
   return !props.web
-    ? '/LOGO-fold.svg'
+    ? props.isBlue
+      ? logoHeader
+      : '/LOGO-fold.svg'
     : props.web.startsWith('blob')
       ? props.web
       : baseUrl + props.web
 })
 const pageLogin = computed(() =>
-  !props.login ? aboutBg : props.login.startsWith('blob') ? props.login : baseUrl + props.login
+  !props.login
+    ? props.isBlue
+      ? logo
+      : aboutBg
+    : props.login.startsWith('blob')
+      ? props.login
+      : baseUrl + props.login
 )
 const pageBg = computed(() =>
-  !props.bg ? null : props.bg.startsWith('blob') ? props.bg : baseUrl + props.bg
+  !props.bg
+    ? props.isBlue
+      ? loginImage
+      : null
+    : props.bg.startsWith('blob')
+      ? props.bg
+      : baseUrl + props.bg
 )
 const pageName = computed(() => props.name)
 const pageSlogan = computed(() => props.slogan)
 const showFoot = computed(() => props.foot && props.foot === 'true')
 const pageFootContent = computed(() =>
   props.foot && props.foot === 'true' ? props.footContent : null
 )
-const pageThemeColor = computed(() => props.themeColor)
-const pageCustomColor = computed(() => props.customColor)
 const customStyle = computed(() => {
   const result = { height: `${props.height + 23}px` } as {
     [key: string]: any
   }
-  if (pageThemeColor.value === 'custom') {
-    result['--ed-color-primary'] = pageCustomColor.value
-  } else {
-    result['--ed-color-primary'] = '#1CBA90'
-  }
-  result['--ed-color-primary-light-5'] = colorFunctions
-    .mix(new colorTree('ffffff'), new colorTree(result['--ed-color-primary'].substring(1)), {
-      value: 40,
-    })
-    .toRGB()
   return result
 })
 const showLoginImage = computed<boolean>(() => {
diff --git a/frontend/src/views/system/appearance/Person.vue b/frontend/src/views/system/appearance/Person.vue
@@ -9,10 +9,12 @@ import icon_translate_outlined from '@/assets/svg/icon_translate_outlined.svg'
 import icon_logout_outlined from '@/assets/svg/icon_logout_outlined.svg'
 import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 import { useUserStore } from '@/stores/user'
+import DefaultAvatarBlue from '@/assets/blue/Default-avatar_blue.png'
 
 defineProps({
   showDoc: { type: [Boolean], required: true },
   showAbout: { type: [Boolean], required: true },
+  isBlue: { type: [Boolean], required: true },
 })
 const userStore = useUserStore()
 const name = computed(() => userStore.getName)
@@ -22,14 +24,19 @@ const account = computed(() => userStore.getAccount)
 <template>
   <div style="position: relative">
     <button class="person" :title="name">
-      <img class="default-avatar" :src="Default_avatar" width="32px" height="32px" />
+      <img
+        class="default-avatar"
+        :src="isBlue ? DefaultAvatarBlue : Default_avatar"
+        width="32px"
+        height="32px"
+      />
       <span class="name ellipsis">{{ name }}</span>
     </button>
-    <div class="ed-popper is-light ed-popover system-person">
+    <div class="ed-popper is-light ed-popover system-person_style">
       <div class="popover">
         <div class="popover-content">
           <div class="info">
-            <img :src="Default_avatar" width="40px" height="40px" />
+            <img :src="isBlue ? DefaultAvatarBlue : Default_avatar" width="40px" height="40px" />
             <div :title="name" class="top ellipsis">{{ name }}</div>
             <div :title="account" class="bottom ellipsis">{{ account }}</div>
           </div>
@@ -89,21 +96,7 @@ const account = computed(() => userStore.getAccount)
   border: none;
   background-color: transparent;
   position: relative;
-
-  &.collapse {
-    min-width: 48px;
-    margin-left: -4px;
-    position: relative;
-    margin-top: -6px;
-    margin-bottom: 16px;
-
-    .default-avatar {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
+  pointer-events: none;
 
   .name {
     font-weight: 400;
@@ -122,31 +115,20 @@ const account = computed(() => userStore.getAccount)
     width: 100%;
     height: 100%;
     border-radius: 6px;
-  }
-
-  &:hover,
-  &:focus {
-    &::after {
-      background: #1f23291a;
-    }
-  }
-
-  &:active {
-    &::after {
-      background: #1f232926;
-    }
+    background: #1f23291a;
   }
 }
 </style>
 
 <style lang="less">
-.system-person.system-person {
+.system-person_style.system-person_style {
   padding: 0;
   width: 200px !important;
   box-shadow: 0px 4px 8px 0px #1f23291a;
   border: 1px solid #dee0e3;
   position: absolute;
-  bottom: 40px;
+  bottom: 44px;
+  pointer-events: none;
 
   &::after {
     content: '';
diff --git a/frontend/src/views/system/appearance/index.vue b/frontend/src/views/system/appearance/index.vue
@@ -15,9 +15,9 @@
                 {{ $t('system.default_turquoise') }}
               </el-button>
               <el-button
-                :class="[themeColor === 'b' && 'is-active']"
+                :class="[themeColor === 'technologyBlue' && 'is-active']"
                 text
-                @click="themeColorChange('b')"
+                @click="themeColorChange('technologyBlue')"
               >
                 {{ $t('system.tech_blue') }}
               </el-button>
@@ -66,6 +66,7 @@
                   :web="web"
                   :bg="bg"
                   :login="login"
+                  :is-blue="isBlue"
                   :height="navigateHeight"
                   :foot="loginForm.foot"
                   :foot-content="loginForm.footContent"
@@ -153,10 +154,23 @@
                         :src="navigate.startsWith('blob') ? navigate : baseUrl + navigate"
                         alt=""
                       />
+
+                      <img
+                        v-else-if="isBlue"
+                        width="131"
+                        height="30"
+                        class="logo"
+                        :src="logoBlue"
+                        alt=""
+                      />
                       <logo v-else></logo>
                     </div>
                     <div class="bottom-sql">
-                      <Person :show-about="showAbout" :show-doc="showDoc"></Person>
+                      <Person
+                        :is-blue="isBlue"
+                        :show-about="showAbout"
+                        :show-doc="showDoc"
+                      ></Person>
                       <el-icon size="20" class="fold">
                         <icon_side_fold_outlined></icon_side_fold_outlined>
                       </el-icon>
@@ -200,19 +214,22 @@
 
 <script lang="ts" setup>
 import logo from '@/assets/LOGO.svg'
-import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, nextTick, computed } from 'vue'
 import {
   type FormInstance,
   type FormRules,
   type UploadUserFile,
   ElMessage,
 } from 'element-plus-secondary'
+import logoBlue from '@/assets/blue/LOGO-blue.png'
 import { useI18n } from 'vue-i18n'
 import { request } from '@/utils/request'
 import icon_side_fold_outlined from '@/assets/svg/icon_side-fold_outlined.svg'
 import { useAppearanceStoreWithOut } from '@/stores/appearance'
 import LoginPreview from './LoginPreview.vue'
 import Person from './Person.vue'
+import colorFunctions from 'less/lib/less/functions/color.js'
+import colorTree from 'less/lib/less/tree/color.js'
 // import TinymceEditor from '@/components/rich-text/TinymceEditor.vue'
 import { cloneDeep } from 'lodash-es'
 const appearanceStore = useAppearanceStoreWithOut()
@@ -314,7 +331,9 @@ const defaultTopForm = reactive<{
   showDoc: '0',
   showAbout: '0',
 })
-
+const isBlue = computed(() => {
+  return themeColor.value === 'technologyBlue'
+})
 const configList = [
   {
     logo: t('system.website_logo'),
@@ -479,6 +498,8 @@ const themeColorChange = (val: any) => {
   addChangeArray('themeColor', val)
   if (themeColor.value === 'custom') {
     setPageCustomColor(customColor.value)
+  } else if (isBlue.value) {
+    setPageCustomColor('#3370FF')
   } else {
     setPageCustomColor('#1CBA90')
   }
@@ -488,9 +509,26 @@ const customColorChange = (val: any) => {
   setPageCustomColor(val)
 }
 const setPageCustomColor = (val: any) => {
-  ;(
-    document.getElementsByClassName('appearance-table__content')[0] as HTMLElement
-  )?.style.setProperty('--ed-color-primary', val)
+  const ele = document.getElementsByClassName('appearance-table__content')[0] as HTMLElement
+
+  ele.style.setProperty('--ed-color-primary', val)
+  ele.style.setProperty('--van-blue', val)
+  ele.style.setProperty(
+    '--ed-color-primary-light-5',
+    colorFunctions.mix(new colorTree('ffffff'), new colorTree(val.substr(1)), { value: 40 }).toRGB()
+  )
+  ele.style.setProperty(
+    '--ed-color-primary-light-3',
+    colorFunctions.mix(new colorTree('ffffff'), new colorTree(val.substr(1)), { value: 15 }).toRGB()
+  )
+  ele.style.setProperty('--ed-color-primary-1a', `${val}1a`)
+  ele.style.setProperty('--ed-color-primary-14', `${val}14`)
+  ele.style.setProperty('--ed-color-primary-33', `${val}33`)
+  ele.style.setProperty('--ed-color-primary-99', `${val}99`)
+  ele.style.setProperty(
+    '--ed-color-primary-dark-2',
+    colorFunctions.mix(new colorTree('000000'), new colorTree(val.substr(1)), { value: 15 }).toRGB()
+  )
 }
 const resetLoginForm = (reset2Default?: boolean) => {
   for (const key in loginForm) {
diff --git a/frontend/src/views/system/workspace/index.vue b/frontend/src/views/system/workspace/index.vue
@@ -662,6 +662,7 @@ const handleCurrentChange = (val: number) => {
         border-radius: 4px;
         cursor: pointer;
         padding-right: 8px;
+        margin-bottom: 2px;
 
         .name {
           margin-left: 8px;

Original file line number	Diff line number	Diff line change
`@@ -573,6 +573,9 @@ defineExpose({`
`573`	`573`	`.custom-tree {`
`574`	`574`	`height: calc(100vh - 148px);`
`575`	`575`	`padding: 0 8px;`
	`576`	`+ :deep(.ed-tree-node) {`
	`577`	`+ margin-bottom: 2px;`
	`578`	`+ }`
`576`	`579`	`}`
`577`	`580`
`578`	`581`	`.custom-tree-node {`