✨ add dark mode

src/store/index.ts

@@ -1,7 +1,9 @@
-import {useAuthStore} from '@/store/modules/user.ts'
+import {useAuthStore} from '@/store/modules/userStore.ts';
+import {useThemeStore} from "@/store/modules/themeStore.ts";
 
 export default function useStore() {
     return {
-        user: useAuthStore()
-    }
+        user: useAuthStore(),
+        theme: useThemeStore()
+    };
 }

src/store/modules/themeStore.ts

@@ -0,0 +1,54 @@
+import {defineStore} from 'pinia';
+import {computed, ref} from 'vue';
+import {theme} from 'ant-design-vue';
+import variables from '@/assets/styles/colors.module.scss';
+import {handleLocalforage} from "@/utils/localforage";
+import {parse, stringify} from "zipson/lib";
+
+/**
+ * theme 配置 开启持久化
+ */
+export const useThemeStore = defineStore(
+    'theme',
+    () => {
+        const themeName = ref('green'); // 主题名称
+        const darkMode = ref('light'); // 颜色模式
+        const darkModeComp = computed(() => {
+            document.documentElement.setAttribute('data-dark', darkMode.value);
+            return darkMode.value;
+        });
+        const themeConfig = computed(() => {
+            document.documentElement.setAttribute('data-theme', themeName.value);
+            // 主题配置
+            return {
+                token: {
+                    colorPrimary: variables[themeName.value] || '#27ba9b',
+                    colorSuccess: '#1dc779',
+                    colorWarning: '#ffb302',
+                    colorError: '#cf4444',
+                    colorInfo: variables[themeName.value] || '#27ba9b',
+                    wireframe: true
+                },
+                algorithm: darkMode.value === 'light' ? theme.defaultAlgorithm : theme.darkAlgorithm
+            };
+        });
+        const setThemeName = (value: string) => {
+            themeName.value = value;
+        };
+        const toggleDarkMode = () => {
+            darkMode.value = darkMode.value === 'light' ? 'dark' : 'light';
+        };
+        return {themeName, themeConfig, darkMode, darkModeComp, setThemeName, toggleDarkMode};
+    },
+    {
+        persist: {
+            key: 'theme',
+            paths: ['themeName','darkMode',"darkModeComp","themeConfig"],
+            storage: handleLocalforage,
+            serializer: {
+                deserialize: parse,
+                serialize: stringify,
+            },
+        }
+    }
+);

src/store/modules/user.ts

@@ -1,32 +0,0 @@
-import {defineStore} from 'pinia'
-import {ref} from 'vue'
-
-export const useAuthStore = defineStore(
-    'user',
-    () => {
-        const user = ref<any>()
-
-        function setUser(data: any) {
-            user.value = data
-        }
-
-        function getUser() {
-            return user.value
-        }
-
-        function clearUser() {
-            user.value = void 0
-        }
-
-        return {
-            user,
-            setUser,
-            getUser,
-            clearUser
-        }
-    },
-    {
-        // 开启数据持久化
-        persist: true
-    }
-)

src/store/modules/userStore.ts

@@ -0,0 +1,44 @@
+import {defineStore} from 'pinia';
+import {ref} from 'vue';
+import {User} from "@/types/user";
+import {parse, stringify} from "zipson/lib";
+import {handleLocalforage} from "@/utils/localforage";
+
+
+export const useAuthStore = defineStore(
+    'user',
+    () => {
+        const user = ref<User>();
+
+        function setUser(data: User) {
+            user.value = data;
+        }
+
+        function getUser() {
+            return user.value;
+        }
+
+        function clearUser() {
+            user.value = void 0;
+        }
+
+        return {
+            user,
+            setUser,
+            getUser,
+            clearUser
+        };
+    },
+    {
+        // 开启数据持久化
+        persist: {
+            key: 'user',
+            paths: ['user'],
+            storage: handleLocalforage,
+            serializer: {
+                deserialize: parse,
+                serialize: stringify,
+            },
+        }
+    }
+);