You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
5.2 KiB
115 lines
5.2 KiB
2 months ago
|
## 目标
|
||
|
|
- **技术栈**: 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` 统一约束，避免组件耦合
|