🐞 fix: 修复搜索框失焦

Author: imsyy

src/components/Setting/SettingSearch.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="setting-search" :class="{ focus: isFocus }">
     <n-input
+      ref="inputInst"
       v-model:value="inputValue"
       clearable
       placeholder="搜索设置项..."
@@ -36,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import type { SelectOption } from "naive-ui";
+import { SelectOption, NInput } from "naive-ui";
 import Fuse from "fuse.js";
 
 interface SearchOption extends SelectOption {
@@ -51,6 +52,7 @@ const props = defineProps<{
 
 const emit = defineEmits(["select", "active-change"]);
 
+const inputInst = ref<InstanceType<typeof NInput> | null>(null);
 const inputValue = ref("");
 const isFocus = ref(false);
 const resultList = ref<SearchOption[]>([]);
@@ -88,7 +90,7 @@ watch(inputValue, (val) => {
 
 // 处理失焦
 const handleBlur = () => {
-  // isFocus.value = false;
+  isFocus.value = false;
 };
 
 // 处理选择
@@ -97,6 +99,7 @@ const handleSelect = (value: string | number) => {
   isFocus.value = false;
   inputValue.value = "";
   emit("active-change", false);
+  inputInst.value?.blur();
 };
 </script>
 

src/style/main.scss

@@ -14,23 +14,23 @@
 :root {
   // 图片模式
   &.image {
-    --background-hex: rgba(0, 0, 0, 0.2) !important;
-    --surface-container-hex: rgba(0, 0, 0, 0.1) !important;
+    --background-hex: rgba(0, 0, 0, 0.1) !important;
+    --surface-container-hex: rgba(0, 0, 0, 0.2) !important;
     body {
       --background-hex: rgba(var(--background), 0.1) !important;
-      --surface-container-hex: rgba(var(--surface-container), 0.1) !important;
+      --surface-container-hex: rgba(var(--surface-container), 0.2) !important;
       --n-toggle-bar-color: rgba(var(--background), 0.2) !important;
       --n-toggle-bar-color-hover: rgba(var(--background), 0.4) !important;
     }
     .n-layout-sider {
-      background-color: rgba(var(--surface-container), 0.2) !important;
+      background-color: var(--surface-container-hex) !important;
     }
     .n-layout {
       background-color: transparent !important;
     }
     .main-player {
       background-color: var(--surface-container-hex);
-      backdrop-filter: blur(20px);
+      backdrop-filter: blur(10px);
     }
     // 内置组件
     .n-card,