perf(UI): 修复「自定义 CSS 字体」开启时修改「全局字体」卡顿

换成了自定义的 `s-input.vue` 组件，提供了 `update-value-on-input`

既然该都改了，那就两个都一起改掉了

Author: MoYingJi

components.d.ts

@@ -151,6 +151,7 @@ declare module 'vue' {
     SidebarHideManager: typeof import('./src/components/Modal/Setting/SidebarHideManager.vue')['default']
     Sider: typeof import('./src/components/Layout/Sider.vue')['default']
     SImage: typeof import('./src/components/UI/s-image.vue')['default']
+    SInput: typeof import('./src/components/UI/s-input.vue')['default']
     SongCard: typeof import('./src/components/Card/SongCard.vue')['default']
     SongDataCard: typeof import('./src/components/Card/SongDataCard.vue')['default']
     SongInfoEditor: typeof import('./src/components/Modal/SongInfoEditor.vue')['default']

src/components/Modal/Setting/FontManager.vue

@@ -26,9 +26,10 @@
               恢复默认
             </n-button>
           </Transition>
-          <n-input
+          <s-input
             v-if="settingStore.useCustomFont"
             v-model:value="settingStore.globalFont"
+            :update-value-on-input="false"
             placeholder="输入字体名称，例如: 'Microsoft YaHei'"
             class="set"
           />
@@ -62,9 +63,10 @@
               恢复默认
             </n-button>
           </Transition>
-          <n-input
+          <s-input
             v-if="settingStore.useCustomFont"
             v-model:value="settingStore[font.key]"
+            :update-value-on-input="false"
             placeholder="输入字体名称"
             class="set"
           />

src/components/UI/s-input.vue

@@ -0,0 +1,55 @@
+<template>
+  <n-input
+    :value="input"
+    @input="handleInput"
+    @blur="handleConfirm"
+    @keyup.enter="handleConfirm"
+    v-bind="$attrs"
+  />
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    value?: string;
+    updateValueOnInput?: boolean;
+  }>(),
+  {
+    value: "",
+    updateValueOnInput: false,
+  },
+);
+
+const emit = defineEmits<{
+  (e: "update:value", value: string): void;
+}>();
+
+const input = ref(props.value); // 内部值
+const value = ref(props.value); // 外部值
+
+// 监听父组件 value 变化，同步到内部值
+watch(
+  () => props.value,
+  (newValue) => {
+    value.value = newValue;
+    input.value = newValue;
+  },
+  { immediate: true },
+);
+
+const handleInput = (newValue: string) => {
+  if (props.updateValueOnInput) {
+    value.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);
+  }
+}
+</script>