## 目标
- **技术栈**: Next.js + Tailwind CSS + 部署到 Vercel（Windows 10 + Yarn）
- **效果**: 参考 `https://www.mi.com/index.html` 的首页布局与交互（不抄内容，支持后续可替换数据）
- **要求**: 模块化组件、数据驱动（JSON/TS 类型）、良好 SEO、移动端适配

## 范围与产出
- **页面**: 首页（含顶部通栏、主导航、搜索、轮播 Banner、楼层商品区、运营位/服务区、页脚）
- **组件**: `TopBar`、`MainNav`、`SearchBar`、`BannerCarousel`、`CategoryMenu`、`ProductGrid`、`PromoSection`、`ServiceLinks`、`Footer`
- **数据**: `site/data/*.json` 与 `site/types.ts` 定义；组件以 props 驱动
- **部署**: Vercel 预览与生产环境，含环境变量与域名配置（可选）

## 架构设计
- **目录结构**（Next.js 15/app router 推荐）
  - `app/` 页面与布局（`layout.tsx`、`page.tsx`、`(home)/page.tsx` 等）
  - `site/components/` 复用组件
  - `site/data/` JSON 数据（可替换）
  - `site/lib/` 数据读取与适配器（如 `getBanners`、`getProducts`）
  - `site/types.ts` 统一类型
  - `public/` 静态资源（如占位图）
- **样式**: Tailwind 原子类 + 少量 `@layer components` 封装；主题色与断点与小米风格接近
- **可替换性**: 数据通过 `site/lib/data.ts` 读取，组件不依赖具体 JSON 字段名以外的实现
- **性能/SEO**: 图片懒加载、`next/image`、语义化标签、OpenGraph/Meta、站点地图（可选）

## 分析与页面分区
- **顶部通栏**: 登录/消息/下载 App/售后/社区等链接（现阶段使用占位/可配）
- **主导航**: 左侧类目菜单 + 顶部频道导航；Hover 弹层展示二级品类
- **搜索区**: 搜索输入建议/热词（先静态）
- **Banner 轮播**: 自动轮播 + 左右切换 + 指示点
- **楼层区**: 手机/电视/家电等模块化区块，每块含 1-2 张大图 + 商品宫格
- **运营位/服务区**: 优惠券、以旧换新、以图搜商品等入口
- **页脚**: 站点信息、底部导航与版权

## 数据模型（示例）
- `NavItem { id, label, href, children? }`
- `Banner { id, image, alt, href }`
- `Product { id, title, subtitle?, image, price, href, tags? }`
- `Promo { id, title, description?, image?, href }`
- `ServiceLink { id, label, icon?, href }`

## 开发步骤（Windows + Yarn）
1) 初始化项目
```bash
yarn create next-app@latest marketing-site --typescript --eslint --tailwind --app --src-dir false --import-alias "@/*"
cd marketing-site
yarn add class-variance-authority clsx lucide-react
```
2) Tailwind 配置检查
- 确保 `tailwind.config.ts` 含 `content: ["./app/**/*.{ts,tsx}", "./site/**/*.{ts,tsx}"]`
- 在 `app/globals.css` 引入 `@tailwind base; @tailwind components; @tailwind utilities;`

3) 复制/迁移现有目录
- 将当前仓库的 `site/` 目录放入新项目根目录（保留 `components/` `data/` `lib/` `types.ts`）
- `site/lib/data.ts` 暴露 `getNav/getBanners/getProducts/getPromos/getServices`

4) 页面布局搭建
- `app/layout.tsx`: 设置全局字体/Meta/TopBar + MainNav + Footer 布局骨架
- `app/page.tsx`: 组装 `SearchBar`、`BannerCarousel`、`CategoryMenu`、楼层 `ProductGrid`、`PromoSection`、`ServiceLinks`

5) 组件实现要点
- `TopBar/MainNav/Footer`: 已有基础，补齐响应式与交互
- `SearchBar`: 输入框 + 热词/占位建议
- `BannerCarousel`: `next/image` + 自动轮播（可用 `setInterval` 或轻量库）
- `CategoryMenu`: 左侧类目 + 悬浮二级菜单
- `ProductGrid`: 统一宫格卡片组件（价格、标题、图片、标签）
- `PromoSection/ServiceLinks`: icon+文案卡片栅格

6) 数据接入与占位
- 从 `site/lib/data.ts` 读取 JSON；支持未来改为 API/Headless CMS
- 开发期先使用示例图（`public/placeholders/*`）

7) 样式与响应式
- 断点对齐小米首页（`sm/md/lg/xl/2xl`）；
- 统一色值（灰、黑、橙）与间距；
- Hover/Focus 可访问性状态；

8) 基础 SEO
- `app/layout.tsx` 中配置 `metadata`（title、description、OpenGraph、icon）
- 语义化元素（`header/nav/main/section/footer`）与 `aria-*`

9) 质量保障
- `yarn lint && yarn type-check && yarn build`
- 关键组件 Story（可选 `@storybook/react`）

10) 部署到 Vercel
- 初始化 Git 仓库并推送到 GitHub
```bash
git init
git add .
git commit -m "feat: init next.js + tailwind marketing site"
```
- Vercel 导入仓库，Framework 选择 Next.js，环境默认即可
- 若使用自定义域名，按向导绑定

## 内容替换指南
- 修改 `site/data/*.json` 中字段即可完成内容替换
- 新增楼层: 在数据中加入分组并在首页映射渲染
- 图片替换: 放入 `public/xxx` 并更新路径

## 里程碑
- M1: 项目初始化 + 基础布局（1 天）
- M2: 组件完善 + 数据驱动（1-2 天）
- M3: 响应式与交互打磨（1 天）
- M4: SEO/构建与部署（0.5 天）

## 本地启动命令
```bash
yarn dev
```
打开浏览器访问 `http://localhost:3000`。

## 风险与对策
- 轮播与类目悬浮交互复杂：先实现简版，逐步增强
- 大量图片影响性能：使用 `next/image`、懒加载与合适尺寸
- 数据结构变化：通过 `site/types.ts` 统一约束，避免组件耦合