# 奖励管理字段拆分设计方案

## 架构设计

### 整体架构图
```mermaid
graph TD
    A[现有系统] --> B[字段拆分模块]
    B --> C[订单详情页面]
    B --> D[奖励管理页面]
    C --> E[商品列]
    C --> F[价格列]
    D --> G[商品选择器]
    D --> H[价格显示列]
    
    E --> I[商品数据绑定]
    F --> J[价格数据绑定]
    G --> K[商品选择逻辑]
    H --> L[价格计算逻辑]
```

### 模块设计

#### 1. 订单详情模块
**位置**: `/Users/win/code2025/bindbox_game/web/admin/src/views/orders/list/index.vue`

**修改点**:
- 第97行：将`<el-table-column prop="title" label="商品" />`拆分为两列
- 新增商品列：仅显示商品标题
- 新增单价列：显示商品单价（通过total_amount/quantity计算）

**数据结构**:
```typescript
interface OrderItem {
  title: string;        // 商品标题
  quantity: number;     // 数量
  total_amount: number; // 总金额（分）
  unit_price: number;   // 单价（计算字段）
}
```

#### 2. 奖励管理模块
**位置**: `/Users/win/code2025/bindbox_game/web/admin/src/views/activity/rewards/index.vue`

**修改点**:
- 第37行：修改模板显示逻辑，分离商品和价格显示
- 第117-121行：修改商品选择器，分离商品名称和价格显示
- 第203行：修改表格列定义，添加独立价格列

**组件结构**:
```vue
<!-- 商品选择器 -->
<ElSelect v-model.number="row.product_id" filterable placeholder="选择商品">
  <ElOption v-for="p in productOptions" :key="p.id" :value="p.id" :label="p.name">
    <div class="flex justify-between">
      <span>{{ p.name }}</span>
      <span class="text-gray-500">¥{{ formatPrice(p.price) }}</span>
    </div>
  </ElOption>
</ElSelect>

<!-- 表格显示 -->
<el-table-column prop="product_name" label="商品" />
<el-table-column prop="product_price" label="单价" />
```

### 数据流向图
```mermaid
sequenceDiagram
    participant UI as 前端界面
    participant API as API接口
    participant Cache as 价格缓存
    participant DB as 数据库
    
    UI->>API: 请求商品列表
    API->>DB: 查询商品数据
    DB-->>API: 返回商品信息
    API-->>UI: 返回商品列表(含价格)
    UI->>Cache: 缓存价格信息
    UI->>UI: 渲染商品选择器
    UI->>Cache: 获取商品价格
    UI->>UI: 显示独立的价格列
```

### 接口契约定义

#### 商品数据接口
```typescript
interface Product {
  id: number;
  name: string;
  price: number; // 价格（分）
  // 其他商品属性...
}

interface Reward {
  id: number;
  name: string;
  product_id: number;
  product_name?: string; // 商品名称（计算字段）
  product_price?: number; // 商品价格（计算字段）
  // 其他奖励属性...
}
```

### 异常处理策略
1. **价格计算异常**: 使用默认值0，记录警告日志
2. **商品数据缺失**: 显示"商品已删除"提示
3. **缓存失效**: 重新请求商品数据，更新缓存

## 核心组件设计

### 1. 价格计算工具函数
```typescript
// 价格格式化工具
export function formatPrice(price: number): string {
  return `¥${(price / 100).toFixed(2)}`;
}

// 单价计算
export function calculateUnitPrice(totalAmount: number, quantity: number): number {
  if (quantity <= 0) return 0;
  return totalAmount / quantity;
}
```

### 2. 商品选择组件
```typescript
interface ProductSelectProps {
  modelValue: number;
  products: Product[];
  placeholder?: string;
}

interface ProductSelectEmits {
  (e: 'update:modelValue', value: number): void;
}
```

### 3. 价格显示组件
```typescript
interface PriceDisplayProps {
  price: number; // 分
  currency?: string;
  precision?: number;
}
```

## 依赖关系
- Element Plus UI组件库
- 项目现有的价格格式化工具
- 商品数据缓存机制
- TypeScript类型系统