← 返回项目库

Shoptik 中文家居生活选品

基于 React 与 Vite 的中文家居电商演示，提供本地商品目录、筛选、商品详情、购物袋、本地结算与演示订单完成链路。

Shoptik 是一个家居电商前端项目。本交付版本固定上游来源，并加入本地 fixture 商品目录、中文核心界面、本地演示身份和不会真实扣款的结算流程，适合社群学习、研究与技术验证。

真实界面

项目截图

共 8 张

本地演示目录
找到 8 件商品
晨曦桌灯
购物袋
本地演示结算
演示订单已创建
精选材质
记录关于

Capabilities

核心功能

✓本地 8 件家居商品目录
✓搜索、分类筛选、排序和价格筛选
✓商品详情、颜色选择、数量调整和购物袋
✓本地演示结算表单与演示订单完成页
✓响应式桌面端 UI
✓中文导航、页面元数据与演示边界披露

适用场景

学习 React 电商目录和 Context 状态管理
验证商品浏览到购物袋再到结算的前端链路
作为家居选品站点原型进行二次定制

适合谁

需要快速学习或验证 React 电商目录、购物袋和结算交互的开发者与小团队。

商业化思路

研究与学习交付；可作为家居选品站点原型继续定制。

你会拿到什么

  • ✓固定来源的源码包
  • ✓本地 fixture 商品目录与中文核心界面
  • ✓本地演示身份、购物袋、结算和订单完成页
  • ✓MIT License 与上游来源说明
  • ✓8 路 1440x900 UI 截图及浏览器验证清单

部署流程

  1. 1npm ci --ignore-scripts
  2. 2npm run build
  3. 3npm run dev -- --host 0.0.0.0 --port 27780

真实验证结果

已在固定来源工作区完成确定性 npm 构建；已用固定 Chromium 在 1440x900、DSF 1 下验证首页、商品列表、商品详情、购物袋、结算、完成页、特色和灵感页面，并完成商品浏览→加入购物袋→去结算→提交本地演示订单链路。

部署前须知

默认本地演示目录不连接 Airtable、Auth0 或 Stripe；结算仅生成浏览器内演示订单编号，不发送邮件、不创建服务端订单、不产生扣款；上游远程服务适配代码需要自行配置后才可集成。

部署难度

简单

最低配置

Node.js 18+ 与现代浏览器；静态构建产物可由任意静态 Web 服务器托管。

开源许可证

MIT License

最后验证

2026-09-03

技术栈

React 18ViteReact RouterContext APITailwind CSSReact Icons

授权说明

保留上游 LICENSE 与来源说明；本地中文与演示适配仅用于学习、研究和技术验证，不代表额外商业授权。

Release notes

版本记录

1 个已发布版本

vcn-e3aa363bed63 当前推荐

首个中文社群学习交付版本；默认启用本地演示目录，补齐中文核心界面、购物袋、结算和订单完成链路。

部署要求：Node.js 18+、npm 与现代浏览器；远程服务能力需要另行配置。

已知问题：本地演示不连接 Airtable、Auth0 或 Stripe；真实远程集成不在本次发布验证范围内。

登录后领取