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,146 @@
+# 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
+
+添加新组件到项目结构文档。