国际化 (i18n) 指南

utils/i18n/
├── context.tsx       # React Context 和 Provider
├── types.ts          # 类型定义和常量
├── translations.ts   # 翻译加载逻辑
└── index.ts          # 公共 API 导出

locales/
├── zh_CN.json        # 简体中文翻译
└── en_US.json        # 英语翻译

components/option/
└── LanguageSelect.tsx # 语言选择器组件

{
  "common.ok": "确定",
  "common.cancel": "取消",
  "error.apiKeyNotSet": "未设置 API 密钥",
  "batch.filter.preset.excludeImages.name": "排除图片链接"
}

{
  "batch.progress.fetching": "正在抓取 {{current}}/{{total}}",
  "error.fetchFailed": "抓取失败: {{error}}"
}

t("batch.progress.fetching", { current: 5, total: 10 })
// 输出: "正在抓取 5/10"

git clone https://github.com/YOUR_USERNAME/moe-copy-ai.git
cd moe-copy-ai

# 从 dev 分支创建新分支
git checkout dev
git checkout -b fix/translation-zh-batch-filter

// ✅ 正确示例
{
  "batch.filter.title": "链接过滤",  // 只修改值
  "batch.filter.desc": "使用正则表达式筛选链接"
}

// ❌ 错误示例
{
  "batch.linkFilter.title": "链接过滤",  // ❌ 不要修改键名
  // "batch.filter.desc": "..."  // ❌ 不要删除键
}

# 如果安装了 pnpm
pnpm run format

# 或手动使用 Prettier
npx prettier --write locales/*.json

pnpm install
pnpm dev

git add locales/
git commit -m "fix: improve Chinese translation for batch filter"

git push origin fix/translation-zh-batch-filter

{
  "newFeature.title": "新功能标题",
  "newFeature.description": "功能描述"
}

{
  "newFeature.title": "New Feature Title",
  "newFeature.description": "Feature description"
}

function NewFeature() {
  const { t } = useI18n()
  return <h1>{t("newFeature.title")}</h1>
}

# 例如添加日语
cp locales/zh_CN.json locales/ja_JP.json

// 添加新语言到 Locale 类型
export type Locale = "zh_CN" | "en_US" | "ja_JP"

// 更新支持的语言列表
export const SUPPORTED_LOCALES: Locale[] = ["zh_CN", "en_US", "ja_JP"]

// 添加语言显示名称
export const LOCALE_NAMES: Record<Locale, string> = {
  zh_CN: "简体中文",
  en_US: "English",
  ja_JP: "日本語"
}

// 添加到浏览器语言映射
export const INTL_LOCALE_MAP: Record<string, Locale> = {
  zh: "zh_CN",
  "zh-CN": "zh_CN",
  en: "en_US",
  "en-US": "en_US",
  ja: "ja_JP",        // 添加日语映射
  "ja-JP": "ja_JP"
}

export async function getTranslation(locale: Locale): Promise<Record<string, string>> {
  switch (locale) {
    case "zh_CN":
      return (await import("../../locales/zh_CN.json")).default
    case "en_US":
      return (await import("../../locales/en_US.json")).default
    case "ja_JP":  // 添加新语言
      return (await import("../../locales/ja_JP.json")).default
    default:
      return (await import("../../locales/zh_CN.json")).default
  }
}

pnpm dev

feat: add Japanese (ja_JP) translation support

import { useI18n } from "~utils/i18n"

function MyComponent() {
  const { t, locale } = useI18n()

  return (
    <div>
      <h1>{t("myFeature.title")}</h1>
      <p>{t("myFeature.description", { name: "MoeCopy" })}</p>
      <p>Current language: {locale}</p>
    </div>
  )
}

import { getTranslation } from "~utils/i18n"
import { Storage } from "@plasmohq/storage"

async function showNotification() {
  const storage = new Storage()
  const locale = await storage.get("locale") || "zh_CN"
  const translations = await getTranslation(locale)

  chrome.notifications.create({
    title: translations["notification.title"],
    message: translations["notification.message"]
  })
}

<button>{t("common.ok")}</button>

<p>{t("batch.status.completed", { count: 10 })}</p>

<input
  placeholder={t("search.placeholder")}
  aria-label={t("search.ariaLabel")}
/>

export const PRESETS = [
  {
    id: "excludeImages",
    labelKey: "batch.filter.preset.excludeImages.name",
    descKey: "batch.filter.preset.excludeImages.desc",
    pattern: "\\.(jpg|jpeg|png|gif|svg|webp)$"
  }
]

// 在组件中使用
<span>{t(preset.labelKey)}</span>

pnpm install

pnpm dev

[i18n] Translation key not found: some.missing.key

// ✅ 正确
"message": "Hello {{name}}"

// ❌ 错误
"message": "Hello {name}"
"message": "Hello ${name}"

# 检查键是否一致（需要安装 jq）
diff <(jq -r 'keys[]' locales/zh_CN.json | sort) \
     <(jq -r 'keys[]' locales/en_US.json | sort)