yeuimu
6c61a4e871
- 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
134 lines
3.8 KiB
Markdown
134 lines
3.8 KiB
Markdown
# 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`
|