✨ feat: 新增本地歌单相关功能

Author: imsyy

src/components/Layout/Menu.vue

@@ -18,7 +18,13 @@
 
 <script setup lang="ts">
 import { usePlayerController } from "@/core/player/PlayerController";
-import { useDataStore, useMusicStore, useSettingStore, useStatusStore } from "@/stores";
+import {
+  useDataStore,
+  useLocalStore,
+  useMusicStore,
+  useSettingStore,
+  useStatusStore,
+} from "@/stores";
 import type { CoverType } from "@/types/main";
 import { isLogin } from "@/utils/auth";
 import { isElectron } from "@/utils/env";
@@ -34,11 +40,13 @@ import {
   NButton,
   NEllipsis,
   NText,
+  NPopselect,
 } from "naive-ui";
 import { RouterLink, useRouter } from "vue-router";
 
 const router = useRouter();
 const dataStore = useDataStore();
+const localStore = useLocalStore();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
 const settingStore = useSettingStore();
@@ -47,6 +55,7 @@ const player = usePlayerController();
 // 菜单数据
 const menuRef = ref<MenuInst | null>(null);
 const menuActiveKey = ref<string | number>((router.currentRoute.value.name as string) || "home");
+const playlistMode = ref<"online" | "local">("online");
 
 // 菜单内容
 const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
@@ -166,14 +175,38 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
           key: "divider-two",
           type: "divider",
         },
-        // 创建的歌单
         {
           key: "user-playlists",
           show: !settingStore.sidebarHide.hideUserPlaylists,
           icon: statusStore.menuCollapsed ? renderIcon("PlaylistAdd") : undefined,
           label: () =>
             h("div", { class: "user-list" }, [
-              h(NText, { depth: 3 }, () => ["创建的歌单"]),
+              h(NText, { depth: 3 }, () =>
+                playlistMode.value === "online" ? "创建的歌单" : "本地歌单",
+              ),
+              h(
+                NPopselect,
+                {
+                  options: [
+                    { label: "在线歌单", value: "online" },
+                    { label: "本地歌单", value: "local" },
+                  ],
+                  value: playlistMode.value,
+                  trigger: "click",
+                  onUpdateValue: (value: "online" | "local") => {
+                    playlistMode.value = value;
+                  },
+                },
+                () =>
+                  h(NButton, {
+                    type: "tertiary",
+                    round: true,
+                    strong: true,
+                    secondary: true,
+                    renderIcon: renderIcon("Menu"),
+                    onClick: (e: Event) => e.stopPropagation(),
+                  }),
+              ),
               h(NButton, {
                 type: "tertiary",
                 round: true,
@@ -182,11 +215,14 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
                 renderIcon: renderIcon("Add"),
                 onclick: (event: Event) => {
                   event.stopPropagation();
-                  openCreatePlaylist();
+                  openCreatePlaylist(playlistMode.value === "local");
                 },
               }),
             ]),
-          children: [...createPlaylist.value],
+          children:
+            playlistMode.value === "online"
+              ? [...createPlaylist.value]
+              : [...localPlaylistMenu.value],
         },
         // 收藏的歌单
         {
@@ -249,6 +285,27 @@ const likedPlaylist = computed<MenuOption[]>(() => {
   return renderPlaylist(list, settingStore.menuShowCover);
 });
 
+// 本地歌单菜单
+const localPlaylistMenu = computed<MenuOption[]>(() => {
+  const playlists = localStore.localPlaylists;
+  if (!playlists || playlists.length === 0) return [];
+  return playlists.map((playlist) => ({
+    key: `local-${playlist.id}`,
+    label: () =>
+      settingStore.menuShowCover
+        ? h("div", { class: "pl-cover" }, [
+            h(NAvatar, {
+              src: playlist.cover || "/images/album.jpg?asset",
+              fallbackSrc: "/images/album.jpg?asset",
+              lazy: true,
+            }),
+            h(NEllipsis, null, () => playlist.name),
+          ])
+        : h(NEllipsis, null, () => playlist.name),
+    icon: settingStore.menuShowCover ? undefined : renderIcon("PlayList"),
+  }));
+});
+
 // 渲染菜单路由
 const renderMenuLabel = (option: MenuOption) => {
   // 路由链接
@@ -283,6 +340,13 @@ const menuUpdate = (key: string, item: MenuOption) => {
       name: "playlist",
       query: { id: item.key },
     });
+  } else if (typeof key === "string" && key.startsWith("local-")) {
+    // 本地歌单
+    const localId = key.replace("local-", "");
+    router.push({
+      name: "playlist",
+      query: { id: localId },
+    });
   } else {
     switch (key) {
       case "like-songs":
@@ -334,8 +398,18 @@ const checkMenuItem = () => {
       const isUserPlaylist = dataStore.userLikeData.playlists.some(
         (playlist) => playlist?.id === playlistId,
       );
-      if (playlistId) menuActiveKey.value = isUserPlaylist ? Number(playlistId) : "home";
-      menuRef.value?.showOption(playlistId);
+      // 是否为本地歌单
+      const isLocalPlaylist = playlistId.toString().length === 16;
+      if (!playlistId) menuActiveKey.value = "home";
+      if (isUserPlaylist) {
+        menuActiveKey.value = Number(playlistId);
+        menuRef.value?.showOption(playlistId);
+      } else if (isLocalPlaylist) {
+        menuActiveKey.value = `local-${playlistId}`;
+        menuRef.value?.showOption(`local-${playlistId}`);
+      } else {
+        menuActiveKey.value = "home";
+      }
       break;
     }
     default:
@@ -401,11 +475,11 @@ watch(
 .user-list {
   display: flex;
   align-items: center;
+  gap: 8px;
   .n-text {
     font-size: 0.93em;
   }
   .n-button {
-    margin-left: 12px;
     --n-height: 22px;
     --n-padding: 0 12px;
     --n-icon-size: 12px;

src/components/Modal/CreatePlaylist.vue

@@ -1,34 +1,54 @@
 <template>
   <div class="create-playlist">
-    <n-tabs v-model:value="playlistType" type="segment" animated>
-      <n-tab-pane :disabled="isLogin() !== 1" name="online" tab="在线歌单">
-        <n-form ref="onlineFormRef" :model="onlineFormData" :rules="onlineFormRules">
-          <n-form-item label="歌单名称" path="name">
-            <n-input v-model:value="onlineFormData.name" placeholder="请输入歌单名称" />
-          </n-form-item>
-          <n-form-item label="歌单类型" path="type">
-            <n-select v-model:value="onlineFormData.type" :options="onlinePlaylistType" />
-          </n-form-item>
-          <n-form-item label="设为隐私歌单" path="privacy" label-placement="left">
-            <n-switch v-model:value="onlineFormData.privacy" />
-          </n-form-item>
-        </n-form>
-      </n-tab-pane>
-      <n-tab-pane name="local" tab="本地歌单">
-        <n-empty description="暂未实现" />
-      </n-tab-pane>
-    </n-tabs>
+    <!-- 在线歌单表单 -->
+    <template v-if="!isLocal">
+      <n-form ref="onlineFormRef" :model="onlineFormData" :rules="onlineFormRules">
+        <n-form-item label="歌单名称" path="name">
+          <n-input v-model:value="onlineFormData.name" placeholder="请输入歌单名称" />
+        </n-form-item>
+        <n-form-item label="歌单类型" path="type">
+          <n-select v-model:value="onlineFormData.type" :options="onlinePlaylistType" />
+        </n-form-item>
+        <n-form-item label="设为隐私歌单" path="privacy" label-placement="left">
+          <n-switch v-model:value="onlineFormData.privacy" />
+        </n-form-item>
+      </n-form>
+    </template>
+    <!-- 本地歌单表单 -->
+    <template v-else>
+      <n-form ref="localFormRef" :model="localFormData" :rules="localFormRules">
+        <n-form-item label="歌单名称" path="name">
+          <n-input v-model:value="localFormData.name" placeholder="请输入歌单名称" />
+        </n-form-item>
+        <n-form-item label="歌单描述" path="description">
+          <n-input
+            v-model:value="localFormData.description"
+            type="textarea"
+            placeholder="请输入歌单描述（选填）"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+          />
+        </n-form-item>
+      </n-form>
+    </template>
     <n-button class="create" type="primary" @click="toCreatePlaylist"> 新建 </n-button>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { FormInst, FormRules, SelectOption } from "naive-ui";
-import { useDataStore } from "@/stores";
+import { useDataStore, useLocalStore } from "@/stores";
 import { textRule } from "@/utils/rules";
 import { debounce } from "lodash-es";
 import { createPlaylist } from "@/api/playlist";
-import { isLogin, updateUserLikePlaylist } from "@/utils/auth";
+import { updateUserLikePlaylist } from "@/utils/auth";
+
+const props = withDefaults(
+  defineProps<{
+    /** 是否为本地歌单模式 */
+    isLocal?: boolean;
+  }>(),
+  { isLocal: false },
+);
 
 const emit = defineEmits<{ close: [] }>();
 
@@ -39,16 +59,24 @@ interface OnlineFormType {
   privacy?: boolean;
 }
 
-const dataStore = useDataStore();
+interface LocalFormType {
+  name: string;
+  description?: string;
+}
 
-// 歌单类别
-const playlistType = ref<"online" | "local">(isLogin() === 1 ? "online" : "local");
+const dataStore = useDataStore();
+const localStore = useLocalStore();
 
 // 在线歌单数据
 const onlineFormRef = ref<FormInst | null>(null);
 const onlineFormData = ref<OnlineFormType>({ name: "", type: "NORMAL", privacy: false });
 const onlineFormRules: FormRules = { name: textRule };
 
+// 本地歌单数据
+const localFormRef = ref<FormInst | null>(null);
+const localFormData = ref<LocalFormType>({ name: "", description: "" });
+const localFormRules: FormRules = { name: textRule };
+
 // 在线歌单类型
 const onlinePlaylistType: SelectOption[] = [
   {
@@ -71,10 +99,9 @@ const onlinePlaylistType: SelectOption[] = [
 const toCreatePlaylist = debounce(
   async (e: MouseEvent) => {
     e.preventDefault();
-    if (playlistType.value === "online") {
-      // 是否输入
+    if (!props.isLocal) {
+      // 在线歌单
       await onlineFormRef.value?.validate((errors) => errors);
-      // 新建歌单
       const result = await createPlaylist(
         onlineFormData.value.name,
         onlineFormData.value.privacy,
@@ -90,6 +117,23 @@ const toCreatePlaylist = debounce(
       } else {
         window.$message.error(result.message || "新建歌单失败，请重试");
       }
+    } else {
+      // 本地歌单
+      try {
+        await localFormRef.value?.validate();
+        await localStore.createLocalPlaylist(
+          localFormData.value.name,
+          localFormData.value.description,
+        );
+        emit("close");
+        window.$message.success("新建本地歌单成功");
+      } catch (error) {
+        if (error) {
+          // 验证失败，不做处理
+          return;
+        }
+        window.$message.error("新建本地歌单失败，请重试");
+      }
     }
   },
   300,