feat(礼品卡): 优化颜色主题并添加核销功能

- 修改礼品卡颜色主题,使用渐变色提升视觉效果
- 添加礼品卡核销功能,包括生成和验证核销码
-优化礼品卡组件,增加状态显示和使用说明
- 新增礼品卡颜色测试页面,用于验证颜色

src/user/gift/color-fix-summary.md

@@ -0,0 +1,137 @@
+# 礼品卡颜色主题修复说明
+
+## 问题描述
+
+用户反馈礼品卡显示为灰色，视觉效果不佳。经检查发现：
+
+1. **默认主题问题**：当礼品卡类型不是 10、20、30 时，默认使用 `silver` 主题
+2. **银色主题颜色**：银色主题使用的是 `#c0c0c0` 纯灰色，视觉效果较差
+3. **缺乏视觉层次**：所有主题色都是纯色，缺乏现代感
+
+## 修复方案
+
+### 1. 默认主题优化
+
+**修改前**:
+```typescript
+default: return 'silver'  // 默认灰色
+```
+
+**修改后**:
+```typescript
+default: return 'purple'  // 默认紫色，更美观
+```
+
+### 2. 主题色渐变化
+
+将所有主题色从纯色改为渐变色，提升视觉效果：
+
+#### 金色主题 (实物礼品卡)
+```scss
+background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
+```
+
+#### 蓝色主题 (虚拟礼品卡)
+```scss
+background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
+```
+
+#### 绿色主题 (服务礼品卡)
+```scss
+background: linear-gradient(135deg, #5cb85c 0%, #449d44 100%);
+```
+
+#### 紫色主题 (默认)
+```scss
+background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
+```
+
+#### 银色主题 (优化后)
+```scss
+background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
+```
+
+#### 铜色主题
+```scss
+background: linear-gradient(135deg, #cd7f32 0%, #b8722c 100%);
+```
+
+### 3. 按钮样式优化
+
+为所有主题的按钮添加字体加粗：
+```scss
+.use-btn {
+  font-weight: 600;  // 新增
+}
+```
+
+## 主题色映射规则
+
+| 礼品卡类型 | type值 | 主题色 | 视觉效果 |
+|-----------|--------|--------|----------|
+| 实物礼品卡 | 10 | gold | 金色渐变 |
+| 虚拟礼品卡 | 20 | blue | 蓝色渐变 |
+| 服务礼品卡 | 30 | green | 绿色渐变 |
+| 其他/未知 | 其他值 | purple | 紫色渐变 |
+
+## 修改的文件
+
+### 1. `src/user/gift/index.tsx`
+- 修改 `getThemeByType` 函数
+- 将默认主题从 `silver` 改为 `purple`
+
+### 2. `src/components/GiftCard.scss`
+- 优化所有主题色为渐变效果
+- 添加按钮字体加粗
+- 改进银色主题的颜色搭配
+
+### 3. 新增测试文件
+- `src/user/gift/color-test.tsx` - 颜色测试页面
+
+## 测试验证
+
+### 测试页面
+访问 `/user/gift/color-test` 可以看到：
+- 不同类型礼品卡的颜色效果
+- 渐变色的视觉表现
+- 按钮样式的改进效果
+
+### 测试用例
+1. **type=10**: 应显示金色渐变
+2. **type=20**: 应显示蓝色渐变  
+3. **type=30**: 应显示绿色渐变
+4. **type=其他**: 应显示紫色渐变
+5. **type=undefined**: 应显示紫色渐变
+
+## 视觉效果对比
+
+### 修复前
+- ❌ 默认显示灰色，视觉效果差
+- ❌ 纯色背景，缺乏层次感
+- ❌ 按钮样式平淡
+
+### 修复后
+- ✅ 默认显示紫色，更加美观
+- ✅ 渐变色背景，富有层次感
+- ✅ 按钮字体加粗，更加突出
+
+## 兼容性说明
+
+- ✅ 完全向后兼容，不影响现有功能
+- ✅ 所有现有的礼品卡都会自动应用新的颜色主题
+- ✅ 不需要修改数据结构或API接口
+
+## 后续优化建议
+
+1. **动态主题**: 可以考虑根据商品分类动态选择主题色
+2. **自定义主题**: 允许用户或管理员自定义主题色
+3. **季节主题**: 根据季节或节日使用特殊主题色
+4. **品牌主题**: 根据商品品牌使用对应的品牌色
+
+## 部署检查
+
+- [ ] 样式文件更新正确
+- [ ] 主题选择逻辑正确
+- [ ] 测试页面验证通过
+- [ ] 各种设备上显示正常
+- [ ] 不同状态下颜色正确