aurora-admin
f1fbfc2ddb
Regression / regression (push) Canceled after 0s
## 品牌标识（本次会话） 起因：品牌此前没有任何图形标识 —— 唯一 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 未做部分）
4.4 KiB
4.4 KiB
47 · 表格 Table
47.1 用途
把多条同构记录按列并排，用于「订单列表 / 库存明细 / 对账单」这类需要逐行横向对比的场合；移动端与桌面端的关键差别是宽度根本不够：桌面上 8 列一眼看完，375px 的手机上同样 8 列每列只剩 47px，文字全部折断。因此移动端表格必须做「在组件自己的容器里横向滚动」——绝不能让页面整体横向溢出，否则整页会跟着左右晃、顶栏与底部栏一起位移；列更多或更该读字段名时改用 mode=card，把每行摊成键值对，彻底不需要横滚。
47.2 结构（anatomy）
table：根元素，纵向排列「视口 + 空态」table__viewport：横向滚动的唯一发生点（overflow-x: auto），页面整体不横向溢出table__inner：原生table，min-width由--kole-m-table-min-width给出；超过容器即滚table__caption：可选表格标题（说明这张表在讲什么）table__head/table__head-cell：表头与表头单元格，position: sticky固定在滚动视口顶部table__row/table__cell：数据行与单元格，行高不小于 44px；单元格可带data-label（卡片模式的字段名来源）table__empty：空态占位，role="status"+aria-live="polite"
47.3 变体维度
mode：scroll（横向滚动，列多时用）/card（每行摊成键值对，小屏彻底不横滚）size：default（常规行高）/compact（收紧内边距与字号；行高仍不小于 44px）stripe：false（纯白底）/true（偶数行浅底，便于横向扫读时对齐行）bordered：false（只有横线）/true（单元格之间也有竖线）
47.4 状态
- default：常态
- selected：当前选中行，
is-selected与aria-selected同步（行选中不是复选框，单行高亮即可） - disabled：整行置灰且不响应，写
aria-disabled="true" - empty：没有数据时的占位文案（列宽语义不变，不会把容器撑宽）
- clickable：行可点（
clickable=true时整行都是热区，按下反馈是整行背景变化）
47.5 交互与触控
- 横向滚动发生在
table__viewport上：根与视口都写min-width: 0，否则内部min-width会把父级顶宽、页面整体横向溢出 - 选项行高不小于 44px；触屏上横向滑动不被父级纵向滚动吞掉（
touch-action: pan-x pan-y） - 表头用
position: sticky而不是fixed——fixed会脱出滚动容器，横向滚动时表头不跟随 - 长文本列默认单行省略，完整值放
title；数字列用等宽字右对齐，便于按位对比 - 点整行即选中（同表互斥）；行内的独立控件（按钮 / 链接）要阻止冒泡，避免一次点击触发两个动作
- 行可点时同时提供键盘路径（聚焦后回车 / 空格），不把鼠标点击当成唯一入口
47.6 无障碍
- 用原生
table/thead/tbody/tr/th/td，表头写scope="col"（读屏能报出列名） - 空态用
role="status"+aria-live="polite"播报占位文案 - 禁用行写
aria-disabled="true"，读屏播报不可用 - 可点行必须同时可聚焦：
clickable=true时行写tabindex="0"+role="row"+aria-selected，聚焦后回车 / 空格即选中 —— 只有鼠标点击而没有键盘路径是缺陷，不是简化 - 焦点环画在行内第一个单元格上（
tr上的outline在部分浏览器不渲染） - 行内的独立控件（链接 / 按钮）有可见焦点环，并阻止冒泡
mode=card时字段名由data-label生成并参与读屏（键值对在视觉与语义上都成立）- 可点行的
cursor: pointer只给表体行：表头行不承载点击，跟着变手型会把「这里能点」这个信号弄错
47.7 doNotInvent
- 虚拟滚动与无限加载的触发规则（由宿主容器负责；本组件不接管纵向滚动）
- 服务端排序 / 筛选 / 分页（排序图标与请求都由宿主发起）
- 列宽拖拽调整与列显隐设置（移动端没有这个操作面）
- 冻结列（
position: sticky的横向版本；当前只固定表头的纵向位置）
47.8 unknowns
- 表头是否需要在纵向滚动时也吸顶（当前只在宿主给固定高度时生效）
- 行选中是单选还是多选（当前单选；多选应交给 Checkbox 列）
- 卡片模式下字段名的排列是「左标签右值」还是「上标签下值」