refactor(setting): 优化设置显示效果

Author: MoYingJi

src/components/Setting/SettingItemRenderer.vue

@@ -53,6 +53,7 @@
           class="set"
           :round="false"
           :disabled="isDisabled"
+          :title="resolve(props.item.title)"
           v-bind="item.componentProps"
         />
 
@@ -63,6 +64,7 @@
           :options="normalizedOptions"
           class="set"
           :disabled="isDisabled"
+          :title="resolve(props.item.title)"
           v-bind="item.componentProps"
         />
 
@@ -75,6 +77,7 @@
           :max="resolve(item.max)"
           :step="resolve(item.step)"
           :disabled="isDisabled"
+          :title="resolve(props.item.title)"
           v-bind="item.componentProps"
         >
           <template #prefix v-if="item.prefix">{{ resolve(item.prefix) }}</template>
@@ -90,6 +93,7 @@
           :type="item.componentProps?.type || 'text'"
           :show-password-on="item.componentProps?.showPasswordOn"
           :disabled="isDisabled"
+          :title="resolve(props.item.title)"
           v-bind="item.componentProps"
         >
           <template #prefix v-if="item.prefix">{{ resolve(item.prefix) }}</template>
@@ -107,6 +111,7 @@
           :marks="item.marks"
           :format-tooltip="item.formatTooltip"
           :disabled="isDisabled"
+          :title="resolve(props.item.title)"
           v-bind="item.componentProps"
         />
 
@@ -118,6 +123,7 @@
           secondary
           @click="handleAction"
           :disabled="isDisabled"
+          :title="resolve(props.item.title)"
           v-bind="item.componentProps"
         >
           {{ resolve(item.buttonLabel) || "配置" }}
@@ -131,6 +137,7 @@
           :show-alpha="item.componentProps?.showAlpha ?? false"
           :modes="item.componentProps?.modes ?? ['hex']"
           :disabled="isDisabled"
+          :title="resolve(props.item.title)"
           @complete="handleAction"
         />
 

src/components/Setting/config/lyric.ts

@@ -124,6 +124,7 @@ export const useLyricSettings = (): SettingConfig => {
             max: 40,
             suffix: "px",
             disabled: computed(() => settingStore.useAMLyrics),
+            title: computed(() => settingStore.useAMLyrics ? "由 AMLL 自动控制" : ""),
             value: computed({
               get: () => tranFontSize.value,
               set: (v) => (tranFontSize.value = v || 22),
@@ -139,6 +140,7 @@ export const useLyricSettings = (): SettingConfig => {
             max: 40,
             suffix: "px",
             disabled: computed(() => settingStore.useAMLyrics),
+            title: computed(() => settingStore.useAMLyrics ? "由 AMLL 自动控制" : ""),
             value: computed({
               get: () => romaFontSize.value,
               set: (v) => (romaFontSize.value = v || 18),

src/components/Setting/config/play.ts

@@ -59,6 +59,16 @@ export const usePlaySettings = (): SettingConfig => {
         },
       );
     }
+    if (option.value === "mpv" && option.disabled) {
+      return h(
+        NTooltip,
+        { placement: "left", keepAliveOnHover: false },
+        {
+          trigger: () => h("div", { style: "cursor: not-allowed;" }, [node]),
+          default: () => "当前环境不支持 MPV 引擎",
+        },
+      );
+    }
     return node;
   };
 
@@ -70,7 +80,11 @@ export const usePlaySettings = (): SettingConfig => {
       value: "ffmpeg",
       disabled: !checkIsolationSupport(),
     },
-    { label: "MPV", value: "mpv" },
+    {
+      label: "MPV",
+      value: "mpv",
+      disabled: !isElectron,
+    },
   ];
 
   // 当前选中的引擎值
@@ -98,7 +112,11 @@ export const usePlaySettings = (): SettingConfig => {
     }
 
     // 如果切换到 MPV 引擎，先检查是否已安装
-    if (targetPlaybackEngine === "mpv" && isElectron) {
+    if (targetPlaybackEngine === "mpv") {
+      if (!isElectron) {
+        window.$message.warning("当前环境不支持 MPV 引擎，已回退至默认引擎");
+        return;
+      }
       try {
         const result = await window.electron.ipcRenderer.invoke("mpv-check-installed");
         if (!result.installed) {
@@ -477,6 +495,7 @@ export const usePlaySettings = (): SettingConfig => {
       {
         title: "音乐解锁",
         tags: [{ text: "Beta", type: "warning" }],
+        show: isElectron,
         items: [
           {
             key: "useSongUnlock",
@@ -487,7 +506,6 @@ export const usePlaySettings = (): SettingConfig => {
               get: () => settingStore.useSongUnlock,
               set: (v) => (settingStore.useSongUnlock = v),
             }),
-            show: isElectron,
           },
           {
             key: "songUnlockConfig",
@@ -497,7 +515,6 @@ export const usePlaySettings = (): SettingConfig => {
             buttonLabel: "配置",
             action: openSongUnlockManager,
             disabled: computed(() => !settingStore.useSongUnlock),
-            show: isElectron,
           },
         ],
       },

src/types/settings.ts

@@ -121,6 +121,12 @@ export interface SettingItem {
    */
   disabled?: MaybeRefOrGetter<boolean>;
 
+  /**
+   * 标题
+   * 一般用作鼠标悬停时会显示的提示
+   */
+  title?: MaybeRefOrGetter<string>;
+
   /**
    * 子项展开条件
    * 仅当存在 `children` 时有效