From 2d9a83d68e831fe95b2ec97bdb382595b2ebaf34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wei=5F=E4=BD=B3?= <weijia.svip@gmail.com>
Date: Mon, 17 Nov 2025 14:53:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=AE=80=E5=8C=96=E8=AF=81?=
 =?UTF-8?q?=E4=B9=A6=E5=BC=B9=E7=AA=97=E7=BB=84=E4=BB=B6=EF=BC=8C=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E4=B8=8A=E4=BC=A0=E5=92=8C=E6=9F=A5=E7=9C=8B=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E7=9A=84UI=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除查看模式的独立模板代码，统一使用上传模式的UI结构
- 优化报告区域布局，将下载按钮移至标题旁边
- 在查看模式下禁用上传组件，保持界面一致性
- 删除冗余的查看模式样式代码（certificate-display、certificate-item等）
- 简化组件结构，减少代码重复，提升可维护性
---
 .../audit/components/CertificateModal.vue     | 170 ++----------------
 1 file changed, 18 insertions(+), 152 deletions(-)

diff --git a/web/src/views/valuation/audit/components/CertificateModal.vue b/web/src/views/valuation/audit/components/CertificateModal.vue
index 6fddf18..668b6c9 100644
--- a/web/src/views/valuation/audit/components/CertificateModal.vue
+++ b/web/src/views/valuation/audit/components/CertificateModal.vue
@@ -188,18 +188,17 @@ const isUploadMode = computed(() => props.mode === 'upload')
     style="width: 700px"
     @update:show="handleClose"
   >
-    <!-- 上传模式 -->
-    <div v-if="isUploadMode" class="certificate-content">
+    <!-- 上传/查看模式 -->
+    <div class="certificate-content">
       <!-- 报告上传部分 -->
       <div class="upload-section">
-        <div class="section-title">报告:</div>
+        <div class="section-header">
+          <div class="section-title">报告:</div>
+          <NButton text type="primary" @click="handleDownloadReport">
+            点击下载原版报告
+          </NButton>
+        </div>
         <div class="upload-content">
-          <div class="download-section">
-            <NButton text type="primary" @click="handleDownloadReport">
-              点击下载原版报告
-            </NButton>
-          </div>
-
           <NUpload
             v-model:file-list="reportFileList"
             :max="5"
@@ -208,6 +207,7 @@ const isUploadMode = computed(() => props.mode === 'upload')
             @change="handleReportUploadChange"
             @remove="handleRemove"
             :custom-request="customRequest"
+            :disabled="!isUploadMode"
             show-preview-button
             show-download-button
             @download="handleDownload"
@@ -228,6 +228,7 @@ const isUploadMode = computed(() => props.mode === 'upload')
             @change="handleCertificateUploadChange"
             @remove="handleRemove"
             :custom-request="customRequest"
+            :disabled="!isUploadMode"
             show-preview-button
             show-download-button
             @download="handleDownload"
@@ -237,90 +238,6 @@ const isUploadMode = computed(() => props.mode === 'upload')
       </div>
     </div>
 
-    <!-- 查看模式 -->
-    <div v-else class="certificate-content">
-      <!-- 报告查看部分 -->
-      <div class="view-section">
-        <div class="section-title">报告:</div>
-        <div class="view-content">
-          <div class="download-area">
-            <NButton text type="primary" @click="handleDownloadReport">
-              <!-- 临时移除图标 -->
-              <!-- <template #icon>
-                <NIcon :component="DownloadIcon" />
-              </template> -->
-              点击下载原版报告
-            </NButton>
-          </div>
-
-          <div v-if="reportFileList.length > 0" class="file-info">
-            <NText>{{ reportFileList[0]?.name }} 下载</NText>
-          </div>
-        </div>
-      </div>
-
-      <!-- 证书查看部分 -->
-      <div class="view-section">
-        <div class="section-title">证书:</div>
-        <div class="view-content">
-          <div v-if="certificateFileList.length === 0" class="empty-state">
-            <NText depth="3">暂无证书文件</NText>
-          </div>
-          <div v-else class="certificate-display">
-            <NImageGroup>
-              <div
-                v-for="file in certificateFileList"
-                :key="file.id"
-                class="certificate-item"
-              >
-                <div class="certificate-image">
-                  <NImage
-                    v-if="file.type?.startsWith('image/')"
-                    :src="file.url"
-                    width="120"
-                    height="120"
-                    object-fit="cover"
-                    :preview-src="file.url"
-                  />
-                  <div v-else class="file-icon" @click="handlePreview(file)">
-                    {{ file.name?.split('.').pop()?.toUpperCase() || 'FILE' }}
-                  </div>
-                </div>
-                <div class="file-actions">
-                  <NButton
-                    v-if="file.type?.startsWith('image/')"
-                    size="small"
-                    type="primary"
-                    text
-                    @click="() => {}"
-                    style="visibility: hidden;"
-                  >
-                    预览
-                  </NButton>
-                  <NButton
-                    v-else
-                    size="small"
-                    type="primary"
-                    text
-                    disabled
-                  >
-                    不支持预览
-                  </NButton>
-                  <NButton
-                    size="small"
-                    type="primary"
-                    text
-                    @click="handleDownload(file)"
-                  >
-                    下载
-                  </NButton>
-                </div>
-              </div>
-            </NImageGroup>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <template #footer>
       <div class="modal-footer">
@@ -353,11 +270,18 @@ const isUploadMode = computed(() => props.mode === 'upload')
   margin-bottom: 20px;
 }
 
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
 .section-title {
   font-size: 14px;
   color: #666;
-  margin-bottom: 12px;
   font-weight: normal;
+  margin: 0;
 }
 
 .upload-content {
@@ -465,57 +389,6 @@ const isUploadMode = computed(() => props.mode === 'upload')
   display: inline-block;
 }
 
-.certificate-display {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-.certificate-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.certificate-image {
-  cursor: pointer;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid #e8e8e8;
-  transition: all 0.3s;
-}
-
-.certificate-image:hover {
-  border-color: #1890ff;
-  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
-}
-
-.file-actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.empty-state {
-  padding: 40px 20px;
-  text-align: center;
-  color: #999;
-  font-size: 14px;
-}
-
-.file-icon {
-  width: 120px;
-  height: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f5f5f5;
-  color: #666;
-  font-size: 24px;
-  font-weight: 600;
-  border-radius: 8px;
-}
 
 /* 底部按钮 */
 .modal-footer {
@@ -547,12 +420,5 @@ const isUploadMode = computed(() => props.mode === 'upload')
     width: 95vw !important;
   }
 
-  .certificate-display {
-    justify-content: center;
-  }
-
-  .certificate-image {
-    flex: 0 0 auto;
-  }
 }
 </style>