fix: reset data according to version

src/layouts/aside/mobile/MobileLeftAside.vue

@@ -11,7 +11,7 @@ const preferencesStore = usePreferencesStore()
   <div
     class="absolute top-0 left-0 flex h-svh flex-col gap-y-4 py-4 transition-[translate] sm:hidden"
     :class="{
-      '-translate-x-full': preferencesStore.preferences.mobile.mainLayoutSlider !== 'right',
+      '-translate-x-full': preferencesStore.layoutSlideDirection !== 'right',
     }"
   >
     <LogoArea />

src/layouts/aside/mobile/MobileRightAside.vue

@@ -20,7 +20,7 @@ provide('ButtonAnimationInject', provideButtonAnimation)
   <div
     class="absolute top-0 right-0 h-svh p-4 transition-[translate] sm:hidden"
     :class="{
-      'translate-x-full': preferencesStore.preferences.mobile.mainLayoutSlider !== 'left',
+      'translate-x-full': preferencesStore.layoutSlideDirection !== 'left',
     }"
   >
     <div class="flex h-full items-center justify-between">

src/layouts/header/actions/component/PreferencesDrawer.vue

@@ -11,6 +11,7 @@ import {
 } from 'naive-ui'
 import { h, ref, inject, watch } from 'vue'
 
+import packageJson from '@/../package.json'
 import { ButtonAnimation } from '@/components'
 import { useComponentThemeOverrides } from '@/composable/useComponentThemeOverrides'
 import { usePersonalization } from '@/composable/usePersonalization'
@@ -339,7 +340,7 @@ watch(
               <span class="iconify size-5 ph--gear-fine" />
               <span class="leading-4">当前版本</span>
             </div>
-            <span class="leading-4">{{ systemStore.systemInfo.version }}</span>
+            <span class="leading-4">{{ packageJson.version }}</span>
           </div>
         </template>
       </NDrawerContent>

src/layouts/header/mobile/MobileHeader.vue

@@ -4,25 +4,20 @@ import Logo from '@/components/Logo.vue'
 import router from '@/router'
 import { usePreferencesStore } from '@/stores/preferences'
 
-import type { PreferencesOptions } from '@/stores/preferences'
+import type { LayoutSlideDirection } from '@/stores/preferences'
 
 const preferencesStore = usePreferencesStore()
-const { modify } = preferencesStore
+const { setLayoutSlideDirection } = preferencesStore
 
-const mainLayoutSliderToRight = (direction: PreferencesOptions['mobile']['mainLayoutSlider']) => {
-  modify({
-    mobile: {
-      mainLayoutSlider:
-        preferencesStore.preferences.mobile.mainLayoutSlider === direction ? null : direction,
-    },
-  })
+const toggleLayoutSlideDirection = (direction: LayoutSlideDirection) => {
+  setLayoutSlideDirection(direction === preferencesStore.layoutSlideDirection ? null : direction)
 }
 </script>
 <template>
   <div class="flex items-center justify-between px-4 py-3 sm:hidden">
     <div
       class="size-9"
-      @click="mainLayoutSliderToRight('right')"
+      @click="toggleLayoutSlideDirection('right')"
     >
       <Logo />
     </div>
@@ -34,7 +29,7 @@ const mainLayoutSliderToRight = (direction: PreferencesOptions['mobile']['mainLa
       <span class="text-base">{{ router.currentRoute.value.meta.title }}</span>
     </div>
     <div class="flex items-center gap-x-2">
-      <ButtonAnimation @click="mainLayoutSliderToRight('left')">
+      <ButtonAnimation @click="toggleLayoutSlideDirection('left')">
         <span class="iconify ph--list" />
       </ButtonAnimation>
     </div>

src/layouts/index.vue

@@ -30,11 +30,11 @@ const preferencesStore = usePreferencesStore()
 const { scrollbarInMainLayout } = useComponentThemeOverrides()
 
 const mainLayoutStyle = computed<CSSProperties | null>(() => {
-  return preferencesStore.preferences.mobile.mainLayoutSlider === 'right'
+  return preferencesStore.layoutSlideDirection === 'right'
     ? {
         transform: `translate(${preferencesStore.preferences.menu.maxWidth || 0}px) scale(0.88)`,
       }
-    : preferencesStore.preferences.mobile.mainLayoutSlider === 'left'
+    : preferencesStore.layoutSlideDirection === 'left'
       ? {
           transform: `translate(-${52}px) scale(0.88)`,
         }

src/stores/preferences.ts

@@ -1,19 +1,21 @@
 import { useStorage } from '@vueuse/core'
-import { mergeWith } from 'lodash-es'
+import { mergeWith, flatMapDeep, keys, sortBy, isEqual, isPlainObject } from 'lodash-es'
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
+
+import { useTabsStore } from './tabs'
+import { useUserStore } from './user'
 
 import type { WatermarkProps } from 'naive-ui'
 
+export type LayoutSlideDirection = 'left' | 'right' | null
+
 export interface PreferencesOptions {
   menu: Partial<{
     collapsed: boolean
     width: number
     maxWidth: number
   }>
-  mobile: {
-    mainLayoutSlider: 'left' | 'right' | null
-  }
   shouldRefreshTab: boolean
   showFooter: boolean
   showLogo: boolean
@@ -36,9 +38,6 @@ const DEFAULT_PREFERENCES_OPTIONS: PreferencesOptions = {
     width: 64,
     maxWidth: 272,
   },
-  mobile: {
-    mainLayoutSlider: null,
-  },
   shouldRefreshTab: false,
   showFooter: true,
   showTabs: true,
@@ -76,9 +75,26 @@ const DEFAULT_PREFERENCES_OPTIONS: PreferencesOptions = {
   noiseOpacity: 0.02,
 }
 
+function getAllKeys(obj: Record<string, any>, prefix = ''): string[] {
+  return flatMapDeep(keys(obj), (key) => {
+    const fullKey = prefix ? `${prefix}.${key}` : key
+    return isPlainObject(obj[key])
+      ? [fullKey, ...getAllKeys(obj[key] as Record<string, any>, fullKey)]
+      : fullKey
+  })
+}
+
+function haveSameKeys<T extends object, U extends object>(a: T, b: U): boolean {
+  const keysA = sortBy(getAllKeys(a as Record<string, any>))
+  const keysB = sortBy(getAllKeys(b as Record<string, any>))
+  return isEqual(keysA, keysB)
+}
+
 export const usePreferencesStore = defineStore('preferencesStore', () => {
   const preferences = useStorage<PreferencesOptions>('preferences', DEFAULT_PREFERENCES_OPTIONS)
 
+  const layoutSlideDirection = ref<LayoutSlideDirection>(null)
+
   const modify = (options: Partial<PreferencesOptions>) => {
     preferences.value = mergeWith({}, preferences.value, options, (objValue, srcValue) => {
       if (Array.isArray(objValue) && Array.isArray(srcValue)) {
@@ -87,10 +103,22 @@ export const usePreferencesStore = defineStore('preferencesStore', () => {
     })
   }
 
+  const setLayoutSlideDirection = (direction: LayoutSlideDirection) => {
+    layoutSlideDirection.value = direction
+  }
+
   const reset = () => {
     preferences.value = structuredClone(DEFAULT_PREFERENCES_OPTIONS)
   }
 
+  const oldLocalStorage = localStorage.getItem('configure')
+  if (oldLocalStorage || haveSameKeys(preferences.value, DEFAULT_PREFERENCES_OPTIONS)) {
+    useTabsStore().clearTabs()
+    reset()
+    useUserStore().cleanup()
+    localStorage.clear()
+  }
+
   watch(
     () => preferences.value.enableTextSelect,
     (newValue) => {
@@ -103,6 +131,8 @@ export const usePreferencesStore = defineStore('preferencesStore', () => {
 
   return {
     preferences,
+    layoutSlideDirection,
+    setLayoutSlideDirection,
     reset,
     modify,
   }