智游大别山 · UI 统一标准 v3 治理报告

一、六步方法论落地进度逐条对照，不跳步

步	要求	本项目落地	状态
1	盘点现状	四维量化实测 4221 个 HTML（色值 1079 种 / 字号 40+ 档 / 阴影 218 种…）	完成
2	建立设计令牌	色板 13 档 + 语义色 4 + 字号 6 档 + 圆角 4 档 + 阴影 2 档 + 间距 8px 栅格 + 断点 4 档，全在 `ui.css` 第 0 节	完成
3	统一基础组件	21 类组件，覆盖 Button / Input · Select · Checkbox · Radio · FormItem / Card · Modal · Drawer · Tabs · Table · Pagination / Toast · Tooltip · Dropdown · Breadcrumb / Empty · Loading · Skeleton	完成
4	布局模板	页头 / 页脚 / 侧栏 / 内容区 + 容器封顶 1200px + 12 列栅格 + 页面标题·面包屑·操作区·分页区	完成
5	代码规范	目录映射对照 + 命名规则 + 禁字清单 + Stylelint / ESLint / Prettier 真实工具链 + commitlint	完成
6	迁移策略	冻结新增 → 令牌组件 → 布局模板 → 逐页替换 → 清旧 CSS → 视觉回归 → 走查清单	逐页替换中

二、第 3 步 · 组件补全每个组件都覆盖默认/悬停/点击/禁用/加载 + 错误/成功/警告 + 移动端

21类

基础组件总数

v3 新增 5 类 + Alert / Skeleton 补位

192个

线上 .ui-* 类

全站零冲突命名空间

17×9

状态覆盖矩阵

组件库第 12 节逐项打勾

6个

声明式行为属性

data-ui-* 零配置生效

表格 Table：排序（纯数字走数值比较、否则按中文排序）、选行高亮、斑马纹、数值右对齐等宽数字、操作列；移动端整表降级为卡片列表（表头隐藏、data-th 变成行内标签）。
分页 Pagination：当前页 / 禁用 / 加载态 / 省略号 / 每页条数 / 跳页，胶囊形按钮统一。
气泡 Tooltip：顶部·底部·起点对齐三向，桌面 hover、触摸端点击开合。
下拉 Dropdown：右对齐 / 左对齐 / 向上弹三种；移动端自动转底部动作面板（贴近拇指、带安全区）。
面包屑 Breadcrumb：默认分隔符与胶囊两种样式，移动端横滑不换行。
提示条 Alert：info / success / warning / error / flat 五态；骨架屏 Skeleton 补行、头像两个形态。
声明式行为层：页面只写 data-ui-dd / data-ui-tip / data-ui-tabs / data-ui-chip / data-ui-table / data-ui-confirm，交互自动生效，不写一行 JS；点外部与 Esc 统一关闭。

三、第 4 步 · 布局模板统一页头、页脚、侧栏、内容区

要素	标准
容器最大宽度	1200px（阅读页 720px / 大屏 1440px 两档变体）
栅格	12 列 CSS Grid；`ui-col-` 基础 + `--md-`（≥768）`--lg-*`（≥1024）；<768px 一律收成整宽
页面结构	`ui-page`（撑满视口）→ `ui-page-hd`（标题·面包屑·操作区同行）→ `ui-page-body` → `ui-page-ft`
侧栏	`ui-aside-nav` ＋ `ui-aside-link`；<1024px 自动转横向可滑条
区块节奏	`ui-section` ＋品牌色竖条标题 `ui-section-t`；桌面端自动放大卡片与表单内距

四、第 5 步 · 代码规范与工具链已装好、已跑通、已验证不是空转

目录结构做映射而非照搬：本项目是「Python 生成器 + nginx 静态产物」，不是 SPA。tokens.css → ui.css 第 0 节；components/base → ui.css 12–15 节 + ui.js 行为层；layouts → 第 16 节；pages → 生成器产物；services → api/*.py；router → nginx location。不重复造一层工程。
命名规则：类名 ui- 前缀 + 中划线，变体 --，状态 is-；明令禁止 .box1 .red-btn .test 这类无语义命名与魔法数。
三件工具各司其职：Stylelint 管 CSS 真错（未知属性、非法色值、重复选择器）；ESLint 管 JS 真错（未定义变量、重复键、不可达代码）；Prettier 管 JSON / Markdown 等配置文档。风格类规则一律关闭——设计系统是手写紧凑风格，风格争论没有价值。
Prettier 有意不碰两个源件：实测它会把 ui.css 从 1148 行吹到 2893 行、ui.js 从 320 行吹到 430 行，破坏刻意保持的密度，且零语义收益。这条边界写进了 .prettierignore 的注释里，不是漏配。
唯一门禁命令（部署前必跑）：node _ui_standard/lint/run.mjs all，输出 [PASS] 才允许发布，[FAIL] 一律禁止。
已验证不是空转：故意注入 colr:1px → Stylelint 报未知属性；注入 #zzzzzz → 报非法色值；注入未定义变量 + 不可达代码 → ESLint 报 3 个 error。撤销后真文件恢复全绿。
Husky / lint-staged / commitlint 备好未装：目录当前不是 git 仓库（webroot 走 sftp 直推），git hook 没有挂载点，所以只备配置 + 一键激活说明，不装空转的钩子。

五、第 6 步 · 迁移策略不要一次性重写

标准步骤	本项目落地	状态
冻结新增，新页面必须用规范	`ui.css` / `ui.js` 已全站注入，新页面自动继承	完成
先做令牌和基础组件	令牌 13 档 + 组件 21 类 + 声明式行为层	完成
做布局模板	`ui.css` 第 16 节（容器/骨架/页头页脚/侧栏/栅格）	完成
按高频页面逐页替换	首页 → 登录 → 列表 → 详情 → 表单	进行中
清理旧 CSS / 无用依赖 / 内联样式	并轨层已兜住视觉；源码级残留待清	进行中
加视觉回归截图对比	截图能力已具备（桌面 + 移动双套），缺固定基线	进行中
建立设计走查清单	组件库第 14 节 17 条走查项	完成

六、发布验真线上实测，不是自述

$ curl -sI https://ltdlt.cn/ui.css   → 200   57539 B
$ curl -sI https://ltdlt.cn/ui.js    → 200   12925 B
$ curl -sI https://ltdlt.cn/ui-kit.html → 200   组件标准库 v3

# 注入范围：对客页 2 条 / 后台页 0 条
  /                       ui.css=1  ui.js=1
  /bishu.html             ui.css=1  ui.js=1
  /zixun.html             ui.css=1  ui.js=1
  /detail/bishu_100.html  ui.css=1  ui.js=1
  /boss.html              ui.css=0  ui.js=0   ← 管理端保持原貌

# 质量指标
  .ui- 命名空间类数    192
  CSS 大括号平衡        462 / 462
  全站 border-radius:999px 残留   0 处（首页椭圆仅剩 2 个圆形悬浮钮）
  ui.js 行为层命中      data-ui-dd / tip / tabs / chip / table / confirm 全部存在
  site_ver             20260911093936

# 静态检查门禁
$ node _ui_standard/lint/run.mjs all
  === css ===
  === js ===
  [PASS] ui.css / ui.js 静态检查全绿

# 视觉验收（CDP 精确视口，不用 --window-size）
$ node _ui_cta_audit.js https://ltdlt.cn/ ".sec-cta-btn" 320,360,375,390,414,430,440
  320 PASS  360 PASS  375 PASS  390 PASS  414 PASS  430 PASS  440 PASS
  按钮高度统一 36px · 文字行数 1 · 文档宽=视口宽 · 横向溢出 0

七、本轮专题 · 首页板块卡 CTA 重构把「椭圆丑」连根拔掉

问题：首页六大板块卡上各挂两个白色大药丸按钮，「避暑路线 / 秋游路线 / 民宿路线…」在 430px 视口下被挤成两行；主次不分，还跟卡片照片抢视觉。
根因是三处叠加，不是一处写错： ① 设计系统越界 —— ui.css 误把页面自建类 .sec-cta-btn 当通用按钮，给了 border-radius:var(--r-pill)（999px），还顺带写入 min-height（违反「只统一视觉、不碰布局」铁律）； ② 移动端强覆盖 —— mobile.css 用 !important 改成 padding:12px 14px / font-size:15px / line-height:1.4，把按钮撑肥； ③ 模板双间距 —— .sec-cta{gap:8px} 又叠 .sec-cta > * + *{margin-left:8px}，白吃 16px 宽。
改法：两个椭圆 → 一条圆角玻璃操作条（外容器 border-radius:10px 一体成型，左「品牌绿实心」主按钮 + 右「透明」次按钮 + 1px 细线分隔）。主次一眼分明，六张卡完全一致。
不折行的硬保证：white-space:nowrap ＋ flex:1 1 0;min-width:0；栅格同步从 1fr 1fr 改成 minmax(0,1fr)、卡片补 min-width:0 —— 否则裸 1fr 会被内容撑宽，直接顶出横向滚动条。
顺带清掉同类问题：.gb-entry-btn（立即抢）圆角 24px → 12px； .sec-count 六处内联彩虹色（紫 / 褐 / 蓝 / 洋红…）统一为毛玻璃白。

七 · 一、改造前后左：问题现场｜右：改后定版

改造后单卡放大：品牌绿主按钮 + 透明次按钮 + 1px 分隔线 — 放大细节主次分明 · 1px 分隔线 · 高 36px

七 · 二、验收 · 多宽度实测 320 → 440 七档全过

视口宽度	按钮高	文字行数	文档宽	按钮宽	结论
320	36px	1	320	63	PASS
375	36px	1	375	79	PASS
430	36px	1	430	94	PASS
440	36px	1	440	97	PASS

另测 360 / 390 / 414 三档同样单行、零溢出、高度一致。判定方式：用 Range.getClientRects().length 数文字真实行数（不靠肉眼、也不靠高度除行高），用 CDP Emulation.setDeviceMetricsOverride 精确指定视口 —— 浏览器 --window-size 实测会失真（指定 430 实际得到 518，截图只截 430，看起来像溢出）。

八、改造效果线上实拍 · 品牌绿统一、留白节奏一致

九、下一波待办第 6 步逐页替换 + 源码级清尾

1逐页替换：按首页 → 登录 → 列表 → 详情 → 表单的顺序，把存量页面替换到布局模板标准；同时把散在各页产物里的业务组件收进 ui.css。

2视觉回归固定基线：截图链路已具备（桌面 + 移动双套），需要落一份历史基线做逐版比对。

3源码级遗留色清尾：1265 个 detail 页 + 首页 / 资讯页源码里仍留着靛蓝 #3949ab、青 #00897b、红 #d32f2f、奶油米黄 #fbf6ea（生成器各残留 1–2 行 + 首页黄金模板 1 行）。实测渲染已被并轨层覆盖为品牌绿、肉眼无异常，但源码该清干净——改生成器 + 模板后重建。

4把 prompt() 2803 处从生成器源头改造成 ui.confirm 与内联表单（返回值被同步代码使用，不能靠运行时接管）。

5图片补 alt 1622 张 + loading="lazy" + 压缩到 300KB 内；补 45 页 description、28 页 h1。

6内联 style= 25112 处按页族抽公共 CSS；!important 4671 处逐文件降级（排除并轨层）。

7断点 16 个收敛到 sm / md / lg / xl 四档；部分页面补 Permissions-Policy；api/*.py 内联样式纳入盘点。

8圆角档位收敛：页面自建类散着 10 / 12 / 16 / 24 四档，都不在设计令牌内（令牌四档 = 10 / 14 / 20 / 999），逐页替换时一并对齐。

9清掉 .gb-entry-sub 浅绿字配橙金底的杂色；首页 / 资讯页残留的内联色一并收口。

10首页其余区块按同一套标准继续替换（板块卡 CTA 已定版），并把「黄金模板三副本」的漂移同步掉。

智游大别山 · UI 统一标准 v3.1 ｜生成于 2026-09-11
唯一真源：ui.css（设计令牌 + 组件基线 + 布局模板）＋ ui.js（交互反馈 + 声明式行为层）
标准文档：Claw/_ui_standard/UI-STANDARD.md ｜门禁：Claw/_ui_standard/lint/run.mjs
本页为内部治理报告，不对外推广。

一、六步方法论落地进度 逐条对照，不跳步

二、第 3 步 · 组件补全 每个组件都覆盖默认/悬停/点击/禁用/加载 + 错误/成功/警告 + 移动端

三、第 4 步 · 布局模板 统一页头、页脚、侧栏、内容区

四、第 5 步 · 代码规范与工具链 已装好、已跑通、已验证不是空转

五、第 6 步 · 迁移策略 不要一次性重写

六、发布验真 线上实测，不是自述

七、本轮专题 · 首页板块卡 CTA 重构 把「椭圆丑」连根拔掉

七 · 一、改造前后 左：问题现场 ｜ 右：改后定版