90 lines
3.5 KiB
HTML
90 lines
3.5 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>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>
|