inkreach-official-website/apps/website/docs/superpowers/specs/2026-06-02-nav-mega-menu-design.md at d20a933e340eddca9da298c2f4e6f1d7f74ca4e1

Files

T

yeuimu 6c61a4e871 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

2026-08-26 14:23:09 +08:00

3.8 KiB

Raw Blame History

Overview

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

Data Structures

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

3.8 KiB Raw Blame History Unescape Escape

Nav Mega Menu Design Spec