inkreach-official-website/apps/website/plans/feature/nav-mega-menu-feature.md

Nav Mega Menu Feature Plan

概述

仿照 HiCustom 首页导航栏的"选品推荐"和"解决方案"，为 InkReach 官网添加带下拉菜单的导航项。

任务清单

• T1: 创建 useNavData.ts composable（含类型定义和 mock 数据）
• T2: 创建 NavMegaMenu.vue 选品推荐下拉组件
• T3: 创建 NavColumnMenu.vue 解决方案下拉组件
• T4: 改造 AppHeader.vue 集成新导航项（桌面端 hover + 移动端手风琴）
• T5: 更新 docs/references/structs.md

T1: useNavData.ts

创建 app/composables/useNavData.ts，定义接口类型和 mock 数据。

类型定义

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

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

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

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

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