# DreamWeaver 高保真页面布局与组件规格（Web）

## 范围

本文将每个页面映射为高保真布局规范：结构、核心组件与状态，便于在 Figma 中快速搭建。

---

## 全局布局

- 画布：1440 x 900
- 内容容器：1200px 居中
- 栅格：12 列，24px 间距
- 基础间距：8pt

---

## 全局组件

**顶部导航**
- 左：Logo + 产品名
- 中：主导航
- 右：搜索、孩子切换器、头像菜单

**主 CTA**
- 主色实心按钮

**卡片**
- 21:9 封面
- 标题、标签、元信息、操作

**表单控件**
- 文本输入、选择器、日期、滑块、标签

**状态**
- 空态、加载、错误、离线

---

## 1) 登录 / 授权

**结构**
- 渐变背景
- 居中卡片（420px 宽）

**组件**
- Logo 组合
- 标题 + 副标题
- OAuth 按钮（GitHub、Google）
- 隐私说明

**状态**
- Loading（按钮 spinner）
- Error（行内错误）

---

## 2) 首页：生成故事

**结构**
- 双栏布局（左表单、右预览）
- 顶部步骤条

**左侧表单**
- 孩子选择器（下拉 + 头像）
- 宇宙选择器（延续 / 新建）
- 关键词标签输入
- 成长主题选择
- 长度选择（分段按钮）
- 生成按钮

**右侧预览**
- 封面占位
- 标题占位
- 摘要预览
- 进度指示（文本 -> 封面 -> 语音）

**状态**
- 空预览
- 生成中（进度）
- 封面失败（重试）

---

## 3) 我的故事（列表）

**结构**
- 工具条 + 网格列表

**工具条**
- 搜索
- 筛选（孩子、标签）
- 排序（最新、最早）
- 视图切换（网格/列表）

**网格卡片**
- 桌面端 3 列
- Hover 操作：阅读、重生成封面、删除

**状态**
- 空列表 + CTA
- 骨架屏

---

## 4) 故事详情

**头图**
- 16:9 封面
- 标题 + 元信息（孩子、宇宙、标签）
- 操作按钮：重生成封面、生成语音、分享

**正文**
- 正文阅读区
- 成就面板

**音频**
- 底部吸附迷你播放器

**状态**
- 封面失败
- 语音未生成
- 语音加载中

---

## 5) 孩子档案

**列表视图**
- 头像卡片网格
- CTA：添加档案

**详情视图**
- 头像头部 + 编辑按钮
- Tabs：基础信息 / 兴趣与成长 / 故事宇宙 / 阅读记录

**编辑弹窗**
- 姓名、生日、性别
- 兴趣标签
- 成长主题

---

## 6) 故事宇宙

**列表视图**
- 宇宙卡片 + 摘要
- CTA：新建宇宙

**详情视图**
- 摘要区
- 分区：主角、角色、世界观、成就

**创建/编辑**
- 结构化表单 + 示例提示

---

## 7) 推送设置

**结构**
- 卡片式设置

**组件**
- 主开关
- 时间选择 + 周期
- 触发开关
- 免打扰时段
- 文案预览
- 测试推送按钮

---

## 8) 账户设置

**组件**
- 个人信息
- OAuth 连接
- 数据导出/删除
- 语言（预留）

---

## 9) 管理后台：Providers

**结构**
- 表格布局

**表格列**
- Provider 名称、类型、状态、延迟、最近检查

**操作**
- 编辑、禁用、重载
- JSON 配置编辑器（弹窗）

---

## 10) 404 / 错误 / 空态

**布局**
- 居中插画 + CTA

---

## 交互规范

- 按钮 Hover：轻微放大 1.02
- 卡片 Hover：抬升阴影
- Toast：右上角，自动消失
- 列表使用 Skeleton

---

## 响应式规则（移动端阶段）

- 顶部导航 -> 底部 Tab
- 双栏 -> 单栏
- 详情页操作 -> 底部吸附按钮

---

## Figma 搭建清单

- 新建 Page：Design System
- 新建 Page：Web Screens
- 建立颜色与字体样式
- 组件做 Variant
- 全部使用 Auto Layout
- 1440/1200/1024/768 建立栅格
- 状态页复制并标注