雨霖铃
2870e01610
- 创建 pages/QrCode/types.ts 定义状态类型接口 - 提取 QrCodePreview 组件用于二维码预览和操作 - 提取 ImageUploader 组件封装图片上传、拖拽、粘贴逻辑 - 重构 UrlToQrCodeSection 状态提升到父组件 - 重构 QrCodeToUrlSection 通过回调传递解析结果 - 更新主页面 index.tsx 集中管理所有状态 - 为 QrCodePreview 和 ImageUploader 添加单元测试 (23 个用例)
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { Box, Button, Typography } from '@mui/material';
|
|
import DownloadIcon from '@mui/icons-material/Download';
|
|
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
|
import { qrCodePageStyles } from '@/config/pageTheme';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface QrCodePreviewProps {
|
|
/** 二维码 Data URL */
|
|
qrCodeDataUrl: string;
|
|
/** 下载回调 */
|
|
onDownload: () => void;
|
|
/** 复制回调 */
|
|
onCopy: () => void;
|
|
}
|
|
|
|
const QrCodePreview = ({ qrCodeDataUrl, onDownload, onCopy }: QrCodePreviewProps) => {
|
|
const { t } = useTranslation(['qrCode']);
|
|
|
|
if (!qrCodeDataUrl) {
|
|
return (
|
|
<Box sx={qrCodePageStyles.QR_PREVIEW_CONTAINER}>
|
|
<Typography variant="body2" color="text.secondary" sx={qrCodePageStyles.PLACEHOLDER_TEXT}>
|
|
{t('qrCode:qrCodeWillShow')}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box sx={qrCodePageStyles.QR_PREVIEW_CONTAINER}>
|
|
<Box sx={qrCodePageStyles.QR_PREVIEW_INNER}>
|
|
<img src={qrCodeDataUrl} alt="QR Code" style={qrCodePageStyles.QR_PREVIEW_IMAGE} />
|
|
<Box sx={qrCodePageStyles.QR_PREVIEW_ACTIONS}>
|
|
<Button
|
|
variant="outlined"
|
|
startIcon={<DownloadIcon />}
|
|
onClick={onDownload}
|
|
sx={qrCodePageStyles.DOWNLOAD_BUTTON}
|
|
>
|
|
{t('qrCode:downloadButton')}
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
startIcon={<ContentCopyIcon />}
|
|
onClick={onCopy}
|
|
sx={qrCodePageStyles.COPY_BUTTON}
|
|
>
|
|
{t('qrCode:copyQrButton')}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default QrCodePreview;
|