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 未做部分）
93 lines
8.4 KiB
Markdown
93 lines
8.4 KiB
Markdown
# Kole UI Design System
|
||
|
||
A design system reconstruction of **Kole UI** — B端中后台管理系统，适用于 ERP、CRM、数据管理平台。整套体系围绕"理性、高效、克制"展开：信息密度适中，层级清晰，交互反馈即时，不追求装饰性表达。
|
||
|
||
### Source
|
||
|
||
11 份中文设计规范文档（1 份核心规范 + 9 批补充组件规范），品牌主色 `#2F54EB`。规范以结构化描述为主，无 Figma 源文件，所有 token 已收敛为单一 CSS 变量文件。
|
||
|
||
### What this covers
|
||
|
||
- **Foundations** — 色彩（品牌/中性/语义）、字体（PingFang SC / 思源黑体 / Inter / DIN）、间距（4px 基准）、圆角、阴影、图标尺寸
|
||
- **Components** — 6 个核心组件契约与预览：button、input、select、table、card、modal
|
||
- **Component styles** — `components.css` 聚合组件样式，可直接引用
|
||
|
||
## Content Fundamentals
|
||
|
||
### Voice & tone
|
||
|
||
专业、理性、高效的中文界面语言。文案以中文为主，信息密度适中，避免过度装饰与冗余修辞。操作动词明确直接（新建、编辑、删除、提交、查询、重置），不出现营销化措辞或情感化表达。界面中不使用 emoji，状态反馈依赖语义色而非文字情绪。
|
||
|
||
### Concrete copy examples
|
||
|
||
- 操作入口：*"新建"*、*"编辑"*、*"删除"*、*"提交"*、*"查询"*、*"重置"* — 一律使用动词短语，动作对象由上下文承载
|
||
- 反馈文案：成功/失败/警告三类状态均有明确文字，如错误提示给出具体可操作的原因与修正方向，而非笼统的"操作失败"
|
||
|
||
### When generating copy
|
||
|
||
- 操作路径最短：能一步完成的操作不拆两步，按钮文字即动作本身
|
||
- 反馈文案明确：成功/失败/警告三态齐全，错误提示具体可操作（指出字段、说明原因、给出修正建议）
|
||
- 按钮文字用动词短语（新建、保存、确认、取消），不用名词或形容词
|
||
- 占位文字（`#BFBFBF`）只描述输入预期，不承载说明性长文案
|
||
|
||
## Visual Foundations
|
||
|
||
### Color
|
||
|
||
品牌主色 `#2F54EB` 是一枚理性克制的科技蓝——不偏紫、不偏青，明度适中，在白色卡片上对比度足够支撑主按钮、选中态与链接。交互层级通过同色系三档推进：悬停 `#1D39C4`、点击 `#10239E`，浅色背景 `#F0F5FF` 用于选中背景、标签背景与表格悬停行，形成"浅底—主色—深色"的完整按压反馈链。辅助色 `#13C2C2` 仅作点缀，不参与主操作。
|
||
|
||
中性色系承担了绝大部分界面骨架：页面背景 `#F5F7FA` 与卡片 `#FFFFFF` 构成明暗分区，边框 `#E8ECF1` 是唯一的描边色，正文 `#262626`、标题 `#1F2329`、次要文字 `#6E6E6E`、占位 `#BFBFBF` 形成四级文字层级。语义色独立于品牌色系：成功 `#2E7D0A`、警告 `#8C5A00`、错误 `#CF1322`、信息 `#096DD9`，只出现在对应状态场景，不与品牌蓝混用。整体氛围是"白底蓝芯、灰阶骨架"——色彩服务于信息层级，而非装饰。
|
||
|
||
### Typography
|
||
|
||
中文使用 **PingFang SC**（macOS/iOS），回退 **思源黑体（Source Han Sans SC）** 与 **Microsoft YaHei**（Windows）；数字与英文使用 **Inter**，回退 **DIN**（数据场景）。数字字体独立于中文栈，保证表格与统计数字的等宽感与可读性。
|
||
|
||
字号共 5 级，行高与字号严格配对：Display 24/32 Semibold（页面大标题）、H1 20/28 Semibold（卡片标题、弹窗标题）、H2 16/24 Medium（区块标题）、Body 14/22 Regular（正文、表格、表单）、Caption 12/20 Regular（辅助说明、时间戳）。正文 14px 是默认工作字号，全系统禁止小于 12px。标题用 Semibold 而非 Bold，避免黑体字重过重破坏克制感。
|
||
|
||
### Spacing
|
||
|
||
4px 基准间距刻度：4/8/12/16/20/24/32/40/48/64。使用规则按层级收敛——组件内部 4/8/12，组件之间 16/24，区块之间 32/48，页面边距 24。控件高度与间距刻度同源：小 24px、默认 32px、大 40px，保证表单与表格的密度一致性。
|
||
|
||
### Radius
|
||
|
||
圆角按元素语义分四档，整体偏小、偏硬朗：2px 用于标签、徽章、复选框；4px 用于按钮、输入框、选择器；6px 用于表格、卡片内部元素、Popover、日期面板；8px 用于卡片、弹窗、抽屉。没有胶囊形圆角——这是刻意的选择，小圆角强化了工具型界面的利落感。
|
||
|
||
### Shadow / Elevation
|
||
|
||
3 层克制阴影，透明度低、扩散小，只做层级提示不做氛围渲染：低 `0 1px 4px rgba(0,0,0,0.06)` 卡片默认态；中 `0 4px 12px rgba(0,0,0,0.08)` 卡片悬停、下拉菜单、Popover；高 `0 8px 24px rgba(0,0,0,0.12)` 弹窗、抽屉。阴影层级与圆角层级一一对应，悬浮物（弹窗/抽屉）同时获得最大圆角与最高阴影。
|
||
|
||
### Borders, Backgrounds, Motion, Iconography
|
||
|
||
边框统一 `#E8ECF1` 1px，全系统只有这一种描边色；表头背景 `#FAFAFA` 与正文区形成极浅的横向分区；禁用背景 `#F5F5F5` 配灰字，禁用态不保留品牌色。遮罩 `rgba(0,0,0,0.45)` 用于弹窗，图片遮罩 `rgba(0,0,0,0.85)`。动效遵循"反馈及时"原则：fast 0.2s / base 0.3s / slow 0.4s，标准缓动 ease。图标尺寸 16/20/24 三档，与控件高度刻度配套。
|
||
|
||
## Component Patterns
|
||
|
||
| Component | File | Key Insight |
|
||
|---|---|---|
|
||
| button | `preview/component-button.html` | 5 类型 × 3 尺寸，主色驱动，禁用态灰底灰字 |
|
||
| input | `preview/component-input.html` | 聚焦外发光 2px 品牌色，错误红边框 + 12px 提示 |
|
||
| select | `preview/component-select.html` | 选中项浅蓝底 + 品牌色文字 + 勾选图标 |
|
||
| table | `preview/component-table.html` | 48px 行高，数字右对齐，选中行浅蓝 |
|
||
| card | `preview/component-card.html` | 8px 圆角，边框或低阴影双形态 |
|
||
| modal | `preview/component-modal.html` | 三档宽度，遮罩 0.45，次主按钮右下角 |
|
||
|
||
## Index
|
||
|
||
- `README.md` — 本文档：品牌叙事与设计决策说明
|
||
- `SKILL.md` — Agent 技能入口（快速地图 + 核心决策）
|
||
- `colors_and_type.css` — 全部设计 token（色彩/字体/间距/圆角/阴影/动效）
|
||
- `css.json` — 结构化 token 数据（程序化消费）
|
||
- `components.css` — 聚合组件样式（从预览页提取）
|
||
- `components/` — 全量组件契约 JSON + 全量组件索引（103 项实现：10 个核心规范组件 + 93 个扩展，含规格批次映射）
|
||
- `preview/` — 组件预览 HTML 卡片
|
||
- `../../frameworks/` — 103 个实现组件（HTML / CSS / JSX / Vue2 / Vue3 五种形态，slug 映射见 `components/index.json`）
|
||
- `library-consumption.json` — 下游读取顺序建议
|
||
|
||
## Caveats / known substitutions
|
||
|
||
1. **字体回退**：PingFang SC 仅 macOS/iOS 原生可用，Windows 环境回退思源黑体（Source Han Sans SC）→ Microsoft YaHei；数字字体 Inter 缺失时回退 DIN。若两者均不可用，最终回退 `-apple-system` / `Segoe UI`，但数字场景建议优先保证 DIN。
|
||
2. **图标**：源规范未提供导出 SVG 图标集，预览页使用内联 SVG 占位图标，风格为线性 1.5px 描边。正式接入时需按 16/20/24 三档尺寸替换为品牌图标库。
|
||
3. **动效值**：0.2s/0.3s/0.4s 与 ease 缓动由规范"反馈及时"原则推导，非规范显式声明，属推断值。
|
||
4. **数据缺口（已清理并升级为索引）**：组件2.txt 与 组件3.txt 原内容重复，已将 组件3.txt 改为索引文件（保留批2组件实现覆盖清单，正文以 组件2.txt 为准）；组件8.txt 原为空文件，现升级为「批次 ↔ 实现覆盖」索引（各批次规格标题数与 frameworks 实现数对照）。批次号保持连续唯一序列：核心 / 第二批(组件2) / 第三批(组件3·索引) / 第四批(组件4) / 第五批(组件5) / 第六批(组件6) / 第七批(组件7) / 第八批(组件8·覆盖索引) / 第九批(组件9) / 第十批(组件10) / 第十一批(组件11·Element UI 常用组件补齐)。不影响 token 完整性。
|
||
5. **推断值**：控件高度（24/32/40）、图标尺寸（16/20/24）由间距刻度与组件规范推导，未在核心规范中显式列出。
|
||
6. **实现层对齐（2026-09-20）**：`components/index.json`（schemaVersion 3）已登记 frameworks/ 全部 103 个实现组件并标注规格批次（含新增组件11）；`library-consumption.json` 的 supportComponents 与 `uikit-plan.json` 仍记录原有设计库消费边界，新增组件通过同一索引和契约链路消费。 |