## 实现用户中心优惠券模块

### 1. 设计目标
- 在用户中心添加优惠券模块，显示用户的代金券信息
- 包含优惠券数量统计和优惠券列表
- 支持查看优惠券详情
- 适配当前页面的设计风格和主题色
- 支持中英文切换

### 2. 实现步骤

#### 2.1 添加i18n翻译
在 `d:\work\Aiproject\DeotalandAi\apps\frontend\src\locales\index.js` 中添加优惠券相关的翻译：
- 中文(zh)：在userCenter对象下添加voucher相关翻译
- 英文(en)：在userCenter对象下添加voucher相关翻译

#### 2.2 实现优惠券UI组件
在 `d:\work\Aiproject\DeotalandAi\apps\frontend\src\views\user\index.vue` 中添加优惠券模块：
- 添加优惠券数量统计卡片
- 添加优惠券列表，包含优惠券的基本信息（金额、状态、到期时间等）
- 添加优惠券详情弹窗

#### 2.3 实现API调用逻辑
- 添加优惠券数据的响应式状态
- 实现获取优惠券列表的方法
- 实现获取优惠券数量统计的方法
- 实现获取优惠券详情的方法
- 在组件挂载时初始化数据

#### 2.4 适配主题色和响应式设计
- 使用当前页面的主题色变量
- 适配深色主题
- 实现响应式布局，适配移动端、桌面端和平板端

### 3. 代码实现细节

#### 3.1 i18n翻译设计
```javascript
// 在userCenter对象下添加voucher相关翻译
voucher: {
  title: '优惠券',
  availableCount: '可用',
  usedCount: '已使用',
  expiredCount: '已过期',
  totalCount: '总数',
  couponCode: '优惠券码',
  amount: '金额',
  currency: '货币',
  minOrderAmount: '最低订单金额',
  status: '状态',
  statusDesc: '状态描述',
  expireAt: '到期时间',
  sourceType: '来源类型',
  sourceDesc: '来源描述',
  createdAt: '创建时间',
  viewDetails: '查看详情',
  detailTitle: '优惠券详情',
  close: '关闭',
  empty: '暂无优惠券',
  loading: '加载中...'
}
```

#### 3.2 优惠券UI组件设计
- 使用卡片式设计，与当前页面风格保持一致
- 优惠券列表使用网格布局，适配不同屏幕尺寸
- 优惠券详情使用Element Plus的Dialog组件
- 支持优惠券状态的视觉区分（可用、已使用、已过期）

#### 3.3 API调用逻辑设计
- 使用async/await语法调用API方法
- 添加加载状态管理
- 处理API响应和错误
- 实现数据转换，将API返回的数据格式转换为前端需要的格式

### 4. 技术要点
- 使用Vue3 Composition API
- 集成Element Plus组件库
- 适配主题色和中英文切换
- 响应式设计，适配不同设备尺寸
- 遵循当前项目的代码规范和设计风格

### 5. 预期效果
- 用户中心页面添加优惠券模块
- 显示优惠券数量统计
- 显示优惠券列表，支持查看详情
- 适配当前页面的设计风格和主题色
- 支持中英文切换
- 适配移动端、桌面端和平板端

### 6. 测试要点
- 测试API调用是否正常
- 测试优惠券列表和详情显示是否正确
- 测试中英文切换是否正常
- 测试主题色切换是否正常
- 测试响应式布局是否正常