# Theme1 多语言使用说明

## 已完成的修改

### 1. 集成项目多语言系统
- ✅ 在 `src/locales/en/index.ts` 中添加了 Theme1 的英文文案
- ✅ 在 `src/locales/cn/index.ts` 中添加了 Theme1 的中文文案
- ✅ 在 `src/locales/es/index.ts` 中添加了 Theme1 的西班牙语文案
- ✅ Theme1 组件使用 `useI18n()` 自动获取当前语言

### 2. 样式优化
- ✅ 取消顶部背景渐变效果（改为纯色）
- ✅ 取消按钮渐变效果（改为纯色）
- ✅ 取消所有阴影效果
- ✅ 保留简洁的现代设计

### 3. 文案 Key 列表
```typescript
"Points Inquiry"                  // 主标题
"Enter your phone number to check available points"  // 副标题
"Real-time"                       // 特性1
"Rich Rewards"                    // 特性2
"Secure"                          // 特性3
"Check My Points"                 // 查询卡片标题
"Please enter your phone number to query"  // 查询卡片副标题
"Phone number"                    // 手机号标签
"Enter phone number"              // 输入框占位符
"Query Now"                       // 查询按钮
"Your information will be securely encrypted and not used for other purposes"  // 安全提示
```

## 使用方式

### 添加新语言
在 `src/locales/` 目录下创建新的语言文件，例如 `tr/index.ts`（土耳其语）：

```typescript
export default {
  // ... 其他翻译 ...
  
  // Theme1 texts
  "Points Inquiry": "Puan Sorgulama",
  "Enter your phone number to check available points": "Mevcut puanlarınızı kontrol etmek için telefon numaranızı girin",
  "Real-time": "Gerçek Zamanlı",
  "Rich Rewards": "Zengin Ödüller",
  "Secure": "Güvenli",
  "Check My Points": "Puanlarımı Kontrol Et",
  "Please enter your phone number to query": "Lütfen sorgulamak için telefon numaranızı girin",
  "Phone number": "Telefon Numarası",
  "Enter phone number": "Telefon numarasını girin",
  "Query Now": "Şimdi Sorgula",
  "Your information will be securely encrypted and not used for other purposes": "Bilgileriniz güvenli bir şekilde şifrelenecek ve başka amaçlarla kullanılmayacaktır",
};
```

### 主题配置
```typescript
// 配置主题（在 goodsConfig 中）
goodsConfig.homeTheme = 1;  // 使用 Theme1
```

### 语言切换
项目的语言切换由 vue-i18n 自动管理，组件会自动响应语言更改。

## 技术细节

- 使用 `vue-i18n` 的 `useI18n()` 获取 `t()` 翻译函数
- 所有文案通过 `t("key")` 方式获取
- 颜色配置通过 props 传递（`colors`）
- 移除了渐变和阴影，使用纯色设计
- CSS 变量只保留 `--primary-color` 和 `--primary-light`

## 文件修改记录

1. **Theme1.vue**: 集成 useI18n，移除 texts prop，取消渐变和阴影
2. **PhoneView.vue**: 移除 texts 相关导入和传递
3. **locales/en/index.ts**: 添加英文文案
4. **locales/cn/index.ts**: 添加中文文案
5. **locales/es/index.ts**: 添加西班牙语文案
6. **删除**: theme-texts.ts（不再需要独立的多语言配置）