# 技术开发文档

## 1. 架构设计
项目采用 MVVM 架构，View 层为 `.uvue` 文件，Model/Service 层主要由 `utils/supabaseService.uts` 承担，负责与 Supabase 进行数据交互。

## 2. 核心模块实现

### 2.1 首页 (index.uvue)
- **UI 组件**: 使用 `.category-tabs-pills` 实现胶囊式选项卡切换。解决在移动端 flex 布局默认方向问题，显式设置 `flex-direction: row`。
- **动态布局**: 监听 `statusBarHeight`，动态调整内容区域的 `marginTop`，防止被自定义导航栏遮挡。
- **数据加载**: 
  - `loadCategories()` 与 `loadBrands()` 获取数据后调用 `.sort(() => Math.random() - 0.5)` 实现随机排序。
  - 品牌点击事件 `switchBrand` 使用 `uni.navigateTo` 跳转至搜索页，携带参数 `type=brand`。

### 2.2 搜索页 (search.uvue)
- **自动搜索逻辑**: 在 `onLoad` 或 `initPage` 中检查页面参数 `options`。
  - 若 `options.type === 'brand'`，则直接调用 `performSearch()`，并设置 `showResults = true`，跳过手动输入步骤。
- **数据源**: `supabaseService.searchProducts` 支持按销量、价格排序。

### 2.3 订单导航拦截 (orders.uvue)
- **问题**: 登录后跳转至订单页，点击返回键可能回到登录页。
- **方案**: 实现 `onBackPress` 生命周期钩子。
  ```typescript
  onBackPress((options) => {
    if (options.from === 'navigateBack') {
      // 检查路由栈，若需拦截则跳转至 Profile
      uni.switchTab({ url: '/pages/mall/consumer/profile' })
      return true
    }
    return false
  })
  ```

### 2.4 钱包与提现 (wallet.uvue / withdraw.uvue)
- **数据交互**:
  - `getWalletBalance()`: 获取 `ak_wallet` 表余额。
  - `withdraw()`: 调用 Supabase RPC `withdraw_balance` (需在数据库定义该函数) 或直接操作余额表（视后端实现而定，建议使用 RPC 保证事务原子性）。

## 3. 数据库交互 (Supabase)
主要涉及的表结构：
- `ml_products`: 商品主表
- `ml_brands`: 品牌表
- `ml_categories`: 分类表
- `ak_wallet`: 用户钱包表
- `ml_orders`: 订单表

### 3.1 数据脚本
请参考 `doc_mall/consumer/sql/` 目录下的 SQL 脚本进行数据初始化：
- `05_insert_brand_products.sql`: 自动为每个品牌生成 12 个测试商品。

## 4. UI 适配指南
- **状态栏适配**: 所有自定义导航栏页面均需获取 `uni.getSystemInfoSync().statusBarHeight` 并设置顶部内边距。
- **响应式**: 使用媒体查询 (`@media`) 适配手机、平板及桌面端网格列数 (2列 -> 6列)。