# 响应式自适应布局

## 需求描述

当前首页已按设计稿完成桌面端还原，但大部分区域使用固定宽高，在平板和移动端显示异常。需要实现从大到小屏幕的三断点自适应布局。

## 断点定义

| 断点   | 范围            | Tailwind 前缀 |
| ------ | --------------- | ------------- |
| 移动端 | < 768px         | 默认（无前缀） |
| 平板   | 768px - 1023px  | `md:`         |
| 桌面   | >= 1024px       | `lg:`         |

## 设计决策

- **导航**：移动端使用汉堡菜单 + 侧边滑出面板
- **触摸交互**：4步流程、全球POD货盘、客户案例支持触摸滑动
- **组件拆分**：先拆分 `app.vue` 为独立组件，再逐个做响应式
- **字号系统**：桌面大号 → 平板中号 → 移动端小号

## 工作阶段

### 阶段一：组件拆分

将 `app.vue` 拆为以下组件：

| 组件名             | 区块         |
| ------------------ | ------------ |
| `AppHeader`        | 导航栏       |
| `HeroBanner`       | 主视觉       |
| `TrustSection`     | 信任背书     |
| `StepProcess`      | 4步流程      |
| `PodProducts`      | 全球POD货盘  |
| `FeatureCards`     | 功能特性     |
| `WhyInkReach`      | 为什么选我们 |
| `CompanyProfile`   | 公司简介     |
| `CustomerCases`    | 客户案例     |
| `CtaBanner`        | 行动号召     |
| `AppFooter`        | 页脚         |

### 阶段二：响应式适配

逐组件适配三断点布局。

### 阶段三：通用修复

- 修复缺失的 `pulse-animation` CSS 动画
- 统一容器宽度为响应式

## 任务列表

- [x] 1. 创建 develop 分支和 feature 分支
- [x] 2. 拆分 AppHeader 组件
- [x] 3. 拆分 HeroBanner 组件
- [x] 4. 拆分 TrustSection 组件
- [x] 5. 拆分 StepProcess 组件
- [x] 6. 拆分 PodProducts 组件
- [x] 7. 拆分 FeatureCards 组件
- [x] 8. 拆分 WhyInkReach 组件
- [x] 9. 拆分 CompanyProfile 组件
- [x] 10. 拆分 CustomerCases 组件
- [x] 11. 拆分 CtaBanner 组件
- [x] 12. 拆分 AppFooter 组件
- [x] 13. 重构 app.vue 为组件组合
- [x] 14. AppHeader 响应式（汉堡菜单 + 侧边滑出）
- [x] 15. HeroBanner 响应式
- [x] 16. TrustSection 响应式
- [x] 17. StepProcess 响应式（触摸滑动）
- [x] 18. PodProducts 响应式（触摸滑动）
- [x] 19. FeatureCards 响应式
- [x] 20. WhyInkReach 响应式
- [x] 21. CompanyProfile 响应式
- [x] 22. CustomerCases 响应式（触摸滑动）
- [x] 23. CtaBanner 响应式
- [x] 24. AppFooter 响应式
- [x] 25. 修复 pulse-animation + 通用样式
- [x] 26. 全页面三断点验证
- [x] 27. 更新 docs/references/structs.md

## 任务详情

### 1. 创建 develop 分支和 feature 分支

从 `main` 创建 `develop` 分支，再从 `develop` 创建 `feature/responsive-layout` 分支。

### 2. 拆分 AppHeader 组件

从 `app.vue` 提取导航栏部分为 `app/components/AppHeader.vue`，包含 logo、导航链接、登录和 CTA 按钮。

### 3. 拆分 HeroBanner 组件

提取主视觉区块为 `app/components/HeroBanner.vue`，包含标题、副标题、产品图片和 CTA。

### 4. 拆分 TrustSection 组件

提取信任背书区块为 `app/components/TrustSection.vue`，包含 4 个数据统计卡片。

### 5. 拆分 StepProcess 组件

提取 4 步流程为 `app/components/StepProcess.vue`，包含步骤选择器和图片预览。

### 6. 拆分 PodProducts 组件

提取全球 POD 货盘为 `app/components/PodProducts.vue`，包含国家 tab 和 5 列产品网格。

### 7. 拆分 FeatureCards 组件

提取功能特性为 `app/components/FeatureCards.vue`，包含 4 个带 hover 效果的特性卡片。

### 8. 拆分 WhyInkReach 组件

提取为什么选我们为 `app/components/WhyInkReach.vue`，包含 4 个理由卡片。

### 9. 拆分 CompanyProfile 组件

提取公司简介为 `app/components/CompanyProfile.vue`，包含 3 列文字和 4 个能力卡片。

### 10. 拆分 CustomerCases 组件

提取客户案例为 `app/components/CustomerCases.vue`，包含 marquee 滚动的案例卡片。

### 11. 拆分 CtaBanner 组件

提取行动号召为 `app/components/CtaBanner.vue`，包含 CTA 标题和按钮。

### 12. 拆分 AppFooter 组件

提取页脚为 `app/components/AppFooter.vue`，包含 4 列链接和版权信息。

### 13. 重构 app.vue 为组件组合

将 `app.vue` 简化为引入所有拆分组件的组合文件。

### 14. AppHeader 响应式（汉堡菜单 + 侧边滑出）

- 移动端：隐藏导航链接，显示汉堡图标
- 点击汉堡图标：从右侧滑出半透明遮罩 + 导航面板
- 平板：保持桌面导航或简化

### 15. HeroBanner 响应式

- 移动端：字号缩小（text-7xl → text-3xl），产品图竖向堆叠或隐藏
- 平板：中等字号，产品图适当缩小

### 16. TrustSection 响应式

- 移动端：2x2 网格布局，缩小卡片尺寸
- 平板：4 列但间距缩小

### 17. StepProcess 响应式（触摸滑动）

- 移动端：步骤选择器变为横向滚动标签，图片预览支持触摸滑动
- 平板：保持桌面布局但缩小尺寸

### 18. PodProducts 响应式（触摸滑动）

- 移动端：产品网格变为横向滚动列表，支持触摸滑动
- 平板：3 列网格

### 19. FeatureCards 响应式

- 移动端：2 列或堆叠布局
- 平板：保持 4 列但缩小卡片

### 20. WhyInkReach 响应式

- 移动端：2x2 网格
- 平板：4 列（已有 md:grid-cols-4）

### 21. CompanyProfile 响应式

- 移动端：文字单列，能力卡片 2 列
- 平板：完善现有响应式类

### 22. CustomerCases 响应式（触摸滑动）

- 移动端：取消 marquee 自动滚动，改为触摸滑动卡片列表
- 平板：保持 marquee 但缩小卡片

### 23. CtaBanner 响应式

- 移动端：缩小字号和内边距
- 平板：适度缩小

### 24. AppFooter 响应式

- 移动端：单列堆叠布局
- 平板：2x2 网格（已有 md:grid-cols-4）

### 25. 修复 pulse-animation + 通用样式

在 `tailwind.css` 的 `@theme` 中定义缺失的 `pulse-animation`，检查所有固定宽度改为响应式。

### 26. 全页面三断点验证

在浏览器中分别用移动端（375px）、平板（768px）、桌面（1440px）宽度验证每个区块的显示效果。

### 27. 更新 docs/references/structs.md

记录拆分后的项目目录结构和组件功能描述。