雨霖铃
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>
87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
/**
|
||
* DecodeResultPaper
|
||
*
|
||
* FileMode 与 ImageMode 通用的 decode 结果展示组件。
|
||
* 提取了二者 decode 输出区完全一致的结构：
|
||
* 标题 → 可选预览（children）→ 文件信息 → 文件名输入 → 下载按钮
|
||
*
|
||
* FileMode 直接使用，ImageMode 通过 children 传入图片预览。
|
||
*/
|
||
import { Download } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { formatFileSize } from '@/utils/base64Converter';
|
||
import { useI18n } from '@/utils/chromeI18n';
|
||
|
||
interface DecodeResultPaperProps {
|
||
/** 标题文案，由调用方传入 i18n key 对应的值（如 decodedFileOutput / decodedImageOutput） */
|
||
title: string;
|
||
/** 解码后推断的 MIME 类型 */
|
||
mimeType: string;
|
||
/** 解码后 Blob 的大小（字节） */
|
||
blobSize: number;
|
||
/** 当前文件名 */
|
||
fileName: string;
|
||
/** 文件名变更回调 */
|
||
onFileNameChange: (name: string) => void;
|
||
/** 下载按钮点击回调 */
|
||
onDownload: () => void;
|
||
/** 可选的预览内容，ImageMode 用于渲染图片预览 */
|
||
children?: React.ReactNode;
|
||
}
|
||
|
||
export default function DecodeResultPaper({
|
||
title,
|
||
mimeType,
|
||
blobSize,
|
||
fileName,
|
||
onFileNameChange,
|
||
onDownload,
|
||
children,
|
||
}: DecodeResultPaperProps) {
|
||
const { t } = useI18n('base64Converter');
|
||
|
||
return (
|
||
<div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
|
||
{/* 标题 */}
|
||
<span className="block mb-2 text-xs font-bold text-muted-foreground">{title}</span>
|
||
|
||
{/* 可选预览内容（ImageMode 的图片） */}
|
||
{children}
|
||
|
||
{/* 文件信息 */}
|
||
<div className="flex gap-4 mb-3">
|
||
<span className="text-xs text-muted-foreground">
|
||
{t('inferredMimeType')}: {mimeType}
|
||
</span>
|
||
<span className="text-xs text-muted-foreground">
|
||
{t('decodedSize')}: {formatFileSize(blobSize)}
|
||
</span>
|
||
</div>
|
||
|
||
{/* 文件名输入 */}
|
||
<div className="mb-3">
|
||
<label className="block text-xs font-medium text-muted-foreground mb-1">
|
||
{t('decodedFileName')}
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={fileName}
|
||
onChange={(e) => onFileNameChange(e.target.value)}
|
||
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
|
||
/>
|
||
</div>
|
||
|
||
{/* 下载按钮 */}
|
||
<Button
|
||
variant="default"
|
||
onClick={onDownload}
|
||
disabled={!fileName.trim()}
|
||
className="w-full rounded-lg font-bold"
|
||
>
|
||
<Download className="mr-2 h-4 w-4" />
|
||
{t('download')}
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|