refactor: 统一中文文案并简化组件结构,提升代码可读性
移除 chrome.i18n 后,将各功能页面、布局与工具模块的 UI 文案改为内联中文; 删除冗余注释与过度抽象(如 ToolCard、StatCard),精简 props 与状态管理; 同步优化 JsonTools、StorageCleaner、Timestamp、TestDataGenerator、Dashboard、 Base64Converter、RightClickRestorer、TextStatistics、TopBar、RouterProvider、 ThemeModeProvider 及生成器库与 utils 工具文件。
This commit is contained in:
@@ -1,17 +0,0 @@
|
||||
interface StatCardProps {
|
||||
label: string;
|
||||
value: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function StatCard({ label, value }: StatCardProps) {
|
||||
return (
|
||||
<div className="flex flex-col justify-center items-center p-4 text-center rounded-xl border border-border bg-card shadow-sm text-card-foreground hover:-translate-y-0.5 hover:shadow-md hover:border-primary/50 focus-within:ring-1 focus-within:ring-ring">
|
||||
<span className="text-xs font-medium text-muted-foreground tracking-wider mb-1 select-none">
|
||||
{label}
|
||||
</span>
|
||||
<span className="font-mono text-lg md:text-2xl font-extrabold text-primary break-all tracking-tight leading-none tabular-nums select-all">
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +1,24 @@
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
import StatCard from './components/StatCard';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useTextStatistics } from './useTextStatistics';
|
||||
|
||||
export default function Index() {
|
||||
const { text, stats, setText } = useTextStatistics();
|
||||
|
||||
const statItems = [
|
||||
{ label: '字符数', value: stats.characters },
|
||||
{ label: '单词数', value: stats.words },
|
||||
{ label: '行数', value: stats.lines },
|
||||
{ label: '字节大小', value: formatBytes(stats.bytes) },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-4 w-full space-y-4">
|
||||
<TextInputArea
|
||||
value={text}
|
||||
onChange={setText}
|
||||
placeholder={'在此输入或粘贴文本...'}
|
||||
placeholder="在此输入或粘贴文本..."
|
||||
minRows={10}
|
||||
maxRows={18}
|
||||
showClear={true}
|
||||
@@ -19,10 +26,22 @@ export default function Index() {
|
||||
/>
|
||||
|
||||
<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)} />
|
||||
{statItems.map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className={cn(
|
||||
'flex flex-col justify-center items-center p-4 text-center rounded-xl border border-border bg-card shadow-sm text-card-foreground',
|
||||
'hover:-translate-y-0.5 hover:shadow-md hover:border-primary/50 focus-within:ring-1 focus-within:ring-ring',
|
||||
)}
|
||||
>
|
||||
<span className="text-xs font-medium text-muted-foreground tracking-wider mb-1 select-none">
|
||||
{item.label}
|
||||
</span>
|
||||
<span className="font-mono text-lg md:text-2xl font-extrabold text-primary break-all tracking-tight leading-none tabular-nums select-all">
|
||||
{item.value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { getTextStats, type TextStats } from '@/utils/textStatistics';
|
||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||
|
||||
@@ -10,12 +10,6 @@ export interface UseTextStatisticsReturn {
|
||||
|
||||
export function useTextStatistics(): UseTextStatisticsReturn {
|
||||
const [text, setText] = useState('');
|
||||
const [debouncedText, setDebouncedText] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => setDebouncedText(text), 200);
|
||||
return () => clearTimeout(handle);
|
||||
}, [text]);
|
||||
|
||||
const handleContextMenuData = useCallback((payload: string) => {
|
||||
setText(payload);
|
||||
@@ -23,7 +17,7 @@ export function useTextStatistics(): UseTextStatisticsReturn {
|
||||
|
||||
useContextMenuData({ featureKey: 'textStatistics', onData: handleContextMenuData });
|
||||
|
||||
const stats = useMemo(() => getTextStats(debouncedText), [debouncedText]);
|
||||
const stats = getTextStats(text);
|
||||
|
||||
return { text, stats, setText };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user