feat: optimize template search

src/components/SingleTemplateEdit.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { NAutoComplete } from 'naive-ui'
+import { computed } from 'vue'
+import type { UseProducer } from '@/persis'
+import { imgIndex } from '@/data/image'
+
+const props = defineProps<{
+  value: string
+  edit: UseProducer<string>
+}>()
+
+const options = computed(() => {
+  const lowerSearch = props.value.toLowerCase().split(/ +/)
+  if (lowerSearch.length === 0) {
+    return []
+  }
+  return imgIndex.value
+    .map(name => ({
+      name,
+      type: lowerSearch
+        .map(key => (name.toLowerCase().indexOf(key) !== -1 ? 0 : 1) as number)
+        .reduce((a, b) => a + b, 0)
+    }))
+    .filter(({ type }) => type < 2)
+    .sort((a, b) => a.type - b.type)
+    .map(x => ({
+      label: x.name,
+      value: x.name
+    }))
+})
+</script>
+
+<template>
+  <NAutoComplete
+    :value="value"
+    @update:value="
+      (v: string) => {
+        edit(() => v)
+      }
+    "
+    :input-props="{
+      autocomplete: 'disabled'
+    }"
+    :options="options"
+    placeholder="template"
+  ></NAutoComplete>
+</template>

src/components/TemplateEdit.vue

@@ -8,6 +8,7 @@ import SingleArrayButton from './SingleArrayButton.vue'
 import FloatInput from './FloatInput.vue'
 import ImageHover from './ImageHover.vue'
 import { type UseProducer, updateEdit } from '@/persis'
+import SingleTemplateEdit from './SingleTemplateEdit.vue'
 
 type TTemp = string | string[] | null
 type TThre = number | number[] | null
@@ -101,11 +102,7 @@ const fixThre = (v: number) => {
   >
     <template #edit="{ value, edit, index }">
       <div class="flex gap-2">
-        <NInput
-          :value="value"
-          @update:value="v => updateEdit(edit, v)"
-          placeholder="template"
-        ></NInput>
+        <SingleTemplateEdit :value="value" :edit="edit"></SingleTemplateEdit>
         <FloatInput
           v-if="!isThresholdSingle"
           :nullable="false"

src/data/image.ts

@@ -0,0 +1,13 @@
+import { computed } from 'vue'
+import { fs } from './fs'
+import { Util } from '@/fs'
+
+export const imgIndex = computed(() => {
+  const res: string[] = []
+  fs.now().value?.enumFile((dir, entry) => {
+    if (entry.name.endsWith('.png') && entry.ref) {
+      res.push(Util.path2zip(Util.pathjoin(dir, entry.name)))
+    }
+  })
+  return res
+})