knowledge-base/docs/superpowers/plans/2026-04-19-user-guide-screenshots-integration.md

# 用户指南截图集成实施计划

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 根据现有6张截图内容，调整user-guide目录中的md文档和html文件，将截图正确引用到文档中。

**Architecture:** 分析现有截图与文档的映射关系，更新文档中的截图占位符为实际截图引用，并调整文档描述使其与截图内容一致。

**Tech Stack:** Markdown文档, HTML演示页面

---

## 截图与文档映射分析

| 截图文件 | 内容描述 | 对应文档位置 |
|----------|----------|--------------|
| `1_市集界面_右上角申摊.png` | 市集页面，底部导航"市集"高亮，右上角"申摊"按钮 | 03-申摊流程.md 申请入口 |
| `2_前往登录弹窗.jpg` | 登录提示弹窗，"请前往登录"，有"取消"和"去登录"按钮 | 01-登录流程.md 或 03-申摊流程.md（未登录触发） |
| `3_填写昵称_头像信息.png` | 登录表单，头像选择、昵称输入、用户协议勾选 | 01-登录流程.md 授权登录部分 |
| `4_登录后授权手机号弹窗.png` | 手机号授权弹窗，显示微信绑定号码 | 01-登录流程.md 新增手机号授权部分 |
| `5_我的界面_前往实名认证.png` | "我的"页面，有"前往实名认证"按钮和"预约详情"入口 | 02-实名认证.md 认证入口 |
| `6_填写实名认证信息.png` | 实名认证表单，姓名和身份证号输入框 | 02-实名认证.md 认证信息填写 |

---

## Task 1: 更新 01-登录流程.md

**Files:**
- Modify: `user-guide/01-登录流程.md`

- [ ] **Step 1: 调整登录流程文档结构**

根据截图内容，登录流程实际包含以下步骤：
1. 打开小程序（待补充截图）
2. 触发登录弹窗（对应图2）
3. 填写昵称头像（对应图3）
4. 手机号授权（对应图4）
5. 完成登录显示"我的"页面（待补充截图）

更新文档内容：

```markdown
# 登录流程

首次打开阿尼坊小程序时，系统会引导您完成微信登录。

## 步骤说明

### 1. 打开小程序

通过微信搜索"阿尼坊"或扫描二维码进入小程序。

> 📸 **截图**: 小程序首页界面（待补充）

### 2. 触发登录

当需要登录的功能（如申摊、预约）时，系统弹出登录提示。

![登录提示弹窗](screenshots/2_前往登录弹窗.jpg)

点击「去登录」按钮进入登录流程。

### 3. 填写个人信息

登录表单包含以下内容：
- **头像选择** - 点击头像区域选择或上传头像
- **昵称填写** - 输入您的昵称（用于展示）
- **用户协议** - 勾选同意用户协议

![登录表单](screenshots/3_填写昵称_头像信息.png)

填写完成后点击「登录」按钮。

### 4. 手机号授权

系统申请获取您的微信绑定手机号：

![手机号授权弹窗](screenshots/4_登录后授权手机号弹窗.png)

点击「允许」按钮完成授权，手机号将用于：
- 接收验证码
- 订单通知
- 客服联系

### 5. 完成登录

登录成功后：
- 您的头像和昵称显示在「我的」页面
- 系统自动生成唯一 UID（用户编号）

> 📸 **截图**: 「我的」页面展示用户信息（待补充）

## 重要提示

⚠️ **游客用户限制**
未登录的游客用户仅可浏览：
- 活动公告
- 商铺卡片详情
- 摊位卡片详情

需要登录后才能使用：
- 设施预约
- 摊位申请
- 评论点赞
- 收藏功能

## 下一步

完成登录后，请继续[实名认证](02-实名认证.md)以解锁完整功能。
```

---

## Task 2: 更新 02-实名认证.md

**Files:**
- Modify: `user-guide/02-实名认证.md`

- [ ] **Step 1: 更新实名认证文档截图引用**

现有截图覆盖：认证入口（图5）和认证表单（图6）。

更新文档内容：

```markdown
# 实名认证

实名认证是使用设施预约和摊位申请功能的前置条件。

## 认证入口

进入「我的」页面，点击「前往实名认证」按钮。

![实名认证入口](screenshots/5_我的界面_前往实名认证.png)

> 💡 从截图可见，「我的」页面还包含「预约详情」入口，方便查看申请状态。

## 认证信息填写

### 必填内容

| 字段 | 说明 | 要求 |
|------|------|------|
| 真实姓名 | 与身份证一致 | 2-20个汉字 |
| 身份证号码 | 18位身份证号 | 正确格式验证 |

### 填写表单

![实名认证表单](screenshots/6_填写实名认证信息.png)

输入您的真实姓名和身份证号码，确保信息准确无误。

### 提交认证

填写完成后点击「提交」按钮，系统进行身份验证：
- 验证身份证号与姓名是否匹配
- 验证成功后显示「已实名」标签

> 📸 **截图**: 认证成功界面（待补充）

## 重要提示

⚠️ **认证后不可修改**
实名认证完成后，姓名和身份证号不可更改。如需修改请联系客服。

⚠️ **信息准确性**
请确保填写的信息与身份证一致，错误信息可能导致认证失败。

## 解锁功能

实名认证后可使用：
- ✅ 设施预约（舞蹈室、练习室等）
- ✅ 摊位申请（动漫市集参展）
- ✅ 商铺卡片发布（商铺会员专属）

## 下一步

完成实名认证后，您可以：
- [申请摊位](03-申摊流程.md) - 参加动漫市集
- [预约设施](04-预约详情.md) - 使用场地设施
```

---

## Task 3: 更新 03-申摊流程.md

**Files:**
- Modify: `user-guide/03-申摊流程.md`

- [ ] **Step 1: 更新申摊流程文档**

现有截图覆盖：申摊入口（图1）。图2可作为未登录时的提示示例。

更新文档内容：

```markdown
# 申摊流程

本指南帮助您完成摊位申请，参加阿尼坊动漫市集。

## 前置条件

申请摊位前请确保：
- ✅ 已完成微信登录
- ✅ 已完成实名认证

> 💡 未登录用户点击「申摊」时，会弹出登录提示（见登录流程文档）

## 申请入口

进入「市集」页面，点击右上角「申摊」按钮。

![申摊入口](screenshots/1_市集界面_右上角申摊.png)

> 💡 从截图可见，市集页面底部导航高亮「市集」，页面展示摊位卡片瀑布流。

## 未登录提示

如果您未登录，点击「申摊」后会弹出登录提示：

![登录提示](screenshots/2_前往登录弹窗.jpg)

点击「去登录」按钮，完成登录后再继续申摊。

## 填写申请信息

### 必填内容

| 字段 | 限制 | 说明 |
|------|------|------|
| 标题 | 50字以内 | 卡片标题 |
| 正文 | 500字以内 | 内容描述，可用 #标签 |
| 图片 | 1张，≤5MB | 卡片封面图 |
| 联系QQ | 可修改 | 客服联系渠道 |
| 预约场次 | 下拉选择 | 日期+区域 |
| 动漫IP标签 | 1-10个 | 必选至少1个 |

### 1. 填写标题和正文

输入吸引人的标题和详细的内容描述。

> 📸 **截图**: 申摊表单填写界面（待补充）

### 2. 上传图片

点击上传按钮，选择一张清晰图片作为卡片封面。

> 📸 **截图**: 图片上传界面（待补充）

### 3. 选择场次

从下拉菜单选择参展场次：
- 显示日期、星期、场地区域
- 同一天仅能申请一个区域

> 📸 **截图**: 场次选择下拉菜单（待补充）

### 4. 添加动漫IP标签

点击标签输入框：
- 可搜索标签（如：名侦探柯南、EVA、龙珠）
- 至少选择1个标签，最多10个

> 📸 **截图**: 标签搜索选择界面（待补充）

### 5. 查看须知弹窗

提交前需阅读申摊须知：
- 勾选「已阅读」选项
- 点击「确认提交」

> 📸 **截图**: 申摊须知弹窗（待补充）

## 申请结果

提交成功后显示注意事项弹窗，可通过「预约详情」查看进度。

> 📸 **截图**: 申请成功提示界面（待补充）

## 申请状态流转

| 状态 | 说明 |
|------|------|
| 待抽签 | 申请已提交，等待抽签 |
| 审核中 | 抽签中签，等待审核 |
| 待缴费 | 审核通过，等待支付 |
| 未中签 | 抽签未中 |
| 审核驳回 | 审核未通过（显示原因） |
| 成功 | 已公布摊位号 |

## 重要提示

⚠️ **场次限制**
- 每天仅能申请一个场次
- 申请前请确认场次信息

⚠️ **存稿机制**
- 系统自动保存上次填写内容
- 30天后自动清理存稿

## 下一步

提交申请后，请前往[预约详情](04-预约详情.md)查看申请状态。
```

---

## Task 4: 更新 04-预约详情.md

**Files:**
- Modify: `user-guide/04-预约详情.md`

- [ ] **Step 1: 更新预约详情文档**

图5（我的界面）中可见「预约详情」入口，可作为入口截图引用。

更新文档内容：

```markdown
# 预约详情

本页面展示您的摊位申请和设施预约记录。

## 入口位置

进入「我的」页面，点击「预约详情」入口。

![预约详情入口](screenshots/5_我的界面_前往实名认证.png)

> 💡 从截图可见，「预约详情」入口位于「我的」页面中。

## 页面结构

页面分为两个栏目：
- **摊位栏目** - 摊位申请记录
- **设施栏目** - 设施预约记录

> 📸 **截图**: 预约详情页面整体布局（待补充）

## 摊位申请状态

### 状态说明

| 状态 | 显示内容 | 操作 |
|------|----------|------|
| 待抽签 | 场次信息、备注 | 无 |
| 待缴费 | 场次信息、订单号、金额、截止时间 | 「支付」「取消」按钮 |
| 未中签 | 场次信息 | 无 |
| 审核驳回 | 场次信息、驳回原因 | 无 |
| 待公布 | 场次信息、订单号、备注、退款提示 | 「申请退款」按钮 |
| 成功 | 场次信息、摊位号、订单号、备注 | 无 |
| 已失效 | 场次信息、订单号、备注 | 无 |

### 摊位号格式

公布后的摊位号格式：`月.日 + 区域 + 编号`

示例：`2.1 A区13`

> 📸 **截图**: 成功状态显示摊位号（待补充）

## 设施预约状态

| 状态 | 显示内容 | 操作 |
|------|----------|------|
| 待缴费 | 设施名称、时间段、时长、金额、截止时间 | 「支付」「取消」按钮 |
| 成功 | 设施名称、时间段、订单号、退款提示 | 「申请退款」按钮 |
| 已失效 | 设施名称、时间段、订单号 | 无 |
| 已退款 | 设施名称、时间段、订单号 | 无 |

> 📸 **截图**: 设施预约成功状态（待补充）

## 支付操作

### 待缴费状态

点击「支付」按钮：
- 进入微信支付流程
- 请在截止时间前完成支付
- 超时将自动取消订单

> 📸 **截图**: 支付界面倒计时提示（待补充）

### 退款申请

符合退款条件时：
- 点击「申请退款」按钮
- 系统处理退款请求
- 退款成功后状态变更为「已退款」

> 📸 **截图**: 退款申请界面（待补充）

## 重要提示

⚠️ **支付时限**
请在截止时间前完成支付，超时订单自动取消。

⚠️ **退款截止时间**
各场次有退款截止时间，请留意提示。

## 下一步

如有问题，请参考[问题反馈](05-问题反馈.md)联系客服。
```

---

## Task 5: 更新 05-问题反馈.md

**Files:**
- Modify: `user-guide/05-问题反馈.md`

- [ ] **Step 1: 更新问题反馈文档**

图5可作为UID位置参考，但无直接截图。文档保持现有结构，标注待补充截图。

```markdown
# 问题反馈

遇到问题或Bug时，请通过以下方式联系客服。

## 获取您的 UID

UID（用户编号）是客服定位您账号的关键信息。

### 查看位置

进入「我的」页面，头像下方显示您的 UID。

> 📸 **截图**: 「我的」页面 UID 显示位置（参考图5，待补充UID标注）

### UID 格式

格式：`UID: XXXXXX`（6位数字）

**反馈时请提供准确的 UID，帮助客服快速定位问题。**

## 意见反馈入口

进入「我的」页面，点击「意见反馈」。

> 📸 **截图**: 意见反馈入口位置（待补充）

## 反馈内容填写

### 问题分类选择

| 分类 | 适用场景 |
|------|----------|
| 设施预约 | 场地预约问题 |
| 摊位申请 | 申摊流程问题 |
| 商铺发布 | 商铺卡片问题 |
| 支付/退款 | 支付退款问题 |
| 实名认证 | 认证相关问题 |
| 账号/登录 | 登录账号问题 |
| 内容审核 | 内容审核问题 |
| 活动公告 | 公告相关问题 |
| 功能建议 | 新功能建议 |
| 投诉举报 | 投诉举报问题 |
| 技术故障 | Bug技术问题 |
| 其他问题 | 其他类型问题 |

> 📸 **截图**: 问题分类选择界面（待补充）

### 正文填写

- 字数限制：800字以内
- 请详细描述问题发生过程
- 包含：操作步骤、错误提示、发生时间

> 📸 **截图**: 反馈正文输入界面（待补充）

### 上传限制

- 每小时仅限上传一次反馈
- 如需多次反馈，请等待一小时

## 联系客服渠道

### 入口位置

进入「我的」页面，点击「联系渠道」。

> 📸 **截图**: 联系渠道入口（待补充）

### 联系方式弹窗

弹窗显示：
- 客服电话
- 客服微信
- 客服邮箱
- 工作时间

点击联系方式自动复制，显示提示气泡。

> 📸 **截图**: 联系方式弹窗界面（待补充）

## Bug反馈指引

### 反馈内容模板

```
【问题描述】
简要描述遇到的问题

【UID】
您的用户编号

【发生时间】
问题发生的时间

【操作步骤】
1. 进入某页面
2. 点击某按钮
3. 出现某错误

【截图/视频】
如有截图或录屏请附上

【期望结果】
您期望的正常结果
```

### 示例反馈

```
【问题描述】
点击支付按钮后显示"服务器繁忙"

【UID】
123456

【发生时间】
2026年4月10日 下午3点

【操作步骤】
1. 进入预约详情
2. 点击"支付"按钮
3. 弹出"服务器繁忙"提示

【截图】
（附上截图）

【期望结果】
正常进入微信支付界面
```

## 重要提示

⚠️ **提供 UID**
反馈时务必提供您的 UID，客服需要通过 UID 定位账号。

⚠️ **详细描述**
请尽量详细描述操作步骤，帮助技术团队复现问题。

⚠️ **截图证据**
如有错误界面截图，请一并反馈，加速问题解决。
```

---

## Task 6: 更新 HTML 演示文件

**Files:**
- Modify: `user-guide/演示htlm_v1.html`

- [ ] **Step 1: 更新HTML文件中的截图引用**

将HTML中的截图占位符替换为实际图片引用：

1. 登录流程部分：
   - 添加图2（登录弹窗）
   - 添加图3（登录表单）
   - 添加图4（手机号授权）

2. 实名认证部分：
   - 添加图5（认证入口）
   - 添加图6（认证表单）

3. 申摊流程部分：
   - 添加图1（申摊入口）
   - 添加图2作为未登录提示示例

- [ ] **Step 2: 添加图片显示样式**

在CSS中添加实际图片显示样式（替换占位符样式）：

```css
/* 实际截图样式 */
.actual-img {
    width: 100%;
    max-width: 375px; /* 移动端宽度 */
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
```

- [ ] **Step 3: 替换登录流程部分的占位符**

找到登录流程section（id="login"），替换截图占位符为实际图片：

```html
<!-- 01 登录流程 -->
<section id="login" class="section">
    <h1>登录流程</h1>
    <p>首次打开阿尼坊小程序时，系统会引导您完成微信登录。</p>
    
    <h2>步骤说明</h2>
    <h3>1. 打开小程序</h3>
    <p>通过微信搜索"阿尼坊"或扫描二维码进入小程序。</p>
    <div class="img-placeholder">📸 截图: 小程序首页界面（待补充）</div>

    <h3>2. 触发登录</h3>
    <p>当使用需要登录的功能时，系统弹出登录提示。</p>
    <img src="screenshots/2_前往登录弹窗.jpg" alt="登录提示弹窗" class="actual-img">

    <h3>3. 填写个人信息</h3>
    <p>登录表单包含头像选择、昵称填写和用户协议勾选。</p>
    <img src="screenshots/3_填写昵称_头像信息.png" alt="登录表单" class="actual-img">

    <h3>4. 手机号授权</h3>
    <p>系统申请获取微信绑定手机号，用于验证码接收和客服联系。</p>
    <img src="screenshots/4_登录后授权手机号弹窗.png" alt="手机号授权" class="actual-img">

    <h3>5. 完成登录</h3>
    <p>登录成功后，头像和昵称显示在「我的」页面。</p>
    <div class="img-placeholder">📸 截图: 「我的」页面展示用户信息（待补充）</div>

    <!-- ... 其余内容保持不变 -->
</section>
```

- [ ] **Step 4: 替换实名认证部分的占位符**

找到实名认证section（id="auth"），替换截图：

```html
<!-- 02 实名认证 -->
<section id="auth" class="section">
    <h1>实名认证</h1>
    <p>实名认证是使用设施预约和摊位申请功能的前置条件。</p>
    
    <h2>认证入口</h2>
    <p>进入「我的」页面，点击「前往实名认证」按钮。</p>
    <img src="screenshots/5_我的界面_前往实名认证.png" alt="实名认证入口" class="actual-img">

    <!-- ... 表格内容保持不变 -->

    <h3>1. 填写姓名和身份证号</h3>
    <img src="screenshots/6_填写实名认证信息.png" alt="实名认证表单" class="actual-img">

    <!-- ... 其余内容保持不变 -->
</section>
```

- [ ] **Step 5: 替换申摊流程部分的占位符**

找到申摊流程section（id="booth"），替换截图：

```html
<!-- 03 申摊流程 -->
<section id="booth" class="section">
    <h1>申摊流程</h1>
    <p>本指南帮助您完成摊位申请，参加阿尼坊动漫市集。</p>

    <!-- ... 前置条件保持不变 -->

    <h2>申请入口</h2>
    <p>进入「市集」页面，点击右上角「申摊」按钮。</p>
    <img src="screenshots/1_市集界面_右上角申摊.png" alt="申摊入口" class="actual-img">

    <h2>未登录提示</h2>
    <p>未登录用户点击「申摊」会弹出登录提示：</p>
    <img src="screenshots/2_前往登录弹窗.jpg" alt="登录提示" class="actual-img">

    <!-- ... 其余内容保持不变 -->
</section>
```

- [ ] **Step 6: 替换预约详情部分的入口截图**

```html
<!-- 04 预约详情 -->
<section id="reservation" class="section">
    <h1>预约详情</h1>
    <p>本页面展示您的摊位申请和设施预约记录。</p>
    
    <h2>入口位置</h2>
    <p>进入「我的」页面，点击「预约详情」入口。</p>
    <img src="screenshots/5_我的界面_前往实名认证.png" alt="预约详情入口" class="actual-img">

    <!-- ... 其余内容保持不变 -->
</section>
```

---

## Task 7: 更新 README.md

**Files:**
- Modify: `user-guide/README.md`

- [ ] **Step 1: 更新README添加截图状态说明**

```markdown
# 阿尼坊小程序用户指南

欢迎使用阿尼坊小程序！本指南将帮助您快速上手。

## 目录

1. [登录流程](01-登录流程.md) - 微信授权登录
2. [实名认证](02-实名认证.md) - 完成身份验证
3. [申摊流程](03-申摊流程.md) - 申请摊位参展
4. [预约详情](04-预约详情.md) - 查看申请状态
5. [问题反馈](05-问题反馈.md) - 获取帮助和反馈问题

## 截图状态

当前已集成以下截图：

| 文档 | 已有截图 | 待补充截图 |
|------|----------|------------|
| 登录流程 | 登录弹窗、登录表单、手机号授权 | 首页界面、"我的"页面 |
| 实名认证 | 认证入口、认证表单 | 认证成功界面 |
| 申摊流程 | 申摊入口、登录提示 | 表单填写、场次选择等 |
| 预约详情 | 入口截图 | 详情页面、支付界面等 |
| 问题反馈 | 无 | 全部截图 |

详见 [screenshots/README.md](screenshots/README.md) 了解完整截图清单。

## 快速开始

如果您是新用户，建议按顺序阅读以上文档。如有问题，请参考[问题反馈](05-问题反馈.md)联系客服。

## 演示页面

可打开 [演示htlm_v1.html](演示htlm_v1.html) 在浏览器中查看完整指南。

---
阿尼坊团队
```

---

## 自检清单

完成以上任务后，请验证：

- [ ] 所有md文档中的截图引用路径正确（相对路径）
- [ ] HTML文件中的图片src路径正确
- [ ] 文档描述与截图内容一致
- [ ] 待补充截图已明确标注
- [ ] README.md已更新截图状态说明