refactor: 简化证书弹窗组件,统一上传和查看模式的UI实现

- 移除查看模式的独立模板代码,统一使用上传模式的UI结构
- 优化报告区域布局,将下载按钮移至标题旁边
- 在查看模式下禁用上传组件,保持界面一致性
- 删除冗余的查看模式样式代码(certificate-display、certificate-item等)
- 简化组件结构,减少代码重复,提升可维护性
This commit is contained in:
Wei_佳 2025-11-17 14:53:48 +08:00
parent 5cf79a3f7e
commit 2d9a83d68e

View File

@ -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>