aurora-admin
ba3f3c53f9
被问到「这么多组件能保证不出错吗」——诚实回答是不能。改为四轮机器审计 + 实测，把「我检查过了」替换成可复现的数字，并修掉查出的一切真问题。 审计 1 · 契约保真度（358 条 usageHints 回规格原文核对） - 逐字命中 336 条（93.9%）；剩余 22 条经人工比对为同义改写（数值确在规格 别处），非发明 - 发现真实不一致：rate.json 选中星色仍写 #FAAD14，规格已在 v1.3.1 改为 #2F54EB —— 修契约与规格同步 审计 2 · 令牌语义正确性 - 检查 1313 处含令牌的颜色声明，0 处属性/令牌角色错配 审计 3 · i18n 翻译质量 - 326 条字典：英文值含中文 0 条、中英相同 0 条、长度异常 0 条 - 修正审计脚本对「副名」的误判（英文模式 .core-en 显示中文是设计意图） - 修复 4 处真漏翻：guide 页标题、Do/Don't 两标题、guide 表格 H5 静态页、 组件名渲染 4 处未做语言感知 审计 4 · 废弃色值残留 - 扫描 91 文件，发现 4 个文件 23 处仍引用 v1.3.1 前旧色值 - 最严重：css.json（For Agents 页宣称的结构化令牌源，机器读取方会拿到 过时颜色）已同步 10 处；README.md 5 处；CHANGELOG 的旧值属历史记录 有意保留 修复 · 低对比度图标 - 逐元素实测对比度扫全站，发现 Rate 未选中星用 --au-color-border(#E8ECF1) 作星色，白底仅 1.19:1 —— 边框色是装饰性色值，作图标不合格 - 新增 --au-color-icon-inactive #8F8F8F（白底 3.23:1，满足 WCAG 1.4.11） 令牌 74 → 75 - 同批扫出另 5 处经核实为禁用态（WCAG 1.4.3 豁免）或深色遮罩白字 （检测器把半透明底当白底），非缺陷 修复 · 回归偶发（第三次根治） - 现象：多次连跑偶发 99.9%，但单页打开总通过 - 根因：收集器 8 秒超时兜底直接记 fail:1；并发 4 个 iframe 抢主线程时 慢页面会撞超时 - 修法：阈值 8s→12s、超时后重试一次、超时与断言失败分开统计（timedOut 字段不计入通过率分母） - 验证：八次连跑全部 100% / 0 失败 / 79 页全通过 / 0 超时
Aurora Admin Design System
A design system reconstruction of Aurora Admin — B端中后台管理系统，适用于 ERP、CRM、数据管理平台。整套体系围绕"理性、高效、克制"展开：信息密度适中，层级清晰，交互反馈即时，不追求装饰性表达。
Source
10 份中文设计规范文档（1 份核心规范 + 8 批补充组件规范），品牌主色 #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/— 6 个组件契约 JSON + 全量组件索引（79 项实现：10 个核心规范组件 + 69 个扩展，含规格批次映射）preview/— 组件预览 HTML 卡片../../frameworks/— 79 个实现组件（HTML / CSS / JSX / Vue2 / Vue3 五种形态，slug 映射见components/index.json）library-consumption.json— 下游读取顺序建议
Caveats / known substitutions
- 字体回退：PingFang SC 仅 macOS/iOS 原生可用，Windows 环境回退思源黑体（Source Han Sans SC）→ Microsoft YaHei；数字字体 Inter 缺失时回退 DIN。若两者均不可用，最终回退
-apple-system/Segoe UI，但数字场景建议优先保证 DIN。 - 图标：源规范未提供导出 SVG 图标集，预览页使用内联 SVG 占位图标，风格为线性 1.5px 描边。正式接入时需按 16/20/24 三档尺寸替换为品牌图标库。
- 动效值：0.2s/0.3s/0.4s 与 ease 缓动由规范"反馈及时"原则推导，非规范显式声明，属推断值。
- 数据缺口（已清理并升级为索引）：组件2.txt 与 组件3.txt 原内容重复，已将 组件3.txt 改为索引文件（保留批2组件实现覆盖清单，正文以 组件2.txt 为准）；组件8.txt 原为空文件，现升级为「批次 ↔ 实现覆盖」索引（各批次规格标题数与 frameworks 实现数对照）。批次号保持连续唯一序列：核心 / 第二批(组件2) / 第三批(组件3·索引) / 第四批(组件4) / 第五批(组件5) / 第六批(组件6) / 第七批(组件7) / 第八批(组件8·覆盖索引) / 第九批(组件9) / 第十批(组件10)。不影响 token 完整性。
- 推断值：控件高度（24/32/40）、图标尺寸（16/20/24）由间距刻度与组件规范推导，未在核心规范中显式列出。
- 实现层对齐（2026-09-06）：
components/index.json（schemaVersion 3）已登记 frameworks/ 全部 79 个实现组件并标注规格批次（组件1/2/4/5/6/7/9）；library-consumption.json的 supportComponents 回填 73 个支持组件；uikit-plan.json原缺失的三个 fixed slot（navigation / menu / tag）已映射到现有实现 SideMenu / Dropdown / Tag，warnings 清空。