292 lines
12 KiB
HTML
292 lines
12 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 rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
--primary: #10b981;
|
||
--primary-dark: #059669;
|
||
--primary-bg: #ecfdf5;
|
||
--text: #1e293b;
|
||
--text-muted: #64748b;
|
||
--border: #d9e8e2;
|
||
--surface: #fff;
|
||
--radius: 10px;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
font-family: Inter, -apple-system, sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
color: var(--text);
|
||
background: #f8fafc;
|
||
}
|
||
.hero {
|
||
padding: 40px 24px 32px;
|
||
background: linear-gradient(135deg, #ecfdf5 0%, #fff 60%);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.hero h1 { margin: 0 0 8px; font-size: 28px; letter-spacing: -0.02em; }
|
||
.hero p { margin: 0; max-width: 720px; color: var(--text-muted); font-size: 15px; }
|
||
.wrap { max-width: 1100px; margin: 0 auto; padding: 32px 24px 48px; }
|
||
h2 { font-size: 18px; margin: 0 0 16px; }
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||
gap: 16px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 18px 20px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,.05);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
.card-head { display: flex; align-items: center; gap: 10px; }
|
||
.level {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
padding: 3px 10px;
|
||
border-radius: 999px;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
.L1 { background: #e2e8f0; color: #475569; }
|
||
.L2 { background: #d1fae5; color: #047857; }
|
||
.L3 { background: #10b981; color: #fff; }
|
||
.card h3 { margin: 0; font-size: 16px; }
|
||
.card p { margin: 0; font-size: 13px; color: var(--text-muted); flex: 1; }
|
||
.card a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
align-self: flex-start;
|
||
padding: 8px 14px;
|
||
border-radius: 8px;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
}
|
||
.card a.secondary {
|
||
background: var(--surface);
|
||
color: var(--primary-dark);
|
||
border: 1px solid var(--border);
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
font-size: 13px;
|
||
}
|
||
th, td {
|
||
padding: 10px 14px;
|
||
text-align: center;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
th {
|
||
background: #f8fafc;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
}
|
||
td:first-child, th:first-child { text-align: left; }
|
||
.yes { color: var(--primary-dark); font-weight: 700; }
|
||
.no { color: #94a3b8; }
|
||
.partial { color: var(--text-muted); }
|
||
.tip {
|
||
margin-top: 24px;
|
||
padding: 14px 16px;
|
||
border-radius: var(--radius);
|
||
border: 1px solid var(--border);
|
||
background: var(--primary-bg);
|
||
font-size: 13px;
|
||
color: #065f46;
|
||
}
|
||
.links-row { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="hero">
|
||
<div class="wrap" style="padding:0">
|
||
<h1>Web 管理端 · UI 丰富度对比 Demo</h1>
|
||
<p>
|
||
基于 Fresh Mint 规范与当前 <code>web-admin</code> 现状，提供 L1（现状素）→ L2（适度增强）→ L3（规范内丰富）三档样稿。
|
||
用浏览器直接打开各 HTML 文件即可对比。建议先并排打开 L1 与 L3，感受差异。
|
||
</p>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="wrap">
|
||
<h2>工作台 / 首页</h2>
|
||
<div class="grid">
|
||
<article class="card">
|
||
<div class="card-head">
|
||
<span class="level L1">L1 现状</span>
|
||
<h3>精简工作台</h3>
|
||
</div>
|
||
<p>对应当前 <code>console-lite</code>：仅标题 + 说明文字 + 纯文字按钮，无统计、无图表、无快捷卡片。</p>
|
||
<a href="ui-richness-L1-console-plain.html">打开 Demo →</a>
|
||
</article>
|
||
<article class="card">
|
||
<div class="card-head">
|
||
<span class="level L3">L3 丰富</span>
|
||
<h3>业务工作台</h3>
|
||
</div>
|
||
<p>规范参考版：预警条 + 6 张指标卡（含图标）+ 双列趋势图 + 快捷入口宫格 + 待办列表。</p>
|
||
<a href="ui-richness-L3-console-rich.html">打开 Demo →</a>
|
||
</article>
|
||
</div>
|
||
|
||
<h2>业务列表页</h2>
|
||
<div class="grid">
|
||
<article class="card">
|
||
<div class="card-head">
|
||
<span class="level L1">L1 现状</span>
|
||
<h3>纯文字 CRUD 列表</h3>
|
||
</div>
|
||
<p>对应典型主数据页：普通 h2 标题、纯文字列、无 Tag、无缩略图/头像、操作按钮无图标。</p>
|
||
<a href="ui-richness-L1-list-plain.html">打开 Demo →</a>
|
||
</article>
|
||
<article class="card">
|
||
<div class="card-head">
|
||
<span class="level L2">L2 适度</span>
|
||
<h3>规范内轻增强</h3>
|
||
</div>
|
||
<p>仍保持列表范式，但补齐：绿色竖条标题、面板图标、按钮图标、状态 Tag、页头说明——改动小、收益明显。</p>
|
||
<a href="ui-richness-L2-list-moderate.html">打开 Demo →</a>
|
||
</article>
|
||
<article class="card">
|
||
<div class="card-head">
|
||
<span class="level L3">L3 丰富</span>
|
||
<h3>复合信息列表</h3>
|
||
</div>
|
||
<p>在 L2 基础上增加：客户头像+副标题、商品缩略图、进度条、金额高亮、迷你趋势 sparkline 列。</p>
|
||
<a href="ui-richness-L3-list-rich.html">打开 Demo →</a>
|
||
</article>
|
||
</div>
|
||
|
||
<h2>详情 / 查看态</h2>
|
||
<div class="grid">
|
||
<article class="card">
|
||
<div class="card-head">
|
||
<span class="level L1">L1 现状</span>
|
||
<h3>纯描述列表</h3>
|
||
</div>
|
||
<p>类似 <code>el-descriptions border</code>：字段名+值平铺，无首屏 Hero、无分区卡片。</p>
|
||
<a href="ui-richness-L1-detail-plain.html">打开 Demo →</a>
|
||
</article>
|
||
<article class="card">
|
||
<div class="card-head">
|
||
<span class="level L3">L3 丰富</span>
|
||
<h3>Hero + 分区卡片</h3>
|
||
</div>
|
||
<p>规范 <code>view-hero</code> + <code>detail-section</code>：首屏摘要、Tag 状态、分区折叠感、关键字段视觉分组。</p>
|
||
<a href="ui-richness-L3-detail-rich.html">打开 Demo →</a>
|
||
</article>
|
||
</div>
|
||
|
||
<h2>丰富化模式样例（按场景）</h2>
|
||
<p style="margin:-8px 0 16px;font-size:13px;color:var(--text-muted)">
|
||
以下每个 Demo 聚焦一种「如何让界面更丰富」的手法，可直接对照业务场景选用。
|
||
</p>
|
||
<div class="grid">
|
||
<article class="card">
|
||
<div class="card-head"><span class="level" style="background:#6366f1;color:#eef2ff">模式</span><h3>空状态 + 引导</h3></div>
|
||
<p>列表无数据时：插画区 + 说明 + 主行动按钮，避免空白表格的冷感。</p>
|
||
<a href="ui-richness-P01-empty-state.html">打开 Demo →</a>
|
||
</article>
|
||
<article class="card">
|
||
<div class="card-head"><span class="level" style="background:#6366f1;color:#eef2ff">模式</span><h3>卡片网格视图</h3></div>
|
||
<p>商品/设备/工单等实体：表格之外的卡片视图，封面图 + Tag + 底部操作。</p>
|
||
<a href="ui-richness-P02-card-grid.html">打开 Demo →</a>
|
||
</article>
|
||
<article class="card">
|
||
<div class="card-head"><span class="level" style="background:#6366f1;color:#eef2ff">模式</span><h3>时间线 / 操作动态</h3></div>
|
||
<p>订单跟踪、审批记录、样本流转：节点图标 + 竖线 + 时间戳。</p>
|
||
<a href="ui-richness-P03-timeline.html">打开 Demo →</a>
|
||
</article>
|
||
<article class="card">
|
||
<div class="card-head"><span class="level" style="background:#6366f1;color:#eef2ff">模式</span><h3>看板 Kanban</h3></div>
|
||
<p>工单/任务按状态分列：列头计数 + 卡片摘要 + 负责人头像。</p>
|
||
<a href="ui-richness-P04-kanban.html">打开 Demo →</a>
|
||
</article>
|
||
<article class="card">
|
||
<div class="card-head"><span class="level" style="background:#6366f1;color:#eef2ff">模式</span><h3>分区表单</h3></div>
|
||
<p>长表单拆成带图标的分区卡片（基本信息 / 联系 / 结算），降低「一张大白板」感。</p>
|
||
<a href="ui-richness-P05-form-sections.html">打开 Demo →</a>
|
||
</article>
|
||
<article class="card">
|
||
<div class="card-head"><span class="level" style="background:#6366f1;color:#eef2ff">模式</span><h3>商品媒体画廊</h3></div>
|
||
<p>详情/编辑页：主图 4:3 + 缩略图网格 + Hero 信息区，适合商品/样本类。</p>
|
||
<a href="ui-richness-P06-product-media.html">打开 Demo →</a>
|
||
</article>
|
||
<article class="card">
|
||
<div class="card-head"><span class="level" style="background:#6366f1;color:#eef2ff">模式</span><h3>树 + 详情分栏</h3></div>
|
||
<p>分类/组织/库位：左侧树选中高亮 + 右侧详情卡片，比纯树表更有层次。</p>
|
||
<a href="ui-richness-P07-tree-split.html">打开 Demo →</a>
|
||
</article>
|
||
<article class="card">
|
||
<div class="card-head"><span class="level" style="background:#6366f1;color:#eef2ff">模式</span><h3>流程步骤条</h3></div>
|
||
<p>订单/样本/工单生命周期：顶部步骤条展示当前阶段，下方详情联动。</p>
|
||
<a href="ui-richness-P08-workflow-steps.html">打开 Demo →</a>
|
||
</article>
|
||
<article class="card">
|
||
<div class="card-head"><span class="level" style="background:#6366f1;color:#eef2ff">模式</span><h3>同屏 Before/After</h3></div>
|
||
<p>左素右丰并排对比：同一业务块（筛选区、工具栏、表格行）的改造前后。</p>
|
||
<a href="ui-richness-P09-side-by-side.html">打开 Demo →</a>
|
||
</article>
|
||
</div>
|
||
|
||
<h2>维度对照表</h2>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>视觉维度</th>
|
||
<th>L1 现状</th>
|
||
<th>L2 适度</th>
|
||
<th>L3 丰富</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>页头说明（page-desc）</td><td class="no">✗</td><td class="yes">✓</td><td class="yes">✓</td></tr>
|
||
<tr><td>面板标题竖条 / 图标</td><td class="no">✗</td><td class="yes">✓</td><td class="yes">✓</td></tr>
|
||
<tr><td>按钮前缀图标</td><td class="no">✗</td><td class="yes">✓</td><td class="yes">✓</td></tr>
|
||
<tr><td>状态 Tag 标签</td><td class="no">纯文字</td><td class="yes">el-tag 语义色</td><td class="yes">✓</td></tr>
|
||
<tr><td>统计指标卡</td><td class="no">✗</td><td class="partial">可选条带</td><td class="yes">✓ 含图标</td></tr>
|
||
<tr><td>图表 / 趋势</td><td class="no">✗</td><td class="no">✗</td><td class="yes">✓</td></tr>
|
||
<tr><td>复合列（头像/缩略图）</td><td class="no">✗</td><td class="no">✗</td><td class="yes">✓</td></tr>
|
||
<tr><td>进度 / 迷你图</td><td class="no">✗</td><td class="no">✗</td><td class="yes">✓</td></tr>
|
||
<tr><td>详情 Hero 首屏</td><td class="no">✗</td><td class="no">✗</td><td class="yes">✓</td></tr>
|
||
<tr><td>快捷入口宫格</td><td class="no">✗</td><td class="no">✗</td><td class="yes">✓</td></tr>
|
||
<tr><td>符合 Fresh Mint 克制配色</td><td class="yes">✓</td><td class="yes">✓</td><td class="yes">✓</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="tip">
|
||
<strong>如何选档？</strong>
|
||
L2 适合批量改造现有 CRUD 页（成本低、规范合规）；
|
||
L3 适合工作台、订单/工单/客户等高频页（信息密度高、业务感强）。
|
||
不建议为了「不素」而引入高饱和多色或 Tab 图标——与现有规范冲突。
|
||
</div>
|
||
|
||
<p style="margin-top:24px;font-size:13px;color:var(--text-muted)">
|
||
权威参考：<a href="../fresh-mint-green.html" style="color:var(--primary-dark)">fresh-mint-green.html</a>
|
||
· 规范文档：<code>docs/web-admin-ui-spec-fresh-mint.md</code>
|
||
</p>
|
||
</main>
|
||
</body>
|
||
</html>
|