rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
雨霖铃
2026-05-21 23:46:44 +08:00
parent 8902bc0f10
commit 83bf9dd342
6 changed files with 68 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ImageUploader.tsx
+28 -36
View File
@@ -1,8 +1,5 @@
import { useCallback, useEffect, useRef } from 'react'; import { useCallback, useEffect, useRef } from 'react';
import { Box, IconButton, Typography } from '@mui/material'; import { Image, X } from 'lucide-react';
import ImageIcon from '@mui/icons-material/Image';
import ClearIcon from '@mui/icons-material/Clear';
import { qrCodePageStyles } from '@/config/pageTheme';
import { useSnackbar } from '@/components/GlobalSnackbar'; import { useSnackbar } from '@/components/GlobalSnackbar';
import { useLazyTranslation } from '@/utils/useLazyTranslation'; import { useLazyTranslation } from '@/utils/useLazyTranslation';
@@ -115,9 +112,14 @@ const ImageUploader = ({
}, [showMessage, handleFileChange, t]); }, [showMessage, handleFileChange, t]);
return ( return (
<Box <div
className="qr-flex-grow" className={`flex flex-col items-center justify-center h-[250px] border-2 border-dashed rounded-xl p-4 cursor-pointer transition-all duration-200 ${
sx={qrCodePageStyles.DROPZONE(dragging, !!selectedFile)} 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} onDragOver={handleDragOver}
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDrop} onDrop={handleDrop}
@@ -127,52 +129,42 @@ const ImageUploader = ({
type="file" type="file"
accept="image/*" accept="image/*"
onChange={handleInputChange} onChange={handleInputChange}
style={{ display: 'none' }} className="hidden"
id="qr-code-upload" id="qr-code-upload"
/> />
<label <label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
htmlFor="qr-code-upload"
style={{ cursor: 'pointer', textAlign: 'center', width: '100%' }}
>
{selectedFile ? ( {selectedFile ? (
<Box sx={qrCodePageStyles.IMAGE_PREVIEW_WRAPPER}> <div className="text-center w-full relative">
<Box sx={qrCodePageStyles.IMAGE_PREVIEW_BOX}> <div className="relative inline-block">
<img <img
src={previewUrl} src={previewUrl}
alt="QR Code Preview" alt="QR Code Preview"
style={qrCodePageStyles.IMAGE_PREVIEW_IMG} className="max-w-full max-h-40 rounded-lg object-contain"
/> />
<IconButton <button
size="small" type="button"
data-testid="ClearIcon"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
handleClearFile(); 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" /> <X className="w-3 h-3" />
</IconButton> </button>
</Box> </div>
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}> <span className="block text-sm text-gray-500 mt-2">{selectedFile.name}</span>
{selectedFile.name} <span className="block text-xs text-gray-400">{t('qrCode:clickToChange')}</span>
</Typography> </div>
<Typography variant="caption" color="text.secondary">
{t('qrCode:clickToChange')}
</Typography>
</Box>
) : ( ) : (
<> <>
<ImageIcon sx={{ fontSize: 48, color: 'text.disabled', mb: 2 }} /> <Image data-testid="ImageIcon" className="w-12 h-12 text-gray-400 mx-auto mb-2" />
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}> <span className="block text-sm text-gray-500 mb-1">{t('qrCode:clickToUpload')}</span>
{t('qrCode:clickToUpload')} <span className="block text-xs text-gray-400">{t('qrCode:supportFormats')}</span>
</Typography>
<Typography variant="caption" color="text.secondary">
{t('qrCode:supportFormats')}
</Typography>
</> </>
)} )}
</label> </label>
</Box> </div>
); );
}; };
components/QrCodePreview.tsx
+21 -26
View File
@@ -1,7 +1,4 @@
import { Box, Button, Typography } from '@mui/material'; import { Download, Copy } from 'lucide-react';
import DownloadIcon from '@mui/icons-material/Download';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import { qrCodePageStyles } from '@/config/pageTheme';
import { useLazyTranslation } from '@/utils/useLazyTranslation'; import { useLazyTranslation } from '@/utils/useLazyTranslation';
interface QrCodePreviewProps { interface QrCodePreviewProps {
@@ -18,38 +15,36 @@ const QrCodePreview = ({ qrCodeDataUrl, onDownload, onCopy }: QrCodePreviewProps
if (!qrCodeDataUrl) { if (!qrCodeDataUrl) {
return ( return (
<Box sx={qrCodePageStyles.QR_PREVIEW_CONTAINER}> <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">
<Typography variant="body2" color="text.secondary" sx={qrCodePageStyles.PLACEHOLDER_TEXT}> <span className="text-sm text-gray-500 text-center">{t('qrCode:qrCodeWillShow')}</span>
{t('qrCode:qrCodeWillShow')} </div>
</Typography>
</Box>
); );
} }
return ( return (
<Box sx={qrCodePageStyles.QR_PREVIEW_CONTAINER}> <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">
<Box sx={qrCodePageStyles.QR_PREVIEW_INNER}> <div className="flex flex-col items-center w-full">
<img src={qrCodeDataUrl} alt="QR Code" style={qrCodePageStyles.QR_PREVIEW_IMAGE} /> <img src={qrCodeDataUrl} alt="QR Code" className="w-[250px] h-[250px] block" />
<Box sx={qrCodePageStyles.QR_PREVIEW_ACTIONS}> <div className="flex gap-2 mt-4">
<Button <button
variant="outlined" type="button"
startIcon={<DownloadIcon />}
onClick={onDownload} 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')} {t('qrCode:downloadButton')}
</Button> </button>
<Button <button
variant="contained" type="button"
startIcon={<ContentCopyIcon />}
onClick={onCopy} 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')} {t('qrCode:copyQrButton')}
</Button> </button>
</Box> </div>
</Box> </div>
</Box> </div>
); );
}; };
pages/QrCode/__tests__/index.test.tsx
+1 -1
View File
@@ -85,7 +85,7 @@ describe('QrCodePage', () => {
it('应该渲染双栏布局容器', () => { it('应该渲染双栏布局容器', () => {
const { container } = render(<QrCodePage />); 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(); expect(gridContainer).toBeInTheDocument();
}); });
}); });
pages/QrCode/components/GeneratePanel.tsx
+6 -7
View File
@@ -1,4 +1,3 @@
import { Grid } from '@mui/material';
import TextInputArea from '@/components/TextInputArea'; import TextInputArea from '@/components/TextInputArea';
import QrCodePreview from '@/components/QrCodePreview'; import QrCodePreview from '@/components/QrCodePreview';
import { useSnackbar } from '@/components/GlobalSnackbar'; import { useSnackbar } from '@/components/GlobalSnackbar';
@@ -11,8 +10,8 @@ export default function GeneratePanel() {
const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext(); const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
return ( return (
<Grid container spacing={3}> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Grid size={{ xs: 12, md: 6 }}> <div>
<TextInputArea <TextInputArea
title={t('qrCode:urlInputLabel')} title={t('qrCode:urlInputLabel')}
value={generatorState.textToEncode} value={generatorState.textToEncode}
@@ -24,14 +23,14 @@ export default function GeneratePanel() {
externalError={generatorState.inputError} externalError={generatorState.inputError}
showMessage={showMessage} showMessage={showMessage}
/> />
</Grid> </div>
<Grid size={{ xs: 12, md: 6 }}> <div>
<QrCodePreview <QrCodePreview
qrCodeDataUrl={generatorState.qrCodeDataUrl} qrCodeDataUrl={generatorState.qrCodeDataUrl}
onDownload={downloadQrCode} onDownload={downloadQrCode}
onCopy={copyQrCode} onCopy={copyQrCode}
/> />
</Grid> </div>
</Grid> </div>
); );
} }
pages/QrCode/components/ParsePanel.tsx
+6 -7
View File
@@ -1,5 +1,4 @@
import { useEffect, useCallback } from 'react'; import { useEffect, useCallback } from 'react';
import { Grid } from '@mui/material';
import TextInputArea from '@/components/TextInputArea'; import TextInputArea from '@/components/TextInputArea';
import ImageUploader from '@/components/ImageUploader'; import ImageUploader from '@/components/ImageUploader';
import { useSnackbar } from '@/components/GlobalSnackbar'; import { useSnackbar } from '@/components/GlobalSnackbar';
@@ -57,8 +56,8 @@ export default function ParsePanel() {
}, [handlePaste]); }, [handlePaste]);
return ( return (
<Grid container spacing={3}> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Grid size={{ xs: 12, md: 6 }}> <div>
<ImageUploader <ImageUploader
selectedFile={parserState.selectedFile} selectedFile={parserState.selectedFile}
onFileChange={handleFileChange} onFileChange={handleFileChange}
@@ -68,8 +67,8 @@ export default function ParsePanel() {
dragging={parserState.dragging} dragging={parserState.dragging}
onDraggingChange={(dragging) => setParserState((prev) => ({ ...prev, dragging }))} onDraggingChange={(dragging) => setParserState((prev) => ({ ...prev, dragging }))}
/> />
</Grid> </div>
<Grid size={{ xs: 12, md: 6 }}> <div>
<TextInputArea <TextInputArea
title={t('qrCode:resultLabel')} title={t('qrCode:resultLabel')}
value={parserState.decodedResult} value={parserState.decodedResult}
@@ -80,7 +79,7 @@ export default function ParsePanel() {
externalError={parserState.parseError} externalError={parserState.parseError}
showMessage={showMessage} showMessage={showMessage}
/> />
</Grid> </div>
</Grid> </div>
); );
} }
pages/QrCode/index.tsx
+6 -12
View File
@@ -1,5 +1,4 @@
import { Box, Container, useMediaQuery, useTheme } from '@mui/material'; import { QrCode } from 'lucide-react';
import QrCodeIcon from '@mui/icons-material/QrCode';
import PageHeader from '@/components/PageHeader'; import PageHeader from '@/components/PageHeader';
import SwitchButtonGroup from '@/components/SwitchButtonGroup'; import SwitchButtonGroup from '@/components/SwitchButtonGroup';
import { qrCodePageStyles } from '@/config/pageTheme'; import { qrCodePageStyles } from '@/config/pageTheme';
@@ -12,8 +11,6 @@ import type { QrCodeMode } from './types';
export default function Index() { export default function Index() {
const { t } = useLazyTranslation('qrCode'); const { t } = useLazyTranslation('qrCode');
const theme = useTheme();
const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
const qrCode = useQrCode(); const qrCode = useQrCode();
// 模式选项 // 模式选项
@@ -24,15 +21,12 @@ export default function Index() {
return ( return (
<QrCodeContext.Provider value={qrCode}> <QrCodeContext.Provider value={qrCode}>
<Box> <div>
<Container <div className="py-2 max-w-[400px] md:max-w-none">
maxWidth={isDesktop ? 'lg' : false}
sx={{ py: 2, maxWidth: isDesktop ? undefined : 400 }}
>
<PageHeader <PageHeader
title={t('qrCode:pageTitle')} title={t('qrCode:pageTitle')}
subtitle={t('qrCode:pageSubtitle')} subtitle={t('qrCode:pageSubtitle')}
icon={<QrCodeIcon />} icon={<QrCode />}
iconColor={qrCodePageStyles.primaryColor} iconColor={qrCodePageStyles.primaryColor}
sx={{ mb: 2.5 }} sx={{ mb: 2.5 }}
/> />
@@ -45,8 +39,8 @@ export default function Index() {
/> />
{qrCode.mode === 'generate' ? <GeneratePanel /> : <ParsePanel />} {qrCode.mode === 'generate' ? <GeneratePanel /> : <ParsePanel />}
</Container> </div>
</Box> </div>
</QrCodeContext.Provider> </QrCodeContext.Provider>
); );
} }