160 lines
5.3 KiB
Markdown
160 lines
5.3 KiB
Markdown
# 用户指南 HTML 文件调整实现计划
|
||
|
||
> **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:** 根据 README.md 目录结构，移除两个 HTML 文件中的"问题反馈"章节，使内容与基准文档保持一致。
|
||
|
||
**Architecture:** 直接修改 HTML 文件，删除"问题反馈"相关内容，调整页码和导航结构。不涉及逻辑变更，纯内容调整。
|
||
|
||
**Tech Stack:** HTML5, CSS, JavaScript（仅 v1.html 有滚动监听脚本）
|
||
|
||
---
|
||
|
||
## 文件结构变更
|
||
|
||
| 文件 | 操作 | 变更内容 |
|
||
|------|------|----------|
|
||
| `user-guide/演示h5_v1.html` | 修改 | 移除侧边栏"05-问题反馈"、首页目录第5项、整个问题反馈section |
|
||
| `user-guide/演示h5_v2_ iPhone16竖屏比例.html` | 修改 | 移除封面第5项、第8页卡片、调整页码为01/07~07/07、工具栏提示改为7页 |
|
||
|
||
---
|
||
|
||
### Task 1: 调整演示h5_v1.html
|
||
|
||
**Files:**
|
||
- Modify: `user-guide/演示h5_v1.html:27,65-69,236-261`
|
||
|
||
- [ ] **Step 1: 移除侧边栏导航中的问题反馈项**
|
||
|
||
修改第27行附近的侧边栏导航，删除 `<li><a href="#feedback">05 - 问题反馈</a></li>`：
|
||
|
||
```html
|
||
<ul class="nav-links">
|
||
<li><a href="#readme">首页：用户指南</a></li>
|
||
<li><a href="#login">01 - 登录流程</a></li>
|
||
<li><a href="#auth">02 - 实名认证</a></li>
|
||
<li><a href="#booth">03 - 申摊流程</a></li>
|
||
<li><a href="#reservation">04 - 预约详情</a></li>
|
||
</ul>
|
||
```
|
||
|
||
- [ ] **Step 2: 移除首页目录中的问题反馈项**
|
||
|
||
修改第65-69行附近的目录列表，删除第5项：
|
||
|
||
```html
|
||
<ol>
|
||
<li><a href="#login" style="color:var(--primary-color)">登录流程</a> - 微信授权登录</li>
|
||
<li><a href="#auth" style="color:var(--primary-color)">实名认证</a> - 完成身份验证</li>
|
||
<li><a href="#booth" style="color:var(--primary-color)">申摊流程</a> - 申请摊位参展</li>
|
||
<li><a href="#reservation" style="color:var(--primary-color)">预约详情</a> - 查看申请状态</li>
|
||
</ol>
|
||
```
|
||
|
||
同时更新第71行的快速开始提示：
|
||
|
||
```html
|
||
<h2>快速开始</h2>
|
||
<p>如果您是新用户，建议按顺序阅读以上文档。如有问题，请通过「我的」-「意见反馈」联系客服。</p>
|
||
```
|
||
|
||
- [ ] **Step 3: 移除整个问题反馈section**
|
||
|
||
删除第236-261行左右的 `<section id="feedback" class="section">` 整个区块（约25行代码）。
|
||
|
||
- [ ] **Step 4: 验证文件**
|
||
|
||
在浏览器中打开文件，确认：
|
||
- 侧边栏仅有5项（首页 + 4个流程）
|
||
- 目录仅有4项
|
||
- 无问题反馈section
|
||
- 滚动监听脚本正常工作
|
||
|
||
---
|
||
|
||
### Task 2: 调整演示h5_v2_ iPhone16竖屏比例.html
|
||
|
||
**Files:**
|
||
- Modify: `user-guide/演示h5_v2_ iPhone16竖屏比例.html:145-146,157-163,346-377`
|
||
|
||
- [ ] **Step 1: 更新工具栏提示页数**
|
||
|
||
修改第145-146行的工具栏提示：
|
||
|
||
```html
|
||
<div class="toolbar">
|
||
💡 页面布局已调整为 iPhone 16 竖屏比例 (393x852) - 共 7 页，请直接框选白色卡片范围进行截图。
|
||
</div>
|
||
```
|
||
|
||
- [ ] **Step 2: 调整封面列表**
|
||
|
||
修改第157-163行的封面列表，移除第5项并调整内容：
|
||
|
||
```html
|
||
<ol>
|
||
<li><strong style="color:var(--primary-color)">登录流程</strong> - 微信授权登录</li>
|
||
<li><strong style="color:var(--primary-color)">实名认证</strong> - 完成身份验证</li>
|
||
<li><strong style="color:var(--primary-color)">申摊流程</strong> - 申请摊位参展</li>
|
||
<li><strong style="color:var(--primary-color)">预约详情</strong> - 查看申请状态</li>
|
||
</ol>
|
||
```
|
||
|
||
同时更新第165行的底部提示：
|
||
|
||
```html
|
||
<p style="margin-top: 30px; font-size: 13px;">欢迎使用阿尼坊！本指南将帮助您快速上手，顺利参与动漫市集。如有问题请通过「我的」-「意见反馈」联系客服。</p>
|
||
```
|
||
|
||
- [ ] **Step 3: 删除第8页（问题反馈）卡片**
|
||
|
||
删除第346-377行的整个 Page 8 卡片：
|
||
|
||
```html
|
||
<!-- Page 8: 问题反馈 -->
|
||
<div class="iphone-card">
|
||
...
|
||
</div>
|
||
```
|
||
|
||
- [ ] **Step 4: 调整所有页码**
|
||
|
||
逐页更新页码显示：
|
||
- 第150行：`01 / 08` → `01 / 07`
|
||
- 第172行：`02 / 08` → `02 / 07`
|
||
- 第197行：`03 / 08` → `03 / 07`
|
||
- 第222行：`04 / 08` → `04 / 07`
|
||
- 第248行：`05 / 08` → `05 / 07`
|
||
- 第281行：`06 / 08` → `06 / 07`
|
||
- 第315行：`07 / 08` → `07 / 07`
|
||
|
||
- [ ] **Step 5: 验证文件**
|
||
|
||
在浏览器中打开文件，确认：
|
||
- 工具栏显示"共7页"
|
||
- 封面列表仅有4项
|
||
- 页码为 01/07 ~ 07/07
|
||
- 无第8页问题反馈卡片
|
||
|
||
---
|
||
|
||
### Task 3: 最终验证与提交
|
||
|
||
**Files:**
|
||
- Verify: `user-guide/README.md` (基准文档)
|
||
|
||
- [ ] **Step 1: 对比验证**
|
||
|
||
确认两个 HTML 文件的内容与 README.md 目录结构一致：
|
||
- 登录流程 ✓
|
||
- 实名认证 ✓
|
||
- 申摊流程 ✓
|
||
- 预约详情 ✓
|
||
- 无问题反馈章节 ✓
|
||
|
||
- [ ] **Step 2: 提交变更**
|
||
|
||
```bash
|
||
git add user-guide/演示h5_v1.html user-guide/演示h5_v2_ iPhone16竖屏比例.html
|
||
git commit -m "docs: 根据 README.md 调整 HTML 文件，移除问题反馈章节"
|
||
``` |