Initial commit: clean project structure
- Backend: FastAPI + SQLAlchemy + Celery (Python 3.11+) - Frontend: Vue 3 + TypeScript + Pinia + Tailwind - Admin Frontend: separate Vue 3 app for management - Docker Compose: 9 services orchestration - Specs: design prototypes, memory system PRD, product roadmap Cleanup performed: - Removed temporary debug scripts from backend root - Removed deprecated admin_app.py (embedded UI) - Removed duplicate docs from admin-frontend - Updated .gitignore for Vite cache and egg-info
This commit is contained in:
zhangtuo
153
.claude/specs/design/BRAND-VISUAL-DIRECTIONS.md
Normal file
153
.claude/specs/design/BRAND-VISUAL-DIRECTIONS.md
Normal file
@@ -0,0 +1,153 @@
|
||||
# DreamWeaver 品牌视觉方向（Web 阶段）
|
||||
|
||||
## 概述
|
||||
|
||||
提供三套高保真视觉方向，用于 Web MVP。三者的 UX 结构一致，仅在色彩、视觉重量与插画风格上不同。
|
||||
|
||||
---
|
||||
|
||||
## 方案 A：Soft Aurora（温暖高级）
|
||||
|
||||
**理由**
|
||||
- 家长信任感强，同时保留童趣与想象力。
|
||||
- 高级但不商业化。
|
||||
|
||||
**配色**
|
||||
- 主色 600: #6C5CE7
|
||||
- 主色 500: #7C69FF
|
||||
- 主色 100: #EAE7FF
|
||||
- 强调粉: #FF8FB1
|
||||
- 强调蓝: #65C3FF
|
||||
- 中性 900: #1F2430
|
||||
- 中性 700: #4B5563
|
||||
- 中性 500: #9AA3B2
|
||||
- 中性 200: #E5E7EB
|
||||
- 中性 100: #F5F7FB
|
||||
- 白色: #FFFFFF
|
||||
|
||||
**渐变**
|
||||
- Hero 背景：linear-gradient(135deg, #EAE7FF 0%, #FDF6FF 40%, #EAF6FF 100%)
|
||||
- CTA 光晕：radial-gradient(circle at 30% 30%, #7C69FF 0%, #6C5CE7 50%, #4C3FCF 100%)
|
||||
|
||||
**字体**
|
||||
- 标题：Noto Sans SC / Inter
|
||||
- 正文：Noto Sans SC / Inter
|
||||
- 数字强调：Inter
|
||||
|
||||
**插画风格**
|
||||
- 柔和、低对比度、轻画笔质感。
|
||||
- 圆润形状、轻高光。
|
||||
- 角色简单轮廓与友好表情。
|
||||
|
||||
**图标风格**
|
||||
- 1.5px 线宽，圆角端点。
|
||||
- 强调色点缀，避免过度饱和。
|
||||
|
||||
**组件建议**
|
||||
- 按钮：主色实心 + 内阴影。
|
||||
- 卡片：大圆角 + 柔和阴影。
|
||||
- 输入：浅底色 + 主色焦点环。
|
||||
|
||||
---
|
||||
|
||||
## 方案 B：Storybook Minimal（极简编辑风）
|
||||
|
||||
**理由**
|
||||
- 强可读性，适合长文本阅读。
|
||||
- 简洁、专业、强调内容。
|
||||
|
||||
**配色**
|
||||
- 主色 600: #3B82F6
|
||||
- 主色 500: #60A5FA
|
||||
- 主色 100: #DBEAFE
|
||||
- 强调金: #F5C542
|
||||
- 强调薄荷: #6EE7B7
|
||||
- 中性 900: #111827
|
||||
- 中性 700: #374151
|
||||
- 中性 500: #9CA3AF
|
||||
- 中性 200: #E5E7EB
|
||||
- 中性 100: #F9FAFB
|
||||
- 白色: #FFFFFF
|
||||
|
||||
**渐变**
|
||||
- Hero 背景：linear-gradient(180deg, #F9FAFB 0%, #EEF2FF 100%)
|
||||
- CTA 光晕：radial-gradient(circle at 40% 30%, #60A5FA 0%, #3B82F6 60%, #1D4ED8 100%)
|
||||
|
||||
**字体**
|
||||
- 标题：Inter / Noto Sans SC
|
||||
- 正文：Inter / Noto Sans SC
|
||||
- 阅读场景可提升行高和对比度。
|
||||
|
||||
**插画风格**
|
||||
- 扁平化、线条干净、留白较多。
|
||||
- 色彩克制、视觉清爽。
|
||||
|
||||
**图标风格**
|
||||
- 2px 线宽，极简。
|
||||
|
||||
**组件建议**
|
||||
- 按钮：纯色、无明显渐变。
|
||||
- 卡片：细边框 + 极轻阴影。
|
||||
- 输入：白底 + 清晰边框。
|
||||
|
||||
---
|
||||
|
||||
## 方案 C：Playful Glow（活力明快）
|
||||
|
||||
**理由**
|
||||
- 视觉更鲜活，记忆点强。
|
||||
- 更偏童趣，但仍保持专业感。
|
||||
|
||||
**配色**
|
||||
- 主色 600: #7C3AED
|
||||
- 主色 500: #8B5CF6
|
||||
- 主色 100: #EDE9FE
|
||||
- 强调珊瑚: #FB7185
|
||||
- 强调青蓝: #22D3EE
|
||||
- 中性 900: #1F2937
|
||||
- 中性 700: #4B5563
|
||||
- 中性 500: #9CA3AF
|
||||
- 中性 200: #E5E7EB
|
||||
- 中性 100: #F5F5F7
|
||||
- 白色: #FFFFFF
|
||||
|
||||
**渐变**
|
||||
- Hero 背景：linear-gradient(135deg, #EDE9FE 0%, #FFE4F3 45%, #E0F7FF 100%)
|
||||
- CTA 光晕：radial-gradient(circle at 30% 30%, #8B5CF6 0%, #7C3AED 60%, #5B21B6 100%)
|
||||
|
||||
**字体**
|
||||
- 标题：Noto Sans SC / Inter
|
||||
- 正文：Noto Sans SC / Inter
|
||||
- 强调色点到为止，避免花哨。
|
||||
|
||||
**插画风格**
|
||||
- 更鲜艳、更活泼。
|
||||
- 大色块 + 轻纹理背景。
|
||||
|
||||
**图标风格**
|
||||
- 1.5px 线宽 + 小实心点装饰。
|
||||
|
||||
**组件建议**
|
||||
- 按钮：渐变或实心 + Hover 发光。
|
||||
- 卡片：更明显阴影 + 彩色边角。
|
||||
- 输入：轻微色彩底。
|
||||
|
||||
---
|
||||
|
||||
## 共享视觉资产
|
||||
|
||||
**封面比例**
|
||||
- 列表卡片：21:9
|
||||
- 详情头图：16:9
|
||||
|
||||
**插画 vs 照片**
|
||||
- 默认使用插画，避免真实儿童照片（隐私与合规）。
|
||||
|
||||
**空态插画**
|
||||
- 统一 1 张主插画，做颜色变体复用。
|
||||
|
||||
---
|
||||
|
||||
## 推荐
|
||||
|
||||
建议 Web MVP 使用方案 A（Soft Aurora），兼顾温暖与信任。方案 B/C 可作为后续主题或 A/B 测试备选。
|
||||
230
.claude/specs/design/PAGE-HIFI-LAYOUT-SPEC.md
Normal file
230
.claude/specs/design/PAGE-HIFI-LAYOUT-SPEC.md
Normal file
@@ -0,0 +1,230 @@
|
||||
# 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 建立栅格
|
||||
- 状态页复制并标注
|
||||
299
.claude/specs/design/WEB-HIFI-PROTOTYPE-SPEC.md
Normal file
299
.claude/specs/design/WEB-HIFI-PROTOTYPE-SPEC.md
Normal file
@@ -0,0 +1,299 @@
|
||||
# DreamWeaver Web 高保真原型规范 (v1)
|
||||
|
||||
## 范围与目标
|
||||
|
||||
- 目标：为 DreamWeaver 提供专业、Web 优先的高保真 UI/UX，既温暖有想象力，又让家长感到可信与高品质。
|
||||
- 受众：3-8 岁儿童的家长。
|
||||
- 阶段重点：Web 端（桌面/平板），同时制定响应式规则，方便后续移动端迁移。
|
||||
- 假设：界面语言为简体中文；管理端或系统字段可能含英文。
|
||||
|
||||
---
|
||||
|
||||
## 设计方向
|
||||
|
||||
- 氛围：温柔、治愈、有想象力，但保持简洁与高级感（避免过度幼儿化）。
|
||||
- 视觉风格：柔和渐变、圆润形状、插画风封面、轻量阴影、舒适中性色。
|
||||
- UX 原则：低阻力、流程清晰、反馈及时、错误可恢复、AI 失败时有明确兜底。
|
||||
|
||||
---
|
||||
|
||||
## 设计系统（Web）
|
||||
|
||||
### 栅格与布局
|
||||
|
||||
- 基准：8pt 间距系统。
|
||||
- 容器：1200px 最大宽度，左右 24px 边距，12 列栅格。
|
||||
- 断点：
|
||||
- 1440+（宽屏）
|
||||
- 1200（标准桌面）
|
||||
- 1024（横屏平板）
|
||||
- 768（竖屏平板）
|
||||
|
||||
### 色板
|
||||
|
||||
- 主色 600: #6C5CE7
|
||||
- 主色 500: #7C69FF
|
||||
- 主色 100: #EAE7FF
|
||||
- 强调粉: #FF8FB1
|
||||
- 强调蓝: #65C3FF
|
||||
- 成功: #34C759
|
||||
- 警告: #F6A609
|
||||
- 错误: #FF5A5F
|
||||
|
||||
- 中性 900: #1F2430
|
||||
- 中性 700: #4B5563
|
||||
- 中性 500: #9AA3B2
|
||||
- 中性 200: #E5E7EB
|
||||
- 中性 100: #F5F7FB
|
||||
- 白色: #FFFFFF
|
||||
|
||||
### 字体
|
||||
|
||||
- 主体字体：PingFang SC, Noto Sans SC, Inter, system-ui
|
||||
- H1：32/40，Semibold
|
||||
- H2：24/32，Semibold
|
||||
- H3：20/28，Semibold
|
||||
- Body L：16/24，Regular
|
||||
- Body M：14/22，Regular
|
||||
- Caption：12/18，Regular
|
||||
|
||||
### 圆角与阴影
|
||||
|
||||
- 圆角：12（卡片）、10（输入框）、8（按钮）、24（胶囊标签）
|
||||
- 阴影 S：0 4 16 rgba(31,36,48,0.08)
|
||||
- 阴影 M：0 10 30 rgba(31,36,48,0.12)
|
||||
|
||||
### 核心组件
|
||||
|
||||
- 顶部导航：Logo、主 CTA、搜索、孩子切换器、头像菜单
|
||||
- 侧边导航（可用于设置/管理）：图标 + 文案
|
||||
- 按钮：Primary / Secondary / Ghost / Destructive
|
||||
- 输入：文本、文本域、数字、日期、选择、滑块
|
||||
- 标签：兴趣/成长主题（多选）
|
||||
- 卡片：故事、孩子、宇宙、Provider
|
||||
- 弹窗：创建/编辑表单
|
||||
- Toast：成功/错误/提示
|
||||
- Skeleton：列表与故事内容
|
||||
- 音频播放器：播放/暂停、进度、倍速、下载
|
||||
- 空态：插画 + CTA
|
||||
- 错误态：行内错误 + 重试
|
||||
|
||||
---
|
||||
|
||||
## 信息架构（Web）
|
||||
|
||||
顶级导航：
|
||||
|
||||
- 生成故事（Home）
|
||||
- 我的故事
|
||||
- 孩子档案
|
||||
- 故事宇宙
|
||||
- 推送设置
|
||||
- 账户设置
|
||||
- 管理后台（仅开启时显示）
|
||||
|
||||
---
|
||||
|
||||
## 页面规格（高保真）
|
||||
|
||||
### 1) 登录/授权
|
||||
|
||||
**布局**
|
||||
- 渐变背景 + 居中卡片
|
||||
- Logo、Slogan、OAuth 按钮
|
||||
|
||||
**元素**
|
||||
- 标题：“欢迎来到 DreamWeaver”
|
||||
- 副标题：“为孩子生成独一无二的故事”
|
||||
- 按钮：“使用 GitHub 登录”、“使用 Google 登录”
|
||||
- 隐私说明：“我们仅使用公开信息创建账户”
|
||||
|
||||
**状态**
|
||||
- Loading：按钮 spinner
|
||||
- Error：行内错误 + 重试
|
||||
|
||||
---
|
||||
|
||||
### 2) 生成故事（Home）
|
||||
|
||||
**布局**
|
||||
- 左表单 / 右预览双栏
|
||||
- 顶部步骤条
|
||||
|
||||
**主表单**
|
||||
- 孩子选择器：头像 + 姓名 + 年龄，含“新建档案”入口
|
||||
- 宇宙选择器：默认“延续上一次”，可切“新建宇宙”
|
||||
- 关键词输入（标签 + 手输）
|
||||
- 成长主题选择（可选）
|
||||
- 故事长度（短/中/长）
|
||||
- 主要 CTA：“生成故事”
|
||||
|
||||
**预览面板**
|
||||
- 标题占位
|
||||
- 封面占位
|
||||
- 摘要预览
|
||||
- 错误态：封面失败提示 + 重试
|
||||
|
||||
**交互**
|
||||
- Stepper：档案 → 宇宙 → 关键词 → 生成
|
||||
- 生成过程：阶段进度（文本/封面/语音）
|
||||
|
||||
---
|
||||
|
||||
### 3) 我的故事（列表）
|
||||
|
||||
**布局**
|
||||
- 顶部工具条 + 网格列表
|
||||
|
||||
**卡片**
|
||||
- 21:9 封面、标题、标签、所属孩子、更新时间
|
||||
- Hover 操作：继续阅读、重新生成封面、删除
|
||||
|
||||
**筛选**
|
||||
- 孩子
|
||||
- 标签
|
||||
- 时间范围
|
||||
|
||||
**空态**
|
||||
- 插画 + “开始生成第一个故事”
|
||||
|
||||
---
|
||||
|
||||
### 4) 故事详情
|
||||
|
||||
**头图**
|
||||
- 大封面
|
||||
- 标题 + 元信息（孩子、宇宙、标签、日期）
|
||||
- 主操作：生成封面 / 生成语音 / 分享
|
||||
|
||||
**内容区**
|
||||
- 正文排版（舒适行高）
|
||||
- 成就模块（卡片式）
|
||||
|
||||
**音频**
|
||||
- 滚动时底部吸附播放器
|
||||
- 倍速切换（0.8/1.0/1.2）
|
||||
|
||||
**状态**
|
||||
- 封面失败：占位 + 重试
|
||||
- 语音未生成：显示 CTA
|
||||
|
||||
---
|
||||
|
||||
### 5) 孩子档案
|
||||
|
||||
**列表**
|
||||
- 头像卡片 + 基础信息
|
||||
- CTA：“添加档案”
|
||||
|
||||
**详情**
|
||||
- 档案头部 + 编辑
|
||||
- Tabs：基础信息 / 兴趣与成长 / 故事宇宙 / 阅读记录
|
||||
|
||||
**编辑弹窗**
|
||||
- 姓名、生日、性别
|
||||
- 兴趣标签（多选）
|
||||
- 成长主题（单选或多选）
|
||||
|
||||
---
|
||||
|
||||
### 6) 故事宇宙
|
||||
|
||||
**列表**
|
||||
- 宇宙卡片：主角、常驻角色、成就数量
|
||||
- CTA：“新建宇宙”
|
||||
|
||||
**详情**
|
||||
- 宇宙摘要
|
||||
- 可编辑区：主角 / 角色 / 世界观
|
||||
- 成就时间轴
|
||||
|
||||
**创建/编辑**
|
||||
- 结构化表单 + 示例提示
|
||||
|
||||
---
|
||||
|
||||
### 7) 推送设置
|
||||
|
||||
**布局**
|
||||
- 卡片式设置区
|
||||
|
||||
**设置项**
|
||||
- 主开关：开启主动推送
|
||||
- 时间选择 + 周期
|
||||
- 触发类型（复选）
|
||||
- 免打扰时段
|
||||
|
||||
**预览**
|
||||
- 推送文案预览
|
||||
- 测试推送按钮
|
||||
|
||||
---
|
||||
|
||||
### 8) 账户设置
|
||||
|
||||
- 个人信息
|
||||
- OAuth 绑定
|
||||
- 数据隐私（导出/删除）
|
||||
- 语言切换（预留）
|
||||
|
||||
---
|
||||
|
||||
### 9) 管理后台（Provider）
|
||||
|
||||
**表格**
|
||||
- Provider 列表：状态、延迟、最近检查
|
||||
- 操作：编辑、禁用、重载
|
||||
|
||||
**详情**
|
||||
- JSON 配置编辑器（等宽字体）
|
||||
- 健康检查按钮
|
||||
|
||||
---
|
||||
|
||||
### 10) 404 / 错误 / 空态
|
||||
|
||||
- 友好插画 + 返回 CTA
|
||||
|
||||
---
|
||||
|
||||
## 交互与动效
|
||||
|
||||
- 按钮：Hover 轻微放大（1.02）
|
||||
- 卡片：Hover 提升阴影
|
||||
- Loading：列表 Skeleton、生成进度
|
||||
- Toast：右上角，3s 自动消失
|
||||
|
||||
---
|
||||
|
||||
## 可访问性
|
||||
|
||||
- 文本对比度 >= 4.5:1
|
||||
- 输入框/按钮焦点态清晰
|
||||
- 最小触控区域 44px
|
||||
|
||||
---
|
||||
|
||||
## 响应式策略（移动端阶段）
|
||||
|
||||
- 顶部导航改为底部 Tab
|
||||
- 双栏变单栏
|
||||
- 详情页操作改为底部吸附操作条
|
||||
- 卡片 1 列展示，触控面积更大
|
||||
|
||||
---
|
||||
|
||||
## Figma 实现说明
|
||||
|
||||
- 全部使用 Auto Layout
|
||||
- 统一命名：Page/Section/Component/State
|
||||
- 按钮、输入、卡片做 Variant
|
||||
- 颜色/字体/间距作为样式管理
|
||||
|
||||
---
|
||||
|
||||
## 交付物
|
||||
|
||||
- 设计系统库（色板、文字、组件）
|
||||
- 全流程高保真页面
|
||||
- 原型链接（Figma 中生成）
|
||||
BIN
.claude/specs/design/figma-html/theme-a.zip
Normal file
BIN
.claude/specs/design/figma-html/theme-a.zip
Normal file
Binary file not shown.
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>账户设置</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="grid grid-2 section">
|
||||
<div class="card">
|
||||
<h3>个人信息</h3>
|
||||
<div class="row section">
|
||||
<input class="input" placeholder="昵称" value="Dream Parent" />
|
||||
<input class="input" placeholder="邮箱" value="parent@example.com" />
|
||||
</div>
|
||||
<button class="btn btn--primary">保存</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>账号安全</h3>
|
||||
<div class="callout">已绑定 GitHub、Google</div>
|
||||
<button class="btn btn--secondary" style="margin-top: 12px;">管理绑定</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>数据隐私</h3>
|
||||
<button class="btn btn--secondary">导出数据</button>
|
||||
<button class="btn btn--danger" style="margin-top: 12px;">删除账户</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
74
.claude/specs/design/figma-html/theme-a/admin-providers.html
Normal file
74
.claude/specs/design/figma-html/theme-a/admin-providers.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>管理后台 - Providers</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="toolbar section">
|
||||
<h2>Providers 管理</h2>
|
||||
<button class="btn btn--primary">新增 Provider</button>
|
||||
</div>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>类型</th>
|
||||
<th>状态</th>
|
||||
<th>延迟</th>
|
||||
<th>最近检查</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>text_primary</td>
|
||||
<td>Text</td>
|
||||
<td><span class="badge">健康</span></td>
|
||||
<td>420ms</td>
|
||||
<td>2 分钟前</td>
|
||||
<td><a href="#">编辑</a> · <a href="#">禁用</a> · <a href="#">重载</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>image_primary</td>
|
||||
<td>Image</td>
|
||||
<td><span class="badge">健康</span></td>
|
||||
<td>860ms</td>
|
||||
<td>5 分钟前</td>
|
||||
<td><a href="#">编辑</a> · <a href="#">禁用</a> · <a href="#">重载</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="footer-note">点击编辑后弹出 JSON 配置编辑器。</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>孩子档案详情</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="card section" style="display:flex; align-items:center; justify-content: space-between;">
|
||||
<div style="display:flex; gap:12px; align-items:center;">
|
||||
<div class="avatar">明</div>
|
||||
<div>
|
||||
<div class="card-title">小明 · 5岁</div>
|
||||
<div class="card-meta">男 · 生日 2020/05/12</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn--secondary">编辑档案</button>
|
||||
</div>
|
||||
|
||||
<div class="tabs section">
|
||||
<div class="tab active">基础信息</div>
|
||||
<div class="tab">兴趣与成长</div>
|
||||
<div class="tab">故事宇宙</div>
|
||||
<div class="tab">阅读记录</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2 section">
|
||||
<div class="card">
|
||||
<h3>兴趣标签</h3>
|
||||
<div class="chips">
|
||||
<span class="chip selected">太空</span>
|
||||
<span class="chip selected">机器人</span>
|
||||
<span class="chip">冒险</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>成长主题</h3>
|
||||
<div class="chips">
|
||||
<span class="chip selected">勇气</span>
|
||||
<span class="chip">分享</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>故事宇宙</h3>
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="card-title">星际冒险</div>
|
||||
<div class="card-meta">主角：小明船长 · 成就 3 个</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">梦幻森林</div>
|
||||
<div class="card-meta">主角：森林守护者 · 成就 1 个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
58
.claude/specs/design/figma-html/theme-a/child-profiles.html
Normal file
58
.claude/specs/design/figma-html/theme-a/child-profiles.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>孩子档案</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="toolbar section">
|
||||
<h2>我的宝贝</h2>
|
||||
<button class="btn btn--primary">添加档案</button>
|
||||
</div>
|
||||
<div class="grid grid-3 section">
|
||||
<div class="card">
|
||||
<div class="avatar">明</div>
|
||||
<div class="card-title">小明 · 5岁</div>
|
||||
<div class="chips"><span class="chip">太空</span><span class="chip">机器人</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="avatar">红</div>
|
||||
<div class="card-title">小红 · 3岁</div>
|
||||
<div class="chips"><span class="chip">公主</span><span class="chip">动物</span></div>
|
||||
</div>
|
||||
<div class="card card--flat">
|
||||
<div class="callout">空态示例：添加一个孩子档案</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
111
.claude/specs/design/figma-html/theme-a/home.html
Normal file
111
.claude/specs/design/figma-html/theme-a/home.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>生成故事</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="stepper section">
|
||||
<span class="step active">档案</span>
|
||||
<span class="step">宇宙</span>
|
||||
<span class="step">关键词</span>
|
||||
<span class="step">生成</span>
|
||||
</div>
|
||||
<div class="split section">
|
||||
<div class="card">
|
||||
<h3>为谁创作故事</h3>
|
||||
<div class="row section">
|
||||
<div>
|
||||
<label>孩子档案</label>
|
||||
<select>
|
||||
<option>小明 · 5岁</option>
|
||||
<option>小红 · 3岁</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>故事宇宙</label>
|
||||
<select>
|
||||
<option>延续上一次（星际冒险）</option>
|
||||
<option>新建宇宙</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<label>关键词</label>
|
||||
<div class="chips section">
|
||||
<span class="chip selected">太空</span>
|
||||
<span class="chip selected">勇气</span>
|
||||
<span class="chip">机器人</span>
|
||||
<span class="chip">探索</span>
|
||||
</div>
|
||||
<input class="input" placeholder="输入更多关键词" />
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div>
|
||||
<label>成长主题</label>
|
||||
<select>
|
||||
<option>勇气</option>
|
||||
<option>分享</option>
|
||||
<option>独立</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>故事长度</label>
|
||||
<div class="chips">
|
||||
<span class="chip selected">短</span>
|
||||
<span class="chip">中</span>
|
||||
<span class="chip">长</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<button class="btn btn--primary" style="width: 100%;">生成故事</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>生成预览</h3>
|
||||
<div class="card-cover"></div>
|
||||
<div class="card-title">故事标题占位</div>
|
||||
<p class="card-meta">故事摘要将显示在这里，支持 2-3 行预览。</p>
|
||||
<div class="section">
|
||||
<div class="callout">生成中：文本 → 封面 → 语音</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="callout" style="border-color: var(--error); color: var(--error);">封面生成失败，稍后重试</div>
|
||||
<button class="btn btn--secondary" style="margin-top: 8px;">重新生成封面</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
33
.claude/specs/design/figma-html/theme-a/index.html
Normal file
33
.claude/specs/design/figma-html/theme-a/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DreamWeaver 原型入口</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="container" style="padding: 48px 0;">
|
||||
<div class="hero">
|
||||
<h1>DreamWeaver HTML 原型入口</h1>
|
||||
<p>请选择页面进行导入或预览（HTML to Figma）。</p>
|
||||
<div class="grid grid-3 section">
|
||||
<div class="card"><a href="login.html">登录 / 授权</a></div>
|
||||
<div class="card"><a href="home.html">生成故事（Home）</a></div>
|
||||
<div class="card"><a href="my-stories.html">我的故事（列表）</a></div>
|
||||
<div class="card"><a href="story-detail.html">故事详情</a></div>
|
||||
<div class="card"><a href="child-profiles.html">孩子档案（列表）</a></div>
|
||||
<div class="card"><a href="child-profile-detail.html">孩子档案（详情）</a></div>
|
||||
<div class="card"><a href="universes.html">故事宇宙（列表）</a></div>
|
||||
<div class="card"><a href="universe-detail.html">故事宇宙（详情）</a></div>
|
||||
<div class="card"><a href="push-settings.html">推送设置</a></div>
|
||||
<div class="card"><a href="account-settings.html">账户设置</a></div>
|
||||
<div class="card"><a href="admin-providers.html">管理后台（Providers）</a></div>
|
||||
<div class="card"><a href="not-found.html">404 / 错误</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
28
.claude/specs/design/figma-html/theme-a/login.html
Normal file
28
.claude/specs/design/figma-html/theme-a/login.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>登录 / 授权</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="container" style="padding: 80px 0;">
|
||||
<div class="hero" style="max-width: 420px; margin: 0 auto; text-align: center;">
|
||||
<div class="nav__logo" style="justify-content: center;">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<h2 style="margin-top: 16px;">欢迎来到 DreamWeaver</h2>
|
||||
<p>为孩子生成独一无二的故事</p>
|
||||
<div class="section" style="display: grid; gap: 12px;">
|
||||
<button class="btn btn--primary">使用 GitHub 登录</button>
|
||||
<button class="btn btn--secondary">使用 Google 登录</button>
|
||||
</div>
|
||||
<div class="footer-note">我们仅使用公开信息创建账户</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
84
.claude/specs/design/figma-html/theme-a/my-stories.html
Normal file
84
.claude/specs/design/figma-html/theme-a/my-stories.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>我的故事</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="toolbar section">
|
||||
<input class="input" style="width: 260px;" placeholder="搜索标题或关键词" />
|
||||
<select style="width: 160px;">
|
||||
<option>孩子：全部</option>
|
||||
<option>小明</option>
|
||||
<option>小红</option>
|
||||
</select>
|
||||
<select style="width: 160px;">
|
||||
<option>排序：最新</option>
|
||||
<option>最早</option>
|
||||
</select>
|
||||
<button class="btn btn--ghost">网格</button>
|
||||
<button class="btn btn--ghost">列表</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3 section">
|
||||
<div class="card">
|
||||
<div class="card-cover"></div>
|
||||
<div class="card-title">星际冒险 · 第三章</div>
|
||||
<div class="chips">
|
||||
<span class="chip">太空</span><span class="chip">勇气</span>
|
||||
</div>
|
||||
<div class="card-meta">小明 · 更新于 2 天前</div>
|
||||
<div class="section hero-actions">
|
||||
<button class="btn btn--primary">继续阅读</button>
|
||||
<button class="btn btn--secondary">重生成封面</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-cover"></div>
|
||||
<div class="card-title">梦幻森林 · 朋友篇</div>
|
||||
<div class="chips">
|
||||
<span class="chip">友谊</span><span class="chip">动物</span>
|
||||
</div>
|
||||
<div class="card-meta">小红 · 更新于 5 天前</div>
|
||||
<div class="section hero-actions">
|
||||
<button class="btn btn--primary">继续阅读</button>
|
||||
<button class="btn btn--danger">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card--flat">
|
||||
<div class="callout">空态示例：开始生成第一个故事</div>
|
||||
<button class="btn btn--primary" style="margin-top: 12px;">生成故事</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
20
.claude/specs/design/figma-html/theme-a/not-found.html
Normal file
20
.claude/specs/design/figma-html/theme-a/not-found.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>404</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="container" style="padding: 80px 0; text-align:center;">
|
||||
<div class="hero">
|
||||
<h1>404</h1>
|
||||
<p>页面走丢了，回到生成故事开始吧。</p>
|
||||
<button class="btn btn--primary">返回首页</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
78
.claude/specs/design/figma-html/theme-a/push-settings.html
Normal file
78
.claude/specs/design/figma-html/theme-a/push-settings.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>推送设置</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="grid grid-2 section">
|
||||
<div class="card">
|
||||
<h3>主动推送</h3>
|
||||
<div class="row section">
|
||||
<div>
|
||||
<label>主开关</label>
|
||||
<select>
|
||||
<option>开启</option>
|
||||
<option>关闭</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>推送时间</label>
|
||||
<input class="input" placeholder="20:00" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<label>触发类型</label>
|
||||
<div class="chips">
|
||||
<span class="chip selected">时间触发</span>
|
||||
<span class="chip selected">事件触发</span>
|
||||
<span class="chip">行为触发</span>
|
||||
<span class="chip">成长触发</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<label>免打扰</label>
|
||||
<div class="row">
|
||||
<input class="input" placeholder="21:00" />
|
||||
<input class="input" placeholder="09:00" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>推送预览</h3>
|
||||
<div class="callout">“今晚给小明讲一个关于太空的故事，好吗？”</div>
|
||||
<button class="btn btn--secondary" style="margin-top: 12px;">发送测试推送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
73
.claude/specs/design/figma-html/theme-a/story-detail.html
Normal file
73
.claude/specs/design/figma-html/theme-a/story-detail.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>故事详情</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="section">
|
||||
<div class="cover-hero"></div>
|
||||
<h2 style="margin-top: 16px;">星际冒险 · 勇气的种子</h2>
|
||||
<div class="card-meta">小明 · 星际冒险宇宙 · 2025/01/12</div>
|
||||
<div class="hero-actions section">
|
||||
<button class="btn btn--secondary">重新生成封面</button>
|
||||
<button class="btn btn--primary">生成语音</button>
|
||||
<button class="btn btn--ghost">分享</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="split section">
|
||||
<div class="card">
|
||||
<h3>故事正文</h3>
|
||||
<p>夜空像一条温柔的河流，小明驾驶着飞船穿过星光……</p>
|
||||
<p>他握紧操纵杆，鼓起勇气，向未知的星球靠近。</p>
|
||||
<p>最终，小明发现了新的朋友，也学会了如何面对黑暗。</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>成就</h3>
|
||||
<div class="chips section">
|
||||
<span class="chip selected">勇气</span>
|
||||
<span class="chip selected">友谊</span>
|
||||
</div>
|
||||
<div class="callout section">“克服了黑暗的恐惧”</div>
|
||||
<div class="callout">“帮助了迷路的小伙伴”</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section audio-player">
|
||||
<button class="btn btn--ghost">播放</button>
|
||||
<div class="audio-bar"><div class="audio-progress"></div></div>
|
||||
<button class="btn btn--ghost">1.0x</button>
|
||||
</div>
|
||||
<div class="footer-note">语音未生成时，显示“生成语音”按钮作为主操作。</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
217
.claude/specs/design/figma-html/theme-a/style.css
Normal file
217
.claude/specs/design/figma-html/theme-a/style.css
Normal file
@@ -0,0 +1,217 @@
|
||||
:root {
|
||||
--primary-600: #6C5CE7;
|
||||
--primary-500: #7C69FF;
|
||||
--primary-100: #EAE7FF;
|
||||
--accent-pink: #FF8FB1;
|
||||
--accent-sky: #65C3FF;
|
||||
--success: #34C759;
|
||||
--warning: #F6A609;
|
||||
--error: #FF5A5F;
|
||||
--neutral-900: #1F2430;
|
||||
--neutral-700: #4B5563;
|
||||
--neutral-500: #9AA3B2;
|
||||
--neutral-200: #E5E7EB;
|
||||
--neutral-100: #F5F7FB;
|
||||
--hero-gradient: linear-gradient(135deg, #EAE7FF 0%, #FDF6FF 40%, #EAF6FF 100%);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
:root {
|
||||
--container-width: 1200px;
|
||||
--gutter: 24px;
|
||||
--radius-card: 12px;
|
||||
--radius-input: 10px;
|
||||
--radius-button: 8px;
|
||||
--radius-pill: 24px;
|
||||
--shadow-s: 0 4px 16px rgba(31,36,48,0.08);
|
||||
--shadow-m: 0 10px 30px rgba(31,36,48,0.12);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "PingFang SC", "Noto Sans SC", Inter, system-ui, -apple-system, sans-serif;
|
||||
color: var(--neutral-900);
|
||||
background: var(--neutral-100);
|
||||
}
|
||||
|
||||
a { color: var(--primary-600); text-decoration: none; }
|
||||
|
||||
.page { min-height: 100vh; }
|
||||
.container {
|
||||
width: min(var(--container-width), 100% - 48px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--neutral-200);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.nav__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 0;
|
||||
gap: 16px;
|
||||
}
|
||||
.nav__left, .nav__center, .nav__right { display: flex; align-items: center; gap: 16px; }
|
||||
.nav__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--neutral-900);
|
||||
}
|
||||
.nav__logo-badge {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, var(--primary-500), var(--accent-sky));
|
||||
}
|
||||
.nav__item { color: var(--neutral-700); font-weight: 500; }
|
||||
.nav__item.active { color: var(--primary-600); }
|
||||
|
||||
.hero {
|
||||
background: var(--hero-gradient);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
box-shadow: var(--shadow-s);
|
||||
}
|
||||
|
||||
.section { margin: 28px 0; }
|
||||
.section-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
|
||||
|
||||
.grid { display: grid; gap: 16px; }
|
||||
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: var(--radius-card);
|
||||
padding: 16px;
|
||||
box-shadow: var(--shadow-s);
|
||||
}
|
||||
.card--flat { box-shadow: none; border: 1px solid var(--neutral-200); }
|
||||
.card-cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 21 / 9;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, var(--primary-100), #fff 60%, var(--accent-sky));
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.card-title { font-weight: 600; margin: 6px 0; }
|
||||
.card-meta { color: var(--neutral-500); font-size: 12px; }
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--primary-100);
|
||||
color: var(--primary-600);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.chip {
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-pill);
|
||||
border: 1px solid var(--neutral-200);
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
.chip.selected { background: var(--primary-100); border-color: var(--primary-500); color: var(--primary-600); }
|
||||
|
||||
.btn {
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border-radius: var(--radius-button);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn--primary { background: var(--primary-600); color: #fff; }
|
||||
.btn--secondary { background: #fff; border-color: var(--primary-600); color: var(--primary-600); }
|
||||
.btn--ghost { background: transparent; color: var(--neutral-700); }
|
||||
.btn--danger { background: #fff; border-color: var(--error); color: var(--error); }
|
||||
|
||||
.input, select, textarea {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-input);
|
||||
border: 1px solid var(--neutral-200);
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
|
||||
|
||||
.stepper { display: flex; gap: 10px; align-items: center; }
|
||||
.step {
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--neutral-100);
|
||||
color: var(--neutral-700);
|
||||
font-size: 12px;
|
||||
}
|
||||
.step.active { background: var(--primary-100); color: var(--primary-600); }
|
||||
|
||||
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
|
||||
|
||||
.table { width: 100%; border-collapse: collapse; }
|
||||
.table th, .table td { border-bottom: 1px solid var(--neutral-200); padding: 12px 8px; text-align: left; font-size: 14px; }
|
||||
|
||||
.avatar {
|
||||
width: 40px; height: 40px; border-radius: 50%;
|
||||
background: var(--primary-100);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-weight: 700; color: var(--primary-600);
|
||||
}
|
||||
|
||||
.cover-hero {
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, var(--primary-100), #fff 55%, var(--accent-pink));
|
||||
}
|
||||
|
||||
.audio-player {
|
||||
display: flex; align-items: center; gap: 12px; padding: 12px 16px;
|
||||
border-radius: 12px; border: 1px solid var(--neutral-200); background: #fff;
|
||||
}
|
||||
.audio-bar { height: 6px; background: var(--neutral-200); border-radius: 999px; flex: 1; }
|
||||
.audio-progress { width: 35%; height: 100%; background: var(--primary-600); border-radius: 999px; }
|
||||
|
||||
.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--neutral-200); }
|
||||
.tab { padding: 10px 12px; color: var(--neutral-700); }
|
||||
.tab.active { color: var(--primary-600); border-bottom: 2px solid var(--primary-600); }
|
||||
|
||||
.callout {
|
||||
background: #fff;
|
||||
border: 1px dashed var(--neutral-200);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
color: var(--neutral-700);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer-note { color: var(--neutral-500); font-size: 12px; margin-top: 12px; }
|
||||
|
||||
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
|
||||
.split {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||
.split { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-2 { grid-template-columns: 1fr; }
|
||||
.grid-3 { grid-template-columns: 1fr; }
|
||||
.row { grid-template-columns: 1fr; }
|
||||
}
|
||||
64
.claude/specs/design/figma-html/theme-a/universe-detail.html
Normal file
64
.claude/specs/design/figma-html/theme-a/universe-detail.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>宇宙详情</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="card section">
|
||||
<h2>星际冒险</h2>
|
||||
<div class="card-meta">主角：小明船长 · 更新于 2025/01/12</div>
|
||||
</div>
|
||||
<div class="grid grid-2 section">
|
||||
<div class="card">
|
||||
<h3>主角设定</h3>
|
||||
<div class="callout">小明是来自地球的探险家，勇敢且好奇。</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>常驻角色</h3>
|
||||
<div class="callout">机器人小七、外星猫咪星星</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>世界观</h3>
|
||||
<div class="callout">星际学院、彩虹星云、飞船港湾</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>成就</h3>
|
||||
<div class="callout">克服恐惧 · 结交朋友 · 学会独立</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<button class="btn btn--secondary">编辑宇宙</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
64
.claude/specs/design/figma-html/theme-a/universes.html
Normal file
64
.claude/specs/design/figma-html/theme-a/universes.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>故事宇宙</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="toolbar section">
|
||||
<h2>故事宇宙</h2>
|
||||
<button class="btn btn--primary">新建宇宙</button>
|
||||
</div>
|
||||
<div class="grid grid-3 section">
|
||||
<div class="card">
|
||||
<div class="card-title">星际冒险</div>
|
||||
<div class="card-meta">主角：小明船长</div>
|
||||
<div class="chips section">
|
||||
<span class="chip">伙伴：机器人小七</span>
|
||||
<span class="chip">成就：3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">梦幻森林</div>
|
||||
<div class="card-meta">主角：森林守护者</div>
|
||||
<div class="chips section">
|
||||
<span class="chip">伙伴：魔法猫咪</span>
|
||||
<span class="chip">成就：1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card--flat">
|
||||
<div class="callout">空态示例：创建第一个宇宙</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>账户设置</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="grid grid-2 section">
|
||||
<div class="card">
|
||||
<h3>个人信息</h3>
|
||||
<div class="row section">
|
||||
<input class="input" placeholder="昵称" value="Dream Parent" />
|
||||
<input class="input" placeholder="邮箱" value="parent@example.com" />
|
||||
</div>
|
||||
<button class="btn btn--primary">保存</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>账号安全</h3>
|
||||
<div class="callout">已绑定 GitHub、Google</div>
|
||||
<button class="btn btn--secondary" style="margin-top: 12px;">管理绑定</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>数据隐私</h3>
|
||||
<button class="btn btn--secondary">导出数据</button>
|
||||
<button class="btn btn--danger" style="margin-top: 12px;">删除账户</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
74
.claude/specs/design/figma-html/theme-b/admin-providers.html
Normal file
74
.claude/specs/design/figma-html/theme-b/admin-providers.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>管理后台 - Providers</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="toolbar section">
|
||||
<h2>Providers 管理</h2>
|
||||
<button class="btn btn--primary">新增 Provider</button>
|
||||
</div>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>类型</th>
|
||||
<th>状态</th>
|
||||
<th>延迟</th>
|
||||
<th>最近检查</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>text_primary</td>
|
||||
<td>Text</td>
|
||||
<td><span class="badge">健康</span></td>
|
||||
<td>420ms</td>
|
||||
<td>2 分钟前</td>
|
||||
<td><a href="#">编辑</a> · <a href="#">禁用</a> · <a href="#">重载</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>image_primary</td>
|
||||
<td>Image</td>
|
||||
<td><span class="badge">健康</span></td>
|
||||
<td>860ms</td>
|
||||
<td>5 分钟前</td>
|
||||
<td><a href="#">编辑</a> · <a href="#">禁用</a> · <a href="#">重载</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="footer-note">点击编辑后弹出 JSON 配置编辑器。</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>孩子档案详情</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="card section" style="display:flex; align-items:center; justify-content: space-between;">
|
||||
<div style="display:flex; gap:12px; align-items:center;">
|
||||
<div class="avatar">明</div>
|
||||
<div>
|
||||
<div class="card-title">小明 · 5岁</div>
|
||||
<div class="card-meta">男 · 生日 2020/05/12</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn--secondary">编辑档案</button>
|
||||
</div>
|
||||
|
||||
<div class="tabs section">
|
||||
<div class="tab active">基础信息</div>
|
||||
<div class="tab">兴趣与成长</div>
|
||||
<div class="tab">故事宇宙</div>
|
||||
<div class="tab">阅读记录</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2 section">
|
||||
<div class="card">
|
||||
<h3>兴趣标签</h3>
|
||||
<div class="chips">
|
||||
<span class="chip selected">太空</span>
|
||||
<span class="chip selected">机器人</span>
|
||||
<span class="chip">冒险</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>成长主题</h3>
|
||||
<div class="chips">
|
||||
<span class="chip selected">勇气</span>
|
||||
<span class="chip">分享</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>故事宇宙</h3>
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="card-title">星际冒险</div>
|
||||
<div class="card-meta">主角：小明船长 · 成就 3 个</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">梦幻森林</div>
|
||||
<div class="card-meta">主角：森林守护者 · 成就 1 个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
58
.claude/specs/design/figma-html/theme-b/child-profiles.html
Normal file
58
.claude/specs/design/figma-html/theme-b/child-profiles.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>孩子档案</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="toolbar section">
|
||||
<h2>我的宝贝</h2>
|
||||
<button class="btn btn--primary">添加档案</button>
|
||||
</div>
|
||||
<div class="grid grid-3 section">
|
||||
<div class="card">
|
||||
<div class="avatar">明</div>
|
||||
<div class="card-title">小明 · 5岁</div>
|
||||
<div class="chips"><span class="chip">太空</span><span class="chip">机器人</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="avatar">红</div>
|
||||
<div class="card-title">小红 · 3岁</div>
|
||||
<div class="chips"><span class="chip">公主</span><span class="chip">动物</span></div>
|
||||
</div>
|
||||
<div class="card card--flat">
|
||||
<div class="callout">空态示例：添加一个孩子档案</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
111
.claude/specs/design/figma-html/theme-b/home.html
Normal file
111
.claude/specs/design/figma-html/theme-b/home.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>生成故事</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="stepper section">
|
||||
<span class="step active">档案</span>
|
||||
<span class="step">宇宙</span>
|
||||
<span class="step">关键词</span>
|
||||
<span class="step">生成</span>
|
||||
</div>
|
||||
<div class="split section">
|
||||
<div class="card">
|
||||
<h3>为谁创作故事</h3>
|
||||
<div class="row section">
|
||||
<div>
|
||||
<label>孩子档案</label>
|
||||
<select>
|
||||
<option>小明 · 5岁</option>
|
||||
<option>小红 · 3岁</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>故事宇宙</label>
|
||||
<select>
|
||||
<option>延续上一次（星际冒险）</option>
|
||||
<option>新建宇宙</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<label>关键词</label>
|
||||
<div class="chips section">
|
||||
<span class="chip selected">太空</span>
|
||||
<span class="chip selected">勇气</span>
|
||||
<span class="chip">机器人</span>
|
||||
<span class="chip">探索</span>
|
||||
</div>
|
||||
<input class="input" placeholder="输入更多关键词" />
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div>
|
||||
<label>成长主题</label>
|
||||
<select>
|
||||
<option>勇气</option>
|
||||
<option>分享</option>
|
||||
<option>独立</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>故事长度</label>
|
||||
<div class="chips">
|
||||
<span class="chip selected">短</span>
|
||||
<span class="chip">中</span>
|
||||
<span class="chip">长</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<button class="btn btn--primary" style="width: 100%;">生成故事</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>生成预览</h3>
|
||||
<div class="card-cover"></div>
|
||||
<div class="card-title">故事标题占位</div>
|
||||
<p class="card-meta">故事摘要将显示在这里，支持 2-3 行预览。</p>
|
||||
<div class="section">
|
||||
<div class="callout">生成中：文本 → 封面 → 语音</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="callout" style="border-color: var(--error); color: var(--error);">封面生成失败，稍后重试</div>
|
||||
<button class="btn btn--secondary" style="margin-top: 8px;">重新生成封面</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
33
.claude/specs/design/figma-html/theme-b/index.html
Normal file
33
.claude/specs/design/figma-html/theme-b/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DreamWeaver 原型入口</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="container" style="padding: 48px 0;">
|
||||
<div class="hero">
|
||||
<h1>DreamWeaver HTML 原型入口</h1>
|
||||
<p>请选择页面进行导入或预览（HTML to Figma）。</p>
|
||||
<div class="grid grid-3 section">
|
||||
<div class="card"><a href="login.html">登录 / 授权</a></div>
|
||||
<div class="card"><a href="home.html">生成故事（Home）</a></div>
|
||||
<div class="card"><a href="my-stories.html">我的故事（列表）</a></div>
|
||||
<div class="card"><a href="story-detail.html">故事详情</a></div>
|
||||
<div class="card"><a href="child-profiles.html">孩子档案（列表）</a></div>
|
||||
<div class="card"><a href="child-profile-detail.html">孩子档案（详情）</a></div>
|
||||
<div class="card"><a href="universes.html">故事宇宙（列表）</a></div>
|
||||
<div class="card"><a href="universe-detail.html">故事宇宙（详情）</a></div>
|
||||
<div class="card"><a href="push-settings.html">推送设置</a></div>
|
||||
<div class="card"><a href="account-settings.html">账户设置</a></div>
|
||||
<div class="card"><a href="admin-providers.html">管理后台（Providers）</a></div>
|
||||
<div class="card"><a href="not-found.html">404 / 错误</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
28
.claude/specs/design/figma-html/theme-b/login.html
Normal file
28
.claude/specs/design/figma-html/theme-b/login.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>登录 / 授权</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="container" style="padding: 80px 0;">
|
||||
<div class="hero" style="max-width: 420px; margin: 0 auto; text-align: center;">
|
||||
<div class="nav__logo" style="justify-content: center;">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<h2 style="margin-top: 16px;">欢迎来到 DreamWeaver</h2>
|
||||
<p>为孩子生成独一无二的故事</p>
|
||||
<div class="section" style="display: grid; gap: 12px;">
|
||||
<button class="btn btn--primary">使用 GitHub 登录</button>
|
||||
<button class="btn btn--secondary">使用 Google 登录</button>
|
||||
</div>
|
||||
<div class="footer-note">我们仅使用公开信息创建账户</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
84
.claude/specs/design/figma-html/theme-b/my-stories.html
Normal file
84
.claude/specs/design/figma-html/theme-b/my-stories.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>我的故事</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="toolbar section">
|
||||
<input class="input" style="width: 260px;" placeholder="搜索标题或关键词" />
|
||||
<select style="width: 160px;">
|
||||
<option>孩子：全部</option>
|
||||
<option>小明</option>
|
||||
<option>小红</option>
|
||||
</select>
|
||||
<select style="width: 160px;">
|
||||
<option>排序：最新</option>
|
||||
<option>最早</option>
|
||||
</select>
|
||||
<button class="btn btn--ghost">网格</button>
|
||||
<button class="btn btn--ghost">列表</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3 section">
|
||||
<div class="card">
|
||||
<div class="card-cover"></div>
|
||||
<div class="card-title">星际冒险 · 第三章</div>
|
||||
<div class="chips">
|
||||
<span class="chip">太空</span><span class="chip">勇气</span>
|
||||
</div>
|
||||
<div class="card-meta">小明 · 更新于 2 天前</div>
|
||||
<div class="section hero-actions">
|
||||
<button class="btn btn--primary">继续阅读</button>
|
||||
<button class="btn btn--secondary">重生成封面</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-cover"></div>
|
||||
<div class="card-title">梦幻森林 · 朋友篇</div>
|
||||
<div class="chips">
|
||||
<span class="chip">友谊</span><span class="chip">动物</span>
|
||||
</div>
|
||||
<div class="card-meta">小红 · 更新于 5 天前</div>
|
||||
<div class="section hero-actions">
|
||||
<button class="btn btn--primary">继续阅读</button>
|
||||
<button class="btn btn--danger">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card--flat">
|
||||
<div class="callout">空态示例：开始生成第一个故事</div>
|
||||
<button class="btn btn--primary" style="margin-top: 12px;">生成故事</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
20
.claude/specs/design/figma-html/theme-b/not-found.html
Normal file
20
.claude/specs/design/figma-html/theme-b/not-found.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>404</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="container" style="padding: 80px 0; text-align:center;">
|
||||
<div class="hero">
|
||||
<h1>404</h1>
|
||||
<p>页面走丢了，回到生成故事开始吧。</p>
|
||||
<button class="btn btn--primary">返回首页</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
78
.claude/specs/design/figma-html/theme-b/push-settings.html
Normal file
78
.claude/specs/design/figma-html/theme-b/push-settings.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>推送设置</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="grid grid-2 section">
|
||||
<div class="card">
|
||||
<h3>主动推送</h3>
|
||||
<div class="row section">
|
||||
<div>
|
||||
<label>主开关</label>
|
||||
<select>
|
||||
<option>开启</option>
|
||||
<option>关闭</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>推送时间</label>
|
||||
<input class="input" placeholder="20:00" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<label>触发类型</label>
|
||||
<div class="chips">
|
||||
<span class="chip selected">时间触发</span>
|
||||
<span class="chip selected">事件触发</span>
|
||||
<span class="chip">行为触发</span>
|
||||
<span class="chip">成长触发</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<label>免打扰</label>
|
||||
<div class="row">
|
||||
<input class="input" placeholder="21:00" />
|
||||
<input class="input" placeholder="09:00" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>推送预览</h3>
|
||||
<div class="callout">“今晚给小明讲一个关于太空的故事，好吗？”</div>
|
||||
<button class="btn btn--secondary" style="margin-top: 12px;">发送测试推送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
73
.claude/specs/design/figma-html/theme-b/story-detail.html
Normal file
73
.claude/specs/design/figma-html/theme-b/story-detail.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>故事详情</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="section">
|
||||
<div class="cover-hero"></div>
|
||||
<h2 style="margin-top: 16px;">星际冒险 · 勇气的种子</h2>
|
||||
<div class="card-meta">小明 · 星际冒险宇宙 · 2025/01/12</div>
|
||||
<div class="hero-actions section">
|
||||
<button class="btn btn--secondary">重新生成封面</button>
|
||||
<button class="btn btn--primary">生成语音</button>
|
||||
<button class="btn btn--ghost">分享</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="split section">
|
||||
<div class="card">
|
||||
<h3>故事正文</h3>
|
||||
<p>夜空像一条温柔的河流，小明驾驶着飞船穿过星光……</p>
|
||||
<p>他握紧操纵杆，鼓起勇气，向未知的星球靠近。</p>
|
||||
<p>最终，小明发现了新的朋友，也学会了如何面对黑暗。</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>成就</h3>
|
||||
<div class="chips section">
|
||||
<span class="chip selected">勇气</span>
|
||||
<span class="chip selected">友谊</span>
|
||||
</div>
|
||||
<div class="callout section">“克服了黑暗的恐惧”</div>
|
||||
<div class="callout">“帮助了迷路的小伙伴”</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section audio-player">
|
||||
<button class="btn btn--ghost">播放</button>
|
||||
<div class="audio-bar"><div class="audio-progress"></div></div>
|
||||
<button class="btn btn--ghost">1.0x</button>
|
||||
</div>
|
||||
<div class="footer-note">语音未生成时，显示“生成语音”按钮作为主操作。</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
217
.claude/specs/design/figma-html/theme-b/style.css
Normal file
217
.claude/specs/design/figma-html/theme-b/style.css
Normal file
@@ -0,0 +1,217 @@
|
||||
:root {
|
||||
--primary-600: #3B82F6;
|
||||
--primary-500: #60A5FA;
|
||||
--primary-100: #DBEAFE;
|
||||
--accent-pink: #F5C542;
|
||||
--accent-sky: #6EE7B7;
|
||||
--success: #34C759;
|
||||
--warning: #F6A609;
|
||||
--error: #FF5A5F;
|
||||
--neutral-900: #111827;
|
||||
--neutral-700: #374151;
|
||||
--neutral-500: #9CA3AF;
|
||||
--neutral-200: #E5E7EB;
|
||||
--neutral-100: #F9FAFB;
|
||||
--hero-gradient: linear-gradient(180deg, #F9FAFB 0%, #EEF2FF 100%);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
:root {
|
||||
--container-width: 1200px;
|
||||
--gutter: 24px;
|
||||
--radius-card: 12px;
|
||||
--radius-input: 10px;
|
||||
--radius-button: 8px;
|
||||
--radius-pill: 24px;
|
||||
--shadow-s: 0 4px 16px rgba(31,36,48,0.08);
|
||||
--shadow-m: 0 10px 30px rgba(31,36,48,0.12);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "PingFang SC", "Noto Sans SC", Inter, system-ui, -apple-system, sans-serif;
|
||||
color: var(--neutral-900);
|
||||
background: var(--neutral-100);
|
||||
}
|
||||
|
||||
a { color: var(--primary-600); text-decoration: none; }
|
||||
|
||||
.page { min-height: 100vh; }
|
||||
.container {
|
||||
width: min(var(--container-width), 100% - 48px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--neutral-200);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.nav__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 0;
|
||||
gap: 16px;
|
||||
}
|
||||
.nav__left, .nav__center, .nav__right { display: flex; align-items: center; gap: 16px; }
|
||||
.nav__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--neutral-900);
|
||||
}
|
||||
.nav__logo-badge {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, var(--primary-500), var(--accent-sky));
|
||||
}
|
||||
.nav__item { color: var(--neutral-700); font-weight: 500; }
|
||||
.nav__item.active { color: var(--primary-600); }
|
||||
|
||||
.hero {
|
||||
background: var(--hero-gradient);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
box-shadow: var(--shadow-s);
|
||||
}
|
||||
|
||||
.section { margin: 28px 0; }
|
||||
.section-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
|
||||
|
||||
.grid { display: grid; gap: 16px; }
|
||||
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: var(--radius-card);
|
||||
padding: 16px;
|
||||
box-shadow: var(--shadow-s);
|
||||
}
|
||||
.card--flat { box-shadow: none; border: 1px solid var(--neutral-200); }
|
||||
.card-cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 21 / 9;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, var(--primary-100), #fff 60%, var(--accent-sky));
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.card-title { font-weight: 600; margin: 6px 0; }
|
||||
.card-meta { color: var(--neutral-500); font-size: 12px; }
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--primary-100);
|
||||
color: var(--primary-600);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.chip {
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-pill);
|
||||
border: 1px solid var(--neutral-200);
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
.chip.selected { background: var(--primary-100); border-color: var(--primary-500); color: var(--primary-600); }
|
||||
|
||||
.btn {
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border-radius: var(--radius-button);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn--primary { background: var(--primary-600); color: #fff; }
|
||||
.btn--secondary { background: #fff; border-color: var(--primary-600); color: var(--primary-600); }
|
||||
.btn--ghost { background: transparent; color: var(--neutral-700); }
|
||||
.btn--danger { background: #fff; border-color: var(--error); color: var(--error); }
|
||||
|
||||
.input, select, textarea {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-input);
|
||||
border: 1px solid var(--neutral-200);
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
|
||||
|
||||
.stepper { display: flex; gap: 10px; align-items: center; }
|
||||
.step {
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--neutral-100);
|
||||
color: var(--neutral-700);
|
||||
font-size: 12px;
|
||||
}
|
||||
.step.active { background: var(--primary-100); color: var(--primary-600); }
|
||||
|
||||
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
|
||||
|
||||
.table { width: 100%; border-collapse: collapse; }
|
||||
.table th, .table td { border-bottom: 1px solid var(--neutral-200); padding: 12px 8px; text-align: left; font-size: 14px; }
|
||||
|
||||
.avatar {
|
||||
width: 40px; height: 40px; border-radius: 50%;
|
||||
background: var(--primary-100);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-weight: 700; color: var(--primary-600);
|
||||
}
|
||||
|
||||
.cover-hero {
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, var(--primary-100), #fff 55%, var(--accent-pink));
|
||||
}
|
||||
|
||||
.audio-player {
|
||||
display: flex; align-items: center; gap: 12px; padding: 12px 16px;
|
||||
border-radius: 12px; border: 1px solid var(--neutral-200); background: #fff;
|
||||
}
|
||||
.audio-bar { height: 6px; background: var(--neutral-200); border-radius: 999px; flex: 1; }
|
||||
.audio-progress { width: 35%; height: 100%; background: var(--primary-600); border-radius: 999px; }
|
||||
|
||||
.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--neutral-200); }
|
||||
.tab { padding: 10px 12px; color: var(--neutral-700); }
|
||||
.tab.active { color: var(--primary-600); border-bottom: 2px solid var(--primary-600); }
|
||||
|
||||
.callout {
|
||||
background: #fff;
|
||||
border: 1px dashed var(--neutral-200);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
color: var(--neutral-700);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer-note { color: var(--neutral-500); font-size: 12px; margin-top: 12px; }
|
||||
|
||||
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
|
||||
.split {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||
.split { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-2 { grid-template-columns: 1fr; }
|
||||
.grid-3 { grid-template-columns: 1fr; }
|
||||
.row { grid-template-columns: 1fr; }
|
||||
}
|
||||
64
.claude/specs/design/figma-html/theme-b/universe-detail.html
Normal file
64
.claude/specs/design/figma-html/theme-b/universe-detail.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>宇宙详情</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="card section">
|
||||
<h2>星际冒险</h2>
|
||||
<div class="card-meta">主角：小明船长 · 更新于 2025/01/12</div>
|
||||
</div>
|
||||
<div class="grid grid-2 section">
|
||||
<div class="card">
|
||||
<h3>主角设定</h3>
|
||||
<div class="callout">小明是来自地球的探险家，勇敢且好奇。</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>常驻角色</h3>
|
||||
<div class="callout">机器人小七、外星猫咪星星</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>世界观</h3>
|
||||
<div class="callout">星际学院、彩虹星云、飞船港湾</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>成就</h3>
|
||||
<div class="callout">克服恐惧 · 结交朋友 · 学会独立</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<button class="btn btn--secondary">编辑宇宙</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
64
.claude/specs/design/figma-html/theme-b/universes.html
Normal file
64
.claude/specs/design/figma-html/theme-b/universes.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>故事宇宙</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="toolbar section">
|
||||
<h2>故事宇宙</h2>
|
||||
<button class="btn btn--primary">新建宇宙</button>
|
||||
</div>
|
||||
<div class="grid grid-3 section">
|
||||
<div class="card">
|
||||
<div class="card-title">星际冒险</div>
|
||||
<div class="card-meta">主角：小明船长</div>
|
||||
<div class="chips section">
|
||||
<span class="chip">伙伴：机器人小七</span>
|
||||
<span class="chip">成就：3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">梦幻森林</div>
|
||||
<div class="card-meta">主角：森林守护者</div>
|
||||
<div class="chips section">
|
||||
<span class="chip">伙伴：魔法猫咪</span>
|
||||
<span class="chip">成就：1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card--flat">
|
||||
<div class="callout">空态示例：创建第一个宇宙</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>账户设置</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="grid grid-2 section">
|
||||
<div class="card">
|
||||
<h3>个人信息</h3>
|
||||
<div class="row section">
|
||||
<input class="input" placeholder="昵称" value="Dream Parent" />
|
||||
<input class="input" placeholder="邮箱" value="parent@example.com" />
|
||||
</div>
|
||||
<button class="btn btn--primary">保存</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>账号安全</h3>
|
||||
<div class="callout">已绑定 GitHub、Google</div>
|
||||
<button class="btn btn--secondary" style="margin-top: 12px;">管理绑定</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>数据隐私</h3>
|
||||
<button class="btn btn--secondary">导出数据</button>
|
||||
<button class="btn btn--danger" style="margin-top: 12px;">删除账户</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
74
.claude/specs/design/figma-html/theme-c/admin-providers.html
Normal file
74
.claude/specs/design/figma-html/theme-c/admin-providers.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>管理后台 - Providers</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="toolbar section">
|
||||
<h2>Providers 管理</h2>
|
||||
<button class="btn btn--primary">新增 Provider</button>
|
||||
</div>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>类型</th>
|
||||
<th>状态</th>
|
||||
<th>延迟</th>
|
||||
<th>最近检查</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>text_primary</td>
|
||||
<td>Text</td>
|
||||
<td><span class="badge">健康</span></td>
|
||||
<td>420ms</td>
|
||||
<td>2 分钟前</td>
|
||||
<td><a href="#">编辑</a> · <a href="#">禁用</a> · <a href="#">重载</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>image_primary</td>
|
||||
<td>Image</td>
|
||||
<td><span class="badge">健康</span></td>
|
||||
<td>860ms</td>
|
||||
<td>5 分钟前</td>
|
||||
<td><a href="#">编辑</a> · <a href="#">禁用</a> · <a href="#">重载</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="footer-note">点击编辑后弹出 JSON 配置编辑器。</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>孩子档案详情</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="card section" style="display:flex; align-items:center; justify-content: space-between;">
|
||||
<div style="display:flex; gap:12px; align-items:center;">
|
||||
<div class="avatar">明</div>
|
||||
<div>
|
||||
<div class="card-title">小明 · 5岁</div>
|
||||
<div class="card-meta">男 · 生日 2020/05/12</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn--secondary">编辑档案</button>
|
||||
</div>
|
||||
|
||||
<div class="tabs section">
|
||||
<div class="tab active">基础信息</div>
|
||||
<div class="tab">兴趣与成长</div>
|
||||
<div class="tab">故事宇宙</div>
|
||||
<div class="tab">阅读记录</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2 section">
|
||||
<div class="card">
|
||||
<h3>兴趣标签</h3>
|
||||
<div class="chips">
|
||||
<span class="chip selected">太空</span>
|
||||
<span class="chip selected">机器人</span>
|
||||
<span class="chip">冒险</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>成长主题</h3>
|
||||
<div class="chips">
|
||||
<span class="chip selected">勇气</span>
|
||||
<span class="chip">分享</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>故事宇宙</h3>
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="card-title">星际冒险</div>
|
||||
<div class="card-meta">主角：小明船长 · 成就 3 个</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">梦幻森林</div>
|
||||
<div class="card-meta">主角：森林守护者 · 成就 1 个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
58
.claude/specs/design/figma-html/theme-c/child-profiles.html
Normal file
58
.claude/specs/design/figma-html/theme-c/child-profiles.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>孩子档案</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="toolbar section">
|
||||
<h2>我的宝贝</h2>
|
||||
<button class="btn btn--primary">添加档案</button>
|
||||
</div>
|
||||
<div class="grid grid-3 section">
|
||||
<div class="card">
|
||||
<div class="avatar">明</div>
|
||||
<div class="card-title">小明 · 5岁</div>
|
||||
<div class="chips"><span class="chip">太空</span><span class="chip">机器人</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="avatar">红</div>
|
||||
<div class="card-title">小红 · 3岁</div>
|
||||
<div class="chips"><span class="chip">公主</span><span class="chip">动物</span></div>
|
||||
</div>
|
||||
<div class="card card--flat">
|
||||
<div class="callout">空态示例：添加一个孩子档案</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
111
.claude/specs/design/figma-html/theme-c/home.html
Normal file
111
.claude/specs/design/figma-html/theme-c/home.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>生成故事</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="stepper section">
|
||||
<span class="step active">档案</span>
|
||||
<span class="step">宇宙</span>
|
||||
<span class="step">关键词</span>
|
||||
<span class="step">生成</span>
|
||||
</div>
|
||||
<div class="split section">
|
||||
<div class="card">
|
||||
<h3>为谁创作故事</h3>
|
||||
<div class="row section">
|
||||
<div>
|
||||
<label>孩子档案</label>
|
||||
<select>
|
||||
<option>小明 · 5岁</option>
|
||||
<option>小红 · 3岁</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>故事宇宙</label>
|
||||
<select>
|
||||
<option>延续上一次（星际冒险）</option>
|
||||
<option>新建宇宙</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<label>关键词</label>
|
||||
<div class="chips section">
|
||||
<span class="chip selected">太空</span>
|
||||
<span class="chip selected">勇气</span>
|
||||
<span class="chip">机器人</span>
|
||||
<span class="chip">探索</span>
|
||||
</div>
|
||||
<input class="input" placeholder="输入更多关键词" />
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div>
|
||||
<label>成长主题</label>
|
||||
<select>
|
||||
<option>勇气</option>
|
||||
<option>分享</option>
|
||||
<option>独立</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>故事长度</label>
|
||||
<div class="chips">
|
||||
<span class="chip selected">短</span>
|
||||
<span class="chip">中</span>
|
||||
<span class="chip">长</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<button class="btn btn--primary" style="width: 100%;">生成故事</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>生成预览</h3>
|
||||
<div class="card-cover"></div>
|
||||
<div class="card-title">故事标题占位</div>
|
||||
<p class="card-meta">故事摘要将显示在这里，支持 2-3 行预览。</p>
|
||||
<div class="section">
|
||||
<div class="callout">生成中：文本 → 封面 → 语音</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="callout" style="border-color: var(--error); color: var(--error);">封面生成失败，稍后重试</div>
|
||||
<button class="btn btn--secondary" style="margin-top: 8px;">重新生成封面</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
33
.claude/specs/design/figma-html/theme-c/index.html
Normal file
33
.claude/specs/design/figma-html/theme-c/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DreamWeaver 原型入口</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="container" style="padding: 48px 0;">
|
||||
<div class="hero">
|
||||
<h1>DreamWeaver HTML 原型入口</h1>
|
||||
<p>请选择页面进行导入或预览（HTML to Figma）。</p>
|
||||
<div class="grid grid-3 section">
|
||||
<div class="card"><a href="login.html">登录 / 授权</a></div>
|
||||
<div class="card"><a href="home.html">生成故事（Home）</a></div>
|
||||
<div class="card"><a href="my-stories.html">我的故事（列表）</a></div>
|
||||
<div class="card"><a href="story-detail.html">故事详情</a></div>
|
||||
<div class="card"><a href="child-profiles.html">孩子档案（列表）</a></div>
|
||||
<div class="card"><a href="child-profile-detail.html">孩子档案（详情）</a></div>
|
||||
<div class="card"><a href="universes.html">故事宇宙（列表）</a></div>
|
||||
<div class="card"><a href="universe-detail.html">故事宇宙（详情）</a></div>
|
||||
<div class="card"><a href="push-settings.html">推送设置</a></div>
|
||||
<div class="card"><a href="account-settings.html">账户设置</a></div>
|
||||
<div class="card"><a href="admin-providers.html">管理后台（Providers）</a></div>
|
||||
<div class="card"><a href="not-found.html">404 / 错误</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
28
.claude/specs/design/figma-html/theme-c/login.html
Normal file
28
.claude/specs/design/figma-html/theme-c/login.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>登录 / 授权</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="container" style="padding: 80px 0;">
|
||||
<div class="hero" style="max-width: 420px; margin: 0 auto; text-align: center;">
|
||||
<div class="nav__logo" style="justify-content: center;">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<h2 style="margin-top: 16px;">欢迎来到 DreamWeaver</h2>
|
||||
<p>为孩子生成独一无二的故事</p>
|
||||
<div class="section" style="display: grid; gap: 12px;">
|
||||
<button class="btn btn--primary">使用 GitHub 登录</button>
|
||||
<button class="btn btn--secondary">使用 Google 登录</button>
|
||||
</div>
|
||||
<div class="footer-note">我们仅使用公开信息创建账户</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
84
.claude/specs/design/figma-html/theme-c/my-stories.html
Normal file
84
.claude/specs/design/figma-html/theme-c/my-stories.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>我的故事</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="toolbar section">
|
||||
<input class="input" style="width: 260px;" placeholder="搜索标题或关键词" />
|
||||
<select style="width: 160px;">
|
||||
<option>孩子：全部</option>
|
||||
<option>小明</option>
|
||||
<option>小红</option>
|
||||
</select>
|
||||
<select style="width: 160px;">
|
||||
<option>排序：最新</option>
|
||||
<option>最早</option>
|
||||
</select>
|
||||
<button class="btn btn--ghost">网格</button>
|
||||
<button class="btn btn--ghost">列表</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3 section">
|
||||
<div class="card">
|
||||
<div class="card-cover"></div>
|
||||
<div class="card-title">星际冒险 · 第三章</div>
|
||||
<div class="chips">
|
||||
<span class="chip">太空</span><span class="chip">勇气</span>
|
||||
</div>
|
||||
<div class="card-meta">小明 · 更新于 2 天前</div>
|
||||
<div class="section hero-actions">
|
||||
<button class="btn btn--primary">继续阅读</button>
|
||||
<button class="btn btn--secondary">重生成封面</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-cover"></div>
|
||||
<div class="card-title">梦幻森林 · 朋友篇</div>
|
||||
<div class="chips">
|
||||
<span class="chip">友谊</span><span class="chip">动物</span>
|
||||
</div>
|
||||
<div class="card-meta">小红 · 更新于 5 天前</div>
|
||||
<div class="section hero-actions">
|
||||
<button class="btn btn--primary">继续阅读</button>
|
||||
<button class="btn btn--danger">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card--flat">
|
||||
<div class="callout">空态示例：开始生成第一个故事</div>
|
||||
<button class="btn btn--primary" style="margin-top: 12px;">生成故事</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
20
.claude/specs/design/figma-html/theme-c/not-found.html
Normal file
20
.claude/specs/design/figma-html/theme-c/not-found.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>404</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="container" style="padding: 80px 0; text-align:center;">
|
||||
<div class="hero">
|
||||
<h1>404</h1>
|
||||
<p>页面走丢了，回到生成故事开始吧。</p>
|
||||
<button class="btn btn--primary">返回首页</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
78
.claude/specs/design/figma-html/theme-c/push-settings.html
Normal file
78
.claude/specs/design/figma-html/theme-c/push-settings.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>推送设置</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="grid grid-2 section">
|
||||
<div class="card">
|
||||
<h3>主动推送</h3>
|
||||
<div class="row section">
|
||||
<div>
|
||||
<label>主开关</label>
|
||||
<select>
|
||||
<option>开启</option>
|
||||
<option>关闭</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>推送时间</label>
|
||||
<input class="input" placeholder="20:00" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<label>触发类型</label>
|
||||
<div class="chips">
|
||||
<span class="chip selected">时间触发</span>
|
||||
<span class="chip selected">事件触发</span>
|
||||
<span class="chip">行为触发</span>
|
||||
<span class="chip">成长触发</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<label>免打扰</label>
|
||||
<div class="row">
|
||||
<input class="input" placeholder="21:00" />
|
||||
<input class="input" placeholder="09:00" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>推送预览</h3>
|
||||
<div class="callout">“今晚给小明讲一个关于太空的故事，好吗？”</div>
|
||||
<button class="btn btn--secondary" style="margin-top: 12px;">发送测试推送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
73
.claude/specs/design/figma-html/theme-c/story-detail.html
Normal file
73
.claude/specs/design/figma-html/theme-c/story-detail.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>故事详情</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="section">
|
||||
<div class="cover-hero"></div>
|
||||
<h2 style="margin-top: 16px;">星际冒险 · 勇气的种子</h2>
|
||||
<div class="card-meta">小明 · 星际冒险宇宙 · 2025/01/12</div>
|
||||
<div class="hero-actions section">
|
||||
<button class="btn btn--secondary">重新生成封面</button>
|
||||
<button class="btn btn--primary">生成语音</button>
|
||||
<button class="btn btn--ghost">分享</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="split section">
|
||||
<div class="card">
|
||||
<h3>故事正文</h3>
|
||||
<p>夜空像一条温柔的河流，小明驾驶着飞船穿过星光……</p>
|
||||
<p>他握紧操纵杆，鼓起勇气，向未知的星球靠近。</p>
|
||||
<p>最终，小明发现了新的朋友，也学会了如何面对黑暗。</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>成就</h3>
|
||||
<div class="chips section">
|
||||
<span class="chip selected">勇气</span>
|
||||
<span class="chip selected">友谊</span>
|
||||
</div>
|
||||
<div class="callout section">“克服了黑暗的恐惧”</div>
|
||||
<div class="callout">“帮助了迷路的小伙伴”</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section audio-player">
|
||||
<button class="btn btn--ghost">播放</button>
|
||||
<div class="audio-bar"><div class="audio-progress"></div></div>
|
||||
<button class="btn btn--ghost">1.0x</button>
|
||||
</div>
|
||||
<div class="footer-note">语音未生成时，显示“生成语音”按钮作为主操作。</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
217
.claude/specs/design/figma-html/theme-c/style.css
Normal file
217
.claude/specs/design/figma-html/theme-c/style.css
Normal file
@@ -0,0 +1,217 @@
|
||||
:root {
|
||||
--primary-600: #7C3AED;
|
||||
--primary-500: #8B5CF6;
|
||||
--primary-100: #EDE9FE;
|
||||
--accent-pink: #FB7185;
|
||||
--accent-sky: #22D3EE;
|
||||
--success: #34C759;
|
||||
--warning: #F6A609;
|
||||
--error: #FF5A5F;
|
||||
--neutral-900: #1F2937;
|
||||
--neutral-700: #4B5563;
|
||||
--neutral-500: #9CA3AF;
|
||||
--neutral-200: #E5E7EB;
|
||||
--neutral-100: #F5F5F7;
|
||||
--hero-gradient: linear-gradient(135deg, #EDE9FE 0%, #FFE4F3 45%, #E0F7FF 100%);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
:root {
|
||||
--container-width: 1200px;
|
||||
--gutter: 24px;
|
||||
--radius-card: 12px;
|
||||
--radius-input: 10px;
|
||||
--radius-button: 8px;
|
||||
--radius-pill: 24px;
|
||||
--shadow-s: 0 4px 16px rgba(31,36,48,0.08);
|
||||
--shadow-m: 0 10px 30px rgba(31,36,48,0.12);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "PingFang SC", "Noto Sans SC", Inter, system-ui, -apple-system, sans-serif;
|
||||
color: var(--neutral-900);
|
||||
background: var(--neutral-100);
|
||||
}
|
||||
|
||||
a { color: var(--primary-600); text-decoration: none; }
|
||||
|
||||
.page { min-height: 100vh; }
|
||||
.container {
|
||||
width: min(var(--container-width), 100% - 48px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--neutral-200);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.nav__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 0;
|
||||
gap: 16px;
|
||||
}
|
||||
.nav__left, .nav__center, .nav__right { display: flex; align-items: center; gap: 16px; }
|
||||
.nav__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--neutral-900);
|
||||
}
|
||||
.nav__logo-badge {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, var(--primary-500), var(--accent-sky));
|
||||
}
|
||||
.nav__item { color: var(--neutral-700); font-weight: 500; }
|
||||
.nav__item.active { color: var(--primary-600); }
|
||||
|
||||
.hero {
|
||||
background: var(--hero-gradient);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
box-shadow: var(--shadow-s);
|
||||
}
|
||||
|
||||
.section { margin: 28px 0; }
|
||||
.section-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
|
||||
|
||||
.grid { display: grid; gap: 16px; }
|
||||
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: var(--radius-card);
|
||||
padding: 16px;
|
||||
box-shadow: var(--shadow-s);
|
||||
}
|
||||
.card--flat { box-shadow: none; border: 1px solid var(--neutral-200); }
|
||||
.card-cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 21 / 9;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, var(--primary-100), #fff 60%, var(--accent-sky));
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.card-title { font-weight: 600; margin: 6px 0; }
|
||||
.card-meta { color: var(--neutral-500); font-size: 12px; }
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--primary-100);
|
||||
color: var(--primary-600);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.chip {
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-pill);
|
||||
border: 1px solid var(--neutral-200);
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
.chip.selected { background: var(--primary-100); border-color: var(--primary-500); color: var(--primary-600); }
|
||||
|
||||
.btn {
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border-radius: var(--radius-button);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn--primary { background: var(--primary-600); color: #fff; }
|
||||
.btn--secondary { background: #fff; border-color: var(--primary-600); color: var(--primary-600); }
|
||||
.btn--ghost { background: transparent; color: var(--neutral-700); }
|
||||
.btn--danger { background: #fff; border-color: var(--error); color: var(--error); }
|
||||
|
||||
.input, select, textarea {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-input);
|
||||
border: 1px solid var(--neutral-200);
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
|
||||
|
||||
.stepper { display: flex; gap: 10px; align-items: center; }
|
||||
.step {
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--neutral-100);
|
||||
color: var(--neutral-700);
|
||||
font-size: 12px;
|
||||
}
|
||||
.step.active { background: var(--primary-100); color: var(--primary-600); }
|
||||
|
||||
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
|
||||
|
||||
.table { width: 100%; border-collapse: collapse; }
|
||||
.table th, .table td { border-bottom: 1px solid var(--neutral-200); padding: 12px 8px; text-align: left; font-size: 14px; }
|
||||
|
||||
.avatar {
|
||||
width: 40px; height: 40px; border-radius: 50%;
|
||||
background: var(--primary-100);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-weight: 700; color: var(--primary-600);
|
||||
}
|
||||
|
||||
.cover-hero {
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, var(--primary-100), #fff 55%, var(--accent-pink));
|
||||
}
|
||||
|
||||
.audio-player {
|
||||
display: flex; align-items: center; gap: 12px; padding: 12px 16px;
|
||||
border-radius: 12px; border: 1px solid var(--neutral-200); background: #fff;
|
||||
}
|
||||
.audio-bar { height: 6px; background: var(--neutral-200); border-radius: 999px; flex: 1; }
|
||||
.audio-progress { width: 35%; height: 100%; background: var(--primary-600); border-radius: 999px; }
|
||||
|
||||
.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--neutral-200); }
|
||||
.tab { padding: 10px 12px; color: var(--neutral-700); }
|
||||
.tab.active { color: var(--primary-600); border-bottom: 2px solid var(--primary-600); }
|
||||
|
||||
.callout {
|
||||
background: #fff;
|
||||
border: 1px dashed var(--neutral-200);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
color: var(--neutral-700);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer-note { color: var(--neutral-500); font-size: 12px; margin-top: 12px; }
|
||||
|
||||
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
|
||||
.split {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||
.split { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-2 { grid-template-columns: 1fr; }
|
||||
.grid-3 { grid-template-columns: 1fr; }
|
||||
.row { grid-template-columns: 1fr; }
|
||||
}
|
||||
64
.claude/specs/design/figma-html/theme-c/universe-detail.html
Normal file
64
.claude/specs/design/figma-html/theme-c/universe-detail.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>宇宙详情</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="card section">
|
||||
<h2>星际冒险</h2>
|
||||
<div class="card-meta">主角：小明船长 · 更新于 2025/01/12</div>
|
||||
</div>
|
||||
<div class="grid grid-2 section">
|
||||
<div class="card">
|
||||
<h3>主角设定</h3>
|
||||
<div class="callout">小明是来自地球的探险家，勇敢且好奇。</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>常驻角色</h3>
|
||||
<div class="callout">机器人小七、外星猫咪星星</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>世界观</h3>
|
||||
<div class="callout">星际学院、彩虹星云、飞船港湾</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>成就</h3>
|
||||
<div class="callout">克服恐惧 · 结交朋友 · 学会独立</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<button class="btn btn--secondary">编辑宇宙</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
64
.claude/specs/design/figma-html/theme-c/universes.html
Normal file
64
.claude/specs/design/figma-html/theme-c/universes.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>故事宇宙</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<div class="nav__left">
|
||||
<div class="nav__logo">
|
||||
<span class="nav__logo-badge"></span>
|
||||
DreamWeaver
|
||||
</div>
|
||||
<span class="badge">Web 原型</span>
|
||||
</div>
|
||||
<div class="nav__center">
|
||||
<a class="nav__item active" href="home.html">生成故事</a>
|
||||
<a class="nav__item" href="my-stories.html">我的故事</a>
|
||||
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
||||
<a class="nav__item" href="universes.html">故事宇宙</a>
|
||||
<a class="nav__item" href="push-settings.html">推送设置</a>
|
||||
<a class="nav__item" href="account-settings.html">账户设置</a>
|
||||
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
||||
</div>
|
||||
<div class="nav__right">
|
||||
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
||||
<div class="avatar">家</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="padding: 28px 0 60px;">
|
||||
<div class="toolbar section">
|
||||
<h2>故事宇宙</h2>
|
||||
<button class="btn btn--primary">新建宇宙</button>
|
||||
</div>
|
||||
<div class="grid grid-3 section">
|
||||
<div class="card">
|
||||
<div class="card-title">星际冒险</div>
|
||||
<div class="card-meta">主角：小明船长</div>
|
||||
<div class="chips section">
|
||||
<span class="chip">伙伴：机器人小七</span>
|
||||
<span class="chip">成就：3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">梦幻森林</div>
|
||||
<div class="card-meta">主角：森林守护者</div>
|
||||
<div class="chips section">
|
||||
<span class="chip">伙伴：魔法猫咪</span>
|
||||
<span class="chip">成就：1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card--flat">
|
||||
<div class="callout">空态示例：创建第一个宇宙</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user