147 lines
3.3 KiB
Markdown
147 lines
3.3 KiB
Markdown
# 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
|
|
|
|
添加新组件到项目结构文档。
|