Ui 1to1 Restore Flow

执行流程

0. 先锁定宿主约束，再谈 1:1 还原

• 优先确认目标页面属于哪种宿主工程，再决定输出形式
• 如果落地到 ares/：
  • 必须使用 Vue2
  • 必须使用 Vant 2.x / jquery-weui / WeUI 这套现有依赖
  • 必须遵守 ares/<module>/<page>.html + css/<page>.css + js/<page>.js 结构
  • HTML 必须保留 #app、v-cloak、公共 CSS/JS 固定引入顺序、内联 getUserFinish()、末尾 getUserInfo.js
  • JS 必须提供固定入口 initFun()，并在其中初始化 Vue 实例
  • 页面交互、弹层、列表、表单优先使用 Vant 2 组件或项目既有 jquery-weui 能力
• 只要宿主规范要求 Vue2 + Vant2，就禁止输出“纯 HTML + 原生 JS 直接操作 DOM”的最终实现

1. 锁定目标 screen 和落地点

• 先从 ui/preview 或 ui/links 确认目标 screen 名
• 如果用户明确指定了目标文件，按用户指定落地；默认仍需按设计稿重新生成该目标文件内容，只有用户明确要求继续旧模块或沿用旧实现时，才复用已有模块
• 如果用户没有明确指定目标模块，默认直接新建模块，不要先在 ares/ 里寻找“它应该属于哪个旧模块”
• 新模块默认使用“业务主题 + 页面语义”的英文或拼音命名，避免直接使用 01、备份 之类无语义编号
• 新模块内默认采用：
  • ares/<moduleName>/<page>.html
  • ares/<moduleName>/css/<page>.css
  • ares/<moduleName>/js/<page>.js
  • ares/<moduleName>/images/
• 如果文件名里出现 备份、成功、失败、拒绝、待签收，先判断它是不是状态页，不要直接混成同一页面

2. 先提取 artboard，再开始写代码

• 先从 ui/index.html 提取目标 artboard
• 至少确认：
  • 画板宽高
  • 关键图层坐标
  • 文字内容和字号
  • 背景色、分隔线色
  • 切图资源名
• 没拿到这些规格前，不要直接开写

推荐命令：

node skills/ui-1to1-restore-flow/scripts/list_artboards.js ui/index.html
node skills/ui-1to1-restore-flow/scripts/extract_artboard.js ui/index.html "<screen-slug>"

3. 先拆区域，再列对照项

先把页面拆成几块再实现：

• 顶部栏
• 主内容区
• 信息行或卡片区
• 底部按钮区
• 灰底、白底、承托层

最少要列清楚这些对照项：

• 画板宽高
• 背景分层
• 顶部栏位置和尺寸
• 关键 icon 的尺寸和位置
• 信息行高度、分隔线、左右留白
• 按钮宽高、圆角、位置

4. 先对宿主骨架，再做像素收口

• 先确认宿主项目的技术栈、目录结构和公共依赖
• 如果仓库里已经存在同名页面、旧版 restore 页面或历史实现，默认把它们视为“参考样本”，不是“起步模板”
• 默认执行方式是从 artboard 规格重新组织页面结构并重写目标 html/css/js，不要先读取旧实现再按旧实现小修小补
• 如果是新建模块，目录结构仍然必须完全遵守 AGENTS.md 和 ARES 标准骨架，不得为了省事输出演示页
• 保持 ares 现有模式，不擅自切技术栈
• 如果 AGENTS.md 已经给出标准页面骨架、初始化函数名、登录链路、公共脚本顺序，这些都属于硬约束，不得省略或改名
• 样式优先页面级 class，避免污染同模块其他页面

4.5 ARES 项目强制输出约束

当目标文件位于 ares/ 时，输出必须同时满足以下条件：

• html 文件是 ARES 标准页面骨架，而不是只塞一段静态 DOM
• js 文件是页面同名脚本，并包含 var vm; 和 function initFun() {}
• 业务数据、显隐状态、列表渲染、弹窗开关等状态放进 Vue data
• 列表渲染使用 v-for，显隐使用 v-if / v-show / v-model，事件使用 @click 等 Vue 模板语法
• 可复用的移动端交互优先使用 van-tabs、van-popup、van-list、van-picker、van-datetime-picker、van-action-sheet 等 Vant 2 组件
• 接口调用使用项目内 $http，提示和确认使用 $.toast、$.alert、$.confirm
• getUserFinish() 必须保留在 HTML 内联脚本中；initFun() 不得移入别名函数；getUserInfo.js 必须是最后一个脚本
• 除简单工具函数外，不要把页面主流程写成原生 DOM 查询、手动绑事件、手动拼接 HTML 字符串

开始编码前，先在心里完成这句检查：

“这次产出看起来是不是一个 ARES 正式业务页，而不是一个给设计稿演示用的静态页面？”

5. 单独做一轮对图复核

至少检查：

• 结构分层是否对齐
• 图标、箭头、状态图是否用对
• 方向类 icon（上/下箭头、展开/收起、前进/返回）是否与 preview 最终朝向一致
• 颜色类 icon（黑/灰/蓝、选中/未选中）是否与 preview 最终颜色一致，而不是只看资源文件名
• 文字左边距、右收边、分隔线、按钮位置是否对齐
• 灰底、白底、承托层是否补齐
• fixed 底栏和 safe area 是否遮挡内容

只要有明显对不上 preview 的地方，就不要表述为“已 1:1 还原”。

实现要点

• ui/index.html 给了明确 x/y/width/height 时，优先按这些值实现
• 明显属于同一编组的元素，优先按固定坐标和间距还原，不要先用模糊的弹性布局去猜
• 图标、状态图、特殊按钮优先复用 ui/assets/，不要手画近似替代物
• 箭头、筛选、排序这类状态 icon，必须回看 ui/preview 核对最终观感
• 不要因为导出资源名里写着“向下”“未选中”“黑色”就直接相信；导出切图可能与命名不一致，必须以 preview 最终像素观感为准
• 对方向或状态敏感的 icon，至少核对 3 件事：朝向、颜色、是否处于选中态
• 文本不仅看字号，也要看字重、行高、颜色和文本框边界
• 实现顺序固定：先结构，再资源，再文本边界，最后收颜色和间距

禁止事项

• 不要只看 preview 肉眼猜布局，不看 ui/index.html
• 不要改一轮就停，至少做一轮对图自检
• 不要因为大结构对了，就跳过细节复核
• 不要只依据 ui/assets 的文件名或图层名判断 icon 的方向、颜色或状态
• 不要把整张预览图直接铺成背景图
• 不要因为仓库里已经有同名页面，就默认转为“在旧实现上微调”
• 不要把现有 restore 页面当成默认脚手架，除非用户明确要求基于旧实现继续修改
• 不要让宿主页的旧样式污染当前 screen，又不做页面级隔离
• 不要在 ares/ 里输出纯 HTML + 原生 JS 页面，即使视觉上“长得像”
• 不要因为页面偏静态，就省略 Vue 实例、initFun()、getUserFinish()、Vant 2 组件或 ARES 公共依赖
• 不要引入 Vue3、Vant4、React、axios、构建工具，或任何宿主规范之外的新技术栈

开始前 6 问

1. 目标 screen slug 是什么？
2. 对应的 ares 页面文件是什么？
3. 画板宽高是多少？
4. 页面主要分成哪几个区域？
5. 需要哪些 ui/assets 资源？
6. 当前最可能漏掉的承托层是什么？

如果目标在 ares/，再额外补 4 个必答检查：

1. 当前工作区的 AGENTS.md 是否已经读过？
2. 对应页面必须使用的公共 CSS / JS 顺序是什么？
3. 页面的 Vue 入口函数名和登录完成回调函数名分别是什么？
4. 当前 screen 的哪些交互应该落到 Vant 2 组件，而不是原生 DOM？

默认落地策略

• 默认策略：新页面优先新建模块，不主动把页面塞进旧模块
• 默认策略补充：无论目标文件是否已存在，只要用户是在做设计稿还原，就先按 artboard 重新生成目标页面，不以仓库旧实现为起点
• 只有在以下情况才复用旧模块：
  • 用户明确要求“接着上次那个模块继续做”
  • 用户明确要求“基于当前页面继续收口”或“不要重写”
• 如果只是从设计稿新还原一个页面，而用户没有指定模块，执行时应直接：
  • 先定 moduleName
  • 再定 page 文件名
  • 按 ARES 结构创建完整模块目录和页面文件