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 大小警告阈值以优化构建性能
66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import { Box, Container, Stack } from '@mui/material';
|
|
import TextFieldsIcon from '@mui/icons-material/TextFields';
|
|
import UploadFileIcon from '@mui/icons-material/UploadFile';
|
|
import ImageIcon from '@mui/icons-material/Image';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
import PageHeader from '@/components/PageHeader';
|
|
import { base64ConverterPageStyles } from '@/config/pageTheme';
|
|
import { useStorageState } from '@/utils/useStorageState';
|
|
import type { Base64ConverterPageMode } from '@/types/storage';
|
|
import TextMode from './TextMode';
|
|
import FileMode from './FileMode';
|
|
import ImageMode from './ImageMode';
|
|
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
|
|
|
const VALID_PAGE_MODES: readonly Base64ConverterPageMode[] = ['text', 'file', 'image'];
|
|
|
|
const isValidPageMode = (val: unknown): val is Base64ConverterPageMode =>
|
|
typeof val === 'string' && (VALID_PAGE_MODES as readonly string[]).includes(val);
|
|
|
|
type PageMode = Base64ConverterPageMode;
|
|
|
|
export default function Index() {
|
|
const { t } = useLazyTranslation('base64Converter');
|
|
const [pageMode, setPageMode] = useStorageState(
|
|
'base64Converter/pageMode',
|
|
'text',
|
|
isValidPageMode,
|
|
);
|
|
|
|
const modeIcon: Record<PageMode, React.ReactNode> = {
|
|
text: <TextFieldsIcon />,
|
|
file: <UploadFileIcon />,
|
|
image: <ImageIcon />,
|
|
};
|
|
|
|
return (
|
|
<Box>
|
|
<Container sx={{ p: 2 }}>
|
|
<PageHeader
|
|
title={t('base64Converter:pageTitle')}
|
|
subtitle={t('base64Converter:pageSubtitle')}
|
|
icon={modeIcon[pageMode]}
|
|
iconColor={base64ConverterPageStyles.primaryColor}
|
|
/>
|
|
|
|
<Stack spacing={2.5}>
|
|
<SwitchButtonGroup
|
|
value={pageMode}
|
|
options={[
|
|
{ value: 'text', label: t('base64Converter:textMode') },
|
|
{ value: 'file', label: t('base64Converter:fileMode') },
|
|
{ value: 'image', label: t('base64Converter:imageMode') },
|
|
]}
|
|
onChange={(value: PageMode) => setPageMode(value)}
|
|
size="small"
|
|
/>
|
|
|
|
{pageMode === 'text' && <TextMode onSwitchToImageMode={() => setPageMode('image')} />}
|
|
{pageMode === 'file' && <FileMode />}
|
|
{pageMode === 'image' && <ImageMode />}
|
|
</Stack>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|