4.9 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: 仅在家谱列表、创建/加入、审核、成员管理、邀请、世系和字辈页面加载一个轻量状态脚本。页面通过 data-feature-status 和 data-feature-message 提供文案；脚本统一插入提示条，并拦截页面主内容区的提交与按钮操作。
Tech Stack: 原生 JavaScript、静态 HTML/CSS、Node LTS node:test。
Global Constraints
- 保留现有页面、布局、视觉类名和导航结构，不删除用户设计。
- 不调用
PC.openapi2.json中不存在的家谱、成员、世系或字辈接口。 - 所有新增注释使用中文；不写入测试账号或密码。
- 当前工作区含用户未提交修改，不执行提交、重置或清理操作。
Task 1: 建立失败测试
Files:
- Create:
tests/pending-pages.test.js - Modify:
tests/pc-scope.test.js
Interfaces:
-
Consumes:
PageAvailability.buildBanner(message)与PageAvailability.isPendingPage(body)。 -
Produces: 对状态脚本、页面标记和脚本加载的约束。
-
Step 1: 写入失败测试
test('待开发页面生成明确且转义后的状态提示', () => {
assert.match(PageAvailability.buildBanner('家谱基础服务正在开发中'), /家谱基础服务正在开发中/);
assert.match(PageAvailability.buildBanner('<script>'), /<script>/);
});
test('家谱基础页面显式加载状态脚本', () => {
assert.equal(read('profile-families.html').includes('data-feature-status="pending"'), true);
assert.equal(read('profile-tree.html').includes('src="public/js/pending-pages.js"'), true);
});
- Step 2: 运行失败测试
Run: $env:Path = 'C:\\Program Files\\nodejs;' + $env:Path; node --test tests/pending-pages.test.js tests/pc-scope.test.js
Expected: pending-pages.js 不存在且页面未标记导致失败。
Task 2: 实现统一状态脚本与样式
Files:
- Create:
public/js/pending-pages.js - Modify:
public/css/profile-module.css - Test:
tests/pending-pages.test.js
Interfaces:
-
Consumes:
<body data-feature-status="pending" data-feature-message="..."></body>。 -
Produces:
PageAvailability.buildBanner(message)、PageAvailability.init()。 -
Step 1: 实现最小状态脚本
function buildBanner(message) {
return '<section class="feature-status-banner" role="status"><strong>功能开发中</strong><p>' + escapeHtml(message) + '</p></section>';
}
脚本只在 data-feature-status="pending" 页面运行，将提示条放在 .module-main 首位；拦截该页面 main 区域内的表单提交和非重置按钮，显示同一提示文案。
- Step 2: 增加复用样式
.feature-status-banner {
border: 1px solid rgba(196, 146, 69, .38);
border-radius: 16px;
background: #fff8e8;
}
- Step 3: 运行测试确认通过
Run: $env:Path = 'C:\\Program Files\\nodejs;' + $env:Path; node --test tests/pending-pages.test.js tests/pc-scope.test.js
Expected: 新增状态脚本和页面标记断言通过。
Task 3: 标记家谱基础页面
Files:
- Modify:
profile-families.html - Modify:
profile-create-family.html - Modify:
profile-join-family.html - Modify:
profile-join-review.html - Modify:
profile-family-admin.html - Modify:
profile-invite.html - Modify:
profile-tree.html - Modify:
profile-generation.html
Interfaces:
-
Consumes:
pending-pages.js和每页data-feature-message。 -
Produces: 明确状态提示，不提交文档外请求。
-
Step 1: 在 body 标记状态
<body class="page-profile-module" data-feature-status="pending" data-feature-message="家谱成员与权限服务正在开发中，当前页面仅保留设计预览。">
- Step 2: 在 ApiClient 后加载状态脚本
<script src="utils/ApiClient.js"></script>
<script src="public/js/pending-pages.js"></script>
<script src="public/js/page-effects.js"></script>
- Step 3: 运行完整测试
Run: $env:Path = 'C:\\Program Files\\nodejs;' + $env:Path; npm.cmd test
Expected: 全部测试通过。
Task 4: 静态验证
Files:
- Test:
tests/pc-scope.test.js
Interfaces:
-
Consumes: 8 个已标记页面。
-
Produces: 所有待开发页面有状态文案，所有页面脚本路径存在。
-
Step 1: 执行脚本引用检查
Run: PowerShell 扫描全部 HTML 的 src="*.js"，确认每个本地脚本文件存在。
- Step 2: 执行格式检查
Run: git diff --check
Expected: 无缺失脚本和空白格式错误。