# 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

添加新组件到项目结构文档。