wren
655 lines
17 KiB
HTML
655 lines
17 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>内部公文报告 UI 样例</title>
|
||
<style>
|
||
:root {
|
||
--bg: #f8fafc;
|
||
--panel: #ffffff;
|
||
--panel-soft: #f1f5f9;
|
||
--line: #e2e8f0;
|
||
--text: #0f172a;
|
||
--muted: #64748b;
|
||
--primary: #00684a;
|
||
--primary-soft: #e8f3ef;
|
||
--danger: #dc2626;
|
||
--danger-soft: #fef2f2;
|
||
--warn: #b45309;
|
||
--warn-soft: #fffbeb;
|
||
--info: #1d4ed8;
|
||
--info-soft: #eff6ff;
|
||
--shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
background:
|
||
radial-gradient(circle at top left, rgba(0, 104, 74, 0.06), transparent 22%),
|
||
linear-gradient(180deg, #fbfdff 0%, var(--bg) 100%);
|
||
color: var(--text);
|
||
font: 14px/1.6 "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
}
|
||
|
||
.page {
|
||
max-width: 1360px;
|
||
margin: 0 auto;
|
||
padding: 32px 24px 56px;
|
||
}
|
||
|
||
.hero {
|
||
display: grid;
|
||
grid-template-columns: 240px minmax(0, 1fr);
|
||
gap: 20px;
|
||
align-items: stretch;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.card {
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-radius: 18px;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.score-card {
|
||
padding: 24px 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
background:
|
||
linear-gradient(180deg, rgba(0, 104, 74, 0.05) 0%, rgba(255, 255, 255, 0.96) 36%),
|
||
var(--panel);
|
||
}
|
||
|
||
.score-ring {
|
||
width: 132px;
|
||
height: 132px;
|
||
margin: 0 auto 18px;
|
||
border-radius: 50%;
|
||
background: conic-gradient(var(--primary) 0%, #dbe4ea 0%);
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
|
||
.score-ring::before {
|
||
content: "";
|
||
width: 102px;
|
||
height: 102px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.9);
|
||
grid-area: 1 / 1;
|
||
}
|
||
|
||
.score-value {
|
||
grid-area: 1 / 1;
|
||
position: relative;
|
||
z-index: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.score-value strong {
|
||
display: block;
|
||
font-size: 34px;
|
||
line-height: 1;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
|
||
.score-value span {
|
||
display: block;
|
||
margin-top: 6px;
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.score-caption {
|
||
text-align: center;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.hero-main {
|
||
padding: 24px 26px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
gap: 18px;
|
||
}
|
||
|
||
.eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-height: 28px;
|
||
padding: 0 12px;
|
||
border-radius: 999px;
|
||
background: var(--primary-soft);
|
||
color: var(--primary);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
h1 {
|
||
margin: 10px 0 8px;
|
||
font-size: 30px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.doc-meta {
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.summary-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.metric {
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
background: linear-gradient(180deg, #fff, #f8fafc);
|
||
padding: 14px 16px;
|
||
}
|
||
|
||
.metric-label {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.metric-value {
|
||
margin-top: 6px;
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 6px;
|
||
}
|
||
|
||
.metric-value strong {
|
||
font-size: 26px;
|
||
line-height: 1;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
|
||
.metric-value span {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-height: 30px;
|
||
padding: 0 12px;
|
||
border-radius: 999px;
|
||
border: 1px solid transparent;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.chip.error {
|
||
color: var(--danger);
|
||
background: var(--danger-soft);
|
||
border-color: #fecaca;
|
||
}
|
||
|
||
.chip.warning {
|
||
color: var(--warn);
|
||
background: var(--warn-soft);
|
||
border-color: #fde68a;
|
||
}
|
||
|
||
.chip.info {
|
||
color: var(--info);
|
||
background: var(--info-soft);
|
||
border-color: #bfdbfe;
|
||
}
|
||
|
||
.content {
|
||
display: grid;
|
||
grid-template-columns: 320px minmax(0, 1fr);
|
||
gap: 20px;
|
||
align-items: start;
|
||
}
|
||
|
||
.sidebar {
|
||
padding: 18px;
|
||
position: sticky;
|
||
top: 20px;
|
||
}
|
||
|
||
.section-title {
|
||
margin: 0 0 14px;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.stat-list {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.stat-item {
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
background: #fff;
|
||
padding: 12px 14px;
|
||
}
|
||
|
||
.stat-item strong {
|
||
display: block;
|
||
font-size: 20px;
|
||
line-height: 1;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.stat-item span {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.legend {
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.legend-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 8px 0;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.legend-row b {
|
||
color: var(--text);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.table-card {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 16px 18px;
|
||
border-bottom: 1px solid var(--line);
|
||
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||
}
|
||
|
||
.toolbar h2 {
|
||
margin: 0;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.toolbar span {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.filters {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.filter {
|
||
min-height: 30px;
|
||
padding: 0 12px;
|
||
border-radius: 999px;
|
||
border: 1px solid var(--line);
|
||
background: #fff;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.filter.active {
|
||
color: var(--primary);
|
||
background: var(--primary-soft);
|
||
border-color: rgba(0, 104, 74, 0.2);
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
thead th {
|
||
padding: 12px 14px;
|
||
text-align: left;
|
||
background: #f8fafc;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
border-bottom: 1px solid var(--line);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
tbody td {
|
||
padding: 14px;
|
||
border-bottom: 1px solid #edf2f7;
|
||
vertical-align: top;
|
||
}
|
||
|
||
tbody tr:hover {
|
||
background: #fcfdfd;
|
||
}
|
||
|
||
.finding-id {
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.rule-cell strong {
|
||
display: block;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.rule-cell span {
|
||
display: block;
|
||
margin-top: 4px;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.severity-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 26px;
|
||
padding: 0 10px;
|
||
border-radius: 999px;
|
||
border: 1px solid transparent;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.severity-tag.error {
|
||
color: var(--danger);
|
||
background: var(--danger-soft);
|
||
border-color: #fecaca;
|
||
}
|
||
|
||
.severity-tag.warning {
|
||
color: var(--warn);
|
||
background: var(--warn-soft);
|
||
border-color: #fde68a;
|
||
}
|
||
|
||
.location {
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
color: #334155;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.msg {
|
||
min-width: 360px;
|
||
}
|
||
|
||
.msg-main {
|
||
font-size: 13px;
|
||
color: var(--text);
|
||
}
|
||
|
||
.context {
|
||
margin-top: 8px;
|
||
padding: 10px 12px;
|
||
border-radius: 12px;
|
||
background: #f8fafc;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.suggestion {
|
||
margin-top: 8px;
|
||
padding: 10px 12px;
|
||
border-radius: 12px;
|
||
background: #eff6ff;
|
||
color: #0f4c81;
|
||
font-size: 12px;
|
||
}
|
||
|
||
@media (max-width: 1080px) {
|
||
.hero,
|
||
.content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.summary-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.sidebar {
|
||
position: static;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.page {
|
||
padding: 18px 14px 32px;
|
||
}
|
||
|
||
.summary-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.toolbar {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.msg {
|
||
min-width: 0;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<section class="hero">
|
||
<div class="card score-card">
|
||
<div class="score-ring">
|
||
<div class="score-value">
|
||
<strong>0</strong>
|
||
<span>综合得分</span>
|
||
</div>
|
||
</div>
|
||
<div class="score-caption">当前样例沿用你提供的实际报告数据，不改业务语义</div>
|
||
</div>
|
||
|
||
<div class="card hero-main">
|
||
<div>
|
||
<div class="eyebrow">统一报告样式锚点</div>
|
||
<h1>公文格式审核报告</h1>
|
||
<div class="doc-meta">买卖合同 (1).docx · 共 123 项问题 · 样例用于确认 UI / 配色方向</div>
|
||
</div>
|
||
|
||
<div class="summary-grid">
|
||
<div class="metric">
|
||
<div class="metric-label">错误项</div>
|
||
<div class="metric-value"><strong>31</strong><span>error</span></div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-label">警告项</div>
|
||
<div class="metric-value"><strong>92</strong><span>warning</span></div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-label">提示项</div>
|
||
<div class="metric-value"><strong>0</strong><span>info</span></div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-label">问题类别</div>
|
||
<div class="metric-value"><strong>4</strong><span>标题 / 发文 / 格式 / 其他</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chips">
|
||
<span class="chip error">错误 31</span>
|
||
<span class="chip warning">警告 92</span>
|
||
<span class="chip info">提示 0</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="content">
|
||
<aside class="card sidebar">
|
||
<h2 class="section-title">报告摘要</h2>
|
||
<div class="stat-list">
|
||
<div class="stat-item">
|
||
<strong>GW-F-003</strong>
|
||
<span>当前命中最多的规则，二级标题用楷体三号</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<strong>P35 - P83</strong>
|
||
<span>问题主要集中在正文中段的二级标题样式</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<strong>标题 / 发文</strong>
|
||
<span>顶部实体未识别，标题文种与发文字号前置规则同时触发</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<div class="legend-row">
|
||
<span>设计基调</span>
|
||
<b>贴合系统统一工作台</b>
|
||
</div>
|
||
<div class="legend-row">
|
||
<span>信息组织</span>
|
||
<b>摘要 + 问题表格</b>
|
||
</div>
|
||
<div class="legend-row">
|
||
<span>配色策略</span>
|
||
<b>Slate + 平台绿</b>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="card table-card">
|
||
<div class="toolbar">
|
||
<div>
|
||
<h2>问题明细</h2>
|
||
<span>保留当前报告语义，只收敛版式和视觉层级</span>
|
||
</div>
|
||
<div class="filters">
|
||
<button class="filter active" type="button">全部</button>
|
||
<button class="filter" type="button">错误</button>
|
||
<button class="filter" type="button">警告</button>
|
||
</div>
|
||
</div>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>编号</th>
|
||
<th>规则</th>
|
||
<th>严重度</th>
|
||
<th>类别</th>
|
||
<th>位置</th>
|
||
<th>说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="finding-id">F-c0dfd361</td>
|
||
<td class="rule-cell">
|
||
<strong>GW-T-001</strong>
|
||
<span>标题文种合规性</span>
|
||
</td>
|
||
<td><span class="severity-tag error">error</span></td>
|
||
<td>标题</td>
|
||
<td class="location">P-1 ()</td>
|
||
<td class="msg">
|
||
<div class="msg-main">目标实体「title」未识别到</div>
|
||
<div class="context">原文：未识别到标题内容，无法继续执行标题文种合规校验。</div>
|
||
<div class="suggestion">建议：补全标题并确保标题文种符合规则要求。</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="finding-id">F-a896eaa4</td>
|
||
<td class="rule-cell">
|
||
<strong>GW-N-001</strong>
|
||
<span>发文字号必须用六角括号</span>
|
||
</td>
|
||
<td><span class="severity-tag error">error</span></td>
|
||
<td>发文</td>
|
||
<td class="location">P-1 ()</td>
|
||
<td class="msg">
|
||
<div class="msg-main">目标实体「doc_number」未识别到</div>
|
||
<div class="context">原文：未识别到发文字号，年份括号规则无法匹配。</div>
|
||
<div class="suggestion">建议：发文字号年份应用六角括号〔〕，不得使用方括号或圆括号。</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="finding-id">F-087a4841</td>
|
||
<td class="rule-cell">
|
||
<strong>GW-F-003</strong>
|
||
<span>二级标题用楷体三号</span>
|
||
</td>
|
||
<td><span class="severity-tag error">error</span></td>
|
||
<td>格式</td>
|
||
<td class="location">P35 (heading_2)</td>
|
||
<td class="msg">
|
||
<div class="msg-main">字体或字号不符合（实际 仿宋 Nonept，期望 楷体 16pt）</div>
|
||
<div class="context">原文：（一）甲方从乙方处购买：</div>
|
||
<div class="suggestion">建议：二级标题应使用楷体三号，保持同级标题样式一致。</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="finding-id">F-37b4bb81</td>
|
||
<td class="rule-cell">
|
||
<strong>GW-F-003</strong>
|
||
<span>二级标题用楷体三号</span>
|
||
</td>
|
||
<td><span class="severity-tag error">error</span></td>
|
||
<td>格式</td>
|
||
<td class="location">P39 (heading_2)</td>
|
||
<td class="msg">
|
||
<div class="msg-main">字体或字号不符合（实际 仿宋 Nonept，期望 楷体 16pt）</div>
|
||
<div class="context">原文：（二）质量要求：</div>
|
||
<div class="suggestion">建议：这一类同级标题可在正式版中支持折叠聚合同规则项。</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="finding-id">F-b2140a78</td>
|
||
<td class="rule-cell">
|
||
<strong>GW-F-003</strong>
|
||
<span>二级标题用楷体三号</span>
|
||
</td>
|
||
<td><span class="severity-tag warning">warning</span></td>
|
||
<td>格式</td>
|
||
<td class="location">P62 (heading_2)</td>
|
||
<td class="msg">
|
||
<div class="msg-main">格式接近但未完全满足规则要求</div>
|
||
<div class="context">原文：（一）交付时间： 。</div>
|
||
<div class="suggestion">建议：保留原有规则说明内容，只把告警与错误的视觉层级拉开。</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</body>
|
||
</html>
|