623 lines
16 KiB
HTML
623 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>文档版本管理 UI 原型</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: #f5f5f5;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header {
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
}
|
|
|
|
.table-container {
|
|
padding: 24px;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
thead {
|
|
background: #fafafa;
|
|
}
|
|
|
|
thead th {
|
|
padding: 12px 16px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: #262626;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
}
|
|
|
|
tbody tr {
|
|
border-bottom: 1px solid #f0f0f0;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background: #fafafa;
|
|
}
|
|
|
|
tbody td {
|
|
padding: 16px;
|
|
font-size: 14px;
|
|
color: #595959;
|
|
}
|
|
|
|
/* 主文档行 */
|
|
.main-row {
|
|
background: white;
|
|
}
|
|
|
|
.main-row:hover {
|
|
background: #fafafa;
|
|
}
|
|
|
|
/* 历史版本行 */
|
|
.history-row {
|
|
background: #fafafa;
|
|
border-left: 3px solid #00684a;
|
|
}
|
|
|
|
.history-row td:first-child {
|
|
padding-left: 50px;
|
|
}
|
|
|
|
.history-row:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
/* 文档名称列 */
|
|
.doc-name-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.expand-icon {
|
|
cursor: pointer;
|
|
color: #8c8c8c;
|
|
font-size: 18px;
|
|
transition: transform 0.2s, color 0.2s;
|
|
}
|
|
|
|
.expand-icon:hover {
|
|
color: #00684a;
|
|
}
|
|
|
|
.expand-icon.expanded {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.file-icon {
|
|
font-size: 32px;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.doc-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.doc-name {
|
|
font-weight: 500;
|
|
color: #262626;
|
|
}
|
|
|
|
.doc-type {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
background: #e6f7ff;
|
|
color: #1890ff;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.version-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
background: #f0f0f0;
|
|
color: #8c8c8c;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/* 状态标签 */
|
|
.status-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 12px;
|
|
border-radius: 16px;
|
|
font-size: 12px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.status-tag.green {
|
|
background: #f6ffed;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.status-tag.blue {
|
|
background: #e6f7ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.status-tag.red {
|
|
background: #fff1f0;
|
|
color: #f5222d;
|
|
}
|
|
|
|
/* 问题数量 */
|
|
.issues-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.issues-diff {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 12px;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.issues-diff.increase {
|
|
color: #f5222d;
|
|
background: #fff1f0;
|
|
}
|
|
|
|
.issues-diff.decrease {
|
|
color: #52c41a;
|
|
background: #f6ffed;
|
|
}
|
|
|
|
.issues-diff.same {
|
|
color: #8c8c8c;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
/* 操作按钮 */
|
|
.operations {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
border: none;
|
|
background: none;
|
|
color: #00684a;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #f0f0f0;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.btn.secondary {
|
|
color: #595959;
|
|
}
|
|
|
|
.btn.danger {
|
|
color: #f5222d;
|
|
}
|
|
|
|
.btn.danger:hover {
|
|
background: #fff1f0;
|
|
}
|
|
|
|
/* 历史版本图标 */
|
|
.history-icon {
|
|
font-size: 20px;
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
/* 响应式 */
|
|
@media (max-width: 768px) {
|
|
.operations {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.history-row td:first-child {
|
|
padding-left: 30px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>文档版本管理 - UI 设计原型</h1>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 30%">文档名称</th>
|
|
<th style="width: 12%">文档编号</th>
|
|
<th style="width: 10%">文件状态</th>
|
|
<th style="width: 10%">审核状态</th>
|
|
<th style="width: 10%">问题数量</th>
|
|
<th style="width: 12%">上传时间</th>
|
|
<th style="width: 16%">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- 示例1: 展开状态，问题减少（绿色） -->
|
|
<tr class="main-row">
|
|
<td>
|
|
<div class="doc-name-cell">
|
|
<i class="ri-arrow-right-s-line expand-icon expanded"></i>
|
|
<i class="ri-file-pdf-fill file-icon"></i>
|
|
<div class="doc-info">
|
|
<div class="doc-name">合同审查报告_最新版.pdf</div>
|
|
<div>
|
|
<span class="doc-type">合同审查</span>
|
|
<span class="version-badge">
|
|
<i class="ri-history-line"></i>
|
|
v1 (共3个历史版本)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>HT-2025-001</td>
|
|
<td>
|
|
<span class="status-tag green">
|
|
<i class="ri-check-line"></i>
|
|
已完成
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="status-tag green">
|
|
<i class="ri-check-line"></i>
|
|
通过
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="issues-cell">
|
|
<span>3</span>
|
|
<span class="issues-diff decrease">
|
|
<i class="ri-arrow-down-line"></i>
|
|
-2
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td>2025-11-14 10:30</td>
|
|
<td>
|
|
<div class="operations">
|
|
<button class="btn">
|
|
<i class="ri-eye-line"></i>
|
|
查看
|
|
</button>
|
|
<button class="btn secondary">
|
|
<i class="ri-download-line"></i>
|
|
下载
|
|
</button>
|
|
<button class="btn danger">
|
|
<i class="ri-delete-bin-line"></i>
|
|
删除
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- 历史版本 v2 -->
|
|
<tr class="history-row">
|
|
<td>
|
|
<div class="doc-name-cell">
|
|
<i class="ri-history-line history-icon"></i>
|
|
<div class="doc-info">
|
|
<div class="doc-name">v2 版本</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>HT-2025-001</td>
|
|
<td>
|
|
<span class="status-tag green">
|
|
<i class="ri-check-line"></i>
|
|
已完成
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="status-tag green">
|
|
<i class="ri-check-line"></i>
|
|
通过
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="issues-cell">
|
|
<span>5</span>
|
|
<span class="issues-diff increase">
|
|
<i class="ri-arrow-up-line"></i>
|
|
+2
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td>2025-11-13 15:20</td>
|
|
<td>
|
|
<div class="operations">
|
|
<button class="btn">
|
|
<i class="ri-eye-line"></i>
|
|
查看
|
|
</button>
|
|
<button class="btn secondary">
|
|
<i class="ri-download-line"></i>
|
|
下载
|
|
</button>
|
|
<button class="btn danger">
|
|
<i class="ri-delete-bin-line"></i>
|
|
删除
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- 历史版本 v3 -->
|
|
<tr class="history-row">
|
|
<td>
|
|
<div class="doc-name-cell">
|
|
<i class="ri-history-line history-icon"></i>
|
|
<div class="doc-info">
|
|
<div class="doc-name">v3 版本</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>HT-2025-001</td>
|
|
<td>
|
|
<span class="status-tag green">
|
|
<i class="ri-check-line"></i>
|
|
已完成
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="status-tag red">
|
|
<i class="ri-close-line"></i>
|
|
不通过
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="issues-cell">
|
|
<span>3</span>
|
|
<span class="issues-diff decrease">
|
|
<i class="ri-arrow-down-line"></i>
|
|
-1
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td>2025-11-12 09:15</td>
|
|
<td>
|
|
<div class="operations">
|
|
<button class="btn">
|
|
<i class="ri-eye-line"></i>
|
|
查看
|
|
</button>
|
|
<button class="btn secondary">
|
|
<i class="ri-download-line"></i>
|
|
下载
|
|
</button>
|
|
<button class="btn danger">
|
|
<i class="ri-delete-bin-line"></i>
|
|
删除
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- 历史版本 v4 (最早版本，无差异) -->
|
|
<tr class="history-row">
|
|
<td>
|
|
<div class="doc-name-cell">
|
|
<i class="ri-history-line history-icon"></i>
|
|
<div class="doc-info">
|
|
<div class="doc-name">v4 版本 (最早)</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>HT-2025-001</td>
|
|
<td>
|
|
<span class="status-tag green">
|
|
<i class="ri-check-line"></i>
|
|
已完成
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="status-tag blue">
|
|
<i class="ri-time-line"></i>
|
|
待审核
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="issues-cell">
|
|
<span>4</span>
|
|
</div>
|
|
</td>
|
|
<td>2025-11-11 14:00</td>
|
|
<td>
|
|
<div class="operations">
|
|
<button class="btn">
|
|
<i class="ri-eye-line"></i>
|
|
查看
|
|
</button>
|
|
<button class="btn secondary">
|
|
<i class="ri-download-line"></i>
|
|
下载
|
|
</button>
|
|
<button class="btn danger">
|
|
<i class="ri-delete-bin-line"></i>
|
|
删除
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- 示例2: 折叠状态，问题增加（红色） -->
|
|
<tr class="main-row">
|
|
<td>
|
|
<div class="doc-name-cell">
|
|
<i class="ri-arrow-right-s-line expand-icon"></i>
|
|
<i class="ri-file-word-fill file-icon" style="color: #2b579a;"></i>
|
|
<div class="doc-info">
|
|
<div class="doc-name">行政处罚决定书.docx</div>
|
|
<div>
|
|
<span class="doc-type" style="background: #fff7e6; color: #fa8c16;">行政处罚</span>
|
|
<span class="version-badge">
|
|
<i class="ri-history-line"></i>
|
|
v1 (共2个历史版本)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>XZ-2025-002</td>
|
|
<td>
|
|
<span class="status-tag green">
|
|
<i class="ri-check-line"></i>
|
|
已完成
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="status-tag blue">
|
|
<i class="ri-time-line"></i>
|
|
待审核
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="issues-cell">
|
|
<span>8</span>
|
|
<span class="issues-diff increase">
|
|
<i class="ri-arrow-up-line"></i>
|
|
+3
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td>2025-11-14 09:15</td>
|
|
<td>
|
|
<div class="operations">
|
|
<button class="btn">
|
|
<i class="ri-play-circle-line"></i>
|
|
开始审核
|
|
</button>
|
|
<button class="btn secondary">
|
|
<i class="ri-download-line"></i>
|
|
下载
|
|
</button>
|
|
<button class="btn danger">
|
|
<i class="ri-delete-bin-line"></i>
|
|
删除
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- 示例3: 单版本文档（无展开图标） -->
|
|
<tr class="main-row">
|
|
<td>
|
|
<div class="doc-name-cell">
|
|
<span style="width: 18px;"></span> <!-- 占位，保持对齐 -->
|
|
<i class="ri-file-pdf-fill file-icon"></i>
|
|
<div class="doc-info">
|
|
<div class="doc-name">新上传的许可证.pdf</div>
|
|
<div>
|
|
<span class="doc-type" style="background: #f0f5ff; color: #597ef7;">许可证审查</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>XK-2025-003</td>
|
|
<td>
|
|
<span class="status-tag blue">
|
|
<i class="ri-loader-line"></i>
|
|
评查中
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="status-tag blue">
|
|
<i class="ri-time-line"></i>
|
|
待审核
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="issues-cell">
|
|
<span>-</span>
|
|
</div>
|
|
</td>
|
|
<td>2025-11-14 11:45</td>
|
|
<td>
|
|
<div class="operations">
|
|
<button class="btn" disabled style="opacity: 0.5; cursor: not-allowed;">
|
|
<i class="ri-play-circle-line"></i>
|
|
开始审核
|
|
</button>
|
|
<button class="btn secondary">
|
|
<i class="ri-download-line"></i>
|
|
下载
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 简单的展开/折叠交互演示
|
|
document.querySelectorAll('.expand-icon').forEach(icon => {
|
|
icon.addEventListener('click', function() {
|
|
this.classList.toggle('expanded');
|
|
// 实际项目中这里会触发数据加载和DOM更新
|
|
alert('展开/折叠历史版本（实际项目中会加载数据）');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|