# 奖励管理字段拆分任务对齐文档

## 项目背景
在奖励管理系统中，发现 `th` 和 `div` 这两个元素存在重复显示的问题，具体表现为：
- 在订单详情页面（`/Users/win/code2025/bindbox_game/web/admin/src/views/orders/list/index.vue` 第97行）
- 在奖励管理页面（`/Users/win/code2025/bindbox_game/web/admin/src/views/activity/rewards/index.vue` 第37行、第117行、第203行）

## 当前问题
1. 商品字段和价格信息在同一个表格列中混合显示
2. 数据绑定逻辑不清晰，影响用户体验
3. 缺乏独立的字段验证和处理逻辑

## 需求理解
需要将现有的组合字段拆分为两个独立的字段：
1. **商品字段**：专门用于显示或输入商品信息
2. **价格字段**：专门用于显示或输入价格信息

## 任务范围
### 包含范围
- 前端UI组件修改
- 数据绑定逻辑更新
- 验证逻辑更新
- 单元测试添加

### 不包含范围
- 后端API重大修改（仅适配前端需求）
- 数据库结构变更（如非必要）

## 技术约束
- 前端技术栈：Vue 3 + TypeScript + Element Plus
- 状态管理：使用现有模式
- 代码风格：遵循项目现有规范
- 测试框架：使用项目现有测试工具

## 疑问澄清
1. 是否需要修改数据库表结构？
2. 是否需要更新相关的API接口？
3. 价格字段是否需要支持编辑功能？
4. 是否有特定的UI样式要求？

## 验收标准
- [ ] 商品和价格字段在UI上清晰区分
- [ ] 原有功能逻辑保持不变
- [ ] 数据绑定和验证逻辑正确更新
- [ ] 通过所有单元测试
- [ ] 代码符合项目规范