CMS_UI/src/README.md

源码说明

../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 的软链接，只供测试和截图使用。