本提交含两条并行工作线,因互相咬合(package.json scripts、regression.yml、 npm run build 链)无法按文件干净拆分,故合并为一次自洽提交。 ## 详情页减重(本轮主任务:修复「AI 干太重」) - 导航收敛:宽屏只用右侧目录、≤1200px 只用页内 sticky 导航,纯 CSS 媒体查询 实现(不引入 JS 宽度监听)。此前两套导航同时可见,active 状态互相打架。 - 入口去重:标题区由「查看示例/在线测试/契约 JSON」三个减为「在线测试」一个; 契约 JSON 归入实现资源;删除示例底部重复的「在线测试」。 - 示例工具栏:删除与目录锚点重复的示例下拉选择器;「全部展开代码」只在 示例数 >1 时出现(103 个组件里 49 个仅 1 个示例,此前恒显示)。 - 重复文案:示例区两句同义导语合并为一句。 - 首页 CTA 由 5 个减为 2 个(浏览组件/快速开始),测试总览入口挂到已有的 通过率统计卡上,不再另占 Hero 按钮。 - 统一详情取数:抽出 fetchDetail/loadDetail 作为 details/*.json 的唯一路径, FAQ 不再自行 fetch 一遍,与组件页共用缓存与失败兜底。 ## i18n - 删除 12 组重复键(含整段 FAQ 说明),字典 604 → 585 唯一键。 - 删除本次改动产生的 6 个死键。 - verify-i18n.mjs 新增 `unique dictionary keys` 断言:重复键在对象字面量里 是静默的后值覆盖,此前无从发现;现由门禁拦住。 ## 文档事实修正(实测为准) - TESTING/CONTRIBUTING:79 → 103 组件;旧断言数改为回指 tests/report.json。 - PLATFORMS:移动端 108 文件/18 端 → 282 文件/47 端;契约 5 → 47; 令牌 17 → 15;uni-app SFC 21 → 50。 - AGENTS:断言 1405/18 页 → 1464/103 页(PC)、807/47 页(移动端)。 - package.json:YOUR-ACCOUNT 占位 → gitea 实址与 kole-ui.mymoyu.top。 ## 品牌标识(并行会话成果,一并入库) - brand-mark.json 收归真源,build:brand 生成 favicon 与单色 SVG; PC 与移动端共用资产,verify:brand 24 条断言。 - regression.yml 增加 verify:brand 步骤。 ## 门禁与验收 新增工具:verify-component-page.mjs(86 条真实浏览器断言,随详情页改造同步 更新为「只允许一套导航可见」)、verify-brand-mark.mjs、lib/i18n-dead-keys.mjs (只读诊断)。 回归:PC 100%(1464/1464,103 页,N/A 50)· 移动端 100%(807/807,47 页)。 门禁:component-page 86 · i18n 17 · brand 24 · routes all · smoke all · theme OK · isolation 31 · nav all · examples 9 · api-docs 10 · mobile-docs 12。 已知未做:i18n 另有约 44 条历史死键(非本次产生),已记为 ROADMAP S8-P6; 顶栏与悬浮区的两个主题入口为刻意设计(verify-theme 断言其互斥),未删。
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
- 字体回退: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) / 第十一批(组件11·Element UI 常用组件补齐)。不影响 token 完整性。
- 推断值:控件高度(24/32/40)、图标尺寸(16/20/24)由间距刻度与组件规范推导,未在核心规范中显式列出。
- 实现层对齐(2026-09-20):
components/index.json(schemaVersion 3)已登记 frameworks/ 全部 103 个实现组件并标注规格批次(含新增组件11);library-consumption.json的 supportComponents 与uikit-plan.json仍记录原有设计库消费边界,新增组件通过同一索引和契约链路消费。