Merge pull request #999 from MoYingJi/pr/i

Author: apoint123

src/composables/useSongMenu.ts

@@ -35,7 +35,8 @@ export const useSongMenu = () => {
   const localStore = useLocalStore();
 
   // 删除本地歌曲
-  const deleteLocalSong = (song: SongType, emit: (event: "removeSong", args: any[]) => void) => {
+  const deleteLocalSong = (song: SongType, emit?: (event: "removeSong", args: any[]) => void) => {
+    if (emit === undefined) return;
     if (!song.path) return;
     window.$dialog.warning({
       title: "确认删除",
@@ -151,10 +152,10 @@ export const useSongMenu = () => {
   // 生成菜单选项
   const getMenuOptions = (
     song: SongType,
-    index: number,
+    index: number = -1,
     playListId: number = 0,
     isDailyRecommend: boolean = false,
-    emit: (event: "removeSong", args: any[]) => void,
+    emit?: (event: "removeSong", args: any[]) => void,
   ): DropdownOption[] => {
     const userPlaylistsData = dataStore.userLikeData.playlists?.filter(
       (pl) => pl.userId === dataStore.userData.userId,
@@ -321,13 +322,14 @@ export const useSongMenu = () => {
         label: "从歌单中删除",
         show:
           settingStore.contextMenuOptions.deleteFromPlaylist &&
+          emit !== undefined &&
           isUserPlaylist &&
           (isLocalPlaylist || isLoginNormal) &&
           !isCloud,
         props: {
           onClick: () =>
             deleteSongs(playListId!, [song.id], {
-              callback: () => emit("removeSong", [song.id]),
+              callback: () => emit?.("removeSong", [song.id]),
               songName: song.name,
             }),
         },
@@ -345,7 +347,11 @@ export const useSongMenu = () => {
       {
         key: "delete-local",
         label: "从本地磁盘中删除",
-        show: settingStore.contextMenuOptions.deleteFromLocal && isLocal && !isCurrent,
+        show:
+          settingStore.contextMenuOptions.deleteFromLocal &&
+          emit !== undefined &&
+          isLocal &&
+          !isCurrent,
         props: {
           onClick: () => deleteLocalSong(song, emit),
         },

src/views/Song/wiki.vue

@@ -73,7 +73,7 @@
                 <n-text class="text-hidden">{{ publishTime }}</n-text>
               </div>
             </div>
-            <div class="actions">
+            <n-flex class="actions">
               <n-button
                 type="primary"
                 strong
@@ -87,7 +87,18 @@
                 </template>
                 播放
               </n-button>
-            </div>
+              <n-dropdown
+                :options="currentSong ? getMenuOptions(currentSong) : []"
+                trigger="click"
+                placement="bottom-start"
+              >
+                <n-button :focusable="false" class="more" circle strong secondary>
+                  <template #icon>
+                    <SvgIcon name="List" />
+                  </template>
+                </n-button>
+              </n-dropdown>
+            </n-flex>
           </div>
         </div>
         <!-- 数据展示区域 -->
@@ -301,12 +312,15 @@ import {
 import { formatSongsList, removeBrackets } from "@/utils/format";
 import { useSettingStore } from "@/stores";
 import dayjs from "dayjs";
+import { useSongMenu } from "@/composables/useSongMenu";
 import { formatTimestamp } from "@/utils/time";
 
 const route = useRoute();
 const player = usePlayerController();
 const settingStore = useSettingStore();
 
+const { getMenuOptions } = useSongMenu();
+
 const loading = ref(true);
 const currentSongId = ref<number>(0);
 const currentSong = ref<SongType | null>(null);
@@ -591,8 +605,10 @@ onActivated(() => {
         margin-top: auto;
         :deep(.n-button) {
           height: 40px;
-          padding: 0 24px;
-          font-size: 16px;
+          transition: all 0.3s var(--n-bezier);
+        }
+        .more {
+          width: 40px;
         }
         @media (max-width: 768px) {
           :deep(.n-button) {