Yobuy - 跨境电商网站完整开发方案

一个功能完整的跨境电商网站开发方案，专为独立站全栈开发工程师设计，支持PC+移动端，具备完整的国际化和支付功能。

✅ 核心功能已完成

完整的购物流程已打通：浏览商品 → 加入购物车 → 应用优惠券 → 结算支付 → 订单管理 → 商品评价 → 心愿单

🎉 项目状态：生产就绪 - 所有核心功能已完成，可立即投入使用！

🌟 特性

⚡ 现代技术栈: Next.js 15 + React 19 + TypeScript
📱 响应式设计: PC+移动端一套代码，完美适配
🌍 国际化支持: 多语言、多币种、多时区
💳 多支付方式: Stripe、PayPal、Apple Pay
🛒 完整电商功能: 商品管理、订单处理、库存管理
🔐 安全可靠: 身份认证、数据加密、防攻击
🚀 性能优化: SSR/SSG、图片优化、代码分割
🎨 现代UI: Tailwind CSS + shadcn/ui组件
📊 数据分析: 用户行为、销售统计、性能监控

🏗️ 技术架构

graph TB
    A[用户界面] --> B[Next.js App Router]
    B --> C[React 19 组件]
    C --> D[Tailwind CSS]
    B --> E[API Routes]
    E --> F[Prisma ORM]
    F --> G[PostgreSQL]
    E --> H[第三方服务]
    H --> I[Stripe/PayPal]
    H --> J[Cloudinary]
    H --> K[邮件服务]

前端技术栈

框架: Next.js 15 (App Router)
UI库: React 19
类型系统: TypeScript 5.0
样式方案: Tailwind CSS + shadcn/ui
状态管理: Zustand
表单处理: React Hook Form + Zod
动画库: Framer Motion
国际化: next-intl

后端技术栈

API: Next.js API Routes
数据库: PostgreSQL + Prisma ORM
认证: NextAuth.js
支付: Stripe + PayPal
文件存储: Cloudinary
缓存: Redis (可选)

🚀 快速开始

1. 克隆项目

git clone https://github.com/durunsong/yoyo_mall.git
cd yoyo_mall

2. 安装依赖

pnpm install
# 或
npm install

3. 配置环境变量

cp .env.example .env.local
# 编辑 .env.local 文件，填入必要的配置

最小配置（用于快速测试）：

DATABASE_URL="postgresql://username:password@localhost:5432/yoyo_mall"
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"

4. 初始化数据库

pnpm db:generate    # 生成 Prisma Client
pnpm db:push        # 推送数据库模型
pnpm db:seed        # 填充测试数据

5. 启动开发服务器

pnpm dev

访问 http://localhost:3000 查看应用。

🎮 快速测试流程

登录账户
- 邮箱: user@example.com
- 密码: password123
浏览商品 → 访问首页或商品列表
添加到购物车 → 选择商品，点击"加入购物车"
应用优惠券 → 在购物车页面输入 WELCOME10 获得10%折扣
结算支付 → 使用测试卡号 4242 4242 4242 4242
查看订单 → 访问 /account/orders 查看订单

📁 项目结构

yoyo-mall/
├── app/                    # Next.js App Router
│   ├── (auth)/            # 认证页面组
│   ├── (shop)/            # 商店前台
│   ├── admin/             # 管理后台
│   └── api/               # API路由
├── components/            # React组件
│   ├── ui/               # 基础UI组件
│   ├── forms/            # 表单组件
│   ├── layout/           # 布局组件
│   └── features/         # 功能组件
├── lib/                  # 工具库
├── hooks/                # 自定义Hooks
├── store/                # 状态管理
├── types/                # TypeScript类型
├── prisma/               # 数据库模式
├── docs/                 # 项目文档
└── public/               # 静态资源

🛠️ 开发工作流

Git工作流

# 1. 创建功能分支
git checkout -b feature/product-catalog

# 2. 开发和提交
git add .
git commit -m "feat(product): 添加商品列表和详情页"

# 3. 推送和创建PR
git push origin feature/product-catalog

📊 功能模块

前台用户功能

✅ 用户认证和授权 (NextAuth.js)
✅ 商品浏览和搜索
✅ 商品详情页(图片画廊、规格选择)
✅ 购物车管理(增删改查)
✅ 优惠券系统
✅ 订单结算流程
✅ Stripe 支付集成
✅ 用户中心(订单查看)
✅ 地址管理(增删改查、默认地址)
✅ 个人资料管理(头像上传、基本信息、修改密码)
✅ 商品评价系统(发表评价、评分统计)
✅ 心愿单功能(添加/删除、快速加购)

管理后台功能

✅ 商品管理(完整CRUD)
- 商品列表、搜索、筛选
- 添加/编辑/删除商品
- 库存状态管理
- 状态管理(已发布/草稿/归档)
✅ 订单管理(完整CRUD)
- 订单列表、搜索、筛选
- 订单详情查看
- 订单状态更新
- 统计仪表板
✅ 用户管理(完整CRUD)
- 用户列表、搜索、筛选
- 创建/编辑/删除用户
- 角色和权限管理
- 用户统计
✅ 数据分析Dashboard
- 核心指标展示(营收、订单、用户、商品)
- 增长趋势分析
- 销售和用户增长图表
- 热门商品排行
- 最近订单列表
✅ 系统设置

高级功能

✅ 多语言国际化 (中文/英文)
✅ 多币种支持
✅ 优惠券系统
✅ 商品评价系统(评分、评论、图片)
✅ 心愿单功能(收藏、管理)
✅ 响应式设计(PC/平板/手机)

技术特性

✅ TypeScript 严格模式
✅ SEO 友好路由(动态Sitemap、Robots.txt)
✅ 错误边界处理
✅ Toast 通知系统
✅ 性能监控(Core Web Vitals、API监控)
✅ 图片优化(AVIF/WebP、懒加载)
✅ 代码分割和懒加载
✅ 安全Headers配置
🚧 单元测试(规划中)

🧪 测试和部署

测试命令

npm run test          # 运行单元测试
npm run test:watch    # 监视模式测试
npm run test:coverage # 测试覆盖率
npm run type-check    # TypeScript类型检查
npm run lint          # 代码规范检查

部署选项

Vercel: 推荐，零配置部署
Netlify: 静态站点部署
AWS: 企业级解决方案
Railway: 简单易用的平台

📈 性能指标

实际性能表现 (已优化)：

指标	目标	实际	状态
最大内容绘制 (LCP)	< 2.5s	~2.0s	✅
首次输入延迟 (FID)	< 100ms	~50ms	✅
累积布局偏移 (CLS)	< 0.1	~0.05	✅
首字节时间 (TTFB)	< 600ms	~400ms	✅

性能优化措施

✅ Next.js Image 自动优化 (AVIF/WebP)
✅ 代码分割和懒加载
✅ API 响应缓存
✅ 数据库查询优化
✅ CDN 静态资源加速
✅ Gzip/Brotli 压缩

🤝 贡献指南

Fork 项目
创建功能分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
打开 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

🙏 致谢

Next.js - React全栈框架
Tailwind CSS - CSS框架
Prisma - 数据库工具
shadcn/ui - 组件库

📞 联系方式

项目作者: @durunsong
邮箱: durunsongs@gmail.com
项目地址: https://github.com/durunsong/yoyo_mall

项目架构

yoyo-mall/                    # 唯一的主项目
├── app/                      # Next.js App Router
│   ├── (shop)/              # 🛍️ 前台商店 (用户购物)
│   │   ├── page.tsx         # 首页
│   │   ├── products/        # 商品列表/详情
│   │   ├── cart/            # 购物车
│   │   └── checkout/        # 结算页面
│   ├── (auth)/              # 🔐 用户认证
│   │   ├── login/
│   │   └── register/
│   ├── admin/               # 👨‍💼 管理后台
│   │   ├── dashboard/       # 仪表板
│   │   ├── products/        # 商品管理
│   │   ├── orders/          # 订单管理
│   │   └── users/           # 用户管理
│   └── api/                 # 🔌 后端API接口
│       ├── products/        # 商品API
│       ├── orders/          # 订单API
│       ├── auth/            # 认证API
│       └── payments/        # 支付API
├── components/              # 🧩 共享组件
├── lib/                     # 🛠️ 工具库
├── prisma/                  # 🗄️ 数据库模型
└── ...其他配置文件


第1步：基础架构 (1-2天)
配置 Prisma 数据库模型
创建基础 UI 组件库
设置路由结构
第2步：核心功能 (1-2周)
用户认证系统
商品展示功能
购物车和订单
第3步：管理后台 (1周)
商品管理界面
订单管理功能
用户管理
第4步：高级功能 (1-2周)
支付集成
多语言支持
性能优化
这种架构特别适合：
💼 中小型跨境电商网站
👨‍💻 独立开发者或小团队
🚀 快速上线和迭代的需求
💰 成本控制要求

⭐ 如果这个项目对你有帮助，请给它一个星星！

Name		Name	Last commit message	Last commit date
Latest commit History 141 Commits
docs		docs
prisma		prisma
public		public
scripts		scripts
src		src
.env.example		.env.example
.env.local.example		.env.local.example
.env.local.safe		.env.local.safe
.gitignore		.gitignore
.prettierrc		.prettierrc
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next-i18next.config.js		next-i18next.config.js
next.config.mjs		next.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

durunsong/yoyo_mall

Folders and files

Latest commit

History

Repository files navigation