all in
This commit is contained in:
@@ -0,0 +1,622 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user