# 源码说明

`../CMS-UI完整设计.html` 由这里的文件生成，单文件、离线可用。基于 2026-10-08 第一批分项选型的评审结果（最终：基础视觉 F、框架 A、长表单弹窗 J、抽屉 E；短表单弹窗按发起人给的布局；登录页按 10-07 追加的分项选型登录页 C「右侧浮卡·全幅底图」；10-08 去掉了左侧的本系统业务模块和三端入口，左侧只剩系统名和版本号）。

| 文件 | 内容 |
| --- | --- |
| `tokens.js` | 两套皮肤的设计令牌：浅色 F 晴空渐变（默认）＋ 深色 B 石墨灰（2026-10-08 从三版候选里选定；未选的 A、C 在 `归档/tokens-深色候选AC.js`，不参与构建）。运行时每套生成为 `.cv[data-v=皮肤]` 上的 CSS 变量；`window.TOKENS` 是当前皮肤，`TOKENS.use(key)` 原地切换；`palette`／`strip` 给规范摘要的色板用。换肤只改颜色与质感，尺寸、圆角、字体不变 |
| `data.js` | 三端菜单、字典、列表、订单详情、补录、新建投资者、TRS 下单（沿用分项选型，从代码提取） |
| `data2.js` | 本稿补充：票据详情、清算、风险监控、首页（现状问候卡文案 `homeNow`；工作台版数据 `home` 整套保留，2026-10-08 起等首页接口完善后再切回）、个人中心、登录、反馈类文案；`pages` 是设计稿目录（来源、设计要点、待确认） |
| `kit.css` | 画布内组件样式（按钮、输入、标签、表格、卡片、提示、弹窗外观），全部读令牌 |
| `frame.css` | 框架 A 的布局与收起态（取自分项选型 frames.css 的通用部分 + A） |
| `overlay.css` | 弹窗骨架、表单项、弹窗 J 的卡片分区、抽屉骨架、描述表、数字卡片、抽屉 E |
| `pages.css` | 新增页面：首页、页内页签、清算、TRS 下单、票据详情、确认框、个人中心、404/401、登录、反馈类 |
| `theme.css` | 令牌之外的结构差异（渐变勾选框、渐变页签线等，读 `--grad`，两套共用）＋ 深色专属的几条（`[data-dark]`、`[data-v="db"]`），最后加载 |
| `fonts/` | Inter 400/500/600（构建时内嵌，F 的数字字体） |
| `app.js` | 画布核心：图标、令牌注入、框架 A 外壳、列表页、弹窗 J（补录、新建投资者）、抽屉 E（订单详情）、画布挂载与交互；对外暴露 `window.UI` |
| `pages.js` | 新增页面与弹层的渲染，登记到 `UI.pageRenderers` / `overlayRenderers` / `canvasRenderers` |
| `book.js` / `book.css` / `template.html` | 设计稿外壳：目录、舞台、说明面板、规范摘要、全屏、路由 |

命令（在 `src/` 下执行）：

- `python3 build.py`：生成 HTML。
- `node test.mjs`：在生成的 HTML 里实际点击每一类交互并断言，失败退出码为 1。
- `node shot.mjs [前缀]`：按原尺寸截图到 `../shots/`（可用 `SHOT_DIR`、`SHOT_DPR` 改）。
- `python3 pack.py`：构建 → 测试 → 打包到 `../发给同事/`，测试不通过不出包。

页面地址：`#p/<页面>[/<端>][/<变体>][/t=<皮肤>]`，例如 `#p/login/trs/reset`、`#p/err/issue/401`、`#p/home/issue/work`（首页保留的工作台版）、`#p/home/issue/t=db`；皮肤 `f`／`db`，不带时沿用当前皮肤。单独模式 `#solo/<页面>[/<端>][/<变体>][/t=<皮肤>]` 只渲染一张原尺寸画布。截图：`SHOT_THEME=db node shot.mjs` 按指定皮肤截，文件名带皮肤前缀。

`node_modules` 是指向本机已有 playwright 的软链接，只供测试和截图使用。