feat: i18n 中英双语界面 — i18next + react-i18next

- 安装 i18next / react-i18next / i18next-browser-languagedetector
- 新建 src/i18n.ts 配置(fallback zh)
- 中/英翻译文件各 ~50 条目
- App.tsx 新增 EN/中 语言切换按钮
- ExportPanel + QrPreview + ModePanel + HistoryList + ErrorBoundary
- 全部 7 种模式组件均支持双语
- 12 前端测试通过,tsc 零错误
This commit is contained in:
2026-06-19 21:23:10 +08:00
parent 8e9e7e1b4c
commit 77fac0e28f
19 changed files with 381 additions and 56 deletions
+4 -2
View File
@@ -1,8 +1,10 @@
import { useTranslation } from 'react-i18next';
import { useQrState } from '../store/qrContext';
import { useQrEncode } from '../hooks/useQrEncode';
import { buildSmsText } from '../utils/qrText';
export default function SmsMode() {
const { t } = useTranslation();
const { state, dispatch } = useQrState();
const { encode } = useQrEncode();
@@ -15,14 +17,14 @@ export default function SmsMode() {
return (
<div className="flex gap-2 items-center h-full px-4">
<input
placeholder="电话号码"
placeholder={t('sms.number')}
type="tel"
value={state.formData.number || ''}
onChange={(e) => update('number', e.target.value)}
className="flex-1 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-sm bg-transparent outline-none focus:ring-2 focus:ring-blue-500/30"
/>
<input
placeholder="短信内容"
placeholder={t('sms.message')}
value={state.formData.message || ''}
onChange={(e) => update('message', e.target.value)}
className="flex-[2] px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-sm bg-transparent outline-none focus:ring-2 focus:ring-blue-500/30"