zkxw/docs/mockups/ui-richness-L1-list-plain.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>L1 · 纯文字 CRUD 列表（现状）</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="ui-richness-shared.css" />
</head>
<body>
  <div class="demo-banner">
    <div>
      <span class="level-tag level-L1">L1 现状</span>
      <strong>纯文字 CRUD 列表</strong> — 对应典型主数据页（如单位管理）
    </div>
    <a href="ui-richness-index.html">← 返回对比入口</a>
  </div>

  <div class="page-wrap">
    <section class="panel">
      <div class="panel-top">
        <h2>单位列表</h2>
      </div>

      <div class="filter-block">
        <div class="filter-grid" style="grid-template-columns:1fr">
          <div class="filter-field">
            <label>关键词</label>
            <input class="input" placeholder="单位名称/编码" />
          </div>
        </div>
        <div class="filter-actions-row">
          <span class="filter-hint">按名称、编码模糊查询。</span>
          <div class="filter-actions-end">
            <button class="btn btn-ghost" type="button">重置</button>
            <button class="btn btn-main" type="button">搜索</button>
          </div>
        </div>
      </div>

      <div class="list-toolbar">
        <div class="list-toolbar-row">
          <span>已选 <span class="sel-num">0</span> 项</span>
          <button class="btn btn-main" type="button">新增单位</button>
          <button class="btn btn-ghost" type="button">批量删除</button>
        </div>
      </div>

      <div class="list-body">
        <table class="data-table">
          <thead>
            <tr>
              <th style="width:48px">☐</th>
              <th>序号</th>
              <th>单位名称</th>
              <th>单位编码</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>☐</td><td>1</td><td>千克</td><td>KG</td><td>2026-03-01 10:20:00</td>
              <td><button class="btn btn-op" type="button">编辑</button> <button class="btn btn-op" type="button">删除</button></td>
            </tr>
            <tr>
              <td>☐</td><td>2</td><td>克</td><td>G</td><td>2026-03-01 10:21:00</td>
              <td><button class="btn btn-op" type="button">编辑</button> <button class="btn btn-op" type="button">删除</button></td>
            </tr>
            <tr>
              <td>☐</td><td>3</td><td>箱</td><td>BOX</td><td>2026-03-02 09:15:00</td>
              <td><button class="btn btn-op" type="button">编辑</button> <button class="btn btn-op" type="button">删除</button></td>
            </tr>
          </tbody>
        </table>
        <div class="list-pager-bar">共 3 条 · 第 1/1 页</div>
      </div>
    </section>

    <p class="dim-note">
      <strong>此档缺失：</strong>页头说明、标题竖条/图标、按钮图标、状态 Tag、复合列（头像/缩略图）。
      全页结构正确但视觉锚点少，扫读时每一行看起来一样。
      <br><strong>对比建议：</strong>
      <a href="ui-richness-L2-list-moderate.html" style="color:var(--primary-dark)">L2 适度增强</a> →
      <a href="ui-richness-L3-list-rich.html" style="color:var(--primary-dark)">L3 复合列表</a>
    </p>
  </div>
</body>
</html>