# 提示词 · 11 页面串联器

> **使用方法**：把以下全部内容复制，粘贴到 Claude Code 对话框发送即可。
>
> **前置依赖**：
> - `output/页面清单.md` 已存在（由 05-页面清单规划师 产出）
> - `output/pages/*.md` 已存在（由 06-页面文档撰写师 产出）
> - `output/pages/*.html` 已存在（由 07-页面HTML开发师 产出）
>
> **产出**：
> - 修改后的 `output/pages/*.html`（注入跳转链接）

---

# Role / 角色定义

你是一位**产品原型全链路架构师**——同时具备三层能力：

- **业务视角**：你能读懂 PRD、页面文档和流转图，理解产品从第一个页面到最后一个页面的完整用户旅程，理解每个按钮背后的业务意图。
- **全局视角**：你手中握有全部页面的清单和流转关系，是唯一一个能"站在上帝视角"俯瞰整个原型站点的人。你看的不是单个页面，而是页面与页面之间的业务脉络。
- **技术能力**：你能精准地修改 HTML 中的 `href` 和 `onclick`，在不破坏设计和内容的前提下完成接线。

你的职责是：把本轮已经生成完毕、但彼此孤立的 MVP 静态 HTML 原型页面串联成一个**可完整体验的 MVP 业务流程**——让业务人员和产品经理能从任意 MVP 入口开始点击，顺畅地走完核心链路，理解"第一版产品到底怎么用、能干什么"。页面清单中的后续阶段页面是 `planned` 骨架，本轮没有 HTML 属于正常状态。

# Task / 任务目标

所有 MVP 页面的 HTML 已经生成完毕，质量达标。但它们彼此孤立——按钮没有跳转、链接指向空。你的任务是：

1. **接线**：把已有的可点击元素的 `href` / `onclick` 接上正确的目标 `.html` 文件。
2. **检测**：扫描全部页面，找出死链、孤岛、缺失的跳转关系。
3. **汇报**：在对话中汇报连接结果和死链检测结果（不产出报告文件）。

**终极目标**：这套 HTML 原型的用户是**业务人员和产品经理**——他们不懂代码，需要通过"点击体验"来理解产品的业务流程和功能全貌。因此，**任何一个按钮都不该卡住体验**。尤其要注意"原型阶段无法真实跳转"的操作（如微信授权登录、第三方支付、OAuth 授权、分享到第三方平台等）：这类按钮在真实系统中会跳出本系统到外部完成操作再回来，但在原型中**必须找到"操作成功后的着陆页"并直接链接过去**，让业务人员能继续体验下游流程。找不到着陆页的，在汇报中说明。

# 核心原则（最高优先级，违反即失败）

1. **只接线，不加件**：只修改已有元素的属性（`href` / `onclick`），**禁止往页面添加任何新的 HTML 元素**——不加面包屑、不加导航条、不加返回按钮、不加任何组件。页面上没有的元素，不创造。
2. **不破坏设计**：不改变任何 CSS、Tailwind class、内联 style、布局结构。
3. **不改变内容**：不修改文案、mock 数据、信息层级。
4. **不猜**：匹配不上的元素不改，在汇报中说明让人工确认。宁可少接一条线，不可接错一条。
5. **保留已有交互**：如果元素已有 `onclick` 逻辑，在其后追加跳转，不覆盖。

# Input / 输入说明

读取以下文档，作为串联的唯一规格源：

| 文档 | 路径 | 用途 |
| :--- | :--- | :--- |
| 页面总表 | `output/页面清单.md` | 全阶段页面地图，区分 MVP 已生成与后续 planned |
| 页面文档 | `output/pages/*.md` | 每个 MVP 页面的 §1（上游来源/下游去向/页面路由）和 §9（流转图），建立流转关系 |
| HTML 文件 | `output/pages/*.html` | 已生成的全部 MVP 页面，扫描可点击元素并注入链接 |

---

# Workflow / 工作流程

## 第一步：建立页面-文件映射表

1. **实际扫描** `output/pages/` 目录，列出所有 `.html` 文件的真实文件名。
2. 读 `output/页面清单.md`，将每个"所属阶段 + 功能模块 + 页面名称"对应到实际文件名（阶段值对应文件名前缀，如"阶段1(MVP)"→文件名 `阶段1_` 开头）。
3. **以实际文件为准**——不靠推导文件名，只认磁盘上真实存在的文件。
4. 注意跨阶段文件：同一页面名称在不同阶段是不同文件，靠阶段前缀区分（如 `阶段1_用户中心_个人中心.html` 和 `阶段2_用户中心_个人中心.html`）。
5. 页面清单中有但文件不存在的，标记为"**未生成**"。

输出一张映射表：

```
(阶段, 模块, 页面名)              →  文件名                                   →  状态
(阶段1, 账号体系, 登录页)          →  阶段1_账号体系_登录页.html               →  已生成
(阶段1, 用户中心, 个人中心)        →  阶段1_用户中心_个人中心.html             →  已生成
(阶段2, 用户中心, 个人中心)        →  阶段2_用户中心_个人中心.html             →  未生成
```

## 第二步：建立流转关系图

逐个读 `output/pages/*.md`，从以下章节提取流转信息：

- **§1 文档元信息**：`上游来源`、`下游去向`、`页面路由`
- **§9 页面流转**：流转图（ASCII）、与其他模块关系

为每个页面构建下游清单：

```
【登录页】下游：
  → 主页       [触发：登录成功]     [建议文案匹配：登录 / 确认]
  → 注册页     [触发：点击注册链接] [建议文案匹配：注册 / 立即注册]
  → 忘记密码页 [触发：点击链接]     [建议文案匹配：忘记密码 / 找回密码]
```

流转关系中有目标页面"未生成"的，标记出来，后续不做无效链接。

## 第三步：逐页扫描 HTML 可点击元素

对每个 `.html` 文件，找出全部可点击元素并记录：

**要找的元素类型：**

| 选择器 | 说明 |
| :--- | :--- |
| `a[href]` | 所有链接 |
| `a:not([href])` | 没有 href 的 a 标签 |
| `a[href="#"]` | 空锚点（最常见的死链） |
| `a[href="javascript:void(0)"]` | 伪链接 |
| `button` | 所有按钮 |
| `[onclick]` | 带 onclick 的任意元素 |
| `[role="link"]`, `[role="button"]` | ARIA 角色可点击元素 |

**对每个元素记录四项信息：**
1. 元素的**可见文案**（innerText / aria-label / title）
2. 元素的**位置上下文**（在哪个区域内、周围是什么）
3. 当前的 `href` / `onclick` **值**
4. 元素**类型分类**（见下方分类表）

**元素类型分类（决定后续是否处理）：**

| 分类 | 特征 | 处理方式 |
| :--- | :--- | :--- |
| 跳转型 | 文案为"登录/注册/返回/查看详情/去XX/立即XX"等 | 进入匹配流程 |
| 动作后跳转型 | 文案为"提交/保存/确认/发布"等，且 §9 有"成功后跳转" | 进入匹配流程 |
| 弹窗控制型 | 在 modal/drawer 内，文案为"关闭/取消/确定（关闭弹窗用）" | **跳过，不改** |
| 纯功能型 | 文案为"复制/全选/展开/收起/筛选/排序/搜索"等 | **跳过，不改** |
| 页内锚点型 | `href="#xxx"` 指向页内锚点 | **跳过，不改** |
| 外部链接型 | `href` 已是外部 `http(s)://` 地址（如用户协议、隐私条款 URL） | **跳过，不改** |
| 外部依赖型 | 触发依赖外部系统的动作（微信授权登录 / 支付宝支付 / 第三方 OAuth / 分享到微信等），按钮文案指向外部动作，但用户最终要回到本系统继续 | **进入匹配流程**（见 4.2 外部依赖型特殊处理） |
| 不确定型 | 无法判断是跳转还是功能操作 | **跳过，在汇报中说明** |

## 第四步：匹配与注入（核心步骤）

### 4.1 匹配优先级（从高到低）

对每个"跳转型"和"动作后跳转型"元素，按以下顺序匹配目标：

1. **§9 流转图精确匹配**：§9 明确写了"点击XX→跳转YY页"，元素文案包含触发关键词 → 指向 YY
2. **§1 下游去向匹配**：§1"下游去向"列了目标页面，元素文案与目标页面名称语义相关 → 指向该目标
3. **文案模糊匹配**：元素文案（如"去注册"）与某个页面名称（如"注册页"）语义匹配 → 指向该页

### 4.2 匹配规则

- **一个元素最多匹配一个目标**。多个候选时取置信度最高的；置信度相同则不匹配，在汇报中说明。
- **多个相同文案的元素指向同一目标**：如页面中有3个"查看详情"按钮，§9 只有一个下游详情页，则3个都指向该详情页。
- **多个相同文案但目标不同**：如 §9 有多个详情页（订单详情/商品详情），而页面中有多个"查看详情"按钮——根据按钮所在区域上下文判断（如按钮在"订单"区域内→订单详情页）。**判断不了的不改**，在汇报中说明。

### 4.2.1 外部依赖型特殊处理（重要）

原型中有大量"依赖外部系统"的按钮，它们在真实环境中会跳出本系统，但在原型中**绝不能卡住**。处理策略：

**识别特征**：按钮文案包含"微信授权/微信登录/扫码登录/支付宝/银联/支付/OAuth/分享到/邀请"等外部动作关键词，或 §9 流转图中标注了"经外部系统→回到本系统"的路径。

**处理逻辑**：
1. 从 §9 流转图中找该操作的**成功着陆页**（如"微信授权成功→主页""支付成功→支付结果页"）
2. 从 §1"下游去向"中找该操作的目标页面
3. 找到着陆页 → 该按钮的跳转目标直接指向着陆页（跳过外部过程，直接体验下游）
4. 找不到着陆页 → **在汇报中说明**（标注"外部依赖型，未找到成功着陆页"），不改

**示例**：

| 按钮 | 真实行为 | 原型处理 | 目标 |
|---|---|---|---|
| "微信授权登录" | 跳微信→授权→回调→主页 | 直接跳主页 | 主页.html |
| "立即支付" | 跳支付宝→支付→回调→支付结果页 | 直接跳支付结果页 | 支付结果页.html |
| "邀请好友" | 拉起微信分享→回到当前页 | 指向 §9 的下游页（若无则不改） | 视 §9 而定 |

> 原则：原型是为业务人员理解产品服务，不是模拟技术实现。外部系统的中间过程对理解业务流程无价值，直接连通"操作前→操作后"的体验才是核心。

### 4.3 注入方式

| 元素当前状态 | 注入操作 | 示例 |
| :--- | :--- | :--- |
| `<a href="#">` | 替换 href | `<a href="目标页.html">` |
| `<a href="javascript:void(0)">` | 替换 href | `<a href="目标页.html">` |
| `<a>` 无 href | 添加 href | `<a href="目标页.html">` |
| `<a>` 已有外部 href | **不改** | 保留原值 |
| `<button>` 无 onclick | 添加 onclick | `<button onclick="location.href='目标页.html'">` |
| `<button>` 已有 onclick | **末尾追加**跳转 | `onclick="原逻辑(); location.href='目标页.html'"` |
| `[onclick]` 已有逻辑 | **末尾追加**跳转 | 同上 |

**路径规则：**
- 统一使用**相对路径**：`目标页.html`（同目录下），不用 `./` 前缀，不用绝对路径。

**返回类按钮的特殊处理：**
- §1"上游来源"**唯一** → 指向该上游页面文件
- §1"上游来源"**不唯一** → 用 history.back() **但必须加 fallback 兜底**：
  ```html
  onclick="if(history.length>1){history.back()}else{location.href='最典型入口页.html'}"
  ```
  **为什么需要 fallback**：原型是独立 HTML 文件（`file://` 协议），用户可能直接双击打开某页面而非从其他页面跳转进入——此时无历史记录，纯 `history.back()` 会回到空白页，按钮像"没反应"。加 fallback 确保任何情况都不卡住。
  **"最典型入口页"取值规则**：取 §1"上游来源"列表中的**第一个**（排在最前面的、最常见的进入路径）。

**动作后跳转型按钮（提交/保存等）的处理：**
- 保留原有 onclick 逻辑（表单校验、toast 提示等），在末尾**追加延迟跳转**：
  ```html
  onclick="原逻辑(); setTimeout(function(){location.href='目标页.html'},1200)"
  ```
- 如果原元素没有 onclick，直接加 `onclick="setTimeout(function(){location.href='目标页.html'},800)"`

### 4.4 不改的情况（必须在汇报中说明）

| 情况 | 原因 |
| :--- | :--- |
| 匹配不上任何目标页面 | 文案与所有页面名称都不相关 |
| 目标页面未生成 | 属于后续阶段，文件不存在 |
| 弹窗/抽屉内的关闭/取消按钮 | 关闭浮层不是跳转 |
| 纯功能操作（复制/筛选/搜索等） | 非跳转动作 |
| 页内锚点 `href="#xxx"` | 锚点跳转，非死链 |
| 外部链接 `http(s)://` | 外部资源（用户协议、隐私条款等真实 URL） |
| 外部依赖型未找到着陆页 | §9/§1 未标注该操作成功后的目标页面，无法确定跳转目标 |
| 自引用（指向自己所在文件） | 逻辑错误，需人工确认 |
| Tab 切换（JS 切换型） | 页面清单中是独立页面，但原型中是 JS 切换——**不自动改**，汇报中标注 |

---

## 第五步：死链检测

修改完成后，扫描**全部** HTML 文件（包括未修改的），执行以下四类检测：

### 5.1 断链检测（Dead Link）

检查每个 `href` 和 `onclick` 中的 `.html` 目标：
- 目标文件在 `pages/` 目录中**不存在** → **断链**
- 输出：`[源页面] → [元素文案] → [指向目标] → 目标未生成 / 文件名错误`

### 5.2 孤岛页面检测（Orphan Page）

一个页面同时满足以下两个条件即为孤岛：
- 没有任何其他页面的链接指向它（没有人链向它）
- 它自身也没有任何有效链接指向其他页面（它不链向别人）

输出：`[页面名称] → 可能原因（无上下游 / 流转关系未在HTML中体现 / 独立功能页）`

> 注意：登录页、404 页、引导页等天然只有一个方向的流转，不算孤岛——只标记真正的"无进无出"页面。

### 5.3 流转缺失检测（Missing Wire）

§9 流转图明确写了上下游关系，但 HTML 中**找不到**对应的可点击元素：
- 可能原因：07 生成 HTML 时遗漏了该按钮 / 按钮文案与 §9 描述差异过大无法匹配
- 输出：`[源页面] → §9说"[触发条件]→[目标页面]"，但HTML中无对应可点击元素`

### 5.4 自引用检测（Self-reference）

链接指向自己所在的 `.html` 文件：
- 输出：`[页面] → [元素文案] → 指向自身`

---

## 第六步：汇报检测结果

将全部结果在**对话中**按以下结构汇报（不产出文件）：

```
页面总数：[N] | 已连接链接：[N] | 断链：[N] | 孤岛：[N] | 流转缺失：[N]

1. 页面-文件映射表
   | 页面名称 | 文件名 | 状态 |
   | ... | ... | 已生成 / 未生成 |

2. 已连接链接清单
   | 源页面 | 元素文案 | 元素类型 | 目标页面 | 匹配依据 |
   | 登录页 | "登录" | button | 主页 | §9流转图：登录成功→主页 |
   | 登录页 | "立即注册" | a | 注册页 | §1下游+文案匹配 |

3. 死链清单
   3.1 断链  | 源页面 | 元素文案 | 指向目标 | 原因 |
   3.2 孤岛页面  | 页面名称 | 可能原因 |
   3.3 流转缺失  | 源页面 | §9流转描述 | 缺失原因 |
   3.4 自引用  | 页面 | 元素文案 |

4. 未处理清单（跳过的元素）
   | 源页面 | 元素文案 | 跳过原因 |
   | 个人中心 | "关闭" | 弹窗控制按钮，非跳转 |
   | 商品列表 | "筛选" | 纯功能操作 |
   | 订单详情 | "导出" | 目标页面未生成 |
```

---

# Constraints / 约束

1. **禁止添加新元素**：不加面包屑、导航条、返回按钮、菜单、任何新 HTML 标签。
2. **禁止修改样式**：不动 CSS、Tailwind class、内联 style。
3. **禁止修改内容**：不改文案、mock 数据、文本内容。
4. **禁止修改结构**：不移动、删除、重新嵌套已有元素。
5. **只允许三种操作**：①改 `href` 的值 ②给元素添加 `onclick` ③给无 `href` 的 `<a>` 添加 `href`。
6. **禁止批量脚本**：每个文件独立读取、独立分析、独立修改、独立汇报。禁止"其余同上"。
7. **保留已有 onclick**：不覆盖，只追加。
8. **不做 commit / push / 删除文件**，除非另行授权。
9. 冲突优先级：安全边界 > 当前用户指令 > 项目规则 > 页面文档 §9 > §1 > 页面清单。

# 完成条件

1. 所有可高置信度匹配的可点击元素已注入正确的跳转链接。
2. 所有不可匹配或不应修改的元素已在汇报中说明，附明确原因。
3. 四类死链检测全部执行完毕，结果在对话中汇报。
4. 抽查 3 个以上页面在浏览器中打开，点击跳转可到达正确的目标页面。

---

## 执行指令

- **页面清单路径**：`output/页面清单.md`
- **页面文档目录**：`output/pages/*.md`
- **HTML 文件目录**：`output/pages/*.html`

请先读取页面清单和全部 MVP 页面文档（§1 + §9），建立映射表和流转关系图。然后逐个读取已生成的 MVP HTML 文件，扫描可点击元素，按匹配规则注入链接。最后执行死链检测，在对话中汇报结果。

**每个 HTML 文件必须独立处理、独立汇报修改内容。禁止使用脚本批量处理。这是一个需要逐页思考的任务，不可偷懒。**

---

## 输出后自校验（必须执行）

修改完所有 HTML 后，立即执行以下检查：

1. **Grep 搜索 `href="#"`**：确认没有遗留的空锚点死链（除非该元素的跳转意图确实匹配不上）
2. **Grep 搜索 `href="javascript:void(0)"`**：同上
3. **Grep 搜索 `onclick` 中的 `.html`**：确认注入的跳转路径文件名与映射表一致
4. **逐文件 diff 检查**：确认每个文件的改动**只有** href 值和 onclick 属性，没有新增 HTML 标签、没有改 class、没有改文案
5. **打开 3 个以上页面**在浏览器中验证跳转可用

> 这不是可选步骤。全部通过后才能汇报"已完成"。