refactor(qrcode): 提取独立组件并添加单元测试

- 创建 pages/QrCode/types.ts 定义状态类型接口 - 提取 QrCodePreview 组件用于二维码预览和操作 - 提取 ImageUploader 组件封装图片上传、拖拽、粘贴逻辑 - 重构 UrlToQrCodeSection 状态提升到父组件 - 重构 QrCodeToUrlSection 通过回调传递解析结果 - 更新主页面 index.tsx 集中管理所有状态 - 为 QrCodePreview 和 ImageUploader 添加单元测试 (23 个用例)
2026-05-20 21:59:57 +08:00
parent 9c03c585a8
commit 2870e01610
8 changed files with 865 additions and 241 deletions
@@ -0,0 +1,56 @@
+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;