国际化（i18n）

React File Preview 内置极简的国际化方案，支持 中文（zh-CN，默认） 和 英文（en-US） 两种语言。

基本用法

React

import { FilePreviewModal } from '@eternalheart/react-file-preview';

// 默认中文（zh-CN），无需任何改动
<FilePreviewModal files={files} ... />

// 切换为英文
<FilePreviewModal files={files} locale="en-US" ... />

Vue

<template>
  <FilePreviewModal :files="files" locale="en-US" ... />
</template>

locale prop 同时适用于 FilePreviewModal、FilePreviewEmbed、FilePreviewContent 三个组件。

自定义翻译

通过 messages prop 传入自定义翻译字典，可以覆盖任何内置翻译值：

React

<FilePreviewModal
  files={files}
  locale="en-US"
  messages={{
    'en-US': {
      'toolbar.zoom_in': 'Zoom ++',
      'common.download': 'Save',
    },
  }}
/>

Vue

<FilePreviewModal
  :files="files"
  locale="en-US"
  :messages="{ 'en-US': { 'toolbar.zoom_in': 'Zoom ++' } }"
/>

传入的 messages 会浅合并到对应语言的内置字典之上。只需覆盖你想修改的 key，其余 key 仍使用内置翻译。

添加新语言

内置只支持 zh-CN 和 en-US，但你可以通过 messages 支持任意语言：

const jaMessages = {
  'common.download': 'ダウンロード',
  'common.close': '閉じる',
  'toolbar.zoom_in': 'ズームイン',
  // ... 完整 key 列表见下方参考表
};

<FilePreviewModal
  files={files}
  locale="ja-JP"
  messages={{ 'ja-JP': jaMessages }}
/>

当传入的 locale 在内置字典中不存在时，会自动 fallback 到中文（zh-CN）作为兜底。你只需要在 messages 中提供完整字典即可覆盖这一兜底。

自动检测语言

i18n 模块不内置浏览器语言检测。你可以在应用层自行实现：

const locale = navigator.language.startsWith('zh') ? 'zh-CN' : 'en-US';

<FilePreviewModal files={files} locale={locale} />

在自定义 Renderer 中使用

React

import { useTranslator } from '@eternalheart/react-file-preview';

const MyRenderer = () => {
  const t = useTranslator();
  return <p>{t('common.load_failed')}</p>;
};

Vue

<script setup>
import { useTranslator } from '@eternalheart/vue-file-preview';
const { t } = useTranslator();
</script>

<template>
  <p>{{ t('common.load_failed') }}</p>
</template>

翻译 Key 参考表

common（通用）

Key	中文	English
common.download	下载	Download
common.close	关闭	Close
common.loading	加载中	Loading
common.unknown_error	未知错误	Unknown error
common.unsupported_preview	不支持预览此文件类型 ({type})	Preview not supported for this file type ({type})

toolbar（工具栏）

Key	中文	English
toolbar.zoom_in	放大	Zoom in
toolbar.zoom_out	缩小	Zoom out
toolbar.rotate_left	向左旋转	Rotate left
toolbar.rotate_right	向右旋转	Rotate right
toolbar.reset	复原	Reset
toolbar.fit_to_window	适应窗口	Fit to window
toolbar.original_size	原始尺寸	Original size
toolbar.toc	目录	Table of contents
toolbar.prev_page	上一页	Previous page
toolbar.next_page	下一页	Next page
toolbar.full_width	全屏宽度	Full width
toolbar.normal_width	正常宽度	Normal width
toolbar.wrap_on	自动换行	Word wrap
toolbar.wrap_off	不换行	No wrap
toolbar.source	源码	Source
toolbar.preview	预览	Preview

各 Renderer 专用

详见 packages/file-preview-core/src/i18n/messages/zh-CN.ts 和 en-US.ts 的完整字典文件。