feat: 组件库替换

src/components/hover-image-preview/index.vue

@@ -3,13 +3,13 @@
  * @Date: 2025-08-11 22:15:35
 -->
 <template>
-  <a-popover
-    :trigger="'hover'"
-    class="hover-big-image-preview-popover"
-    :position="props.position"
-    :mouse-enter-delay="props.enterDelay"
-    :mouse-leave-delay="props.leaveDelay"
-    :disabled="!props.src"
+  <Popover
+    trigger="hover"
+    :placement="props.position"
+    :mouseEnterDelay="props.enterDelay / 1000"
+    :mouseLeaveDelay="props.leaveDelay / 1000"
+    :open="props.src ? undefined : false"
+    overlayClassName="hover-big-image-preview-popover"
   >
     <template #content>
       <div class="preview-container">
@@ -18,17 +18,18 @@
     </template>
     
     <slot />
-  </a-popover>
+  </Popover>
 </template>
 
 <script lang="ts" setup>
+import { Popover } from 'ant-design-vue';
 // import { computed, onMounted, ref, watch } from 'vue';
 // import type { ImageOrientation } from '@/utils/tools';
 // import { getImageOrientationByUrl } from '@/utils/tools';
 
 interface Props {
   src: string;
-  position?: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
+  position?: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
   enterDelay?: number;
   leaveDelay?: number;
 }
@@ -67,7 +68,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 <style lang="scss">
 .hover-big-image-preview-popover {
-  .arco-popover-popup-content {
+  .ant-popover-content {
+    padding: 0 !important;
+  }
+  
+  .ant-popover-inner {
     padding: 16px !important;
     border-radius: 8px;
     background: #fff;

src/components/upload/FileUpload.vue

@@ -1,18 +1,16 @@
 <template>
-  <a-upload
-    :custom-request="customRequest"
+  <Upload
+    :customRequest="customRequest"
     action="/"
-    :limit="limit"
+    :maxCount="limit"
     :fileList="fileList"
     @change="onChange"
-    @success="handleSuccess"
-    @error="handleError"
   />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Message } from '@arco-design/web-vue';
+import { Upload, message } from 'ant-design-vue';
 import { fetchImageUploadFile, fetchUploadFile } from '@/api/all';
 import axios from 'axios';
 
@@ -70,8 +68,10 @@ watch(
 );
 
 let previousFileListLength = 0;
-//删除图片
-const onChange = (fileList) => {
+const onChange = (info) => {
+  const { fileList } = info;
+  
+  // 如果删除了文件
   if (fileList.length < previousFileListLength) {
     if (props.limit === 1) {
       if (fileList.length === 0) {
@@ -86,28 +86,35 @@ const onChange = (fileList) => {
       }
     }
   }
+  
+  // 处理上传成功的文件
+  if (info.file.status === 'done' && info.file.response) {
+    handleSuccess(info.file);
+  } else if (info.file.status === 'error') {
+    handleError(info.file.error);
+  }
 
   previousFileListLength = fileList.length;
 };
 
 const beforeUpload = (file, files) => {
   if (props.limit > 0 && files.length >= props.limit) {
-    Message.warning(`最多只能上传 ${props.limit} 张图片`);
+    message.warning(`最多只能上传 ${props.limit} 张图片`);
     return false; // 阻止上传
   }
   return true;
 };
 
 const handleError = (error) => {
-  Message.error('上传失败');
+  message.error('上传失败');
   console.error(error);
 };
 
 const customRequest = async (option) => {
-  const { onProgress, onError, onSuccess, fileItem, name } = option;
+  const { onProgress, onError, onSuccess, file, name } = option;
   try {
     // 1. 获取预签名上传URL
-    const response = await fetchUploadFile({ suffix: getFileExtension(fileItem.file.name) });
+    const response = await fetchUploadFile({ suffix: getFileExtension(file.name) });
     const preSignedUrl = response?.data?.upload_url;
 
     if (!preSignedUrl) {
@@ -115,9 +122,9 @@ const customRequest = async (option) => {
     }
     console.log('preSignedUrl', preSignedUrl);
     // 2. 使用预签名URL上传文件
-    const blob = new Blob([fileItem.file], { type: fileItem.file.type });
+    const blob = new Blob([file], { type: file.type });
     await axios.put(preSignedUrl, blob, {
-      headers: { 'Content-Type': fileItem.file.type },
+      headers: { 'Content-Type': file.type },
     });
 
     onSuccess(JSON.stringify(response));

src/components/upload/ImageUpload.vue

@@ -1,20 +1,19 @@
 <template>
-  <a-upload
-    :custom-request="customRequest"
-    list-type="picture-card"
+  <Upload
+    :customRequest="customRequest"
+    listType="picture-card"
     action="/"
-    :limit="limit"
+    :maxCount="limit"
     :fileList="fileList"
-    image-preview
+    :showUploadList="{ showPreviewIcon: true, showRemoveIcon: true }"
     @change="onChange"
-    @success="handleSuccess"
-    @error="handleError"
+    @preview="handlePreview"
   />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Message } from '@arco-design/web-vue';
+import { Upload, message } from 'ant-design-vue';
 import { fetchImageUploadFile } from '@/api/all';
 import axios from 'axios';
 
@@ -72,8 +71,14 @@ watch(
 );
 
 let previousFileListLength = 0;
-//删除图片
-const onChange = (fileList) => {
+const handlePreview = (file) => {
+  console.log('Preview file:', file);
+};
+
+const onChange = (info) => {
+  const { fileList } = info;
+  
+  // 如果删除了文件
   if (fileList.length < previousFileListLength) {
     if (props.limit === 1) {
       if (fileList.length === 0) {
@@ -88,20 +93,27 @@ const onChange = (fileList) => {
       }
     }
   }
+  
+  // 处理上传成功的文件
+  if (info.file.status === 'done' && info.file.response) {
+    handleSuccess(info.file);
+  } else if (info.file.status === 'error') {
+    handleError(info.file.error);
+  }
 
   previousFileListLength = fileList.length;
 };
 
 const beforeUpload = (file, files) => {
   if (props.limit > 0 && files.length >= props.limit) {
-    Message.warning(`最多只能上传 ${props.limit} 张图片`);
+    message.warning(`最多只能上传 ${props.limit} 张图片`);
     return false; // 阻止上传
   }
   return true;
 };
 
 const handleError = (error) => {
-  Message.error('上传失败');
+  message.error('上传失败');
   console.error(error);
 };