e9d7f8832a
- 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
640 lines
16 KiB
Markdown
640 lines
16 KiB
Markdown
# DreamWeaver 落地页重构规范文档
|
||
|
||
## 1. 项目概述
|
||
|
||
### 1.1 目标
|
||
将当前简单的 Home.vue 落地页重构为专业级 SaaS 产品落地页，提升品牌形象和用户转化率。
|
||
|
||
### 1.2 当前状态
|
||
- 文件位置: `frontend/src/views/Home.vue`
|
||
- 问题: 页面结构单一，仅有一个故事生成表单，缺少产品介绍、功能展示、用户信任背书等专业落地页必备元素
|
||
|
||
### 1.3 技术栈
|
||
- Vue 3 + Composition API + TypeScript
|
||
- Tailwind CSS
|
||
- vue-i18n 国际化
|
||
- @heroicons/vue/24/outline 图标库
|
||
- 现有 UI 组件: BaseButton, BaseCard, BaseInput, BaseSelect, BaseTextarea
|
||
|
||
---
|
||
|
||
## 2. 页面结构规范
|
||
|
||
页面从上到下包含 8 个主要区块（Section），每个区块独立且可复用。
|
||
|
||
### 2.1 Hero Section（主视觉区）
|
||
|
||
**布局**: 两栏布局，左 60% 右 40%，移动端堆叠
|
||
|
||
**左侧内容**:
|
||
```
|
||
- 主标题: 使用 gradient-text 样式
|
||
- 第一行: "为孩子编织" (普通渐变)
|
||
- 第二行: "专属的童话梦境" (加粗强调)
|
||
- 副标题: 灰色次要文字，说明产品价值
|
||
- CTA 按钮组:
|
||
- 主按钮: "开始创作" (btn-magic 样式，点击打开创作模态框)
|
||
- 次按钮: "了解更多" (outline 样式，滚动到 Features 区块)
|
||
```
|
||
|
||
**右侧内容**:
|
||
```
|
||
- 故事卡片预览 (模拟产品效果)
|
||
- 卡片使用 glass 样式 + 阴影
|
||
- 顶部: 模拟封面图区域 (渐变色块 + 星星图标)
|
||
- 标题: "小兔子的勇气冒险"
|
||
- 内容预览: 故事开头文字 (截断显示)
|
||
- 底部: 模拟的播放按钮和图片生成按钮图标
|
||
- 添加浮动动画 (animate-float)
|
||
```
|
||
|
||
**背景装饰**:
|
||
```
|
||
- 左上角: 浮动星星 SVG (absolute, opacity-20)
|
||
- 右下角: 浮动云朵 SVG (absolute, opacity-15)
|
||
- 使用 CSS animation 实现缓慢浮动效果
|
||
```
|
||
|
||
**i18n 键**:
|
||
- `home.heroTitle`, `home.heroTitleHighlight`
|
||
- `home.heroSubtitle`
|
||
- `home.heroCta`, `home.heroCtaSecondary`
|
||
- `home.heroPreviewTitle`, `home.heroPreviewText`
|
||
|
||
---
|
||
|
||
### 2.2 Trust Bar（信任背书区）
|
||
|
||
**布局**: 水平三等分，居中对齐
|
||
|
||
**内容**:
|
||
```
|
||
| 10,000+ 故事已创作 | 5,000+ 家庭信赖 | 98% 满意度 |
|
||
```
|
||
|
||
**样式**:
|
||
```
|
||
- 背景: 浅紫色渐变 (from-purple-50 to-pink-50)
|
||
- 数字: 大号加粗，渐变色
|
||
- 文字: 灰色小号
|
||
- 分隔: 使用竖线或间距分隔
|
||
```
|
||
|
||
**交互**:
|
||
```
|
||
- 数字使用计数动画 (从 0 递增到目标值)
|
||
- 使用 IntersectionObserver 触发动画
|
||
- 动画时长: 2 秒，使用 easeOutQuart 缓动
|
||
```
|
||
|
||
**实现要点**:
|
||
```typescript
|
||
// 计数动画函数
|
||
function animateCount(target: number, duration: number, callback: (value: number) => void) {
|
||
const start = performance.now()
|
||
const step = (timestamp: number) => {
|
||
const progress = Math.min((timestamp - start) / duration, 1)
|
||
const eased = 1 - Math.pow(1 - progress, 4) // easeOutQuart
|
||
callback(Math.floor(eased * target))
|
||
if (progress < 1) requestAnimationFrame(step)
|
||
}
|
||
requestAnimationFrame(step)
|
||
}
|
||
```
|
||
|
||
**i18n 键**:
|
||
- `home.trustStoriesCreated`, `home.trustFamilies`, `home.trustSatisfaction`
|
||
|
||
---
|
||
|
||
### 2.3 Features Section（功能特性区）
|
||
|
||
**布局**: 标题 + 副标题 + 6 卡片网格 (3x2，移动端 1 列)
|
||
|
||
**标题区**:
|
||
```
|
||
- 主标题: "为什么选择梦语织机"
|
||
- 副标题: "我们用 AI 技术和教育理念，为每个孩子打造独一无二的成长故事"
|
||
```
|
||
|
||
**6 个功能卡片**:
|
||
|
||
| # | 图标 | 标题 | 描述 |
|
||
|---|------|------|------|
|
||
| 1 | SparklesIcon | AI 智能创作 | 输入几个关键词，AI 即刻为您的孩子创作一个充满想象力的原创故事 |
|
||
| 2 | UserIcon | 个性化记忆 | 系统记住孩子的喜好和成长轨迹，故事越来越懂 TA |
|
||
| 3 | PhotoIcon | 精美 AI 插画 | 为每个故事自动生成独特的精美封面插画，让故事更加生动 |
|
||
| 4 | SpeakerWaveIcon | 温暖语音朗读 | 专业级 AI 配音，温暖的声音陪伴孩子进入甜美梦乡 |
|
||
| 5 | AcademicCapIcon | 教育主题融入 | 勇气、友谊、分享、诚实...在故事中自然传递正向价值观 |
|
||
| 6 | GlobeAltIcon | 故事宇宙 | 创建专属世界观，让喜爱的角色在不同故事中持续冒险 |
|
||
|
||
**卡片样式**:
|
||
```
|
||
- 使用 BaseCard 组件，添加 hover 效果
|
||
- 图标: 48x48，紫色渐变背景圆形容器
|
||
- 标题: font-bold text-gray-800
|
||
- 描述: text-gray-600 text-sm
|
||
- hover: 上移 + 阴影增强
|
||
```
|
||
|
||
**滚动动画**:
|
||
```
|
||
- 使用 IntersectionObserver
|
||
- 卡片依次渐入 (stagger 100ms)
|
||
- 动画: opacity 0->1, translateY 20px->0
|
||
```
|
||
|
||
**i18n 键**:
|
||
- `home.featuresTitle`, `home.featuresSubtitle`
|
||
- `home.feature1Title` ~ `home.feature6Title`
|
||
- `home.feature1Desc` ~ `home.feature6Desc`
|
||
|
||
---
|
||
|
||
### 2.4 How It Works Section（使用流程区）
|
||
|
||
**布局**: 标题 + 4 步骤水平排列（移动端垂直）
|
||
|
||
**步骤内容**:
|
||
|
||
| 步骤 | 图标 | 标题 | 描述 |
|
||
|------|------|------|------|
|
||
| 1 | LightBulbIcon | 输入灵感 | 输入关键词、角色或简单想法 |
|
||
| 2 | CpuChipIcon | AI 创作 | AI 根据输入生成专属故事 |
|
||
| 3 | PaintBrushIcon | 丰富内容 | 自动生成精美插画和语音 |
|
||
| 4 | ShareIcon | 分享故事 | 保存收藏，随时为孩子讲述 |
|
||
|
||
**样式**:
|
||
```
|
||
- 步骤编号: 圆形渐变背景，白色数字
|
||
- 步骤之间: 虚线连接 (桌面端水平，移动端垂直)
|
||
- 图标: 在编号下方，较大尺寸
|
||
- 文字: 居中对齐
|
||
```
|
||
|
||
**连接线实现**:
|
||
```css
|
||
/* 桌面端水平连接线 */
|
||
.step-connector {
|
||
position: absolute;
|
||
top: 24px;
|
||
left: 100%;
|
||
width: 100%;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, #c084fc, #f472b6);
|
||
opacity: 0.3;
|
||
}
|
||
|
||
/* 移动端隐藏水平线，显示垂直线 */
|
||
@media (max-width: 768px) {
|
||
.step-connector { display: none; }
|
||
.step-connector-vertical { display: block; }
|
||
}
|
||
```
|
||
|
||
**i18n 键**:
|
||
- `home.howItWorksTitle`, `home.howItWorksSubtitle`
|
||
- `home.step1Title` ~ `home.step4Title`
|
||
- `home.step1Desc` ~ `home.step4Desc`
|
||
|
||
---
|
||
|
||
### 2.5 Product Showcase Section（产品展示区）
|
||
|
||
**布局**: 两栏，左侧功能列表，右侧模拟界面
|
||
|
||
**左侧内容**:
|
||
```
|
||
- 小标题: "专为家长设计"
|
||
- 大标题: "简单易用，功能强大"
|
||
- 功能列表 (带勾选图标):
|
||
✓ 直观的创作界面，几秒即可生成故事
|
||
✓ 多孩子档案管理，每个孩子独立记忆
|
||
✓ 故事历史永久保存，随时回顾美好时光
|
||
✓ 支持中英双语，培养语言能力
|
||
```
|
||
|
||
**右侧内容**:
|
||
```
|
||
- 模拟的产品界面截图 (CSS 绘制)
|
||
- 包含:
|
||
- 模拟浏览器顶栏 (三个圆点)
|
||
- 模拟导航栏
|
||
- 模拟故事卡片列表
|
||
- 使用 glass 样式 + 阴影
|
||
- 轻微倾斜 (transform: perspective + rotateY)
|
||
```
|
||
|
||
**模拟界面 CSS**:
|
||
```css
|
||
.mock-browser {
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||
transform: perspective(1000px) rotateY(-5deg);
|
||
}
|
||
|
||
.mock-browser-bar {
|
||
height: 32px;
|
||
background: #f1f5f9;
|
||
border-radius: 12px 12px 0 0;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 12px;
|
||
gap: 6px;
|
||
}
|
||
|
||
.mock-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
}
|
||
.mock-dot-red { background: #ef4444; }
|
||
.mock-dot-yellow { background: #eab308; }
|
||
.mock-dot-green { background: #22c55e; }
|
||
```
|
||
|
||
**i18n 键**:
|
||
- `home.showcaseTitle`, `home.showcaseSubtitle`
|
||
- `home.showcaseFeature1` ~ `home.showcaseFeature4`
|
||
|
||
---
|
||
|
||
### 2.6 Testimonials Section（用户评价区）
|
||
|
||
**布局**: 标题 + 3 评价卡片水平排列
|
||
|
||
**评价内容**:
|
||
|
||
| # | 评价 | 用户名 | 身份 |
|
||
|---|------|--------|------|
|
||
| 1 | "每晚睡前，女儿都要听一个新故事。梦语织机让我不再为编故事发愁，而且故事质量真的很高！" | 小雨妈妈 | 5岁女孩家长 |
|
||
| 2 | "最惊喜的是个性化功能，系统记住了儿子喜欢恐龙和太空，每个故事都能戳中他的兴趣点。" | 航航爸爸 | 6岁男孩家长 |
|
||
| 3 | "语音朗读功能太棒了！出差时也能远程给孩子讲故事，声音温暖自然，孩子很喜欢。" | 朵朵妈妈 | 4岁女孩家长 |
|
||
|
||
**卡片样式**:
|
||
```
|
||
- 背景: glass 样式
|
||
- 顶部: 引号图标 (大号，低透明度)
|
||
- 评价文字: 斜体，灰色
|
||
- 底部: 头像 + 用户名 + 身份
|
||
- 头像: 渐变色圆形 + 首字母
|
||
```
|
||
|
||
**头像生成**:
|
||
```typescript
|
||
// 根据名字生成渐变色头像
|
||
function getAvatarStyle(name: string) {
|
||
const colors = [
|
||
['#667eea', '#764ba2'],
|
||
['#f093fb', '#f5576c'],
|
||
['#4facfe', '#00f2fe'],
|
||
]
|
||
const index = name.charCodeAt(0) % colors.length
|
||
return {
|
||
background: `linear-gradient(135deg, ${colors[index][0]}, ${colors[index][1]})`,
|
||
}
|
||
}
|
||
```
|
||
|
||
**i18n 键**:
|
||
- `home.testimonialsTitle`, `home.testimonialsSubtitle`
|
||
- `home.testimonial1Text` ~ `home.testimonial3Text`
|
||
- `home.testimonial1Name` ~ `home.testimonial3Name`
|
||
- `home.testimonial1Role` ~ `home.testimonial3Role`
|
||
|
||
---
|
||
|
||
### 2.7 FAQ Section（常见问题区）
|
||
|
||
**布局**: 标题 + 手风琴问答列表
|
||
|
||
**问答内容**:
|
||
|
||
| # | 问题 | 答案 |
|
||
|---|------|------|
|
||
| 1 | 梦语织机适合多大的孩子？ | 我们专为 3-8 岁儿童设计，故事内容、语言难度和教育主题都针对这个年龄段优化。 |
|
||
| 2 | 生成的故事安全吗？ | 绝对安全。所有故事都经过内容过滤，确保适合儿童阅读，传递积极正向的价值观。 |
|
||
| 3 | 可以自定义故事角色吗？ | 可以！您可以在孩子档案中设置喜好，或在创作时指定角色名称、特点，AI 会将其融入故事。 |
|
||
| 4 | 故事会重复吗？ | 不会。每个故事都是 AI 实时原创生成的，即使使用相同关键词，也会产生不同的故事。 |
|
||
| 5 | 支持哪些语言？ | 目前支持中文和英文，您可以随时切换界面语言，故事也会相应调整。 |
|
||
|
||
**手风琴实现**:
|
||
```typescript
|
||
const expandedFaq = ref<number | null>(null)
|
||
|
||
function toggleFaq(index: number) {
|
||
expandedFaq.value = expandedFaq.value === index ? null : index
|
||
}
|
||
```
|
||
|
||
**样式**:
|
||
```
|
||
- 问题行: 可点击，右侧箭头图标
|
||
- 展开时: 箭头旋转 180°，答案滑入显示
|
||
- 使用 Transition 组件实现平滑动画
|
||
```
|
||
|
||
**i18n 键**:
|
||
- `home.faqTitle`
|
||
- `home.faq1Question` ~ `home.faq5Question`
|
||
- `home.faq1Answer` ~ `home.faq5Answer`
|
||
|
||
---
|
||
|
||
### 2.8 Final CTA Section（底部转化区）
|
||
|
||
**布局**: 居中，渐变背景
|
||
|
||
**内容**:
|
||
```
|
||
- 大标题: "准备好为孩子创造魔法了吗？"
|
||
- 副标题: "立即开始，让 AI 为您的孩子编织独一无二的成长故事"
|
||
- CTA 按钮: "免费开始创作" (大号，btn-magic)
|
||
- 小字: "无需信用卡，立即体验"
|
||
```
|
||
|
||
**背景**:
|
||
```css
|
||
.cta-section {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 装饰性圆形 */
|
||
.cta-section::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 400px;
|
||
height: 400px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 50%;
|
||
top: -200px;
|
||
right: -100px;
|
||
}
|
||
```
|
||
|
||
**i18n 键**:
|
||
- `home.ctaTitle`, `home.ctaSubtitle`
|
||
- `home.ctaButton`, `home.ctaNote`
|
||
|
||
---
|
||
|
||
## 3. 创作模态框规范
|
||
|
||
### 3.1 触发方式
|
||
- 点击 Hero 区 "开始创作" 按钮
|
||
- 点击 Final CTA 区按钮
|
||
- 已登录用户直接打开模态框
|
||
- 未登录用户跳转登录流程
|
||
|
||
### 3.2 模态框结构
|
||
```
|
||
- 遮罩层: 半透明黑色背景
|
||
- 模态框: 居中，最大宽度 600px
|
||
- 关闭按钮: 右上角 X 图标
|
||
- 内容: 复用原有表单逻辑
|
||
```
|
||
|
||
### 3.3 表单内容（保留原有逻辑）
|
||
```
|
||
1. 输入类型切换: 关键词创作 / 故事润色
|
||
2. 孩子档案选择 (可选)
|
||
3. 故事宇宙选择 (可选，依赖档案)
|
||
4. 输入区域 (关键词或故事文本)
|
||
5. 教育主题选择 (可选)
|
||
6. 提交按钮
|
||
```
|
||
|
||
### 3.4 状态管理
|
||
```typescript
|
||
const showCreateModal = ref(false)
|
||
|
||
function openCreateModal() {
|
||
if (!userStore.user) {
|
||
// 跳转登录
|
||
return
|
||
}
|
||
showCreateModal.value = true
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 4. 动画规范
|
||
|
||
### 4.1 滚动渐入动画
|
||
|
||
**实现方式**: 使用 IntersectionObserver + CSS Transition
|
||
|
||
```typescript
|
||
// composables/useScrollAnimation.ts
|
||
export function useScrollAnimation() {
|
||
const observedElements = ref<Set<Element>>(new Set())
|
||
|
||
onMounted(() => {
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('animate-in')
|
||
observer.unobserve(entry.target)
|
||
}
|
||
})
|
||
},
|
||
{ threshold: 0.1 }
|
||
)
|
||
|
||
document.querySelectorAll('.scroll-animate').forEach((el) => {
|
||
observer.observe(el)
|
||
})
|
||
})
|
||
}
|
||
```
|
||
|
||
**CSS**:
|
||
```css
|
||
.scroll-animate {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
|
||
.scroll-animate.animate-in {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 延迟类 */
|
||
.delay-100 { transition-delay: 100ms; }
|
||
.delay-200 { transition-delay: 200ms; }
|
||
.delay-300 { transition-delay: 300ms; }
|
||
```
|
||
|
||
### 4.2 浮动动画
|
||
|
||
```css
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-10px); }
|
||
}
|
||
|
||
.animate-float {
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
|
||
.animate-float-slow {
|
||
animation: float 5s ease-in-out infinite;
|
||
}
|
||
```
|
||
|
||
### 4.3 数字计数动画
|
||
|
||
见 2.2 节 Trust Bar 实现要点。
|
||
|
||
---
|
||
|
||
## 5. 响应式规范
|
||
|
||
### 5.1 断点定义
|
||
```
|
||
- sm: 640px
|
||
- md: 768px
|
||
- lg: 1024px
|
||
- xl: 1280px
|
||
```
|
||
|
||
### 5.2 各区块响应式行为
|
||
|
||
| 区块 | 桌面端 | 平板端 | 移动端 |
|
||
|------|--------|--------|--------|
|
||
| Hero | 两栏 60/40 | 两栏 50/50 | 单栏堆叠 |
|
||
| Trust Bar | 水平三等分 | 水平三等分 | 垂直堆叠 |
|
||
| Features | 3x2 网格 | 2x3 网格 | 单列 |
|
||
| How It Works | 水平 4 步 | 水平 4 步 | 垂直 4 步 |
|
||
| Showcase | 两栏 | 两栏 | 单栏堆叠 |
|
||
| Testimonials | 水平 3 卡 | 水平 3 卡 | 单列滚动 |
|
||
| FAQ | 单列 | 单列 | 单列 |
|
||
| Final CTA | 居中 | 居中 | 居中 |
|
||
|
||
---
|
||
|
||
## 6. 暗色模式规范
|
||
|
||
### 6.1 颜色映射
|
||
|
||
| 元素 | 亮色模式 | 暗色模式 |
|
||
|------|----------|----------|
|
||
| 背景 | 渐变浅色 | 渐变深色 |
|
||
| 卡片背景 | rgba(255,255,255,0.7) | rgba(15,23,42,0.6) |
|
||
| 主文字 | gray-800 | gray-100 |
|
||
| 次文字 | gray-600 | gray-400 |
|
||
| 边框 | gray-200 | gray-700 |
|
||
|
||
### 6.2 实现方式
|
||
使用 Tailwind dark: 前缀，配合现有 .dark 类切换。
|
||
|
||
---
|
||
|
||
## 7. 验收标准
|
||
|
||
### 7.1 功能验收
|
||
- [ ] Hero 区正确显示，CTA 按钮可点击
|
||
- [ ] Trust Bar 数字动画正常触发
|
||
- [ ] Features 6 个卡片正确显示
|
||
- [ ] How It Works 4 步骤正确显示，连接线可见
|
||
- [ ] Product Showcase 模拟界面正确渲染
|
||
- [ ] Testimonials 3 个评价卡片正确显示
|
||
- [ ] FAQ 手风琴展开/收起正常
|
||
- [ ] Final CTA 按钮可点击
|
||
- [ ] 创作模态框正常打开/关闭
|
||
- [ ] 故事生成功能正常（保留原有逻辑）
|
||
|
||
### 7.2 样式验收
|
||
- [ ] 所有文案使用 i18n，中英文切换正常
|
||
- [ ] 响应式布局在 320px ~ 1920px 宽度下正常
|
||
- [ ] 暗色模式下所有元素可读
|
||
- [ ] 滚动动画流畅，无卡顿
|
||
- [ ] 所有图标正确显示
|
||
|
||
### 7.3 性能验收
|
||
- [ ] 首屏加载时间 < 3s
|
||
- [ ] Lighthouse Performance 分数 > 80
|
||
- [ ] 无控制台错误
|
||
|
||
---
|
||
|
||
## 8. 文件变更清单
|
||
|
||
| 文件 | 操作 | 说明 |
|
||
|------|------|------|
|
||
| `frontend/src/views/Home.vue` | 重写 | 完整重构落地页 |
|
||
| `frontend/src/locales/zh.json` | 已更新 | 新增落地页文案 |
|
||
| `frontend/src/locales/en.json` | 已更新 | 新增落地页文案 |
|
||
| `frontend/src/style.css` | 修改 | 新增动画和样式类 |
|
||
| `frontend/src/composables/useScrollAnimation.ts` | 新建 | 滚动动画 composable |
|
||
|
||
---
|
||
|
||
## 9. 依赖说明
|
||
|
||
### 9.1 现有依赖（无需新增）
|
||
- Vue 3
|
||
- vue-router
|
||
- vue-i18n
|
||
- Pinia
|
||
- Tailwind CSS
|
||
- @heroicons/vue
|
||
|
||
### 9.2 需要使用的图标
|
||
```typescript
|
||
import {
|
||
SparklesIcon,
|
||
UserIcon,
|
||
PhotoIcon,
|
||
SpeakerWaveIcon,
|
||
AcademicCapIcon,
|
||
GlobeAltIcon,
|
||
LightBulbIcon,
|
||
CpuChipIcon,
|
||
PaintBrushIcon,
|
||
ShareIcon,
|
||
CheckIcon,
|
||
ChevronDownIcon,
|
||
XMarkIcon,
|
||
ArrowRightIcon,
|
||
} from '@heroicons/vue/24/outline'
|
||
```
|
||
|
||
---
|
||
|
||
## 10. 实现顺序建议
|
||
|
||
1. **Phase 1**: 基础结构
|
||
- 创建页面骨架（8 个 section）
|
||
- 实现 Hero 区（不含动画）
|
||
- 实现创作模态框
|
||
|
||
2. **Phase 2**: 内容区块
|
||
- Trust Bar + 计数动画
|
||
- Features 卡片
|
||
- How It Works 步骤
|
||
|
||
3. **Phase 3**: 展示区块
|
||
- Product Showcase
|
||
- Testimonials
|
||
- FAQ 手风琴
|
||
|
||
4. **Phase 4**: 收尾
|
||
- Final CTA
|
||
- 滚动动画
|
||
- 响应式调整
|
||
- 暗色模式适配
|
||
|
||
---
|
||
|
||
*文档版本: 1.0*
|
||
*创建时间: 2025-12-30*
|
||
*作者: Claude Code*
|