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

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