feat(layouts): ✨ [App] 主题切换功能

index.html

@@ -156,13 +156,21 @@
           }
         }
       </style>
-      <div class="loading">
+      <div id="html_loding" class="loading">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
     </div>
+    <script>
+      const appConfigMode = localStorage.getItem('appConfigMode');
+      if (appConfigMode) {
+        const { primaryColor } = JSON.parse(appConfigMode);
+        const loading = document.getElementById('html_loding');
+        loading.style.color = primaryColor;
+      }
+    </script>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package.json

@@ -119,6 +119,7 @@
     "vitest": "^0.24.3",
     "vue-eslint-parser": "^9.1.0",
     "vue-tsc": "^1.0.8",
+    "vue3-colorpicker": "^2.0.4",
     "xlsx": "^0.18.5"
   },
   "license": "MIT",

public/serverConfig.json

@@ -4,6 +4,7 @@
   "sidebarMode": "vertical",
   "themeMode": "day",
   "locale": "zh-ch",
+  "primaryColor": "#409eff",
   "StorageConfig":{
     "type": "localStorage",
     "prefix": "xiaosiAdmin", 

src/App.vue

@@ -1,7 +1,15 @@
 <script setup lang="ts">
   import { ElConfigProvider } from 'element-plus';
+  import { useColorMode } from '@vueuse/core';
+  import { useAppStoreHook } from './store/modules/app';
   import { deffElementLocale } from '@/hooks/web/useI18n';
   const { tolocale } = deffElementLocale();
+
+  const appStore = useAppStoreHook();
+  const color = useColorMode();
+
+  console.log(color);
+  console.log(JSON.parse(JSON.stringify(appStore.appConfigMode)));
 </script>
 
 <template>

src/components/Application/AppTheme.vue

@@ -2,13 +2,16 @@
   import { useColorMode } from '@vueuse/core';
   import SvgIcon from '../SvgIcon/index.vue';
   import { useAppStoreHook } from '@/store/modules/app';
+  import { updateColor } from '@/utils/transformTheme';
 
   const appStore = useAppStoreHook();
   const color = useColorMode();
+
   const toggleDarkMode = () => {
     color.value = color.value === 'dark' ? 'light' : 'dark';
     appStore.appConfigMode.themeMode = color.value;
     appStore.setAppConfigMode(appStore.appConfigMode);
+    updateColor();
   };
 </script>
 

src/config/index.ts

@@ -2,6 +2,7 @@ import type { App } from 'vue';
 import { getConfigInfo } from '@/server/config';
 import type { AppConfig } from '@/store/types';
 import { setStorageConfig } from '@/utils/storage';
+import { updateColor } from '@/utils/transformTheme';
 
 let config: AppConfig = {} as AppConfig;
 
@@ -24,6 +25,7 @@ export async function getServerConfig(app: App): Promise<AppConfig> {
     }
   }
   setStorageConfig(config.StorageConfig);
+  updateColor();
   app.config.globalProperties.$config = getConfig();
   return config;
 }

src/hooks/useTransformTheme.ts

@@ -0,0 +1 @@
+export const useTransformTheme = () => {};

src/hooks/web/useI18n.ts

@@ -31,7 +31,6 @@ export function translateI18n(message: any = '') {
   }
   const key = message.split('.')[0];
   if (key && Object.keys(i18n.global.messages.value[locale]).includes(key)) {
-    // @ts-expect-error: 类型实例化过深，且可能无限
     return i18n.global.t(message);
   }
   return message;

src/layouts/pageLayouts/components/AppTabs/index.vue

@@ -196,7 +196,7 @@
           margin-right: 5px;
         }
         &:hover {
-          background-color: var(--sub-color-2);
+          background-color: var(--sub-color-8);
         }
       }
     }

src/layouts/pageLayouts/components/Breadcrumb/index.vue

@@ -38,7 +38,6 @@
       if (matched.find((i) => i.path === item.path)) return false;
       return route.name === item.name && isEqual(route.query, itemQuery);
     });
-    console.log(matched);
     if (item) matched.push(item as unknown as AppRouteRecordRaw);
     levelList.value = matched.filter(
       (item) => item && item.meta && item.meta.title && !item.meta.breadcrumb,
@@ -79,7 +78,7 @@
 <template>
   <div class="breadcrumb">
     <SvgIcon
-      class="breadcrumb-fold"
+      class="breadcrumb-fold cursor"
       :class="{ 'breadcrumb-unfold': appConfigMode.collapseMenu }"
       name="fold"
       color="#e3e3e3"