用 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>
   );
 };
 

pages/QrCode/__tests__/index.test.tsx

@@ -85,7 +85,7 @@ describe('QrCodePage', () => {
 
   it('应该渲染双栏布局容器', () => {
     const { container } = render(<QrCodePage />);
-    const gridContainer = container.querySelector('.MuiGrid-container');
+    const gridContainer = container.querySelector('.grid.grid-cols-1.md\\:grid-cols-2');
     expect(gridContainer).toBeInTheDocument();
   });
 });

pages/QrCode/components/GeneratePanel.tsx

@@ -1,4 +1,3 @@
-import { Grid } from '@mui/material';
 import TextInputArea from '@/components/TextInputArea';
 import QrCodePreview from '@/components/QrCodePreview';
 import { useSnackbar } from '@/components/GlobalSnackbar';
@@ -11,8 +10,8 @@ export default function GeneratePanel() {
   const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
 
   return (
-    <Grid container spacing={3}>
-      <Grid size={{ xs: 12, md: 6 }}>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div>
         <TextInputArea
           title={t('qrCode:urlInputLabel')}
           value={generatorState.textToEncode}
@@ -24,14 +23,14 @@ export default function GeneratePanel() {
           externalError={generatorState.inputError}
           showMessage={showMessage}
         />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6 }}>
+      </div>
+      <div>
         <QrCodePreview
           qrCodeDataUrl={generatorState.qrCodeDataUrl}
           onDownload={downloadQrCode}
           onCopy={copyQrCode}
         />
-      </Grid>
-    </Grid>
+      </div>
+    </div>
   );
 }

pages/QrCode/components/ParsePanel.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useCallback } from 'react';
-import { Grid } from '@mui/material';
 import TextInputArea from '@/components/TextInputArea';
 import ImageUploader from '@/components/ImageUploader';
 import { useSnackbar } from '@/components/GlobalSnackbar';
@@ -57,8 +56,8 @@ export default function ParsePanel() {
   }, [handlePaste]);
 
   return (
-    <Grid container spacing={3}>
-      <Grid size={{ xs: 12, md: 6 }}>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div>
         <ImageUploader
           selectedFile={parserState.selectedFile}
           onFileChange={handleFileChange}
@@ -68,8 +67,8 @@ export default function ParsePanel() {
           dragging={parserState.dragging}
           onDraggingChange={(dragging) => setParserState((prev) => ({ ...prev, dragging }))}
         />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6 }}>
+      </div>
+      <div>
         <TextInputArea
           title={t('qrCode:resultLabel')}
           value={parserState.decodedResult}
@@ -80,7 +79,7 @@ export default function ParsePanel() {
           externalError={parserState.parseError}
           showMessage={showMessage}
         />
-      </Grid>
-    </Grid>
+      </div>
+    </div>
   );
 }

pages/QrCode/index.tsx

@@ -1,5 +1,4 @@
-import { Box, Container, useMediaQuery, useTheme } from '@mui/material';
-import QrCodeIcon from '@mui/icons-material/QrCode';
+import { QrCode } from 'lucide-react';
 import PageHeader from '@/components/PageHeader';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import { qrCodePageStyles } from '@/config/pageTheme';
@@ -12,8 +11,6 @@ import type { QrCodeMode } from './types';
 
 export default function Index() {
   const { t } = useLazyTranslation('qrCode');
-  const theme = useTheme();
-  const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
   const qrCode = useQrCode();
 
   // 模式选项
@@ -24,15 +21,12 @@ export default function Index() {
 
   return (
     <QrCodeContext.Provider value={qrCode}>
-      <Box>
-        <Container
-          maxWidth={isDesktop ? 'lg' : false}
-          sx={{ py: 2, maxWidth: isDesktop ? undefined : 400 }}
-        >
+      <div>
+        <div className="py-2 max-w-[400px] md:max-w-none">
           <PageHeader
             title={t('qrCode:pageTitle')}
             subtitle={t('qrCode:pageSubtitle')}
-            icon={<QrCodeIcon />}
+            icon={<QrCode />}
             iconColor={qrCodePageStyles.primaryColor}
             sx={{ mb: 2.5 }}
           />
@@ -45,8 +39,8 @@ export default function Index() {
           />
 
           {qrCode.mode === 'generate' ? <GeneratePanel /> : <ParsePanel />}
-        </Container>
-      </Box>
+        </div>
+      </div>
     </QrCodeContext.Provider>
   );
 }