用 Tailwind CSS 重写 QrCode 页面及相关组件

components/ImageUploader.tsx

@@ -1,8 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
-import { Box, IconButton, Typography } from '@mui/material';
-import ImageIcon from '@mui/icons-material/Image';
-import ClearIcon from '@mui/icons-material/Clear';
-import { qrCodePageStyles } from '@/config/pageTheme';
+import { Image, X } from 'lucide-react';
 import { useSnackbar } from '@/components/GlobalSnackbar';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
@@ -115,9 +112,14 @@ const ImageUploader = ({
   }, [showMessage, handleFileChange, t]);
 
   return (
-    <Box
-      className="qr-flex-grow"
-      sx={qrCodePageStyles.DROPZONE(dragging, !!selectedFile)}
+    <div
+      className={`flex flex-col items-center justify-center h-[250px] border-2 border-dashed rounded-xl p-4 cursor-pointer transition-all duration-200 ${
+        dragging
+          ? 'border-green-600 bg-green-50'
+          : selectedFile
+            ? 'border-green-600 bg-green-50/50'
+            : 'border-gray-300 bg-gray-50 hover:border-green-600 hover:bg-green-50/50'
+      }`}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
@@ -127,52 +129,42 @@ const ImageUploader = ({
         type="file"
         accept="image/*"
         onChange={handleInputChange}
-        style={{ display: 'none' }}
+        className="hidden"
         id="qr-code-upload"
       />
-      <label
-        htmlFor="qr-code-upload"
-        style={{ cursor: 'pointer', textAlign: 'center', width: '100%' }}
-      >
+      <label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
         {selectedFile ? (
-          <Box sx={qrCodePageStyles.IMAGE_PREVIEW_WRAPPER}>
-            <Box sx={qrCodePageStyles.IMAGE_PREVIEW_BOX}>
+          <div className="text-center w-full relative">
+            <div className="relative inline-block">
               <img
                 src={previewUrl}
                 alt="QR Code Preview"
-                style={qrCodePageStyles.IMAGE_PREVIEW_IMG}
+                className="max-w-full max-h-40 rounded-lg object-contain"
               />
-              <IconButton
-                size="small"
+              <button
+                type="button"
+                data-testid="ClearIcon"
                 onClick={(e) => {
                   e.stopPropagation();
                   handleClearFile();
                 }}
-                sx={qrCodePageStyles.CLEAR_BUTTON}
+                className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"
               >
-                <ClearIcon fontSize="small" />
-              </IconButton>
-            </Box>
-            <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
-              {selectedFile.name}
-            </Typography>
-            <Typography variant="caption" color="text.secondary">
-              {t('qrCode:clickToChange')}
-            </Typography>
-          </Box>
+                <X className="w-3 h-3" />
+              </button>
+            </div>
+            <span className="block text-sm text-gray-500 mt-2">{selectedFile.name}</span>
+            <span className="block text-xs text-gray-400">{t('qrCode:clickToChange')}</span>
+          </div>
         ) : (
           <>
-            <ImageIcon sx={{ fontSize: 48, color: 'text.disabled', mb: 2 }} />
-            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-              {t('qrCode:clickToUpload')}
-            </Typography>
-            <Typography variant="caption" color="text.secondary">
-              {t('qrCode:supportFormats')}
-            </Typography>
+            <Image data-testid="ImageIcon" className="w-12 h-12 text-gray-400 mx-auto mb-2" />
+            <span className="block text-sm text-gray-500 mb-1">{t('qrCode:clickToUpload')}</span>
+            <span className="block text-xs text-gray-400">{t('qrCode:supportFormats')}</span>
           </>
         )}
       </label>
-    </Box>
+    </div>
   );
 };
 

components/QrCodePreview.tsx

@@ -1,7 +1,4 @@
-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 { Download, Copy } from 'lucide-react';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 interface QrCodePreviewProps {
@@ -18,38 +15,36 @@ const QrCodePreview = ({ qrCodeDataUrl, onDownload, onCopy }: QrCodePreviewProps
 
   if (!qrCodeDataUrl) {
     return (
-      <Box sx={qrCodePageStyles.QR_PREVIEW_CONTAINER}>
-        <Typography variant="body2" color="text.secondary" sx={qrCodePageStyles.PLACEHOLDER_TEXT}>
-          {t('qrCode:qrCodeWillShow')}
-        </Typography>
-      </Box>
+      <div className="flex flex-col justify-center items-center min-h-[200px] border-2 border-dashed border-gray-300 rounded-xl p-4 bg-gray-50">
+        <span className="text-sm text-gray-500 text-center">{t('qrCode:qrCodeWillShow')}</span>
+      </div>
     );
   }
 
   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 />}
+    <div className="flex flex-col justify-center items-center min-h-[200px] border-2 border-dashed border-gray-300 rounded-xl p-4 bg-gray-50">
+      <div className="flex flex-col items-center w-full">
+        <img src={qrCodeDataUrl} alt="QR Code" className="w-[250px] h-[250px] block" />
+        <div className="flex gap-2 mt-4">
+          <button
+            type="button"
             onClick={onDownload}
-            sx={qrCodePageStyles.DOWNLOAD_BUTTON}
+            className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-green-700 bg-white border border-green-600 rounded-lg hover:bg-green-50 transition-colors"
           >
+            <Download className="w-4 h-4" />
             {t('qrCode:downloadButton')}
-          </Button>
-          <Button
-            variant="contained"
-            startIcon={<ContentCopyIcon />}
+          </button>
+          <button
+            type="button"
             onClick={onCopy}
-            sx={qrCodePageStyles.COPY_BUTTON}
+            className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors"
           >
+            <Copy className="w-4 h-4" />
             {t('qrCode:copyQrButton')}
-          </Button>
-        </Box>
-      </Box>
-    </Box>
+          </button>
+        </div>
+      </div>
+    </div>
   );
 };