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

集成 Pinia 状态管理
2026-04-14 14:50:50 +08:00 · 2025-03-19 22:48:28 +08:00
parent 4fa5ed0ca6
commit e355341596
40 changed files with 1170 additions and 494 deletions
--- a/package.json
+++ b/package.json
@@ -68,21 +68,24 @@
    "lodash": "^4.17.21",
    "marked": "^15.0.7",
    "naive-ui": "^2.41.0",
-    "prettier": "^3.5.3",
-    "remixicon": "^4.6.0",
-    "sass": "^1.86.0",
+    "postcss": "^8.4.49",
+    "prettier": "^3.3.2",
+    "pinia": "^3.0.1",
+    "remixicon": "^4.2.0",
+    "sass": "^1.83.4",
    "tailwindcss": "^3.4.17",
    "tinycolor2": "^1.6.0",
    "tunajs": "^1.0.15",
-    "typescript": "^5.8.2",
-    "unplugin-auto-import": "^19.1.1",
-    "unplugin-vue-components": "^28.4.1",
-    "vite": "^6.2.2",
+    "typescript": "^5.5.2",
+    "unplugin-auto-import": "^0.18.2",
+    "unplugin-vue-components": "^0.27.4",
+    "vfonts": "^0.1.0",
+    "vite": "^5.3.1",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-vue-devtools": "7.7.2",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0",
-    "vue-tsc": "^2.2.8",
+    "vue-tsc": "^2.0.22",
    "vuex": "^4.1.0"
  },
  "build": {
--- a/src/i18n/lang/en-US/player.ts
+++ b/src/i18n/lang/en-US/player.ts
@@ -11,6 +11,7 @@ export default {
  mute: 'Mute',
  unmute: 'Unmute',
  songNum: 'Song Number: {num}',
+  playFailed: 'Play Failed, Play Next Song',
  playMode: {
    sequence: 'Sequence',
    loop: 'Loop',
--- a/src/i18n/lang/zh-CN/player.ts
+++ b/src/i18n/lang/zh-CN/player.ts
@@ -11,6 +11,7 @@ export default {
  mute: '静音',
  unmute: '取消静音',
  songNum: '歌曲总数：{num}',
+  playFailed: '当前歌曲播放失败，播放下一首',
  playMode: {
    sequence: '顺序播放',
    loop: '循环播放',
--- a/src/renderer/App.vue
+++ b/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>
--- a/src/renderer/api/music.ts
+++ b/src/renderer/api/music.ts
@@ -1,5 +1,5 @@
 import { musicDB } from '@/hooks/MusicHook';
-import store from '@/store';
+import { useSettingsStore, useUserStore } from '@/store';
 import type { ILyric } from '@/type/lyric';
 import { isElectron } from '@/utils';
 import request from '@/utils/request';
@@ -14,14 +14,16 @@ export const getMusicQualityDetail = (id: number) => {

 // 根据音乐Id获取音乐播放URl
 export const getMusicUrl = async (id: number, isDownloaded: boolean = false) => {
+  const userStore = useUserStore();
+  const settingStore = useSettingsStore();
  // 判断是否登录
  try {
-    if (store.state.user && isDownloaded && store.state.user.vipType !== 0) {
+    if (userStore.user && isDownloaded && userStore.user.vipType !== 0) {
      const url = '/song/download/url/v1';
      const res = await request.get(url, {
        params: {
          id,
-          level: store.state.setData.musicQuality || 'higher',
+          level: settingStore.setData.musicQuality || 'higher',
          cookie: `${localStorage.getItem('token')} os=pc;`
        }
      });
@@ -37,7 +39,7 @@ export const getMusicUrl = async (id: number, isDownloaded: boolean = false) =>
  return await request.get('/song/url/v1', {
    params: {
      id,
-      level: store.state.setData.musicQuality || 'higher'
+      level: settingStore.setData.musicQuality || 'higher'
    }
  });
 };
--- a/src/renderer/components.d.ts
+++ b/src/renderer/components.d.ts
@@ -2,7 +2,6 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
 export {}

 /* prettier-ignore */
--- a/src/renderer/components/LanguageSwitcher.vue
+++ b/src/renderer/components/LanguageSwitcher.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

-import { isElectron } from '@/utils';
+import { useSettingsStore } from '@/store/modules/settings';

-const store = useStore();
+const settingsStore = useSettingsStore();
 const { locale } = useI18n();

 const languages = [
@@ -13,40 +12,12 @@ const languages = [
  { label: 'English', value: 'en-US' }
 ];

+console.log('locale', locale);
 // 使用计算属性来获取当前语言
 const currentLanguage = computed({
-  get: () => store.state.setData.language || 'zh-CN',
-  set: (value: string) => {
-    handleLanguageChange(value);
-  }
-});
-
-// 当语言改变时的处理函数
-const handleLanguageChange = (value: string) => {
-  // 更新 i18n locale
-  locale.value = value;
-  // 通过 mutation 更新 store
-  store.commit('setLanguage', value);
-  // 通知主进程语言已更改
-  if (isElectron) {
-    window.electron.ipcRenderer.send('change-language', value);
-  }
-};
-
-// 监听来自主进程的语言切换事件
-const handleSetLanguage = (_: any, value: string) => {
-  handleLanguageChange(value);
-};
-
-onMounted(() => {
-  if (isElectron) {
-    window.electron.ipcRenderer.on('set-language', handleSetLanguage);
-  }
-});
-
-onUnmounted(() => {
-  if (isElectron) {
-    window.electron.ipcRenderer.removeListener('set-language', handleSetLanguage);
+  get: () => locale.value,
+  set: (value) => {
+    settingsStore.setLanguage(value);
  }
 });
 </script>
--- a/src/renderer/components/MusicList.vue
+++ b/src/renderer/components/MusicList.vue
@@ -87,16 +87,16 @@
 <script setup lang="ts">
 import { computed, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

 import { getMusicDetail } from '@/api/music';
 import SongItem from '@/components/common/SongItem.vue';
+import { usePlayerStore } from '@/store/modules/player';
 import { getImgUrl, isMobile, setAnimationClass, setAnimationDelay } from '@/utils';

 import PlayBottom from './common/PlayBottom.vue';

 const { t } = useI18n();
-const store = useStore();
+const playerStore = usePlayerStore();

 const props = withDefaults(
  defineProps<{
@@ -236,13 +236,13 @@ const loadFullPlaylist = async () => {
 // 处理播放
 const handlePlay = async () => {
  // 先使用当前已加载的歌曲开始播放
-  store.commit('setPlayList', displayedSongs.value.map(formatSong));
+  playerStore.setPlayList(displayedSongs.value.map(formatSong));

  // 在后台加载完整播放列表
  loadFullPlaylist().then(() => {
    // 加载完成后，更新播放列表为完整列表
    if (completePlaylist.value.length > 0) {
-      store.commit('setPlayList', completePlaylist.value.map(formatSong));
+      playerStore.setPlayList(completePlaylist.value.map(formatSong));
    }
  });
 };
--- a/src/renderer/components/MvPlayer.vue
+++ b/src/renderer/components/MvPlayer.vue
@@ -191,9 +191,9 @@
 import { NButton, NIcon, NSlider, NTooltip } from 'naive-ui';
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

 import { getMvUrl } from '@/api/mv';
+import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/type/mv';

 const { t } = useI18n();
@@ -222,7 +222,7 @@ const emit = defineEmits<{
  (e: 'prev', loading: (value: boolean) => void): void;
 }>();

-const store = useStore();
+const playerStore = usePlayerStore();
 const mvUrl = ref<string>();
 const playMode = ref<PlayMode>(PLAY_MODE.Auto);

@@ -359,8 +359,8 @@ const loadMvUrl = async (mv: IMvItem) => {

 const handleClose = () => {
  emit('update:show', false);
-  if (store.state.playMusicUrl) {
-    store.commit('setIsPlay', true);
+  if (playerStore.playMusicUrl) {
+    playerStore.setIsPlay(true);
  }
 };

@@ -543,7 +543,11 @@ watch(showControls, (newValue) => {
  }
 });

-const isMobile = computed(() => store.state.isMobile);
+const isMobile = computed(() => false); // TODO: 从 settings store 获取
+
+const handlePlay = () => {
+  playerStore.setIsPlay(true);
+};
 </script>

 <style scoped lang="scss">
--- a/src/renderer/components/common/ArtistDrawer.vue
+++ b/src/renderer/components/common/ArtistDrawer.vue
@@ -90,14 +90,14 @@

 <script setup lang="ts">
 import { useDateFormat } from '@vueuse/core';
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

 import { getArtistAlbums, getArtistDetail, getArtistTopSongs } from '@/api/artist';
 import { getMusicDetail } from '@/api/music';
 import SearchItem from '@/components/common/SearchItem.vue';
 import SongItem from '@/components/common/SongItem.vue';
+import { usePlayerStore, useSettingsStore } from '@/store';
 import { IArtist } from '@/type/artist';
 import { getImgUrl } from '@/utils';

@@ -105,11 +105,17 @@ import PlayBottom from './PlayBottom.vue';

 const { t } = useI18n();

+const settingsStore = useSettingsStore();
+const playerStore = usePlayerStore();
+
+const currentArtistId = computed({
+  get: () => settingsStore.currentArtistId,
+  set: (val) => settingsStore.setCurrentArtistId(val as number)
+});
+
 const modelValue = defineModel<boolean>('show', { required: true });

-const store = useStore();
 const activeTab = ref('songs');
-const currentArtistId = ref<number>();

 // 歌手信息
 const artistInfo = ref<IArtist>();
@@ -134,7 +140,7 @@ const albumPage = ref({
 });

 watch(modelValue, (newVal) => {
-  store.commit('setShowArtistDrawer', newVal);
+  settingsStore.setShowArtistDrawer(newVal);
 });
 const loading = ref(false);
 // 加载歌手信息
@@ -260,8 +266,7 @@ const formatPublishTime = (time: number) => {
 };

 const handlePlay = () => {
-  store.commit(
-    'setPlayList',
+  playerStore.setPlayList(
    songs.value.map((item) => ({
      ...item,
      picUrl: item.al.picUrl
--- a/src/renderer/components/common/DownloadDrawer.vue
+++ b/src/renderer/components/common/DownloadDrawer.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="download-drawer-trigger">
    <n-badge :value="downloadingCount" :max="99" :show="downloadingCount > 0">
-      <n-button circle @click="store.commit('setShowDownloadDrawer', true)">
+      <n-button circle @click="settingsStore.showDownloadDrawer = true">
        <template #icon>
          <i class="iconfont ri-download-cloud-2-line"></i>
        </template>
@@ -179,9 +179,10 @@ import type { ProgressStatus } from 'naive-ui';
 import { useMessage } from 'naive-ui';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

 import { getMusicDetail } from '@/api/music';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
 // import { audioService } from '@/services/audioService';
 import { getImgUrl } from '@/utils';

@@ -208,11 +209,14 @@ interface DownloadedItem {
 }

 const message = useMessage();
-const store = useStore();
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();

 const showDrawer = computed({
-  get: () => store.state.showDownloadDrawer,
-  set: (val) => store.commit('setShowDownloadDrawer', val)
+  get: () => settingsStore.showDownloadDrawer,
+  set: (val) => {
+    settingsStore.showDownloadDrawer = val;
+  }
 });

 const downloadList = ref<DownloadItem[]>([]);
@@ -224,10 +228,6 @@ const downList = computed(() => {
  return (downloadedList.value as DownloadedItem[]).reverse();
 });

-// 获取播放状态
-// const play = computed(() => store.state.play as boolean);
-// const currentMusic = computed(() => store.state.playMusic);
-
 // 计算下载中的任务数量
 const downloadingCount = computed(() => {
  return downloadList.value.filter((item) => item.status === 'downloading').length;
@@ -343,51 +343,11 @@ const confirmDelete = async () => {
 };

 // 播放音乐
-// const handlePlayMusic = async (item: DownloadedItem) => {
-//   // 确保路径正确编码
-//   const encodedPath = encodeURIComponent(item.path);
-//   const localUrl = `local://${encodedPath}`;
-
-//   const musicInfo = {
-//     name: item.filename,
-//     id: item.id,
-//     url: localUrl,
-//     playMusicUrl: localUrl,
-//     picUrl: item.picUrl,
-//     ar: item.ar || [{ name: '本地音乐' }],
-//     song: {
-//       artists: item.ar || [{ name: '本地音乐' }]
-//     },
-//     al: {
-//       picUrl: item.picUrl || '/images/default_cover.png'
-//     }
-//   };
-
-//   // 如果是当前播放的音乐，则切换播放状态
-//   if (currentMusic.value?.id === item.id) {
-//     if (play.value) {
-//       audioService.getCurrentSound()?.pause();
-//       store.commit('setPlayMusic', false);
-//     } else {
-//       audioService.getCurrentSound()?.play();
-//       store.commit('setPlayMusic', true);
-//     }
-//     return;
-//   }
-
-//   // 播放新的音乐
-//   store.commit('setPlay', musicInfo);
-//   store.commit('setPlayMusic', true);
-//   store.commit('setIsPlay', true);
-
-//   store.commit(
-//     'setPlayList',
-//     downloadedList.value.map((item) => ({
-//       ...item,
-//       playMusicUrl: `local://${encodeURIComponent(item.path)}`
-//     }))
-//   );
-// };
+const handlePlay = async (musicInfo: SongResult) => {
+  await playerStore.setPlay(musicInfo);
+  playerStore.setPlayMusic(true);
+  playerStore.setIsPlay(true);
+};

 // 获取已下载音乐列表
 const refreshDownloadedList = async () => {
@@ -522,7 +482,7 @@ onMounted(() => {
 });

 const handleDrawerClose = () => {
-  store.commit('setShowDownloadDrawer', false);
+  settingsStore.showDownloadDrawer = false;
 };
 </script>

--- a/src/renderer/components/common/PlayBottom.vue
+++ b/src/renderer/components/common/PlayBottom.vue
@@ -3,10 +3,13 @@
 </template>

 <script setup lang="ts">
-import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+import { usePlayerStore } from '@/store/modules/player';
+
+const playerStore = usePlayerStore();
+const isPlay = computed(() => playerStore.isPlay);

-const store = useStore();
-const isPlay = computed(() => store.state.isPlay as boolean);
 defineProps({
  height: {
    type: String,
--- a/src/renderer/components/common/PlaylistDrawer.vue
+++ b/src/renderer/components/common/PlaylistDrawer.vue
@@ -110,12 +110,13 @@
 import { useMessage } from 'naive-ui';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

 import { createPlaylist, updatePlaylistTracks } from '@/api/music';
 import { getUserPlaylist } from '@/api/user';
+import { useUserStore } from '@/store';
 import { getImgUrl } from '@/utils';

+const store = useUserStore();
 const { t } = useI18n();
 const props = defineProps<{
  modelValue: boolean;
@@ -127,7 +128,6 @@ const emit = defineEmits(['update:modelValue']);
 const message = useMessage();
 const playlists = ref<any[]>([]);
 const creating = ref(false);
-const store = useStore();
 const isCreating = ref(false);

 const formValue = ref({
@@ -151,7 +151,7 @@ const toggleCreateForm = () => {
 // 获取用户歌单
 const fetchUserPlaylists = async () => {
  try {
-    const { user } = store.state;
+    const { user } = store;
    if (!user?.userId) {
      message.error(t('comp.playlistDrawer.loginFirst'));
      emit('update:modelValue', false);
--- a/src/renderer/components/common/SearchItem.vue
+++ b/src/renderer/components/common/SearchItem.vue
@@ -40,11 +40,10 @@
 </template>

 <script setup lang="ts">
-import { useStore } from 'vuex';
-
 import { getAlbum, getListDetail } from '@/api/list';
 import MvPlayer from '@/components/MvPlayer.vue';
 import { audioService } from '@/services/audioService';
+import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/type/mv';
 import { getImgUrl } from '@/utils';

@@ -72,6 +71,8 @@ const songList = ref<any[]>([]);
 const showPop = ref(false);
 const listInfo = ref<any>(null);

+const playerStore = usePlayerStore();
+
 const getCurrentMv = () => {
  return {
    id: props.item.id,
@@ -79,8 +80,6 @@ const getCurrentMv = () => {
  } as unknown as IMvItem;
 };

-const store = useStore();
-
 const handleClick = async () => {
  listInfo.value = null;
  if (props.item.type === '专辑') {
@@ -108,12 +107,17 @@ const handleClick = async () => {
  }

  if (props.item.type === 'mv') {
-    store.commit('setIsPlay', false);
-    store.commit('setPlayMusic', false);
-    audioService.getCurrentSound()?.pause();
-    showPop.value = true;
+    handleShowMv(getCurrentMv());
  }
 };
+
+const handleShowMv = async (item: IMvItem) => {
+  playerStore.setIsPlay(false);
+  playerStore.setPlayMusic(false);
+  audioService.getCurrentSound()?.pause();
+  showPop.value = true;
+  currentMv.value = item;
+};
 </script>

 <style scoped lang="scss">
--- a/src/renderer/components/common/SongItem.vue
+++ b/src/renderer/components/common/SongItem.vue
@@ -90,10 +90,10 @@ import type { MenuOption } from 'naive-ui';
 import { NImage, NText, useMessage } from 'naive-ui';
 import { computed, h, inject, ref, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

 import { getSongUrl } from '@/hooks/MusicListHook';
 import { audioService } from '@/services/audioService';
+import { usePlayerStore, useSettingsStore } from '@/store';
 import type { SongResult } from '@/type/music';
 import { getImgUrl, isElectron } from '@/utils';
 import { getImageBackground } from '@/utils/linearColor';
@@ -120,11 +120,13 @@ const props = withDefaults(
  }
 );

-const store = useStore();
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+
 const message = useMessage();

-const play = computed(() => store.state.play as boolean);
-const playMusic = computed(() => store.state.playMusic);
+const play = computed(() => playerStore.isPlay);
+const playMusic = computed(() => playerStore.playMusic);
 const playLoading = computed(
  () => playMusic.value.id === props.item.id && playMusic.value.playLoading
 );
@@ -356,31 +358,31 @@ const imageLoad = async () => {
 const playMusicEvent = async (item: SongResult) => {
  if (playMusic.value.id === item.id) {
    if (play.value) {
-      store.commit('setPlayMusic', false);
+      playerStore.setPlayMusic(false);
      audioService.getCurrentSound()?.pause();
    } else {
-      store.commit('setPlayMusic', true);
+      playerStore.setPlayMusic(true);
      audioService.getCurrentSound()?.play();
    }
    return;
  }
-  await store.commit('setPlay', item);
-  store.commit('setIsPlay', true);
+  await playerStore.setPlay(item);
+  playerStore.isPlay = true;
  emits('play', item);
 };

 // 判断是否已收藏
 const isFavorite = computed(() => {
-  return store.state.favoriteList.includes(props.item.id);
+  return playerStore.favoriteList.includes(props.item.id);
 });

 // 切换收藏状态
 const toggleFavorite = async (e: Event) => {
  e.stopPropagation();
  if (isFavorite.value) {
-    store.commit('removeFromFavorite', props.item.id);
+    playerStore.removeFromFavorite(props.item.id);
  } else {
-    store.commit('addToFavorite', props.item.id);
+    playerStore.addToFavorite(props.item.id);
  }
 };

@@ -390,7 +392,7 @@ const toggleSelect = () => {
 };

 const handleArtistClick = (id: number) => {
-  store.commit('setCurrentArtistId', id);
+  settingsStore.currentArtistId = id;
 };

 // 获取歌手列表（最多显示5个）
@@ -400,7 +402,7 @@ const artists = computed(() => {

 // 添加到下一首播放
 const handlePlayNext = () => {
-  store.commit('addToNextPlay', props.item);
+  playerStore.addToNextPlay(props.item);
  message.success(t('songItem.message.addedToNextPlay'));
 };
 </script>
--- a/src/renderer/components/common/UpdateModal.vue
+++ b/src/renderer/components/common/UpdateModal.vue
@@ -73,8 +73,8 @@
 import { marked } from 'marked';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

+import { useSettingsStore } from '@/store/modules/settings';
 import { checkUpdate, getProxyNodes, UpdateResult } from '@/utils/update';

 import config from '../../../../package.json';
@@ -87,7 +87,13 @@ marked.setOptions({
  gfm: true // 启用 GitHub 风格的 Markdown
 });

-const showModal = ref(false);
+const settingsStore = useSettingsStore();
+
+const showModal = computed({
+  get: () => settingsStore.showUpdateModal,
+  set: (val) => settingsStore.setShowUpdateModal(val)
+});
+
 const updateInfo = ref<UpdateResult>({
  hasUpdate: false,
  latestVersion: '',
@@ -95,28 +101,6 @@ const updateInfo = ref<UpdateResult>({
  releaseInfo: null
 });

-const store = useStore();
-
-// 添加计算属性
-const showUpdateModalState = computed({
-  get: () => store.state.showUpdateModal,
-  set: (val) => store.commit('setShowUpdateModal', val)
-});
-
-// 替换原来的 watch
-watch(showUpdateModalState, (newVal) => {
-  if (newVal) {
-    showModal.value = true;
-  }
-});
-
-watch(
-  () => showModal.value,
-  (newVal) => {
-    showUpdateModalState.value = newVal;
-  }
-);
-
 // 解析 Markdown
 const parsedReleaseNotes = computed(() => {
  if (!updateInfo.value.releaseInfo?.body) return '';
--- a/src/renderer/components/home/RecommendSonglist.vue
+++ b/src/renderer/components/home/RecommendSonglist.vue
@@ -24,15 +24,15 @@

 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

 import { getRecommendMusic } from '@/api/home';
 import SongItem from '@/components/common/SongItem.vue';
+import { usePlayerStore } from '@/store/modules/player';
 import type { IRecommendMusic } from '@/type/music';
 import { setAnimationClass, setAnimationDelay } from '@/utils';

 const { t } = useI18n();
-const store = useStore();
+const playerStore = usePlayerStore();
 // 推荐歌曲
 const recommendMusic = ref<IRecommendMusic>();
 const loading = ref(false);
@@ -51,7 +51,9 @@ onMounted(() => {
 });

 const handlePlay = () => {
-  store.commit('setPlayList', recommendMusic.value?.result);
+  if (recommendMusic.value?.result) {
+    playerStore.setPlayList(recommendMusic.value.result);
+  }
 };
 </script>

--- a/src/renderer/hooks/MusicHook.ts
+++ b/src/renderer/hooks/MusicHook.ts
@@ -1,15 +1,17 @@
 import { createDiscreteApi } from 'naive-ui';
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';

+import i18n from '@/../i18n/renderer';
 import useIndexedDB from '@/hooks/IndexDBHook';
 import { audioService } from '@/services/audioService';
-import store from '@/store';
+import pinia, { usePlayerStore } from '@/store';
 import type { Artist, ILyricText, SongResult } from '@/type/music';
 import { isElectron } from '@/utils';
 import { getTextColors } from '@/utils/linearColor';

 const windowData = window as any;

+const playerStore = usePlayerStore(pinia);
 export const lrcArray = ref<ILyricText[]>([]); // 歌词数组
 export const lrcTimeArray = ref<number[]>([]); // 歌词时间数组
 export const nowTime = ref(0); // 当前播放时间
@@ -17,12 +19,12 @@ export const allTime = ref(0); // 总播放时间
 export const nowIndex = ref(0); // 当前播放歌词
 export const correctionTime = ref(0.4); // 歌词矫正时间Correction time
 export const currentLrcProgress = ref(0); // 来存储当前歌词的进度
-export const playMusic = computed(() => store.state.playMusic as SongResult); // 当前播放歌曲
+export const playMusic = computed(() => playerStore.playMusic as SongResult); // 当前播放歌曲
 export const sound = ref<Howl | null>(audioService.getCurrentSound());
 export const isLyricWindowOpen = ref(false); // 新增状态
 export const textColors = ref<any>(getTextColors());
 export const artistList = computed(
-  () => (store.state.playMusic.ar || store.state.playMusic?.song?.artists) as Artist[]
+  () => (playerStore.playMusic.ar || playerStore.playMusic?.song?.artists) as Artist[]
 );

 export const musicDB = await useIndexedDB('musicDB', [
@@ -40,11 +42,11 @@ document.onkeyup = (e) => {

  switch (e.code) {
    case 'Space':
-      if (store.state.play) {
-        store.commit('setPlayMusic', false);
+      if (playerStore.play) {
+        playerStore.setPlayMusic(false);
        audioService.getCurrentSound()?.pause();
      } else {
-        store.commit('setPlayMusic', true);
+        playerStore.setPlayMusic(true);
        audioService.getCurrentSound()?.play();
      }
      break;
@@ -68,7 +70,7 @@ const stopProgressAnimation = () => {

 // 全局更新函数
 const updateProgress = () => {
-  if (!store.state.play) {
+  if (!playerStore.play) {
    stopProgressAnimation();
    return;
  }
@@ -105,11 +107,11 @@ const updateProgress = () => {

      // 保存当前播放进度到 localStorage (每秒保存一次，避免频繁写入)
      if (Math.floor(currentTime) % 2 === 0) {
-        if (store.state.playMusic && store.state.playMusic.id) {
+        if (playerStore.playMusic && playerStore.playMusic.id) {
          localStorage.setItem(
            'playProgress',
            JSON.stringify({
-              songId: store.state.playMusic.id,
+              songId: playerStore.playMusic.id,
              progress: currentTime
            })
          );
@@ -158,7 +160,7 @@ const initProgressAnimation = () => {
  let debounceTimer: any = null;

  watch(
-    () => store.state.play,
+    () => playerStore.play,
    (newIsPlaying) => {
      console.log('播放状态变化:', newIsPlaying);

@@ -200,7 +202,7 @@ const initProgressAnimation = () => {
  // 监听当前歌词索引变化
  watch(nowIndex, () => {
    currentLrcProgress.value = 0;
-    if (store.state.play) {
+    if (playerStore.play) {
      startProgressAnimation();
    }
  });
@@ -208,7 +210,7 @@ const initProgressAnimation = () => {
  // 监听音频对象变化
  watch(sound, (newSound) => {
    console.log('sound 对象变化:', !!newSound);
-    if (newSound && store.state.play) {
+    if (newSound && playerStore.play) {
      startProgressAnimation();
    }
  });
@@ -219,12 +221,12 @@ initProgressAnimation();

 // 简化后的 watch 函数，只保留核心逻辑
 watch(
-  () => store.state.playMusicUrl,
+  () => playerStore.playMusicUrl,
  async (newVal) => {
    if (newVal && playMusic.value) {
      try {
        // 保存当前播放状态
-        const shouldPlay = store.state.play;
+        const shouldPlay = playerStore.play;

        // 检查是否有保存的进度
        let initialPosition = 0;
@@ -247,20 +249,20 @@ watch(
        setupAudioListeners();

        // 确保状态与 localStorage 同步
-        localStorage.setItem('currentPlayMusic', JSON.stringify(store.state.playMusic));
+        localStorage.setItem('currentPlayMusic', JSON.stringify(playerStore.playMusic));
        localStorage.setItem('currentPlayMusicUrl', newVal);
      } catch (error) {
        console.error('播放音频失败:', error);
-        store.commit('setPlayMusic', false);
-        message.error('当前歌曲播放失败，播放下一首');
-        store.commit('nextPlay');
+        // store.commit('setPlayMusic', false);
+        playerStore.setPlayMusic(false);
+        message.error(i18n.global.t('player.playFailed'));
      }
    }
  }
 );

 watch(
-  () => store.state.playMusic,
+  () => playerStore.playMusic,
  () => {
    nextTick(async () => {
      console.log('歌曲切换，更新歌词数据');
@@ -322,7 +324,7 @@ const setupAudioListeners = () => {

  // 监听播放
  audioService.on('play', () => {
-    store.commit('setPlayMusic', true);
+    playerStore.setPlayMusic(true);
    clearInterval();
    interval = window.setInterval(() => {
      try {
@@ -371,7 +373,7 @@ const setupAudioListeners = () => {
  // 监听暂停
  audioService.on('pause', () => {
    console.log('音频暂停事件触发');
-    store.commit('setPlayMusic', false);
+    playerStore.setPlayMusic(false);
    clearInterval();
    if (isElectron && isLyricWindowOpen.value) {
      sendLyricToWin();
@@ -388,17 +390,17 @@ const setupAudioListeners = () => {
      }

      // 重新播放当前歌曲
-      if (store.state.playMusicUrl && playMusic.value) {
-        const newSound = await audioService.play(store.state.playMusicUrl, playMusic.value);
+      if (playerStore.playMusicUrl && playMusic.value) {
+        const newSound = await audioService.play(playerStore.playMusicUrl, playMusic.value);
        sound.value = newSound as Howl;
        setupAudioListeners();
      } else {
        console.error('No music URL or playMusic data available');
-        store.commit('nextPlay');
+        playerStore.nextPlay();
      }
    } catch (error) {
      console.error('Error replaying song:', error);
-      store.commit('nextPlay');
+      playerStore.nextPlay();
    }
  };

@@ -407,27 +409,27 @@ const setupAudioListeners = () => {
    console.log('音频播放结束事件触发');
    clearInterval();

-    if (store.state.playMode === 1) {
+    if (playerStore.playMode === 1) {
      // 单曲循环模式
      if (sound.value) {
        replayMusic();
      }
-    } else if (store.state.playMode === 2) {
+    } else if (playerStore.playMode === 2) {
      // 随机播放模式
-      const { playList } = store.state;
-      if (playList.length <= 1) {
+
+      if (playerStore.playList.length <= 1) {
        replayMusic();
      } else {
        let randomIndex;
        do {
-          randomIndex = Math.floor(Math.random() * playList.length);
-        } while (randomIndex === store.state.playListIndex && playList.length > 1);
-        store.state.playListIndex = randomIndex;
-        store.commit('setPlay', playList[randomIndex]);
+          randomIndex = Math.floor(Math.random() * playerStore.playList.length);
+        } while (randomIndex === playerStore.playListIndex && playerStore.playList.length > 1);
+        playerStore.playListIndex = randomIndex;
+        playerStore.setPlay(playerStore.playList[randomIndex]);
      }
    } else {
      // 列表循环模式
-      store.commit('nextPlay');
+      playerStore.nextPlay();
    }
  });

@@ -444,11 +446,11 @@ export const pause = () => {
    try {
      // 保存当前播放进度
      const currentTime = currentSound.seek() as number;
-      if (store.state.playMusic && store.state.playMusic.id) {
+      if (playerStore.playMusic && playerStore.playMusic.id) {
        localStorage.setItem(
          'playProgress',
          JSON.stringify({
-            songId: store.state.playMusic.id,
+            songId: playerStore.playMusic.id,
            progress: currentTime
          })
        );
@@ -572,7 +574,7 @@ export const sendLyricToWin = () => {
        nowTime: nowTime.value,
        startCurrentTime: lrcTimeArray.value[nowIndex] || 0,
        nextTime: lrcTimeArray.value[nowIndex + 1] || 0,
-        isPlay: store.state.play,
+        isPlay: playerStore.play,
        lrcArray: lrcArray.value,
        lrcTimeArray: lrcTimeArray.value,
        allTime: allTime.value,
@@ -591,7 +593,7 @@ export const sendLyricToWin = () => {
        nowTime: nowTime.value,
        startCurrentTime: 0,
        nextTime: 0,
-        isPlay: store.state.play,
+        isPlay: playerStore.play,
        lrcArray: [{ text: '当前歌曲暂无歌词', trText: '' }],
        lrcTimeArray: [0],
        allTime: allTime.value,
@@ -616,14 +618,14 @@ const startLyricSync = () => {

  // 每秒同步一次歌词数据
  lyricSyncInterval = setInterval(() => {
-    if (isElectron && isLyricWindowOpen.value && store.state.play && playMusic.value?.id) {
+    if (isElectron && isLyricWindowOpen.value && playerStore.play && playMusic.value?.id) {
      // 发送当前播放进度的更新
      try {
        const updateData = {
          type: 'update',
          nowIndex: getLrcIndex(nowTime.value),
          nowTime: nowTime.value,
-          isPlay: store.state.play
+          isPlay: playerStore.play
        };
        window.api.sendLyric(JSON.stringify(updateData));
      } catch (error) {
@@ -669,7 +671,7 @@ export const openLyric = () => {
        nowTime: nowTime.value,
        startCurrentTime: 0,
        nextTime: 0,
-        isPlay: store.state.play,
+        isPlay: playerStore.play,
        lrcArray: [{ text: '加载歌词中...', trText: '' }],
        lrcTimeArray: [0],
        allTime: allTime.value,
@@ -707,7 +709,7 @@ export const closeLyric = () => {

 // 在组件挂载时设置对播放状态的监听
 watch(
-  () => store.state.play,
+  () => playerStore.play,
  (isPlaying) => {
    // 如果歌词窗口打开，根据播放状态控制同步
    if (isElectron && isLyricWindowOpen.value) {
@@ -735,19 +737,20 @@ if (isElectron) {
  windowData.electron.ipcRenderer.on('lyric-control-back', (_, command: string) => {
    switch (command) {
      case 'playpause':
-        if (store.state.play) {
-          store.commit('setPlayMusic', false);
+        if (playerStore.play) {
+          playerStore.setPlayMusic(false);
          audioService.getCurrentSound()?.pause();
        } else {
-          store.commit('setPlayMusic', true);
+          playerStore.setPlayMusic(true);
+
          audioService.getCurrentSound()?.play();
        }
        break;
      case 'prev':
-        store.commit('prevPlay');
+        playerStore.prevPlay();
        break;
      case 'next':
-        store.commit('nextPlay');
+        playerStore.nextPlay();
        break;
      case 'close':
        isLyricWindowOpen.value = false; // 确保状态更新
@@ -776,15 +779,15 @@ onMounted(() => {
    sound.value = audioService.getCurrentSound();

    // 如果当前处于播放状态，启动进度更新
-    if (store.state.play && sound.value) {
+    if (playerStore.play && sound.value) {
      // 如果有保存的播放进度，应用它
-      if (store.state.savedPlayProgress !== undefined && sound.value) {
+      if (playerStore.savedPlayProgress !== undefined && sound.value) {
        try {
          // 设置音频位置
-          sound.value.seek(store.state.savedPlayProgress);
+          sound.value.seek(playerStore.savedPlayProgress);
          // 同时更新时间显示，这样进度条也会更新
-          nowTime.value = store.state.savedPlayProgress;
-          console.log('恢复播放进度:', store.state.savedPlayProgress);
+          nowTime.value = playerStore.savedPlayProgress;
+          console.log('恢复播放进度:', playerStore.savedPlayProgress);
        } catch (e) {
          console.error('恢复播放进度失败:', e);
        }
--- a/src/renderer/layout/AppLayout.vue
+++ b/src/renderer/layout/AppLayout.vue
@@ -21,18 +21,18 @@
            </router-view>
          </div>
          <play-bottom height="5rem" />
-          <app-menu v-if="isMobile && !store.state.musicFull" class="menu" :menus="menus" />
+          <app-menu v-if="isMobile && !playerStore.musicFull" class="menu" :menus="menus" />
        </div>
      </div>
      <!-- 底部音乐播放 -->
-      <play-bar v-show="isPlay" :style="isMobile && store.state.musicFull ? 'bottom: 0;' : ''" />
+      <play-bar v-show="isPlay" :style="isMobile && playerStore.musicFull ? 'bottom: 0;' : ''" />
      <!-- 下载管理抽屉 -->
      <download-drawer
        v-if="
          isElectron &&
-          (store.state.setData?.alwaysShowDownloadButton ||
-            store.state.showDownloadDrawer ||
-            store.state.hasDownloadingTasks)
+          (settingsStore.setData?.alwaysShowDownloadButton ||
+            settingsStore.showDownloadDrawer ||
+            settingsStore.setData?.hasDownloadingTasks)
        "
      />
    </div>
@@ -46,13 +46,15 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, nextTick, onMounted, provide, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { useStore } from 'vuex';

 import DownloadDrawer from '@/components/common/DownloadDrawer.vue';
 import InstallAppModal from '@/components/common/InstallAppModal.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import UpdateModal from '@/components/common/UpdateModal.vue';
 import homeRouter from '@/router/home';
+import { useMenuStore } from '@/store/modules/menu';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron, isMobile } from '@/utils';

 const keepAliveInclude = computed(() =>
@@ -73,26 +75,28 @@ const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'))
 const ArtistDrawer = defineAsyncComponent(() => import('@/components/common/ArtistDrawer.vue'));
 const PlaylistDrawer = defineAsyncComponent(() => import('@/components/common/PlaylistDrawer.vue'));

-const store = useStore();
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+const menuStore = useMenuStore();

-const isPlay = computed(() => store.state.isPlay as boolean);
-const { menus } = store.state;
+const isPlay = computed(() => playerStore.playMusic && playerStore.playMusic.id);
+const { menus } = menuStore;
 const route = useRoute();

 onMounted(() => {
-  store.dispatch('initializeSettings');
-  store.dispatch('initializeTheme');
+  settingsStore.initializeSettings();
+  settingsStore.initializeTheme();
 });

 const artistDrawerRef = ref<InstanceType<typeof ArtistDrawer>>();
 const artistDrawerShow = computed({
-  get: () => store.state.showArtistDrawer,
-  set: (val) => store.commit('setShowArtistDrawer', val)
+  get: () => settingsStore.showArtistDrawer,
+  set: (val) => settingsStore.setShowArtistDrawer(val)
 });

 // 监听歌手ID变化
 watch(
-  () => store.state.currentArtistId,
+  () => settingsStore.currentArtistId,
  (newId) => {
    if (newId) {
      artistDrawerShow.value = true;
--- a/src/renderer/layout/components/MusicFull.vue
+++ b/src/renderer/layout/components/MusicFull.vue
@@ -131,7 +131,6 @@
 import { useDebounceFn } from '@vueuse/core';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

 import LyricSettings from '@/components/lyric/LyricSettings.vue';
 import {
@@ -143,6 +142,8 @@ import {
  textColors,
  useLyricProgress
 } from '@/hooks/MusicHook';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
 import { getImgUrl, isMobile } from '@/utils';
 import { animateGradient, getHoverBackgroundColor, getTextColors } from '@/utils/linearColor';

@@ -372,13 +373,15 @@ onBeforeUnmount(() => {
  }
 });

-const store = useStore();
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+
 const handleArtistClick = (id: number) => {
  isVisible.value = false;
-  store.commit('setCurrentArtistId', id);
+  settingsStore.currentArtistId = id;
 };

-const setData = computed(() => store.state.setData);
+const setData = computed(() => settingsStore.setData);

 // 监听字体变化并更新 CSS 变量
 watch(
--- a/src/renderer/layout/components/PlayBar.vue
+++ b/src/renderer/layout/components/PlayBar.vue
@@ -13,7 +13,7 @@
        ? textColors.theme === 'dark'
          ? '#000000'
          : '#ffffff'
-        : store.state.theme === 'dark'
+        : settingsStore.theme === 'dark'
          ? '#ffffff'
          : '#000000'
    }"
@@ -178,7 +178,6 @@
 import { useThrottleFn } from '@vueuse/core';
 import { computed, ref, useTemplateRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

 import SongItem from '@/components/common/SongItem.vue';
 import EqControl from '@/components/EQControl.vue';
@@ -193,23 +192,26 @@ import {
  textColors
 } from '@/hooks/MusicHook';
 import { audioService } from '@/services/audioService';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
 import type { SongResult } from '@/type/music';
 import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
 import { showShortcutToast } from '@/utils/shortcutToast';

 import MusicFull from './MusicFull.vue';

-const store = useStore();
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
 const { t } = useI18n();
 // 是否播放
-const play = computed(() => store.state.play as boolean);
+const play = computed(() => playerStore.isPlay);
 // 播放列表
-const playList = computed(() => store.state.playList as SongResult[]);
+const playList = computed(() => playerStore.playList as SongResult[]);
 // 背景颜色
 const background = ref('#000');

 watch(
-  () => store.state.playMusic,
+  () => playerStore.playMusic,
  async () => {
    background.value = playMusic.value.backgroundColor as string;
  },
@@ -268,7 +270,7 @@ const mute = () => {
 };

 // 播放模式
-const playMode = computed(() => store.state.playMode);
+const playMode = computed(() => playerStore.playMode);
 const playModeIcon = computed(() => {
  switch (playMode.value) {
    case 0:
@@ -296,15 +298,15 @@ const playModeText = computed(() => {

 // 切换播放模式
 const togglePlayMode = () => {
-  store.commit('togglePlayMode');
+  playerStore.togglePlayMode();
 };

 function handleNext() {
-  store.commit('nextPlay');
+  playerStore.nextPlay();
 }

 function handlePrev() {
-  store.commit('prevPlay');
+  playerStore.prevPlay();
 }

 const MusicFullRef = ref<any>(null);
@@ -313,9 +315,9 @@ const MusicFullRef = ref<any>(null);
 const playMusicEvent = async () => {
  try {
    // 检查是否有有效的音乐对象和 URL
-    if (!playMusic.value?.id || !store.state.playMusicUrl) {
+    if (!playMusic.value?.id || !playerStore.playMusicUrl) {
      console.warn('No valid music or URL available');
-      store.commit('setPlay', playMusic.value);
+      playerStore.setPlay(playMusic.value);
      return;
    }

@@ -323,7 +325,7 @@ const playMusicEvent = async () => {
      // 暂停播放
      if (audioService.getCurrentSound()) {
        audioService.pause();
-        store.commit('setPlayMusic', false);
+        playerStore.setPlayMusic(false);
      }
    } else {
      // 开始播放
@@ -332,13 +334,13 @@ const playMusicEvent = async () => {
        audioService.play();
      } else {
        // 如果没有音频实例，重新创建并播放
-        await audioService.play(store.state.playMusicUrl, playMusic.value);
+        await audioService.play(playerStore.playMusicUrl, playMusic.value);
      }
-      store.commit('setPlayMusic', true);
+      playerStore.setPlayMusic(true);
    }
  } catch (error) {
    console.error('播放出错:', error);
-    store.commit('nextPlay');
+    playerStore.nextPlay();
  }
 };

@@ -347,31 +349,31 @@ const musicFullVisible = ref(false);
 // 设置musicFull
 const setMusicFull = () => {
  musicFullVisible.value = !musicFullVisible.value;
-  store.commit('setMusicFull', musicFullVisible.value);
+  playerStore.setMusicFull(musicFullVisible.value);
  if (musicFullVisible.value) {
-    store.commit('setShowArtistDrawer', false);
+    settingsStore.showArtistDrawer = false;
  }
 };

-const palyListRef = useTemplateRef('palyListRef');
+const palyListRef = useTemplateRef('palyListRef') as any;

 const scrollToPlayList = (val: boolean) => {
  if (!val) return;
  setTimeout(() => {
-    palyListRef.value?.scrollTo({ top: store.state.playListIndex * 62 });
+    palyListRef.value?.scrollTo({ top: playerStore.playListIndex * 62 });
  }, 50);
 };

 const isFavorite = computed(() => {
-  return store.state.favoriteList.includes(playMusic.value.id);
+  return playerStore.favoriteList.includes(playMusic.value.id);
 });

 const toggleFavorite = async (e: Event) => {
  e.stopPropagation();
  if (isFavorite.value) {
-    store.commit('removeFromFavorite', playMusic.value.id);
+    playerStore.removeFromFavorite(playMusic.value.id);
  } else {
-    store.commit('addToFavorite', playMusic.value.id);
+    playerStore.addToFavorite(playMusic.value.id);
  }
 };

@@ -381,7 +383,7 @@ const openLyricWindow = () => {

 const handleArtistClick = (id: number) => {
  musicFullVisible.value = false;
-  store.commit('setCurrentArtistId', id);
+  settingsStore.currentArtistId = id;
 };

 // 添加全局快捷键处理
@@ -392,8 +394,8 @@ if (isElectron) {
      case 'togglePlay':
        playMusicEvent();
        showShortcutToast(
-          store.state.play ? t('player.playBar.play') : t('player.playBar.pause'),
-          store.state.play ? 'ri-pause-circle-line' : 'ri-play-circle-line'
+          play.value ? t('player.playBar.play') : t('player.playBar.pause'),
+          play.value ? 'ri-pause-circle-line' : 'ri-play-circle-line'
        );
        break;
      case 'prevPlay':
--- a/src/renderer/layout/components/SearchBar.vue
+++ b/src/renderer/layout/components/SearchBar.vue
@@ -16,7 +16,7 @@
          <n-dropdown trigger="hover" :options="searchTypeOptions" @select="selectSearchType">
            <div class="w-20 px-3 flex justify-between items-center">
              <div>
-                {{ searchTypeOptions.find((item) => item.key === store.state.searchType)?.label }}
+                {{ searchTypeOptions.find((item) => item.key === searchStore.searchType)?.label }}
              </div>
              <i class="iconfont icon-xiasanjiaoxing"></i>
            </div>
@@ -28,11 +28,11 @@
      <template #trigger>
        <div class="user-box">
          <n-avatar
-            v-if="store.state.user"
+            v-if="userStore.user"
            class="cursor-pointer"
            circle
            size="medium"
-            :src="getImgUrl(store.state.user.avatarUrl)"
+            :src="getImgUrl(userStore.user.avatarUrl)"
            @click="selectItem('user')"
          />
          <div v-else class="mx-2 rounded-full cursor-pointer text-sm" @click="toLogin">
@@ -41,16 +41,16 @@
        </div>
      </template>
      <div class="user-popover">
-        <div v-if="store.state.user" class="user-header" @click="selectItem('user')">
-          <n-avatar circle size="small" :src="getImgUrl(store.state.user?.avatarUrl)" />
-          <span class="username">{{ store.state.user?.nickname || 'Theodore' }}</span>
+        <div v-if="userStore.user" class="user-header" @click="selectItem('user')">
+          <n-avatar circle size="small" :src="getImgUrl(userStore.user?.avatarUrl)" />
+          <span class="username">{{ userStore.user?.nickname || 'Theodore' }}</span>
        </div>
        <div class="menu-items">
-          <div v-if="!store.state.user" class="menu-item" @click="toLogin">
+          <div v-if="!userStore.user" class="menu-item" @click="toLogin">
            <i class="iconfont ri-login-box-line"></i>
            <span>{{ t('comp.searchBar.toLogin') }}</span>
          </div>
-          <div v-if="store.state.user" class="menu-item" @click="selectItem('logout')">
+          <div v-if="userStore.user" class="menu-item" @click="selectItem('logout')">
            <i class="iconfont ri-logout-box-r-line"></i>
            <span>{{ t('comp.searchBar.logout') }}</span>
          </div>
@@ -60,9 +60,9 @@
            <span>{{ t('comp.searchBar.set') }}</span>
          </div>
          <div class="menu-item">
-            <i class="iconfont" :class="isDarkTheme ? 'ri-moon-line' : 'ri-sun-line'"></i>
+            <i class="iconfont" :class="isDark ? 'ri-moon-line' : 'ri-sun-line'"></i>
            <span>{{ t('comp.searchBar.theme') }}</span>
-            <n-switch v-model:value="isDarkTheme" class="ml-auto">
+            <n-switch v-model:value="isDark" class="ml-auto">
              <template #checked>
                <i class="ri-moon-line"></i>
              </template>
@@ -105,7 +105,6 @@
 import { computed, onMounted, ref, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useStore } from 'vuex';

 import { getSearchKeyword } from '@/api/home';
 import { getUserDetail } from '@/api/login';
@@ -113,13 +112,20 @@ import alipay from '@/assets/alipay.png';
 import wechat from '@/assets/wechat.png';
 import Coffee from '@/components/Coffee.vue';
 import { SEARCH_TYPES, USER_SET_OPTIONS } from '@/const/bar-const';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSearchStore } from '@/store/modules/search';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useUserStore } from '@/store/modules/user';
 import { getImgUrl } from '@/utils';
 import { checkUpdate, UpdateResult } from '@/utils/update';

 import config from '../../../../package.json';

 const router = useRouter();
-const store = useStore();
+const playerStore = usePlayerStore();
+const searchStore = useSearchStore();
+const settingsStore = useSettingsStore();
+const userStore = useUserStore();
 const userSetOptions = ref(USER_SET_OPTIONS);
 const { t } = useI18n();

@@ -137,15 +143,15 @@ const loadPage = async () => {
  if (!token) return;
  const { data } = await getUserDetail();
  console.log('data', data);
-  store.state.user =
-    data.profile || store.state.user || JSON.parse(localStorage.getItem('user') || '{}');
-  localStorage.setItem('user', JSON.stringify(store.state.user));
+  userStore.user =
+    data.profile || userStore.user || JSON.parse(localStorage.getItem('user') || '{}');
+  localStorage.setItem('user', JSON.stringify(userStore.user));
 };

 loadPage();

 watchEffect(() => {
-  if (store.state.user) {
+  if (userStore.user) {
    userSetOptions.value = USER_SET_OPTIONS;
  } else {
    userSetOptions.value = USER_SET_OPTIONS.filter((item) => item.key !== 'logout');
@@ -167,9 +173,9 @@ onMounted(() => {
  checkForUpdates();
 });

-const isDarkTheme = computed({
-  get: () => store.state.theme === 'dark',
-  set: () => store.commit('toggleTheme')
+const isDark = computed({
+  get: () => settingsStore.theme === 'dark',
+  set: () => settingsStore.toggleTheme()
 });

 // 搜索词
@@ -182,7 +188,7 @@ const search = () => {
  }

  if (router.currentRoute.value.path === '/search') {
-    store.state.searchValue = value;
+    searchStore.searchValue = value;
    return;
  }

@@ -190,13 +196,13 @@ const search = () => {
    path: '/search',
    query: {
      keyword: value,
-      type: store.state.searchType
+      type: searchStore.searchType
    }
  });
 };

 const selectSearchType = (key: number) => {
-  store.state.searchType = key;
+  searchStore.searchType = key;
  if (searchValue.value) {
    search();
  }
@@ -208,7 +214,7 @@ const selectItem = async (key: string) => {
  // switch 判断
  switch (key) {
    case 'logout':
-      store.commit('logout');
+      userStore.handleLogout();
      break;
    case 'login':
      router.push('/login');
@@ -250,7 +256,7 @@ const checkForUpdates = async () => {

 const toGithubRelease = () => {
  if (updateInfo.value.hasUpdate) {
-    store.commit('setShowUpdateModal', true);
+    settingsStore.showUpdateModal = true;
  } else {
    window.open('https://github.com/algerkong/AlgerMusicPlayer/releases', '_blank');
  }
--- a/src/renderer/layout/components/TitleBar.vue
+++ b/src/renderer/layout/components/TitleBar.vue
@@ -55,13 +55,13 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

+import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron } from '@/utils';

 const { t } = useI18n();

-const store = useStore();
+const settingsStore = useSettingsStore();
 const showCloseModal = ref(false);
 const rememberChoice = ref(false);

@@ -80,38 +80,30 @@ const minimize = () => {

 const handleAction = (action: 'minimize' | 'close') => {
  if (rememberChoice.value) {
-    store.commit('setSetData', {
-      ...store.state.setData,
+    settingsStore.setSettings({
+      ...settingsStore.setData,
      closeAction: action
    });
  }

  if (action === 'minimize') {
-    window.api.miniTray();
+    window.api.minimize();
  } else {
    window.api.close();
  }
  showCloseModal.value = false;
 };

-const close = () => {
-  if (!isElectron) {
-    return;
-  }
-
-  const { closeAction } = store.state.setData;
+const handleClose = () => {
+  const { closeAction } = settingsStore.setData;

  if (closeAction === 'minimize') {
-    window.api.miniTray();
-    return;
-  }
-
-  if (closeAction === 'close') {
+    window.api.minimize();
+  } else if (closeAction === 'close') {
    window.api.close();
-    return;
+  } else {
+    showCloseModal.value = true;
  }
-
-  showCloseModal.value = true;
 };

 const drag = (event: MouseEvent) => {
@@ -120,6 +112,10 @@ const drag = (event: MouseEvent) => {
  }
  window.api.dragStart(event as unknown as string);
 };
+
+const handleThemeChange = () => {
+  settingsStore.toggleTheme();
+};
 </script>

 <style scoped lang="scss">
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -6,7 +6,7 @@ import { createApp } from 'vue';

 import i18n from '@/../i18n/renderer';
 import router from '@/router';
-import store from '@/store';
+import pinia from '@/store';

 import App from './App.vue';
 import directives from './directive';
@@ -17,7 +17,7 @@ Object.keys(directives).forEach((key: string) => {
  app.directive(key, directives[key as keyof typeof directives]);
 });

+app.use(pinia);
 app.use(router);
-app.use(store);
 app.use(i18n);
 app.mount('#app');
--- a/src/renderer/store/index.ts
+++ b/src/renderer/store/index.ts
@@ -1,9 +1,11 @@
-import { createStore } from 'vuex';
+import { createPinia } from 'pinia';
+import { markRaw } from 'vue';

 import setData from '@/../main/set.json';
 import { logout } from '@/api/login';
 import { getLikedList, likeSong } from '@/api/music';
 import { useMusicListHook } from '@/hooks/MusicListHook';
+import router from '@/router';
 import homeRouter from '@/router/home';
 import type { SongResult } from '@/type/music';
 import { isElectron } from '@/utils';
@@ -409,10 +411,20 @@ const actions = {
  }
 };

-const store = createStore({
-  state,
-  mutations,
-  actions
+// 创建 pinia 实例
+const pinia = createPinia();
+
+// 添加路由到 Pinia
+pinia.use(({ store }) => {
+  store.router = markRaw(router);
 });

-export default store;
+// 导出所有 store
+export * from './modules/lyric';
+export * from './modules/menu';
+export * from './modules/player';
+export * from './modules/search';
+export * from './modules/settings';
+export * from './modules/user';
+
+export default pinia;
--- a/src/renderer/store/modules/lyric.ts
+++ b/src/renderer/store/modules/lyric.ts
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useLyricStore = defineStore('lyric', () => {
+  const lyric = ref({});
+
+  const setLyric = (newLyric: any) => {
+    lyric.value = newLyric;
+  };
+
+  return {
+    lyric,
+    setLyric
+  };
+});
--- a/src/renderer/store/modules/menu.ts
+++ b/src/renderer/store/modules/menu.ts
@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+import homeRouter from '@/router/home';
+
+export const useMenuStore = defineStore('menu', () => {
+  const menus = ref(homeRouter);
+
+  const setMenus = (newMenus: any[]) => {
+    menus.value = newMenus;
+  };
+
+  return {
+    menus,
+    setMenus
+  };
+});
--- a/src/renderer/store/modules/player.ts
+++ b/src/renderer/store/modules/player.ts
@@ -0,0 +1,455 @@
+import { cloneDeep } from 'lodash';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+import { getLikedList, getMusicLrc, getMusicUrl, getParsingMusicUrl } from '@/api/music';
+import { useMusicHistory } from '@/hooks/MusicHistoryHook';
+import type { ILyric, ILyricText, SongResult } from '@/type/music';
+import { getImgUrl } from '@/utils';
+import { getImageLinearBackground } from '@/utils/linearColor';
+
+import { useSettingsStore } from './settings';
+import { useUserStore } from './user';
+
+const musicHistory = useMusicHistory();
+
+const preloadingSounds = ref<Howl[]>([]);
+
+function getLocalStorageItem<T>(key: string, defaultValue: T): T {
+  try {
+    const item = localStorage.getItem(key);
+    return item ? JSON.parse(item) : defaultValue;
+  } catch {
+    return defaultValue;
+  }
+}
+
+export const getSongUrl = async (id: number, songData: any, isDownloaded: boolean = false) => {
+  const { data } = await getMusicUrl(id, isDownloaded);
+  let url = '';
+  let songDetail = null;
+  try {
+    if (data.data[0].freeTrialInfo || !data.data[0].url) {
+      const res = await getParsingMusicUrl(id, songData);
+      url = res.data.data.url;
+      songDetail = res.data.data;
+    } else {
+      songDetail = data.data[0] as any;
+    }
+  } catch (error) {
+    console.error('error', error);
+  }
+  if (isDownloaded) {
+    return songDetail;
+  }
+  url = url || data.data[0].url;
+  return url;
+};
+const parseTime = (timeString: string): number => {
+  const [minutes, seconds] = timeString.split(':');
+  return Number(minutes) * 60 + Number(seconds);
+};
+
+const parseLyricLine = (lyricLine: string): { time: number; text: string } => {
+  const TIME_REGEX = /(\d{2}:\d{2}(\.\d*)?)/g;
+  const LRC_REGEX = /(\[(\d{2}):(\d{2})(\.(\d*))?\])/g;
+  const timeText = lyricLine.match(TIME_REGEX)?.[0] || '';
+  const time = parseTime(timeText);
+  const text = lyricLine.replace(LRC_REGEX, '').trim();
+  return { time, text };
+};
+
+const parseLyrics = (lyricsString: string): { lyrics: ILyricText[]; times: number[] } => {
+  const lines = lyricsString.split('\n');
+  const lyrics: ILyricText[] = [];
+  const times: number[] = [];
+  lines.forEach((line) => {
+    const { time, text } = parseLyricLine(line);
+    times.push(time);
+    lyrics.push({ text, trText: '' });
+  });
+  return { lyrics, times };
+};
+
+export const loadLrc = async (playMusicId: number): Promise<ILyric> => {
+  try {
+    const { data } = await getMusicLrc(playMusicId);
+    const { lyrics, times } = parseLyrics(data.lrc.lyric);
+    const tlyric: Record<string, string> = {};
+
+    if (data.tlyric && data.tlyric.lyric) {
+      const { lyrics: tLyrics, times: tTimes } = parseLyrics(data.tlyric.lyric);
+      tLyrics.forEach((lyric, index) => {
+        tlyric[tTimes[index].toString()] = lyric.text;
+      });
+    }
+
+    lyrics.forEach((item, index) => {
+      item.trText = item.text ? tlyric[times[index].toString()] || '' : '';
+    });
+    return {
+      lrcTimeArray: times,
+      lrcArray: lyrics
+    };
+  } catch (err) {
+    console.error('Error loading lyrics:', err);
+    return {
+      lrcTimeArray: [],
+      lrcArray: []
+    };
+  }
+};
+
+const getSongDetail = async (playMusic: SongResult) => {
+  playMusic.playLoading = true;
+  const playMusicUrl =
+    playMusic.playMusicUrl || (await getSongUrl(playMusic.id, cloneDeep(playMusic)));
+  const { backgroundColor, primaryColor } =
+    playMusic.backgroundColor && playMusic.primaryColor
+      ? playMusic
+      : await getImageLinearBackground(getImgUrl(playMusic?.picUrl, '30y30'));
+
+  playMusic.playLoading = false;
+  return { ...playMusic, playMusicUrl, backgroundColor, primaryColor } as SongResult;
+};
+
+const preloadNextSong = (nextSongUrl: string) => {
+  try {
+    // 限制同时预加载的数量
+    if (preloadingSounds.value.length >= 2) {
+      const oldestSound = preloadingSounds.value.shift();
+      if (oldestSound) {
+        oldestSound.unload();
+      }
+    }
+
+    const sound = new Howl({
+      src: [nextSongUrl],
+      html5: true,
+      preload: true,
+      autoplay: false
+    });
+
+    preloadingSounds.value.push(sound);
+
+    // 添加加载错误处理
+    sound.on('loaderror', () => {
+      console.error('预加载音频失败:', nextSongUrl);
+      const index = preloadingSounds.value.indexOf(sound);
+      if (index > -1) {
+        preloadingSounds.value.splice(index, 1);
+      }
+      sound.unload();
+    });
+
+    return sound;
+  } catch (error) {
+    console.error('预加载音频出错:', error);
+    return null;
+  }
+};
+
+const fetchSongs = async (playList: SongResult[], startIndex: number, endIndex: number) => {
+  try {
+    const songs = playList.slice(Math.max(0, startIndex), Math.min(endIndex, playList.length));
+
+    const detailedSongs = await Promise.all(
+      songs.map(async (song: SongResult) => {
+        try {
+          // 如果歌曲详情已经存在，就不重复请求
+          if (!song.playMusicUrl) {
+            return await getSongDetail(song);
+          }
+          return song;
+        } catch (error) {
+          console.error('获取歌曲详情失败:', error);
+          return song;
+        }
+      })
+    );
+
+    // 加载下一首的歌词
+    const nextSong = detailedSongs[0];
+    if (nextSong && !(nextSong.lyric && nextSong.lyric.lrcTimeArray.length > 0)) {
+      try {
+        nextSong.lyric = await loadLrc(nextSong.id);
+      } catch (error) {
+        console.error('加载歌词失败:', error);
+      }
+    }
+
+    // 更新播放列表中的歌曲详情
+    detailedSongs.forEach((song, index) => {
+      if (song && startIndex + index < playList.length) {
+        playList[startIndex + index] = song;
+      }
+    });
+
+    // 只预加载下一首歌曲
+    if (nextSong && nextSong.playMusicUrl) {
+      preloadNextSong(nextSong.playMusicUrl);
+    }
+  } catch (error) {
+    console.error('获取歌曲列表失败:', error);
+  }
+};
+
+// 异步加载歌词的方法
+const loadLrcAsync = async (playMusic: SongResult) => {
+  if (playMusic.lyric && playMusic.lyric.lrcTimeArray.length > 0) {
+    return;
+  }
+  const lyrics = await loadLrc(playMusic.id);
+  playMusic.lyric = lyrics;
+};
+
+export const usePlayerStore = defineStore('player', () => {
+  // 状态
+  const play = ref(false);
+  const isPlay = ref(false);
+  const playMusic = ref<SongResult>(getLocalStorageItem('currentPlayMusic', {} as SongResult));
+  const playMusicUrl = ref(getLocalStorageItem('currentPlayMusicUrl', ''));
+  const playList = ref<SongResult[]>(getLocalStorageItem('playList', []));
+  const playListIndex = ref(getLocalStorageItem('playListIndex', 0));
+  const playMode = ref(getLocalStorageItem('playMode', 0));
+  const musicFull = ref(false);
+  const favoriteList = ref<number[]>(getLocalStorageItem('favoriteList', []));
+  const savedPlayProgress = ref<number | undefined>();
+
+  // 计算属性
+  const currentSong = computed(() => playMusic.value);
+  const isPlaying = computed(() => isPlay.value);
+  const currentPlayList = computed(() => playList.value);
+  const currentPlayListIndex = computed(() => playListIndex.value);
+
+  const handlePlayMusic = async (music: SongResult, isPlay: boolean = true) => {
+    const updatedPlayMusic = await getSongDetail(music);
+    playMusic.value = updatedPlayMusic;
+    playMusicUrl.value = updatedPlayMusic.playMusicUrl as string;
+
+    // 记录当前设置的播放状态
+    play.value = isPlay;
+
+    // 每次设置新歌曲时，立即更新 localStorage
+    localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
+    localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
+    localStorage.setItem('isPlaying', play.value.toString());
+
+    // 设置网页标题
+    document.title = `${updatedPlayMusic.name} - ${updatedPlayMusic?.song?.artists?.reduce((prev, curr) => `${prev}${curr.name}/`, '')}`;
+    loadLrcAsync(playMusic.value);
+    musicHistory.addMusic(playMusic.value);
+    playListIndex.value = playList.value.findIndex((item: SongResult) => item.id === music.id);
+    // 请求后续五首歌曲的详情
+    fetchSongs(playList.value, playListIndex.value + 1, playListIndex.value + 6);
+  };
+
+  // 方法
+  const setPlay = async (song: SongResult) => {
+    await handlePlayMusic(song);
+    localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
+    localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
+  };
+
+  const setIsPlay = (value: boolean) => {
+    isPlay.value = value;
+    localStorage.setItem('isPlaying', value.toString());
+  };
+
+  const setPlayMusic = async (value: boolean | SongResult) => {
+    if (typeof value === 'boolean') {
+      play.value = value;
+      isPlay.value = value;
+      localStorage.setItem('isPlaying', value.toString());
+    } else {
+      await handlePlayMusic(value);
+      play.value = true;
+      isPlay.value = true;
+      localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
+      localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
+    }
+  };
+
+  const setMusicFull = (value: boolean) => {
+    musicFull.value = value;
+  };
+
+  const setPlayList = (list: SongResult[]) => {
+    playListIndex.value = list.findIndex((item) => item.id === playMusic.value.id);
+    playList.value = list;
+    localStorage.setItem('playList', JSON.stringify(list));
+    localStorage.setItem('playListIndex', playListIndex.value.toString());
+  };
+
+  const addToNextPlay = (song: SongResult) => {
+    const list = [...playList.value];
+    const currentIndex = playListIndex.value;
+
+    const existingIndex = list.findIndex((item) => item.id === song.id);
+    if (existingIndex !== -1) {
+      list.splice(existingIndex, 1);
+    }
+
+    list.splice(currentIndex + 1, 0, song);
+    setPlayList(list);
+  };
+
+  const nextPlay = async () => {
+    if (playList.value.length === 0) {
+      play.value = true;
+      return;
+    }
+
+    let nowPlayListIndex: number;
+
+    if (playMode.value === 2) {
+      // 随机播放模式
+      do {
+        nowPlayListIndex = Math.floor(Math.random() * playList.value.length);
+      } while (nowPlayListIndex === playListIndex.value && playList.value.length > 1);
+    } else {
+      // 列表循环模式
+      nowPlayListIndex = (playListIndex.value + 1) % playList.value.length;
+    }
+
+    playListIndex.value = nowPlayListIndex;
+    await handlePlayMusic(playList.value[playListIndex.value]);
+  };
+
+  const prevPlay = async () => {
+    if (playList.value.length === 0) {
+      play.value = true;
+      return;
+    }
+    const nowPlayListIndex =
+      (playListIndex.value - 1 + playList.value.length) % playList.value.length;
+    await handlePlayMusic(playList.value[nowPlayListIndex]);
+    await fetchSongs(playList.value, playListIndex.value - 5, nowPlayListIndex);
+  };
+
+  const togglePlayMode = () => {
+    playMode.value = (playMode.value + 1) % 3;
+    localStorage.setItem('playMode', JSON.stringify(playMode.value));
+  };
+
+  const addToFavorite = async (id: number) => {
+    if (!favoriteList.value.includes(id)) {
+      favoriteList.value.push(id);
+      localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
+    }
+  };
+
+  const removeFromFavorite = async (id: number) => {
+    favoriteList.value = favoriteList.value.filter((item) => item !== id);
+    localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
+  };
+
+  // 初始化播放状态
+  const initializePlayState = async () => {
+    const settingStore = useSettingsStore();
+    const savedPlayList = getLocalStorageItem('playList', []);
+    const savedPlayMusic = getLocalStorageItem<SongResult | null>('currentPlayMusic', null);
+    const savedProgress = localStorage.getItem('playProgress');
+
+    if (savedPlayList.length > 0) {
+      setPlayList(savedPlayList);
+    }
+
+    if (savedPlayMusic && Object.keys(savedPlayMusic).length > 0) {
+      try {
+        console.log('settingStore.setData', settingStore.setData);
+        const isPlaying = settingStore.setData.autoPlay;
+        await handlePlayMusic(savedPlayMusic, isPlaying);
+
+        if (savedProgress) {
+          try {
+            const progress = JSON.parse(savedProgress);
+            if (progress && progress.songId === savedPlayMusic.id) {
+              savedPlayProgress.value = progress.progress;
+            } else {
+              localStorage.removeItem('playProgress');
+            }
+          } catch (e) {
+            console.error('解析保存的播放进度失败', e);
+            localStorage.removeItem('playProgress');
+          }
+        }
+      } catch (error) {
+        console.error('重新获取音乐链接失败:', error);
+        play.value = false;
+        isPlay.value = false;
+        playMusic.value = {} as SongResult;
+        playMusicUrl.value = '';
+        localStorage.removeItem('currentPlayMusic');
+        localStorage.removeItem('currentPlayMusicUrl');
+        localStorage.removeItem('isPlaying');
+        localStorage.removeItem('playProgress');
+      }
+    }
+  };
+
+  const initializeFavoriteList = async () => {
+    const userStore = useUserStore();
+    // 先获取本地收藏列表
+    const localFavoriteList = localStorage.getItem('favoriteList');
+    const localList: number[] = localFavoriteList ? JSON.parse(localFavoriteList) : [];
+
+    // 如果用户已登录，尝试获取服务器收藏列表并合并
+    if (userStore.user && userStore.user.userId) {
+      try {
+        const res = await getLikedList(userStore.user.userId);
+        if (res.data?.ids) {
+          // 合并本地和服务器的收藏列表，去重
+          const serverList = res.data.ids.reverse();
+          const mergedList = Array.from(new Set([...localList, ...serverList]));
+          favoriteList.value = mergedList;
+        } else {
+          favoriteList.value = localList;
+        }
+      } catch (error) {
+        console.error('获取服务器收藏列表失败，使用本地数据:', error);
+        favoriteList.value = localList;
+      }
+    } else {
+      favoriteList.value = localList;
+    }
+
+    // 更新本地存储
+    localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
+  };
+
+  return {
+    // 状态
+    play,
+    isPlay,
+    playMusic,
+    playMusicUrl,
+    playList,
+    playListIndex,
+    playMode,
+    musicFull,
+    savedPlayProgress,
+    favoriteList,
+
+    // 计算属性
+    currentSong,
+    isPlaying,
+    currentPlayList,
+    currentPlayListIndex,
+
+    // 方法
+    setPlay,
+    setIsPlay,
+    nextPlay,
+    prevPlay,
+    setPlayMusic,
+    setMusicFull,
+    setPlayList,
+    addToNextPlay,
+    togglePlayMode,
+    initializePlayState,
+    initializeFavoriteList,
+    addToFavorite,
+    removeFromFavorite
+  };
+});
--- a/src/renderer/store/modules/search.ts
+++ b/src/renderer/store/modules/search.ts
@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useSearchStore = defineStore('search', () => {
+  const searchValue = ref('');
+  const searchType = ref(1);
+
+  const setSearchValue = (value: string) => {
+    searchValue.value = value;
+  };
+
+  const setSearchType = (type: number) => {
+    searchType.value = type;
+  };
+
+  return {
+    searchValue,
+    searchType,
+    setSearchValue,
+    setSearchType
+  };
+});
--- a/src/renderer/store/modules/settings.ts
+++ b/src/renderer/store/modules/settings.ts
@@ -0,0 +1,127 @@
+import { cloneDeep } from 'lodash';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+import setDataDefault from '@/../main/set.json';
+import { isElectron } from '@/utils';
+import { applyTheme, getCurrentTheme, ThemeType } from '@/utils/theme';
+
+export const useSettingsStore = defineStore('settings', () => {
+  // 初始化时先从存储中读取设置
+  const getInitialSettings = () => {
+    if (isElectron) {
+      const savedSettings = window.electron.ipcRenderer.sendSync('get-store-value', 'set');
+      return savedSettings || setDataDefault;
+    }
+    const savedSettings = localStorage.getItem('appSettings');
+    return savedSettings ? JSON.parse(savedSettings) : setDataDefault;
+  };
+
+  const setData = ref(getInitialSettings());
+  const theme = ref<ThemeType>(getCurrentTheme());
+  const isMobile = ref(false);
+  const showUpdateModal = ref(false);
+  const showArtistDrawer = ref(false);
+  const currentArtistId = ref<number | null>(null);
+  const systemFonts = ref<{ label: string; value: string }[]>([
+    { label: '系统默认', value: 'system-ui' }
+  ]);
+  const showDownloadDrawer = ref(false);
+
+  const setSetData = (data: any) => {
+    if (isElectron) {
+      console.log('data', data);
+      window.electron.ipcRenderer.send('set-store-value', 'set', cloneDeep(data));
+      setData.value = cloneDeep(data);
+    } else {
+      localStorage.setItem('appSettings', JSON.stringify(cloneDeep(data)));
+    }
+  };
+
+  const toggleTheme = () => {
+    theme.value = theme.value === 'dark' ? 'light' : 'dark';
+    applyTheme(theme.value);
+  };
+
+  const setShowUpdateModal = (value: boolean) => {
+    showUpdateModal.value = value;
+  };
+
+  const setShowArtistDrawer = (show: boolean) => {
+    showArtistDrawer.value = show;
+    if (!show) {
+      currentArtistId.value = null;
+    }
+  };
+
+  const setCurrentArtistId = (id: number) => {
+    currentArtistId.value = id;
+  };
+
+  const setSystemFonts = (fonts: string[]) => {
+    systemFonts.value = [
+      { label: '系统默认', value: 'system-ui' },
+      ...fonts.map((font) => ({
+        label: font,
+        value: font
+      }))
+    ];
+  };
+
+  const setShowDownloadDrawer = (show: boolean) => {
+    showDownloadDrawer.value = show;
+  };
+
+  const setLanguage = (language: string) => {
+    setSetData({
+      ...setData.value,
+      language
+    });
+    if (isElectron) {
+      window.electron.ipcRenderer.send('change-language', language);
+    }
+  };
+
+  const initializeSettings = () => {
+    // const savedSettings = getInitialSettings();
+    // setData.value = savedSettings;
+  };
+
+  const initializeTheme = () => {
+    applyTheme(theme.value);
+  };
+
+  const initializeSystemFonts = async () => {
+    if (!isElectron) return;
+    if (systemFonts.value.length > 1) return;
+
+    try {
+      const fonts = await window.api.invoke('get-system-fonts');
+      setSystemFonts(fonts);
+    } catch (error) {
+      console.error('获取系统字体失败:', error);
+    }
+  };
+
+  return {
+    setData,
+    theme,
+    isMobile,
+    showUpdateModal,
+    showArtistDrawer,
+    currentArtistId,
+    systemFonts,
+    showDownloadDrawer,
+    setSetData,
+    toggleTheme,
+    setShowUpdateModal,
+    setShowArtistDrawer,
+    setCurrentArtistId,
+    setSystemFonts,
+    setShowDownloadDrawer,
+    setLanguage,
+    initializeSettings,
+    initializeTheme,
+    initializeSystemFonts
+  };
+});
--- a/src/renderer/store/modules/user.ts
+++ b/src/renderer/store/modules/user.ts
@@ -0,0 +1,84 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+import { logout } from '@/api/login';
+import { getLikedList } from '@/api/music';
+
+interface UserData {
+  userId: number;
+  [key: string]: any;
+}
+
+function getLocalStorageItem<T>(key: string, defaultValue: T): T {
+  try {
+    const item = localStorage.getItem(key);
+    return item ? JSON.parse(item) : defaultValue;
+  } catch {
+    return defaultValue;
+  }
+}
+
+export const useUserStore = defineStore('user', () => {
+  // 状态
+  const user = ref<UserData | null>(getLocalStorageItem('user', null));
+  const searchValue = ref('');
+  const searchType = ref(1);
+
+  // 方法
+  const setUser = (userData: UserData) => {
+    user.value = userData;
+    localStorage.setItem('user', JSON.stringify(userData));
+  };
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      user.value = null;
+      localStorage.removeItem('user');
+      localStorage.removeItem('token');
+    } catch (error) {
+      console.error('登出失败:', error);
+    }
+  };
+
+  const setSearchValue = (value: string) => {
+    searchValue.value = value;
+  };
+
+  const setSearchType = (type: number) => {
+    searchType.value = type;
+  };
+
+  // 初始化
+  const initializeUser = async () => {
+    const savedUser = getLocalStorageItem<UserData | null>('user', null);
+    if (savedUser) {
+      user.value = savedUser;
+      // 如果用户已登录，获取收藏列表
+      if (localStorage.getItem('token')) {
+        try {
+          const { data } = await getLikedList(savedUser.userId);
+          return data?.ids || [];
+        } catch (error) {
+          console.error('获取收藏列表失败:', error);
+          return [];
+        }
+      }
+    }
+    return [];
+  };
+
+  return {
+    // 状态
+    user,
+    searchValue,
+    searchType,
+
+    // 方法
+    setUser,
+    handleLogout,
+    setSearchValue,
+    setSearchType,
+    initializeUser
+  };
+});
--- a/src/renderer/utils/index.ts
+++ b/src/renderer/utils/index.ts
@@ -1,6 +1,6 @@
 import { computed } from 'vue';

-import store from '@/store';
+import { useSettingsStore } from '@/store/modules/settings';

 // 设置歌手背景图片
 export const setBackgroundImg = (url: String) => {
@@ -8,10 +8,11 @@ export const setBackgroundImg = (url: String) => {
 };
 // 设置动画类型
 export const setAnimationClass = (type: String) => {
-  if (store.state.setData && store.state.setData.noAnimate) {
+  const settingsStore = useSettingsStore();
+  if (settingsStore.setData && settingsStore.setData.noAnimate) {
    return '';
  }
-  const speed = store.state.setData?.animationSpeed || 1;
+  const speed = settingsStore.setData?.animationSpeed || 1;

  let speedClass = '';
  if (speed <= 0.3) speedClass = 'animate__slower';
@@ -23,10 +24,11 @@ export const setAnimationClass = (type: String) => {
 };
 // 设置动画延时
 export const setAnimationDelay = (index: number = 6, time: number = 50) => {
-  if (store.state.setData?.noAnimate) {
+  const settingsStore = useSettingsStore();
+  if (settingsStore.setData?.noAnimate) {
    return '';
  }
-  const speed = store.state.setData?.animationSpeed || 1;
+  const speed = settingsStore.setData?.animationSpeed || 1;
  return `animation-delay:${(index * time) / (speed * 2)}ms`;
 };

@@ -75,7 +77,8 @@ export const isMobile = computed(() => {
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  );

-  store.state.isMobile = !!flag;
+  const settingsStore = useSettingsStore();
+  settingsStore.isMobile = !!flag;

  // 给html标签 添加mobile
  if (flag) document.documentElement.classList.add('mobile');
--- a/src/renderer/utils/request.ts
+++ b/src/renderer/utils/request.ts
@@ -1,6 +1,7 @@
 import axios, { InternalAxiosRequestConfig } from 'axios';

-import store from '@/store';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useUserStore } from '@/store/modules/user';

 import { isElectron } from '.';

@@ -8,9 +9,13 @@ let setData: any = null;
 const getSetData = () => {
  if (window.electron) {
    setData = window.electron.ipcRenderer.sendSync('get-store-value', 'set');
+  } else {
+    const settingsStore = useSettingsStore();
+    setData = settingsStore.setData;
  }
+  return setData;
 };
-getSetData();
+
 // 扩展请求配置接口
 interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
  retryCount?: number;
@@ -34,6 +39,9 @@ const RETRY_DELAY = 500;
 request.interceptors.request.use(
  (config: CustomAxiosRequestConfig) => {
    getSetData();
+    config.baseURL = window.electron
+      ? `http://127.0.0.1:${setData?.musicApiPort}`
+      : import.meta.env.VITE_API;
    // 只在retryCount未定义时初始化为0
    if (config.retryCount === undefined) {
      config.retryCount = 0;
@@ -86,8 +94,9 @@ request.interceptors.response.use(
    // 处理 301 状态码
    if (error.response?.status === 301 && config.params.noLogin !== true) {
      // 使用 store mutation 清除用户信息
-      store.commit('logout');
-      console.error(`301 状态码，清除登录信息后重试第 ${config.retryCount} 次`, config);
+      const userStore = useUserStore();
+      userStore.handleLogout();
+      console.log(`301 状态码，清除登录信息后重试第 ${config.retryCount} 次`);
      config.retryCount = 3;
    }

--- a/src/renderer/views/favorite/index.vue
+++ b/src/renderer/views/favorite/index.vue
@@ -88,18 +88,18 @@ import { useMessage } from 'naive-ui';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useStore } from 'vuex';

 import { getMusicDetail } from '@/api/music';
 import SongItem from '@/components/common/SongItem.vue';
 import { getSongUrl } from '@/hooks/MusicListHook';
+import { usePlayerStore } from '@/store';
 import type { SongResult } from '@/type/music';
 import { isElectron, setAnimationClass, setAnimationDelay } from '@/utils';

 const { t } = useI18n();
-const store = useStore();
+const playerStore = usePlayerStore();
 const message = useMessage();
-const favoriteList = computed(() => store.state.favoriteList);
+const favoriteList = computed(() => playerStore.favoriteList);
 const favoriteSongs = ref<SongResult[]>([]);
 const loading = ref(false);
 const noMore = ref(false);
@@ -277,7 +277,7 @@ const handleScroll = (e: any) => {
 };

 onMounted(async () => {
-  await store.dispatch('initializeFavoriteList');
+  await playerStore.initializeFavoriteList();
  await getFavoriteSongs();
 });

@@ -293,7 +293,7 @@ watch(
 );

 const handlePlay = () => {
-  store.commit('setPlayList', favoriteSongs.value);
+  playerStore.setPlayList(favoriteSongs.value);
 };

 const getItemAnimationDelay = (index: number) => {
--- a/src/renderer/views/history/index.vue
+++ b/src/renderer/views/history/index.vue
@@ -34,11 +34,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

 import { getMusicDetail } from '@/api/music';
 import SongItem from '@/components/common/SongItem.vue';
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
+import { usePlayerStore } from '@/store/modules/player';
 import type { SongResult } from '@/type/music';
 import { setAnimationClass, setAnimationDelay } from '@/utils';

@@ -47,12 +47,12 @@ defineOptions({
 });

 const { t } = useI18n();
-const store = useStore();
 const { delMusic, musicList } = useMusicHistory();
 const scrollbarRef = ref();
 const loading = ref(false);
 const noMore = ref(false);
 const displayList = ref<SongResult[]>([]);
+const playerStore = usePlayerStore();

 // 无限滚动相关配置
 const pageSize = 20;
@@ -112,7 +112,7 @@ const handleScroll = (e: any) => {

 // 播放全部
 const handlePlay = () => {
-  store.commit('setPlayList', displayList.value);
+  playerStore.setPlayList(displayList.value);
 };

 onMounted(() => {
--- a/src/renderer/views/login/index.vue
+++ b/src/renderer/views/login/index.vue
@@ -3,9 +3,9 @@ import { useMessage } from 'naive-ui';
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useStore } from 'vuex';

 import { checkQr, createQr, getQrKey, getUserDetail, loginByCellphone } from '@/api/login';
+import { useUserStore } from '@/store/modules/user';
 import { setAnimationClass } from '@/utils';

 defineOptions({
@@ -14,11 +14,12 @@ defineOptions({

 const { t } = useI18n();
 const message = useMessage();
-const store = useStore();
 const router = useRouter();
 const isQr = ref(true);

 const qrUrl = ref<string>();
+const userStore = useUserStore();
+
 onMounted(() => {
  loadLogin();
 });
@@ -56,7 +57,7 @@ const timerIsQr = (key: string) => {
      if (data.code === 803) {
        localStorage.setItem('token', data.cookie);
        const user = await getUserDetail();
-        store.state.user = user.data.profile;
+        userStore.user = user.data.profile;
        localStorage.setItem('user', JSON.stringify(user.data.profile));
        message.success(t('login.message.loginSuccess'));

@@ -95,7 +96,7 @@ const loginPhone = async () => {
  const { data } = await loginByCellphone(phone.value, password.value);
  if (data.code === 200) {
    message.success(t('login.message.loginSuccess'));
-    store.state.user = data.profile;
+    userStore.user = data.profile;
    localStorage.setItem('token', data.cookie);
    setTimeout(() => {
      router.push('/user');
--- a/src/renderer/views/mv/index.vue
+++ b/src/renderer/views/mv/index.vue
@@ -64,11 +64,11 @@

 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
-import { useStore } from 'vuex';

 import { getAllMv, getTopMv } from '@/api/mv';
 import MvPlayer from '@/components/MvPlayer.vue';
 import { audioService } from '@/services/audioService';
+import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/type/mv';
 import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';

@@ -79,7 +79,6 @@ defineOptions({
 const showMv = ref(false);
 const mvList = ref<Array<IMvItem>>([]);
 const playMvItem = ref<IMvItem>();
-const store = useStore();
 const initLoading = ref(false);
 const loadingMore = ref(false);
 const currentIndex = ref(0);
@@ -97,6 +96,8 @@ const categories = [
 ];
 const selectedCategory = ref('全部');

+const playerStore = usePlayerStore();
+
 watch(selectedCategory, async () => {
  offset.value = 0;
  mvList.value = [];
@@ -114,8 +115,8 @@ onMounted(async () => {
 });

 const handleShowMv = async (item: IMvItem, index: number) => {
-  store.commit('setIsPlay', false);
-  store.commit('setPlayMusic', false);
+  playerStore.setIsPlay(false);
+  playerStore.setPlayMusic(false);
  audioService.getCurrentSound()?.pause();
  showMv.value = true;
  currentIndex.value = index;
--- a/src/renderer/views/search/index.vue
+++ b/src/renderer/views/search/index.vue
@@ -107,12 +107,13 @@ import { useDateFormat } from '@vueuse/core';
 import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { useStore } from 'vuex';

 import { getHotSearch } from '@/api/home';
 import { getSearch } from '@/api/search';
 import SearchItem from '@/components/common/SearchItem.vue';
 import SongItem from '@/components/common/SongItem.vue';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSearchStore } from '@/store/modules/search';
 import type { IHotSearch } from '@/type/search';
 import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';

@@ -122,10 +123,11 @@ defineOptions({

 const { t } = useI18n();
 const route = useRoute();
-const store = useStore();
+const playerStore = usePlayerStore();
+const searchStore = useSearchStore();

 const searchDetail = ref<any>();
-const searchType = computed(() => store.state.searchType as number);
+const searchType = computed(() => searchStore.searchType as number);
 const searchDetailLoading = ref(false);
 const searchHistory = ref<string[]>([]);

@@ -188,23 +190,6 @@ onMounted(() => {

 const hotKeyword = ref(route.query.keyword || t('search.title.searchList'));

-watch(
-  () => store.state.searchValue,
-  (value) => {
-    loadSearch(value);
-  }
-);
-
-watch(
-  () => searchType.value,
-  () => {
-    if (store.state.searchValue) {
-      loadSearch(store.state.searchValue);
-    }
-  }
-);
-
-const dateFormat = (time: any) => useDateFormat(time, 'YYYY.MM.DD').value;
 const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) => {
  if (!keywords) return;

@@ -295,6 +280,31 @@ const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) =
  }
 };

+watch(
+  () => searchStore.searchValue,
+  (value) => {
+    loadSearch(value);
+  }
+);
+
+watch(
+  () => searchType.value,
+  () => {
+    if (searchStore.searchValue) {
+      loadSearch(searchStore.searchValue);
+    }
+  }
+);
+// 修改 store.state 的访问
+if (searchStore.searchValue) {
+  loadSearch(searchStore.searchValue);
+}
+
+// 修改 store.state 的设置
+searchStore.searchValue = route.query.keyword as string;
+
+const dateFormat = (time: any) => useDateFormat(time, 'YYYY.MM.DD').value;
+
 // 添加滚动处理函数
 const handleScroll = (e: any) => {
  const { scrollTop, scrollHeight, clientHeight } = e.target;
@@ -308,14 +318,14 @@ watch(
  () => route.path,
  async (path) => {
    if (path === '/search') {
-      store.state.searchValue = route.query.keyword;
+      searchStore.searchValue = route.query.keyword as string;
    }
  }
 );

 const handlePlay = () => {
  const tracks = searchDetail.value?.songs || [];
-  store.commit('setPlayList', tracks);
+  playerStore.setPlayList(tracks);
 };

 // 点击搜索历史
--- a/src/renderer/views/set/index.vue
+++ b/src/renderer/views/set/index.vue
@@ -205,7 +205,7 @@
                </div>
              </div>
              <div class="flex items-center gap-2">
-                <n-button size="small" @click="store.commit('setShowDownloadDrawer', true)">
+                <n-button size="small" @click="settingsStore.showDownloadDrawer = true">
                  {{ t('settings.application.download') }}
                </n-button>
              </div>
@@ -461,11 +461,11 @@
 </template>

 <script setup lang="ts">
+import { cloneDeep } from 'lodash';
 import type { FormRules } from 'naive-ui';
 import { useMessage } from 'naive-ui';
 import { computed, h, nextTick, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';

 import localData from '@/../main/set.json';
 import Coffee from '@/components/Coffee.vue';
@@ -473,13 +473,17 @@ import DonationList from '@/components/common/DonationList.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
 import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useUserStore } from '@/store/modules/user';
 import { isElectron } from '@/utils';
 import { openDirectory, selectDirectory } from '@/utils/fileOperation';
 import { checkUpdate, UpdateResult } from '@/utils/update';

 import config from '../../../../package.json';

-const store = useStore();
+const settingsStore = useSettingsStore();
+const userStore = useUserStore();
+
 const checking = ref(false);
 const updateInfo = ref<UpdateResult>({
  hasUpdate: false,
@@ -490,37 +494,23 @@ const updateInfo = ref<UpdateResult>({

 const { t } = useI18n();

-const setData = computed(() => {
-  const data = store.state.setData;
-  // 确保代理配置存在
-  if (!data.proxyConfig) {
-    data.proxyConfig = {
-      enable: false,
-      protocol: 'http',
-      host: '127.0.0.1',
-      port: 7890
-    };
-  }
-  // 确保音质设置存在
-  if (!data.musicQuality) {
-    data.musicQuality = 'higher';
-  }
-  return data;
-});
-
-watch(
-  () => setData.value,
-  (newVal) => {
-    store.commit('setSetData', newVal);
-  },
-  { deep: true }
-);
-
+const setData = ref(settingsStore.setData);
 const isDarkTheme = computed({
-  get: () => store.state.theme === 'dark',
-  set: () => store.commit('toggleTheme')
+  get: () => settingsStore.theme === 'dark',
+  set: () => settingsStore.toggleTheme()
 });

+// watch(
+//   () => setData.value,
+//   (newData) => {
+//     console.log('newData', newData);
+//     settingsStore.setSetData(newData);
+//   },
+//   {
+//     deep: true
+//   }
+// );
+
 const openAuthor = () => {
  window.open(setData.value.authorUrl);
 };
@@ -552,16 +542,16 @@ const checkForUpdates = async (isClick = false) => {
 };

 const openReleasePage = () => {
-  store.commit('setShowUpdateModal', true);
+  settingsStore.showUpdateModal = true;
 };

 const selectDownloadPath = async () => {
  const path = await selectDirectory(message);
  if (path) {
-    store.commit('setSetData', {
+    setData.value = {
      ...setData.value,
      downloadPath: path
-    });
+    };
  }
 };

@@ -606,7 +596,7 @@ const proxyRules: FormRules = {
 };

 // 使用 store 中的字体列表
-const systemFonts = computed(() => store.state.systemFonts);
+const systemFonts = computed(() => settingsStore.systemFonts);

 // 已选择的字体列表
 const selectedFonts = ref<string[]>([]);
@@ -622,17 +612,17 @@ watch(
  (newFonts) => {
    // 如果没有选择任何字体，使用系统默认字体
    if (newFonts.length === 0) {
-      store.commit('setSetData', {
+      setData.value = {
        ...setData.value,
        fontFamily: 'system-ui'
-      });
+      };
      return;
    }
    // 将选择的字体组合成字体列表
-    store.commit('setSetData', {
+    setData.value = {
      ...setData.value,
      fontFamily: newFonts.join(',')
-    });
+    };
  },
  { deep: true }
 );
@@ -660,10 +650,10 @@ onMounted(async () => {
  }
  // 确保enableRealIP有默认值
  if (setData.value.enableRealIP === undefined) {
-    store.commit('setSetData', {
+    setData.value = {
      ...setData.value,
      enableRealIP: false
-    });
+    };
  }
 });

@@ -686,7 +676,7 @@ const handleProxyConfirm = async () => {
  try {
    await formRef.value?.validate();
    // 保存代理配置时保留enable状态
-    store.commit('setSetData', {
+    setData.value = {
      ...setData.value,
      proxyConfig: {
        enable: setData.value.proxyConfig?.enable || false,
@@ -694,7 +684,7 @@ const handleProxyConfirm = async () => {
        host: proxyForm.value.host,
        port: proxyForm.value.port
      }
-    });
+    };
    showProxyModal.value = false;
    message.success(t('settings.network.messages.proxySuccess'));
  } catch (err) {
@@ -705,20 +695,20 @@ const handleProxyConfirm = async () => {
 const validateAndSaveRealIP = () => {
  const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
  if (!setData.value.realIP || ipRegex.test(setData.value.realIP)) {
-    store.commit('setSetData', {
+    setData.value = {
      ...setData.value,
      realIP: setData.value.realIP,
      enableRealIP: true
-    });
+    };
    if (setData.value.realIP) {
      message.success(t('settings.network.messages.realIPSuccess'));
    }
  } else {
    message.error(t('settings.network.messages.realIPError'));
-    store.commit('setSetData', {
+    setData.value = {
      ...setData.value,
      realIP: ''
-    });
+    };
  }
 };

@@ -727,11 +717,11 @@ watch(
  () => setData.value.enableRealIP,
  (newVal) => {
    if (!newVal) {
-      store.commit('setSetData', {
+      setData.value = {
        ...setData.value,
        realIP: '',
        enableRealIP: false
-      });
+      };
    }
  }
 );
@@ -795,7 +785,7 @@ const clearCache = async () => {
        localStorage.removeItem('favoriteList');
        break;
      case 'user':
-        store.commit('logout');
+        userStore.handleLogout();
        break;
      case 'settings':
        if (window.electron) {
--- a/src/renderer/views/user/index.vue
+++ b/src/renderer/views/user/index.vue
@@ -99,7 +99,6 @@ import { useMessage } from 'naive-ui';
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useStore } from 'vuex';

 import { getListDetail } from '@/api/list';
 import { updatePlaylistTracks } from '@/api/music';
@@ -107,6 +106,8 @@ import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import SongItem from '@/components/common/SongItem.vue';
 import MusicList from '@/components/MusicList.vue';
+import { usePlayerStore } from '@/store/modules/player';
+import { useUserStore } from '@/store/modules/user';
 import type { Playlist } from '@/type/listDetail';
 import type { IUserDetail } from '@/type/user';
 import { getImgUrl, isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
@@ -116,7 +117,8 @@ defineOptions({
 });

 const { t } = useI18n();
-const store = useStore();
+const userStore = useUserStore();
+const playerStore = usePlayerStore();
 const router = useRouter();
 const userDetail = ref<IUserDetail>();
 const playList = ref<any[]>([]);
@@ -128,7 +130,7 @@ const list = ref<Playlist>();
 const listLoading = ref(false);
 const message = useMessage();

-const user = computed(() => store.state.user);
+const user = computed(() => userStore.user);

 onBeforeUnmount(() => {
  mounted.value = false;
@@ -145,8 +147,8 @@ const checkLoginStatus = () => {
  }

  // 如果store中没有用户数据，但localStorage中有，则恢复用户数据
-  if (!store.state.user && userData) {
-    store.state.user = JSON.parse(userData);
+  if (!userStore.user && userData) {
+    userStore.setUser(JSON.parse(userData));
  }

  return true;
@@ -184,7 +186,7 @@ const loadData = async () => {
    console.error('加载用户页面失败:', error);
    // 如果获取用户数据失败，可能是token过期
    if (error.response?.status === 401) {
-      store.commit('logout');
+      userStore.logout();
      router.push('/login');
    }
  } finally {
@@ -208,17 +210,13 @@ watch(

 // 监听用户状态变化
 watch(
-  () => store.state.user,
+  () => userStore.user,
  (newUser) => {
    if (!mounted.value) return;
-
-    if (!newUser) {
-      router.push('/login');
-    } else {
-      loadPage();
+    if (newUser) {
+      loadUserData();
    }
-  },
-  { immediate: true }
+  }
 );

 // 页面挂载时检查登录状态
@@ -271,7 +269,7 @@ const handleRemoveFromPlaylist = async (songId: number) => {

 const handlePlay = () => {
  const tracks = recordList.value || [];
-  store.commit('setPlayList', tracks);
+  playerStore.setPlayList(tracks);
 };
 </script>