✨ login page

src/store/modules/langStore.ts

@@ -1,11 +1,12 @@
 import {defineStore} from 'pinia';
 import {ref} from 'vue';
 import pinia from "@/store/pinia.ts";
+import {parse, stringify} from "zipson/lib";
 
 export const langStore = defineStore(
     'lang',
     () => {
-        const lang = ref<string>('');
+        const lang = ref<string>('zh');
 
         function setLang(value: string) {
             lang.value = value;
@@ -23,11 +24,14 @@ export const langStore = defineStore(
     },
     {
         // 开启数据持久化
-        persistedState: {
+        persist: {
             key: 'lang',
             storage: localStorage,
-            includePaths: ["lang"],
-            overwrite: true,
+            paths: ["lang"],
+            serializer: {
+                deserialize: parse,
+                serialize: stringify,
+            },
         }
     }
 );

src/store/modules/themeStore.ts

@@ -2,6 +2,7 @@ import {defineStore} from 'pinia';
 import {computed, ref} from 'vue';
 import {theme} from 'ant-design-vue';
 import variables from '@/assets/styles/colors.module.scss';
+import {parse, stringify} from "zipson/lib";
 
 /**
  * theme 配置 开启持久化
@@ -21,6 +22,7 @@ export const useThemeStore = defineStore(
             return {
                 token: {
                     colorPrimary: variables[themeName.value] || '#27ba9b',
+                    borderRadius: 10,
                     colorSuccess: '#1dc779',
                     colorWarning: '#ffb302',
                     colorError: '#cf4444',
@@ -39,11 +41,14 @@ export const useThemeStore = defineStore(
         return {themeName, themeConfig, darkMode, darkModeComp, setThemeName, toggleDarkMode};
     },
     {
-        persistedState: {
+        persist: {
             key: 'theme',
             storage: localStorage,
-            includePaths: ["themeName", "darkMode"],
-            overwrite: true,
+            paths: ["themeName", "darkMode"],
+            serializer: {
+                deserialize: parse,
+                serialize: stringify,
+            },
         }
     }
 );

src/store/modules/userStore.ts

@@ -1,6 +1,7 @@
 import {defineStore} from 'pinia';
 import {ref} from 'vue';
 import {User} from "@/types/user";
+import {parse, stringify} from "zipson/lib";
 
 
 export const useAuthStore = defineStore(
@@ -29,11 +30,14 @@ export const useAuthStore = defineStore(
     },
     {
         // 开启数据持久化
-        persistedState: {
+        persist: {
             key: 'user',
             storage: localStorage,
-            includePaths: ["user"],
-            overwrite: true,
+            paths: ["user"],
+            serializer: {
+                deserialize: parse,
+                serialize: stringify,
+            },
         }
     }
 );

src/store/pinia.ts

@@ -1,14 +1,9 @@
 import {createPinia, Pinia} from "pinia";
-import {createPersistedStatePlugin} from "pinia-plugin-persistedstate-2";
-import stringify from 'json-stringify-safe';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import {App} from "vue";
 
 const pinia: Pinia = createPinia();
-const installPersistedStatePlugin = createPersistedStatePlugin({
-    serialize: (value) => stringify(value),
-    deserialize: (value) => JSON.parse(value),
-});
-pinia.use((context) => installPersistedStatePlugin(context));
+pinia.use(piniaPluginPersistedstate)
 
 export function setupStore(app: App<Element>) {
     app.use(pinia);