雨霖铃
9c993b6cea
- 新增 StatCard 组件，简化统计信息的展示逻辑。 - 更新 TextStatistics 页面，使用 StatCard 组件替代原有的统计项渲染方式，提升代码可读性和维护性。
30 lines
924 B
TypeScript
30 lines
924 B
TypeScript
import TextInputArea from '@/components/TextInputArea';
|
|
import { formatBytes } from '@/utils/format';
|
|
import StatCard from './components/StatCard';
|
|
import { useTextStatistics } from './useTextStatistics';
|
|
|
|
export default function Index() {
|
|
const { text, stats, setText } = useTextStatistics();
|
|
|
|
return (
|
|
<div className="p-4 w-full space-y-4">
|
|
<TextInputArea
|
|
value={text}
|
|
onChange={setText}
|
|
placeholder={'在此输入或粘贴文本...'}
|
|
minRows={10}
|
|
maxRows={18}
|
|
showClear={true}
|
|
allowCopy={true}
|
|
/>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
<StatCard label="字符数" value={stats.characters} />
|
|
<StatCard label="单词数" value={stats.words} />
|
|
<StatCard label="行数" value={stats.lines} />
|
|
<StatCard label="字节大小" value={formatBytes(stats.bytes)} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|