fix: convert apps/website from submodule to regular directory

2026-07-16 01:42:45 +08:00
parent f12ae12ad3
commit 9595030625
341 changed files with 50808 additions and 1 deletions
@@ -0,0 +1,133 @@
+# 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`