feat(components): 新增 GiftCard礼品卡组件

- 新增 GiftCard 组件，支持多种类型礼品卡的展示和交互
- 组件包含商品信息、价格、折扣、使用指南等丰富功能- 优化图像展示，支持单

src/user/gift/usage-example.md

@@ -0,0 +1,145 @@
+# 礼品卡商品信息显示使用说明
+
+## 概述
+
+已成功优化礼品卡组件，现在可以正确显示商品名称和图片。主要改进包括：
+
+1. **优先显示商品名称**：`goodsName` 优先于 `name` 显示
+2. **显示商品图片**：使用 `goodsImage` 字段显示商品图片
+3. **丰富的商品信息**：包括规格、分类、标签、使用说明等
+4. **更好的用户体验**：清晰的信息层次和视觉效果
+
+## 数据结构
+
+### ShopGift 模型中的关键字段
+
+```typescript
+interface ShopGift {
+  id?: number;
+  name?: string;           // 礼品卡名称
+  goodsName?: string;      // 商品名称（优先显示）
+  goodsImage?: string;     // 商品图片
+  goodsId?: number;        // 关联商品ID
+  description?: string;    // 礼品卡描述
+  faceValue?: string;      // 面值
+  type?: number;           // 类型（10实物 20虚拟 30服务）
+  useStatus?: number;      // 状态（0可用 1已使用 2已过期）
+  // ... 其他字段
+}
+```
+
+## 代码实现
+
+### 1. 数据转换函数
+
+在 `src/user/gift/index.tsx` 中的 `transformGiftData` 函数已经优化：
+
+```typescript
+const transformGiftData = (gift: ShopGift): GiftCardProps => {
+  return {
+    id: gift.id || 0,
+    name: gift.goodsName || gift.name || '礼品卡', // 优先显示商品名称
+    description: gift.description || gift.instructions,
+    code: gift.code,
+    goodsImage: gift.goodsImage, // 商品图片
+    faceValue: gift.faceValue,
+    type: gift.type,
+    useStatus: gift.useStatus,
+    expireTime: gift.expireTime,
+    useTime: gift.useTime,
+    useLocation: gift.useLocation,
+    contactInfo: gift.contactInfo,
+    // 添加商品信息
+    goodsInfo: {
+      ...(gift.goodsId && {
+        specification: `礼品卡面值：¥${gift.faceValue}`,
+        category: getTypeText(gift.type),
+        tags: [
+          getTypeText(gift.type),
+          gift.useStatus === 0 ? '可使用' : gift.useStatus === 1 ? '已使用' : '已过期'
+        ].filter(Boolean),
+        instructions: gift.instructions ? [gift.instructions] : [
+          '请在有效期内使用',
+          '出示兑换码即可使用',
+          '不可兑换现金'
+        ],
+        notices: [
+          '礼品卡一经使用不可退换',
+          '请妥善保管兑换码',
+          '如有疑问请联系客服'
+        ]
+      })
+    },
+    showCode: gift.useStatus === 0,
+    showUseBtn: gift.useStatus === 0,
+    showDetailBtn: true,
+    showGoodsDetail: true, // 显示商品详情
+    theme: getThemeByType(gift.type),
+    onUse: () => handleUseGift(gift),
+    onDetail: () => handleGiftDetail(gift)
+  }
+}
+```
+
+### 2. 类型文本获取函数
+
+```typescript
+const getTypeText = (type?: number): string => {
+  switch (type) {
+    case 10: return '实物礼品卡'
+    case 20: return '虚拟礼品卡'
+    case 30: return '服务礼品卡'
+    default: return '礼品卡'
+  }
+}
+```
+
+## 显示效果
+
+### 商品信息展示包括：
+
+1. **基础信息**
+   - 商品名称（优先显示）
+   - 商品图片
+   - 礼品卡面值
+   - 商品分类
+
+2. **详细信息**
+   - 商品规格
+   - 商品标签
+   - 使用说明
+   - 注意事项
+
+3. **状态信息**
+   - 使用状态标识
+   - 过期时间提醒
+   - 兑换码显示
+
+## 测试验证
+
+可以使用测试页面验证显示效果：
+
+```bash
+# 访问测试页面
+/user/gift/test
+```
+
+测试页面包含了不同类型和状态的礼品卡示例，可以验证：
+- 商品名称正确显示
+- 商品图片正常加载
+- 商品信息完整展示
+- 不同状态的样式效果
+
+## 注意事项
+
+1. **图片加载**：确保 `goodsImage` 字段包含有效的图片URL
+2. **数据完整性**：建议在后端确保 `goodsName` 和 `goodsImage` 字段有值
+3. **兼容性**：保持对旧数据的兼容，当 `goodsName` 为空时使用 `name` 字段
+4. **性能优化**：大量礼品卡列表时注意图片懒加载
+
+## 后续优化建议
+
+1. **图片优化**：添加图片懒加载和占位符
+2. **缓存机制**：对商品信息进行本地缓存
+3. **错误处理**：添加图片加载失败的降级处理
+4. **用户体验**：添加骨架屏和加载状态