5.5 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: 新增静态 HTML 页面共用 public/css/site-info.css 和现有官网头尾布局。新闻页只链接现有静态文章与公告详情；法律页面明确标明待法务确认；工单页面复用 pending-pages.js 阻止无接口提交。
Tech Stack: 静态 HTML、原生 CSS、原生 JavaScript、Node LTS node:test。
Global Constraints
- 保留现有页面、布局、视觉类名和导航结构，不删除用户设计。
- 不新增
PC.openapi2.json外的接口调用，不伪造新闻接口、法律协议、工单列表或工单详情数据。 - 法律页面只能显示“待法务确认”说明，发布前必须替换为主体与法务确认的正式文本。
- 所有新增注释使用中文；不写入测试账号或密码。
- 当前工作区含用户未提交修改，不执行提交、重置或清理操作。
Task 1: 建立静态页面约束测试
Files:
- Create:
tests/public-static-pages.test.js
Interfaces:
-
Consumes: 静态页面文件、
data-feature-status="pending"和本地href。 -
Produces: 页面存在、关键说明、状态脚本与本地链接的可重复校验。
-
Step 1: 写入失败测试
测试必须断言存在以下文件：
const staticPages = [
'news.html', 'privacy.html', 'children-privacy.html', 'terms.html',
'not-found.html', 'forbidden.html', 'maintenance.html',
'my-tickets.html', 'ticket-detail.html'
];
同时断言：news.html 含有新闻分类锚点并链接 article-detail.html、notice-detail.html；三个法律页面含“待法务确认”；submit-ticket.html、my-tickets.html、ticket-detail.html 有待开发状态和 pending-pages.js；新页面中的本地 href 全部存在。
- Step 2: 运行失败测试
Run: $env:Path = 'C:\\Program Files\\nodejs;' + $env:Path; node --test tests/public-static-pages.test.js
Expected: 新页面不存在导致测试失败。
Task 2: 建立通用静态页面外观与新闻、法律入口
Files:
- Create:
public/css/site-info.css - Create:
news.html - Create:
privacy.html - Create:
children-privacy.html - Create:
terms.html - Modify:
index.html
Interfaces:
-
Consumes: 现有
public/css/public.css的site-header、footer、container、btn与card样式。 -
Produces: 新闻分类和详情跳转，以及能从首页底部访问的法律入口。
-
Step 1: 创建复用样式
site-info.css 提供 .site-info-hero、.site-info-layout、.site-info-card、.site-info-status、.site-info-links，仅处理本轮新增页面的排版和窄屏适配。
- Step 2: 创建新闻页面
news.html 必须有“平台公告”“家谱文化”分类锚点，并将两条静态内容分别链接到 notice-detail.html 与 article-detail.html。
- Step 3: 创建法律页面并连接首页
三个法律页面均写明“待法务确认”，并互相提供跳转链接。首页 footer-legal 增加三个页面链接。
Task 3: 建立状态与工单边界
Files:
- Create:
not-found.html - Create:
forbidden.html - Create:
maintenance.html - Create:
my-tickets.html - Create:
ticket-detail.html - Modify:
submit-ticket.html
Interfaces:
-
Consumes:
PageAvailability.init()读取的待开发页面属性。 -
Produces: 三种无接口提交的工单状态，和可返回首页、帮助中心的静态状态页。
-
Step 1: 创建三个通用状态页
三个页面分别显示“页面不存在”“无访问权限”“系统维护中”，并提供 index.html 返回入口。
- Step 2: 创建工单列表与详情状态页
my-tickets.html、ticket-detail.html 均使用：
<body data-feature-status="pending" data-feature-message="在线工单查询服务正在开发中，当前页面仅保留设计预览。">
并在 public/js/pending-pages.js 后仅放行帮助中心链接。
- Step 3: 收束提交工单表单
submit-ticket.html 增加：
<body class="page-submit-ticket" data-feature-status="pending" data-feature-message="在线提交工单服务正在开发中，请先通过帮助中心了解常见问题。">
在 ApiClient.js 后加载状态脚本，并为“返回帮助中心”链接添加 data-feature-link="available"。
Task 4: 回写进度与验证
Files:
- Modify:
docs/规划.md - Modify:
docs/superpowers/plans/2026-07-11-public-static-pages.md - Test:
tests/*.test.js
Interfaces:
-
Consumes: 新增静态页面和全部 HTML 本地脚本引用。
-
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: 每个本地脚本文件存在，且没有空白格式错误。