fix: 布局组件升级调整

src/store/modules/layout.ts

@@ -1,16 +1,23 @@
-import { CACHE_LOCAL_PROCONFIG } from '@/constants/cache-keys-constants';
-import { localGetJSON, localSetJSON } from '@/utils/cache-local-utils';
+import { theme } from 'ant-design-vue/es';
+import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
 import { defineStore } from 'pinia';
+import {
+  CACHE_LOCAL_PRIMARY_COLOR,
+  CACHE_LOCAL_PROCONFIG,
+} from '@/constants/cache-keys-constants';
+import {
+  localGet,
+  localGetJSON,
+  localSetJSON,
+} from '@/utils/cache-local-utils';
 
 /**布局参数类型 */
 type LayoutStore = {
-  /**布局设置抽屉显示 */
-  visible: boolean;
   /**布局配置 */
   proConfig: {
     /**导航布局 */
     layout: 'side' | 'top' | 'mix';
-    /**全局主题色，需要导入样式文件 */
+    /**全局主题色*/
     theme: 'dark' | 'light';
     /**菜单导航主题色 */
     menuTheme: 'dark' | 'light';
@@ -29,10 +36,33 @@ type LayoutStore = {
     /**内容区域-导航标签项 */
     tabRender: any | boolean | undefined;
   };
+  /**主题配置 */
+  themeConfig: ThemeConfig;
   /**水印内容 */
   waterMarkContent: string;
 };
 
+/**
+ * 获取随机颜色范围
+ * @returns 颜色
+ */
+function getRandomColor(): string {
+  const colors: string[] = [
+    '#f5222d',
+    '#fa541c',
+    '#fa8c16',
+    '#a0d911',
+    '#13c2c2',
+    '#1890ff',
+    '#722ed1',
+    '#eb2f96',
+    '#faad14',
+    '#52c41a',
+  ];
+  const i = Math.floor(Math.random() * 10);
+  return colors[i];
+}
+
 /**判断是否关闭内容区域 */
 const proRender = (render: any) => (render === false ? false : undefined);
 
@@ -40,7 +70,7 @@ const proRender = (render: any) => (render === false ? false : undefined);
 const proConfigLocal: LayoutStore['proConfig'] = localGetJSON(
   CACHE_LOCAL_PROCONFIG
 ) || {
-  layout: 'mix',
+  layout: 'side',
   theme: 'light',
   menuTheme: 'light',
   fixSiderbar: true,
@@ -50,7 +80,6 @@ const proConfigLocal: LayoutStore['proConfig'] = localGetJSON(
 
 const useLayoutStore = defineStore('layout', {
   state: (): LayoutStore => ({
-    visible: false,
     proConfig: {
       layout: proConfigLocal.layout,
       theme: proConfigLocal.theme,
@@ -63,13 +92,27 @@ const useLayoutStore = defineStore('layout', {
       menuHeaderRender: proRender(proConfigLocal.menuHeaderRender),
       tabRender: proRender(proConfigLocal.tabRender),
     },
+    themeConfig: {
+      algorithm: [theme.darkAlgorithm],
+      // algorithm: themeColor["dark"],
+      token: {
+        // colorBgContainer: "#fff",
+        colorPrimary: localGet(CACHE_LOCAL_PRIMARY_COLOR) || '#1890ff',
+        // borderRadius: 6,
+      },
+    },
     waterMarkContent: import.meta.env.VITE_APP_NAME,
   }),
-  actions: {
-    /**改变显示状态 */
-    changeVisibleLayoutSetting() {
-      this.visible = !this.visible;
+  getters: {
+    getColorPrimary(): string {
+      let color = '#1890ff';
+      if (this.themeConfig.token) {
+        color = this.themeConfig.token.colorPrimary || color;
+      }
+      return color;
     },
+  },
+  actions: {
     /**修改水印文字 */
     changeWaterMark(text: string) {
       this.waterMarkContent = text;
@@ -77,10 +120,48 @@ const useLayoutStore = defineStore('layout', {
     /**修改布局设置 */
     changeConf(key: string, value: boolean | string | number | undefined) {
       if (Reflect.has(this.proConfig, key)) {
+        console.log(key, value);
+        if (key === 'theme') {
+          // const themeColor = {
+          //   light: theme.defaultAlgorithm,
+          //   compact: theme.compactAlgorithm,
+          //   dark: theme.darkAlgorithm,
+          // };
+          if (value === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            this.themeConfig.algorithm = [theme.darkAlgorithm];
+          } else {
+            document.documentElement.setAttribute('data-theme', 'light');
+            this.themeConfig.algorithm = [theme.defaultAlgorithm];
+          }
+        }
         Reflect.set(this.proConfig, key, value);
         localSetJSON(CACHE_LOCAL_PROCONFIG, this.proConfig);
       }
     },
+    /**主题色初始化 */
+    initPrimaryColor() {
+      // 主题色初始化
+      this.changePrimaryColor(this.getColorPrimary);
+      // 明暗模式初始化
+      const themeMode = this.proConfig.theme;
+      document.documentElement.setAttribute('data-theme', themeMode);
+      this.changeConf('theme', themeMode);
+    },
+    /**
+     * 主题色变更
+     * @param color 颜色
+     */
+    changePrimaryColor(color?: string) {
+      if (!color) {
+        color = getRandomColor();
+      }
+
+      if (this.themeConfig && this.themeConfig.token) {
+        this.themeConfig.token.colorPrimary = color;
+        localStorage.setItem(CACHE_LOCAL_PRIMARY_COLOR, color);
+      }
+    },
   },
 });
 

src/store/modules/user.ts

@@ -1,7 +1,7 @@
 import defaultAvatar from '@/assets/images/default_avatar.png';
 import useLayoutStore from './layout';
 import { login, logout, getInfo } from '@/api/login';
-import { getToken, setToken, removeToken } from '@/plugins/auth-token';
+import { setToken, removeToken } from '@/plugins/auth-token';
 import { defineStore } from 'pinia';
 import { TOKEN_RESPONSE_FIELD } from '@/constants/token-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -133,10 +133,10 @@ const useUserStore = defineStore('user', {
         }
 
         // 水印文字信息=用户昵称 手机号
-        let waterMarkContent = this.userName;
-        if (this.phonenumber) {
-          waterMarkContent = `${this.userName} ${this.phonenumber}`;
-        }
+        // let waterMarkContent = this.userName;
+        // if (this.phonenumber) {
+        //   waterMarkContent = `${this.userName} ${this.phonenumber}`;
+        // }
         // useLayoutStore().changeWaterMark(waterMarkContent);
         useLayoutStore().changeWaterMark('');
       }