refactor(i18n): 移除 chrome.i18n 国际化,统一使用中文硬编码
移除 chromeI18n 工具、_locales 翻译文件和 manifest default_locale 配置, 将所有 UI 文案改为直接硬编码中文,并更新相关测试与文档。
This commit is contained in:
@@ -76,7 +76,7 @@ describe('TextMode', () => {
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Base64 字符串无效')).toBeInTheDocument();
|
||||
expect(screen.getByText('无效的 Base64 字符串')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -118,7 +118,7 @@ describe('TextMode', () => {
|
||||
expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
|
||||
@@ -182,9 +182,7 @@ describe('TextMode', () => {
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
screen.getByText('输入似乎是二进制数据(如图片)。请切换到「图像」选项卡。'),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByText('检测到二进制数据(如图像),请使用图像选项卡')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import DecodeResultPaper from './DecodeResultPaper';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -20,8 +19,6 @@ interface Base64ConverterSectionProps {
|
||||
}
|
||||
|
||||
export default function Base64ConverterSection({ mode }: Base64ConverterSectionProps) {
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
const [direction, setDirection] = useStorageState(
|
||||
`base64Converter/${mode}Mode/direction`,
|
||||
'encode',
|
||||
@@ -44,7 +41,6 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
setCustomFileName,
|
||||
resetAll,
|
||||
safeFileSelect,
|
||||
maxFileSizeStr,
|
||||
} = useBase64Converter({ mode });
|
||||
|
||||
const handleDirectionChange = (next: Base64ConvertDirection) => {
|
||||
@@ -63,8 +59,8 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
<SwitchButtonGroup
|
||||
value={direction}
|
||||
options={[
|
||||
{ value: 'encode', label: t('encode') },
|
||||
{ value: 'decode', label: t('decode') },
|
||||
{ value: 'encode', label: '编码' },
|
||||
{ value: 'decode', label: '解码' },
|
||||
]}
|
||||
onChange={handleDirectionChange}
|
||||
size="small"
|
||||
@@ -126,7 +122,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
{formatBytes(info.size)} · {info.type}
|
||||
</span>
|
||||
<span className="text-[11px] font-medium text-primary/80 mt-1">
|
||||
{t('clickOrDropToReplace')}
|
||||
{'点击或拖拽以替换文件'}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
@@ -137,14 +133,14 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
<Upload className="w-8 h-8 text-muted-foreground/60" />
|
||||
)}
|
||||
<span className="text-xs font-bold text-foreground/80">
|
||||
{mode === 'image' ? t('clickOrDropToImage') : t('clickOrDropToFile')}
|
||||
{mode === 'image' ? '点击或拖拽图像到此处' : '点击或拖拽文件到此处'}
|
||||
</span>
|
||||
<span className="text-[10px] font-medium text-muted-foreground/60">
|
||||
{t('maxFileSize', { max: maxFileSizeStr })}
|
||||
{'最大文件大小:{{max}}'}
|
||||
</span>
|
||||
{mode === 'image' && (
|
||||
<span className="text-[10px] font-medium text-muted-foreground/50">
|
||||
{t('supportedFormats')}
|
||||
{'支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -161,17 +157,17 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
<div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
|
||||
<div className="flex justify-between items-center select-none">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||
{t('base64Output')}
|
||||
{'Base64 编码结果'}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<CopyButton
|
||||
text={result.rawBase64}
|
||||
tooltip={t('copyRaw')}
|
||||
tooltip={'复制纯 Base64'}
|
||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||
/>
|
||||
<CopyButton
|
||||
text={result.output}
|
||||
tooltip={t('copyDataUri')}
|
||||
tooltip={'复制 Data URI'}
|
||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||
/>
|
||||
</div>
|
||||
@@ -189,14 +185,14 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
<div className="flex items-center justify-between font-mono text-[10px] text-muted-foreground/70 select-none pt-1">
|
||||
<div className="flex gap-4 items-center tabular-nums">
|
||||
<span>
|
||||
{t('originalSize')}:{' '}
|
||||
{'原始大小'}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatBytes(result.originalBytes)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-border/60">|</span>
|
||||
<span>
|
||||
{t('encodedSize')}:{' '}
|
||||
{'编码大小'}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatBytes(result.outputBytes)}
|
||||
</span>
|
||||
@@ -209,7 +205,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
className="h-7 rounded-md text-muted-foreground hover:text-destructive text-[11px] gap-1 px-2"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
{t('clear')}
|
||||
{'清空'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -218,7 +214,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
) : (
|
||||
<div className="flex flex-col space-y-4">
|
||||
<TextInputArea
|
||||
placeholder={t('decodeBase64Placeholder')}
|
||||
placeholder={'输入需要解码的 Base64 或 data URI...'}
|
||||
value={decodeInput}
|
||||
onChange={setDecodeInput}
|
||||
externalError={decodeError || undefined}
|
||||
@@ -229,7 +225,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
/>
|
||||
{decoded && (
|
||||
<DecodeResultPaper
|
||||
title={mode === 'image' ? t('decodedImageOutput') : t('decodedFileOutput')}
|
||||
title={mode === 'image' ? '解码图像' : '解码文件'}
|
||||
mimeType={decoded.mimeType}
|
||||
blobSize={decoded.blob.size}
|
||||
fileName={decodedFileName}
|
||||
|
||||
@@ -12,7 +12,6 @@ import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
interface DecodeResultPaperProps {
|
||||
/** 标题文案,由调用方传入 i18n key 对应的值(如 decodedFileOutput / decodedImageOutput) */
|
||||
@@ -40,8 +39,6 @@ export default function DecodeResultPaper({
|
||||
onDownload,
|
||||
children,
|
||||
}: DecodeResultPaperProps) {
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
return (
|
||||
<div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
|
||||
{/* 标题 */}
|
||||
@@ -53,17 +50,17 @@ export default function DecodeResultPaper({
|
||||
{/* 文件信息 */}
|
||||
<div className="flex gap-4 mb-3">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('inferredMimeType')}: {mimeType}
|
||||
{'推断的 MIME 类型'}: {mimeType}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('decodedSize')}: {formatBytes(blobSize)}
|
||||
{'解码大小'}: {formatBytes(blobSize)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 文件名输入 */}
|
||||
<div className="mb-3">
|
||||
<Label className="block text-xs font-medium text-muted-foreground mb-1">
|
||||
{t('decodedFileName')}
|
||||
{'解码后文件名'}
|
||||
</Label>
|
||||
<Input value={fileName} onChange={(e) => onFileNameChange(e.target.value)} />
|
||||
</div>
|
||||
@@ -76,7 +73,7 @@ export default function DecodeResultPaper({
|
||||
className="w-full rounded-lg font-bold"
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
{t('download')}
|
||||
{'下载'}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -20,7 +20,6 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
|
||||
error,
|
||||
showImageHint,
|
||||
handleClear,
|
||||
t,
|
||||
} = useTextMode();
|
||||
|
||||
return (
|
||||
@@ -29,8 +28,8 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
|
||||
<SwitchButtonGroup
|
||||
value={direction}
|
||||
options={[
|
||||
{ value: 'encode', label: t('encode') },
|
||||
{ value: 'decode', label: t('decode') },
|
||||
{ value: 'encode', label: '编码' },
|
||||
{ value: 'decode', label: '解码' },
|
||||
]}
|
||||
onChange={handleDirectionChange}
|
||||
size="small"
|
||||
@@ -52,7 +51,7 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
|
||||
{showImageHint && (
|
||||
<div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
|
||||
<span className="text-xs font-semibold text-primary tracking-tight">
|
||||
{t('imageDataUriHint')}
|
||||
检测到图片的 data URI,请使用「图像」选项卡进行解码。
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
@@ -61,7 +60,7 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
|
||||
onClick={onSwitchToImageMode}
|
||||
className="h-7 rounded-md text-xs font-bold text-primary hover:text-primary hover:bg-primary/20 dark:hover:bg-primary/10 px-2.5"
|
||||
>
|
||||
{t('switchToImageMode')}
|
||||
切换到图像模式
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import type { Base64ConverterPageMode } from '@/types/storage';
|
||||
import TextMode from './components/TextMode';
|
||||
@@ -12,7 +11,6 @@ const isValidPageMode = (val: unknown): val is Base64ConverterPageMode =>
|
||||
type PageMode = Base64ConverterPageMode;
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n('base64Converter');
|
||||
const [pageMode, setPageMode] = useStorageState(
|
||||
'base64Converter/pageMode',
|
||||
'text',
|
||||
@@ -24,9 +22,9 @@ export default function Index() {
|
||||
<SwitchButtonGroup
|
||||
value={pageMode}
|
||||
options={[
|
||||
{ value: 'text', label: t('base64Converter:textMode') },
|
||||
{ value: 'file', label: t('base64Converter:fileMode') },
|
||||
{ value: 'image', label: t('base64Converter:imageMode') },
|
||||
{ value: 'text', label: '文本' },
|
||||
{ value: 'file', label: '文件' },
|
||||
{ value: 'image', label: '图像' },
|
||||
]}
|
||||
onChange={(value: PageMode) => setPageMode(value)}
|
||||
size="small"
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import type { FileToBase64Result } from '@/utils/base64Converter';
|
||||
import {
|
||||
base64ToBlob,
|
||||
@@ -21,8 +20,6 @@ interface UseBase64ConverterProps {
|
||||
}
|
||||
|
||||
export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
const [result, setResult] = useState<FileToBase64Result | null>(null);
|
||||
const [info, setInfo] = useState<FileInfo | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
@@ -62,7 +59,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
setInfo(null);
|
||||
|
||||
if (!isFileSizeValid(file.size)) {
|
||||
setEncodeError(t('fileSizeExceeded', { max: `${MAX_FILE_SIZE / 1024 / 1024} MB` }));
|
||||
setEncodeError(`文件大小超出限制(最大 ${MAX_FILE_SIZE / 1024 / 1024} MB)`);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -71,7 +68,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
!isSupportedImageType(file.type) &&
|
||||
!isSupportedImageExtension(file.name)
|
||||
) {
|
||||
setEncodeError(t('unsupportedImageType'));
|
||||
setEncodeError('不支持的图像格式');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -87,13 +84,13 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
if (!cancelRef.current) setResult(res);
|
||||
} catch (e) {
|
||||
if (!cancelRef.current) {
|
||||
setEncodeError(e instanceof Error ? e.message : t('conversionFailed'));
|
||||
setEncodeError(e instanceof Error ? e.message : '转换失败');
|
||||
}
|
||||
} finally {
|
||||
if (!cancelRef.current) setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[mode, t],
|
||||
[mode],
|
||||
);
|
||||
|
||||
const safeFileSelect = useCallback(
|
||||
@@ -116,10 +113,10 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
const message = e instanceof Error ? e.message : '';
|
||||
return {
|
||||
decoded: null,
|
||||
error: message === 'Invalid Base64 string' ? t('invalidBase64') : t('conversionFailed'),
|
||||
error: message === 'Invalid Base64 string' ? 'Base64 字符串无效' : '转换失败',
|
||||
};
|
||||
}
|
||||
}, [debouncedDecodeInput, t]);
|
||||
}, [debouncedDecodeInput]);
|
||||
|
||||
const decoded = decodePipeline.decoded;
|
||||
const decodeError = decodePipeline.error;
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { base64ToText, textToBase64 } from '@/utils/base64Converter';
|
||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||
|
||||
const IMAGE_DATA_URI_PATTERN = /^\s*data:image\//i;
|
||||
|
||||
const ERROR_MESSAGE_TO_I18N: Record<string, string> = {
|
||||
'Invalid Base64 string': 'invalidBase64',
|
||||
'Invalid Base64 string': '无效的 Base64 字符串',
|
||||
'Input appears to be binary data (e.g. an image). Please use the Image tab instead.':
|
||||
'binaryDataDetected',
|
||||
'检测到二进制数据(如图像),请使用图像选项卡',
|
||||
};
|
||||
|
||||
export function useTextMode() {
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
|
||||
@@ -50,17 +47,17 @@ export function useTextMode() {
|
||||
const i18nKey = ERROR_MESSAGE_TO_I18N[message];
|
||||
return {
|
||||
output: '',
|
||||
error: i18nKey ? t(i18nKey) : message || t('conversionFailed'),
|
||||
error: i18nKey || message || '转换失败',
|
||||
};
|
||||
}
|
||||
}, [debouncedInput, direction, t]);
|
||||
}, [debouncedInput, direction]);
|
||||
|
||||
const output = conversionPipeline.output;
|
||||
const error = conversionPipeline.error;
|
||||
|
||||
const placeholder =
|
||||
direction === 'encode' ? t('textInputPlaceholder') : t('base64InputPlaceholder');
|
||||
const outputLabel = direction === 'encode' ? t('base64Output') : t('textOutput');
|
||||
direction === 'encode' ? '输入需要编码为 Base64 的文本...' : '输入需要解码的 Base64 字符串...';
|
||||
const outputLabel = direction === 'encode' ? 'Base64 编码结果' : '解码文本结果';
|
||||
|
||||
const showImageHint = useMemo(
|
||||
() => direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input),
|
||||
@@ -90,6 +87,5 @@ export function useTextMode() {
|
||||
error,
|
||||
showImageHint,
|
||||
handleClear,
|
||||
t,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user