51 lines
2.6 KiB
Markdown
51 lines
2.6 KiB
Markdown
# 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]`。
|