yeuimu
6c61a4e871
- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma binaryTargets for openssl 3.0 - nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal cron, http->https redirect - prisma: add origin_goods.delisted migration, sync missing schema (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz - api: CORS wildcard reflection, helmet CORP cross-origin, price backfill in persistProductDetail, categoryIcon ancestor fallback, mediaByColor per-color gallery in public goods detail - admin: /admin base path (vite + router) - import-data.mjs: udt_name casting, serial sequence advance fix
202 lines
6.5 KiB
Markdown
202 lines
6.5 KiB
Markdown
# 响应式自适应布局
|
||
|
||
## 需求描述
|
||
|
||
当前首页已按设计稿完成桌面端还原，但大部分区域使用固定宽高，在平板和移动端显示异常。需要实现从大到小屏幕的三断点自适应布局。
|
||
|
||
## 断点定义
|
||
|
||
| 断点 | 范围 | 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
|
||
|
||
记录拆分后的项目目录结构和组件功能描述。
|