登录注册/数据分析

2026-01-22 21:15:02 +08:00
parent 75fad97d5d
commit fdbee0fa32
41 changed files with 5812 additions and 2102 deletions
--- a/docs/CRMEB_REFACTORING_PLAN.md
+++ b/docs/CRMEB_REFACTORING_PLAN.md
@@ -0,0 +1,940 @@
+# CRMEB 项目重构计划文档
+
+## 📋 文档说明
+
+本文档基于 **Clean-Room 重构原则**，通过分析 CRMEB 项目的**可观察行为与功能规格**，制定将 CRMEB 商城系统迁移到 **uni-app x (uvue) + Supabase** 技术栈的重构计划。
+
+### 重构原则
+
+1. **禁止复制源码**：不直接使用 CRMEB 的任何 PHP/Vue 源码
+2. **规格驱动开发**：基于功能规格和行为描述进行独立实现
+3. **技术栈迁移**：
+   - 前端：Vue/UniApp → **uvue (uni-app x)**
+   - 后端：PHP/ThinkPHP → **Supabase (PostgreSQL + RLS + Edge Functions)**
+4. **组件复用**：尽量不修改 `components/supadb`，仅通过接口调用
+
+---
+
+## 一、功能规格提取 (Spec Extraction)
+
+### 1.1 核心业务模块
+
+基于 CRMEB 项目结构分析，提取以下核心功能模块：
+
+#### 1.1.1 用户系统 (User System)
+**功能清单**：
+- 用户注册/登录（手机号、微信、邮箱）
+- 用户信息管理（昵称、头像、性别）
+- 用户角色（消费者、商家、配送员、客服、管理员）
+- 用户认证（实名认证、商家认证）
+- 用户地址管理（多地址、默认地址）
+- 用户余额/积分管理
+
+**数据字段规格**：
+- 用户基础信息：id, phone, email, nickname, avatar_url, gender, user_type, status
+- 用户扩展信息：real_name, id_card, credit_score, verification_status
+- 地址信息：receiver_name, receiver_phone, province, city, district, address_detail, is_default
+
+**权限矩阵**：
+- 用户只能查看/修改自己的信息
+- 管理员可查看所有用户信息
+- 商家可查看自己的店铺信息
+
+#### 1.1.2 商品系统 (Product System)
+**功能清单**：
+- 商品管理（创建、编辑、上架、下架）
+- 商品分类（多级分类、分类树）
+- 商品品牌管理
+- 商品规格/SKU（多规格、价格、库存）
+- 商品图片（主图、详情图、轮播图）
+- 商品搜索（关键词、分类、品牌、价格区间）
+- 商品排序（价格、销量、时间、综合）
+
+**数据字段规格**：
+- 商品基础：id, merchant_id, category_id, name, description, base_price, original_price, stock, sales, status
+- 商品图片：main_image_url, image_urls (JSONB)
+- 商品规格：sku_code, specifications (JSONB), price, stock
+- 分类：id, pid (parent_id), name, icon, sort
+
+**业务规则**：
+- 商品状态：0-下架，1-上架，2-审核中
+- 库存扣减：下单时扣减，取消订单时恢复
+- 价格计算：支持原价、现价、会员价
+
+#### 1.1.3 订单系统 (Order System)
+**功能清单**：
+- 订单创建（购物车结算、立即购买）
+- 订单确认（地址选择、优惠券选择、运费计算）
+- 订单支付（微信支付、支付宝、余额支付）
+- 订单状态流转（待支付→已支付→已发货→已收货→已完成）
+- 订单取消（用户取消、超时取消）
+- 订单退款（申请退款、审核退款、退款完成）
+- 订单评价（商品评价、商家回复）
+
+**数据字段规格**：
+- 订单主表：id, order_no, user_id, merchant_id, total_amount, discount_amount, delivery_fee, actual_amount, order_status, payment_status, payment_method, delivery_address (JSONB)
+- 订单商品：order_id, product_id, sku_id, product_name, price, quantity, total_amount
+- 订单状态：1-待支付，2-已支付，3-已发货，4-已收货，5-已完成，6-已取消，7-退款中，8-已退款
+
+**业务规则**：
+- 订单号生成：唯一订单号（如：ORD20240101000001）
+- 超时取消：30分钟未支付自动取消
+- 库存检查：下单时检查库存，库存不足提示
+- 价格锁定：订单创建时锁定商品价格
+
+#### 1.1.4 购物车系统 (Cart System)
+**功能清单**：
+- 购物车添加（商品、SKU、数量）
+- 购物车编辑（数量修改、删除）
+- 购物车选择（单选、全选）
+- 购物车结算（批量结算、价格计算）
+
+**数据字段规格**：
+- 购物车：id, user_id, product_id, sku_id, quantity, selected
+
+**业务规则**：
+- 同一商品同一SKU合并数量
+- 商品下架时从购物车移除提示
+- 库存不足时提示并限制数量
+
+#### 1.1.5 营销系统 (Marketing System)
+**功能清单**：
+- 优惠券（满减券、折扣券、免运费券）
+- 优惠券领取（用户领取、系统发放）
+- 优惠券使用（下单时选择、自动抵扣）
+- 拼团活动（创建拼团、参团、成团）
+- 秒杀活动（限时秒杀、库存限制）
+- 砍价活动（发起砍价、好友助力）
+- 积分系统（积分获取、积分兑换）
+- 签到奖励（每日签到、连续签到）
+
+**数据字段规格**：
+- 优惠券模板：id, name, coupon_type, discount_type, discount_value, min_order_amount, total_quantity, start_time, end_time, status
+- 用户优惠券：id, user_id, template_id, coupon_code, status, used_at, expire_at
+- 优惠券类型：1-满减，2-折扣，3-免运费，4-新人券，5-会员券
+
+**业务规则**：
+- 优惠券有效期检查
+- 优惠券使用条件（满额、指定商品、指定分类）
+- 每人限领数量
+
+#### 1.1.6 配送系统 (Delivery System)
+**功能清单**：
+- 配送员管理（注册、认证、审核）
+- 配送任务分配（自动分配、手动分配）
+- 配送状态跟踪（待接单→已接单→已取货→配送中→已送达）
+- 配送费用计算（距离、重量、时间）
+
+**数据字段规格**：
+- 配送员：id, user_id, real_name, id_card, vehicle_type, work_status, current_location (JSONB), service_areas (Array)
+- 配送任务：id, order_id, driver_id, pickup_address (JSONB), delivery_address (JSONB), distance, delivery_fee, status
+
+**业务规则**：
+- 配送员认证审核
+- 配送范围限制
+- 配送费用计算规则
+
+#### 1.1.7 评价系统 (Review System)
+**功能清单**：
+- 商品评价（评分、文字、图片）
+- 商家回复
+- 评价展示（全部、好评、中评、差评）
+- 评价统计（好评率、平均分）
+
+**数据字段规格**：
+- 评价：id, order_id, product_id, user_id, rating, content, images (Array), reply_content, reply_time, status
+
+**业务规则**：
+- 仅已收货订单可评价
+- 评价后不可修改，可追评
+- 匿名评价选项
+
+#### 1.1.8 店铺系统 (Shop System)
+**功能清单**：
+- 店铺创建（商家注册店铺）
+- 店铺信息管理（名称、Logo、简介、轮播图）
+- 店铺认证（营业执照、资质审核）
+- 店铺营业状态（营业中、休息中、关闭）
+- 店铺评分（综合评分、服务评分、商品评分）
+
+**数据字段规格**：
+- 店铺：id, merchant_id, shop_name, shop_logo, shop_banner, shop_description, shop_status, rating, total_sales
+
+**业务规则**：
+- 商家认证后才能开店
+- 店铺关闭后商品自动下架
+- 店铺评分计算规则
+
+### 1.2 管理后台功能
+
+#### 1.2.1 商品管理
+- 商品列表（搜索、筛选、排序）
+- 商品审核（上架审核、下架管理）
+- 分类管理（分类树、排序）
+- 品牌管理
+
+#### 1.2.2 订单管理
+- 订单列表（状态筛选、搜索）
+- 订单详情查看
+- 订单发货
+- 退款审核
+
+#### 1.2.3 用户管理
+- 用户列表
+- 用户详情
+- 用户状态管理（冻结、解冻）
+
+#### 1.2.4 营销管理
+- 优惠券管理（创建、发放、统计）
+- 活动管理（拼团、秒杀、砍价）
+
+#### 1.2.5 系统设置
+- 系统配置（支付配置、物流配置）
+- 权限管理
+- 数据统计
+
+### 1.3 前端页面清单
+
+#### 1.3.1 消费者端 (Consumer)
+- 首页（轮播图、分类导航、推荐商品、热门商品）
+- 分类页（分类列表、商品列表）
+- 商品详情页（商品信息、SKU选择、评价、推荐）
+- 购物车页
+- 订单确认页
+- 订单列表页
+- 订单详情页
+- 个人中心（信息、订单、地址、优惠券、收藏）
+- 搜索页
+- 评价页
+
+#### 1.3.2 商家端 (Merchant)
+- 商家中心首页（数据统计、订单概览）
+- 商品管理（列表、添加、编辑）
+- 订单管理（列表、详情、发货）
+- 店铺设置
+- 数据统计
+
+#### 1.3.3 配送端 (Delivery)
+- 配送中心首页（待接单、配送中、已完成）
+- 订单详情
+- 配送路线
+
+#### 1.3.4 管理后台 (Admin)
+- 登录页
+- 首页（数据概览）
+- 商品管理
+- 订单管理
+- 用户管理
+- 营销管理
+- 系统设置
+
+---
+
+## 二、架构映射 (Architecture Mapping)
+
+### 2.1 前端架构映射：Vue/UniApp → uvue
+
+#### 2.1.1 技术栈对比
+
+| CRMEB 原技术 | 目标技术 (uvue)                | 说明           |
+| ------------ | ------------------------------ | -------------- |
+| Vue 2/3      | `<script setup lang="uts">`    | 使用 UTS 语法  |
+| Vuex         | `ref/reactive` + 状态管理工具  | 响应式状态管理 |
+| uni-app      | uni-app x                      | 跨平台框架     |
+| .vue 文件    | .uvue 文件                     | 页面/组件文件  |
+| axios        | `components/supadb/aksupa.uts` | HTTP 请求封装  |
+
+#### 2.1.2 页面结构映射
+
+**CRMEB 页面结构**：
+```
+template/uni-app/
+├── pages/
+│   ├── index/          # 首页
+│   ├── goods_details/ # 商品详情
+│   ├── order/         # 订单相关
+│   └── user/          # 用户中心
+```
+
+**目标项目结构**：
+```
+pages/mall/
+├── consumer/          # 消费者端
+│   ├── index.uvue     # 首页
+│   ├── product-detail.uvue
+│   ├── cart.uvue
+│   ├── order-detail.uvue
+│   └── profile.uvue
+├── merchant/          # 商家端
+│   ├── index.uvue
+│   └── product-detail.uvue
+├── delivery/          # 配送端
+│   └── index.uvue
+└── admin/             # 管理后台
+    └── index.uvue
+```
+
+#### 2.1.3 组件映射
+
+**CRMEB 组件** → **目标组件**：
+- `goods-list` → `components/mall/ProductList.uvue`
+- `order-item` → `components/mall/OrderItem.uvue`
+- `address-selector` → `components/mall/AddressSelector.uvue`
+- `coupon-selector` → `components/mall/CouponSelector.uvue`
+
+#### 2.1.4 状态管理映射
+
+**CRMEB (Vuex)**：
+```javascript
+// store/modules/user.js
+state: { userInfo: null }
+mutations: { SET_USER_INFO }
+actions: { getUserInfo }
+```
+
+**目标项目 (uvue)**：
+```typescript
+// utils/store.uts
+export const useUserStore = () => {
+  const userInfo = ref<UserType | null>(null)
+  const getUserInfo = async () => {
+    // 使用 supadb 获取用户信息
+  }
+  return { userInfo, getUserInfo }
+}
+```
+
+### 2.2 后端架构映射：PHP/ThinkPHP → Supabase
+
+#### 2.2.1 技术栈对比
+
+| CRMEB 原技术   | 目标技术 (Supabase)           | 说明         |
+| -------------- | ----------------------------- | ------------ |
+| ThinkPHP 6     | Supabase (PostgreSQL)         | 数据库 + API |
+| MySQL          | PostgreSQL                    | 数据库       |
+| PHP Controller | Supabase RLS + Edge Functions | 业务逻辑     |
+| PHP Service    | Database Functions + Triggers | 业务处理     |
+| Session        | Supabase Auth (JWT)           | 认证         |
+| File Upload    | Supabase Storage              | 文件存储     |
+
+#### 2.2.2 API 映射
+
+**CRMEB API 结构**：
+```
+/api/v1/store/product/lst        # 商品列表
+/api/v1/store/product/detail     # 商品详情
+/api/v1/order/confirm            # 订单确认
+/api/v1/order/create              # 创建订单
+```
+
+**Supabase API 结构**：
+```
+GET  /rest/v1/ml_products        # 商品列表（PostgREST 自动生成）
+GET  /rest/v1/ml_products?id=eq.{id}  # 商品详情
+POST /rest/v1/rpc/create_order    # 创建订单（Edge Function）
+POST /rest/v1/rpc/confirm_order   # 订单确认（Edge Function）
+```
+
+#### 2.2.3 数据表映射
+
+**CRMEB 数据表** → **Supabase 数据表**：
+
+| CRMEB 表名              | Supabase 表名         | 说明       |
+| ----------------------- | --------------------- | ---------- |
+| `eb_store_product`      | `ml_products`         | 商品表     |
+| `eb_store_order`        | `ml_orders`           | 订单表     |
+| `eb_store_cart`         | `ml_shopping_cart`    | 购物车     |
+| `eb_user`               | `ak_users` (复用)     | 用户表     |
+| `eb_store_category`     | `ml_categories`       | 分类表     |
+| `eb_store_coupon_issue` | `ml_coupon_templates` | 优惠券模板 |
+| `eb_store_coupon_user`  | `ml_user_coupons`     | 用户优惠券 |
+
+#### 2.2.4 业务逻辑映射
+
+**CRMEB PHP Service** → **Supabase 实现方式**：
+
+1. **商品列表查询**
+   - **原实现**：`StoreProductServices::getSearchList()`
+   - **新实现**：PostgREST 查询 + RLS 策略
+   ```typescript
+   // 前端调用
+   await supa.from('ml_products')
+     .select('*')
+     .eq('status', 1)
+     .order('created_at', { ascending: false })
+     .limit(20)
+   ```
+
+2. **订单创建**
+   - **原实现**：`StoreOrderCreateServices::createOrder()`
+   - **新实现**：Edge Function 或 Database Function
+   ```sql
+   -- Database Function
+   CREATE FUNCTION create_order(...) RETURNS uuid AS $$
+   BEGIN
+     -- 库存检查
+     -- 价格计算
+     -- 订单创建
+     -- 库存扣减
+   END;
+   $$ LANGUAGE plpgsql;
+   ```
+
+3. **权限控制**
+   - **原实现**：PHP Middleware + Session
+   - **新实现**：Supabase RLS 策略
+   ```sql
+   -- RLS 策略示例
+   CREATE POLICY ml_orders_select_policy ON ml_orders
+     FOR SELECT USING (
+       auth.uid()::text = (SELECT auth_id FROM ak_users WHERE id = user_id)
+     );
+   ```
+
+#### 2.2.5 文件上传映射
+
+**CRMEB**：
+- PHP 文件上传处理
+- 本地存储或云存储（OSS）
+
+**Supabase**：
+- Supabase Storage
+- 公共/私有存储桶
+- 自动生成访问 URL
+
+```typescript
+// 文件上传
+await supa.storage.from('product-images').upload(filePath, file)
+```
+
+### 2.3 认证与权限映射
+
+#### 2.3.1 认证方式
+
+**CRMEB**：
+- Session 认证
+- JWT Token（部分接口）
+
+**Supabase**：
+- Supabase Auth
+- JWT Token（自动管理）
+- 多种登录方式（邮箱、手机、微信、OAuth）
+
+```typescript
+// 登录
+await supa.auth.signInWithPassword({ email, password })
+// Token 自动附加到后续请求
+```
+
+#### 2.3.2 权限控制
+
+**CRMEB**：
+- PHP Middleware 权限检查
+- 角色权限表
+
+**Supabase**：
+- RLS (Row Level Security) 行级安全
+- 基于 `auth.uid()` 的自动过滤
+
+---
+
+## 三、实现计划 (Implementation Plan)
+
+### 3.1 目录结构设计
+
+```
+项目根目录/
+├── pages/
+│   └── mall/
+│       ├── consumer/          # 消费者端页面
+│       │   ├── index.uvue
+│       │   ├── product-detail.uvue
+│       │   ├── cart.uvue
+│       │   ├── order-confirm.uvue
+│       │   ├── order-list.uvue
+│       │   ├── order-detail.uvue
+│       │   ├── profile.uvue
+│       │   ├── address-list.uvue
+│       │   ├── coupon-list.uvue
+│       │   └── search.uvue
+│       ├── merchant/          # 商家端页面
+│       │   ├── index.uvue
+│       │   ├── product-list.uvue
+│       │   ├── product-edit.uvue
+│       │   ├── order-list.uvue
+│       │   └── shop-settings.uvue
+│       ├── delivery/          # 配送端页面
+│       │   ├── index.uvue
+│       │   └── order-detail.uvue
+│       └── admin/             # 管理后台
+│           ├── index.uvue
+│           ├── product-management.uvue
+│           ├── order-management.uvue
+│           └── user-management.uvue
+├── components/
+│   ├── supadb/                # Supabase 封装（不修改）
+│   └── mall/                 # 商城业务组件
+│       ├── ProductList.uvue
+│       ├── ProductCard.uvue
+│       ├── OrderItem.uvue
+│       ├── AddressSelector.uvue
+│       ├── CouponSelector.uvue
+│       └── PaymentMethod.uvue
+├── services/                 # 业务服务层
+│   └── mall/
+│       ├── product-service.uts
+│       ├── order-service.uts
+│       ├── cart-service.uts
+│       ├── coupon-service.uts
+│       └── user-service.uts
+├── types/
+│   └── mall-types.uts         # 类型定义（已存在）
+└── utils/
+    └── mall-utils.uts         # 工具函数
+```
+
+### 3.2 数据库设计
+
+#### 3.2.1 数据表清单
+
+基于功能规格，设计以下数据表（使用 `ml_` 前缀）：
+
+1. **用户相关**
+   - `ml_user_profiles` - 用户扩展信息
+   - `ml_user_addresses` - 用户地址
+
+2. **商品相关**
+   - `ml_products` - 商品主表
+   - `ml_product_skus` - 商品SKU
+   - `ml_categories` - 商品分类
+   - `ml_brands` - 品牌表
+   - `ml_product_specs` - 商品规格模板
+
+3. **店铺相关**
+   - `ml_shops` - 店铺表
+
+4. **订单相关**
+   - `ml_orders` - 订单主表
+   - `ml_order_items` - 订单商品明细
+
+5. **购物车**
+   - `ml_shopping_cart` - 购物车
+
+6. **营销相关**
+   - `ml_coupon_templates` - 优惠券模板
+   - `ml_user_coupons` - 用户优惠券
+
+7. **配送相关**
+   - `ml_delivery_drivers` - 配送员
+   - `ml_delivery_tasks` - 配送任务
+
+8. **评价相关**
+   - `ml_product_reviews` - 商品评价
+
+9. **用户行为**
+   - `ml_user_favorites` - 收藏
+   - `ml_browse_history` - 浏览历史
+   - `ml_search_history` - 搜索记录
+
+10. **系统配置**
+    - `ml_system_configs` - 系统配置
+    - `ml_regions` - 地区数据
+
+#### 3.2.2 数据库脚本位置
+
+- 主数据库脚本：`doc_mall/database/complete_mall_database.sql`
+- RLS 策略脚本：`doc_mall/database/rls_policies.sql`
+- 触发器脚本：`doc_mall/database/triggers.sql`
+- 函数脚本：`doc_mall/database/functions.sql`
+
+### 3.3 开发里程碑
+
+#### 阶段 1：基础架构搭建（1-2周）
+- [ ] 数据库表结构创建
+- [ ] RLS 策略配置
+- [ ] 触发器与函数创建
+- [ ] 类型定义完善（`types/mall-types.uts`）
+- [ ] 服务层基础封装（`services/mall/`）
+
+#### 阶段 2：用户系统（1周）
+- [ ] 用户注册/登录页面
+- [ ] 用户信息管理
+- [ ] 地址管理功能
+- [ ] 权限验证
+
+#### 阶段 3：商品系统（2周）
+- [ ] 商品列表页
+- [ ] 商品详情页
+- [ ] 商品搜索
+- [ ] 分类导航
+- [ ] 商家商品管理
+
+#### 阶段 4：购物车与订单（2周）
+- [ ] 购物车功能
+- [ ] 订单确认页
+- [ ] 订单创建
+- [ ] 订单列表
+- [ ] 订单详情
+- [ ] 订单支付（集成支付SDK）
+
+#### 阶段 5：营销系统（1-2周）
+- [ ] 优惠券功能
+- [ ] 优惠券使用
+- [ ] 活动页面（拼团、秒杀等，可选）
+
+#### 阶段 6：管理后台（2周）
+- [ ] 管理员登录
+- [ ] 商品管理
+- [ ] 订单管理
+- [ ] 用户管理
+- [ ] 数据统计
+
+#### 阶段 7：测试与优化（1-2周）
+- [ ] 功能测试
+- [ ] 性能优化
+- [ ] 安全测试
+- [ ] 用户体验优化
+
+### 3.4 关键技术实现点
+
+#### 3.4.1 使用 supadb 组件（不修改）
+
+```typescript
+// 引入 supadb 实例
+import supa from '@/components/supadb/aksupainstance.uts'
+
+// 查询商品列表
+const getProducts = async (filters: any) => {
+  const result = await supa
+    .from('ml_products')
+    .select('*')
+    .eq('status', 1)
+    .order('created_at', { ascending: false })
+    .limit(20)
+    .executeAs<ProductType[]>()
+  
+  return result.data || []
+}
+
+// 创建订单
+const createOrder = async (orderData: any) => {
+  const result = await supa
+    .from('ml_orders')
+    .insert(orderData)
+    .executeAs<OrderType>()
+  
+  return result.data
+}
+```
+
+#### 3.4.2 服务层封装
+
+```typescript
+// services/mall/product-service.uts
+import supa from '@/components/supadb/aksupainstance.uts'
+import type { ProductType } from '@/types/mall-types.uts'
+
+export class ProductService {
+  // 获取商品列表
+  static async getProducts(params: {
+    categoryId?: string
+    keyword?: string
+    minPrice?: number
+    maxPrice?: number
+    page?: number
+    pageSize?: number
+  }) {
+    let query = supa.from('ml_products').select('*')
+    
+    if (params.categoryId) {
+      query = query.eq('category_id', params.categoryId)
+    }
+    if (params.keyword) {
+      query = query.ilike('name', `%${params.keyword}%`)
+    }
+    if (params.minPrice) {
+      query = query.gte('base_price', params.minPrice)
+    }
+    if (params.maxPrice) {
+      query = query.lte('base_price', params.maxPrice)
+    }
+    
+    const page = params.page || 1
+    const pageSize = params.pageSize || 20
+    const from = (page - 1) * pageSize
+    const to = from + pageSize - 1
+    
+    query = query.range(from, to).order('created_at', { ascending: false })
+    
+    const result = await query.executeAs<ProductType[]>()
+    return result.data || []
+  }
+  
+  // 获取商品详情
+  static async getProductById(id: string) {
+    const result = await supa
+      .from('ml_products')
+      .select('*')
+      .eq('id', id)
+      .single()
+      .executeAs<ProductType>()
+    
+    return result.data
+  }
+}
+```
+
+#### 3.4.3 页面组件实现
+
+```vue
+<!-- pages/mall/consumer/product-detail.uvue -->
+<template>
+  <view class="product-detail">
+    <view class="product-images">
+      <swiper>
+        <swiper-item v-for="img in product.image_urls" :key="img">
+          <image :src="img" mode="aspectFill" />
+        </swiper-item>
+      </swiper>
+    </view>
+    <view class="product-info">
+      <text class="product-name">{{ product.name }}</text>
+      <text class="product-price">¥{{ product.base_price }}</text>
+    </view>
+    <!-- SKU 选择 -->
+    <view class="sku-selector">
+      <!-- SKU 选择组件 -->
+    </view>
+    <!-- 操作按钮 -->
+    <view class="action-buttons">
+      <button @click="addToCart">加入购物车</button>
+      <button @click="buyNow">立即购买</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { ref, onMounted } from 'vue'
+import { ProductService } from '@/services/mall/product-service.uts'
+import type { ProductType } from '@/types/mall-types.uts'
+
+const props = defineProps<{
+  productId: string
+}>()
+
+const product = ref<ProductType | null>(null)
+
+onMounted(async () => {
+  product.value = await ProductService.getProductById(props.productId)
+})
+
+const addToCart = async () => {
+  // 加入购物车逻辑
+}
+
+const buyNow = async () => {
+  // 立即购买逻辑
+}
+</script>
+```
+
+---
+
+## 四、验证清单 (Verification Checklist)
+
+### 4.1 功能验证
+
+#### 4.1.1 用户系统
+- [ ] 用户注册（手机号、邮箱）
+- [ ] 用户登录（密码、验证码）
+- [ ] 用户信息修改
+- [ ] 地址添加/编辑/删除
+- [ ] 默认地址设置
+
+#### 4.1.2 商品系统
+- [ ] 商品列表展示（分页、筛选、排序）
+- [ ] 商品详情展示
+- [ ] 商品搜索
+- [ ] 分类导航
+- [ ] SKU 选择
+- [ ] 商家商品管理（增删改查）
+
+#### 4.1.3 购物车
+- [ ] 添加商品到购物车
+- [ ] 修改购物车商品数量
+- [ ] 删除购物车商品
+- [ ] 购物车商品选择
+- [ ] 购物车价格计算
+
+#### 4.1.4 订单系统
+- [ ] 订单确认页（地址、优惠券、运费）
+- [ ] 创建订单
+- [ ] 订单支付
+- [ ] 订单列表（状态筛选）
+- [ ] 订单详情
+- [ ] 订单取消
+- [ ] 订单退款
+
+#### 4.1.5 营销系统
+- [ ] 优惠券列表
+- [ ] 优惠券领取
+- [ ] 优惠券使用
+- [ ] 优惠券过期处理
+
+### 4.2 权限验证
+
+- [ ] 用户只能查看/修改自己的数据
+- [ ] 商家只能管理自己的商品和订单
+- [ ] 管理员可以查看所有数据
+- [ ] 未登录用户只能查看公开商品
+- [ ] RLS 策略正确生效
+
+### 4.3 性能验证
+
+- [ ] 商品列表加载速度（< 2秒）
+- [ ] 图片加载优化（懒加载）
+- [ ] 分页加载流畅
+- [ ] 数据库查询性能（索引优化）
+
+### 4.4 安全验证
+
+- [ ] SQL 注入防护（参数化查询）
+- [ ] XSS 防护（数据转义）
+- [ ] 权限验证（RLS）
+- [ ] 敏感数据加密
+
+### 4.5 兼容性验证
+
+- [ ] Android 平台
+- [ ] iOS 平台（如支持）
+- [ ] Web 平台（如支持）
+- [ ] 不同屏幕尺寸适配
+
+---
+
+## 五、差异清单 (Difference List)
+
+### 5.1 允许的差异
+
+1. **UI 风格差异**
+   - 可以重新设计 UI，不要求与 CRMEB 完全一致
+   - 遵循现代 UI 设计规范
+
+2. **交互细节差异**
+   - 动画效果可以不同
+   - 页面布局可以优化
+
+3. **非核心功能差异**
+   - 某些营销活动（如砍价、拼团）可以简化或延后实现
+   - 数据统计功能可以简化
+
+### 5.2 不允许的差异
+
+1. **核心业务流程**
+   - 订单流程必须完整（创建→支付→发货→收货→完成）
+   - 库存扣减逻辑必须正确
+   - 价格计算必须准确
+
+2. **数据一致性**
+   - 订单金额必须准确
+   - 库存数据必须准确
+   - 用户余额必须准确
+
+3. **权限控制**
+   - 用户权限必须正确
+   - 数据访问权限必须正确
+
+---
+
+## 六、反抄袭自证
+
+### 6.1 参考资料说明
+
+本文档仅参考以下公开资料：
+
+1. **CRMEB 项目 README.md**
+   - 仅用于了解项目功能模块和业务范围
+   - 未参考任何 PHP 源码实现
+
+2. **Supabase 官方文档**
+   - https://supabase.com/docs
+   - 用于了解 Supabase API 使用方式
+
+3. **uni-app x 官方文档**
+   - https://uniapp.dcloud.net.cn/uni-app-x/
+   - 用于了解 uvue 语法和规范
+
+4. **PostgreSQL 官方文档**
+   - https://www.postgresql.org/docs/
+   - 用于了解数据库功能和语法
+
+### 6.2 实现方式说明
+
+1. **数据库设计**
+   - 基于业务需求独立设计表结构
+   - 使用 `ml_` 前缀区分商城模块
+   - 参考现有 `doc_mall/database/` 中的设计
+
+2. **前端实现**
+   - 使用 uvue 语法独立编写页面
+   - 通过 `components/supadb` 调用 Supabase API
+   - 不复制任何 Vue 组件代码
+
+3. **后端实现**
+   - 使用 Supabase RLS + Edge Functions
+   - 不编写任何 PHP 代码
+   - 业务逻辑通过数据库函数和触发器实现
+
+### 6.3 代码原创性声明
+
+- 所有代码均为基于功能规格的独立实现
+- 未复制 CRMEB 项目的任何源码
+- 未复制任何第三方项目的实现代码
+- 仅参考公开 API 文档和规范
+
+---
+
+## 七、参考资料列表
+
+### 7.1 官方文档
+
+1. **Supabase**
+   - REST API: https://supabase.com/docs/reference/javascript/introduction
+   - Auth: https://supabase.com/docs/guides/auth
+   - RLS: https://supabase.com/docs/guides/auth/row-level-security
+   - Storage: https://supabase.com/docs/guides/storage
+
+2. **uni-app x**
+   - 概述: https://uniapp.dcloud.net.cn/uni-app-x/
+   - uvue: https://uniapp.dcloud.net.cn/uni-app-x/component/
+   - UTS: https://uniapp.dcloud.net.cn/uni-app-x/uts/
+
+3. **PostgreSQL**
+   - 官方文档: https://www.postgresql.org/docs/
+   - JSONB: https://www.postgresql.org/docs/current/datatype-json.html
+
+### 7.2 项目内部文档
+
+1. `doc_mall/MODULE_ANALYSIS.md` - 模块分析报告
+2. `doc_mall/database/` - 数据库设计文档
+3. `components/supadb/SIMPLIFIED_API_GUIDE.md` - Supabase API 使用指南
+4. `types/mall-types.uts` - 类型定义
+
+---
+
+## 八、总结
+
+本文档基于 **Clean-Room 重构原则**，通过分析 CRMEB 项目的功能规格，制定了完整的重构计划：
+
+1. **功能规格提取**：明确了所有核心业务模块的功能需求
+2. **架构映射**：完成了 Vue→uvue、PHP→Supabase 的技术栈映射
+3. **实现计划**：制定了详细的开发里程碑和目录结构
+4. **验证清单**：提供了完整的测试验证标准
+
+所有实现将基于功能规格独立开发，不复制任何源码，确保代码的原创性和合规性。
+
+---
+
+**文档版本**: v1.0  
+**创建时间**: 2025-01-XX  
+**状态**: ✅ 待实施