✨ feat: 完善本地模式

Author: imsyy

src/components/Layout/Menu.vue

@@ -242,10 +242,55 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
         {
           key: "local",
           link: "local",
-          label: "本地歌曲",
+          label: "音乐库",
           show: isElectron,
           icon: renderIcon("FolderMusic"),
         },
+        {
+          key: "local-albums",
+          link: "local-albums",
+          label: "专辑",
+          show:
+            isElectron &&
+            (localStore.localSongs?.length > 0 || settingStore.localFilesPath?.length > 0),
+          icon: renderIcon("Album"),
+        },
+        {
+          key: "local-artists",
+          link: "local-artists",
+          label: "艺术家",
+          show:
+            isElectron &&
+            (localStore.localSongs?.length > 0 || settingStore.localFilesPath?.length > 0),
+          icon: renderIcon("Person"),
+        },
+        {
+          key: "divider",
+          type: "divider",
+          show: localPlaylistMenu.value.length > 0,
+        },
+        // 本地歌单
+        {
+          key: "local-playlists",
+          show: localPlaylistMenu.value.length > 0,
+          icon: statusStore.menuCollapsed ? renderIcon("PlaylistAdd") : undefined,
+          label: () =>
+            h("div", { class: "user-list" }, [
+              h(NText, { depth: 3 }, () => "本地歌单"),
+              h(NButton, {
+                type: "tertiary",
+                round: true,
+                strong: true,
+                secondary: true,
+                renderIcon: renderIcon("Add"),
+                onclick: (event: Event) => {
+                  event.stopPropagation();
+                  openCreatePlaylist(true);
+                },
+              }),
+            ]),
+          children: [...localPlaylistMenu.value],
+        },
       ];
 });
 
@@ -341,12 +386,15 @@ const menuUpdate = (key: string, item: MenuOption) => {
       query: { id: item.key },
     });
   } else if (typeof key === "string" && key.startsWith("local-")) {
-    // 本地歌单
+    // 检查是否为本地歌单（16位数字ID）
     const localId = key.replace("local-", "");
-    router.push({
-      name: "playlist",
-      query: { id: localId },
-    });
+    const isLocalPlaylist = /^\d{16}$/.test(localId);
+    if (isLocalPlaylist) {
+      router.push({
+        name: "playlist",
+        query: { id: localId },
+      });
+    }
   } else {
     switch (key) {
       case "like-songs":
@@ -377,18 +425,26 @@ const checkMenuItem = () => {
   // 处理路由名称
   const prefixMap = [
     { prefix: "discover-", name: "discover" },
-    { prefix: "local-", name: "local" },
+    // 本地模式下不合并 local- 前缀的路由
+    { prefix: "local-", name: "local", skipInLocalMode: true },
     { prefix: "like-", name: "like", exclude: "like-songs" },
     { prefix: "download-", name: "download" },
   ];
   for (const item of prefixMap) {
+    if (item.skipInLocalMode && !settingStore.useOnlineService) continue;
     if (routerName.startsWith(item.prefix) && (!item.exclude || routerName !== item.exclude)) {
       routerName = item.name;
       break;
     }
   }
   // 显示菜单
   menuRef.value?.showOption(routerName);
+  // 本地模式下处理
+  if (!settingStore.useOnlineService) {
+    if (routerName === "local-songs" || routerName === "local-folders") {
+      routerName = "local";
+    }
+  }
   // 高亮菜单
   switch (routerName) {
     case "playlist": {
@@ -424,6 +480,15 @@ const openHeartMode = debounce(() => player.toggleShuffle("heartbeat"), 1000, {
   trailing: false,
 });
 
+// 本地模式下自动展开本地歌单
+onMounted(() => {
+  if (!settingStore.useOnlineService && localPlaylistMenu.value.length > 0) {
+    if (!settingStore.menuExpandedKeys.includes("local-playlists")) {
+      settingStore.menuExpandedKeys.push("local-playlists");
+    }
+  }
+});
+
 // 监听路由
 watch(
   () => [router.currentRoute.value, dataStore.userLikeData.playlists],

src/components/Layout/Nav.vue

@@ -16,7 +16,7 @@
     <!-- 主内容 -->
     <n-flex class="nav-main">
       <!-- 搜索 -->
-      <SearchInp />
+      <SearchInp v-if="settingStore.useOnlineService" />
       <!-- 可拖拽 -->
       <div class="nav-drag" />
       <!-- 用户 -->

src/components/Menu/SongListMenu.vue

@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import type { SongType } from "@/types/main";
 import { NAlert, type DropdownOption } from "naive-ui";
-import { useStatusStore, useDataStore, useMusicStore } from "@/stores";
+import { useStatusStore, useDataStore, useMusicStore, useSettingStore } from "@/stores";
 import { useDownloadManager } from "@/core/resource/DownloadManager";
 import { renderIcon, copyData } from "@/utils/helper";
 import { deleteCloudSong, importCloudSong } from "@/api/cloud";
@@ -43,6 +43,7 @@ const statusStore = useStatusStore();
 
 const player = usePlayerController();
 const downloadManager = useDownloadManager();
+const settingStore = useSettingStore();
 
 // 右键菜单数据
 const dropdownX = ref<number>(0);
@@ -242,6 +243,7 @@ const openDropdown = (
         {
           key: "search",
           label: "同名搜索",
+          show: settingStore.useOnlineService,
           props: {
             onClick: () => router.push({ name: "search", query: { keyword: song.name } }),
           },

src/components/Player/MainPlayer.vue

@@ -282,6 +282,7 @@ const songMoreOptions = computed<DropdownOption[]>(() => {
     {
       key: "search",
       label: "同名搜索",
+      show: settingStore.useOnlineService,
       props: {
         onClick: () => router.push({ name: "search", query: { keyword: song.name } }),
       },

src/components/Setting/GeneralSetting.vue

@@ -290,17 +290,19 @@
 <script setup lang="ts">
 import type { SelectOption } from "naive-ui";
 import { useDataStore, useMusicStore, useSettingStore, useStatusStore } from "@/stores";
-import { isDev, isElectron } from "@/utils/env";
+import { isElectron } from "@/utils/env";
 import { isEmpty } from "lodash-es";
 import themeColor from "@/assets/data/themeColor.json";
 import { openSidebarHideManager, openHomePageSectionManager, openFontManager } from "@/utils/modal";
 import { sendRegisterProtocol } from "@/utils/protocol";
 import { getCoverColor } from "@/utils/color";
+import { usePlayerController } from "@/core/player/PlayerController";
 
 const dataStore = useDataStore();
 const musicStore = useMusicStore();
 const settingStore = useSettingStore();
 const statusStore = useStatusStore();
+const player = usePlayerController();
 
 // 是否开启在线服务
 const useOnlineService = ref(settingStore.useOnlineService);
@@ -333,9 +335,11 @@ const modeChange = (val: boolean) => {
       content: "确定开启软件的在线服务？更改将在热重载后生效！",
       positiveText: "开启",
       negativeText: "取消",
-      onPositiveClick: () => {
+      onPositiveClick: async () => {
         useOnlineService.value = true;
         settingStore.useOnlineService = true;
+        // 清空播放列表
+        await player.cleanPlayList();
         // 清理播放数据
         dataStore.$reset();
         musicStore.$reset();
@@ -349,21 +353,22 @@ const modeChange = (val: boolean) => {
   } else {
     window.$dialog.warning({
       title: "关闭在线服务",
-      content:
-        "确定关闭软件的在线服务？将关闭包括搜索、登录、在线音乐播放等在内的全部在线服务，并且将会退出登录状态，软件将会变为本地播放器！更改将在重启后生效！",
+      content: "确定关闭软件的在线服务？关闭后将只能播放本地音乐！更改将在热重载后生效！",
       positiveText: "关闭",
       negativeText: "取消",
-      onPositiveClick: () => {
+      onPositiveClick: async () => {
         useOnlineService.value = false;
         settingStore.useOnlineService = false;
+        // 清空播放列表
+        await player.cleanPlayList();
         // 清理播放数据
         dataStore.$reset();
         musicStore.$reset();
         // 清空本地数据
         localStorage.removeItem("data-store");
         localStorage.removeItem("music-store");
-        // 重启
-        if (!isDev) window.electron.ipcRenderer.send("win-restart");
+        // 热重载
+        window.location.reload();
       },
       onNegativeClick: () => {
         useOnlineService.value = true;

src/composables/List/useListScroll.ts

@@ -7,10 +7,14 @@ export const useListScroll = () => {
   /**
    * 处理列表滚动
    */
-  const handleListScroll = (e: Event) => {
-    const scrollTop = (e.target as HTMLElement).scrollTop;
-    listScrolling.value = scrollTop > 10;
-  };
+  const handleListScroll = useThrottleFn(
+    (e: Event) => {
+      const scrollTop = (e.target as HTMLElement).scrollTop;
+      listScrolling.value = scrollTop > 10;
+    },
+    100,
+    true,
+  );
 
   /**
    * 重置滚动状态

src/views/Local/albums.vue

@@ -40,10 +40,15 @@
 import type { SongType } from "@/types/main";
 import { useLocalStore } from "@/stores";
 import { some } from "lodash-es";
+import { usePlayerController } from "@/core/player/PlayerController";
 
 const props = defineProps<{ data: SongType[] }>();
 
 const localStore = useLocalStore();
+const player = usePlayerController();
+
+// 播放事件总线
+const localPlayEventBus = useEventBus("local-play");
 
 // 专辑数据
 const chooseAlbum = ref<string>("");
@@ -85,6 +90,13 @@ const handleRemoveSong = (ids: number[]) => {
   localStore.updateLocalSong(updatedSongs);
 };
 
+// 监听播放事件
+const router = useRouter();
+localPlayEventBus.on(() => {
+  if (router.currentRoute.value?.name !== "local-albums") return;
+  player.updatePlayList(albumSongs.value);
+});
+
 watch(
   () => chooseAlbum.value,
   (val) => {

src/views/Local/artists.vue

@@ -31,11 +31,16 @@
 import type { SongType } from "@/types/main";
 import { useLocalStore, useSettingStore } from "@/stores";
 import { isArray, some } from "lodash-es";
+import { usePlayerController } from "@/core/player/PlayerController";
 
 const props = defineProps<{ data: SongType[] }>();
 
 const localStore = useLocalStore();
 const settingStore = useSettingStore();
+const player = usePlayerController();
+
+// 播放事件总线
+const localPlayEventBus = useEventBus("local-play");
 
 // 歌手数据
 const chooseArtist = ref<string>("");
@@ -90,6 +95,13 @@ const handleRemoveSong = (ids: number[]) => {
   localStore.updateLocalSong(updatedSongs);
 };
 
+// 监听播放事件
+const router = useRouter();
+localPlayEventBus.on(() => {
+  if (router.currentRoute.value?.name !== "local-artists") return;
+  player.updatePlayList(artistSongs.value);
+});
+
 watch(
   () => chooseArtist.value,
   (val) => {