LingandRX
373fc0496c
统一简化多个页面里的CopyButton调用，删除不再需要的空回调参数 * feat: 添加clearCookies函数的单元测试并修复cookie域名处理逻辑 * feat: 增强 data URI 处理，支持带参数的前缀并更新相关测试 * fix: 修正 AGENTS.md 中 TypeScript 类型检查命令的描述 * feat: 添加 settings.local.json 文件以配置 Bash 权限 * perf: 预设背景色避免 Popup 弹窗白屏闪烁 * perf: 避免图标过早实例化，传递组件引用而非 JSX 节点 * feat: 添加 useLazyTranslation 和 preloadNamespaces 函数以支持动态加载 i18n 命名空间 * feat: 使用 useLazyTranslation 替换 useTranslation 以支持懒加载翻译 * feat: 添加 PageSkeleton 组件及其测试用例以支持页面加载骨架屏 * feat: 使用骨架屏替换加载状态指示器，优化用户体验 * feat: 优化 CopyButton 组件的复制功能，添加定时器管理复制状态 * feat: 调整 chunk 大小警告阈值以优化构建性能
75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import { Box, CircularProgress, Container, Stack, useMediaQuery, useTheme } from '@mui/material';
|
|
import QrCodeIcon from '@mui/icons-material/QrCode';
|
|
import UrlToQrCodeSection from '@/pages/QrCode/UrlToQrCodeSection';
|
|
import QrCodeToUrlSection from '@/pages/QrCode/QrCodeToUrlSection';
|
|
import { useStorageState } from '@/utils/useStorageState';
|
|
import { qrCodePageStyles } from '@/config/pageTheme';
|
|
import PageHeader from '@/components/PageHeader';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
|
|
export default function Index() {
|
|
const { t } = useLazyTranslation('qrCode');
|
|
const theme = useTheme();
|
|
const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
|
|
|
|
// 使用自定义钩子管理展开状态（移动端使用）
|
|
const [urlExpanded, setUrlExpanded, urlInitialized] = useStorageState('qrCode/urlExpanded', true);
|
|
const [qrExpanded, setQrExpanded, qrInitialized] = useStorageState('qrCode/qrExpanded', false);
|
|
|
|
// 初始化未完成时显示加载状态
|
|
if (!urlInitialized || !qrInitialized) {
|
|
return (
|
|
<Container sx={qrCodePageStyles.LOADING_CONTAINER}>
|
|
<CircularProgress />
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
const sections = isDesktop ? (
|
|
<>
|
|
<Box sx={qrCodePageStyles.GRID_CELL}>
|
|
<UrlToQrCodeSection
|
|
expanded={urlExpanded}
|
|
onExpandedChange={setUrlExpanded}
|
|
forceExpanded={isDesktop}
|
|
/>
|
|
</Box>
|
|
<Box sx={qrCodePageStyles.GRID_CELL}>
|
|
<QrCodeToUrlSection
|
|
expanded={qrExpanded}
|
|
onExpandedChange={setQrExpanded}
|
|
forceExpanded={isDesktop}
|
|
/>
|
|
</Box>
|
|
</>
|
|
) : (
|
|
<>
|
|
<UrlToQrCodeSection expanded={urlExpanded} onExpandedChange={setUrlExpanded} />
|
|
<QrCodeToUrlSection expanded={qrExpanded} onExpandedChange={setQrExpanded} />
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<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 }}
|
|
/>
|
|
|
|
{isDesktop ? (
|
|
<Box sx={qrCodePageStyles.LAYOUT_GRID}>{sections}</Box>
|
|
) : (
|
|
<Stack spacing={3}>{sections}</Stack>
|
|
)}
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|