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 大小警告阈值以优化构建性能
108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
import { useMemo, useState } from 'react';
|
|
import { alpha, Box, Container, Grid, Paper, Typography } from '@mui/material';
|
|
import PageHeader from '@/components/PageHeader';
|
|
import TextInputArea from '@/components/TextInputArea';
|
|
import DescriptionIcon from '@mui/icons-material/Description';
|
|
import { formatByteSize, getTextStats } from '@/utils/textStatistics';
|
|
import { textStatisticsPageStyles } from '@/config/pageTheme';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
|
|
/**
|
|
* 文本统计页面组件
|
|
*
|
|
* 提供实时的文本分析功能，包括字符数、单词数、行数和字节大小。
|
|
*/
|
|
export default function Index() {
|
|
const { t } = useLazyTranslation('textStatistics');
|
|
const [text, setText] = useState('');
|
|
|
|
// 实时计算统计信息，使用 useMemo 优化性能
|
|
// 对于 10,000 字符以上的文本，Intl.Segmenter 也能保持良好的性能
|
|
const stats = useMemo(() => getTextStats(text), [text]);
|
|
|
|
const statItems = [
|
|
{ label: t('textStatistics:characters'), value: stats.characters },
|
|
{ label: t('textStatistics:words'), value: stats.words },
|
|
{ label: t('textStatistics:lines'), value: stats.lines },
|
|
{ label: t('textStatistics:bytes'), value: formatByteSize(stats.bytes) },
|
|
];
|
|
|
|
return (
|
|
<Box>
|
|
<Container sx={{ p: 2 }}>
|
|
{/* 头部区域 */}
|
|
<PageHeader
|
|
title={t('textStatistics:pageTitle')}
|
|
subtitle={t('textStatistics:pageSubtitle')}
|
|
icon={<DescriptionIcon />}
|
|
iconColor={textStatisticsPageStyles.primaryColor}
|
|
/>
|
|
|
|
{/* 文本输入区域 */}
|
|
<TextInputArea
|
|
value={text}
|
|
onChange={setText}
|
|
placeholder={t('textStatistics:placeholder')}
|
|
minRows={8}
|
|
maxRows={15}
|
|
showClear={false}
|
|
sx={{ mb: 3 }}
|
|
/>
|
|
|
|
{/* 统计结果展示区域 */}
|
|
<Grid container spacing={2}>
|
|
{statItems.map((item) => (
|
|
<Grid size={{ xs: 12, md: 3 }} key={item.label}>
|
|
<Paper
|
|
elevation={0}
|
|
sx={{
|
|
p: 2,
|
|
textAlign: 'center',
|
|
borderRadius: 4,
|
|
bgcolor: textStatisticsPageStyles.cardBg,
|
|
border: '1px solid',
|
|
borderColor: textStatisticsPageStyles.cardBorder,
|
|
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', // 平滑的切换动画
|
|
minHeight: { xs: '64px', md: '90px' },
|
|
display: 'flex',
|
|
flexDirection: { xs: 'row', md: 'column' }, // 小屏幕横向排列提高空间利用率
|
|
alignItems: 'center',
|
|
justifyContent: { xs: 'space-between', md: 'center' },
|
|
px: { xs: 3, md: 2 },
|
|
'&:hover': {
|
|
transform: 'translateY(-2px)',
|
|
boxShadow: () =>
|
|
`0 4px 12px ${alpha(textStatisticsPageStyles.primaryColor, 0.15)}`,
|
|
borderColor: textStatisticsPageStyles.primaryColor,
|
|
},
|
|
lineHeight: 1.6,
|
|
fontSize: '0.9rem',
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
<Typography
|
|
color="text.secondary"
|
|
sx={{
|
|
mb: { xs: 0, md: 0.5 },
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
{item.label}
|
|
</Typography>
|
|
<Typography
|
|
sx={{
|
|
color: textStatisticsPageStyles.primaryColor, // 高亮显示核心数值
|
|
wordBreak: 'break-all',
|
|
}}
|
|
>
|
|
{item.value}
|
|
</Typography>
|
|
</Paper>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|