1.修复因permission.ts、usePageLoading.ts与useTitle.ts在初始化Pinia之前调用导致无法存储应用配置问题(app.ts中的配置令牌)，将permission.ts中调用useAppStoreWithOut()的位置改为路由守卫中调用，同步修改另外两个文件的调用位置。

2.修复水印设置后刷新就没有了的问题;水印设置输入框改为固定宽，以防止label被挤压。
3.修改app.ts中的存储，将useCache存储的个别配置都改为pinia存储（pinia存储问题修复后）

src/App.vue

@@ -2,8 +2,8 @@
 import { isDark } from '@/utils/is'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
-import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
 import routerSearch from '@/components/RouterSearch/index.vue'
+import { useWatermark } from '@/hooks/web/useWatermark'
 
 defineOptions({ name: 'APP' })
 
@@ -12,17 +12,18 @@ const prefixCls = getPrefixCls('app')
 const appStore = useAppStore()
 const currentSize = computed(() => appStore.getCurrentSize)
 const greyMode = computed(() => appStore.getGreyMode)
-const { wsCache } = useCache()
+const { setWatermark } = useWatermark()
 
 // 根据浏览器当前主题设置系统主题色
 const setDefaultTheme = () => {
-  let isDarkTheme = wsCache.get(CACHE_KEY.IS_DARK)
+  let isDarkTheme = appStore.isDark
   if (isDarkTheme === null) {
     isDarkTheme = isDark()
   }
   appStore.setIsDark(isDarkTheme)
 }
 setDefaultTheme()
+setWatermark(appStore.getWatermark)
 </script>
 <template>
   <ConfigGlobal :size="currentSize">

src/hooks/web/usePageLoading.ts

@@ -1,13 +1,14 @@
 import { useAppStoreWithOut } from '@/store/modules/app'
 
-const appStore = useAppStoreWithOut()
 
 export const usePageLoading = () => {
   const loadStart = () => {
+    const appStore = useAppStoreWithOut()
     appStore.setPageLoading(true)
   }
 
   const loadDone = () => {
+    const appStore = useAppStoreWithOut()
     appStore.setPageLoading(false)
   }
 

src/hooks/web/useTitle.ts

@@ -2,9 +2,9 @@ import { watch, ref } from 'vue'
 import { isString } from '@/utils/is'
 import { useAppStoreWithOut } from '@/store/modules/app'
 
-const appStore = useAppStoreWithOut()
-
 export const useTitle = (newTitle?: string) => {
+
+  const appStore = useAppStoreWithOut()
   const { t } = useI18n()
   const title = ref(
     newTitle ? `${appStore.getTitle} - ${t(newTitle as string)}` : appStore.getTitle

src/hooks/web/useWatermark.ts

@@ -4,22 +4,19 @@ import { watch } from 'vue'
 const domSymbol = Symbol('watermark-dom')
 
 export function useWatermark(appendEl: HTMLElement | null = document.body) {
-  let func: Fn = () => {}
   const id = domSymbol.toString()
   const appStore = useAppStore()
-  let watermarkStr = ''
+
-  
   const clear = () => {
     const domId = document.getElementById(id)
     if (domId) {
       const el = appendEl
       el && el.removeChild(domId)
     }
-    window.removeEventListener('resize', func)
   }
-  const createWatermark = (str: string) => {
+  const createWatermark = (str: string | null) => {
     clear()
-
+    if (!str) return
     const can = document.createElement('canvas')
     can.width = 300
     can.height = 240
@@ -49,21 +46,17 @@ export function useWatermark(appendEl: HTMLElement | null = document.body) {
     return id
   }
 
-  function setWatermark(str: string) {
+  function setWatermark(str: string|null) {
-    watermarkStr = str
+    appStore.setWatermark(str)
     createWatermark(str)
-    func = () => {
-      createWatermark(str)
-    }
-    window.addEventListener('resize', func)
   }
 
   // 监听主题变化
   watch(
-    () => appStore.getIsDark,
+    () => appStore.getWatermark,
-    () => {
+    (watermark) => {
-      if (watermarkStr) {
+      if (watermark) {
-        createWatermark(watermarkStr)
+        createWatermark(watermark)
       }
     }
   )

src/layout/components/Setting/src/components/InterfaceDisplay.vue

@@ -13,7 +13,7 @@ const { setWatermark } = useWatermark()
 const prefixCls = getPrefixCls('interface-display')
 const appStore = useAppStore()
 
-const water = ref()
+const watermark = ref(appStore.getWatermark)
 
 // 面包屑
 const breadcrumb = ref(appStore.getBreadcrumb)
@@ -130,8 +130,8 @@ const fixedMenuChange = (show: boolean) => {
 }
 
 // 设置水印
-const setWater = () => {
+const setWatermarkStr = (value: string) => {
-  setWatermark(water.value)
+  setWatermark(value)
 }
 
 const layout = computed(() => appStore.getLayout)
@@ -224,13 +224,13 @@ watch(
     </div>
 
     <div class="flex items-center justify-between">
-      <span class="text-14px">{{ t('setting.fixedMenu') }}</span>
+      <span class="text-14px w-20">{{ t('setting.fixedMenu') }}</span>
       <ElSwitch v-model="fixedMenu" @change="fixedMenuChange" />
     </div>
 
     <div class="flex items-center justify-between">
-      <span class="text-14px">{{ t('watermark.watermark') }}</span>
+      <div class="text-14px">{{ t('watermark.watermark') }}</div>
-      <ElInput v-model="water" class="right-1 w-20" @change="setWater()" />
+      <ElInput v-model="watermark" class="right-1 w-20" style="width: 200px;" @change="setWatermarkStr" />
     </div>
   </div>
 </template>

src/permission.ts

@@ -11,8 +11,6 @@ import { usePermissionStoreWithOut } from '@/store/modules/permission'
 
 const { start, done } = useNProgress()
 
-const { loadStart, loadDone } = usePageLoading()
-
 const parseURL = (
   url: string | null | undefined
 ): { basePath: string; paramsObject: { [key: string]: string } } => {
@@ -58,6 +56,7 @@ const whiteList = [
 
 // 路由加载前
 router.beforeEach(async (to, from, next) => {
+  const { loadStart } = usePageLoading()
   start()
   loadStart()
   if (getAccessToken()) {
@@ -100,6 +99,7 @@ router.beforeEach(async (to, from, next) => {
 })
 
 router.afterEach((to) => {
+  const { loadDone } = usePageLoading()
   useTitle(to?.meta?.title as string)
   done() // 结束Progress
   loadDone()

src/store/modules/app.ts

@@ -2,13 +2,10 @@ import { defineStore } from 'pinia'
 import { store } from '../index'
 import { humpToUnderline, setCssVar } from '@/utils'
 import { ElMessage } from 'element-plus'
-import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
 import { ElementPlusSize } from '@/types/elementPlus'
 import { LayoutType } from '@/types/layout'
 import { ThemeTypes } from '@/types/theme'
 
-const { wsCache } = useCache()
-
 interface AppState {
   breadcrumb: boolean
   breadcrumbIcon: boolean
@@ -37,6 +34,7 @@ interface AppState {
   footer: boolean
   theme: ThemeTypes
   fixedMenu: boolean
+  watermark: string | null
 }
 
 export const useAppStore = defineStore('app', {
@@ -65,12 +63,13 @@ export const useAppStore = defineStore('app', {
       fixedHeader: true, // 固定toolheader
       footer: true, // 显示页脚
       greyMode: false, // 是否开始灰色模式，用于特殊悼念日
-      fixedMenu: wsCache.get('fixedMenu') || false, // 是否固定菜单
+      fixedMenu: false, // 是否固定菜单
+      watermark: null,
 
-      layout: wsCache.get(CACHE_KEY.LAYOUT) || 'classic', // layout布局
+      layout: 'classic', // layout布局
-      isDark: wsCache.get(CACHE_KEY.IS_DARK) || false, // 是否是暗黑模式
+      isDark: false, // 是否是暗黑模式
-      currentSize: wsCache.get('default') || 'default', // 组件尺寸
+      currentSize: 'default', // 组件尺寸
-      theme: wsCache.get(CACHE_KEY.THEME) || {
+      theme: {
         // 主题色
         elColorPrimary: '#409eff',
         // 左侧菜单边框颜色
@@ -180,6 +179,9 @@ export const useAppStore = defineStore('app', {
     },
     getFooter(): boolean {
       return this.footer
+    },
+    getWatermark(): string | null {
+      return this.watermark
     }
   },
   actions: {
@@ -229,7 +231,6 @@ export const useAppStore = defineStore('app', {
       this.greyMode = greyMode
     },
     setFixedMenu(fixedMenu: boolean) {
-      wsCache.set('fixedMenu', fixedMenu)
       this.fixedMenu = fixedMenu
     },
     setPageLoading(pageLoading: boolean) {
@@ -241,7 +242,6 @@ export const useAppStore = defineStore('app', {
         return
       }
       this.layout = layout
-      wsCache.set(CACHE_KEY.LAYOUT, this.layout)
     },
     setTitle(title: string) {
       this.title = title
@@ -255,18 +255,15 @@ export const useAppStore = defineStore('app', {
         document.documentElement.classList.add('light')
         document.documentElement.classList.remove('dark')
       }
-      wsCache.set(CACHE_KEY.IS_DARK, this.isDark)
     },
     setCurrentSize(currentSize: ElementPlusSize) {
       this.currentSize = currentSize
-      wsCache.set('currentSize', this.currentSize)
     },
     setMobile(mobile: boolean) {
       this.mobile = mobile
     },
     setTheme(theme: ThemeTypes) {
       this.theme = Object.assign(this.theme, theme)
-      wsCache.set(CACHE_KEY.THEME, this.theme)
     },
     setCssVarTheme() {
       for (const key in this.theme) {
@@ -275,9 +272,12 @@ export const useAppStore = defineStore('app', {
     },
     setFooter(footer: boolean) {
       this.footer = footer
+    },
+    setWatermark(watermark: string|null) {
+      this.watermark = watermark
     }
   },
-  persist: false
+  persist: true
 })
 
 export const useAppStoreWithOut = () => {