dreamweaver/.claude/specs/design/LANDING-PAGE-REFACTOR-SPEC.md

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 缓动

实现要点:

// 计数动画函数
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	分享故事	保存收藏，随时为孩子讲述

样式:

- 步骤编号: 圆形渐变背景，白色数字
- 步骤之间: 虚线连接 (桌面端水平，移动端垂直)
- 图标: 在编号下方，较大尺寸
- 文字: 居中对齐

连接线实现:

/* 桌面端水平连接线 */
.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:

.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 样式
- 顶部: 引号图标 (大号，低透明度)
- 评价文字: 斜体，灰色
- 底部: 头像 + 用户名 + 身份
- 头像: 渐变色圆形 + 首字母

头像生成:

// 根据名字生成渐变色头像
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	支持哪些语言？	目前支持中文和英文，您可以随时切换界面语言，故事也会相应调整。

手风琴实现:

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)
- 小字: "无需信用卡，立即体验"

背景:

.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 状态管理

const showCreateModal = ref(false)

function openCreateModal() {
  if (!userStore.user) {
    // 跳转登录
    return
  }
  showCreateModal.value = true
}

---

4. 动画规范

4.1 滚动渐入动画

实现方式: 使用 IntersectionObserver + CSS Transition

// 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:

.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 浮动动画

@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 需要使用的图标

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