一、项目概述
本项目是为某跨境电商客户打造的品牌化游戏外设电商平台,主营产品涵盖游戏鼠标、机械键盘、电竞耳机及周边配件四大品类共 12 款 SKU,以暗色主题搭配流体动效背景构建沉浸式品牌体验。
二、技术架构
项目采用Next.js 16 + Hono 微框架的轻量级全栈分离架构:
- 前端:基于 Next.js 16(App Router)+ React 19 + TypeScript + Tailwind CSS 4,集成 shadcn/ui 组件体系(底层依赖 Radix UI),实现按钮、表格、弹窗、下拉菜单等 20 余种无障碍 UI 原语;采用自定义 i18n Provider 支持英语、简体中文及繁体中文三语切换。
- 后端:采用 Hono 轻量级 Web 框架 + Drizzle ORM + PostgreSQL 15,以 Zod 做入参校验,JWT(jose)做身份认证,bcryptjs 做密码哈希,实现用户注册登录、商品查询、购物车、订单、评论、联系表单及首页轮播等 8 组 RESTful API。
- 数据库:Drizzle ORM 定义 12 张数据表(users、products、categories、orders、reviews 等),支持翻译分离的多语言商品信息存储、评分约束检查及级联删除。
三、功能模块
前台商城:首页轮播图(Embla Carousel)、精选商品、新品推荐、用户评价展示区;产品目录页支持关键词搜索、分类筛选、分页浏览及价格标签;购物车支持加减数量,结算流程收集配送信息并生成订单编号。
管理后台:独立 /admin 路由组,包含登录鉴权、仪表盘数据概览(Recharts 图表统计订单/营收趋势与品类分布)、商品 CRUD、分类管理、订单状态流转(pending → shipped → delivered)、联系留言处理及评价审核七大管理模块。
体验优化:全站采用 next-themes 暗亮主题切换、React Hook Form 表单校验、sonner Toast 通知、骨架屏加载状态,并集成 Vercel Analytics 数据分析。