81 lines
3.0 KiB
Markdown
81 lines
3.0 KiB
Markdown
# 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（不再需要独立的多语言配置）
|