feat: add HA infrastructure, CI/CD pipeline, and Redis/Celery hardening

- Add docker-compose.ha.yml for PostgreSQL/Redis HA setup with Patroni and Sentinel - Add docker-compose.prod.yml for production deployment - Add GitHub Actions CI/CD workflow (build.yml) - Add install.cmd for Windows one-click setup - Harden Redis connection with retry logic and health checks - Add Celery HA config with Redis Sentinel support - Add HA operations runbook - Update README with deployment and architecture docs - Move landing page spec to .claude/specs/design/ - Update memory intelligence PRD
2026-02-28 14:57:02 +08:00
parent 9cdff18336
commit c82d408ea1
14 changed files with 1301 additions and 24 deletions
--- a/frontend/docs/landing-page-refactor-spec.md
+++ b/frontend/docs/landing-page-refactor-spec.md
@@ -1,639 +0,0 @@
-# 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*