# 基于 Supabase 实现消费者-商家聊天购物闭环方案

> **结论：** 是的，仅依赖 Supabase (配合前端逻辑) 完全可以实现“聊天购物闭环”的核心业务流程。 Supabase 提供的 Authentication（身份验证）、Database（数据库）、Realtime（实时订阅）、Storage（存储）以及 Edge Functions（边缘函数）覆盖了即时通讯和订单状态流转所需的所有基础设施。
>
> *注：实际资金的支付（扣款）通常需要对接微信支付/支付宝/Stripe等第三方支付网关，但 Supabase 可以完美托管支付前后的数据流、状态流和 Webhook 处理。*

---

## 1. 核心架构概览

在不引入额外后端服务（如 Node.js/Java 服务端）的情况下，架构如下：

*   **客户端 (Uni-app / Vue)**: 消费者端消费者 App，商家端管理后台。直接通过 `supabase-js` SDK 与 Supabase 交互。
*   **身份验证 (Auth)**: 区分消费者（Consumer）和商家（Merchant/Admin）。利用 RLS (Row Level Security) 确保数据隔离。
*   **实时通讯 (Realtime)**: 监听 `messages` 和 `orders` 表的变动，实现毫秒级消息推送和订单状态更新。
*   **业务逻辑 (Database + Edge Functions)**: 使用 Postgres 函数处理复杂的原子操作（如创建订单），使用 Edge Functions 处理支付回调。

---

## 2. 数据库设计 (Schema)

为了支持“边聊边买”，我们需要设计能关联聊天与订单的数据结构。

### 2.1 核心表结构

**1. 聊天室表 (`chat_rooms`)**
| 字段 | 类型 | 说明 |
| :--- | :--- | :--- |
| `id` | uuid | 主键 |
| `consumer_id` | uuid | 关联 `auth.users` (消费者) |
| `merchant_id` | uuid | 关联 `auth.users` (商家) |
| `last_message` | jsonb | 最后一条消息快照（用于列表展示） |
| `updated_at` | timestamp | 排序用 |

**2. 消息表 (`messages`)**
| 字段 | 类型 | 说明 |
| :--- | :--- | :--- |
| `id` | uuid | 主键 |
| `room_id` | uuid | 外键关联 `chat_rooms` |
| `sender_id` | uuid | 发送者 ID |
| `type` | text | 消息类型: `text`, `image`, `product`, `order`, `system` |
| `payload` | jsonb | 消息内容。如果是 `product`，存商品快照；如果是 `order`，存订单摘要 |
| `is_read` | boolean | 已读状态 |
| `created_at` | timestamp | 发送时间 |

**3. 订单表 (`orders`)**
| 字段 | 类型 | 说明 |
| :--- | :--- | :--- |
| `id` | uuid | 主键 |
| `room_id` | uuid | **关键关联**：该订单属于哪个聊天上下文 |
| `consumer_id` | uuid | 买家 |
| `merchant_id` | uuid | 卖家 |
| `items` | jsonb | 商品列表 |
| `total_amount` | numeric | 总金额 |
| `status` | text | `pending`, `paid`, `shipped`, `completed`, `cancelled` |
| `payment_status`| text | `unpaid`, `success` |

---

## 3. “聊天购物”闭环流程详解

### 场景一：商品咨询与卡片发送
1.  **场景**: 消费者在商品详情页点击“联系商家”。
2.  **动作**:
    *   前端检查 `chat_rooms` 是否存在该（消费者, 商家）的记录，没有则插入（`upsert`）。
    *   跳转至聊天页。
    *   **特色功能**: 自动发送一条 `type: product` 的消息，包含当前浏览的商品卡片 (`payload: { id, title, price, image }`)。
3.  **实现 (Supabase)**: 
    *   直接写入 `messages` 表。
    *   商家端通过 `supabase.channel('messages').on(...)` 实时收到商品卡片，知道用户对什么感兴趣。

### 场景二：商家发起收款（创建订单）
1.  **场景**: 双方沟通确认购买意向后，商家点击“发起订单”或“直接改价”。
2.  **动作**:
    *   商家选择商品，填写金额，生成预订单。
    *   向 `orders` 表插入一条状态为 `pending` 的记录。
    *   向 `messages` 表插入一条 `type: order` 的消息，`payload` 包含 `order_id` 和摘要。
3.  **表现**: 消费者在聊天流中看到一个“待支付订单卡片”。

### 场景三：聊天中支付
1.  **场景**: 消费者点击聊天气泡中的“立即支付”按钮。
2.  **动作**:
    *   APP 唤起支付（微信/支付宝）。
    *   支付成功后，支付平台回调 Supabase Edge Function (或通过前端验证)。
    *   更新 `orders` 表 `status` 为 `paid`。
3.  **闭环**:
    *   Supabase 监听到 `orders` 表 `status` 变为 `paid`。
    *   **触发器 (Trigger)** 或客户端逻辑自动插入一条 `type: system` 的消息：“订单已支付，等待发货”。
    *   商家端聊天界面实时更新订单状态为“已支付”。

---

## 4. 关键技术实现点

### 4.1 RLS (行级安全策略)
必须配置严格的 RLS，防止用户偷看他人聊天。

```sql
-- 示例：只能查看属于自己的聊天室
create policy "Users can view their own rooms"
on chat_rooms for select
using (auth.uid() = consumer_id or auth.uid() = merchant_id);
```

### 4.2 实时订阅 (Realtime)

前端代码示例 (Prolog/Vue):

```typescript
// 订阅消息
const messageChannel = supabase
  .channel('chat-room-123')
  .on(
    'postgres_changes',
    { event: 'INSERT', schema: 'public', table: 'messages', filter: `room_id=eq.${roomId}` },
    (payload) => {
      messages.value.push(payload.new)
      scrollToBottom()
    }
  )
  .subscribe()

// 订阅订单状态变更 (实现卡片状态自动刷新)
const orderChannel = supabase
  .channel('order-updates')
  .on(
    'postgres_changes',
    { event: 'UPDATE', schema: 'public', table: 'orders', filter: `room_id=eq.${roomId}` },
    (payload) => {
      updateOrderCardStatus(payload.new.id, payload.new.status)
    }
  )
  .subscribe()
```

### 4.3 边缘函数 (Edge Functions) 处理 Webhook
由于前端不能直接处理支付回调（不安全），需要使用 Supabase Edge Functions。

*   `functions/payment-webhook/index.ts`: 接收微信支付回调，验证签名，然后使用 Service Role Key 更新 `orders` 表。

---

## 5. 总结

完全依赖 Supabase 实现聊天购物闭环是**可行且高效**的方案。

*   **开发快**: 免去后端 CRUD 接口开发，直接操作 DB。
*   **实时性**: Realtime 功能天然契合聊天场景。
*   **成本低**: 无需维护长连接服务器 (WebSocket)。
*   **闭环体验**: 订单与消息在同一数据流中，用户体验流畅。

**下一步建议：**
1.  在 Supabase 中创建 `chat_rooms`, `messages`, `orders` 表。
2.  配置 RLS。
3.  开发消息列表 UI，支持多类型消息渲染（特别是商品卡片和订单卡片）。
