Files

T

yeuimu 6c61a4e871 feat(deploy): production deployment setup and fixes

- 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

2026-08-26 14:23:09 +08:00

6.5 KiB

Raw Blame History

响应式自适应布局

需求描述

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

断点定义

断点	范围	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 动画
统一容器宽度为响应式

任务列表

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

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

6.5 KiB Raw Blame History Unescape Escape