feat(System appearance): Adjust global color to support technology blue

dataeaseShu · dataeaseShu · commit 76e9983ea864 · 2025-08-18T18:02:26.000+08:00
diff --git a/frontend/src/components/layout/LayoutDsl.vue b/frontend/src/components/layout/LayoutDsl.vue
@@ -9,10 +9,14 @@ import icon_moments_categories_outlined from '@/assets/svg/icon_moments-categori
 import icon_side_fold_outlined from '@/assets/svg/icon_side-fold_outlined.svg'
 import icon_side_expand_outlined from '@/assets/svg/icon_side-expand_outlined.svg'
 import { useRoute, useRouter } from 'vue-router'
+import { useAppearanceStoreWithOut } from '@/stores/appearance'
+import logo_blue from '@/assets/blue/LOGO-blue.png'
+import logo_fold_blue from '@/assets/blue/LOGO-head_blue.png'
+import { useEmitt } from '@/utils/useEmitt'
 
 const router = useRouter()
 const collapse = ref(false)
-import { useEmitt } from '@/utils/useEmitt'
+const appearanceStore = useAppearanceStoreWithOut()
 
 const handleCollapseChange = (val: any = true) => {
   collapse.value = val
@@ -37,8 +41,20 @@ const showSysmenu = computed(() => {
 <template>
   <div class="system-layout">
     <div class="left-side" :class="collapse && 'left-side-collapse'">
-      <LOGO_fold v-if="collapse" style="margin: 0 0 6px 5px"></LOGO_fold>
-      <LOGO v-else style="margin-bottom: 6px"></LOGO>
+      <template v-if="appearanceStore.isBlue">
+        <img
+          v-if="collapse"
+          width="30"
+          height="30"
+          :src="logo_fold_blue"
+          style="margin: 0 0 6px 5px"
+        />
+        <img v-else width="130" height="31" :src="logo_blue" style="margin-bottom: 6px" />
+      </template>
+      <template v-else>
+        <LOGO_fold v-if="collapse" style="margin: 0 0 6px 5px"></LOGO_fold>
+        <LOGO v-else style="margin-bottom: 6px"></LOGO>
+      </template>
       <Workspace v-if="!showSysmenu" :collapse="collapse"></Workspace>
       <Menu :collapse="collapse"></Menu>
       <div class="bottom">
diff --git a/frontend/src/components/layout/Person.vue b/frontend/src/components/layout/Person.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 import Default_avatar from '@/assets/workspace/default_avatar.png'
+import Default_avatar_blue from '@/assets/blue/Default-avatar_blue.png'
 import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
 import icon_info_outlined_1 from '@/assets/svg/icon_info_outlined_1.svg'
 import { useAppearanceStoreWithOut } from '@/stores/appearance'
@@ -89,14 +90,23 @@ const logout = () => {
   <el-popover trigger="click" popper-class="system-person" :placement="collapse ? 'right' : 'top'">
     <template #reference>
       <button class="person" :title="name" :class="collapse && 'collapse'">
-        <img class="default-avatar" :src="Default_avatar" width="32px" height="32px" />
+        <img
+          class="default-avatar"
+          :src="appearanceStore.isBlue ? Default_avatar_blue : Default_avatar"
+          width="32px"
+          height="32px"
+        />
         <span v-if="!collapse" class="name ellipsis">{{ name }}</span>
       </button></template
     >
     <div class="popover">
       <div class="popover-content">
         <div class="info">
-          <img :src="Default_avatar" width="40px" height="40px" />
+          <img
+            :src="appearanceStore.isBlue ? Default_avatar_blue : Default_avatar"
+            width="40px"
+            height="40px"
+          />
           <div :title="name" class="top ellipsis">{{ name }}</div>
           <div :title="account" class="bottom ellipsis">{{ account }}</div>
         </div>
diff --git a/frontend/src/stores/appearance.ts b/frontend/src/stores/appearance.ts
@@ -94,6 +94,9 @@ export const useAppearanceStore = defineStore('appearanceStore', {
     getThemeColor(): string {
       return this.themeColor!
     },
+    isBlue(): boolean {
+      return this.themeColor! === 'blue'
+    },
     getCustomColor(): string {
       return this.customColor!
     },
@@ -290,7 +293,11 @@ export const useAppearanceStore = defineStore('appearanceStore', {
       this.themeColor = data.themeColor
       this.customColor = data.customColor
       const currentColor =
-        this.themeColor === 'custom' && this.customColor ? this.customColor : '#1CBA90'
+        this.themeColor === 'custom' && this.customColor
+          ? this.customColor
+          : this.isBlue
+            ? '#3370ff'
+            : '#1CBA90'
       document.documentElement.style.setProperty('--ed-color-primary', currentColor)
       document.documentElement.style.setProperty('--van-blue', currentColor)
       document.documentElement.style.setProperty(
@@ -305,6 +312,20 @@ export const useAppearanceStore = defineStore('appearanceStore', {
           .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 15 })
           .toRGB()
       )
+
+      document.documentElement.style.setProperty(
+        '--ed-color-primary-60',
+        colorFunctions
+          .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 60 })
+          .toRGB()
+      )
+
+      document.documentElement.style.setProperty(
+        '--ed-color-primary-80',
+        colorFunctions
+          .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 80 })
+          .toRGB()
+      )
       document.documentElement.style.setProperty('--ed-color-primary-1a', `${currentColor}1a`)
       document.documentElement.style.setProperty('--ed-color-primary-14', `${currentColor}14`)
       document.documentElement.style.setProperty('--ed-color-primary-33', `${currentColor}33`)
diff --git a/frontend/src/views/chat/ChatListContainer.vue b/frontend/src/views/chat/ChatListContainer.vue
@@ -304,14 +304,14 @@ function onChatRenamed(chat: Chat) {
       font-size: 16px;
       font-weight: 500;
 
-      --ed-button-text-color: rgba(28, 186, 144, 1);
-      --ed-button-bg-color: rgba(28, 186, 144, 0.1);
-      --ed-button-border-color: rgba(164, 227, 211, 1);
-      --ed-button-hover-bg-color: rgba(210, 241, 233, 1);
-      --ed-button-hover-text-color: rgba(28, 186, 144, 1);
-      --ed-button-hover-border-color: rgba(28, 186, 144, 1);
-      --ed-button-active-bg-color: rgba(164, 227, 211, 1);
-      --ed-button-active-border-color: rgba(28, 186, 144, 1);
+      --ed-button-text-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+      --ed-button-bg-color: var(--ed-color-primary-1a, #1cba901a);
+      --ed-button-border-color: var(--ed-color-primary-60, #a4e3d3);
+      --ed-button-hover-bg-color: var(--ed-color-primary-80, #d2f1e9);
+      --ed-button-hover-text-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+      --ed-button-hover-border-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+      --ed-button-active-bg-color: var(--ed-color-primary-60, #a4e3d3);
+      --ed-button-active-border-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
     }
 
     .search {
diff --git a/frontend/src/views/chat/index.vue b/frontend/src/views/chat/index.vue
@@ -1124,15 +1124,15 @@ onMounted(() => {
       line-height: 24px;
       font-weight: 500;
 
-      --ed-button-text-color: rgba(28, 186, 144, 1);
-      --ed-button-hover-text-color: rgba(28, 186, 144, 1);
-      --ed-button-active-text-color: rgba(28, 186, 144, 1);
+      --ed-button-text-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+      --ed-button-hover-text-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+      --ed-button-active-text-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
       --ed-button-bg-color: rgba(248, 249, 250, 1);
-      --ed-button-hover-bg-color: rgba(28, 186, 144, 0.1);
+      --ed-button-hover-bg-color: var(--ed-color-primary-1a, #1cba901a);
       --ed-button-border-color: rgba(217, 220, 223, 1);
-      --ed-button-hover-border-color: rgba(28, 186, 144, 1);
+      --ed-button-hover-border-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
       --ed-button-active-bg-color: rgba(28, 186, 144, 0.2);
-      --ed-button-active-border-color: rgba(28, 186, 144, 1);
+      --ed-button-active-border-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
     }
   }
 }
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="login-container">
     <div class="login-left">
-      <img :src="appearanceStore.getBg || login_image" alt="" />
+      <img :src="bg" alt="" />
     </div>
     <div class="login-content">
       <div class="login-right">
-        <img width="227" height="52" :src="appearanceStore.getLogin || aboutBg" alt="" />
+        <img width="227" height="52" :src="loginBg" alt="" />
         <div class="welcome">
           {{ appearanceStore.slogan || $t('common.intelligent_questioning_platform') }}
         </div>
@@ -49,13 +49,15 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { useI18n } from 'vue-i18n'
 import aboutBg from '@/assets/embedded/LOGO-about.png'
 import login_image from '@/assets/embedded/login_image.png'
 import { useAppearanceStoreWithOut } from '@/stores/appearance'
+import logo from '@/assets/blue/LOGO-blue.png'
+import loginImage from '@/assets/blue/login-image_blue.png'
 
 const router = useRouter()
 const userStore = useUserStore()
@@ -67,6 +69,14 @@ const loginForm = ref({
   password: '',
 })
 
+const bg = computed(() => {
+  return appearanceStore.isBlue ? loginImage : appearanceStore.getBg || login_image
+})
+
+const loginBg = computed(() => {
+  return appearanceStore.isBlue ? logo : appearanceStore.getLogin || aboutBg
+})
+
 const rules = {
   username: [{ required: true, message: t('common.your_account_email_address'), trigger: 'blur' }],
   password: [{ required: true, message: t('common.the_correct_password'), trigger: 'blur' }],
