优化上传组件

package.json

@@ -24,6 +24,8 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.3",
     "uuid": "^10.0.0",
+    "v-viewer": "^3.0.13",
+    "viewerjs": "^1.11.6",
     "vue": "^3.4.29"
   },
   "devDependencies": {

src/layout/header/search/SearchPage.tsx

@@ -11,7 +11,7 @@ import {
   Modal
 } from 'ant-design-vue'
 import useSearchConfigStore from './useSearchConfigStore'
-import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import { EditOutlined, DeleteOutlined, PlusOutlined, CheckOutlined } from '@ant-design/icons-vue'
 import asyncLoader from '@/utils/asyncLoader'
 const ImageUploader = asyncLoader(() => import('@/utils/ImageUploader'))
 const SearchItem = defineComponent({
@@ -188,7 +188,7 @@ export default defineComponent(() => {
               <ImageUploader v-model:value={addState.icon} />
             </Form.Item>
             <Form.Item class="flex justify-end mb-0">
-              <Button type="primary" htmlType="submit">
+              <Button type="primary" htmlType="submit" icon={<CheckOutlined />}>
                 确认添加
               </Button>
             </Form.Item>

src/main.css

@@ -39,6 +39,16 @@ body {
   position: relative;
   top: -3px;
 }
+.ant-modal-content {
+  background-color: rgba(255, 255, 255, 0.9) !important;
+  backdrop-filter: blur(20px);
+}
+.ant-modal-header {
+  background-color: transparent !important;
+}
+.viewer-backdrop {
+  backdrop-filter: blur(10px);
+}
 
 /* 滚动条样式 */
 ::-webkit-scrollbar {

src/utils/ImageUploader.tsx

@@ -1,10 +1,12 @@
 import { defineComponent } from 'vue'
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
-import { MdUpload } from 'oh-vue-icons/icons'
+import { MdUpload, FaEye } from 'oh-vue-icons/icons'
 import { message } from 'ant-design-vue'
 import upload from './upload'
+import 'viewerjs/dist/viewer.css'
+import { api as showViewer } from 'v-viewer'
 
-addIcons(MdUpload)
+addIcons(MdUpload, FaEye)
 
 // !清 asyncLoader 加载使用
 export default defineComponent({
@@ -39,7 +41,9 @@ export default defineComponent({
           style="display:none"
           ref={(el) => (input = el as any)}
           onChange={(e) => {
-            const file: File | undefined = (e.target as any).files?.[0]
+            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) {
@@ -47,13 +51,12 @@ export default defineComponent({
               return
             }
             upload(file, 'test').then((res) => {
-              console.log(res)
               ctx.emit('update:value', res)
             })
           }}
         />
         <div
-          class="flex justify-center items-center rounded bg-slate-200 hover:bg-slate-300 transition-all cursor-pointer bg-cover bg-no-repeat bg-center"
+          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"
           style={{
             width: props.width + 'px',
             height: props.width / props.ratio + 'px',
@@ -63,9 +66,29 @@ export default defineComponent({
             input?.click()
           }}
         >
-          {!props.value && <OhVueIcon name="md-upload" scale={2} fill="rgba(0,0,0,0.2)" />}
+          {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>
+          ) : (
+            <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 class="text-xs mt-1 text-black/60">支持上传 .png, .jpeg, .jpg, .svg</div>{' '}
       </div>
     )
   }