✨ feat: 添加交流群

src/assets/icons/QQ.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Remix Icon by Remix Design - https://github.com/Remix-Design/RemixIcon/blob/master/License --><path fill="currentColor" d="M19.914 14.529a32 32 0 0 0-.676-1.886l-.91-2.246c.002-.026.013-.468.013-.696C18.34 5.86 16.508 2 12 2S5.66 5.86 5.66 9.7c0 .229.011.671.012.697l-.91 2.246a32 32 0 0 0-.675 1.886c-.86 2.737-.581 3.87-.369 3.895c.455.054 1.771-2.06 1.771-2.06c0 1.224.637 2.822 2.016 3.976c-.515.157-1.147.399-1.554.695c-.365.267-.319.54-.253.65c.289.481 4.955.307 6.303.157c1.347.15 6.014.324 6.302-.158c.066-.11.112-.382-.253-.649c-.407-.296-1.039-.538-1.555-.695c1.379-1.154 2.016-2.752 2.016-3.977c0 0 1.316 2.115 1.771 2.06c.212-.025.49-1.157-.37-3.894"/></svg>

src/components/Layout/Nav.vue

@@ -91,9 +91,10 @@
 <script setup lang="ts">
 import type { DropdownOption } from "naive-ui";
 import { useSettingStore } from "@/stores";
-import { renderIcon } from "@/utils/helper";
+import { openLink, renderIcon } from "@/utils/helper";
 import { openSetting } from "@/utils/modal";
 import { isDev, isElectron } from "@/utils/env";
+import packageJson from "@/../package.json";
 
 const router = useRouter();
 const settingStore = useSettingStore();
@@ -155,7 +156,30 @@ const setOptions = computed<DropdownOption[]>(() => [
     ),
   },
   {
-    key: "header-divider",
+    key: "divider-1",
+    type: "divider",
+  },
+  {
+    // 交流群
+    key: "qq",
+    label: "加入交流群",
+    props: {
+      onClick: () =>
+        openLink(
+          "https://qm.qq.com/cgi-bin/qm/qr?k=2-cVSf1bE0AvAehCib00qFEFdUvPaJ_k&jump_from=webapi&authKey=1NEhib9+GsmsXVo2rCc0IbRaVHeeRXJJ0gbsyKDcIwDdAzYySOubkFCvkV32+7Cw",
+        ),
+    },
+    icon: renderIcon("QQ"),
+  },
+  {
+    // 交流群
+    key: "github",
+    label: "开源仓库",
+    props: { onClick: () => openLink(packageJson.github) },
+    icon: renderIcon("Github"),
+  },
+  {
+    key: "divider-2",
     type: "divider",
   },
   {

src/components/Player/MainPlayer.vue

@@ -262,6 +262,7 @@ const isShowLyrics = computed(() => {
   const isHasLrc = musicStore.isHasLrc;
   return (
     isHasLrc &&
+    !statusStore.lyricLoading &&
     settingStore.barLyricShow &&
     musicStore.playSong.type !== "radio" &&
     statusStore.playStatus &&

src/stores/music.ts

@@ -106,6 +106,7 @@ export const useMusicStore = defineStore("music", {
           "play-lyric-change",
           cloneDeep({
             songId: this.playSong?.id,
+            lyricLoading: false,
             lrcData: this.songLyric.lrcData ?? [],
             yrcData: this.songLyric.yrcData ?? [],
           }),

src/types/desktop-lyric.d.ts

@@ -8,6 +8,8 @@ export interface LyricData {
   playStatus?: boolean;
   /** 当前播放进度 */
   currentTime?: number;
+  /** 是否正在加载歌词 */
+  lyricLoading?: boolean;
   /** 当前播放歌曲 id（用于偏移校准） */
   songId?: number;
   /** 当前歌曲的时间偏移（秒，正负均可） */

src/utils/lyricManager.ts

@@ -299,6 +299,12 @@ class LyricManager {
     try {
       // 歌词加载状态
       statusStore.lyricLoading = true;
+      // 通知桌面歌词
+      if (isElectron) {
+        window.electron.ipcRenderer.send("update-desktop-lyric-data", {
+          lyricLoading: true,
+        });
+      }
       // 检查歌词覆盖
       let lyricData = await this.checkLocalLyricOverride(id);
       // 开始获取歌词

src/views/DesktopLyric/index.vue

@@ -135,6 +135,7 @@ const lyricData = reactive<LyricData>({
   playName: "未知歌曲",
   playStatus: false,
   currentTime: 0,
+  lyricLoading: false,
   songId: 0,
   songOffset: 0,
   lrcData: [],
@@ -212,43 +213,33 @@ const getSafeEndTime = (lyrics: LyricLine[], idx: number) => {
  */
 const renderLyricLines = computed<RenderLine[]>(() => {
   const lyrics = lyricData?.yrcData?.length ? lyricData.yrcData : lyricData.lrcData;
-  if (!lyrics?.length) {
-    return [
-      {
-        line: {
-          startTime: 0,
-          endTime: 0,
-          words: [{ word: "纯音乐，请欣赏", startTime: 0, endTime: 0, romanWord: "" }],
-          translatedLyric: "",
-          romanLyric: "",
-          isBG: false,
-          isDuet: false,
-        },
-        index: -1,
-        key: "placeholder",
-        active: true,
+  // 提示词占位
+  const placeholder = (word: string): RenderLine[] => [
+    {
+      line: {
+        startTime: 0,
+        endTime: 0,
+        words: [{ word, startTime: 0, endTime: 0, romanWord: "" }],
+        translatedLyric: "",
+        romanLyric: "",
+        isBG: false,
+        isDuet: false,
       },
-    ];
-  }
+      index: -1,
+      key: "placeholder",
+      active: true,
+    },
+  ];
+  // 加载中
+  if (lyricData.lyricLoading) return placeholder("歌词加载中...");
+  // 纯音乐
+  if (!lyrics?.length) return placeholder("纯音乐，请欣赏");
+  // 获取当前歌词索引
   const idx = lyricData?.lyricIndex ?? -1;
+  // 索引小于 0，显示歌曲名称
   if (idx < 0) {
     const text = lyricData.playName ?? "未知歌曲";
-    return [
-      {
-        line: {
-          startTime: 0,
-          endTime: 0,
-          words: [{ word: text, startTime: 0, endTime: 0, romanWord: "" }],
-          translatedLyric: "",
-          romanLyric: "",
-          isBG: false,
-          isDuet: false,
-        },
-        index: -1,
-        key: "placeholder",
-        active: true,
-      },
-    ];
+    return placeholder(text);
   }
   const current = lyrics[idx];
   const next = lyrics[idx + 1];