雨霖铃
df0b9440ca
- 创建 QrCodeContext 和 QrCodeProvider 管理共享状态 - 提取 useQrCode Hook 封装所有状态和业务逻辑 - 创建 GeneratePanel 组件处理二维码生成模式 - 创建 ParsePanel 组件处理二维码解析模式 - 简化 index.tsx 为容器组件 (340行 → 47行) - 删除未使用的旧组件文件 (QrCodeToUrlSection, UrlToQrCodeSection) - 清理 types.ts 中未使用的类型定义 - 603 个测试全部通过
53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { Box, Container, useMediaQuery, useTheme } from '@mui/material';
|
|
import QrCodeIcon from '@mui/icons-material/QrCode';
|
|
import PageHeader from '@/components/PageHeader';
|
|
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
|
import { qrCodePageStyles } from '@/config/pageTheme';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
import { QrCodeContext } from './contexts/QrCodeContext';
|
|
import { useQrCode } from './hooks/useQrCode';
|
|
import GeneratePanel from './components/GeneratePanel';
|
|
import ParsePanel from './components/ParsePanel';
|
|
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();
|
|
|
|
// 模式选项
|
|
const modeOptions = [
|
|
{ value: 'generate' as QrCodeMode, label: t('qrCode:urlToQr') },
|
|
{ value: 'parse' as QrCodeMode, label: t('qrCode:qrToUrl') },
|
|
];
|
|
|
|
return (
|
|
<QrCodeContext.Provider value={qrCode}>
|
|
<Box>
|
|
<Container
|
|
maxWidth={isDesktop ? 'lg' : false}
|
|
sx={{ py: 2, maxWidth: isDesktop ? undefined : 400 }}
|
|
>
|
|
<PageHeader
|
|
title={t('qrCode:pageTitle')}
|
|
subtitle={t('qrCode:pageSubtitle')}
|
|
icon={<QrCodeIcon />}
|
|
iconColor={qrCodePageStyles.primaryColor}
|
|
sx={{ mb: 2.5 }}
|
|
/>
|
|
|
|
<SwitchButtonGroup
|
|
value={qrCode.mode}
|
|
options={modeOptions}
|
|
onChange={qrCode.setMode}
|
|
sx={{ mb: 3 }}
|
|
/>
|
|
|
|
{qrCode.mode === 'generate' ? <GeneratePanel /> : <ParsePanel />}
|
|
</Container>
|
|
</Box>
|
|
</QrCodeContext.Provider>
|
|
);
|
|
}
|