雨霖铃
cd21d11fa1
- 在 background.ts 中将错误信息翻译为中文。 - 在 uiPopover.ts 中移除注释并更新弹出框标题。 - 在 Base64ConverterSection.tsx 中动态显示最大文件大小。 - 在 DecodeResultPaper.tsx 中简化标题文案注释。 - 在 GenerateButton.tsx 中动态显示生成进度和预计剩余时间。 - 在 base64Converter.ts 中将错误信息翻译为中文。
81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
/**
|
|
* DecodeResultPaper
|
|
*
|
|
* FileMode 与 ImageMode 通用的 decode 结果展示组件。
|
|
* 提取了二者 decode 输出区完全一致的结构：
|
|
* 标题 → 可选预览（children）→ 文件信息 → 文件名输入 → 下载按钮
|
|
*
|
|
* FileMode 直接使用，ImageMode 通过 children 传入图片预览。
|
|
*/
|
|
import { Download } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { formatBytes } from '@/utils/format';
|
|
|
|
interface DecodeResultPaperProps {
|
|
/** 标题文案 */
|
|
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) {
|
|
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">
|
|
{'推断的 MIME 类型'}: {mimeType}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{'解码大小'}: {formatBytes(blobSize)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* 文件名输入 */}
|
|
<div className="mb-3">
|
|
<Label className="block text-xs font-medium text-muted-foreground mb-1">
|
|
{'解码后文件名'}
|
|
</Label>
|
|
<Input value={fileName} onChange={(e) => onFileNameChange(e.target.value)} />
|
|
</div>
|
|
|
|
{/* 下载按钮 */}
|
|
<Button
|
|
variant="default"
|
|
onClick={onDownload}
|
|
disabled={!fileName.trim()}
|
|
className="w-full rounded-lg font-bold"
|
|
>
|
|
<Download className="mr-2 h-4 w-4" />
|
|
{'下载'}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|