# Nav Mega Menu Design Spec

## Overview

仿照 HiCustom 首页导航栏的"选品推荐"和"解决方案"两个导航项的下拉菜单设计，为 InkReach 官网添加类似功能。数据当前使用 mock 模拟，后续通过后台 API 获取。

## Data Structures

```typescript
interface RecommendCategory {
  id: number;
  title: string;
  active?: boolean;
  items: RecommendItem[];
}

interface RecommendItem {
  id: number;
  title: string;
  image: string;
  link: string;
}

interface SolutionColumn {
  id: number;
  title: string;
  links: SolutionLink[];
}

interface SolutionLink {
  id: number;
  title: string;
  link: string;
  tag?: 'hot' | 'new';
}

interface NavBanner {
  image: string;
  link: string;
  title: string;
}
```

## Mock Data

### 选品推荐

| 分类 | 内容项 |
|------|--------|
| 热卖推荐 | T恤、卫衣、手机壳、马克杯、帆布画、抱枕 |
| 新品上架 | 棒球帽、双肩包、鼠标垫、宠物围巾、积木拼图、表带 |
| 节日专区 | 圣诞系列、万圣节系列、情人节系列、春节系列 |

每个内容项包含 banner 占位图、标题、链接。

### 解决方案

| 列 | 链接项 |
|----|--------|
| 跨境电商 | Amazon 卖家方案、Temu 卖家方案、eBay 卖家方案、速卖通方案 |
| 独立站 | Shopify 方案、WooCommerce 方案、品牌出海方案 |
| 定制场景 | 礼品定制、宠物定制、二次元周边、婚庆定制、团体定制 |
| 服务支持 | 设计工具、供应链服务、一件代发、售后保障 |

右侧附带广告 banner。

## Component Architecture

```
app/components/
  AppHeader.vue
  nav/
    NavMegaMenu.vue
    NavColumnMenu.vue
app/composables/
  useNavData.ts
```

### AppHeader.vue (改造)

在现有导航中加入"选品推荐"和"解决方案"两个导航项，hover 时展示对应下拉面板。移动端在抽屉内用手风琴折叠样式展示。

### NavMegaMenu.vue

选品推荐下拉面板。桌面端：左侧分类列表 + 右侧卡片网格（2 列，每卡片含图片和标题）。hover 左侧分类时切换右侧内容。

### NavColumnMenu.vue

解决方案下拉面板。桌面端：多列链接分组 + 可选广告 banner。每列有标题和链接列表，链接可带 HOT/NEW 标签。

### useNavData.ts

导航数据管理 composable。当前返回 mock 数据，后续替换为 API 调用。暴露：

- `recommendCategories: Ref<RecommendCategory[]>`
- `solutionColumns: Ref<SolutionColumn[]>`
- `solutionBanner: Ref<NavBanner | null>`
- `activeRecommendIndex: Ref<number>`
- `setActiveRecommend(index: number): void`

## Interaction Behavior

### Desktop (>= 1024px)

- Hover 导航项展开下拉面板，鼠标离开关闭
- 选品推荐：hover 左侧分类项切换右侧内容区
- 解决方案：纯展示，点击链接跳转
- 下拉面板出现在导航栏下方，有过渡动画

### Mobile (< 1024px)

- 手风琴折叠样式，点击展开/收起
- 选品推荐：展开后显示分类标签切换
- 解决方案：展开后直接显示链接列表

## Visual Design

- 下拉面板：白色背景，圆角 0.5rem，阴影 `0 4px 25px rgba(179, 185, 191, 0.3)`
- 选品推荐面板宽度约 800px
- 解决方案面板宽度自适应列数（约 700px）
- 卡片 hover 时图片轻微放大（scale 1.05）
- 链接 hover 时变为主题色（#FF6800）
- HOT 标签：红色背景
- NEW 标签：绿色背景
- 面板展开/收起使用 opacity + translateY 过渡动画

## Implementation Tasks

- [ ] 创建 `useNavData.ts` composable（含 mock 数据和类型定义）
- [ ] 创建 `NavMegaMenu.vue` 选品推荐下拉组件
- [ ] 创建 `NavColumnMenu.vue` 解决方案下拉组件
- [ ] 改造 `AppHeader.vue` 集成新导航项
- [ ] 更新 `docs/references/structs.md`