# 半自动模式 & 新页面开发

> 合并原 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」。