🌈 style: 优化部分样式

imsyy · imsyy · commit cb3b40738f75 · 2025-12-05T15:57:47.000+08:00
diff --git a/src/components/Card/SongCard.vue b/src/components/Card/SongCard.vue
@@ -51,7 +51,7 @@
               {{ song.quality }}
             </n-tag>
             <!-- 原唱翻唱 -->
-            <template>
+            <template v-if="settingStore.showSongOriginalTag">
               <n-tag v-if="song.originCoverType === 1" :bordered="false" type="primary" round>
                 原
               </n-tag>
diff --git a/src/components/Modal/CopyLyrics.vue b/src/components/Modal/CopyLyrics.vue
@@ -1,59 +1,52 @@
 <template>
   <div class="copy-lyrics">
-
     <n-scrollbar class="lyrics-list">
       <n-checkbox-group v-model:value="selectedLines">
-        <div v-for="line in displayLyrics" :key="line.index" class="lyric-item">
-          <n-checkbox :value="line.index" class="lyric-checkbox">
-            <div class="lyric-content">
-              <div v-if="showOriginal && line.text" class="text">{{ line.text }}</div>
-              <div v-if="showTranslation && line.translation" class="translation">
-                {{ line.translation }}
-              </div>
-              <div v-if="showRomaji && line.romaji" class="romaji">{{ line.romaji }}</div>
-            </div>
-          </n-checkbox>
-        </div>
+        <n-list hoverable>
+          <n-list-item v-for="line in displayLyrics" :key="line.index">
+            <n-checkbox :value="line.index" class="lyric-checkbox">
+              <n-flex size="small" class="lyric-content" vertical>
+                <n-text v-if="line.text" class="text">{{ line.text }}</n-text>
+                <n-text v-if="showTranslation && line.translation" depth="1" class="translation">
+                  {{ line.translation }}
+                </n-text>
+                <n-text v-if="showRomaji && line.romaji" depth="3" class="romaji">
+                  {{ line.romaji }}
+                </n-text>
+              </n-flex>
+            </n-checkbox>
+          </n-list-item>
+        </n-list>
       </n-checkbox-group>
     </n-scrollbar>
-
-    <div class="footer">
-      <div class="filters">
+    <n-flex align="center" justify="space-between" class="footer">
+      <n-flex align="center">
         <n-checkbox-group v-model:value="selectedFilters">
-          <n-space>
-            <n-checkbox value="original" label="原词" />
+          <n-flex align="center">
             <n-checkbox value="translation" label="翻译" />
             <n-checkbox value="romaji" label="音译" />
-          </n-space>
+          </n-flex>
         </n-checkbox-group>
-      </div>
-      <div class="actions">
-        <n-button class="action-btn" @click="selectAll">全选</n-button>
-        <n-button
-          class="action-btn"
-          type="primary"
-          :disabled="selectedLines.length === 0"
-          @click="handleCopy"
-        >
+      </n-flex>
+      <n-flex align="center">
+        <n-button @click="selectAll">全选</n-button>
+        <n-button type="primary" :disabled="selectedLines.length === 0" @click="handleCopy">
           复制 ({{ selectedLines.length }})
         </n-button>
-      </div>
-    </div>
+      </n-flex>
+    </n-flex>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useMusicStore } from "@/stores";
-import { useClipboard } from "@vueuse/core";
+import { copyData } from "@/utils/helper";
 
-const props = defineProps<{
-  onClose: () => void;
-}>();
+const props = defineProps<{ onClose: () => void }>();
 
 const musicStore = useMusicStore();
-const { copy } = useClipboard();
 
-const selectedFilters = ref<string[]>(["original", "translation", "romaji"]);
+const selectedFilters = ref<string[]>(["translation", "romaji"]);
 const selectedLines = ref<number[]>([]);
 
 const rawLyrics = computed(() => {
@@ -77,7 +70,6 @@ const displayLyrics = computed(() => {
   });
 });
 
-const showOriginal = computed(() => selectedFilters.value.includes("original"));
 const showTranslation = computed(() => selectedFilters.value.includes("translation"));
 const showRomaji = computed(() => selectedFilters.value.includes("romaji"));
 
@@ -89,12 +81,15 @@ const selectAll = () => {
   }
 };
 
+/**
+ * 复制歌词
+ */
 const handleCopy = async () => {
   const linesToCopy = displayLyrics.value
     .filter((l) => selectedLines.value.includes(l.index))
     .map((l) => {
       const parts: string[] = [];
-      if (showOriginal.value && l.text) parts.push(l.text);
+      if (l.text) parts.push(l.text);
       if (showTranslation.value && l.translation) parts.push(l.translation);
       if (showRomaji.value && l.romaji) parts.push(l.romaji);
       return parts.join("\n");
@@ -103,8 +98,7 @@ const handleCopy = async () => {
     .join("\n\n");
 
   if (linesToCopy) {
-    await copy(linesToCopy);
-    window.$message.success("复制成功");
+    await copyData(linesToCopy);
     props.onClose();
   } else {
     window.$message.warning("没有可复制的内容");
@@ -120,68 +114,27 @@ const handleCopy = async () => {
   width: 100%;
 }
 
-
 .lyrics-list {
   flex: 1;
-  padding: 12px 20px;
-
-  .lyric-item {
-    margin-bottom: 12px;
-    padding: 8px;
-    border-radius: 8px;
-    transition: background-color 0.2s;
 
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-
-    .lyric-checkbox {
-      width: 100%;
-      align-items: flex-start;
+  .lyric-checkbox {
+    width: 100%;
+  }
 
-      :deep(.n-checkbox__label) {
-        flex: 1;
-      }
+  .lyric-content {
+    font-size: 14px;
+    line-height: 1.6;
+    .translation {
+      font-size: 12px;
     }
-
-    .lyric-content {
-      font-size: 14px;
-      line-height: 1.6;
-
-      .text {
-        font-weight: 500;
-      }
-      .translation {
-        color: var(--n-text-color-3);
-        font-size: 13px;
-      }
-      .romaji {
-        color: var(--n-text-color-3);
-        font-size: 12px;
-        font-style: italic;
-      }
+    .romaji {
+      font-size: 12px;
+      font-style: italic;
     }
   }
 }
 
 .footer {
-  padding: 16px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-top: 1px solid var(--n-border-color);
-  
-  .filters {
-    display: flex;
-    align-items: center;
-  }
-
-  .actions {
-    display: flex;
-    gap: 12px;
-    .action-btn {
-      width: 90px;
-    }
-  }
+  margin-top: 20px;
 }
 </style>
diff --git a/src/components/Player/LyricMenu.vue b/src/components/Player/LyricMenu.vue
@@ -1,5 +1,9 @@
 <template>
   <n-flex class="menu" justify="center" vertical>
+    <div class="menu-icon" @click="openCopyLyrics">
+      <SvgIcon name="Copy" />
+    </div>
+    <div class="divider" />
     <div class="menu-icon" @click="changeOffset(-500)">
       <SvgIcon name="Replay5" />
     </div>
@@ -13,9 +17,6 @@
     <div class="menu-icon" @click="openSetting('lyrics')">
       <SvgIcon name="Settings" />
     </div>
-    <div class="menu-icon" @click="openCopyLyrics">
-      <SvgIcon name="Copy" />
-    </div>
   </n-flex>
 </template>
 
diff --git a/src/components/Player/MainPlayer.vue b/src/components/Player/MainPlayer.vue
@@ -190,7 +190,7 @@
 import type { DropdownOption } from "naive-ui";
 import { useMusicStore, useStatusStore, useDataStore, useSettingStore } from "@/stores";
 import { msToTime, convertSecondsToTime } from "@/utils/time";
-import { renderIcon, coverLoaded } from "@/utils/helper";
+import { renderIcon, coverLoaded, copyData } from "@/utils/helper";
 import { toLikeSong } from "@/utils/auth";
 import {
   openAutoClose,
@@ -216,6 +216,55 @@ const songMoreOptions = computed<DropdownOption[]>(() => {
   const isSong = song.type === "song";
   const isLocal = !!song?.path;
   return [
+    {
+      key: "more",
+      label: "更多操作",
+      icon: renderIcon("Menu", { size: 18 }),
+      children: [
+        {
+          key: "code-name",
+          label: `复制${song.type === "song" ? "歌曲" : "节目"}名称`,
+          props: {
+            onClick: () => copyData(song.name),
+          },
+          icon: renderIcon("Copy", { size: 18 }),
+        },
+        {
+          key: "code-id",
+          label: `复制${song.type === "song" ? "歌曲" : "节目"} ID`,
+          show: !isLocal,
+          props: {
+            onClick: () => copyData(song.id),
+          },
+          icon: renderIcon("Copy", { size: 18 }),
+        },
+        {
+          key: "share",
+          label: `分享${song.type === "song" ? "歌曲" : "节目"}链接`,
+          show: !isLocal,
+          props: {
+            onClick: () =>
+              copyData(
+                `https://music.163.com/#/${song.type}?id=${song.id}`,
+                "已复制分享链接到剪切板",
+              ),
+          },
+          icon: renderIcon("Share", { size: 18 }),
+        },
+      ],
+    },
+    {
+      key: "search",
+      label: "同名搜索",
+      props: {
+        onClick: () => router.push({ name: "search", query: { keyword: song.name } }),
+      },
+      icon: renderIcon("Search"),
+    },
+    {
+      key: "line",
+      type: "divider",
+    },
     {
       key: "playlist-add",
       label: "添加到歌单",
diff --git a/src/components/Setting/AboutSetting.vue b/src/components/Setting/AboutSetting.vue
@@ -38,7 +38,7 @@
     </div>
     <div class="set-list">
       <n-h3 prefix="bar"> 特别鸣谢 </n-h3>
-      <n-flex class="link">
+      <n-flex :size="12" class="link">
         <n-card
           v-for="(item, index) in contributors"
           :key="index"
@@ -57,7 +57,7 @@
     </div>
     <div class="set-list">
       <n-h3 prefix="bar"> 社区与资讯 </n-h3>
-      <n-flex class="link">
+      <n-flex :size="12" class="link">
         <n-card
           v-for="(item, index) in communityData"
           :key="index"
@@ -109,9 +109,30 @@ const statusStore = useStatusStore();
 // 特别鸣谢
 const contributors = [
   {
-    name: "imsyy",
-    url: "https://github.com/imsyy",
-    description: "SPlayer 作者",
+    name: "NeteaseCloudMusicApi",
+    url: "https://github.com/Binaryify/NeteaseCloudMusicApi",
+    description: "网易云音乐 API",
+  },
+  // https://github.com/neteasecloudmusicapienhanced/api-enhanced
+  {
+    name: "NeteaseCloudMusicApiEnhanced",
+    url: "https://github.com/neteasecloudmusicapienhanced/api-enhanced",
+    description: "网易云音乐 API 备份 + 增强",
+  },
+  {
+    name: "YesPlayMusic",
+    url: "https://github.com/qier222/YesPlayMusic",
+    description: "高颜值的第三方网易云播放器",
+  },
+  {
+    name: "UnblockNeteaseMusic",
+    url: "https://github.com/UnblockNeteaseMusic/server",
+    description: "Revive unavailable songs for Netease Cloud Music",
+  },
+  {
+    name: "applemusic-like-lyrics",
+    url: "https://github.com/Steve-xmh/applemusic-like-lyrics",
+    description: "类 Apple Music 歌词显示组件库",
   },
 ];
 
@@ -202,19 +223,17 @@ onMounted(getUpdateData);
     }
   }
 }
-.link {
-  .link-item {
-    max-width: 200px;
-    border-radius: 8px;
-    cursor: pointer;
-    :deep(.n-card__content) {
-      display: flex;
-      align-items: center;
-      padding: 12px;
-    }
-    .n-icon {
-      margin-right: 6px;
-    }
+.link-item {
+  max-width: 200px;
+  border-radius: 8px;
+  cursor: pointer;
+  :deep(.n-card__content) {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+  }
+  .n-icon {
+    margin-right: 6px;
   }
 }
 </style>
diff --git a/src/views/Search/songs.vue b/src/views/Search/songs.vue
@@ -5,6 +5,7 @@
         v-if="searchCount > 0"
         :data="searchResultData"
         :loading="loading"
+        doubleClickAction="add"
         loadMore
         disabledSort
         @reachBottom="reachBottom"
