From 05c283ee4932379f40df67c86b261a56a30d7456 Mon Sep 17 00:00:00 2001
From: plightfield <1207120484@qq.com>
Date: Wed, 11 Sep 2024 18:12:13 +0800
Subject: [PATCH] =?UTF-8?q?antd=20=E4=B8=BB=E9=A2=98=E9=9C=80=E8=A6=81?=
 =?UTF-8?q?=E5=88=86=E5=88=AB=E6=8F=90=E4=BE=9B=E4=B8=BB=E9=A2=98=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/header/search/SearchPage.tsx |  92 +++++++++++---------
 src/utils/ImageUploader.tsx             | 110 ++++++++++++------------
 2 files changed, 106 insertions(+), 96 deletions(-)

diff --git a/src/layout/header/search/SearchPage.tsx b/src/layout/header/search/SearchPage.tsx
index 693fa9d..4ee594e 100644
--- a/src/layout/header/search/SearchPage.tsx
+++ b/src/layout/header/search/SearchPage.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, ref } from 'vue'
-import { Button, Checkbox, Divider, message, Modal } from 'ant-design-vue'
+import { Button, Checkbox, ConfigProvider, Divider, message, Modal, theme } from 'ant-design-vue'
 import useSearchConfigStore from './useSearchConfigStore'
 import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import asyncLoader from '@/utils/asyncLoader'
@@ -118,58 +118,66 @@ export default defineComponent(() => {
       class="w-full h-full bg-white/80 backdrop-blur p-4 flex flex-col select-text"
       onContextmenu={(e) => e.stopPropagation()}
     >
-      <h2 class="text-center tracking-widest font-bold text-xl text-black/80">管理搜索引擎</h2>
-      <div class="grid grid-cols-2 gap-4">
-        <Divider>默认</Divider>
-        <Divider>自定义</Divider>
-      </div>
-      <div class="w-full h-0 flex-grow grid grid-cols-2 gap-4">
-        <div class="w-full h-full overflow-auto">
-          {searchConfig.defaultList.map((el) => (
-            <SearchItem key={el.url} url={el.url} icon={el.icon} name={el.name} v-model={el.show} />
-          ))}
+      <ConfigProvider theme={{ token: theme.defaultAlgorithm(theme.defaultSeed) }}>
+        <h2 class="text-center tracking-widest font-bold text-xl text-black/80">管理搜索引擎</h2>
+        <div class="grid grid-cols-2 gap-4">
+          <Divider>默认</Divider>
+          <Divider>自定义</Divider>
         </div>
-        <div class="w-full h-full flex flex-col">
-          <div class="w-full h-0 flex-grow overflow-y-auto">
-            {searchConfig.customList.map((el) => (
+        <div class="w-full h-0 flex-grow grid grid-cols-2 gap-4">
+          <div class="w-full h-full overflow-auto">
+            {searchConfig.defaultList.map((el) => (
               <SearchItem
                 key={el.url}
                 url={el.url}
                 icon={el.icon}
                 name={el.name}
-                editable
                 v-model={el.show}
-                onEdit={(obj) => {
-                  showAdder.value = obj
-                }}
               />
             ))}
           </div>
-          <Button
-            type="primary"
-            class="mt-4"
-            block
-            icon={<PlusOutlined />}
-            onClick={() => {
-              showAdder.value = null
-            }}
-          >
-            添加自定义搜索引擎
-          </Button>
+          <div class="w-full h-full flex flex-col">
+            <div class="w-full h-0 flex-grow overflow-y-auto">
+              {searchConfig.customList.map((el) => (
+                <SearchItem
+                  key={el.url}
+                  url={el.url}
+                  icon={el.icon}
+                  name={el.name}
+                  editable
+                  v-model={el.show}
+                  onEdit={(obj) => {
+                    showAdder.value = obj
+                  }}
+                />
+              ))}
+            </div>
+            <Button
+              type="primary"
+              class="mt-4"
+              block
+              icon={<PlusOutlined />}
+              onClick={() => {
+                showAdder.value = null
+              }}
+            >
+              添加自定义搜索引擎
+            </Button>
+          </div>
         </div>
-      </div>
-      <Modal
-        open={showAdder.value !== undefined}
-        onUpdate:open={(e) => {
-          if (!e) {
-            showAdder.value = undefined
-          }
-        }}
-        title="添加搜索引擎"
-        footer={false}
-      >
-        <SearchAdder selected={showAdder.value as any} />
-      </Modal>
+        <Modal
+          open={showAdder.value !== undefined}
+          onUpdate:open={(e) => {
+            if (!e) {
+              showAdder.value = undefined
+            }
+          }}
+          title="添加搜索引擎"
+          footer={false}
+        >
+          <SearchAdder selected={showAdder.value as any} />
+        </Modal>
+      </ConfigProvider>
     </div>
   )
 })
diff --git a/src/utils/ImageUploader.tsx b/src/utils/ImageUploader.tsx
index 9a65d56..bcb519d 100644
--- a/src/utils/ImageUploader.tsx
+++ b/src/utils/ImageUploader.tsx
@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue'
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
 import { MdUpload, FaEye } from 'oh-vue-icons/icons'
-import { message } from 'ant-design-vue'
+import { ConfigProvider, message, theme } from 'ant-design-vue'
 import upload from './upload'
 import 'viewerjs/dist/viewer.css'
 import { api as showViewer } from 'v-viewer'
@@ -35,60 +35,62 @@ export default defineComponent({
     let input: HTMLInputElement | null = null
     return () => (
       <div>
-        <input
-          type="file"
-          accept=".png,.jpeg,.jpg,.svg"
-          style="display:none"
-          ref={(el) => (input = el as any)}
-          onChange={(e) => {
-            const el = e.target as any
-            const file: File | undefined = el.files?.[0]
-            el.value = ''
-            if (!file) return
-            console.log(file.size, props.size)
-            if (file.size > props.size * 1000 * 1000) {
-              message.warn(`大小不得超过${props.size}mb`)
-              return
-            }
-            upload(file, 'test').then((res) => {
-              ctx.emit('update:value', res)
-            })
-          }}
-        />
-        <div
-          class="flex justify-center items-center rounded bg-slate-200 hover:bg-slate-300 transition-all bg-cover bg-no-repeat bg-center cursor-pointer shadow"
-          style={{
-            width: props.width + 'px',
-            height: props.width / props.ratio + 'px',
-            backgroundImage: `url('${props.value}')`
-          }}
-          onClick={() => {
-            input?.click()
-          }}
-        >
-          {props.value ? (
-            <div class="w-full h-full opacity-0 hover:opacity-100 relative transition-all bg-slate-800/20 flex justify-center items-center">
-              <div
-                class="px-1 rounded hover:bg-white/20"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  showViewer({
-                    images: [props.value],
-                    options: {
-                      navbar: false,
-                      toolbar: false
-                    }
-                  })
-                }}
-              >
-                <OhVueIcon name="fa-eye" scale={1.2} fill="rgba(255,255,255,.4)" />
+        <ConfigProvider theme={{ token: theme.defaultAlgorithm(theme.defaultSeed) }}>
+          <input
+            type="file"
+            accept=".png,.jpeg,.jpg,.svg"
+            style="display:none"
+            ref={(el) => (input = el as any)}
+            onChange={(e) => {
+              const el = e.target as any
+              const file: File | undefined = el.files?.[0]
+              el.value = ''
+              if (!file) return
+              console.log(file.size, props.size)
+              if (file.size > props.size * 1000 * 1000) {
+                message.warn(`大小不得超过${props.size}mb`)
+                return
+              }
+              upload(file, 'test').then((res) => {
+                ctx.emit('update:value', res)
+              })
+            }}
+          />
+          <div
+            class="flex justify-center items-center rounded bg-slate-200 hover:bg-slate-300 transition-all bg-cover bg-no-repeat bg-center cursor-pointer shadow"
+            style={{
+              width: props.width + 'px',
+              height: props.width / props.ratio + 'px',
+              backgroundImage: `url('${props.value}')`
+            }}
+            onClick={() => {
+              input?.click()
+            }}
+          >
+            {props.value ? (
+              <div class="w-full h-full opacity-0 hover:opacity-100 relative transition-all bg-slate-800/20 flex justify-center items-center">
+                <div
+                  class="px-1 rounded hover:bg-white/20"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    showViewer({
+                      images: [props.value],
+                      options: {
+                        navbar: false,
+                        toolbar: false
+                      }
+                    })
+                  }}
+                >
+                  <OhVueIcon name="fa-eye" scale={1.2} fill="rgba(255,255,255,.4)" />
+                </div>
               </div>
-            </div>
-          ) : (
-            <OhVueIcon name="md-upload" scale={2} fill="rgba(0,0,0,0.2)" />
-          )}
-        </div>
-        <div class="text-xs mt-1 text-black/60">支持上传 .png, .jpeg, .jpg, .svg</div>{' '}
+            ) : (
+              <OhVueIcon name="md-upload" scale={2} fill="rgba(0,0,0,0.2)" />
+            )}
+          </div>
+          <div class="text-xs mt-1 text-black/60">支持上传 .png, .jpeg, .jpg, .svg</div>{' '}
+        </ConfigProvider>
       </div>
     )
   }