3.0 KiB
3.0 KiB
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 列表
"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(土耳其语):
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",
};
主题配置
// 配置主题(在 goodsConfig 中)
goodsConfig.homeTheme = 1; // 使用 Theme1
语言切换
项目的语言切换由 vue-i18n 自动管理,组件会自动响应语言更改。
技术细节
- 使用
vue-i18n的useI18n()获取t()翻译函数 - 所有文案通过
t("key")方式获取 - 颜色配置通过 props 传递(
colors) - 移除了渐变和阴影,使用纯色设计
- CSS 变量只保留
--primary-color和--primary-light
文件修改记录
- Theme1.vue: 集成 useI18n,移除 texts prop,取消渐变和阴影
- PhoneView.vue: 移除 texts 相关导入和传递
- locales/en/index.ts: 添加英文文案
- locales/cn/index.ts: 添加中文文案
- locales/es/index.ts: 添加西班牙语文案
- 删除: theme-texts.ts(不再需要独立的多语言配置)