✨ feat: 支持配置 TTML 歌词源

Author: imsyy

electron/main/store/index.ts

@@ -24,6 +24,8 @@ export interface StoreType {
     config?: LyricConfig;
   };
   proxy: string;
+  // amll-db-server
+  amllDbServer: string;
 }
 
 /**
@@ -47,6 +49,7 @@ export const useStore = () => {
         config: defaultLyricConfig,
       },
       proxy: "",
+      amllDbServer: "https://amll-ttml-db.stevexmh.net",
     },
   });
 };

electron/server/netease/index.ts

@@ -1,6 +1,7 @@
 import { FastifyInstance, FastifyRequest, FastifyReply } from "fastify";
 import { pathCase } from "change-case";
 import { serverLog } from "../../main/logger";
+import { useStore } from "../../main/store";
 import NeteaseCloudMusicApi from "@neteasecloudmusicapienhanced/api";
 
 // 获取数据
@@ -68,7 +69,11 @@ export const initNcmAPI = async (fastify: FastifyInstance) => {
       if (!id) {
         return reply.status(400).send({ error: "id is required" });
       }
-      const url = `https://amll-ttml-db.stevexmh.net/ncm/${id}`;
+      const store = useStore();
+      const server = store.get("amllDbServer") ?? "https://amll-ttml-db.stevexmh.net";
+      // 净化网址
+      const cleanServer = server.replace(/\/$/, "");
+      const url = `${cleanServer}/ncm/${id}`;
       try {
         const response = await fetch(url);
         if (response.status !== 200) {

src/api/song.ts

@@ -2,6 +2,7 @@ import { isElectron } from "@/utils/env";
 import { songLevelData } from "@/utils/meta";
 import { SongUnlockServer } from "@/utils/songManager";
 import request from "@/utils/request";
+import { useSettingStore } from "@/stores";
 
 // 获取歌曲详情
 export const songDetail = (ids: number | number[]) => {
@@ -76,7 +77,9 @@ export const songLyricTTML = async (id: number) => {
   if (isElectron) {
     return request({ url: "/lyric/ttml", params: { id, noCookie: true } });
   } else {
-    const url = `https://amll-ttml-db.stevexmh.net/ncm/${id}`;
+    const settingStore = useSettingStore();
+    const server = settingStore.amllDbServer || "https://amll-ttml-db.stevexmh.net";
+    const url = `${server}/ncm/${id}`;
     try {
       const response = await fetch(url);
       if (response === null || response.status !== 200) {

src/components/Card/SongListCard.vue

@@ -51,10 +51,11 @@
 import type { SongType } from "@/types/main";
 import { coverLoaded } from "@/utils/helper";
 import { sampleSize } from "lodash-es";
+import { VNodeChild } from "vue";
 
 const props = defineProps<{
   size: "normal" | "small";
-  title: string | VNode;
+  title: string | VNodeChild;
   data?: SongType[];
   description?: string;
   loading?: boolean;

src/components/Setting/LyricsSetting.vue

@@ -260,6 +260,17 @@
         </div>
         <n-switch v-model:value="settingStore.enableTTMLLyric" class="set" :round="false" />
       </n-card>
+      <n-collapse-transition :show="settingStore.enableTTMLLyric">
+        <n-card class="set-item">
+          <div class="label">
+            <n-text class="name">AMLL TTML DB 地址</n-text>
+            <n-text class="tip" :depth="3">
+              AMLL TTML DB 地址，请确保地址正确，否则将导致歌词获取失败
+            </n-text>
+          </div>
+          <n-button type="primary" strong secondary @click="changeAMLLDBServer"> 配置 </n-button>
+        </n-card>
+      </n-collapse-transition>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">启用歌词排除</n-text>
@@ -550,8 +561,10 @@
 </template>
 
 <script setup lang="ts">
+import { NFlex, NInput, NText } from "naive-ui";
 import { useSettingStore, useStatusStore } from "@/stores";
 import { cloneDeep, isEqual } from "lodash-es";
+import { isValidURL } from "@/utils/validate";
 import { isElectron } from "@/utils/env";
 import { openLyricExclude } from "@/utils/modal";
 import { LyricConfig } from "@/types/desktop-lyric";
@@ -566,6 +579,9 @@ const settingStore = useSettingStore();
 // 全部字体
 const allFontsData = ref<SelectOption[]>([]);
 
+// AMLL TTML DB 地址
+const amllDbServer = ref("https://amll-ttml-db.stevexmh.net");
+
 // 桌面歌词配置
 const desktopLyricConfig = reactive<LyricConfig>({ ...defaultDesktopLyricConfig });
 
@@ -649,10 +665,58 @@ const getAllSystemFonts = async () => {
   });
 };
 
-onMounted(() => {
+// 修改 AMLL DB 服务地址
+const changeAMLLDBServer = () => {
+  window.$modal.create({
+    preset: "dialog",
+    title: "修改 AMLL DB 地址",
+    content: () =>
+      h(
+        NFlex,
+        { vertical: true },
+        {
+          default: () => [
+            h(
+              NText,
+              { depth: 3, type: "warning" },
+              { default: () => "如果你不清楚这里是做什么的，请不要修改" },
+            ),
+            h(NInput, {
+              value: amllDbServer.value,
+              onUpdateValue: (val) => (amllDbServer.value = val),
+              placeholder: "请输入 AMLL TTML DB 地址",
+            }),
+            h(NText, { depth: 3 }, { default: () => "请确保地址正确，否则将导致歌词获取失败" }),
+          ],
+        },
+      ),
+    positiveText: "确认",
+    negativeText: "取消",
+    onPositiveClick: async () => {
+      const urlValue = amllDbServer.value.trim();
+      if (isValidURL(urlValue)) {
+        await window.api.store.set("amllDbServer", urlValue);
+        settingStore.amllDbServer = urlValue;
+        window.$message.success("AMLL TTML DB 地址已更新");
+        return true;
+      } else {
+        window.$message.error("请输入正确的网址格式");
+        return false;
+      }
+    },
+  });
+};
+
+onMounted(async () => {
   if (isElectron) {
     getDesktopLyricConfig();
     getAllSystemFonts();
+    // 恢复地址
+    const server = await window.api.store.get("amllDbServer");
+    if (server) {
+      amllDbServer.value = server;
+      settingStore.amllDbServer = server;
+    }
   }
 });
 </script>

src/main.ts

@@ -9,12 +9,14 @@ import router from "@/router";
 import { debounceDirective, throttleDirective, visibleDirective } from "@/utils/instruction";
 // ipc
 import initIpc from "@/utils/initIpc";
+// use-store
+import { useSettingStore } from "@/stores";
+import { sendRegisterProtocol } from "@/utils/protocol";
 // 全局样式
 import "@/style/main.scss";
 import "@/style/animate.scss";
 import "github-markdown-css/github-markdown.css";
-import { useSettingStore } from "@/stores";
-import { sendRegisterProtocol } from "@/utils/protocol";
+import { isElectron } from "./utils/env";
 
 // 初始化 ipc
 initIpc();
@@ -35,5 +37,7 @@ app.directive("visible", visibleDirective);
 app.mount("#app");
 
 // 根据设置判断是否要注册协议
-const settings = useSettingStore();
-sendRegisterProtocol("orpheus", settings.registryProtocol.orpheus);
+if (isElectron) {
+  const settings = useSettingStore();
+  sendRegisterProtocol("orpheus", settings.registryProtocol.orpheus);
+}

src/stores/setting.ts

@@ -7,17 +7,17 @@ export interface SettingState {
   themeMode: "light" | "dark" | "auto";
   /** 主题类别 */
   themeColorType:
-  | "default"
-  | "orange"
-  | "blue"
-  | "pink"
-  | "brown"
-  | "indigo"
-  | "green"
-  | "purple"
-  | "yellow"
-  | "teal"
-  | "custom";
+    | "default"
+    | "orange"
+    | "blue"
+    | "pink"
+    | "brown"
+    | "indigo"
+    | "green"
+    | "purple"
+    | "yellow"
+    | "teal"
+    | "custom";
   /** 主题自定义颜色 */
   themeCustomColor: string;
   /** 全局着色 */
@@ -88,14 +88,14 @@ export interface SettingState {
   proxyPort: number;
   /** 歌曲音质 */
   songLevel:
-  | "standard"
-  | "higher"
-  | "exhigh"
-  | "lossless"
-  | "hires"
-  | "jyeffect"
-  | "sky"
-  | "jymaster";
+    | "standard"
+    | "higher"
+    | "exhigh"
+    | "lossless"
+    | "hires"
+    | "jyeffect"
+    | "sky"
+    | "jymaster";
   /** 播放设备 */
   playDevice: "default" | string;
   /** 自动播放 */
@@ -142,6 +142,8 @@ export interface SettingState {
   useAMSpring: boolean;
   /** 是否启用在线 TTML 歌词 */
   enableTTMLLyric: boolean;
+  /** AMLL DB 服务地址 */
+  amllDbServer: string;
   /** 菜单显示封面 */
   menuShowCover: boolean;
   /** 菜单展开项 */
@@ -280,6 +282,7 @@ export const useSettingStore = defineStore("setting", {
     useAMLyrics: false,
     useAMSpring: false,
     enableTTMLLyric: true,
+    amllDbServer: "https://amll-ttml-db.stevexmh.net",
     showYrc: true,
     showYrcAnimation: true,
     showYrcLongEffect: true,
@@ -367,11 +370,12 @@ export const useSettingStore = defineStore("setting", {
       }
       window.$message.info(
         `已切换至
-        ${this.themeMode === "auto"
-          ? "跟随系统"
-          : this.themeMode === "light"
-            ? "浅色模式"
-            : "深色模式"
+        ${
+          this.themeMode === "auto"
+            ? "跟随系统"
+            : this.themeMode === "light"
+              ? "浅色模式"
+              : "深色模式"
         }`,
         {
           showIcon: false,

src/utils/audioManager.ts

@@ -324,22 +324,16 @@ class AudioManager {
    * @param deviceId 设备 ID
    */
   public async setSinkId(deviceId: string) {
+    if (deviceId === "default") return;
     try {
-      // 1. 如果 AudioContext 已初始化，优先在 Context 上设置
-      // 注意：setSinkId 在 AudioContext 上是新特性，需检查是否存在
+      // 优先在 Context 上设置
       if (this.isInitialized && this.audioCtx && typeof this.audioCtx.setSinkId === "function") {
-        console.log("AudioManager: 使用 AudioContext 切换输出设备", deviceId);
         await this.audioCtx.setSinkId(deviceId);
-        return; // 成功后直接返回，不要再触碰 audioElement
+        return;
       }
-
-      // 2. 如果没有初始化 Web Audio，或者 Context 不支持 setSinkId
-      // 则回退到在 HTMLAudioElement 上设置
+      // 回退到在 HTMLAudioElement 上设置
       if (this.audioElement && typeof this.audioElement.setSinkId === "function") {
-        console.log("AudioManager: 使用 HTMLAudioElement 切换输出设备", deviceId);
         await this.audioElement.setSinkId(deviceId);
-      } else {
-        console.warn("AudioManager: 当前浏览器不支持设置输出设备 (setSinkId)");
       }
     } catch (error) {
       console.error("AudioManager: 设置输出设备失败", error);

src/utils/validate.ts

@@ -0,0 +1,32 @@
+/**
+ * @file validate.ts
+ * @description 常用验证函数
+ * @author imsyy
+ */
+
+/**
+ * 验证字符串是否为有效的 URL。
+ * 此函数能正确处理包含 localhost、IP 地址和端口号的 URL。
+ * @param urlString 要验证的字符串。
+ * @returns 如果是有效 URL，则返回 true；否则返回 false。
+ */
+export const isValidURL = (urlString: string): boolean => {
+  const urlValue = urlString.trim();
+  if (!urlValue) {
+    return false;
+  }
+
+  // 如果用户未输入协议头，则自动添加 http:// 以便 URL 构造函数进行验证
+  const urlWithProtocol =
+    urlValue.startsWith("http://") || urlValue.startsWith("https://")
+      ? urlValue
+      : `http://${urlValue}`;
+
+  try {
+    // 使用内置的 URL 构造函数进行稳健的验证
+    new URL(urlWithProtocol);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};