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
3.5 KiB
3.5 KiB
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 建立栅格
- 状态页复制并标注