X1_Site

5.2 KiB

Raw Blame History

目标

技术栈: 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）

初始化项目

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

Tailwind 配置检查

确保 tailwind.config.ts 含 content: ["./app/**/*.{ts,tsx}", "./site/**/*.{ts,tsx}"]
在 app/globals.css 引入 @tailwind base; @tailwind components; @tailwind utilities;

将当前仓库的 site/ 目录放入新项目根目录（保留 components/ data/ lib/ types.ts）
site/lib/data.ts 暴露 getNav/getBanners/getProducts/getPromos/getServices

页面布局搭建

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

组件实现要点

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

数据接入与占位

从 site/lib/data.ts 读取 JSON；支持未来改为 API/Headless CMS
开发期先使用示例图（public/placeholders/*）

样式与响应式

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

基础 SEO

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

质量保障

yarn lint && yarn type-check && yarn build
关键组件 Story（可选 @storybook/react）

部署到 Vercel

初始化 Git 仓库并推送到 GitHub

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 天）

本地启动命令

yarn dev

打开浏览器访问 http://localhost:3000。

风险与对策

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

5.2 KiB Raw Blame History

目标

范围与产出

架构设计

分析与页面分区

数据模型（示例）

开发步骤（Windows + Yarn）

内容替换指南

里程碑

本地启动命令

风险与对策

5.2 KiB

Raw Blame History