电商网店一键搭建器

你是一位资深全栈开发者。请为马来西亚中小企业主搭建一个自有电商网站，替代 Shopify/WooCommerce。

## 角色与背景
你是一位资深全栈开发者，熟悉 Next.js、Supabase 和 Stripe。

## 项目目标
为 {store_name}（{store_type}）搭建一个完整的电商网站，支持产品展示、购物车、结账、订单管理和后台管理。

## 目标用户
马来西亚消费者和店主。

## 核心体验与页面
- **首页**：公告栏（背景色 {primary_color}）、导航栏、Hero 轮播、精选产品网格、分类导航、新品/热卖区、优势条、Footer。
- **产品列表页**：左侧筛选（分类、价格区间、评分、排序）、产品卡片（图片、名称、价格、评分、已售）、无限滚动或分页。
- **产品详情页**：面包屑、图片画廊、变体选择器、数量选择、加入购物车按钮（{primary_color}）、库存状态、Tab（描述/规格/评价）、相关推荐、SEO meta 和 JSON-LD。
- **购物车**：商品列表、促销码输入、价格明细（小计、运费、税 {tax_rate}、折扣、总计）、结账按钮。
- **结账页**：步骤指示器、收货表单（含州属下拉，自动计算运费）、运费显示、付款方式（Stripe 信用卡/FPX、银行转账、Touch n Go、COD）、订单摘要、下单按钮。
- **订单确认页**：订单号、状态、明细、付款说明、银行转账凭证上传。
- **订单追踪页**：输入订单号+邮箱查询、状态时间线、快递单号和追踪链接（{shipping_provider}）。
- **客户中心**：登录/注册、我的订单、地址管理、收藏、评价管理。
- **管理后台**：仪表盘（销售额、订单数、趋势图、低库存预警）、产品管理（CRUD、图片上传、变体管理）、订单管理（状态更新、快递单号、凭证确认、退款）、促销管理、评价审核、运费设置、店铺设置。

## 主要工作流程
1. 游客浏览产品，加入购物车（localStorage 持久化）。
2. 结账时填写收货信息，选择运费和付款方式。
3. 下单后，订单状态为 pending，付款后自动扣减库存。
4. 管理员在后台处理订单（确认、发货、退款）。
5. 客户可追踪订单和评价已购产品。

## 业务规则
- 货币：{currency}，税率：{tax_rate}（SST）。
- 运费：西马首重 RM6，续重 RM2/kg；东马首重 RM10，续重 RM4/kg；满额免运费。
- 促销码：支持百分比和固定金额，需验证有效期、使用次数、最低消费。
- 库存自动扣减，低库存预警。
- 游客可结账，不强制注册。
- 评价仅已购买且订单已交付的客户可提交，管理员审核后公开。
- 订单编号格式：店铺缩写-YYYYMMDD-流水号。

## 设计方向
- 品牌主色调：{primary_color}。
- 响应式：桌面 4 列、平板 3 列、手机 2 列，手机底部导航。
- 所有按钮和点击区域至少 44px。
- 图片使用 next/image 优化。

## 构建方法
- 技术栈：Next.js 16 (App Router) + TypeScript + Tailwind CSS 4 + shadcn/ui + Supabase (Postgres, Auth, Storage) + Stripe。
- 部署：Vercel。
- 先给出简短实施计划，然后按优先级实现主要用户旅程。
- 使用 realistic 示例数据（分类、产品、促销码、评价）。
- 确保安全：RLS 策略、Stripe Webhook 签名验证、管理后台邮箱白名单。
- 提供运行和测试说明。

## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。