zkxw/docs/mockups/ui-richness-L2-list-moderate.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>L2 · 规范内轻增强列表</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-L2">L2 适度</span>
      <strong>规范内轻增强</strong> — 不改列表范式，补齐规范已有要素
    </div>
    <a href="ui-richness-index.html">← 返回对比入口</a>
  </div>

  <div class="page-wrap">
    <header class="page-head">
      <h1>客户管理</h1>
      <p class="page-desc">维护客户档案、联系人与结算信息。列表支持按名称、编码、状态筛选；双击行可查看详情。</p>
    </header>

    <section class="panel">
      <div class="panel-top">
        <h2 class="title-bar-heading">客户列表</h2>
      </div>

      <div class="filter-block">
        <div class="filter-grid">
          <div class="filter-field"><label>关键词</label><input class="input" placeholder="客户名称/编码" /></div>
          <div class="filter-field"><label>客户类型</label><select class="select"><option>全部</option><option>医院</option><option>机构</option></select></div>
          <div class="filter-field"><label>状态</label><select class="select"><option>全部</option><option>正常</option><option>停用</option></select></div>
          <div class="filter-field"><label>所属区域</label><select class="select"><option>全部</option><option>华东 / 上海</option></select></div>
        </div>
        <div class="filter-actions-row">
          <span class="filter-hint">Enter 键可快速查询；区域下拉展示本级名称，表格展示全路径。</span>
          <div class="filter-actions-end">
            <button class="btn btn-ghost" type="button">
              <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 109-9"/><path d="M3 3v5h5"/></svg>
              重置
            </button>
            <button class="btn btn-main" type="button">
              <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
              搜索
            </button>
          </div>
        </div>
      </div>

      <div class="list-toolbar">
        <div class="list-toolbar-row">
          <span>已选 <span class="sel-num">2</span> 项</span>
          <button class="btn btn-main" type="button">
            <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
            新增客户
          </button>
          <button class="btn btn-ghost" type="button">
            <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/></svg>
            批量删除
          </button>
          <button class="btn btn-ghost" type="button">
            <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
            导出
          </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>
              <th>所属区域</th>
              <th>创建时间</th>
              <th style="min-width:200px">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>☑</td><td>1</td><td>上海市第一人民医院</td><td>CUS-001</td>
              <td><span class="tag info">医院</span></td>
              <td><span class="tag success">正常</span></td>
              <td>华东 / 上海 / 黄浦</td><td>2026-01-10 09:00</td>
              <td>
                <button class="btn btn-op primary" type="button">
                  <svg class="ic" style="width:12px;height:12px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                  查看
                </button>
                <button class="btn btn-op" type="button">
                  <svg class="ic" style="width:12px;height:12px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                  编辑
                </button>
              </td>
            </tr>
            <tr>
              <td>☑</td><td>2</td><td>合肥兴皖生物</td><td>CUS-002</td>
              <td><span class="tag muted">机构</span></td>
              <td><span class="tag success">正常</span></td>
              <td>华东 / 安徽 / 合肥</td><td>2026-02-05 14:30</td>
              <td>
                <button class="btn btn-op primary" type="button">
                  <svg class="ic" style="width:12px;height:12px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                  查看
                </button>
                <button class="btn btn-op" type="button">
                  <svg class="ic" style="width:12px;height:12px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                  编辑
                </button>
              </td>
            </tr>
            <tr>
              <td>☐</td><td>3</td><td>测试客户（停用）</td><td>CUS-099</td>
              <td><span class="tag muted">机构</span></td>
              <td><span class="tag muted">停用</span></td>
              <td>华东 / 江苏 / 南京</td><td>2025-12-01 11:00</td>
              <td>
                <button class="btn btn-op primary" type="button">
                  <svg class="ic" style="width:12px;height:12px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                  查看
                </button>
                <button class="btn btn-op" type="button">
                  <svg class="ic" style="width:12px;height:12px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                  编辑
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="list-pager-bar">共 128 条 · 第 1/13 页</div>
      </div>
    </section>

    <p class="dim-note">
      <strong>L2 新增：</strong>page-desc、title-bar-heading 竖条、按钮图标、状态/类型 Tag、操作列图标按钮、四列筛选。
      仍无头像缩略图/进度条/图表——适合作为<strong>批量 CRUD 页</strong>的默认目标档。
      <br><strong>对比：</strong><a href="ui-richness-L1-list-plain.html">L1</a> ·
      <a href="ui-richness-L3-list-rich.html" style="color:var(--primary-dark)">L3 复合列表</a>
    </p>
  </div>
</body>
</html>