Files
aurora-admin/.design_library/kole-ui/preview/component-table.html
T
aurora-admin f1fbfc2ddb
Regression / regression (push) Canceled after 0s
feat(品牌标识): 几何 K 图标(favicon/顶栏标记/theme-color) + 并行会话成果入库
## 品牌标识(本次会话)

起因:品牌此前没有任何图形标识 —— 唯一 favicon 是内联 data-URI 里的字母「A」,
那是 v2.0.0「Aurora Admin → Kole UI」改名漏掉的一处(PC 顶栏也是「A」,
移动端站已是「K」;移动端文档站则完全没有 favicon)。

- 几何:24 网格三个互不接触的笔画(竖 + 两斜),圆头描边;
  描边 2.25 → 16px 标签页尺寸下正好 1.5px = 规范原文「描边1.5px」
- 取色分两套(刻意):favicon 硬编码品牌蓝/白(渲染在浏览器标签栏,不继承 kole-dark);
  顶栏标记走 currentColor(实测暗色下自动转 rgb(20,22,28))
- 新增 theme-color 双条(light #FFFFFF / dark #1C1F26,取 --kole-color-card-bg)
- 修 site/app.js hero 标语 KOLE ADMIN → KOLE UI(改名变形残留)
- 移动端 7 个模板补 favicon(此前计数 0)

验收:门禁 9 条全 OK(site-routing/site-routes/mobile-docs/mobile-site/isolation/
theme/nav/i18n/icons);PC 回归 1464/1464 · 移动端 807/807,各连跑 8 次一致;
两端 favicon 405 字节逐字节一致;PC 站控制台错误 1→0。

## 并行会话成果(本次一并入库)

- 图标系统:2576 图标(TDesign/Element Plus,MIT)+ 11 端注入 + 5 个构建门禁工具
  + IconPreview 预览页 + ICON-SPEC.md 冻结规格
- 移动端平台:47 组件 × 6 端 + 文档站 53 页 + 隔离门禁
- PC 组件:103 个大后台组件 / 组件11 批次
- uni-app:PC 端试点 + 移动端端实现 + 真实编译验证

## 工程

- .gitignore 补 .scratch/ 与 .zcode-preexisting-*.txt(会话中间产物,实测 9.1MB,不入库)
- CHANGELOG 补品牌标识条目
- ROADMAP 登 S8-P4(品牌标识任务包 + og:image/apple-touch-icon 未做部分)
2026-09-21 10:05:48 +08:00

58 lines
7.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>数据表格 Table</title>
<link rel="stylesheet" href="../colors_and_type.css">
<script src="https://unpkg.com/lucide@1.8.0/dist/umd/lucide.min.js"></script>
<style>
/* Page scaffold — NOT extracted */
body { margin: 0; padding: var(--space-12); background: var(--color-bg-page); font-family: var(--font-family); color: var(--color-text-body); font-size: var(--font-size-body); }
.row { display: flex; gap: var(--space-8); align-items: center; margin-bottom: var(--space-8); flex-wrap: wrap; }
.label { width: 92px; flex-shrink: 0; font-size: var(--font-size-caption); color: var(--color-text-secondary); white-space: nowrap; }
.divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-16) 0; }
.tbl-wrap, .tbl-group { width: 100%; }
.tbl-wrap { overflow-x: auto; }
/* @component-css-start */
.tbl { width: 100%; border-collapse: collapse; background: var(--color-bg-card); }
.tbl th { background: var(--color-bg-table-header); color: var(--color-text-body); font-weight: var(--font-weight-body); text-align: left; white-space: nowrap; }
.tbl th, .tbl td { height: var(--space-48); padding: 0 var(--space-16); border-bottom: 1px solid var(--color-border); }
.tbl tbody tr:hover { background: var(--color-bg-page); }
.tbl tr.selected { background: var(--color-brand-bg); }
.tbl .num { text-align: right; }
.tbl .ops { text-align: right; white-space: nowrap; }
.tbl .ops a { color: var(--color-brand); text-decoration: none; }
.tbl .ops a + a { margin-left: var(--space-8); }
.tbl .ops a:hover, .tbl .sort:hover, .tbl .expand:hover, .batchbar .btn:hover { background: var(--color-brand-bg); }
.tbl .ops a, .tbl .sort, .tbl .expand, .batchbar .btn { transition: background .15s, border-color .15s; }
.tbl .sel { width: var(--icon-size-16); height: var(--icon-size-16); vertical-align: middle; }
.tbl .sort, .tbl .expand { display: inline-flex; align-items: center; }
.tbl .sort { gap: var(--space-4); }
.tbl .fixed { position: sticky; left: 0; background: var(--color-bg-card); }
.tbl th.fixed { background: var(--color-bg-table-header); }
.tbl .detail td { background: var(--color-bg-page); }
.tbl-wrap .tbl { min-width: 720px; }
.batchbar { display: flex; align-items: center; gap: var(--space-8); height: var(--space-48); padding: 0 var(--space-16); background: var(--color-bg-card); border-bottom: 1px solid var(--color-border); }
.batchbar .count { color: var(--color-text-secondary); }
.batchbar .btn { color: var(--color-brand); background: none; border: none; padding: 0; }
/* @component-css-end */
</style>
</head>
<body>
<div class="row"><span class="label">基础表格</span></div>
<div class="row"><table class="tbl" data-evidence-sample="基础表格"><thead><tr><th>订单编号</th><th>客户名称</th><th class="num">订单金额</th><th class="ops">操作</th></tr></thead><tbody><tr><td>SO-24001</td><td>华信科技</td><td class="num">¥128,000</td><td class="ops"><a>编辑</a><a>删除</a></td></tr><tr><td>SO-24002</td><td>蓝海贸易</td><td class="num">¥56,800</td><td class="ops"><a>编辑</a><a>删除</a></td></tr><tr><td>SO-24003</td><td>中远物流</td><td class="num">¥23,400</td><td class="ops"><a>编辑</a><a>删除</a></td></tr></tbody></table></div>
<div class="row"><span class="label">可排序</span></div>
<div class="row"><table class="tbl" data-evidence-sample="可排序"><thead><tr><th>订单编号</th><th>客户名称</th><th class="num"><span class="sort">订单金额<i data-lucide="chevron-up" width="14" height="14"></i></span></th><th class="ops">操作</th></tr></thead><tbody><tr><td>SO-24001</td><td>华信科技</td><td class="num">¥128,000</td><td class="ops"><a>编辑</a><a>删除</a></td></tr><tr><td>SO-24002</td><td>蓝海贸易</td><td class="num">¥56,800</td><td class="ops"><a>编辑</a><a>删除</a></td></tr><tr><td>SO-24003</td><td>中远物流</td><td class="num">¥23,400</td><td class="ops"><a>编辑</a><a>删除</a></td></tr></tbody></table></div>
<div class="row"><span class="label">行选择</span></div>
<div class="row"><table class="tbl" data-evidence-sample="行选择"><thead><tr><th></th><th>订单编号</th><th>客户名称</th><th class="num">订单金额</th><th class="ops">操作</th></tr></thead><tbody><tr><td><input type="checkbox" class="sel"></td><td>SO-24001</td><td>华信科技</td><td class="num">¥128,000</td><td class="ops"><a>编辑</a><a>删除</a></td></tr><tr class="selected"><td><input type="checkbox" class="sel" checked></td><td>SO-24002</td><td>蓝海贸易</td><td class="num">¥56,800</td><td class="ops"><a>编辑</a><a>删除</a></td></tr><tr><td><input type="checkbox" class="sel"></td><td>SO-24003</td><td>中远物流</td><td class="num">¥23,400</td><td class="ops"><a>编辑</a><a>删除</a></td></tr></tbody></table></div>
<hr class="divider">
<div class="row"><span class="label">固定列</span></div>
<div class="row"><div class="tbl-wrap"><table class="tbl" data-evidence-sample="固定列"><thead><tr><th class="fixed">订单编号</th><th>客户名称</th><th class="num">订单金额</th><th>交付方式</th><th class="ops">操作</th></tr></thead><tbody><tr><td class="fixed">SO-24001</td><td>华信科技</td><td class="num">¥128,000</td><td>线上交付</td><td class="ops"><a>编辑</a><a>删除</a></td></tr><tr><td class="fixed">SO-24002</td><td>蓝海贸易</td><td class="num">¥56,800</td><td>线下交付</td><td class="ops"><a>编辑</a><a>删除</a></td></tr><tr><td class="fixed">SO-24003</td><td>中远物流</td><td class="num">¥23,400</td><td>线上交付</td><td class="ops"><a>编辑</a><a>删除</a></td></tr></tbody></table></div></div>
<div class="row"><span class="label">展开行</span></div>
<div class="row"><table class="tbl" data-evidence-sample="展开行"><thead><tr><th></th><th>订单编号</th><th>客户名称</th><th class="num">订单金额</th><th class="ops">操作</th></tr></thead><tbody><tr><td><span class="expand"><i data-lucide="chevron-down" width="14" height="14"></i></span></td><td>SO-24001</td><td>华信科技</td><td class="num">¥128,000</td><td class="ops"><a>编辑</a><a>删除</a></td></tr><tr class="detail"><td></td><td colspan="4">企业版 × 12 套,交付 2024-07-01</td></tr><tr><td><span class="expand"><i data-lucide="chevron-right" width="14" height="14"></i></span></td><td>SO-24002</td><td>蓝海贸易</td><td class="num">¥56,800</td><td class="ops"><a>编辑</a><a>删除</a></td></tr><tr><td><span class="expand"><i data-lucide="chevron-right" width="14" height="14"></i></span></td><td>SO-24003</td><td>中远物流</td><td class="num">¥23,400</td><td class="ops"><a>编辑</a><a>删除</a></td></tr></tbody></table></div>
<div class="row"><span class="label">批量操作</span></div>
<div class="row"><div class="tbl-group"><div class="batchbar"><span class="count">已选择 2 项</span><button class="btn">批量删除</button><button class="btn">批量导出</button></div><table class="tbl" data-evidence-sample="批量操作"><thead><tr><th></th><th>订单编号</th><th>客户名称</th><th class="num">订单金额</th><th class="ops">操作</th></tr></thead><tbody><tr><td><input type="checkbox" class="sel" checked></td><td>SO-24001</td><td>华信科技</td><td class="num">¥128,000</td><td class="ops"><a>编辑</a><a>删除</a></td></tr><tr><td><input type="checkbox" class="sel" checked></td><td>SO-24002</td><td>蓝海贸易</td><td class="num">¥56,800</td><td class="ops"><a>编辑</a><a>删除</a></td></tr><tr><td><input type="checkbox" class="sel"></td><td>SO-24003</td><td>中远物流</td><td class="num">¥23,400</td><td class="ops"><a>编辑</a><a>删除</a></td></tr></tbody></table></div></div>
<script>lucide.createIcons();</script>
</body>
</html>