feat(licenseManagement): 优化合同更换图片上传功能

- 新增图片上传队列控制与逐个上传逻辑
- 支持图片格式限制（仅允许JPG/PNG）
- 添加上传状态管理（待上传、上传中、成功、失败）
- 实现图片预览功能（使用el-image-viewer）
- 增加上传进度与状态提示
- 完善图片删除前确认与删除后资源清理
- 更新图片状态显示样式与类名映射
- 修复上传按钮状态联动与提交校验逻辑
- 优化上传区域滚动条样式与布局
- 调整图片展示组件与错误占位处理

src/views/licenseManagement/contractManagement.vue

@@ -42,34 +42,51 @@
 
     <!-- 更换合同弹窗 -->
     <el-dialog v-model="replaceDialogVisible" title="更换合同" width="800px" @close="handleReplaceDialogClose">
-      <div class="replace-upload-area">
-        <el-upload
-          ref="uploadRef"
-          v-model:file-list="fileList"
-          action="#"
-          list-type="picture-card"
-          :multiple="true"
-          :limit="20"
-          :http-request="handleHttpUpload"
-          :before-upload="beforeUpload"
-          :on-exceed="handleExceed"
-          :on-remove="handleRemove"
-          :on-success="handleUploadSuccess"
-        >
-          <el-icon><Plus /></el-icon>
-          <template #tip>
-            <div class="upload-tip">({{ fileList.length }}/20)</div>
-          </template>
-        </el-upload>
-      </div>
+      <el-scrollbar height="400px" class="replace-upload-scrollbar">
+        <div class="replace-upload-area">
+          <el-upload
+            ref="uploadRef"
+            v-model:file-list="fileList"
+            list-type="picture-card"
+            :accept="'.jpg,.png'"
+            :limit="uploadMaxCount"
+            :auto-upload="false"
+            :disabled="hasUnuploadedImages"
+            multiple
+            :on-change="handleUploadChange"
+            :on-exceed="handleUploadExceed"
+            :on-preview="handlePictureCardPreview"
+            :before-remove="handleBeforeRemove"
+            :on-remove="handleRemove"
+            :show-file-list="true"
+          >
+            <template #trigger>
+              <div v-if="uploadedImageCount < uploadMaxCount" class="upload-trigger-card el-upload--picture-card">
+                <el-icon>
+                  <Plus />
+                </el-icon>
+                <div class="upload-tip">({{ uploadedImageCount }}/{{ uploadMaxCount }})</div>
+              </div>
+            </template>
+          </el-upload>
+        </div>
+      </el-scrollbar>
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="handleCancelReplace"> 取消 </el-button>
-          <el-button type="primary" @click="handleSubmitReplace"> 去审核 </el-button>
+          <el-button type="primary" @click="handleSubmitReplace" :disabled="hasUnuploadedImages"> 去审核 </el-button>
         </div>
       </template>
     </el-dialog>
 
+    <!-- 图片预览 -->
+    <el-image-viewer
+      v-if="imageViewerVisible"
+      :url-list="imageViewerUrlList"
+      :initial-index="imageViewerInitialIndex"
+      @close="imageViewerVisible = false"
+    />
+
     <!-- 取消确认弹窗 -->
     <el-dialog v-model="cancelConfirmVisible" title="提示" width="400px" :close-on-click-modal="false">
       <div class="confirm-text">确定要取消本次图片上传吗?已上传的图片将不保存</div>
@@ -88,10 +105,23 @@
           {{ currentRecordDate }}
         </div>
         <div class="record-items">
-          <div v-for="(item, index) in changeRecordList" :key="index" class="record-item" :class="getStatusClass(item.status)">
-            <div class="record-status-text">
-              {{ getStatusText(item.status) }}
+          <div v-for="(item, index) in changeRecordList" :key="index" class="record-item">
+            <div class="record-status-badge" :class="getStatusClass(item.status)">
+              {{ getStatusName(item.status) }}
             </div>
+            <el-image
+              :src="item.imgUrl"
+              fit="cover"
+              class="record-image"
+              :preview-src-list="changeRecordList.map(record => record.imgUrl)"
+              :initial-index="index"
+            >
+              <template #error>
+                <div class="image-slot">
+                  <el-icon><Picture /></el-icon>
+                </div>
+              </template>
+            </el-image>
           </div>
         </div>
         <div v-if="rejectionReason" class="rejection-reason">拒绝原因: {{ rejectionReason }}</div>
@@ -106,11 +136,10 @@
 </template>
 
 <script setup lang="ts" name="contractManagement">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed, nextTick } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Plus, Picture } from "@element-plus/icons-vue";
-import { uploadImg } from "@/api/modules/upload";
-import type { UploadProps, UploadFile, UploadRequestOptions } from "element-plus";
+import type { UploadProps, UploadFile, UploadInstance } from "element-plus";
 import { localGet } from "@/utils";
 import { getContractImages } from "@/api/modules/licenseManagement";
 
@@ -122,22 +151,71 @@ interface ContractItem {
 
 interface ChangeRecordItem {
   id: string;
-  status: "pending" | "success" | "failed";
+  status: number; // 状态：0-审核中，1-审核通过，2-审核拒绝
+  imgUrl: string; // 图片URL
   rejectionReason?: string;
 }
 
+// 状态映射对象
+const statusMap: Record<number, { name: string; class: string }> = {
+  0: { name: "审核中", class: "status-pending" },
+  1: { name: "审核通过", class: "status-success" },
+  2: { name: "审核拒绝", class: "status-failed" }
+};
+
 const contractList = ref<any>([]);
 const replaceDialogVisible = ref(false);
 const cancelConfirmVisible = ref(false);
 const changeRecordDialogVisible = ref(false);
 const fileList = ref<UploadFile[]>([]);
-const uploadRef = ref();
+const uploadRef = ref<UploadInstance>();
 const currentRecordDate = ref("2025.08.01 10:29");
 const changeRecordList = ref<ChangeRecordItem[]>([]);
 const rejectionReason = ref("");
 
 const id = localGet("createdId");
 
+// ==================== 图片上传相关变量 ====================
+// 文件上传地址
+const uploadUrl = ref(`${import.meta.env.VITE_API_URL_STORE}/file/uploadImg`);
+const imgType = ref(16);
+const uploadMaxCount = 20;
+const uploading = ref(false);
+const pendingUploadFiles = ref<UploadFile[]>([]);
+const imageUrlList = ref<string[]>([]); // 存储图片URL列表
+const generateImgSort = (() => {
+  let seed = Date.now();
+  return () => {
+    seed += 1;
+    return seed;
+  };
+})();
+
+// 图片预览相关
+const imageViewerVisible = ref(false);
+const imageViewerUrlList = ref<string[]>([]);
+const imageViewerInitialIndex = ref(0);
+
+// 计算属性：获取已成功上传的图片数量
+const uploadedImageCount = computed(() => {
+  return fileList.value.filter((file: any) => file.status === "success" && file.url).length;
+});
+
+// 计算属性：检查是否有未上传完成的图片
+const hasUnuploadedImages = computed(() => {
+  // 检查是否有正在上传的文件
+  if (uploading.value || pendingUploadFiles.value.length > 0) {
+    return true;
+  }
+  // 检查文件列表中是否有状态为 "ready"（待上传）或 "uploading"（上传中）的图片
+  if (fileList.value && fileList.value.length > 0) {
+    return fileList.value.some((file: any) => {
+      return file.status === "ready" || file.status === "uploading";
+    });
+  }
+  return false;
+});
+
 onMounted(async () => {
   await initData();
 });
@@ -146,7 +224,7 @@ const initData = async () => {
   const params = {
     id: id
   };
-  const res = await getContractImages(params);
+  const res: any = await getContractImages(params);
   if (res.code === 200) {
     contractList.value = res.data;
   }
@@ -154,6 +232,9 @@ const initData = async () => {
 
 const handleReplace = () => {
   fileList.value = [];
+  imageUrlList.value = [];
+  pendingUploadFiles.value = [];
+  uploading.value = false;
   replaceDialogVisible.value = true;
 };
 
@@ -166,13 +247,13 @@ const handleViewChangeRecord = async () => {
     //   currentRecordDate.value = response.data.date;
     //   rejectionReason.value = response.data.rejectionReason || "";
     // }
-    // 模拟数据
+    // 模拟数据（假数据）
     changeRecordList.value = [
-      { id: "1", status: "pending" },
-      { id: "2", status: "pending" },
-      { id: "3", status: "pending" },
-      { id: "4", status: "pending" },
-      { id: "5", status: "pending" }
+      { id: "1", status: 0, imgUrl: "https://picsum.photos/150/150?random=1" },
+      { id: "2", status: 1, imgUrl: "https://picsum.photos/150/150?random=2" },
+      { id: "3", status: 0, imgUrl: "https://picsum.photos/150/150?random=3" },
+      { id: "4", status: 2, imgUrl: "https://picsum.photos/150/150?random=4" },
+      { id: "5", status: 1, imgUrl: "https://picsum.photos/150/150?random=5" }
     ];
     rejectionReason.value = "";
     changeRecordDialogVisible.value = true;
@@ -181,47 +262,281 @@ const handleViewChangeRecord = async () => {
   }
 };
 
-const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
-  const imgSize = rawFile.size / 1024 / 1024 < 10;
-  const imgType = ["image/jpeg", "image/png", "image/gif"].includes(rawFile.type);
-  if (!imgType) {
-    ElMessage.warning("上传图片不符合所需的格式！");
+/**
+ * 检查文件是否在排队中（未上传）
+ * @param file 文件对象
+ * @returns 是否在排队中
+ */
+const isFilePending = (file: any): boolean => {
+  // 只检查 ready 状态（排队中），不包括 uploading（正在上传）
+  if (file.status === "ready") {
+    return true;
+  }
+  // 检查是否在待上传队列中
+  if (pendingUploadFiles.value.some(item => item.uid === file.uid)) {
+    return true;
+  }
+  return false;
+};
+
+/**
+ * 图片上传 - 删除前确认
+ * @param uploadFile 要删除的文件对象
+ * @param uploadFiles 当前文件列表
+ * @returns Promise<boolean>，true 允许删除，false 阻止删除
+ */
+const handleBeforeRemove = async (uploadFile: any, uploadFiles: any[]): Promise<boolean> => {
+  // 如果文件在排队中（未上传），禁止删除
+  if (isFilePending(uploadFile)) {
+    ElMessage.warning("图片尚未上传，请等待上传完成后再删除");
     return false;
   }
-  if (!imgSize) {
-    ElMessage.warning("上传图片大小不能超过 10M！");
+  try {
+    await ElMessageBox.confirm("确定要删除这张图片吗？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning"
+    });
+    // 用户确认删除，返回 true 允许删除
+    return true;
+  } catch {
+    // 用户取消删除，返回 false 阻止删除
     return false;
   }
-  return true;
 };
 
-const handleHttpUpload = async (options: UploadRequestOptions) => {
-  const formData = new FormData();
-  formData.append("file", options.file);
-  try {
-    const { data } = await uploadImg(formData);
-    const fileUrl = data.fileUrl ? data.fileUrl : data[0];
-    options.onSuccess({ fileUrl }, options.file as any);
-  } catch (error) {
-    options.onError(error as any);
+/**
+ * 图片上传 - 移除图片回调（删除成功后调用）
+ * @param uploadFile 已删除的文件对象
+ * @param uploadFiles 删除后的文件列表
+ */
+const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
+  // 从被删除的文件对象中获取 url
+  const file = uploadFile as any;
+  const imageUrl = file.url;
+
+  if (imageUrl) {
+    // 从 imageUrl 数组中删除对应的 URL
+    const urlIndex = imageUrlList.value.indexOf(imageUrl);
+    if (urlIndex > -1) {
+      imageUrlList.value.splice(urlIndex, 1);
+    }
+  }
+
+  if (file.url && file.url.startsWith("blob:")) {
+    URL.revokeObjectURL(file.url);
   }
+  // 同步文件列表
+  fileList.value = [...uploadFiles];
+  // 删除成功后提示
+  ElMessage.success("图片已删除");
 };
 
-const handleExceed = () => {
-  ElMessage.warning("最多只能上传 20 张图片");
+/**
+ * 上传文件超出限制提示
+ */
+const handleUploadExceed: UploadProps["onExceed"] = () => {
+  ElMessage.warning(`最多只能上传${uploadMaxCount}张图片`);
+};
+
+/**
+ * el-upload 文件变更（选中或移除）
+ */
+const handleUploadChange: UploadProps["onChange"] = async (uploadFile, uploadFiles) => {
+  // 检查文件类型，只允许 jpg 和 png
+  if (uploadFile.raw) {
+    const fileType = uploadFile.raw.type.toLowerCase();
+    const fileName = uploadFile.name.toLowerCase();
+    const validTypes = ["image/jpeg", "image/jpg", "image/png"];
+    const validExtensions = [".jpg", ".jpeg", ".png"];
+
+    // 检查 MIME 类型或文件扩展名
+    const isValidType = validTypes.includes(fileType) || validExtensions.some(ext => fileName.endsWith(ext));
+
+    if (!isValidType) {
+      // 从文件列表中移除不符合类型的文件
+      const index = fileList.value.findIndex((f: any) => f.uid === uploadFile.uid);
+      if (index > -1) {
+        fileList.value.splice(index, 1);
+      }
+      // 从 uploadFiles 中移除
+      const uploadIndex = uploadFiles.findIndex((f: any) => f.uid === uploadFile.uid);
+      if (uploadIndex > -1) {
+        uploadFiles.splice(uploadIndex, 1);
+      }
+      // 如果文件有 blob URL，释放它
+      if (uploadFile.url && uploadFile.url.startsWith("blob:")) {
+        URL.revokeObjectURL(uploadFile.url);
+      }
+      ElMessage.warning("只支持上传 JPG 和 PNG 格式的图片");
+      return;
+    }
+  }
+
+  // 同步文件列表到表单数据（只添加通过验证的文件）
+  const existingIndex = fileList.value.findIndex((f: any) => f.uid === uploadFile.uid);
+  if (existingIndex === -1) {
+    fileList.value.push(uploadFile);
+  }
+
+  const readyFiles = fileList.value.filter(file => file.status === "ready");
+  if (readyFiles.length) {
+    readyFiles.forEach(file => {
+      if (!pendingUploadFiles.value.some(item => item.uid === file.uid)) {
+        pendingUploadFiles.value.push(file);
+      }
+    });
+  }
+  processUploadQueue();
+};
+
+/**
+ * 处理上传队列 - 逐个上传文件
+ */
+const processUploadQueue = async () => {
+  if (uploading.value || pendingUploadFiles.value.length === 0) {
+    return;
+  }
+  // 每次只取一个文件进行上传
+  const file = pendingUploadFiles.value.shift();
+  if (file) {
+    await uploadSingleFile(file);
+    // 继续处理队列中的下一个文件
+    processUploadQueue();
+  }
 };
 
-const handleRemove = (file: UploadFile) => {
-  const index = fileList.value.findIndex(item => item.uid === file.uid);
-  if (index > -1) {
-    fileList.value.splice(index, 1);
+/**
+ * 单文件上传图片
+ * @param file 待上传的文件
+ */
+const uploadSingleFile = async (file: UploadFile) => {
+  if (!file.raw) {
+    return;
+  }
+
+  const formData = new FormData();
+  const storeId = Number(localGet("createdId"));
+  const rawFile = file.raw as File;
+  const sortValue = generateImgSort();
+
+  formData.append("file", rawFile);
+  formData.append(
+    "list",
+    JSON.stringify([
+      {
+        storeId,
+        imgType: imgType.value,
+        imgSort: sortValue
+      }
+    ])
+  );
+
+  file.status = "uploading";
+  file.percentage = 0;
+  uploading.value = true;
+
+  try {
+    const response = await fetch(uploadUrl.value, {
+      method: "POST",
+      body: formData,
+      credentials: "include"
+    });
+    if (!response.ok) {
+      throw new Error("上传失败");
+    }
+    const result = await response.json();
+
+    if (result?.code === 200 && result.data) {
+      // 处理单个文件的上传结果
+      // 尝试从返回结果中获取图片URL
+      // 可能的结构：result.data 是对象包含 url，或者 result.url，或者 result.data 是 URL 字符串
+      let imageUrl = "";
+      if (typeof result.data === "object" && !Array.isArray(result.data)) {
+        // 如果返回的是对象，尝试获取 url 字段
+        imageUrl = result.data.url || result.data.fileUrl || "";
+      } else if (typeof result.data === "string") {
+        // 如果返回的是字符串，可能是 URL
+        imageUrl = result.data;
+      } else if (Array.isArray(result.data) && result.data.length > 0) {
+        // 如果返回的是数组，取第一个元素
+        imageUrl = typeof result.data[0] === "string" ? result.data[0] : result.data[0]?.url || result.data[0]?.fileUrl || "";
+      } else if (result.url) {
+        // 如果返回结果中有 url 字段
+        imageUrl = result.url;
+      } else if (result.fileUrl) {
+        // 如果返回结果中有 fileUrl 字段
+        imageUrl = result.fileUrl;
+      }
+
+      if (!imageUrl) {
+        throw new Error("上传成功但未获取到图片URL");
+      }
+
+      file.status = "success";
+      file.percentage = 100;
+      // 保存图片URL到文件对象
+      file.url = imageUrl;
+      file.response = { url: imageUrl };
+
+      // 保存图片URL
+      if (!Array.isArray(imageUrlList.value)) {
+        imageUrlList.value = [];
+      }
+      if (!imageUrlList.value.includes(imageUrl)) {
+        imageUrlList.value.push(imageUrl);
+      }
+    } else {
+      throw new Error(result?.msg || "图片上传失败");
+    }
+  } catch (error: any) {
+    file.status = "fail";
+    if (file.url && file.url.startsWith("blob:")) {
+      URL.revokeObjectURL(file.url);
+    }
+    // 从文件列表中移除失败的文件
+    const index = fileList.value.findIndex((f: any) => f.uid === file.uid);
+    if (index > -1) {
+      fileList.value.splice(index, 1);
+    }
+    ElMessage.error(error?.message || "图片上传失败");
+  } finally {
+    uploading.value = false;
+    // 触发视图更新
+    fileList.value = [...fileList.value];
   }
 };
 
-const handleUploadSuccess = (response: any, uploadFile: UploadFile) => {
-  if (response && response.fileUrl) {
-    uploadFile.url = response.fileUrl;
+/**
+ * 图片预览 - 使用 el-image-viewer 预览功能
+ * @param file 上传文件对象
+ */
+const handlePictureCardPreview = (file: any) => {
+  // 如果文件在排队中（未上传），禁止预览
+  if (isFilePending(file)) {
+    ElMessage.warning("图片尚未上传，请等待上传完成后再预览");
+    return;
   }
+  // 如果文件正在上传中，允许预览（使用本地预览）
+  if (file.status === "uploading" && file.url) {
+    imageViewerUrlList.value = [file.url];
+    imageViewerInitialIndex.value = 0;
+    imageViewerVisible.value = true;
+    return;
+  }
+  // 获取所有图片的 URL 列表（只包含已上传成功的图片）
+  const urlList = fileList.value
+    .filter((item: any) => item.status === "success" && (item.url || item.response?.data))
+    .map((item: any) => item.url || item.response?.data);
+  // 找到当前点击的图片索引
+  const currentIndex = urlList.findIndex((url: string) => url === (file.url || file.response?.data));
+  if (currentIndex < 0) {
+    ElMessage.warning("图片尚未上传完成，无法预览");
+    return;
+  }
+  imageViewerUrlList.value = urlList;
+  imageViewerInitialIndex.value = currentIndex;
+  imageViewerVisible.value = true;
 };
 
 const handleCancelReplace = () => {
@@ -234,6 +549,9 @@ const handleCancelReplace = () => {
 
 const handleConfirmCancel = () => {
   fileList.value = [];
+  imageUrlList.value = [];
+  pendingUploadFiles.value = [];
+  uploading.value = false;
   cancelConfirmVisible.value = false;
   replaceDialogVisible.value = false;
 };
@@ -245,43 +563,44 @@ const handleReplaceDialogClose = () => {
 };
 
 const handleSubmitReplace = async () => {
+  // 检查是否有未上传完成的图片
+  if (hasUnuploadedImages.value) {
+    ElMessage.warning("请等待图片上传完成后再提交");
+    return;
+  }
   if (fileList.value.length === 0) {
     ElMessage.warning("请至少上传一张图片");
     return;
   }
-  const uploadedFiles = fileList.value.filter(file => file.url);
+  const uploadedFiles = fileList.value.filter(file => file.status === "success");
   if (uploadedFiles.length === 0) {
     ElMessage.warning("请先上传图片");
     return;
   }
   try {
     // TODO: 调用API提交审核
-    // const urls = uploadedFiles.map(file => file.url);
-    // await submitContractReview(urls);
+    // const imageUrls = imageUrlList.value;
+    // await submitContractReview(imageUrls);
     ElMessage.success("提交审核成功");
     replaceDialogVisible.value = false;
     fileList.value = [];
+    imageUrlList.value = [];
+    pendingUploadFiles.value = [];
+    uploading.value = false;
     await initData();
   } catch (error) {
     ElMessage.error("提交审核失败");
   }
 };
 
-const getStatusClass = (status: string) => {
-  return {
-    "status-pending": status === "pending",
-    "status-success": status === "success",
-    "status-failed": status === "failed"
-  };
+const getStatusClass = (status: number) => {
+  const statusInfo = statusMap[status];
+  return statusInfo ? statusInfo.class : "";
 };
 
-const getStatusText = (status: string) => {
-  const map: Record<string, string> = {
-    pending: "审核中",
-    success: "审核通过",
-    failed: "审核拒绝"
-  };
-  return map[status] || "未知";
+const getStatusName = (status: number) => {
+  const statusInfo = statusMap[status];
+  return statusInfo ? statusInfo.name : "未知";
 };
 </script>
 
@@ -353,14 +672,65 @@ const getStatusText = (status: string) => {
     }
   }
 }
+.replace-upload-scrollbar {
+  :deep(.el-scrollbar__wrap) {
+    overflow-x: hidden;
+  }
+}
 .replace-upload-area {
   min-height: 300px;
-  padding: 20px 0;
+  padding: 20px;
+}
+.dialog-footer {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+
+/* el-upload 图片预览铺满容器 */
+:deep(.el-upload-list--picture-card) {
+  .el-upload-list__item {
+    overflow: hidden;
+    .el-upload-list__item-thumbnail {
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+    }
+  }
+
+  /* 排队中（未上传）的图片禁用样式 */
+  .el-upload-list__item[data-status="ready"],
+  .el-upload-list__item.is-ready {
+    position: relative;
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.6;
+    &::after {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      content: "";
+      background-color: rgb(0 0 0 / 30%);
+    }
+    .el-upload-list__item-actions {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+  }
+}
+.upload-trigger-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 28px;
+  color: #8c939d;
   .upload-tip {
-    margin-top: 10px;
+    margin-top: 8px;
     font-size: 14px;
-    color: var(--el-text-color-secondary);
-    text-align: center;
+    color: #8c939d;
   }
 }
 .confirm-text {
@@ -384,31 +754,51 @@ const getStatusText = (status: string) => {
     margin-bottom: 20px;
   }
   .record-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    position: relative;
     width: 150px;
-    height: 100px;
-    border: 1px solid var(--el-border-color-light);
+    height: 150px;
+    overflow: hidden;
     border-radius: 8px;
-    .record-status-text {
-      font-size: 14px;
+    .record-status-badge {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      padding: 4px 8px;
+      font-size: 12px;
       font-weight: 500;
+      text-align: center;
+      border-radius: 0 0 8px 8px;
+      &.status-pending {
+        color: #e6a23c;
+        background-color: rgb(253 246 236 / 95%);
+        border-top: 1px solid #e6a23c;
+      }
+      &.status-success {
+        color: #67c23a;
+        background-color: rgb(240 249 255 / 95%);
+        border-top: 1px solid #67c23a;
+      }
+      &.status-failed {
+        color: #f56c6c;
+        background-color: rgb(254 240 240 / 95%);
+        border-top: 1px solid #f56c6c;
+      }
     }
-    &.status-pending {
-      color: #e6a23c;
-      background-color: #fdf6ec;
-      border-color: #e6a23c;
-    }
-    &.status-success {
-      color: #67c23a;
-      background-color: #f0f9ff;
-      border-color: #67c23a;
-    }
-    &.status-failed {
-      color: #f56c6c;
-      background-color: #fef0f0;
-      border-color: #f56c6c;
+    .record-image {
+      width: 100%;
+      height: 100%;
+      .image-slot {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        font-size: 30px;
+        color: var(--el-text-color-placeholder);
+        background: var(--el-fill-color-light);
+      }
     }
   }
   .rejection-reason {