Serendipity
77fac0e28f
- 安装 i18next / react-i18next / i18next-browser-languagedetector - 新建 src/i18n.ts 配置（fallback zh） - 中/英翻译文件各 ~50 条目 - App.tsx 新增 EN/中 语言切换按钮 - ExportPanel + QrPreview + ModePanel + HistoryList + ErrorBoundary - 全部 7 种模式组件均支持双语 - 12 前端测试通过，tsc 零错误
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
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();
|
|
|
|
const update = (field: string, value: string) => {
|
|
const data = { ...state.formData, [field]: value };
|
|
dispatch({ type: 'SET_FORM_DATA', payload: data });
|
|
encode(buildSmsText(data));
|
|
};
|
|
|
|
return (
|
|
<div className="flex gap-2 items-center h-full px-4">
|
|
<input
|
|
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={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"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|