root/aurora-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
aurora-admin/.design_library/kole-ui-mobile/spec/parts/_merged/mobile-icon.md
T
aurora-admin f1fbfc2ddb
Regression / regression (push) Canceled after 0s
Details
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

2.0 KiB
Raw Permalink Blame History

19 · 图标 Icon

19.1 用途

用一个字形表达状态或动作（选中、警告、返回、更多）。移动端与桌面端的差别在尺寸基线：手指操作要求图标更大、且图标自身从不承担点击 —— 点击由包裹它的 44px 按钮提供。

19.2 结构（anatomy）

  • icon：根元素，一个固定边长的内联盒子，负责尺寸与颜色
  • glyph：字形节点，纯符号或内联 SVG，不带语义
  • label：可选的无障碍名称，有值时图标成为「有语义的图」，无值时对读屏隐藏
  • size：四档边长（small 16 / default 20 / large 24 / xlarge 32）
  • tone：颜色来源（继承父级或取语义色）

19.3 变体维度

  • size：small / default / large / xlarge
  • tone：default / brand / secondary / danger
  • spin：false / true

19.4 状态

  • default：常态（静态图）
  • spinning：持续旋转，仅表示「进行中」，不表示成功
  • disabled：无独立禁用态 —— 由父级按钮 / 单元格置灰，图标继承其颜色

19.5 交互与触控

  • 图标自身不是热区；可点时由父级按钮提供不小于 44×44 的点击区
  • 图标与相邻文字的间距取 4px（与按钮内图标一致）
  • spin=true 在 prefers-reduced-motion: reduce 下停止旋转（无障碍硬要求）
  • 同一行内图标与文字基线对齐（vertical-align: -0.125em），避免文字被顶高

19.6 无障碍

  • label 有值时 role="img" + aria-label，读屏读出该名称
  • label 为空时 aria-hidden="true"，纯装饰不进读屏序列
  • 图标不得作为唯一信息载体：颜色变化必须伴随文字或 label
  • 语义色图标与背景的对比度不低于 3:1（WCAG 1.4.11 非文本对比）

19.7 doNotInvent

  • 图标资源清单（本仓库不引图标字体，字形由各端内置表或内联 SVG 提供）
  • 图标更换 / 过渡动画
  • 点击图标自身触发动作

19.8 unknowns

  • 业务侧自定义字形的注册方式
  • 图标与文字组合时的推荐最小间距（本实现取 4px）
Reference in New Issue View Git Blame Copy Permalink