jiapuapp/docs/superpowers/specs/2026-07-19-n01-message-center-baseline-design.md

N01 消息中心基准页设计

目标

将 N01 作为 N 系列视觉基准页。只处理 H5 审批所需的本地演示状态，不对接接口，不修改其他页面。

当前审计证据：docs/design/screens/runtime/2026-07-19/n01-audit/01-list-412x915.png。现状的主要问题是消息卡带有边框外白底、错误复用入谱申请卡片素材、未读与已读层级不清。

页面结构

• 顶部继续使用项目 PageHeader，标题“消息中心”，右侧操作“全部已读”。
• 内容区只包含消息列表、页面状态卡和必要操作，不增加编号介绍块。
• 每条消息使用 N01 独立拥有的透明金色线框位图；线框内不带底色，不复用其他模块的业务卡片。
• 卡片信息顺序为：状态与时间、标题、摘要。未读状态使用克制的朱红色，已读状态降为灰褐色。
• 整张消息卡均可点击；点击未读消息后切换为已读，不增加额外图标或角标。
• “前往入谱审核”继续使用现有项目卷轴按钮，放在列表之后并与消息卡保持明显间距。

审批状态

N01 依次审批以下状态，每次只显示一个：

1. 正常列表（同时展示未读与已读层级）。
2. 单条消息切换为已读。
3. 全部已读及项目自定义 Toast。
4. 加载态，使用项目 AppLoading 动画。
5. 空态，使用同一透明线框和简短说明。
6. 失败态，使用同一透明线框及“重新查看”卷轴按钮。
7. 审核跳转操作的可用性验证。

响应式与交互

• 在 320×568、360×640、360×800、412×915 四档尺寸检查，不把响应式逐档交给用户审批；仅在发现问题时返工 N01。
• 卡片宽度随内容区拉伸，高度由内容和最小触控尺寸共同约束，不固定为某一截图高度。
• 所有可点击区域满足至少 44px 的触控高度。
• Toast、Loading 和按钮全部使用项目自定义组件。

数据与范围

• N01 页面文件是本轮状态与交互的唯一所有者：pages/notification/n01-message-center.vue。
• 使用本地模拟消息，不连接 API。
• 保留现有入谱审核路由参数传递方式，不扩展审核业务。
• 不修改 N02 或其他 N/G/R/F/T/M 页面。

验收标准

• 列表、单条已读、全部已读、加载、空、失败和审核跳转均可独立复现。
• 页面中不存在消息卡边框外白底，也不引用 application-status-card.png。
• 未读与已读无需依赖颜色也能通过文字识别。
• 聚焦契约、根页面视觉契约、运行时冒烟和响应式冒烟均通过。
• 只有用户对所有 N01 状态明确说“通过”后，才把 N01 标记为 [x]。