fix: 轮播图

apps/web-antd/src/components/form/components/upload-image.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { Modal, Upload } from 'ant-design-vue';
+
+import { uploadFile } from '#/api/core/upload';
+import { Icon } from '#/components/icon';
+
+defineOptions({
+  name: 'UploadImage',
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  modelValue: {
+    type: Array as () => string[],
+    default: () => [],
+  },
+  multiple: {
+    type: Boolean,
+    default: true,
+  },
+  maxCount: {
+    type: Number,
+    default: 9,
+  },
+});
+
+const emits = defineEmits(['update:modelValue']);
+
+const mValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+});
+
+const fileList = ref(
+  props.modelValue.map((url) => ({
+    uid: url,
+    name: url.split('/').pop() || 'file',
+    status: 'done',
+    url,
+  })),
+);
+
+// 监听 modelValue 变化，同步到 fileList
+watch(props.modelValue, (newVal) => {
+  fileList.value = newVal.map((url) => ({
+    uid: url,
+    name: url.split('/').pop() || 'file',
+    status: 'done',
+    url,
+  }));
+});
+
+// 监听 fileList 变化，同步到 modelValue
+watch(fileList, (newVal) => {
+  mValue.value = newVal
+    .filter((file) => file.status === 'done' && file.url)
+    .map((file) => file.url);
+});
+
+const customRequest = async (e: any) => {
+  try {
+    const res = await uploadFile({
+      file: e.file,
+    });
+
+    // 更新 fileList
+    fileList.value = [
+      ...fileList.value.filter((file) => file.status !== 'uploading'),
+      {
+        uid: res.url,
+        name: e.file.name,
+        status: 'done',
+        url: res.url,
+      },
+    ];
+
+    // 更新 modelValue
+    mValue.value = fileList.value.map((file) => file.url);
+
+    // 触发上传完成回调
+    e.onSuccess?.(res);
+  } catch (error) {
+    console.error('上传失败', error);
+    e.onError?.(error);
+  }
+};
+
+const handleRemove = (file: any) => {
+  // 从 fileList 中移除
+  fileList.value = fileList.value.filter((item) => item.uid !== file.uid);
+
+  // 更新 modelValue
+  mValue.value = fileList.value.map((file) => file.url);
+};
+
+const previewVisible = ref(false);
+const previewImage = ref('');
+const previewTitle = ref('');
+
+const handlePreview = async (file) => {
+  previewImage.value = file.response.url || file.preview;
+  previewVisible.value = true;
+  previewTitle.value =
+    file.name || file.url.slice(Math.max(0, file.url.lastIndexOf('/') + 1));
+};
+
+// 计算是否还能上传更多图片
+const showUploadButton = computed(() =>
+  props.multiple
+    ? fileList.value.length < props.maxCount
+    : fileList.value.length === 0,
+);
+</script>
+
+<template>
+  <Upload
+    v-model:value="fileList"
+    :custom-request="customRequest"
+    :multiple="multiple"
+    :limit="maxCount"
+    :show-upload-list="{ showPreviewIcon: true, showRemoveIcon: true }"
+    list-type="picture-card"
+    @remove="handleRemove"
+    @preview="handlePreview"
+  >
+    <div v-if="showUploadButton" class="upload-button">
+      <Icon icon="ant-design:plus-outlined" />
+      <div class="ant-upload-text">上传图片</div>
+    </div>
+  </Upload>
+  <Modal
+    v-model:visible="previewVisible"
+    :title="previewTitle"
+    footer=""
+    width="60%"
+  >
+    <img alt="example" style="width: 100%" :src="previewImage" />
+  </Modal>
+</template>
+
+<style lang="less" scoped>
+.m-avatar-wrap {
+  position: relative;
+  height: 102px;
+  width: 102px;
+
+  .m-avatar-icon-delete {
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.3s;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border-radius: 0 0 0 4px;
+    padding: 2px 4px;
+  }
+
+  &:hover .m-avatar-icon-delete {
+    opacity: 1;
+  }
+}
+
+.upload-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  cursor: pointer;
+}
+</style>