page-structure

name	page-structure
description	设计单页面结构和线框图时使用。适用于功能页面设计、内容布局、主次操作排布。优先使用页面目标导向方法 + 内容层级 + 主次操作区分。

页面结构和线框图

适用场景

• 单个功能页面的结构设计
• 列表页、详情页、表单页等模式
• 内容层级和主次操作排布
• 给前端的页面骨架说明

核心原则

1. 页面目标先行
   每个页面只解决 1~3 个核心目标
   不要让一个页面承担过多

2. 用户视线流动
   F 模式 / Z 模式 / 古登堡图
   按用户阅读顺序排列内容

3. 主次清晰
   一个页面只有 1 个主操作
   次操作弱化处理
   危险操作隔离

4. 内容优先
   内容驱动设计，不是装饰驱动

5 个关键问题

每个页面必须回答：

1. 页面目标：这个页面帮助用户完成什么？
2. 核心信息：用户必须先看到什么？
3. 主操作：用户最重要的动作是什么？
4. 次操作：哪些动作可以弱化？
5. 反馈区域：系统如何告诉用户结果？

常见页面模式

列表页

顶部：筛选 + 搜索 + 主操作（如"新建"）
中间：列表本身（表格 / 卡片 / 时间轴）
底部：分页

状态：
  - 加载中
  - 空列表（无数据）
  - 有数据
  - 错误（加载失败）
  - 无权限

详情页

顶部：返回 + 标题 + 状态徽章 + 主操作
左/中：核心信息分组展示
右：辅助信息 / 相关操作 / 历史记录
底部：危险操作（删除）

状态：
  - 加载中
  - 详情数据
  - 资源不存在
  - 无权限
  - 已删除

表单页

顶部：标题 + 进度（多步表单）
中间：表单字段（按重要性分组）
底部：提交 + 取消 + 保存草稿

状态：
  - 默认（空）
  - 有数据（编辑模式）
  - 校验中
  - 校验失败（字段级错误）
  - 提交中（loading）
  - 提交成功
  - 提交失败

仪表盘

顶部：时间筛选 + 全局指标
中间：图表区（按重要性排列）
右侧：最新动态 / 待办

状态：
  - 加载中
  - 数据正常
  - 部分数据缺失
  - 完全无数据

输出格式

页面结构说明

## 页面：[页面名]

### 基本信息

- 页面目标：[1 句话]
- 用户角色：[谁用]
- 进入路径：[从哪进入]
- 视觉风格：[来自 visual-style skill]

### 内容层级

┌──────────────────────────────────┐ │ 顶部：[内容] │ ├──────────────────────────────────┤ │ 主区域：[内容] │ │ │ │ - 核心信息： │ │ - 主操作： │ │ │ ├──────────────────────────────────┤ │ 底部：[次操作 / 分页] │ └──────────────────────────────────┘

### 主要元素

| 元素 | 类型 | 用途 | 优先级 |
|------|------|------|--------|
| 页面标题 | h1 | 标识页面 | P0 |
| 操作按钮 | 按钮组 | 主操作 | P0 |
| 数据列表 | Table | 展示数据 | P0 |
| 筛选器 | Filter | 缩小范围 | P1 |
| 分页 | Pagination | 数据导航 | P1 |

### 状态说明

| 状态 | 触发条件 | 显示内容 | 用户行动 |
|------|---------|---------|---------|
| 加载中 | 页面初始加载 | Skeleton + Spinner | 等待 |
| 有数据 | 加载成功 | 完整列表 | 浏览/操作 |
| 空状态 | 无数据 | 空状态图 + 引导文案 + 主操作 | 创建第一项 |
| 错误 | 加载失败 | 错误信息 + 重试按钮 | 重试 |
| 无权限 | 权限校验失败 | 权限提示 + 联系管理员链接 | 申请权限 |

### 异常处理

- 网络错误：[处理方式]
- 表单校验失败：[处理方式]
- 操作冲突：[处理方式]

### 响应式要求

- 桌面端 (>1024px)：[布局]
- 平板 (768-1024px)：[布局]
- 移动端 (<768px)：[布局]

工作流程

1. 读取 PRD / 用户故事
2. 确定页面目标（不超过 3 个）
3. 列出必要内容元素
4. 按重要性排序
5. 选择页面模式（列表/详情/表单/仪表盘）
6. 设计内容层级（顶/中/底 或 左/中/右）
7. 区分主次操作
8. 列出所有状态（用 component-states skill）
9. 检查响应式
10. 输出页面结构说明

质量自检

□ 页面目标是否清晰（1~3 个）
□ 是否只有 1 个主操作
□ 内容层级是否合理（重要内容靠上）
□ 是否覆盖了所有状态
□ 异常情况是否定义
□ 响应式是否考虑
□ 前端能否据此实现

常见坑

1. 页面目标太多——一个页面想干所有事
2. 多个主操作——用户不知道点哪个
3. 危险操作不隔离——"删除"放在主区域
4. 空状态缺失——用户第一次进入看到空白
5. 错误状态缺失——加载失败什么都不显示
6. 响应式没考虑——桌面设计在移动端崩溃
7. 没有视线流动——内容散乱无序

配套模板

• templates/page-spec-template.md — 通用页面结构说明（含列表/详情/表单/仪表盘四种模式）
• templates/wireframe-spec-template.md — 线框图说明模板
• templates/design-brief-template.md — 设计 brief 模板（项目入口）

与其他 skill 的协作

上游：
  user-flow → 提供流程节点
  information-architecture → 提供页面在整体中的位置

平行：
  component-states → 详细定义每个状态
  responsive-design → 详细定义响应式规则
  visual-style → 视觉风格指引

下游：
  design-handoff → 交接给前端