141 lines
4.9 KiB
Markdown
141 lines
4.9 KiB
Markdown
# 家谱基础页面状态收口 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: 对状态脚本、页面标记和脚本加载的约束。
|
|
|
|
- [x] **Step 1: 写入失败测试**
|
|
|
|
```js
|
|
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);
|
|
});
|
|
```
|
|
|
|
- [x] **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()`。
|
|
|
|
- [x] **Step 1: 实现最小状态脚本**
|
|
|
|
```js
|
|
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` 区域内的表单提交和非重置按钮，显示同一提示文案。
|
|
|
|
- [x] **Step 2: 增加复用样式**
|
|
|
|
```css
|
|
.feature-status-banner {
|
|
border: 1px solid rgba(196, 146, 69, .38);
|
|
border-radius: 16px;
|
|
background: #fff8e8;
|
|
}
|
|
```
|
|
|
|
- [x] **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: 明确状态提示，不提交文档外请求。
|
|
|
|
- [x] **Step 1: 在 body 标记状态**
|
|
|
|
```html
|
|
<body class="page-profile-module" data-feature-status="pending" data-feature-message="家谱成员与权限服务正在开发中，当前页面仅保留设计预览。">
|
|
```
|
|
|
|
- [x] **Step 2: 在 ApiClient 后加载状态脚本**
|
|
|
|
```html
|
|
<script src="utils/ApiClient.js"></script>
|
|
<script src="public/js/pending-pages.js"></script>
|
|
<script src="public/js/page-effects.js"></script>
|
|
```
|
|
|
|
- [x] **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: 所有待开发页面有状态文案，所有页面脚本路径存在。
|
|
|
|
- [x] **Step 1: 执行脚本引用检查**
|
|
|
|
Run: PowerShell 扫描全部 HTML 的 `src="*.js"`，确认每个本地脚本文件存在。
|
|
|
|
- [x] **Step 2: 执行格式检查**
|
|
|
|
Run: `git diff --check`
|
|
|
|
Expected: 无缺失脚本和空白格式错误。
|