zkxw/docs/mockups/ui-richness-index.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>