fix: reset data according to version

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

@@ -17,7 +17,6 @@ import { useComponentThemeOverrides } from '@/composable/useComponentThemeOverri
 import { usePersonalization } from '@/composable/usePersonalization'
 import { mediaQueryInjectionKey } from '@/injection'
 import { usePreferencesStore } from '@/stores/preferences'
-import { useSystemStore } from '@/stores/system'
 import twColors from '@/utils/tailwindColor'
 
 import NoiseModal from './NoiseModal.vue'
@@ -26,7 +25,6 @@ import WatermarkModal from './WatermarkModal.vue'
 const mediaQuery = inject(mediaQueryInjectionKey, null)
 
 const preferencesStore = usePreferencesStore()
-const systemStore = useSystemStore()
 
 const { color, setColor } = usePersonalization()
 

src/main.ts

@@ -5,6 +5,24 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 import router from './router'
+import { DEFAULT_PREFERENCES_OPTIONS, usePreferencesStore } from './stores/preferences'
+import { useTabsStore } from './stores/tabs'
+import { useUserStore } from './stores/user'
+import { haveSameKeys } from './utils/lodash-helpers'
+
+function clearSystemData() {
+  const preferencesStore = usePreferencesStore()
+  const tabsStore = useTabsStore()
+  const userStore = useUserStore()
+
+  const oldLocalStorage = localStorage.getItem('configure')
+  if (oldLocalStorage && haveSameKeys(preferencesStore.preferences, DEFAULT_PREFERENCES_OPTIONS)) {
+    tabsStore.clearTabs()
+    preferencesStore.reset()
+    userStore.cleanup()
+    localStorage.clear()
+  }
+}
 
 async function setupApp() {
   const app = createApp(App)
@@ -12,6 +30,8 @@ async function setupApp() {
   app.use(createPinia())
   app.use(router)
 
+  clearSystemData()
+
   await router.isReady()
 
   if (window.loaderElement) {

src/stores/preferences.ts

@@ -1,10 +1,8 @@
 import { useStorage } from '@vueuse/core'
-import { mergeWith, flatMapDeep, keys, sortBy, isEqual, isPlainObject } from 'lodash-es'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { ref, watch } from 'vue'
 
-import { useTabsStore } from './tabs'
-import { useUserStore } from './user'
+import { mergeWithArrayReplace } from '@/utils/lodash-helpers'
 
 import type { WatermarkProps } from 'naive-ui'
 
@@ -32,7 +30,7 @@ export interface PreferencesOptions {
   noiseOpacity: number
 }
 
-const DEFAULT_PREFERENCES_OPTIONS: PreferencesOptions = {
+export const DEFAULT_PREFERENCES_OPTIONS: PreferencesOptions = {
   menu: {
     collapsed: false,
     width: 64,
@@ -75,32 +73,13 @@ 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)) {
-        return srcValue
-      }
-    })
+    preferences.value = mergeWithArrayReplace(preferences.value, options)
   }
 
   const setLayoutSlideDirection = (direction: LayoutSlideDirection) => {
@@ -111,14 +90,6 @@ export const usePreferencesStore = defineStore('preferencesStore', () => {
     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) => {

src/stores/system.ts

@@ -1,42 +0,0 @@
-import { useStorage } from '@vueuse/core'
-import { defineStore } from 'pinia'
-
-import packageJson from '@/../package.json'
-
-import { usePreferencesStore } from './preferences'
-import { useTabsStore } from './tabs'
-import { useUserStore } from './user'
-
-type SystemInfoOptions = {
-  version: string
-}
-
-const DEFAULT_SYSTEM_INFO_OPTIONS: SystemInfoOptions = {
-  version: packageJson.version,
-}
-
-export const useSystemStore = defineStore('systemStore', () => {
-  const rawSystemStore = localStorage.getItem('systemInfo')
-
-  const systemInfo = useStorage<SystemInfoOptions>('systemInfo', DEFAULT_SYSTEM_INFO_OPTIONS)
-
-  const oldLocalStorage = localStorage.getItem('configure')
-  const storedVersion = rawSystemStore ? JSON.parse(rawSystemStore).version : null
-  const currentVersion = packageJson.version
-
-  if (oldLocalStorage || storedVersion) {
-    const shouldClear = !storedVersion || storedVersion !== currentVersion
-    if (shouldClear) {
-      useTabsStore().clearTabs()
-      usePreferencesStore().reset()
-      useUserStore().cleanup()
-      localStorage.clear()
-    }
-
-    systemInfo.value = { version: packageJson.version }
-  }
-
-  return {
-    systemInfo,
-  }
-})

src/utils/lodash-helpers.ts

@@ -0,0 +1,24 @@
+import { mergeWith, flatMapDeep, keys, sortBy, isEqual, isPlainObject } from 'lodash-es'
+
+export function mergeWithArrayReplace<T>(target: T, source: any): T {
+  return mergeWith({}, target, source, (objValue, srcValue) => {
+    if (Array.isArray(objValue) && Array.isArray(srcValue)) {
+      return srcValue
+    }
+  })
+}
+
+export 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
+  })
+}
+
+export 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)
+}

src/utils/lodash-heplers.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest'
+
+import { getAllKeys, haveSameKeys, mergeWithArrayReplace } from './lodash-helpers'
+
+describe('lodash-helpers', () => {
+  it('should be mergeWithArrayReplace', () => {
+
+    const obj1 = {
+      a: 1,
+      b: 2,
+      c: 3,
+      d: {
+        e: 4,
+        f: 5,
+      },
+      g: [1, 2]
+    }
+
+    const obj2 = {
+      a: 1,
+      b: 2,
+      c: 3,
+      d: {
+        f: 5,
+        z: 10,
+      },
+      g: [3, 2, 1],
+    }
+
+    const result = mergeWithArrayReplace(obj1, obj2)
+
+    expect(result).toEqual({
+      a: 1,
+      b: 2,
+      c: 3,
+      d: {
+        e: 4,
+        f: 5,
+        z: 10,
+      },
+      g: [3, 2, 1],
+    })
+  })
+
+  it('should be getAllKeys', () => {
+    const obj = {
+      a: 1,
+      b: 2,
+      c: 3,
+    }
+
+    const result = getAllKeys(obj)
+
+    expect(result).toEqual(['a', 'b', 'c'])
+  })
+
+  it('should be haveSameKeys', () => {
+    const obj1 = {
+      a: 1,
+      b: 2,
+      c: 3,
+      d: {
+        e: 4,
+        f: 5,
+      },
+    }
+
+    const obj2 = {
+      a: 11,
+      b: 22,
+      c: 32,
+      d: {
+        e: 4,
+        f: 5,
+      },
+    }
+
+    const result = haveSameKeys(obj1, obj2)
+
+    expect(result).toBe(true)
+  })
+})