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

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">

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>