雨霖铃
aa23a263fe
- 移除 react-i18next、i18next 及相关依赖
- 删除旧的 i18n/ 目录和 useLazyTranslation 工具
- 新增 utils/chromeI18n.ts 类型安全 wrapper（useI18n Hook + getMessage）
- 生成 public/_locales/{zh,en}/messages.json（298 个翻译 key）
- 批量更新 39+ 组件文件的导入和翻译调用
- 转换翻译键格式：namespace:key → namespace_key
- 修复 ErrorBoundary/PageErrorBoundary 从 withTranslation HOC 改为直接调用 getMessage
- 更新 vitest.setup.ts mock 加载实际翻译文本
- 修复 11 个测试文件的断言以匹配中文翻译
- TypeScript、ESLint、547 项测试全部通过
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
|
|
|
import { useI18n } from '@/utils/chromeI18n';
|
|
import { QrCodeContext } from './contexts/QrCodeContext';
|
|
import { useQrCode } from './hooks/useQrCode';
|
|
import GeneratePanel from './components/GeneratePanel';
|
|
import ParsePanel from './components/ParsePanel';
|
|
import type { QrCodeMode } from './types';
|
|
|
|
export default function Index() {
|
|
const { t } = useI18n('qrCode');
|
|
const qrCode = useQrCode();
|
|
|
|
// 模式选项驱动骨架
|
|
const modeOptions = [
|
|
{ value: 'generate' as QrCodeMode, label: t('qrCode:urlToQr') },
|
|
{ value: 'parse' as QrCodeMode, label: t('qrCode:qrToUrl') },
|
|
];
|
|
|
|
return (
|
|
<QrCodeContext.Provider value={qrCode}>
|
|
{/* 💡 统一视觉规范大超进化：
|
|
- 彻底剥离破坏流式宽度的 max-w-[400px] 枷锁，开启标准的 w-full 全自适应包裹。
|
|
- 替换为标准的 p-4 呼吸内边距配合 flex flex-col space-y-4，接管系统级重排！
|
|
*/}
|
|
<div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
|
|
{/* 流式中央控制切流卡：注入 sm 断点防御，防范单栏状态下发生变形 */}
|
|
<div className="w-full sm:w-fit pt-0.5">
|
|
<SwitchButtonGroup
|
|
value={qrCode.mode}
|
|
options={modeOptions}
|
|
onChange={qrCode.setMode}
|
|
size="small"
|
|
/>
|
|
</div>
|
|
|
|
{/* 💡 面板渲染沙箱：
|
|
- 在切流渲染时，利用独立的 mt-2 增加纵深边界线。
|
|
- 配合内部自带的双翼 Flex 聚焦大边框，形成坚固如铁的架构闭环！
|
|
*/}
|
|
<div className="w-full pt-1.5">
|
|
{qrCode.mode === 'generate' ? (
|
|
<div>
|
|
<GeneratePanel />
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<ParsePanel />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</QrCodeContext.Provider>
|
|
);
|
|
}
|