编辑添加一体化，异步加载添加搜索引擎功能

src/layout/header/search/SearchAdder.tsx

@@ -0,0 +1,65 @@
+import { defineComponent, reactive, watch } from 'vue'
+import { Button, Form, Input } from 'ant-design-vue'
+import asyncLoader from '@/utils/asyncLoader'
+import { CheckOutlined } from '@ant-design/icons-vue'
+const ImageUploader = asyncLoader(() => import('@/utils/ImageUploader'))
+
+export default defineComponent({
+  props: {
+    selected: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const addState = reactive({
+      name: '',
+      url: '',
+      icon: ''
+    })
+    watch(
+      () => props.selected,
+      (obj) => {
+        if (!obj) {
+          addState.name = ''
+          addState.url = ''
+          addState.icon = ''
+          return
+        }
+        addState.name = obj.name
+        addState.url = obj.url
+        addState.icon = obj.icon
+      },
+      { immediate: true }
+    )
+    return () => (
+      <Form
+        layout="vertical"
+        model={addState}
+        onFinish={(res) => {
+          console.log(res)
+        }}
+      >
+        <Form.Item label="名称" name="name" rules={[{ required: true, message: '引擎名必填' }]}>
+          <Input v-model:value={addState.name} />
+        </Form.Item>
+        <Form.Item
+          label="链接"
+          name="url"
+          rules={[{ required: true, message: '链接必填' }]}
+          help="以 %s 代替查询内容"
+        >
+          <Input v-model:value={addState.url} />
+        </Form.Item>
+        <Form.Item label="图标" name="icon">
+          <ImageUploader v-model:value={addState.icon} />
+        </Form.Item>
+        <Form.Item class="flex justify-end mb-0">
+          <Button type="primary" htmlType="submit" icon={<CheckOutlined />}>
+            确认添加
+          </Button>
+        </Form.Item>
+      </Form>
+    )
+  }
+})

src/layout/header/search/SearchPage.tsx

@@ -10,10 +10,10 @@ import {
   message,
   Modal
 } from 'ant-design-vue'
-import useSearchConfigStore from './useSearchConfigStore'
+import useSearchConfigStore, { type SearchInfo } from './useSearchConfigStore'
 import { EditOutlined, DeleteOutlined, PlusOutlined, CheckOutlined } from '@ant-design/icons-vue'
 import asyncLoader from '@/utils/asyncLoader'
-const ImageUploader = asyncLoader(() => import('@/utils/ImageUploader'))
+const SearchAdder = asyncLoader(() => import('./SearchAdder'))
 const SearchItem = defineComponent({
   props: {
     icon: {
@@ -37,7 +37,7 @@ const SearchItem = defineComponent({
       default: false
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'edit'],
   setup(props, ctx) {
     const searchConfig = useSearchConfigStore()
     return () => (
@@ -84,7 +84,19 @@ const SearchItem = defineComponent({
           />
           {props.editable && (
             <>
-              <Button size="small" type="link" class="ml-4" icon={<EditOutlined />}></Button>
+              <Button
+                size="small"
+                type="link"
+                class="ml-4"
+                icon={<EditOutlined />}
+                onClick={() => {
+                  ctx.emit('edit', {
+                    icon: props.icon,
+                    name: props.name,
+                    url: props.url
+                  })
+                }}
+              ></Button>
               <Button
                 size="small"
                 type="text"
@@ -110,12 +122,7 @@ const SearchItem = defineComponent({
 
 export default defineComponent(() => {
   const searchConfig = useSearchConfigStore()
-  const showAdder = ref(false)
+  const showAdder = ref<{ [key: string]: any } | null | undefined>(undefined)
-  const addState = reactive({
-    name: '',
-    url: '',
-    icon: ''
-  })
   return () => (
     <div
       class="w-full h-full bg-white/90 backdrop-blur p-4 flex flex-col select-text"
@@ -149,6 +156,9 @@ export default defineComponent(() => {
                   name={el.name}
                   editable
                   v-model={el.show}
+                  onEdit={(obj) => {
+                    showAdder.value = obj
+                  }}
                 />
               ))}
             </div>
@@ -158,41 +168,24 @@ export default defineComponent(() => {
               block
               icon={<PlusOutlined />}
               onClick={() => {
-                showAdder.value = true
+                showAdder.value = null
               }}
             >
               添加自定义搜索引擎
             </Button>
           </div>
         </div>
-        <Modal v-model:open={showAdder.value} title="添加搜索引擎" footer={false}>
+        <Modal
-          <Form
+          open={showAdder.value !== undefined}
-            layout="vertical"
+          onUpdate:open={(e) => {
-            model={addState}
+            if (!e) {
-            onFinish={(res) => {
+              showAdder.value = undefined
-              console.log(res)
+            }
           }}
+          title="添加搜索引擎"
+          footer={false}
         >
-            <Form.Item label="名称" name="name" rules={[{ required: true, message: '引擎名必填' }]}>
+          <SearchAdder selected={showAdder.value as any} />
-              <Input v-model:value={addState.name} />
-            </Form.Item>
-            <Form.Item
-              label="链接"
-              name="url"
-              rules={[{ required: true, message: '链接必填' }]}
-              help="以 %s 代替查询内容"
-            >
-              <Input v-model:value={addState.url} />
-            </Form.Item>
-            <Form.Item label="图标" name="icon">
-              <ImageUploader v-model:value={addState.icon} />
-            </Form.Item>
-            <Form.Item class="flex justify-end mb-0">
-              <Button type="primary" htmlType="submit" icon={<CheckOutlined />}>
-                确认添加
-              </Button>
-            </Form.Item>
-          </Form>
         </Modal>
       </ConfigProvider>
     </div>