canrd-outside / order-erp-front · Files

<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="getTitle"
    width="70%"
    @ok="handleSubmit"
    :okButtonProps="{ disabled: isView }"
  >
    <BasicForm @register="registerForm" />
    
    <!-- 自定义图片上传区域 -->
    <div class="custom-image-upload" v-if="!isView">
      <div class="upload-title">图片上传</div>
      <div class="upload-content">
        <div 
          class="upload-preview" 
          v-for="(img, index) in uploadedImages" 
          :key="index"
        >
          <img 
            :src="img.url" 
            @error="handleImageError($event, index)" 
            :alt="img.name || '图片'" 
          />
          <div class="upload-preview-action">
            <div class="action-buttons">
              <EyeOutlined class="action-icon" @click="previewImage(img)" title="预览" />
              <a-popconfirm title="确定删除吗？" ok-text="是" cancel-text="否" @confirm="removeImage(index)">
              <DeleteOutlined class="action-icon" title="删除" />
              </a-popconfirm>
            </div>
          </div>
        </div>
        <div class="upload-button" @click="handleCustomImageUpload" v-if="uploadedImages.length < 5">
          <div class="upload-button-text">
            <PlusOutlined />
            <div>上传图片</div>
          </div>
        </div>
      </div>
      <input 
        type="file" 
        ref="imageFileInput"
        accept=".jpg,.jpeg,.png,.gif"
        style="display: none;"
        @change="uploadSelectedImage"
      />
    </div>
    
    <!-- 查看模式下的图片显示 -->
    <div class="custom-image-view" v-if="isView && uploadedImages.length > 0">
      <div class="upload-title">图片附件</div>
      <div class="upload-content">
        <div 
          class="upload-preview" 
          v-for="(img, index) in uploadedImages" 
          :key="index"
          @click="previewImage(img)"
        >
          <img 
            :src="img.url" 
            @error="handleImageError($event, index)" 
             
          />
          <div class="view-preview-hint">
            <EyeOutlined />
            <span>点击查看</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 自定义附件上传区域 -->
    <div class="custom-file-upload" v-if="!isView">
      <div class="upload-title">附件上传</div>
      <div class="file-list">
        <!-- 附件列表 -->
        <div class="file-item" v-for="(file, index) in uploadedFiles" :key="index">
          <div class="file-info">
            <div class="file-name">{{ file.name }}</div>
          </div>
          <div class="file-actions">
            <a @click="previewFile(file)" class="action-btn">预览</a>
            <a @click="downloadFile(file)" class="action-btn">下载</a>
            <a-popconfirm title="确定删除吗？" ok-text="是" cancel-text="否" @confirm="removeFile(index)">
              <a class="action-btn delete">删除</a>
            </a-popconfirm>
          </div>
        </div>
        
        <!-- 上传按钮 -->
        <div class="file-upload-button" @click="handleCustomFileUpload">
          <div class="upload-button-text">
            <PlusOutlined />
            <div>上传附件</div>
          </div>
        </div>
      </div>
      <input 
        type="file" 
        ref="fileInput"
        multiple
        style="display: none;"
        @change="uploadSelectedFile"
      />
    </div>
    
    <!-- 查看模式下的附件显示 -->
    <div class="custom-file-view" v-if="isView && uploadedFiles.length > 0">
      <div class="upload-title">文件附件</div>
      <div class="file-list">
        <!-- 附件列表 -->
        <div class="file-item" v-for="(file, index) in uploadedFiles" :key="index">
          <div class="file-info">
            <div class="file-name">{{ file.name }}</div>
          </div>
          <div class="file-actions">
            <a @click="previewFile(file)" class="action-btn">预览</a>
            <a @click="downloadFile(file)" class="action-btn">下载</a>
          </div>
        </div>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { ref, computed, unref, onMounted } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Tinymce } from '/@/components/Tinymce';
  import { h } from 'vue';
  import { questCreate, questUpdate } from '/@/api/project/quest';
  import { PlusOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons-vue';

  const emit = defineEmits(['success', 'register']);
  const isUpdate = ref(true);
  const isView = ref(false); // 是否为查看模式
  // 修改类型，使其包含id和其他必要属性
  interface RecordType {
    id?: number;
    title?: string;
    contentText?: string;
    contentImages?: string;
    files?: string;
    [key: string]: any;
  }
  const record = ref<RecordType>({});
  const { createMessage } = useMessage();
  const uploadUrlFile=ref('http://47.104.8.35:80/api/localStorage/upload_file_oss?name=');
  const imageUploadUrl = ref('/api/localStorage/upload_oss'); // 使用相对路径避免跨域问题
  const apiBaseDomain = 'http://47.104.8.35:80'; // API基础域名
  
  // 自定义图片上传相关
  const imageFileInput = ref<HTMLInputElement | null>(null);
  const uploadedImages = ref<Array<{ 
    url: string;
    name?: string;
  }>>([]);
  const isUploading = ref(false);

  // 自定义附件上传相关
  const fileInput = ref<HTMLInputElement | null>(null);
  const uploadedFiles = ref<Array<{
    name: string;
    fileUrl: string;
    size?: number;
    type?: string;
    uploadTime?: number;
  }>>([]);
  const isFileUploading = ref(false);
  
  // 确保URL是完整路径
  function ensureFullUrl(url) {
    if (!url) return '';
    
    // 如果已经是完整URL，直接返回
    if (url.startsWith('http://') || url.startsWith('https://')) {
      return url;
    }
    
    // 处理不同的URL格式
    if (url.startsWith('//')) {
      return 'http:' + url;
    } else if (url.startsWith('/')) {
      return apiBaseDomain + url;
    } else {
      return apiBaseDomain + '/' + url;
    }
  }
  // 组件加载完成时执行
  onMounted(() => {
    console.log('QuestDrawer组件已加载，自定义文件上传和预览功能已配置');
  });
  
  // 点击上传按钮
  function handleCustomImageUpload() {
    if (isUploading.value) return;
    imageFileInput.value?.click();
  }
  
  // 点击上传按钮 - 文件
  function handleCustomFileUpload() {
    if (isFileUploading.value) return;
    fileInput.value?.click();
  }
  
  // 上传选择的文件
  async function uploadSelectedFile(e: Event) {
    const target = e.target as HTMLInputElement;
    if (!target.files || target.files.length === 0) return;
    
    isFileUploading.value = true;
    
    // 处理所有选中的文件
    const files = Array.from(target.files);
    const uploadPromises = files.map(async (file) => {
      createMessage.loading(`正在上传: ${file.name}`);
      
      try {
        const formData = new FormData();
        formData.append('file', file);
        
        const response = await fetch(uploadUrlFile.value + file.name, {
          method: 'POST',
          body: formData,
        });
        
        if (!response.ok) {
          throw new Error(`上传失败: ${response.statusText}`);
        }
        
        const data = await response.json();
        console.log('附件上传返回数据:', data);
        
        // 查找fileUrl字段
        let fileUrl = null;
        if (data.data && data.data.fileUrl) {
          fileUrl = data.data.fileUrl;
          console.log("在data.data中找到fileUrl:", fileUrl);
        } else {
          console.error("未找到fileUrl字段! 数据:", data);
        }
        
        if (!fileUrl) {
          throw new Error('无法获取文件URL');
        }
        
        // 确保URL是完整路径
        const fullUrl = ensureFullUrl(fileUrl);
        console.log('完整文件URL:', fullUrl);
        
        // 从URL中提取文件名
        const fileName = extractFileNameFromUrl(fullUrl);
        
        // 添加到上传文件列表，只存储fileUrl
        uploadedFiles.value.push({
          name: fileName,
          fileUrl: fullUrl,
        });
        
        createMessage.success(`${fileName} 上传成功`);
        return true;
      } catch (error) {
        console.error(`上传文件 ${file.name} 失败:`, error);
        createMessage.error(`${file.name} 上传失败: ${error.message || '未知错误'}`);
        return false;
      }
    });
    
    // 等待所有文件上传完成
    await Promise.all(uploadPromises);
    isFileUploading.value = false;
    
    // 清空input，以便于再次选择同一文件
    if (fileInput.value) {
      fileInput.value.value = '';
    }
  }
  
  // 从URL中提取文件名
  function extractFileNameFromUrl(url) {
    if (!url) return '未知文件';
    
    try {
      // 尝试从URL中提取文件名
      // 移除查询参数
      const urlWithoutParams = url.split('?')[0];
      console.log('移除查询参数后的URL:', urlWithoutParams);
      
      // 获取最后一个路径部分
      let fileName = urlWithoutParams.split('/').pop();
      console.log('提取的文件名:', fileName);
      
      // 如果有编码的部分，尝试解码
      if (fileName && (fileName.includes('%') || fileName.includes('+'))) {
        try {
          fileName = decodeURIComponent(fileName);
          console.log('解码后的文件名:', fileName);
        } catch (e) {
          console.error('解码文件名失败:', e);
        }
      }
      
      return fileName || '未知文件';
    } catch (error) {
      console.error('提取文件名失败:', error);
      return '未知文件';
    }
  }
  
  // 预览文件
  function previewFile(file) {
    console.log('预览文件:', file);
    if (!file.fileUrl) {
      createMessage.error('无法预览：找不到文件URL');
      return;
    }
    
    // 打开新窗口显示文件
    const win = window.open(file.fileUrl, '_blank');
    if (!win) {
      createMessage.error('浏览器阻止了弹出窗口，请允许弹出窗口或使用下载功能');
    }
  }
  
  // 下载文件
  function downloadFile(file) {
    console.log('下载文件:', file);
    if (!file.fileUrl) {
      createMessage.error('无法下载：找不到文件URL');
      return;
    }
    
    // 创建一个隐藏的a标签，触发下载
    const a = document.createElement('a');
    a.href = file.fileUrl;
    a.download = file.name;
    a.target = '_blank';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
  
  // 删除已上传的文件
  function removeFile(index: number) {
    uploadedFiles.value.splice(index, 1);
  }

  // 上传选择的图片
  async function uploadSelectedImage(e: Event) {
    const target = e.target as HTMLInputElement;
    if (!target.files || target.files.length === 0) return;
    
    const file = target.files[0];
    if (!file) return;
    
    isUploading.value = true;
    createMessage.loading('正在上传图片...');
    
    try {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('name', file.name); // 显式添加文件名
      console.log('formData',formData);
      console.log('file',file);
      console.log('name',file.name);      
      const response = await fetch(imageUploadUrl.value, {
        method: 'POST',
        body: formData,
      });
      
      if (!response.ok) {
        throw new Error(`上传失败: ${response.statusText}`);
      }
      
      const data = await response.json();
      console.log('图片上传返回数据', data);
      
      // 根据接口返回格式获取URL
      let imageUrl = '';
     
      // 检查嵌套的data对象
      if (data.data) {
        if (data.data.picUrl) {
          imageUrl = data.data.picUrl; 
        }else if (data.data.smallPicUrl) {
          imageUrl = data.data.smallPicUrl;
        }
      } 
     
      
      // 确保URL是完整路径
      if (imageUrl && !imageUrl.startsWith('http')) {
        // 如果URL包含双斜杠但不是http开头，可能是协议相对URL
        if (imageUrl.startsWith('//')) {
          imageUrl = 'http:' + imageUrl;
        } 
        // 是相对路径，需要添加域名
        else if (imageUrl.startsWith('/')) {
          // 使用服务器域名而不是前端域名
          imageUrl = 'http://47.104.8.35:80' + imageUrl;
        } else {
          // 其他情况，添加完整路径前缀
          imageUrl = 'http://47.104.8.35:80/' + imageUrl;
        }
      }
      
      console.log('处理后的图片URL:', imageUrl);
      
      // 只添加URL，不添加name
      uploadedImages.value.push({
        url: imageUrl
      });
      
      createMessage.success('图片上传成功');
    } catch (error) {
      console.error('图片上传失败:', error);
      createMessage.error(`上传失败: ${error.message || '未知错误'}`);
    } finally {
      isUploading.value = false;
      // 清空input，以便于再次选择同一文件
      if (imageFileInput.value) {
        imageFileInput.value.value = '';
      }
    }
  }
  
  // 删除已上传的图片
  function removeImage(index: number) {
    uploadedImages.value.splice(index, 1);
  }

  // 处理图片加载错误
  function handleImageError(event: Event, index: number) {
    const target = event.target as HTMLImageElement;
    console.error('图片加载失败:', uploadedImages.value[index].url);
    
    // 尝试使用不同格式的URL
    const currentUrl = uploadedImages.value[index].url;
    let newUrl = '';
    
    // 尝试各种可能的URL格式
    if (currentUrl.includes('picUrl')) {
      // 如果是大图失败，尝试使用小图
      newUrl = currentUrl.replace('picUrl', 'smallPicUrl');
    } 
    
    console.log('尝试新的URL:', newUrl);
    
    // 使用新URL
    uploadedImages.value[index].url = newUrl;
    target.src = newUrl;
    
    // 添加再次失败的处理
    target.onerror = () => {
      console.error('备选URL也加载失败:', newUrl);
      createMessage.error('图片无法加载，请重新上传');
      // 移除无法加载的图片
      removeImage(index);
    };
  }

  // 表单配置
  const getFormSchema = computed(() => {
    return [
      {
        field: 'id',
        label: 'ID',
        component: 'Input' as any,
        show: false, // 隐藏此字段
      },
      {
        field: 'title',
        label: '标题',
        component: 'Input' as any,
        required: true,
        componentProps: {
          disabled: unref(isView), // 查看模式下禁用
        },
      },
      {
        field: 'contentText',
        label: '内容',
        component: 'Input' as any,
        required: true,
        render: ({ model, field }) => {
          return h(Tinymce, {
            value: model[field],
            height: 400,
            onChange: (value: string) => {
              model[field] = value;
            },
            disabled: unref(isView), // 查看模式下禁用
            readonly: unref(isView), // 查看模式下只读
          });
        },
      },
    ] as any;
  });

  // 注册表单
  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
    labelWidth: 100,
    schemas: getFormSchema,  //这就是数据。
    showActionButtonGroup: false,
    baseColProps: { span: 24 },
  });

  // 注册抽屉
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    resetFields();
    setDrawerProps({ confirmLoading: false });
    uploadedImages.value = []; // 清空已上传图片
    uploadedFiles.value = []; // 清空已上传文件

    isUpdate.value = !!data?.isUpdate;
    isView.value = !!data?.isView; // 设置查看模式

    if (unref(isUpdate)) {
      record.value = { ...data.record };
      console.log('加载记录数据:', data.record);
      console.log('记录ID:', data.record?.id);
      
      // 确保ID字段被正确保存，即使它不在表单字段中
      if (data.record && data.record.id) {
        record.value.id = data.record.id;
        console.log('保存记录ID到record:', record.value.id);
      }
      
      await setFieldsValue({
        ...data.record,
      });
      
      // 处理图片数据 - 现在contentImages是一个URL数组
      try {
        if (data.record.contentImages) {
          console.log('原始图片数据:', data.record.contentImages);
          
          // 处理contentImages数组
          if (Array.isArray(data.record.contentImages)) {
            // 直接使用数组
            uploadedImages.value = data.record.contentImages.map(url => ({
              url: ensureFullUrl(url)
            }));
            console.log('数组格式的图片URL:', uploadedImages.value);
          } 
          // 向下兼容旧格式，如果是字符串，尝试解析
          else if (typeof data.record.contentImages === 'string') {
            try {
              // 尝试解析为JSON
              const images = JSON.parse(data.record.contentImages);
              if (Array.isArray(images)) {
                // 如果解析成功并且是数组，处理每个图片对象
                uploadedImages.value = images.map(img => ({
                  url: ensureFullUrl(typeof img === 'string' ? img : (img.url || ''))
                }));
              } else {
                // 如果不是数组，可能是以逗号分隔的字符串
                const urls = data.record.contentImages.split(',').filter(url => url.trim());
                uploadedImages.value = urls.map(url => ({
                  url: ensureFullUrl(url.trim())
                }));
              }
            } catch (e) {
              // 解析失败，尝试作为逗号分隔的URL列表处理
              const urls = data.record.contentImages.split(',').filter(url => url.trim());
              uploadedImages.value = urls.map(url => ({
                url: ensureFullUrl(url.trim())
              }));
            }
          }
          
          console.log('处理后的图片数据:', uploadedImages.value);
        }
        
        // 处理附件数据 - 现在files是一个URL数组
        if (data.record.files) {
          console.log('原始文件数据:', data.record.files);
          
          // 处理files数组
          if (Array.isArray(data.record.files)) {
            // 直接使用数组
            uploadedFiles.value = data.record.files.map(url => {
              const fileUrl = ensureFullUrl(url);
              return {
                name: extractFileNameFromUrl(fileUrl),
                fileUrl: fileUrl
              };
            });
            console.log('数组格式的文件URL:', uploadedFiles.value);
          }
          // 向下兼容旧格式，如果是字符串，尝试解析
          else if (typeof data.record.files === 'string') {
            // 处理可能的额外引号
            let filesStr = data.record.files;
            if (filesStr.startsWith('"') && filesStr.endsWith('"')) {
              filesStr = filesStr.substring(1, filesStr.length - 1);
            }
            
            try {
              // 尝试解析为JSON
              const files = JSON.parse(filesStr);
              if (Array.isArray(files)) {
                uploadedFiles.value = files.map(file => {
                  if (typeof file === 'string') {
                    // 如果文件项是字符串，当作URL处理
                    const fileUrl = ensureFullUrl(file);
                    return {
                      name: extractFileNameFromUrl(fileUrl),
                      fileUrl: fileUrl
                    };
                  } else {
                    // 如果文件项是对象，提取fileUrl
                    const fileUrl = ensureFullUrl(file.fileUrl || '');
                    return {
                      name: file.name || extractFileNameFromUrl(fileUrl),
                      fileUrl: fileUrl
                    };
                  }
                });
              } else {
                // 如果不是数组，可能是以逗号分隔的字符串
                const urls = filesStr.split(',').filter(url => url.trim());
                uploadedFiles.value = urls.map(url => {
                  const fileUrl = ensureFullUrl(url.trim());
                  return {
                    name: extractFileNameFromUrl(fileUrl),
                    fileUrl: fileUrl
                  };
                });
              }
            } catch (e) {
              // 解析失败，尝试作为逗号分隔的URL列表处理
              const urls = filesStr.split(',').filter(url => url.trim());
              uploadedFiles.value = urls.map(url => {
                const fileUrl = ensureFullUrl(url.trim());
                return {
                  name: extractFileNameFromUrl(fileUrl),
                  fileUrl: fileUrl
                };
              });
            }
          }
          
          console.log('处理后的文件数据:', uploadedFiles.value);
        }
      } catch (error) {
        console.error('处理附件和图片数据时出错:', error);
      }
    }
  });

  // 计算抽屉标题
  const getTitle = computed(() => {
    if (unref(isView)) {
      return '查看问题';
    }
    return !unref(isUpdate) ? '新建问题' : '编辑问题';
  });

  // 提交表单
  async function handleSubmit() {
    // 查看模式下不允许提交
    if (unref(isView)) return;
    
    try {
      const values = await validate();
      console.log('values的值',values);
      setDrawerProps({ confirmLoading: true });
      
      // 添加上传的图片到表单数据中 - 直接提交URL数组
      if (uploadedImages.value.length > 0) {
        // 直接将URL数组作为contentImages
        values.contentImages = uploadedImages.value.map(img => img.url);
        console.log('图片数据(数组格式):', values.contentImages);
      }
      
      // 添加上传的附件到表单数据中 - 直接提交URL数组
      if (uploadedFiles.value.length > 0) {
        // 直接将fileUrl数组作为files
        values.files = uploadedFiles.value.map(file => file.fileUrl);
        console.log('附件数据(数组格式):', values.files);
      }
      
      // 如果是更新模式，确保添加ID
      const isUpdateValue = unref(isUpdate);
      if (isUpdateValue) {
        // 从record中获取ID
        if (record.value && record.value.id) {
          values.id = record.value.id;
          console.log('从record中添加记录ID:', values.id);
        } else {
          console.warn('警告：更新模式下未找到记录ID！');
        }
      }
      
      // 确保表单提交前检查ID
      if (isUpdateValue && !values.id) {
        console.error('错误：更新模式下缺少ID字段！');
        createMessage.error('更新失败：缺少记录ID');
        setDrawerProps({ confirmLoading: false });
        return;
      }
      
      // 提交数据
      console.log('表单数据', values);
      
      // 调用后端API保存数据
      const requestApi = isUpdateValue 
        ? questUpdate // 更新接口
        : questCreate;                   // 创建接口
      console.log('requestApi调用',requestApi);
      const res=await requestApi(values);
      console.log('res返回数据',res);
     // 关闭抽屉
      closeDrawer();
      // 通知父组件刷新数据
      emit('success');
      setDrawerProps({ confirmLoading: false });
    } catch (error) {
      console.error('API请求失败：', error);
      createMessage.error(`保存失败: ${error.message || '未知错误'}`);
    }
  }

  // 预览图片
  function previewImage(image) {
    console.log('预览图片:', image);
    if (!image.url) {
      createMessage.error('无法预览：找不到图片URL');
      return;
    }
    
    // 创建一个新窗口安全地显示图片
    const win = window.open('', '_blank');
    if (!win) {
      createMessage.error('浏览器阻止了弹出窗口，请允许弹出窗口');
      return;
    }
    
    // 写入HTML内容
    win.document.write(`<!DOCTYPE html>
    <html>
      <head>
        <title>图片预览</title>
        <style>
          body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
          }
          img {
            max-width: 90%;
            max-height: 90vh;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
          }
          .img-container {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          }
        </style>
      </head>
      <body>
        <div class="img-container">
          <img src="${image.url}" alt="${image.name || '图片'}" />
        </div>
      </body>
    </html>`);
    win.document.close();
  }
</script>

<style lang="less" scoped>
.custom-image-upload {
  margin-top: 20px;
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  
  .upload-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .upload-content {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .upload-preview {
    width: 104px;
    height: 104px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .upload-preview-action {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      opacity: 0;
      transition: opacity 0.3s;
      
      &:hover {
        opacity: 1;
      }

      .action-buttons {
        display: flex;
        gap: 15px;
        
        .action-icon {
          font-size: 18px;
          cursor: pointer;
          
          &:hover {
            color: #1890ff;
            transform: scale(1.2);
            transition: all 0.2s;
          }
        }
      }
    }
  }
.ant-message-notice .ant-message-loading {
  color: red !important;
}
  .upload-button {
    width: 104px;
    height: 104px;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.3s;
    
    &:hover {
      border-color: #1890ff;
    }
    
    .upload-button-text {
      text-align: center;
      color: #666;
      
      .anticon {
        font-size: 24px;
        margin-bottom: 8px;
      }
    }
  }
}

/* 自定义文件上传样式 */
.custom-file-upload {
  margin-top: 20px;
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  
  .upload-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .file-list {
    width: 100%;
  }
  
  .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background-color: #fafafa;
    
    &:hover {
      background-color: #f0f0f0;
    }
    
    .file-info {
      flex: 1;
      
      .file-name {
        font-weight: 500;
        margin-bottom: 4px;
        word-break: break-all;
      }
      
      .file-size {
        color: #8c8c8c;
        font-size: 12px;
      }
    }
    
    .file-actions {
      display: flex;
      gap: 12px;
      
      .action-btn {
        color: #1890ff;
        cursor: pointer;
        
        &:hover {
          color: #40a9ff;
          text-decoration: underline;
        }
        
        &.delete {
          color: #ff4d4f;
          
          &:hover {
            color: #ff7875;
          }
        }
      }
    }
  }
  .file-upload-button {
    width: 100%;
    height: 80px;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.3s;
    margin-top: 16px;
    
    &:hover {
      border-color: #1890ff;
      background-color: #f6f6f6;
    }
    
    .upload-button-text {
      text-align: center;
      color: #666;
      
      .anticon {
        font-size: 24px;
        margin-bottom: 8px;
      }
    }
  }
}

/* 查看模式下的图片显示样式 */
.custom-image-view {
  margin-top: 20px;
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  
  .upload-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .upload-content {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .upload-preview {
    width: 104px;
    height: 104px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .view-preview-hint {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      opacity: 0;
      transition: opacity 0.3s;
      
      &:hover {
        opacity: 1;
      }

      .anticon {
        font-size: 18px;
        margin-right: 8px;
      }
    }
  }
}

/* 查看模式下的附件显示样式 */
.custom-file-view {
  margin-top: 20px;
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  
  .upload-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .file-list {
    width: 100%;
  }
  
  .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background-color: #fafafa;
    
    &:hover {
      background-color: #f0f0f0;
    }
    
    .file-info {
      flex: 1;
      
      .file-name {
        font-weight: 500;
        margin-bottom: 4px;
        word-break: break-all;
      }
      
      .file-size {
        color: #8c8c8c;
        font-size: 12px;
      }
    }
    
    .file-actions {
      display: flex;
      gap: 12px;
      
      .action-btn {
        color: #1890ff;
        cursor: pointer;
        
        &:hover {
          color: #40a9ff;
          text-decoration: underline;
        }
      }
    }
  }
}
</style>