change

src/config.ts

@@ -1,10 +1,13 @@
 export const aIUrl = 'https://metaso.cn/?s=uitab&referrer_s=uitab&q='
 export const translateUrl = 'https://fanyi.baidu.com/mtpe-individual/multimodal?lang=zh2en&query='
-// 获取 oss 根目录地址
+// oss地址
 export const ossBase = import.meta.env.PROD
   ? 'http://btab.oss-cn-hangzhou.aliyuncs.com'
   : 'http://btab.oss-cn-hangzhou.aliyuncs.com'
 
+// oss cdn 加速地址
+export const ossCdnBase = import.meta.env.PROD ? ossBase : ossBase
+
 // 后端地址
 export const apiBase = import.meta.env.PROD
   ? 'http://192.168.110.28:8300'
@@ -12,3 +15,52 @@ export const apiBase = import.meta.env.PROD
 
 // 后端 cdn 加速地址
 export const cdnBase = import.meta.env.PROD ? apiBase : apiBase
+
+// 图片后缀名
+export const imgArr = [
+  'bmp',
+  'cod',
+  'gif',
+  'lef',
+  'jpe',
+  'jpeg',
+  'jpg',
+  'jfif',
+  'svg',
+  'tif',
+  'tiff',
+  'ras',
+  'cmx',
+  'ico',
+  'pnm',
+  'pbm',
+  'pgm',
+  'rgb',
+  'xbm',
+  'xpm',
+  'xwd',
+  'png'
+]
+// 视频后缀名
+export const videoArr = [
+  'mp4',
+  'mpg',
+  'mpeg',
+  'mpe',
+  'qt',
+  'mov',
+  'm4v',
+  'wmv',
+  'avi',
+  'webm',
+  'flv',
+  'mp2',
+  'mpa',
+  'mpv2',
+  'lsf',
+  'lsx',
+  'asf',
+  'asr',
+  'asx',
+  'movie'
+]

src/layout/adder/AdderPage.tsx

@@ -5,6 +5,7 @@ import { OhVueIcon, addIcons } from 'oh-vue-icons'
 import { MdKeyboardcommandkey, FaCompass, FaPencilRuler } from 'oh-vue-icons/icons'
 import CustomAdder from './CustomAdder'
 import clsx from 'clsx'
+import ThemeProvider from '@/utils/ThemeProvider'
 addIcons(MdKeyboardcommandkey, FaCompass, FaPencilRuler)
 
 const ItemButton = defineComponent({
@@ -54,55 +55,57 @@ export default defineComponent(() => {
   const isGame = computed(() => layout.state.current === 0)
   const type = ref(1)
   return () => (
-    <div class={clsx("w-full h-full relative flex", isGame.value&&"bg-[#2c2e3e]")}>
-      {isGame.value && <AdderPageBack />}
-      <div
-        class={
-          'w-[200px] h-full relative z-10 pt-[100px] ' +
-          (isGame.value ? 'pl-6 pr-2' : 'bg-white/60 backdrop-blur px-4')
-        }
-      >
-        <ItemButton
-          name="md-keyboardcommandkey"
-          label="功能组件"
-          active={type.value === 0}
-          onClick={() => {
-            type.value = 0
-          }}
-        />
-        <ItemButton
-          name="fa-compass"
-          label="网站图标"
-          active={type.value === 1}
-          onClick={() => {
-            type.value = 1
-          }}
-        />
-        <ItemButton
-          name="fa-pencil-ruler"
-          label="自定义网址"
-          active={type.value === 2}
-          onClick={() => {
-            type.value = 2
-          }}
-        />
-      </div>
-      <div
-        class={
-          'w-0 h-full flex-grow relative z-10 flex flex-col ' +
-          (isGame.value ? '' : 'bg-white/80 backdrop-blur')
-        }
-        onContextmenu={(e) => e.stopPropagation()}
-      >
-        <div class="w-full h-[60px]"></div>
-        <div class="w-full h-0 flex-grow p-6">
-          <div class="w-full h-full relative">
-            <Transition>
-              {type.value === 0 ? '' : type.value === 1 ? '' : <CustomAdder />}
-            </Transition>
+    <div class={clsx('w-full h-full relative flex', isGame.value && 'bg-[#2c2e3e]')}>
+      <ThemeProvider dark={isGame.value}>
+        {isGame.value && <AdderPageBack />}
+        <div
+          class={
+            'w-[200px] h-full relative z-10 pt-[100px] ' +
+            (isGame.value ? 'pl-6 pr-2' : 'bg-white/60 backdrop-blur px-4')
+          }
+        >
+          <ItemButton
+            name="md-keyboardcommandkey"
+            label="功能组件"
+            active={type.value === 0}
+            onClick={() => {
+              type.value = 0
+            }}
+          />
+          <ItemButton
+            name="fa-compass"
+            label="网站图标"
+            active={type.value === 1}
+            onClick={() => {
+              type.value = 1
+            }}
+          />
+          <ItemButton
+            name="fa-pencil-ruler"
+            label="自定义网址"
+            active={type.value === 2}
+            onClick={() => {
+              type.value = 2
+            }}
+          />
+        </div>
+        <div
+          class={
+            'w-0 h-full flex-grow relative z-10 flex flex-col ' +
+            (isGame.value ? '' : 'bg-white/80 backdrop-blur')
+          }
+          onContextmenu={(e) => e.stopPropagation()}
+        >
+          <div class="w-full h-[60px]"></div>
+          <div class="w-full h-0 flex-grow p-6">
+            <div class="w-full h-full relative">
+              <Transition>
+                {type.value === 0 ? '' : type.value === 1 ? '' : <CustomAdder />}
+              </Transition>
+            </div>
           </div>
         </div>
-      </div>
+      </ThemeProvider>
     </div>
   )
 })

src/layout/adder/CustomAdder.tsx

@@ -1,11 +1,11 @@
 import { computed, defineComponent, reactive, ref, watch } from 'vue'
 import useLayoutStore from '../useLayoutStore'
-import { ConfigProvider, Form, Input, theme } from 'ant-design-vue'
+import { Button, Form, Input, InputGroup } from 'ant-design-vue'
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
 import { MdUpload, MdImage, MdCheck } from 'oh-vue-icons/icons'
-import clsx from 'clsx'
 import ImageUploader from '@/utils/ImageUploader'
 import useLink from './useLink'
+import { CheckOutlined } from '@ant-design/icons-vue'
 
 addIcons(MdUpload, MdImage, MdCheck)
 
@@ -108,112 +108,76 @@ const TypeSelector = defineComponent({
     )
   }
 })
-
-export default defineComponent({
-  props: {
-    mode: {
-      type: Number,
-      default: 0
-    },
-    page: {
-      type: Number,
-      default: 0
+export default defineComponent(() => {
+  const layout = useLayoutStore()
+  const form = reactive({
+    link: '',
+    name: '',
+    text: '',
+    background: '#f7a94e',
+    color: 'rgba(255,255,255,1)',
+    icon: '',
+    type: 0 // 0 默认，1 文字
+  })
+  const isGame = computed(() => layout.state.current === 0)
+  const debounced = ref('')
+  watch(
+    () => form.link,
+    (val, _, onCleanup) => {
+      const it = setTimeout(() => {
+        debounced.value = val
+      }, 500)
+      onCleanup(() => {
+        clearTimeout(it)
+      })
     }
-  },
-  setup(props, ctx) {
-    const layout = useLayoutStore()
-    const form = reactive({
-      link: '',
-      name: '',
-      text: '',
-      background: '#f7a94e',
-      color: 'rgba(255,255,255,1)',
-      icon: '',
-      type: 0 // 0 默认，1 文字
-    })
-    const isGame = computed(() => layout.state.current === 0)
-    const debounced = ref('')
-    watch(
-      () => form.link,
-      (val, _, onCleanup) => {
-        const it = setTimeout(() => {
-          debounced.value = val
-        }, 500)
-        onCleanup(() => {
-          clearTimeout(it)
-        })
+  )
+
+  const info = useLink(debounced)
+  console.log(info)
+
+  watch(info, (val) => {
+    console.log(val)
+
+    if (val.name) form.name = val.name
+    if (val.icon) form.icon = val.icon
+  })
+  return () => (
+    <div
+      class={
+        'absolute left-0 top-0 w-full h-full rounded-2xl py-5 pl-6 pr-[30%] ' +
+        (isGame.value ? 'bg-white/20' : 'bg-white/20')
       }
-    )
-
-    const info = useLink(debounced)
-    console.log(info);
-    
-    watch(info, (val) => {
-      console.log(val);
-      
-      if (val.name) form.name = val.name
-      if (val.icon) form.icon = val.icon
-
-    })
-    return () => (
-      <div
-        class={
-          'absolute left-0 top-0 w-full h-full rounded-2xl p-5 ' +
-          (isGame.value ? 'bg-white/20' : 'bg-white/20')
-        }
-      >
-        <div class="flex flex-col">
-          <div></div>
-        </div>
-        <div class={clsx('flex flex-col text-[14px] gap-y-3', isGame.value ? 'text-white' : '')}>
-          <div class={clsx('gap-x-6 flex items-center')}>
-            <span>地址</span>
-            <input
-              v-model={form.link}
+    >
+      <Form labelCol={{ span: 4 }} labelAlign="left">
+        <Form.Item label="地址">
+          <InputGroup compact style="display:flex">
+            <Input
+              v-model:value={form.link}
               placeholder="搜索想要添加的网址导航"
-              class={clsx(
-                'w-[350px] rounded-md outline-none h-[40px] px-[10px]',
-                isGame.value ? 'bg-black/[.1]' : ''
-              )}
-            ></input>
-            <span class={'cursor-pointer'}>获取地址</span>
-          </div>
-          <div class={clsx('gap-x-6 flex items-center')}>
-            <span>名称</span>
-            <input
-              v-model={form.name}
-              placeholder="网站名称"
-              class={clsx(
-                'w-[350px] rounded-md outline-none h-[40px] px-[10px]',
-                isGame.value ? 'bg-black/[.1]' : ''
-              )}
-            ></input>
-          </div>
-          <div class={clsx('gap-x-6 flex items-start')}>
-            <span>图标</span>
-            <TypeSelector
-              v-model:value={form.type}
-              v-model:icon={form.icon}
-              text={form.text}
-              color={form.color}
-              background={form.background}
+              class="w-0 flex-grow"
             />
-          </div>
-          <div class={clsx('gap-x-6 flex items-center')}>
-            <span></span>
-            <button
-              v-model:value={form.name}
-              placeholder="网站名称"
-              class={clsx(
-                'bg-gradient-to-b from-[#ffaa4e] to-[#ff6227]  rounded-lg w-[94px] h-[40px] text-[16px] ',
-                isGame.value ? 'bg-black/[.1]' : ''
-              )}
-            >
-              确定
-            </button>
-          </div>
-        </div>
-      </div>
-    )
-  }
+            <Button>获取地址</Button>
+          </InputGroup>
+        </Form.Item>
+        <Form.Item label="名称">
+          <Input v-model:value={form.name} />
+        </Form.Item>
+        <Form.Item label="图标">
+          <TypeSelector
+            v-model:value={form.type}
+            v-model:icon={form.icon}
+            text={form.text}
+            color={form.color}
+            background={form.background}
+          />
+        </Form.Item>
+        <Form.Item label=" " colon={false}>
+          <Button type="primary" size="large" icon={<CheckOutlined />}>
+            确定
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  )
 })

src/layout/background/BackgroundPage.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent(() => {
-  return () => <div class="absolute left-0 top-0 w-full h-full p-4">this is background</div>
+  return () => <div class="absolute left-0 top-0 w-full h-full p-4"></div>
 })

src/layout/background/getResource.ts

@@ -0,0 +1,97 @@
+import { ossCdnBase, videoArr } from '@/config'
+import db from '@/db'
+import { reactive, watch, type Ref } from 'vue'
+
+const defaultBackground =
+  'https://aihlp.com.cn/admin/wallpaper/508d3994-3727-4839-bfe9-41b97ccf4fba_66a3272c874d41e5b9ec7562fe5822cd (1).jpg'
+
+const defaultResource = {
+  image: '',
+  video: '',
+  brief: ''
+}
+export default function useResource(tag: Ref<string>, type: string) {
+  const resource = reactive(defaultResource)
+  watch(
+    tag,
+    (val) => {
+      // '' 表示使用默认，如果是背景，使用默认背景图片
+      if (!val) {
+        Object.assign(resource, {
+          ...defaultResource,
+          image: type === 'background' ? defaultBackground : ''
+        })
+        return
+      }
+      if (val.startsWith('http')) {
+        // 内源
+        if (val.startsWith(ossCdnBase)) {
+          // 地址后缀
+          const suffix = val.split('.').pop()
+          if (!suffix) {
+            return
+          }
+          if (videoArr.includes(suffix)) {
+            // 内部视频
+            // 先显示截图，再去数据库看是否有存货
+            resource.video = ''
+            resource.image = val + '?x-oss-process=video/snapshot,t_0,f_jpg,m_fast'
+            resource.brief = val + '?x-oss-process=video/snapshot,t_0,f_jpg,w_400,h_225,m_fast'
+            db.getItem<{ tag: string; file: Blob }[]>('videoList').then((res) => {
+              if (!res) return
+              const item = res.find((item) => item.tag === val)
+              if (item) {
+                resource.video = URL.createObjectURL(item.file)
+                resource.image = ''
+              } else {
+                // 不存在，需要存入
+                fetch(val)
+                  .then((res) => res.blob())
+                  .then((blob) => {
+                    if (res.length > 10) {
+                      res.pop()
+                    }
+                    res.unshift({ tag: val, file: blob })
+                    resource.video = URL.createObjectURL(blob)
+                    resource.image = ''
+                  })
+              }
+            })
+          } else {
+            // 图片
+            resource.image = val
+            resource.video = ''
+            resource.brief = val + '?x-oss-process=image/resize,w_400,h_225'
+          }
+          return
+        }
+        // 外部资源
+        const suffix = val.split('.').pop()
+        if (!suffix) {
+          resource.image = val
+          resource.video = ''
+          resource.brief = val
+          return
+        }
+        resource.image = videoArr.includes(suffix) ? '' : val
+        resource.video = videoArr.includes(suffix) ? val : ''
+        resource.brief = val
+        return
+      }
+      // 本地
+      db.getItem<{ tag: string; file: Blob; type: 'image' | 'video' }[]>('localList').then(
+        (res) => {
+          if (!res) return
+          const item = res.find((item) => item.tag === val)
+          if (!item) return
+          const url = URL.createObjectURL(item.file)
+          resource.image = item.type === 'image' ? url : ''
+          resource.video = item.type === 'video' ? url : ''
+          resource.brief = url
+        }
+      )
+    },
+    { immediate: true }
+  )
+  return resource
+}

src/layout/background/index.tsx

@@ -1,20 +1,20 @@
 import { defineComponent } from 'vue'
-import useBackgroundStore from './useBackgroundStore'
+import useLayoutStore from '../useLayoutStore'
 
 export default defineComponent({
   setup() {
-    const background = useBackgroundStore()
+    const layout = useLayoutStore()
     return () => (
       <div class="absolute left-0 top-0 w-full h-screen z-0">
-        {background.resource.type === 'image' ? (
+        {layout.background.video ? (
+          <video src={layout.background.video} class="w-full h-full" />
+        ) : (
           <div
             class="w-full h-full bg-center bg-cover bg-no-repeat"
             style={{
-              backgroundImage: `url('${background.resource.url}')`
+              backgroundImage: `url('${layout.background.image}')`
             }}
           ></div>
-        ) : (
-          <video src={background.resource.url} class="w-full h-full" />
         )}
       </div>
     )

src/layout/header/search/SearchPage.tsx

@@ -1,8 +1,9 @@
 import { defineComponent, ref } from 'vue'
-import { Button, Checkbox, ConfigProvider, Divider, message, Modal, theme } from 'ant-design-vue'
+import { Button, Checkbox, Divider, message, Modal } from 'ant-design-vue'
 import useSearchConfigStore from './useSearchConfigStore'
 import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import asyncLoader from '@/utils/asyncLoader'
+import ThemeProvider from '@/utils/ThemeProvider'
 const SearchAdder = asyncLoader(() => import('./SearchAdder'))
 const SearchItem = defineComponent({
   props: {
@@ -118,7 +119,7 @@ export default defineComponent(() => {
       class="w-full h-full bg-white/80 backdrop-blur p-4 flex flex-col select-text"
       onContextmenu={(e) => e.stopPropagation()}
     >
-      <ConfigProvider theme={{ token: theme.defaultAlgorithm(theme.defaultSeed) }}>
+      <ThemeProvider>
         <h2 class="text-center tracking-widest font-bold text-xl text-black/80">管理搜索引擎</h2>
         <div class="grid grid-cols-2 gap-4">
           <Divider>默认</Divider>
@@ -177,7 +178,7 @@ export default defineComponent(() => {
         >
           <SearchAdder selected={showAdder.value as any} />
         </Modal>
-      </ConfigProvider>
+      </ThemeProvider>
     </div>
   )
 })

src/layout/layout.types.ts

@@ -25,7 +25,11 @@ export interface Block {
 export type LayoutPages = { list: Block[]; label: string; name: string }[]
 
 export interface Layout {
-  content: [LayoutPages, LayoutPages, LayoutPages]
+  content: [
+    { background: ''; pages: LayoutPages },
+    { background: ''; pages: LayoutPages },
+    { background: ''; pages: LayoutPages }
+  ]
   current: 0 | 1 | 2 // 游戏，工作，轻娱
   currentPage: number
   dir: { [key: string]: Block[] }

src/layout/sider/index.tsx

@@ -77,7 +77,7 @@ export default defineComponent(() => {
             <div class="w-full h-[64px]" />
             <div class="w-full h-0 flex-grow overflow-auto relative no-scrollbar">
               <TransitionGroup>
-                {layout.state.content[layout.state.current].map((el, idx) => (
+                {layout.currentMode.pages.map((el, idx) => (
                   <Item
                     key={idx}
                     name={el.name}
@@ -91,7 +91,7 @@ export default defineComponent(() => {
                 ))}
               </TransitionGroup>
               <Transition>
-                {layout.state.content[layout.state.current]?.length > 0 && (
+                {layout.currentMode.pages.length > 0 && (
                   <div
                     class="absolute w-full h-[56px] rounded-lg bg-white/40 left-0 transition-all"
                     style={{
@@ -164,7 +164,7 @@ export default defineComponent(() => {
                 <div
                   class="w-full mt-2 py-1 rounded-lg bg-white text-center text-sm shadow hover:shadow-lg transition-all cursor-pointer"
                   onClick={() => {
-                    layout.state.content[layout.state.current].push({
+                    layout.currentMode.pages.push({
                       list: [],
                       label: label.value,
                       name: selected.value.name

src/layout/useLayoutStore.ts

@@ -2,9 +2,14 @@ import { defineStore } from 'pinia'
 import type { Layout } from './layout.types'
 import { computed, reactive, ref, toRaw, watch } from 'vue'
 import db from '@/db'
+import useResource from './background/getResource'
 
 const defaultLayout: Layout = {
-  content: [[], [], []],
+  content: [
+    { background: '', pages: [] },
+    { background: '', pages: [] },
+    { background: '', pages: [] }
+  ],
   current: 0,
   currentPage: 0,
   dir: {},
@@ -35,15 +40,29 @@ export default defineStore('layout', () => {
       state.currentPage = 0
     }
   )
-  const currentPageList = computed(() =>
-    state.simple ? [] : state.content[state.current]?.[state.currentPage]?.list || []
+  const currentMode = computed(() => state.content[state.current])
+  const currentPage = computed(() => {
+    return (
+      currentMode.value.pages[state.simple ? 0 : state.currentPage] || {
+        list: [],
+        label: '',
+        name: ''
+      }
+    )
+  })
+
+  const background = useResource(
+    computed(() => state.content[state.current]?.background || ''),
+    'background'
   )
   // 是让时间和搜索改变位置，使画面更紧凑 —— @/layout/grid
   const isCompact = ref(false)
   return {
     state,
     ready,
-    currentPageList,
-    isCompact
+    currentMode,
+    currentPage,
+    isCompact,
+    background
   }
 })

src/settings/SettingsOverlay.tsx

@@ -2,9 +2,7 @@ import AvatarCircle from '@/user/AvatarCircle'
 import useRouterStore from '@/useRouterStore'
 import asyncLoader from '@/utils/asyncLoader'
 import { computed, defineComponent, Transition } from 'vue'
-
-const UserPage = asyncLoader(() => import('@/user/UserPage'))
-const BackgroundPage = asyncLoader(() => import('@/layout/background/BackgroundPage'))
+const Content = asyncLoader(() => import('./SettingsOverlayContent'))
 
 const SettingsTab = defineComponent({
   props: {
@@ -77,15 +75,7 @@ export default defineComponent(() => {
               <SettingsTab label="重置" path="settings-reset" />
               <SettingsTab label="问题反馈" path="settings-fallback" />
             </div>
-            <div class="w-0 h-full flex-grow bg-white/80 backdrop-blur">
-              <Transition>
-                {router.path === 'settings-user' ? (
-                  <UserPage />
-                ) : router.path === 'settings-background' ? (
-                  <BackgroundPage />
-                ) : null}
-              </Transition>
-            </div>
+            <Content />
           </div>
         )}
       </Transition>

src/settings/SettingsOverlayContent.tsx

@@ -0,0 +1,21 @@
+import useRouterStore from '@/useRouterStore'
+import { defineComponent, Transition } from 'vue'
+import UserPage from '@/user/UserPage'
+import BackgroundPage from '@/layout/background/BackgroundPage'
+import ThemeProvider from '@/utils/ThemeProvider'
+export default defineComponent(() => {
+  const router = useRouterStore()
+  return () => (
+    <div class="w-0 h-full flex-grow bg-white/80 backdrop-blur">
+      <ThemeProvider>
+        <Transition>
+          {router.path === 'settings-user' ? (
+            <UserPage />
+          ) : router.path === 'settings-background' ? (
+            <BackgroundPage />
+          ) : null}
+        </Transition>
+      </ThemeProvider>
+    </div>
+  )
+})

src/settings/useSettingsStore.ts

@@ -7,7 +7,6 @@ export default defineStore(
   'settings',
   () => {
     const state = reactive({
-      backgroundTag: '',
       // 显示隐藏
       showSider: 'show' as VisibleState,
       showDock: 'show' as VisibleState,

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 { ConfigProvider, message, theme } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import upload from './upload'
 import 'viewerjs/dist/viewer.css'
 import { api as showViewer } from 'v-viewer'
@@ -35,62 +35,60 @@ export default defineComponent({
     let input: HTMLInputElement | null = null
     return () => (
       <div>
-        <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>
+        <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>
-            ) : (
-              <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>
+          ) : (
+            <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>{' '} */}
       </div>
     )
   }

src/utils/ThemeProvider.tsx

@@ -0,0 +1,27 @@
+import { ConfigProvider, theme } from 'ant-design-vue'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    dark: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, ctx) {
+    return () => (
+      <ConfigProvider
+        theme={{
+          algorithm: props.dark ? theme.darkAlgorithm : theme.defaultAlgorithm,
+          token: {
+            colorPrimary: '#f7a94e',
+            colorBgBase: props.dark ? '#393a41' : '#fff',
+            colorBorder: 'transparent'
+          }
+        }}
+      >
+        {ctx.slots.default?.()}
+      </ConfigProvider>
+    )
+  }
+})