🐞 fix: 修复字体配置

Author: imsyy

src/components/Modal/Setting/FontManager.vue

@@ -2,7 +2,7 @@
   <div class="font-manager">
     <div class="set-list">
       <n-h3 prefix="bar">通用字体</n-h3>
-      <n-card class="set-item">
+      <n-card v-if="isElectron" class="set-item">
         <div class="label">
           <n-text class="name">自定义 CSS 字体</n-text>
           <n-text class="tip" :depth="3"> 开启后可手动输入字体名称，支持 CSS 字体族 </n-text>
@@ -27,10 +27,10 @@
             </n-button>
           </Transition>
           <s-input
-            v-if="settingStore.useCustomFont"
+            v-if="settingStore.useCustomFont || !isElectron"
             v-model:value="settingStore.globalFont"
             :update-value-on-input="false"
-            placeholder="输入字体名称，例如: 'Microsoft YaHei'"
+            placeholder="输入字体名称"
             class="set"
           />
           <n-select
@@ -64,7 +64,7 @@
             </n-button>
           </Transition>
           <s-input
-            v-if="settingStore.useCustomFont"
+            v-if="settingStore.useCustomFont || !isElectron"
             v-model:value="settingStore[font.key]"
             :update-value-on-input="false"
             placeholder="输入字体名称"
@@ -163,7 +163,6 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .font-manager {
-  padding: 4px;
   .set-list {
     margin-bottom: 24px;
     &:last-child {

src/components/Setting/GeneralSetting.vue

@@ -79,6 +79,13 @@
           :round="false"
         />
       </n-card>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">字体设置</n-text>
+          <n-text class="tip" :depth="3"> 统一配置全局及歌词区域的字体 </n-text>
+        </div>
+        <n-button type="primary" strong secondary @click="openFontManager"> 配置 </n-button>
+      </n-card>
     </div>
     <div class="set-list">
       <n-h3 prefix="bar"> 杂项设置 </n-h3>
@@ -188,13 +195,6 @@
         </div>
         <n-switch class="set" :value="useOnlineService" :round="false" @update:value="modeChange" />
       </n-card>
-      <n-card class="set-item">
-        <div class="label">
-          <n-text class="name">字体设置</n-text>
-          <n-text class="tip" :depth="3"> 统一配置全局及歌词区域的字体 </n-text>
-        </div>
-        <n-button type="primary" strong secondary @click="openFontManager"> 配置 </n-button>
-      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">关闭软件时</n-text>

src/components/UI/s-input.vue

@@ -25,31 +25,30 @@ const emit = defineEmits<{
 }>();
 
 const input = ref(props.value); // 内部值
-const value = ref(props.value); // 外部值
+const committedValue = ref(props.value); // 外部值
 
 // 监听父组件 value 变化，同步到内部值
 watch(
   () => props.value,
   (newValue) => {
-    value.value = newValue;
+    committedValue.value = newValue;
     input.value = newValue;
   },
   { immediate: true },
 );
 
 const handleInput = (newValue: string) => {
+  input.value = newValue;
   if (props.updateValueOnInput) {
-    value.value = newValue;
+    committedValue.value = newValue;
     emit("update:value", newValue);
-  } else {
-    input.value = newValue;
   }
 };
 
 const handleConfirm = () => {
-  if (!props.updateValueOnInput && input.value !== value.value) {
-    value.value = input.value;
-    emit("update:value", value.value);
+  if (!props.updateValueOnInput && input.value !== committedValue.value) {
+    committedValue.value = input.value;
+    emit("update:value", committedValue.value);
   }
-}
+};
 </script>