🐞 fix: 修复输入框样式问题

Author: imsyy

electron/main/store/index.ts

@@ -1,6 +1,7 @@
 import { screen } from "electron";
 import { storeLog } from "../logger";
 import type { LyricConfig } from "../../../src/types/desktop-lyric";
+import { defaultAMLLDbServer } from "../utils/config";
 import defaultLyricConfig from "../../../src/assets/data/lyricConfig";
 import Store from "electron-store";
 
@@ -49,7 +50,7 @@ export const useStore = () => {
         config: defaultLyricConfig,
       },
       proxy: "",
-      amllDbServer: "https://amll-ttml-db.stevexmh.net/ncm/%s",
+      amllDbServer: defaultAMLLDbServer,
     },
   });
 };

electron/main/utils/config.ts

@@ -32,6 +32,12 @@ export const appName = app.getName() || "SPlayer";
  */
 export const port = Number(import.meta.env["VITE_SERVER_PORT"] || 25884);
 
+/**
+ * 默认 AMLL TTML DB Server
+ * @returns string
+ */
+export const defaultAMLLDbServer = "https://amlldb.bikonoo.com/ncm-lyrics/%s.ttml";
+
 /**
  * 主窗口加载地址
  * @returns string

electron/server/netease/index.ts

@@ -3,6 +3,7 @@ import { pathCase } from "change-case";
 import { serverLog } from "../../main/logger";
 import { useStore } from "../../main/store";
 import NeteaseCloudMusicApi from "@neteasecloudmusicapienhanced/api";
+import { defaultAMLLDbServer } from "../../main/utils/config";
 
 // 获取数据
 const getHandler = (name: string, neteaseApi: (params: any) => any) => {
@@ -70,7 +71,7 @@ export const initNcmAPI = async (fastify: FastifyInstance) => {
         return reply.status(400).send({ error: "id is required" });
       }
       const store = useStore();
-      const server = store.get("amllDbServer") ?? "https://amll-ttml-db.stevexmh.net/ncm/%s";
+      const server = store.get("amllDbServer") ?? defaultAMLLDbServer;
       const url = server.replace("%s", String(id));
       try {
         const response = await fetch(url);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "splayer",
   "productName": "SPlayer",
-  "version": "3.0.0",
+  "version": "3.0.0-beta.7",
   "description": "A minimalist music player",
   "main": "./out/main/index.js",
   "author": "imsyy",

src/components/Modal/AMLLServer.vue

@@ -12,7 +12,6 @@
       v-model:value="serverUrl"
       :status="inputStatus"
       :allow-input="noSideSpace"
-      ref="inputElement"
       placeholder="请输入 AMLL TTML DB 地址"
     />
 
@@ -22,6 +21,8 @@
           <n-card
             v-for="server in amllDbServers"
             :key="server.value"
+            size="small"
+            hoverable
             @click="selectServer(server.value)"
           >
             <n-flex vertical size="small">
@@ -51,12 +52,17 @@ const props = defineProps<{ onClose: () => void }>();
 
 const settingStore = useSettingStore();
 const serverUrl = ref(settingStore.amllDbServer);
-const inputStatus = ref<"success" | "error">("success");
+const inputStatus = ref<"success" | "error" | "warning">("success");
 
 const noSideSpace = (value: string) => value.trim() === value;
 
 const isValidServer = (url: string) => isValidURL(url) && url.includes("%s");
 
+/**
+ * 渲染高亮
+ * @param text 文本
+ * @returns 高亮文本
+ */
 const renderHighlight = (text: string): string => {
   return text.replace("%s", "<span class='replace-part'>%s</span>");
 };
@@ -80,53 +86,36 @@ watch(serverUrl, (url: string) => {
   inputStatus.value = isValidServer(url) ? "success" : "error";
 });
 
-const inputElement = ref<HTMLElement | null>(null);
-let flashInputAnimate: Animation | null = null;
-
+/**
+ * 选择服务器
+ * @param url 服务器 URL
+ */
 const selectServer = (url: string) => {
   serverUrl.value = url;
-  triggerFlashInput();
-};
-
-const triggerFlashInput = () => {
-  flashInputAnimate?.cancel();
-  if (!inputElement.value) return;
-  const element: HTMLElement = inputElement.value.$el;
-
-  flashInputAnimate = element.animate([
-    { backgroundColor: "rgba(var(--primary), 0.5)" },
-    {},
-  ], {
-    duration: 500,
-    easing: 'ease-out',
-  });
+  inputStatus.value = "success";
+  useTimeoutFn(() => {
+    inputStatus.value = isValidServer(url) ? "success" : "error";
+  }, 300);
 };
 </script>
 
 <style scoped lang="scss">
 .servers-collapse {
-  margin-top: 10px;
-
   .n-card {
     cursor: pointer;
-    transition: border-color 0.3s;
-
     &:hover {
       border-color: rgba(var(--primary), 0.58);
     }
   }
-
   .server-url {
-    font-size: 11px;
-    color: var(--n-text-color-3);
+    font-size: 12px;
     margin-top: 4px;
     padding: 4px 8px;
     background: var(--n-code-color);
     border-radius: 4px;
-    font-family: monospace;
     word-break: break-all;
 
-    ::v-deep(.replace-part) {
+    :deep(.replace-part) {
       color: var(--n-color-target);
     }
   }

src/stores/setting.ts

@@ -9,17 +9,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;
   /** 全局着色 */
@@ -96,14 +96,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;
   /** 自动播放 */
@@ -294,7 +294,7 @@ export const useSettingStore = defineStore("setting", {
     lyricFontBold: true,
     useAMLyrics: false,
     useAMSpring: false,
-    enableTTMLLyric: true,
+    enableTTMLLyric: false,
     amllDbServer: defaultAMLLDbServer,
     showYrc: true,
     showYrcAnimation: true,
@@ -387,11 +387,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/meta.ts

@@ -107,7 +107,10 @@ export const getSongLevelsData = (
   );
 };
 
-// 排序选项
+/**
+ * 排序选项
+ * @returns 排序选项
+ */
 export const sortOptions = {
   default: { name: "默认排序", show: "all", icon: "Sort" },
   titleAZ: { name: "标题升序（ A - Z ）", show: "all", icon: "SortAZ" },
@@ -120,7 +123,11 @@ export const sortOptions = {
   dateDown: { name: "日期降序", show: "radio", icon: "SortDateDown" },
 } as const;
 
-// 自定义图片工具栏
+/**
+ * 渲染图片工具栏
+ * @param nodes 图片工具栏节点
+ * @returns 图片工具栏
+ */
 export const renderToolbar = ({ nodes }: ImageRenderToolbarProps) => {
   return [
     nodes.prev,
@@ -134,20 +141,24 @@ export const renderToolbar = ({ nodes }: ImageRenderToolbarProps) => {
   ];
 };
 
-// AMLL TTML DB Server 列表
+/**
+ * AMLL TTML DB Server 列表
+ * @returns AMLL TTML DB Server 列表
+ */
 export const amllDbServers = [
   {
-    label: "GitHub 官方仓库 (推荐)",
+    label: "【推荐】GitHub 官方仓库",
     description: "官方源，更新及时，但访问速度可能较慢",
-    value: "https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/refs/heads/main/ncm-lyrics/%s.ttml",
+    value:
+      "https://raw.githubusercontent.com/Steve-xmh/amll-ttml-db/refs/heads/main/ncm-lyrics/%s.ttml",
   },
   {
     label: "AMLL TTML DB Service (SteveXMH)",
-    description: "作者提供的官方镜像源，但免费额度快没了",
+    description: "作者提供的官方镜像源，但免费额度快没了 😂",
     value: "https://amll-ttml-db.stevexmh.net/ncm/%s",
   },
   {
-    label: "AMLL TTML DB 镜像站 (HelloZGY) (默认)",
+    label: "【默认】AMLL TTML DB 镜像站 (HelloZGY)",
     description: "社区提供的镜像源，感谢 HelloZGY",
     value: "https://amlldb.bikonoo.com/ncm-lyrics/%s.ttml",
   },
@@ -163,5 +174,9 @@ export const amllDbServers = [
   },
 ] as const;
 
-// 默认 AMLL TTML DB Server (HelloZGY)
+/**
+ * 默认 AMLL TTML DB Server
+ * 感谢 HelloZGY 提供镜像源
+ * @returns 默认 AMLL TTML DB Server
+ */
 export const defaultAMLLDbServer = amllDbServers[2].value;