# 官网静态页面补齐 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: 页面存在、关键说明、状态脚本与本地链接的可重复校验。 - [x] **Step 1: 写入失败测试** 测试必须断言存在以下文件： ```js 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` 全部存在。 - [x] **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: 新闻分类和详情跳转，以及能从首页底部访问的法律入口。 - [x] **Step 1: 创建复用样式** `site-info.css` 提供 `.site-info-hero`、`.site-info-layout`、`.site-info-card`、`.site-info-status`、`.site-info-links`，仅处理本轮新增页面的排版和窄屏适配。 - [x] **Step 2: 创建新闻页面** `news.html` 必须有“平台公告”“家谱文化”分类锚点，并将两条静态内容分别链接到 `notice-detail.html` 与 `article-detail.html`。 - [x] **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: 三种无接口提交的工单状态，和可返回首页、帮助中心的静态状态页。 - [x] **Step 1: 创建三个通用状态页** 三个页面分别显示“页面不存在”“无访问权限”“系统维护中”，并提供 `index.html` 返回入口。 - [x] **Step 2: 创建工单列表与详情状态页** `my-tickets.html`、`ticket-detail.html` 均使用： ```html ``` 并在 `public/js/pending-pages.js` 后仅放行帮助中心链接。 - [x] **Step 3: 收束提交工单表单** `submit-ticket.html` 增加： ```html ``` 在 `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: 第四轮进度记录和验证结果。 - [x] **Step 1: 写入第四轮完成状态** 在 `docs/规划.md` 的“实施进度”中增加静态官网页面补齐已完成，并注明法律文本需法务替换。 - [x] **Step 2: 执行完整测试** Run: `$env:Path = 'C:\\Program Files\\nodejs;' + $env:Path; npm.cmd test` Expected: 所有 Node 测试通过。 - [x] **Step 3: 执行静态检查** Run: PowerShell 扫描全部 HTML 的 `src="*.js"`，随后运行 `git diff --check`。 Expected: 每个本地脚本文件存在，且没有空白格式错误。