refactor(详情页+S8): 详情页减重(导航互斥/入口去重/i18n去重) + 品牌标识入库
Regression / regression (push) Canceled after 0s

本提交含两条并行工作线,因互相咬合(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 断言其互斥),未删。
This commit is contained in:
aurora-admin
2026-09-22 23:56:05 +08:00
parent f1fbfc2ddb
commit 5ee5d829a4
92 changed files with 1320 additions and 463 deletions
+7 -13
View File
@@ -38,15 +38,11 @@
+ '<link rel="stylesheet" href="' + base + 'style.css">');
})();
</script>
<!-- 品牌图标:24 网格圆角方块 + 断笔 K(三笔画互不接触)。
为什么这里硬编码 #2F54EB / #FFFFFF 而不用令牌:favicon 渲染在**浏览器标签栏**,
不继承 html.kole-dark —— 令牌 --kole-color-text-inverse 在暗色下是 #14161C,
走令牌会变成「亮蓝底 + 近黑标记」,浅色标签栏上反而发闷。页面内的顶栏标记走
currentColor(见下方 .logo-mark),那才是需要跟随主题的位置。
描边 2.25 @24 网格 → 16px 标签页尺寸下正好 1.5px,等于规范原文
「线性图标,描边1.5px」(.design_library/kole-ui/specs/组件1.txt)。
移动端文档站各页与 tools/build-mobile.mjs 的 BRAND_FAVICON 用同一份几何。 -->
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Crect%20width='24'%20height='24'%20rx='6'%20fill='%232F54EB'/%3E%3Cg%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2.25'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%205.5V18.5'/%3E%3Cpath%20d='M17%205.5l-6.25%204.06'/%3E%3Cpath%20d='M10.75%2014.44L17%2018.5'/%3E%3C/g%3E%3C/svg%3E">
<!-- 品牌 favicon 由 .design_library/kole-ui/brand/brand-mark.json 生成。
独立 SVG 资产不依赖主题令牌,深层 History API 路由通过本页注入的 <base>
解析到同一个 /site/assets/kole-mark.svg。顶栏标记则使用同一真源的单色版本,
通过 CSS mask 继承 currentColor。 -->
<link rel="icon" href="assets/kole-mark.svg">
<!-- 浏览器 UI 着色(移动端地址栏 / 桌面端标题栏):取 --kole-color-card-bg —— 顶栏
background 就是这个令牌(site/style.css 的 .topbar),所以色值与视觉连续。 -->
<meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
@@ -57,10 +53,8 @@
<header class="topbar">
<div class="topbar-inner">
<a class="logo" href="./">
<!-- 品牌标记:几何 K。stroke 走 currentColor → 由 .logo-mark 的
--kole-color-text-inverse 决定(暗色下自动转深色),令牌化行为与
同页其它图标一致;不要在这里硬编码颜色。 -->
<span class="logo-mark" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 5.5V18.5"/><path d="M17 5.5l-6.25 4.06"/><path d="M10.75 14.44L17 18.5"/></svg></span>
<!-- 品牌标记:由 brand-mark.json 生成的单色 K-Node,CSS mask 继承 currentColor。 -->
<span class="logo-mark" data-brand-mark="mono" aria-hidden="true"></span>
<span class="logo-text">Kole UI <em class="logo-sub">组件库</em></span>
</a>
<!-- 版本入口:清单由 site/versions.json 启动时填充(app.js 的 bindVersionSelect)。