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 未做部分）
128 lines
11 KiB
Markdown
128 lines
11 KiB
Markdown
# Kole UI 竞品网站检查报告
|
||
|
||
> 检查对象：Kole UI Design System（B 端后台管理设计系统，79 组件 × 5 端实现 + Element 风格文档站）
|
||
> 竞品范围：Ant Design、Arco Design、TDesign、Semi Design、Element Plus、Naive UI、DevUI（国内外 7 个主流 B 端组件库/设计系统官网）
|
||
> 检查方式：浏览器实地访问（含首页、组件总览、Button 组件文档页解剖），检查日期 2026-09-08
|
||
> 数据来源：各站实时快照，非二手资料
|
||
|
||
---
|
||
|
||
## 一、逐站检查结果
|
||
|
||
### 1. Ant Design（ant.design，蚂蚁集团，v6.6.3）
|
||
|
||
- **导航结构**：设计 / 研发 / 组件 / 博客 / 资源 / 国内镜像；顶栏带关键字搜索框、版本切换器、中/En 切换、RTL 方向切换。
|
||
- **组件规模**：8 大分类——通用 4、布局 7、导航 7、数据录入 18、数据展示 21、反馈 11、其他 5、重型组件 6，**合计 79 个组件**（与 Kole UI 数量相同）。
|
||
- **Button 文档解剖**（竞品中最完整）：17 个代码演示 + 「何时使用」+ API + PresetColors + **Semantic DOM 结构图** + **主题变量（Design Token）双层表**（全局 Token + 组件级 Token）+ FAQ + 设计指引。
|
||
- **主题能力**：CSS-in-JS 动态主题，独立**主题编辑器**（/theme-editor-cn），首页内置 13+ 套主题预设实时切换（MUI / shadcn / Bootstrap / 暗黑 / 玻璃 / 极客等）。
|
||
- **AI 友好（2026 明显趋势）**：官网定位语改为「AI 友好的设计系统」；提供 **For Agents 专属文档页**（docs/react/for-agents-cn.md）与 **Ant Design CLI（含官方 MCP 服务）**。
|
||
- **生态**：Pro、ProComponents、Mobile、Mini、Web3、Charts、AntV、Kitchen（Sketch 工具集）、Landing、脚手架市场、dumi、qiankun、Ant Motion。
|
||
- **检查发现的问题**：直连访问慢（本次 WebFetch 三次超时），需依赖国内镜像 ant-design.antgroup.com；页面有少量 console 报错。
|
||
|
||
### 2. Arco Design（arco.design，字节跳动）
|
||
|
||
- **导航结构**：设计 / 开发 / 生态产品；**⌘K 全局搜索**；中英文 + LTR/RTL 切换；React / Vue 双框架一键切换。
|
||
- **组件规模**：约 70 个组件，7 大分类（通用/布局/数据展示/数据输入/反馈/导航/其他）。
|
||
- **Button 文档解剖**：18 个演示块 + 设计指南 + FAQ + API。
|
||
- **主题能力**：**DesignLab 风格配置平台**（在线主题商店），样式全部 Token 化。
|
||
- **生态**：ArcoMaterial 物料平台、ArcoPro 中后台最佳实践、Webpack 插件；Figma 资源覆盖 Web / Mobile / Pro / 图标四套。
|
||
- **检查发现的问题**：`/zh-CN` 首页与 `/react/components` 总览页均渲染出「404 Not Found」内容页（SPA 路由健壮性问题，侧栏仍可用）。
|
||
|
||
### 3. TDesign（tdesign.tencent.com，腾讯）
|
||
|
||
- **导航结构**：桌面端 / 移动端 / 小程序三套解决方案；顶部搜索；多技术栈入口。
|
||
- **组件规模与技术栈**：Vue、Vue Next、React（均 Stable）+ 移动端 Vue/React、**Uniapp、Flutter**、微信小程序——**竞品中端覆盖最全**。
|
||
- **Button 文档解剖（特色鲜明）**：10 个演示 + Props/Events 分表 + **独立「设计指南」段**——何时使用、与页面布局相关、**组件搭配使用**、**推荐/慎用示例**、**相似组件**（Kole UI 契约中"不发明/未明示"的思路与之接近，值得借鉴其"相似组件"交叉引用）。
|
||
- **设计令牌**：2026-07 发布「设计资源变量版本」，**全量 Token 化**，删减冗余变体。
|
||
- **AI**：2025-08 已上线 **MCP 工具**辅助 AI 编程场景。
|
||
- **其他**：Figma/Sketch/Axure/AdobeXD 设计资源；垂直行业组件库；400+ 贡献者、1580 个行业使用案例；小程序深色模式。
|
||
|
||
### 4. Semi Design（semi.design，抖音）
|
||
|
||
- **导航结构**：组件 / 主题（DSM）/ **设计转代码（D2C）** / 模板 / 数据可视化 / 博客 / EN。
|
||
- **主题能力（最强）**：**DSM 主题商店，3000+ Design Token**，官方多品牌主题（飞书 Universe / 剪映 / 火山引擎 / 抖音创作服务）。
|
||
- **D2C**：Figma 设计稿 3–5 秒生成真实代码。
|
||
- **质量宣称**：单元测试 + E2E + **视觉对比测试**，**覆盖率 90%**——把"测试"作为首页卖点展示。
|
||
- **工程能力**：SSR（Next/Gatsby/Remix）、Web Components / shadow DOM 隔离、FA 架构（Foundation/Adapter）易迁移其他框架、Live Code 在线编辑、i18n 多语言/多时区/**RTL**、**A11y 明示 W3C 键盘交互/焦点管理/语义化**。
|
||
- **AI**：首页横幅「使用 MCP & Skills 让 AI 对 Semi 了如指掌」。
|
||
- **资源**：Figma UIKit / Iconset / Plugin 三件套；10k+ GitHub Stars、10 万+ 用户。
|
||
|
||
### 5. Element Plus（element-plus.org，v2.14.5）
|
||
|
||
- **导航结构**：指南 / 组件 / 资源 / Playground；**Ctrl+K 搜索**（与 Kole UI 相同交互）；暗色模式切换；中英双语；国内镜像。
|
||
- **组件规模**：侧栏约 86 个组件，Basic / 配置组件 / Form / Data / Navigation / Feedback 等分类。
|
||
- **Button 文档解剖**：10 个演示 + **API 三表（Attributes / Slots / Exposes）** + ButtonGroup API + **「源代码」直达链接 + 每页显示 GitHub 贡献者头像**。
|
||
- **其他**：在线 Playground（element-plus.run）；版本号直接标注在组件条目上（如 Tag 2.3.4、Splitter 2.10.0）——组件级版本徽章。
|
||
|
||
### 6. Naive UI（naiveui.com，v2.45.3）
|
||
|
||
- **定位**：Vue 3 + TypeScript，「比较完整、主题可调、使用 TypeScript、快」。
|
||
- **亮点**：内置深色模式切换；首页「换个主题」实时演示；CSS-in-JS 主题（theme-overrides，无需引 CSS 文件）；Sketch 设计资源包；配套图标库 xicons；站点极简（首页/文档/组件/搜索四个入口）。
|
||
|
||
### 7. DevUI（devui.design，华为）
|
||
|
||
- **定位**：面向企业中后台，Angular 为主（ng-devui）；设计价值观「高效、开放、可信、乐趣」。
|
||
- **结构**：设计 / 组件 / 生态；独立「设计体系」栏目；强项组件 Tree / Table 单独推荐。
|
||
- **评价**：站点信息量与更新节奏明显弱于其余六家，Table/Tree 场景深耕是其差异化。
|
||
|
||
---
|
||
|
||
## 二、横向对比表
|
||
|
||
| 维度 | Kole UI（现状） | Ant Design | Arco | TDesign | Semi | Element Plus | Naive UI | DevUI |
|
||
|---|---|---|---|---|---|---|---|---|
|
||
| 组件数量 | **79 × 5 端** | 79 | ~70 | 70+（多端） | 80+ | ~86 | 80+ | 60+ |
|
||
| 全局搜索 | ✅ Ctrl+K（分类过滤/高亮/模糊） | ✅ | ✅ ⌘K | ✅ | ✅ | ✅ Ctrl+K | ✅ | — |
|
||
| 设计令牌 | ✅ 100%（css.json） | ✅ 双层 Token | ✅ | ✅ 全量变量化 | ✅ 3000+ | — | ✅ CSS-in-JS | ✅ |
|
||
| 在线主题定制 | ✅ 主题定制器（4 键+复制 CSS） | ✅ 主题编辑器+13 套预设 | ✅ DesignLab | 变量版资源 | ✅ DSM 主题商店 | — | ✅ 换主题 | — |
|
||
| 暗色模式 | ❌（v1.2 计划） | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | — |
|
||
| Playground 在线编辑 | ❌ | demo 可复制 | ✅ | ✅ | ✅ Live Code | ✅ | ✅ | — |
|
||
| 每组件 API 表 | 6 核心（73 待补） | ✅ + Semantic DOM | ✅ | ✅ | ✅ | ✅ 三表 | ✅ | ✅ |
|
||
| 每组件设计指南 | ✅（契约含使用要点） | ✅ 何时使用/FAQ | ✅ | ✅ +相似组件/推荐慎用 | ✅ | — | — | ✅ |
|
||
| 组件测试页 | ✅ 79 个 + 通过率总览 | （内部） | （内部） | （内部） | 90% 覆盖率宣称 | — | — | — |
|
||
| Figma/Sketch 资源 | ❌ | ✅ Kitchen | ✅ 四套 | ✅ 四种工具 | ✅ 三件套 | ✅ | ✅ Sketch | — |
|
||
| 多语言 i18n | ❌（v1.2 计划 EN/JP） | ✅ 中英+RTL | ✅ 中英+RTL | ✅ | ✅+多时区 | ✅ 中英 | ✅ 中英 | ✅ 中英 |
|
||
| AI/MCP 入口 | SKILL.md（本地，未上网） | ✅ For Agents + CLI/MCP | — | ✅ MCP 工具 | ✅ MCP & Skills | — | — | — |
|
||
| 更新日志页 | ✅ CHANGELOG.md（文件） | ✅ 站内页 | ✅ 站内页 | ✅ | ✅ 博客 | ✅ 站内页 | ✅ 站内页 | — |
|
||
| 组件版本徽章 | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | — |
|
||
| 贡献者展示 | ❌ | ✅（首页） | — | ✅（400+） | — | ✅（每组件） | — | — |
|
||
|
||
> ✅=有 ❌=无 —=未观察到
|
||
|
||
---
|
||
|
||
## 三、结论与差距分析
|
||
|
||
### Kole UI 已有的相对优势
|
||
|
||
1. **组件数 × 端数**：79 组件 × 5 端实现，端覆盖不输 TDesign（其 5 端也是顶级水平）；纯静态零依赖实现是独特点。
|
||
2. **测试体系上网**：79 个可视化测试页 + 通过率总览 + 8 项通用测试矩阵（键盘可达/ARIA/对比度/token 一致性），竞品都把测试藏在内部，**Kole 反而可以把"可审计"做成卖点**（对标 Semi 的"90% 覆盖率"首页宣称）。
|
||
3. **搜索体验**：Ctrl+K + 分类过滤 + 高亮 + 模糊容错 + 搜索日志，与 Element Plus 同级。
|
||
4. **Agent 就绪底座**：已有 SKILL.md / metadata.json / library-consumption.json，只差一个公开入口（竞品 2026 年都在补 MCP / For Agents，Kole 起点比它们当初更靠前）。
|
||
|
||
### 主要差距（按优先级）
|
||
|
||
**P0 — 决定"专业度第一印象"**
|
||
|
||
1. **每组件 API 表未上网**：7 家竞品的组件页全部有 Attributes/Events/Slots 结构化 API 表；Kole 只有 6 个核心契约，73 个扩展组件无契约（PLAN v1.2 已列，需落地为文档站页面渲染）。
|
||
2. **暗色模式缺失**：7 家竞品 6 家有；Kole 文档站仅有主题定制器。计划 v1.2 的 dark variant 建议提前。
|
||
3. **For Agents 公开入口**：Ant Design / Semi / TDesign 均已上线 MCP 或 Agents 文档；Kole 应把本地 SKILL.md 转成站点公开页 + `llms.txt`，成本极低、差异化显著。
|
||
|
||
**P1 — 高价值补齐**
|
||
|
||
4. **在线 Playground**：竞品标配（Element Plus.run / Semi Live Code / Arco CodeSandbox）。Kole 纯 HTML 组件最适合做：iframe + 左侧代码 textarea 即可，零依赖可控。
|
||
5. **组件版本徽章**：竞品普遍在每个组件上标注引入版本；Kole 有 CHANGELOG 但未反向标注到组件。
|
||
6. **主题预设库**：Kole 主题定制器只有 4 键覆盖，对标 Ant Design 13 套预设 / Semi DSM 商店，可先做 5–8 套预设（科技蓝/暗黑/暖色/极简/高对比）。
|
||
|
||
**P2 — 可选项**
|
||
|
||
7. Figma/Sketch 设计资源包（竞品标配，但 Kole 无设计源文件，可输出设计规范 PDF/Token 包代替）。
|
||
8. i18n EN/JP（v1.2 已计划）。
|
||
9. 「相似组件」「推荐/慎用」「组件搭配使用」三个设计指南栏目（TDesign 特色，与 Kole 契约的"不发明/未明示"字段天然对应，可从契约 JSON 自动生成）。
|
||
|
||
### 顺带发现的竞品网站问题（可作访谈素材）
|
||
|
||
- Arco Design 首页与组件总览路由 404（SPA 健壮性）。
|
||
- ant.design 直连超时严重，需镜像站；首页存在 console 报错。
|
||
- DevUI 更新停滞感明显——B 端设计系统"长期维护"信号（更新日志、版本节奏）本身就是竞争力，Kole 的 CHANGELOG 应在站点首屏露出。
|