Review changes batch 6 of 6

2026-07-20 06:52:33 +08:00
parent db97d3da27
commit 5a31a75da0
160 changed files with 9206 additions and 572 deletions
@@ -0,0 +1,50 @@
+# 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]`。