雨霖铃
aa23a263fe
- 移除 react-i18next、i18next 及相关依赖
- 删除旧的 i18n/ 目录和 useLazyTranslation 工具
- 新增 utils/chromeI18n.ts 类型安全 wrapper（useI18n Hook + getMessage）
- 生成 public/_locales/{zh,en}/messages.json（298 个翻译 key）
- 批量更新 39+ 组件文件的导入和翻译调用
- 转换翻译键格式：namespace:key → namespace_key
- 修复 ErrorBoundary/PageErrorBoundary 从 withTranslation HOC 改为直接调用 getMessage
- 更新 vitest.setup.ts mock 加载实际翻译文本
- 修复 11 个测试文件的断言以匹配中文翻译
- TypeScript、ESLint、547 项测试全部通过
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { CheckCircle, XCircle } from 'lucide-react';
|
|
import type { CleaningResult as CleaningResultType } from '@/types/storage';
|
|
import { formatCleaningResult } from '@/utils/storageCleaner';
|
|
import { useI18n } from '@/utils/chromeI18n';
|
|
import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心类名合并工具
|
|
|
|
interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
result: CleaningResultType | null;
|
|
}
|
|
|
|
export default function CleaningResult({ result, className, ...props }: CleaningResultProps) {
|
|
const { t } = useI18n('storageCleaner');
|
|
|
|
if (!result) return null;
|
|
|
|
const isSuccess = result.success;
|
|
|
|
return (
|
|
<div className={cn('w-full', className)} {...props}>
|
|
{/* 2. 彻底重构容器类名结构：
|
|
- 成功状态：采用 Tailwind 官方推荐的 emerald 体系，利用 /10 (10% 透明度) 和 /20 (边框)。
|
|
- 失败状态：完全放权给标准的 border-destructive/20 和 bg-destructive/5。
|
|
- 这样在明暗双色模式切换时，色彩会自动与背景完美融为一体。
|
|
*/}
|
|
<div
|
|
className={cn(
|
|
'flex items-start gap-3 rounded-xl py-2.5 px-3.5 border shadow-sm',
|
|
isSuccess
|
|
? 'bg-emerald-500/5 border-emerald-500/20 text-emerald-600 dark:text-emerald-400'
|
|
: 'bg-destructive/5 border-destructive/20 text-destructive',
|
|
)}
|
|
>
|
|
{/* 3. 图标样式向系统语义全面对齐 */}
|
|
{isSuccess ? (
|
|
<CheckCircle className="h-4 w-4 shrink-0 mt-0.5 text-emerald-500" />
|
|
) : (
|
|
<XCircle className="h-4 w-4 shrink-0 mt-0.5 text-destructive" />
|
|
)}
|
|
|
|
{/* 4. 文本排版细节微调 */}
|
|
<span className="text-xs sm:text-sm font-semibold leading-relaxed break-all">
|
|
{isSuccess
|
|
? formatCleaningResult(result, t)
|
|
: result.error || t('storageCleaner:partialFailure')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|