雨霖铃
df0b9440ca
- 创建 QrCodeContext 和 QrCodeProvider 管理共享状态 - 提取 useQrCode Hook 封装所有状态和业务逻辑 - 创建 GeneratePanel 组件处理二维码生成模式 - 创建 ParsePanel 组件处理二维码解析模式 - 简化 index.tsx 为容器组件 (340行 → 47行) - 删除未使用的旧组件文件 (QrCodeToUrlSection, UrlToQrCodeSection) - 清理 types.ts 中未使用的类型定义 - 603 个测试全部通过
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { Grid } from '@mui/material';
|
|
import TextInputArea from '@/components/TextInputArea';
|
|
import QrCodePreview from '@/components/QrCodePreview';
|
|
import { useSnackbar } from '@/components/GlobalSnackbar';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
import { useQrCodeContext } from '../contexts/QrCodeContext';
|
|
|
|
export default function GeneratePanel() {
|
|
const { t } = useLazyTranslation('qrCode');
|
|
const { showMessage } = useSnackbar();
|
|
const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
|
|
|
|
return (
|
|
<Grid container spacing={3}>
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<TextInputArea
|
|
title={t('qrCode:urlInputLabel')}
|
|
value={generatorState.textToEncode}
|
|
onChange={setTextToEncode}
|
|
placeholder={t('qrCode:urlInputPlaceholder')}
|
|
showCount
|
|
showClear
|
|
allowCopy
|
|
externalError={generatorState.inputError}
|
|
showMessage={showMessage}
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<QrCodePreview
|
|
qrCodeDataUrl={generatorState.qrCodeDataUrl}
|
|
onDownload={downloadQrCode}
|
|
onCopy={copyQrCode}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|