户外运动与宠物用品品牌出海 DTC 独立站:面向海外消费者提供中英双语浏览、多货币结算、在线支付下单与跨境物流轨迹追踪的一站式购物体验,并配备后台管理系统进行商品、订单与客户管理。
点击空白处退出提示
语言技术
React、TypeScript系统类型
Web行业分类
电商
户外运动与宠物用品品牌出海 DTC 独立站:面向海外消费者提供中英双语浏览、多货币结算、在线支付下单与跨境物流轨迹追踪的一站式购物体验,并配备后台管理系统进行商品、订单与客户管理。
前台商城
- 首页:品牌主视觉、四大品类入口、精选商品推荐、全球配送与安全支付等服务保障
- 商品中心:支持关键词搜索、分类筛选、销量/价格排序;商品详情含多图画廊、价格与划线价、库存、评分评价、数量选择与相关商品推荐
- 购物车:商品数量增减、单品删除、免运费进度提示、商品/运费/税费金额实时汇总
- 结账下单:多国收货地址填写、支付信息录入,自动生成订单与运单号
- 订单与物流:我的订单列表、订单详情、跨境物流追踪时间线(承运商、运单号、预计送达日期、各节点状态/地点/时间)
- 跨境特色:中英文语言一键切换(URL 同步切换),美元/人民币/欧元三种货币实时换算
后台管理
- 仪表盘:总营收、总订单、总商品、总客户统计卡片,最近订单与热销商品排行
- 商品管理:全量商品列表(缩略图、SKU、分类、价格、库存、上架状态)
- 订单管理:全部订单列表,展示订单状态与支付状态
- 客户管理:客户档案、注册时间与下单数量
账号体系 :用户注册/登录,顾客与管理员角色区分,未登录访问受限页面自动跳转登录。
- 基于 Next.js 14 App Router + React 18 + TypeScript :服务端组件直连数据渲染,客户端组件承载交互;采用文件式路由实现`/en` 、`/zh` 双语 URL 结构
- Tailwind CSS + Radix UI 原语搭建设计系统,统一设计 tokens,支持桌面/平板/移动端响应式布局
- next-intl 实现多语言文案管理与语言切换,由中间件统一处理 URL 本地化与重定向
- Zustand 管理购物车与货币状态,本地持久化,切换页面不丢失
- Prisma ORM + SQLite 建模 9 张数据表(分类、商品、商品图片、用户、订单、订单项、收货地址、运单、物流事件),并提供数据库迁移与种子数据脚本,可一键完成环境初始化
- Stripe 接入支付流程并预留 Webhook 回调处理(Demo 模式模拟支付,支持真实密钥直接切换为生产模式)
- 订单创建后自动按承运商规则生成运单号、承运商与物流事件,前台以垂直时间线可视化呈现跨境物流全链路轨迹
- 全量 TypeScript 类型约束,核心页面均经过实际运行验证,具备部署上线基础







评论