1

_DEL/miniprogram-h5-conversion/steering/user-guided.md

@@ -0,0 +1,122 @@
+# 半自动模式 & 新页面开发
+
+> 合并原 user-guided.md / new-page.md / page-dev.md。
+> 硬性规则和开发参考值已在 steering `mp-h5-rules.md` + `mp-h5-dev.md` 中。
+
+---
+
+## 一、半自动模式
+
+用户直接指定页面/区域/任务，AI 按需执行。
+
+### 意图解析
+
+解析用户输入，确定：目标页面 → 目标范围（整页/step/区域/组件）→ 任务类型（开发/修正/审计/验证）
+
+意图不明确时追问一轮即可（不进入完整审问模式）。
+
+### 按需加载
+
+| 任务类型 | 加载 |
+|---------|------|
+| 视觉还原（截图+审计+修正） | `readSteering("action-manual.md")` |
+| 仅审计 | `readSteering("action-manual.md")` §二 |
+| 仅修正（已有审计报告） | `readSteering("action-manual.md")` §三+§四 |
+| 仅截图 | `readSteering("action-manual.md")` §一 |
+| 新页面开发 | 本文件 §二/§三 |
+
+始终加载：`readSteering("power-integration.md")`
+
+### 与批量模式的区别
+
+- 不需要按批次顺序
+- 可跳过不相关步骤
+- 修正范围由用户指定
+- 完成后提示是否更新 PROGRESS.md
+
+### 经验沉淀
+
+发现新踩坑点 → 向用户提出建议 → 确认后录入 `docs/miniprogram-dev/05-lessons/pitfalls.md`
+
+---
+
+## 二、新页面开发（有 H5 原型）
+
+### 流程
+
+```
+1. 前置加载
+   H5 源码 + design-tokens.json + icon-mapping.md + 交互说明
+   激活 wechat-miniprogram Power（view-layer.md + tdesign.md）
+
+2. H5 结构分析
+   全局结构识别（safe-area/bottomNav/ai-float 等）
+   CSS 风险特性扫描
+   组件清单（TDesign 可覆盖 vs 自定义）
+
+3. MP 页面骨架搭建（见 §四）
+
+4. 视觉比对审计（推荐）
+   → readSteering("action-manual.md")
+```
+
+### 必须遵守
+
+- mock 数据必须与 H5 原型完全一致
+- TDesign 优先原则
+- 所有规则见 always-on steering `mp-h5-rules.md`
+
+---
+
+## 三、新页面开发（无 H5 原型）
+
+从 spec/PRD 直接开发，无视觉比对。
+
+```
+1. 需求确认（用途、数据来源、导航关系、是否 tabBar）
+2. 设计参考（design-tokens.json + 现有页面风格 + TDesign 选型）
+3. 页面开发（见 §四）
+4. 功能验证（微信开发者工具预览 + 交互流程 + 空/加载/错误态）
+```
+
+---
+
+## 四、页面骨架搭建
+
+### 文件结构
+
+```
+apps/miniprogram/miniprogram/pages/<page>/
+├── <page>.wxml    # 结构
+├── <page>.wxss    # 样式
+├── <page>.ts      # 逻辑 + mock
+└── <page>.json    # 配置（navigationBarTitleText + usingComponents）
+```
+
+### .json 配置模板
+
+```json
+{
+  "navigationBarTitleText": "页面标题",
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}
+```
+
+### TS mock 数据
+
+```typescript
+Page({
+  data: { /* mock 数据，结构贴近真实 API */ },
+  onLoad() {
+    // TODO: 替换为真实 API 调用
+    this.setData({ /* ... */ });
+  }
+});
+```
+
+### 完成检查
+
+见 fileMatch steering `mp-h5-dev.md` 中的「新页面 Checklist」。