5.3 KiB
用户指南 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>：
<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项：
<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行的快速开始提示：
<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行的工具栏提示：
<div class="toolbar">
💡 页面布局已调整为 iPhone 16 竖屏比例 (393x852) - 共 7 页，请直接框选白色卡片范围进行截图。
</div>
- Step 2: 调整封面列表
修改第157-163行的封面列表，移除第5项并调整内容：
<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行的底部提示：
<p style="margin-top: 30px; font-size: 13px;">欢迎使用阿尼坊！本指南将帮助您快速上手，顺利参与动漫市集。如有问题请通过「我的」-「意见反馈」联系客服。</p>
- Step 3: 删除第8页（问题反馈）卡片
删除第346-377行的整个 Page 8 卡片：
<!-- 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: 提交变更
git add user-guide/演示h5_v1.html user-guide/演示h5_v2_ iPhone16竖屏比例.html
git commit -m "docs: 根据 README.md 调整 HTML 文件，移除问题反馈章节"