torin
b8d3cb4644
Some checks are pending
Build and Push Docker Images / changes (push) Waiting to run
Build and Push Docker Images / build-backend (push) Blocked by required conditions
Build and Push Docker Images / build-frontend (push) Blocked by required conditions
Build and Push Docker Images / build-admin-frontend (push) Blocked by required conditions
231 lines
3.5 KiB
Markdown
231 lines
3.5 KiB
Markdown
# 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 建立栅格
|
||
- 状态页复制并标注
|