5.3 KiB
内容与协作页面状态收口 Implementation Plan
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: 让缺少正式接口的内容、协作、消息与提醒页面明确展示开发状态，同时保留家族圈动态的真实功能。
Architecture: 复用 public/js/pending-pages.js 的页面状态契约。每个待开发页面仅增加 data-feature-status、中文提示文案和状态脚本引用；脚本阻止主内容区未声明可用的业务链接，不新增接口调用、示例数据或业务脚本。
Tech Stack: 原生 JavaScript、静态 HTML/CSS、Node LTS node:test。
Global Constraints
- 保留现有页面、布局、视觉类名和导航结构，不删除用户设计。
PC.openapi2.json中缺少正式接口的功能不得伪造请求或静态数据为真实业务。- 家族圈动态
profile-feed.html与profile-feed-edit.html已接入正式接口，不能标记为待开发。 - 所有新增注释使用中文；不写入测试账号或密码。
- 当前工作区含用户未提交修改，不执行提交、重置或清理操作。
Task 1: 扩展页面状态测试
Files:
- Modify:
tests/pending-pages.test.js
Interfaces:
-
Consumes: 每页的
data-feature-status="pending"与public/js/pending-pages.js。 -
Produces: 内容与协作待开发页面的静态约束，以及家族圈动态未被误标记的约束。
-
Step 1: 写入失败测试
在 contentPendingPages 中列出以下页面：
const contentPendingPages = [
'profile-content.html', 'profile-article.html', 'profile-article-edit.html',
'profile-album.html', 'profile-video.html', 'profile-gift.html',
'profile-gift-edit.html', 'profile-growth.html', 'profile-growth-edit.html',
'profile-memo.html', 'profile-memo-edit.html', 'profile-merit.html',
'profile-merit-edit.html', 'profile-messages.html', 'profile-feedback.html',
'profile-admin-permissions.html', 'profile-data-reminders.html'
];
同时断言 profile-feed.html、profile-feed-edit.html 不含待开发状态标记，并验证只有 data-feature-link="available" 的业务链接可跳转。
- Step 2: 运行失败测试
Run: $env:Path = 'C:\\Program Files\\nodejs;' + $env:Path; node --test tests/pending-pages.test.js
Expected: 新增页面尚未标记，测试失败。
Task 2: 标记内容与协作页面
Files:
- Modify:
profile-content.html - Modify:
profile-article.html - Modify:
profile-article-edit.html - Modify:
profile-album.html - Modify:
profile-video.html - Modify:
profile-gift.html - Modify:
profile-gift-edit.html - Modify:
profile-growth.html - Modify:
profile-growth-edit.html - Modify:
profile-memo.html - Modify:
profile-memo-edit.html - Modify:
profile-merit.html - Modify:
profile-merit-edit.html - Modify:
profile-messages.html - Modify:
profile-feedback.html - Modify:
profile-admin-permissions.html - Modify:
profile-data-reminders.html - Test:
tests/pending-pages.test.js
Interfaces:
-
Consumes:
PageAvailability.init()读取的<body data-feature-status="pending" data-feature-message="..."></body>。 -
Produces: 可见的“功能开发中”提示，并拦截主内容区提交与操作按钮。
-
Step 1: 为每页增加状态契约
在目标页面的 body 增加 data-feature-status="pending" 和与业务相符的中文 data-feature-message。例如谱文页面使用“谱文服务正在开发中，当前页面仅保留设计预览。”
- Step 2: 加载统一状态脚本
有 ApiClient.js 的页面在其后加载：
<script src="utils/ApiClient.js"></script>
<script src="public/js/pending-pages.js"></script>
profile-video.html 与 profile-data-reminders.html 不依赖 ApiClient.js，在 page-effects.js 前加载状态脚本。
- Step 3: 收束业务入口跳转
待开发页面主内容区的业务链接由状态脚本拦截并显示当前页面提示；侧栏保留页面浏览导航。profile-content.html 的家族圈动态入口使用 data-feature-link="available"，继续跳转到 profile-feed.html。
- Step 4: 运行测试确认通过
Run: $env:Path = 'C:\\Program Files\\nodejs;' + $env:Path; node --test tests/pending-pages.test.js
Expected: 待开发页面均加载状态脚本，家族圈动态页面未被标记。
Task 3: 更新进度并做静态验证
Files:
- Modify:
docs/规划.md - Modify:
docs/superpowers/plans/2026-07-11-content-page-state-closure.md - Test:
tests/*.test.js
Interfaces:
-
Consumes: 全部页面的本地脚本引用。
-
Produces: 已完成第二轮进度与可重复的验证结果。
-
Step 1: 更新总规划的第二轮状态
将 docs/规划.md 中“第二轮：内容与协作页面状态收口”从未完成更新为已完成，并写明家族圈动态未受影响。
- Step 2: 执行完整测试
Run: $env:Path = 'C:\\Program Files\\nodejs;' + $env:Path; npm.cmd test
Expected: 所有 Node 测试通过。
- Step 3: 执行静态检查
Run: PowerShell 扫描全部 HTML 的 src="*.js"，随后运行 git diff --check。
Expected: 每个本地脚本文件存在，且没有空白格式错误。