🦄 refactor: 重构代码将 Vuex替换为 Pinia

集成 Pinia 状态管理

src/renderer/App.vue

@@ -12,90 +12,67 @@
 
 <script setup lang="ts">
 import { darkTheme, lightTheme } from 'naive-ui';
-import { computed, onMounted, onUnmounted, watch } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import homeRouter from '@/router/home';
-import globalStore from '@/store';
+import { useMenuStore } from '@/store/modules/menu';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron } from '@/utils';
 
 import { isMobile } from './utils';
 
 const { locale } = useI18n();
+const settingsStore = useSettingsStore();
+const menuStore = useMenuStore();
+const playerStore = usePlayerStore();
 
-const savedLanguage = isElectron
-  ? window.electron.ipcRenderer.sendSync('get-store-value', 'set.language')
-  : JSON.parse(localStorage.getItem('appSettings') || '{}').language || 'zh-CN';
-if (savedLanguage) {
-  locale.value = savedLanguage;
-}
-
-const theme = computed(() => {
-  return globalStore.state.theme;
-});
-
-// 监听字体变化并应用
+// 监听语言变化
 watch(
-  () => [globalStore.state.setData.fontFamily, globalStore.state.setData.fontScope],
-  ([newFont, fontScope]) => {
-    const appElement = document.body;
-    if (!appElement) return;
-
-    const defaultFonts =
-      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
-
-    // 只有在全局模式下才应用字体
-    if (fontScope !== 'global') {
-      appElement.style.fontFamily = defaultFonts;
-      return;
-    }
-
-    if (newFont === 'system-ui') {
-      appElement.style.fontFamily = defaultFonts;
-    } else {
-      // 处理多个字体，确保每个字体名都被正确引用
-      const fontList = newFont.split(',').map((font) => {
-        const trimmedFont = font.trim();
-        // 如果字体名包含空格或特殊字符，添加引号（如果还没有引号的话）
-        return /[\s'"()]/.test(trimmedFont) && !/^['"].*['"]$/.test(trimmedFont)
-          ? `"${trimmedFont}"`
-          : trimmedFont;
-      });
-
-      // 将选择的字体和默认字体组合
-      appElement.style.fontFamily = `${fontList.join(', ')}, ${defaultFonts}`;
+  () => settingsStore.setData.language,
+  (newLanguage) => {
+    if (newLanguage && newLanguage !== locale.value) {
+      locale.value = newLanguage;
     }
   },
   { immediate: true }
 );
 
-// 监听来自主进程的语言切换事件
+const theme = computed(() => {
+  return settingsStore.theme;
+});
+
+// 监听字体变化并应用
+watch(
+  () => [settingsStore.setData.fontFamily, settingsStore.setData.fontScope],
+  ([newFont, fontScope]) => {
+    const appElement = document.body;
+    if (newFont && fontScope === 'global') {
+      appElement.style.fontFamily = newFont;
+    } else {
+      appElement.style.fontFamily = '';
+    }
+  }
+);
+
 const handleSetLanguage = (_: any, value: string) => {
-  // 更新 i18n locale
   locale.value = value;
-  // 通过 mutation 更新 store
-  globalStore.commit('setLanguage', value);
+  // settingsStore.setLanguage(value);
 };
 
 onMounted(() => {
-  globalStore.dispatch('initializeSettings');
-  globalStore.dispatch('initializeTheme');
-  globalStore.dispatch('initializeSystemFonts');
-  globalStore.dispatch('initializePlayState');
+  settingsStore.initializeSettings();
+  handleSetLanguage(null, settingsStore.setData.language);
+  settingsStore.initializeTheme();
+  settingsStore.initializeSystemFonts();
+  playerStore.initializePlayState();
   if (isMobile.value) {
-    globalStore.commit(
-      'setMenus',
-      homeRouter.filter((item) => item.meta.isMobile)
-    );
+    menuStore.setMenus(homeRouter.filter((item) => item.meta.isMobile));
   }
-  if (isElectron) {
-    window.electron.ipcRenderer.on('set-language', handleSetLanguage);
-  }
-});
 
-onUnmounted(() => {
   if (isElectron) {
-    window.electron.ipcRenderer.removeListener('set-language', handleSetLanguage);
+    window.electron.ipcRenderer.on('language-changed', handleSetLanguage);
   }
 });
 </script>