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
This commit is contained in:
yeuimu
@@ -1,146 +1,146 @@
|
||||
# Nav Mega Menu Feature Plan
|
||||
|
||||
## 概述
|
||||
|
||||
仿照 HiCustom 首页导航栏的"选品推荐"和"解决方案"，为 InkReach 官网添加带下拉菜单的导航项。
|
||||
|
||||
## 任务清单
|
||||
|
||||
- [x] T1: 创建 `useNavData.ts` composable（含类型定义和 mock 数据）
|
||||
- [x] T2: 创建 `NavMegaMenu.vue` 选品推荐下拉组件
|
||||
- [x] T3: 创建 `NavColumnMenu.vue` 解决方案下拉组件
|
||||
- [x] T4: 改造 `AppHeader.vue` 集成新导航项（桌面端 hover + 移动端手风琴）
|
||||
- [x] T5: 更新 `docs/references/structs.md`
|
||||
|
||||
## T1: useNavData.ts
|
||||
|
||||
创建 `app/composables/useNavData.ts`，定义接口类型和 mock 数据。
|
||||
|
||||
### 类型定义
|
||||
|
||||
```typescript
|
||||
export interface RecommendItem {
|
||||
id: number;
|
||||
title: string;
|
||||
image: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
export interface RecommendCategory {
|
||||
id: number;
|
||||
title: string;
|
||||
items: RecommendItem[];
|
||||
}
|
||||
|
||||
export interface SolutionLink {
|
||||
id: number;
|
||||
title: string;
|
||||
link: string;
|
||||
tag?: 'hot' | 'new';
|
||||
}
|
||||
|
||||
export interface SolutionColumn {
|
||||
id: number;
|
||||
title: string;
|
||||
links: SolutionLink[];
|
||||
}
|
||||
|
||||
export interface NavBanner {
|
||||
image: string;
|
||||
link: string;
|
||||
title: string;
|
||||
}
|
||||
```
|
||||
|
||||
### Mock 数据
|
||||
|
||||
**选品推荐** 3 个分类，每类 4-6 项。**解决方案** 4 列，每列 3-5 个链接 + 1 个广告 banner。
|
||||
|
||||
### Composable API
|
||||
|
||||
```typescript
|
||||
export function useNavData() {
|
||||
const recommendCategories: Ref<RecommendCategory[]>;
|
||||
const solutionColumns: Ref<SolutionColumn[]>;
|
||||
const solutionBanner: Ref<NavBanner | null>;
|
||||
const activeRecommendIdx: Ref<number>;
|
||||
function setActiveRecommend(idx: number): void;
|
||||
return { recommendCategories, solutionColumns, solutionBanner, activeRecommendIdx, setActiveRecommend };
|
||||
}
|
||||
```
|
||||
|
||||
## T2: NavMegaMenu.vue
|
||||
|
||||
选品推荐下拉面板组件。
|
||||
|
||||
### Props
|
||||
|
||||
```typescript
|
||||
const props = defineProps<{
|
||||
categories: RecommendCategory[];
|
||||
activeIndex: number;
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:activeIndex': [index: number];
|
||||
}>();
|
||||
```
|
||||
|
||||
### 桌面端布局
|
||||
|
||||
- 绝对定位在导航项下方
|
||||
- 左侧：分类列表（200px 宽），hover 时高亮当前项
|
||||
- 右侧：卡片网格（2 列），每卡片含 360x120 图片 + 标题
|
||||
- 卡片 hover 时图片 scale(1.05)
|
||||
|
||||
### 移动端布局
|
||||
|
||||
- 不使用此组件，在 AppHeader 抽屉中手风琴展开
|
||||
|
||||
## T3: NavColumnMenu.vue
|
||||
|
||||
解决方案下拉面板组件。
|
||||
|
||||
### Props
|
||||
|
||||
```typescript
|
||||
const props = defineProps<{
|
||||
columns: SolutionColumn[];
|
||||
banner: NavBanner | null;
|
||||
visible: boolean;
|
||||
}>();
|
||||
```
|
||||
|
||||
### 桌面端布局
|
||||
|
||||
- 绝对定位在导航项下方
|
||||
- 多列布局，每列有标题 + 链接列表
|
||||
- 链接可带 HOT（红）/ NEW（绿）标签
|
||||
- 右侧可选广告 banner 图片
|
||||
|
||||
### 移动端布局
|
||||
|
||||
- 不使用此组件，在 AppHeader 抽屉中手风琴展开
|
||||
|
||||
## T4: AppHeader.vue 改造
|
||||
|
||||
在现有导航中插入"选品推荐"和"解决方案"两个导航项。
|
||||
|
||||
### 桌面端改动
|
||||
|
||||
- 在"产品中心"和"在线设计"之间/之后加入两个导航项
|
||||
- 每个导航项带下拉箭头图标
|
||||
- 用 `@mouseenter` / `@mouseleave` 控制下拉面板显隐
|
||||
- 下拉面板使用 `Transition` 组件包裹，opacity + translateY 动画
|
||||
|
||||
### 移动端改动
|
||||
|
||||
- 在抽屉导航中加入两个手风琴项
|
||||
- 点击展开/收起子内容
|
||||
- 选品推荐：分类标签 + 卡片列表
|
||||
- 解决方案：链接列表
|
||||
|
||||
## T5: 更新 structs.md
|
||||
|
||||
添加新组件到项目结构文档。
|
||||
# Nav Mega Menu Feature Plan
|
||||
|
||||
## 概述
|
||||
|
||||
仿照 HiCustom 首页导航栏的"选品推荐"和"解决方案"，为 InkReach 官网添加带下拉菜单的导航项。
|
||||
|
||||
## 任务清单
|
||||
|
||||
- [x] T1: 创建 `useNavData.ts` composable（含类型定义和 mock 数据）
|
||||
- [x] T2: 创建 `NavMegaMenu.vue` 选品推荐下拉组件
|
||||
- [x] T3: 创建 `NavColumnMenu.vue` 解决方案下拉组件
|
||||
- [x] T4: 改造 `AppHeader.vue` 集成新导航项（桌面端 hover + 移动端手风琴）
|
||||
- [x] T5: 更新 `docs/references/structs.md`
|
||||
|
||||
## T1: useNavData.ts
|
||||
|
||||
创建 `app/composables/useNavData.ts`，定义接口类型和 mock 数据。
|
||||
|
||||
### 类型定义
|
||||
|
||||
```typescript
|
||||
export interface RecommendItem {
|
||||
id: number;
|
||||
title: string;
|
||||
image: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
export interface RecommendCategory {
|
||||
id: number;
|
||||
title: string;
|
||||
items: RecommendItem[];
|
||||
}
|
||||
|
||||
export interface SolutionLink {
|
||||
id: number;
|
||||
title: string;
|
||||
link: string;
|
||||
tag?: 'hot' | 'new';
|
||||
}
|
||||
|
||||
export interface SolutionColumn {
|
||||
id: number;
|
||||
title: string;
|
||||
links: SolutionLink[];
|
||||
}
|
||||
|
||||
export interface NavBanner {
|
||||
image: string;
|
||||
link: string;
|
||||
title: string;
|
||||
}
|
||||
```
|
||||
|
||||
### Mock 数据
|
||||
|
||||
**选品推荐** 3 个分类，每类 4-6 项。**解决方案** 4 列，每列 3-5 个链接 + 1 个广告 banner。
|
||||
|
||||
### Composable API
|
||||
|
||||
```typescript
|
||||
export function useNavData() {
|
||||
const recommendCategories: Ref<RecommendCategory[]>;
|
||||
const solutionColumns: Ref<SolutionColumn[]>;
|
||||
const solutionBanner: Ref<NavBanner | null>;
|
||||
const activeRecommendIdx: Ref<number>;
|
||||
function setActiveRecommend(idx: number): void;
|
||||
return { recommendCategories, solutionColumns, solutionBanner, activeRecommendIdx, setActiveRecommend };
|
||||
}
|
||||
```
|
||||
|
||||
## T2: NavMegaMenu.vue
|
||||
|
||||
选品推荐下拉面板组件。
|
||||
|
||||
### Props
|
||||
|
||||
```typescript
|
||||
const props = defineProps<{
|
||||
categories: RecommendCategory[];
|
||||
activeIndex: number;
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:activeIndex': [index: number];
|
||||
}>();
|
||||
```
|
||||
|
||||
### 桌面端布局
|
||||
|
||||
- 绝对定位在导航项下方
|
||||
- 左侧：分类列表（200px 宽），hover 时高亮当前项
|
||||
- 右侧：卡片网格（2 列），每卡片含 360x120 图片 + 标题
|
||||
- 卡片 hover 时图片 scale(1.05)
|
||||
|
||||
### 移动端布局
|
||||
|
||||
- 不使用此组件，在 AppHeader 抽屉中手风琴展开
|
||||
|
||||
## T3: NavColumnMenu.vue
|
||||
|
||||
解决方案下拉面板组件。
|
||||
|
||||
### Props
|
||||
|
||||
```typescript
|
||||
const props = defineProps<{
|
||||
columns: SolutionColumn[];
|
||||
banner: NavBanner | null;
|
||||
visible: boolean;
|
||||
}>();
|
||||
```
|
||||
|
||||
### 桌面端布局
|
||||
|
||||
- 绝对定位在导航项下方
|
||||
- 多列布局，每列有标题 + 链接列表
|
||||
- 链接可带 HOT（红）/ NEW（绿）标签
|
||||
- 右侧可选广告 banner 图片
|
||||
|
||||
### 移动端布局
|
||||
|
||||
- 不使用此组件，在 AppHeader 抽屉中手风琴展开
|
||||
|
||||
## T4: AppHeader.vue 改造
|
||||
|
||||
在现有导航中插入"选品推荐"和"解决方案"两个导航项。
|
||||
|
||||
### 桌面端改动
|
||||
|
||||
- 在"产品中心"和"在线设计"之间/之后加入两个导航项
|
||||
- 每个导航项带下拉箭头图标
|
||||
- 用 `@mouseenter` / `@mouseleave` 控制下拉面板显隐
|
||||
- 下拉面板使用 `Transition` 组件包裹，opacity + translateY 动画
|
||||
|
||||
### 移动端改动
|
||||
|
||||
- 在抽屉导航中加入两个手风琴项
|
||||
- 点击展开/收起子内容
|
||||
- 选品推荐：分类标签 + 卡片列表
|
||||
- 解决方案：链接列表
|
||||
|
||||
## T5: 更新 structs.md
|
||||
|
||||
添加新组件到项目结构文档。
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,201 +1,201 @@
|
||||
# 响应式自适应布局
|
||||
|
||||
## 需求描述
|
||||
|
||||
当前首页已按设计稿完成桌面端还原，但大部分区域使用固定宽高，在平板和移动端显示异常。需要实现从大到小屏幕的三断点自适应布局。
|
||||
|
||||
## 断点定义
|
||||
|
||||
| 断点 | 范围 | 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
|
||||
|
||||
记录拆分后的项目目录结构和组件功能描述。
|
||||
# 响应式自适应布局
|
||||
|
||||
## 需求描述
|
||||
|
||||
当前首页已按设计稿完成桌面端还原，但大部分区域使用固定宽高，在平板和移动端显示异常。需要实现从大到小屏幕的三断点自适应布局。
|
||||
|
||||
## 断点定义
|
||||
|
||||
| 断点 | 范围 | 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
|
||||
|
||||
记录拆分后的项目目录结构和组件功能描述。
|
||||
|
||||
Reference in New Issue
Block a user