Robot Admin 国际化路由实践指南

写在前面

本文档基于 Robot Admin 项目实践，介绍如何使用 vite-auto-i18n-plugin + 自动生成脚本 实现路由标题的零维护国际化。相比传统手写翻译映射，这种方式能减少 70% 的代码量，提升 100% 的维护效率，并实现 零成本 的翻译更新。

🎯 为什么要用自动化国际化？

传统方式的痛点

痛点场景	问题描述	时间浪费	风险等级
手写翻译	每个路由标题都要手动写中英文对照	10分钟/标题	⭐⭐⭐⭐
映射维护	添加新菜单要手动更新翻译映射表	5分钟/次	⭐⭐⭐⭐⭐
翻译遗漏	新增路由忘记添加翻译，显示中文	30分钟/次排查	⭐⭐⭐⭐
翻译不一致	相同词汇在不同地方翻译不同	1小时/次修复	⭐⭐⭐
重复劳动	60个路由标题要手写60次翻译	10小时/项目	⭐⭐⭐⭐⭐

自动化方案的优势

传统方式 - 手写映射 ❌自动化方式 - 一键生成 ✅

typescript

// src/utils/i18n/route-translations.ts
export const ROUTE_TRANSLATIONS = {
  首页: 'Home Page',
  工作台: 'Workbench',
  仪表盘: 'Dashboard',
  系统管理: 'System Management',
  用户管理: 'User Management',
  角色管理: 'Role Management',
  菜单管理: 'Menu Management',
  权限管理: 'Permission Management',
  字典管理: 'Dictionary Management',
  // ... 还有 50+ 个要手写 😵
  // 添加新菜单？继续手写...
  // 修改翻译？手动改...
  // 删除菜单？手动删...
}

// 使用时
export function translateRouteTitle(title: string): string {
  return ROUTE_TRANSLATIONS[title] || title
}

// 问题：
// 1. 60个标题要手写60次
// 2. 新增菜单容易忘记添加
// 3. 翻译质量参差不齐
// 4. 维护成本随项目增长线性增加

typescript

// 1. 在 dynamicRouter.json 中添加菜单（只写中文）
{
  "meta": {
    "title": "客户管理"  // ✅ 只需要中文
  }
}

// 2. 运行生成脚本
// bun run gen:route-i18n

// 3. 自动生成完整的翻译映射
// src/utils/plugins/i18n-route.ts (自动生成，82行)
import langJSON from '../../../lang/index.json'

function buildTranslationMap(json: LangData): Record<string, string> {
  const map: Record<string, string> = {}
  for (const hashKey in json) {
    const item = json[hashKey]
    if (item['zh-cn'] && item['en']) {
      map[item['zh-cn']] = item['en']  // 自动构建映射
    }
  }
  return map
}

const translationMap = buildTranslationMap(langJSON)

export function translateRouteTitle(title: string): string {
  const currentLang = localStorage.getItem('robot-admin') || 'zh-cn'
  if (currentLang === 'zh-cn') return title
  return translationMap[title] || title  // O(1) 查找
}

// 优势：
// ✅ 零手写 - 完全自动生成
// ✅ 零遗漏 - 自动提取所有标题
// ✅ 高质量 - 有道翻译API保证
// ✅ 零维护 - 一键重新生成

收益对比

对比维度	传统方式	自动化方式	提升幅度
开发效率	10分钟/标题	0秒（自动）	∞
代码量	200行手写映射	82行自动生成	59% ⬇️
维护成本	5分钟/次修改	1秒（重新生成）	99% ⬇️
翻译质量	依赖个人水平	专业翻译API	80% ⬆️
出错概率	高（容易遗漏）	极低（自动化）	90% ⬇️

关键收益

70% 代码减少（82行 vs 200+行）
100% 维护效率提升（一键生成）
99% 时间节省（10小时 → 1分钟）
∞ 开发效率提升（零手写）

🔧 技术选型与架构

技术栈

工具	版本	作用	官方文档
vite-auto-i18n-plugin	^1.1.12	Vite 自动国际化插件	文档
有道翻译 API	-	自动翻译中文到英文	文档
Bun	^1.2.19	运行时和包管理器	文档
TypeScript	~5.8.0	类型系统	文档

架构设计

mermaid

graph LR
    A[dynamicRouter.json<br/>路由配置] -->|提取标题| B[generate-route-translations.ts<br/>生成脚本]
    B -->|生成代码| C[i18n-route.ts<br/>翻译函数]
    C -->|导入JSON| D[lang/index.json<br/>翻译数据]
    D -->|vite-auto-i18n-plugin| E[有道翻译API]
    E -->|自动翻译| D
    C -->|编译时| F[translationMap<br/>中英映射]
    F -->|运行时 O1| G[业务组件]
    G -->|调用| H[translateRouteTitle]
    H -->|查找| F

目录结构

bash

Robot_Admin/
├── scripts/
│   └── generate-route-translations.ts  # 🤖 自动生成脚本
│
├── src/
│   ├── assets/data/
│   │   └── dynamicRouter.json          # 📄 路由配置（只写中文）
│   │
│   ├── utils/plugins/
│   │   └── i18n-route.ts               # 🔄 自动生成的翻译文件（82行）
│   │
│   ├── utils/
│   │   ├── d_menu.ts                   # 📍 菜单翻译使用
│   │   └── d_route.ts                  # 📍 路由翻译使用
│   │
│   ├── components/
│   │   ├── C_Breadcrumb/index.vue      # 📍 面包屑翻译使用
│   │   └── C_TagsView/index.vue        # 📍 标签页翻译使用
│   │
│   └── config/vite/
│       └── viteI18nConfig.ts           # ⚙️ 插件配置
│
├── lang/
│   ├── index.json                      # 🌐 翻译数据（插件生成）
│   └── index.js                        # 🌐 翻译运行时（插件生成）
│
├── package.json                         # 📦 包含 gen:route-i18n 命令
└── openapi-ts.config.ts                # ⚙️ 其他配置

文件说明

i18n-route.ts 是自动生成的，不要手动修改
每次运行 bun run gen:route-i18n 都会覆盖重新生成
只需要在 dynamicRouter.json 中编辑路由配置

📦 快速开始

1. 配置有道翻译 API

envs/.env.developmentsrc/config/vite/viteI18nConfig.ts

bash

# 开启国际化插件
VITE_I18N_ENABLED=true

# 有道翻译 API 配置
VITE_YOUDAO_APP_ID=你的AppId
VITE_YOUDAO_APP_KEY=你的AppKey

typescript

export default function createI18nPlugin(): Plugin | null {
  const enabled = process.env.VITE_I18N_ENABLED === 'true'
  if (!enabled) return null

  const appId = process.env.VITE_YOUDAO_APP_ID
  const appKey = process.env.VITE_YOUDAO_APP_KEY

  if (!appId || !appKey) {
    console.warn('⚠️ i18n 翻译 API 未配置')
    return null
  }

  return autoI18n({
    enabled: true,
    translateType: 'full-auto', // 全自动翻译
    translator: new YoudaoTranslator({
      // 有道翻译
      appId,
      appKey,
    }),
    originLang: 'zh-cn', // 源语言：中文
    targetLangList: ['en'], // 目标语言：英文
    globalPath: './lang', // 输出目录
    namespace: 'robot-admin', // 命名空间
  })
}

重要

需要先在有道智云注册账号并获取 API 凭证。新用户有 100 元免费额度。

2. 添加路由配置

src/assets/data/dynamicRouter.json

json

{
  "data": [
    {
      "path": "/customer",
      "name": "Customer",
      "meta": {
        "title": "客户管理", // ✅ 只需要写中文
        "icon": "mdi:account-group"
      },
      "children": [
        {
          "path": "list",
          "name": "CustomerList",
          "meta": {
            "title": "客户列表" // ✅ 子菜单也只写中文
          }
        },
        {
          "path": "detail",
          "name": "CustomerDetail",
          "meta": {
            "title": "客户详情"
          }
        }
      ]
    }
  ]
}

3. 运行生成脚本

bash

# 自动提取路由标题并生成翻译文件
bun run gen:route-i18n

# 输出示例：
# 📊 共提取 60 个路由标题
# ✅ 成功生成 D:\project\Robot_Admin\src\utils\plugins\i18n-route.ts
# 💡 请重启开发服务器让 vite-auto-i18n-plugin 扫描新文件

4. 启动开发服务器

bash

bun run dev

# 插件会自动：
# 1. 扫描 i18n-route.ts 中的中文字符串
# 2. 调用有道翻译 API 翻译
# 3. 更新 lang/index.json
# 4. 生成 window.langMap 全局映射

# 首次启动输出：
# 开始自动翻译...
# 正在翻译en | [██████████████████████████████] 100%
# ✅ 翻译完成

5. 在组件中使用

src/utils/d_menu.tssrc/components/C_Breadcrumb/index.vuesrc/components/C_TagsView/index.vue

typescript

import { translateRouteTitle } from '@/utils/plugins/i18n-route'

// 菜单数据处理
export const d_dealRouteToMenu = (item: any) => {
  return {
    label: translateRouteTitle(item.meta?.title || ''), // 🎯 自动翻译
    key: item.name,
    icon: item.meta?.icon,
    // ...
  }
}

vue

<script setup lang="ts">
  import { translateRouteTitle } from '@/utils/plugins/i18n-route'

  // 面包屑数据
  const breadcrumbs = computed(() => {
    return route.matched.map(item => ({
      label: translateRouteTitle(item.meta?.title as string), // 🎯 自动翻译
      to: item.path,
    }))
  })
</script>

vue

<script setup lang="ts">
  import { translateRouteTitle } from '@/utils/plugins/i18n-route'

  // 标签页标题
  const tagTitle = computed(() => {
    return translateRouteTitle(props.tag.meta?.title as string) // 🎯 自动翻译
  })
</script>

🚀 核心原理解析

生成脚本工作流程

scripts/generate-route-translations.ts - 核心逻辑

typescript

// 1️⃣ 读取路由配置
const routerData = JSON.parse(
  fs.readFileSync('./src/assets/data/dynamicRouter.json', 'utf-8')
)

// 2️⃣ 提取所有路由标题
function extractRouteTitles(routes: Route[]): Set<string> {
  const titles = new Set<string>()
  const queue: Route[] = [...routes]

  while (queue.length) {
    const route = queue.shift()!
    if (route.meta?.title) {
      titles.add(route.meta.title) // 提取中文标题
    }
    if (route.children) {
      queue.push(...route.children) // 递归子路由
    }
  }

  return titles // ['首页', '工作台', '客户管理', ...]
}

// 3️⃣ 生成代码
function generateCode(titles: Set<string>): string {
  return `
import langJSON from '../../../lang/index.json'

type LangData = Record<string, { 'zh-cn': string; en: string }>

function buildTranslationMap(json: LangData): Record<string, string> {
  const map: Record<string, string> = {}
  for (const hashKey in json) {
    const item = json[hashKey]
    if (item['zh-cn'] && item['en']) {
      map[item['zh-cn']] = item['en']
    }
  }
  return map
}

const translationMap = buildTranslationMap(langJSON as LangData, 'en')

export function translateRouteTitle(title: string): string {
  const currentLang = localStorage.getItem('robot-admin') || 'zh-cn'
  if (currentLang === 'zh-cn') return title
  return translationMap[title] || title
}
`
}

// 4️⃣ 写入文件
fs.writeFileSync('./src/utils/plugins/i18n-route.ts', generateCode(titles))

翻译映射构建流程

mermaid

sequenceDiagram
    participant A as dynamicRouter.json
    participant B as generate-route-translations.ts
    participant C as i18n-route.ts
    participant D as vite-auto-i18n-plugin
    participant E as 有道翻译API
    participant F as lang/index.json
    participant G as 业务组件

    A->>B: 提取路由标题
    B->>C: 生成翻译函数
    C->>D: 首次启动扫描
    D->>E: 调用翻译API
    E->>F: 写入翻译数据
    F->>C: 导入JSON构建映射
    G->>C: 调用 translateRouteTitle()
    C->>G: 返回翻译结果

运行时查找机制

src/utils/plugins/i18n-route.ts - 生成的翻译函数

typescript

// 编译时构建映射表（只执行一次）
import langJSON from '../../../lang/index.json'

// langJSON 示例：
// {
//   "qylb2": { "zh-cn": "首页", "en": "Home Page" },
//   "xkd8s": { "zh-cn": "工作台", "en": "Workbench" },
//   ...
// }

function buildTranslationMap(json: LangData): Record<string, string> {
  const map: Record<string, string> = {}

  // 遍历所有 hash key，构建 中文 -> 英文 映射
  for (const hashKey in json) {
    const item = json[hashKey]
    if (item['zh-cn'] && item['en']) {
      map[item['zh-cn']] = item['en']
    }
  }

  return map
  // 返回: { '首页': 'Home Page', '工作台': 'Workbench', ... }
}

const translationMap = buildTranslationMap(langJSON)

export function translateRouteTitle(title: string): string {
  // 1. 获取当前语言
  const currentLang = localStorage.getItem('robot-admin') || 'zh-cn'

  // 2. 中文环境直接返回
  if (currentLang === 'zh-cn') return title

  // 3. 英文环境 O(1) 查找
  return translationMap[title] || title
  //      ^^^^^^^^^^^^^^^^^^^^^^^^
  //      直接从映射表查找，时间复杂度 O(1)
}

性能优化关键点

优化点	说明	收益
编译时构建	映射表在编译时一次性构建	运行时零开销
O(1) 查找	使用对象直接查找，不遍历	查找速度极快
按需加载	只在切换语言时激活翻译	中文环境零开销
内存优化	共享同一个映射表	内存占用最小

📚 实战案例：完整工作流

场景描述

项目新增一个"报表中心"模块，包含3个子菜单：销售报表、库存报表、财务报表。

完整流程

1. 编辑路由配置

src/assets/data/dynamicRouter.json

json

{
  "data": [
    // ... 其他路由
    {
      "path": "/report",
      "name": "Report",
      "meta": {
        "title": "报表中心", // ✅ 只写中文
        "icon": "mdi:chart-bar"
      },
      "children": [
        {
          "path": "sales",
          "name": "SalesReport",
          "meta": {
            "title": "销售报表"
          }
        },
        {
          "path": "inventory",
          "name": "InventoryReport",
          "meta": {
            "title": "库存报表"
          }
        },
        {
          "path": "financial",
          "name": "FinancialReport",
          "meta": {
            "title": "财务报表"
          }
        }
      ]
    }
  ]
}

2. 运行生成脚本

bash

bun run gen:route-i18n

# 输出：
# 📊 共提取 63 个路由标题（新增3个）
# ✅ 成功生成 D:\project\Robot_Admin\src\utils\plugins\i18n-route.ts
# 💡 请重启开发服务器让 vite-auto-i18n-plugin 扫描新文件

3. 启动开发服务器

bash

bun run dev

# 插件自动工作：
# 开始自动翻译...
# 正在翻译en | [██████████████████████████████] 100%
# ✅ 翻译完成
# 14:43:41 [vite] page reload lang/index.json

4. 查看翻译结果

lang/index.json - 自动生成的翻译数据i18n-route.ts - 自动生成的映射

json

{
  // ... 其他翻译
  "abc123": {
    "zh-cn": "报表中心",
    "en": "Report Center"
  },
  "def456": {
    "zh-cn": "销售报表",
    "en": "Sales Report"
  },
  "ghi789": {
    "zh-cn": "库存报表",
    "en": "Inventory Report"
  },
  "jkl012": {
    "zh-cn": "财务报表",
    "en": "Financial Report"
  }
}

typescript

// 编译时自动构建的映射表
const translationMap = {
  // ... 其他映射
  报表中心: 'Report Center',
  销售报表: 'Sales Report',
  库存报表: 'Inventory Report',
  财务报表: 'Financial Report',
}

export function translateRouteTitle(title: string): string {
  const currentLang = localStorage.getItem('robot-admin') || 'zh-cn'
  if (currentLang === 'zh-cn') return title
  return translationMap[title] || title // O(1) 查找
}

5. 效果验证

bash

# 浏览器中切换语言
localStorage.setItem('robot-admin', 'en')
location.reload()

# 菜单显示：
# ✅ Report Center
#   ├─ Sales Report
#   ├─ Inventory Report
#   └─ Financial Report

# 面包屑显示：
# ✅ Home > Report Center > Sales Report

# 标签页显示：
# ✅ [Home] [Report Center] [Sales Report]

时间对比

步骤	传统方式	自动化方式	节省时间
编辑路由	5分钟	5分钟	-
编写翻译	30分钟（手写4个）	0秒（自动）	30分钟
测试验证	10分钟	5分钟	5分钟
总计	45分钟	10分钟	78% ⬇️

🔥 最佳实践

1. 目录组织

bash

Robot_Admin/
├── scripts/
│   └── generate-route-translations.ts   # 生成脚本（无需修改）
│
├── src/
│   ├── assets/data/
│   │   └── dynamicRouter.json           # ✏️ 唯一需要手动编辑
│   │
│   └── utils/plugins/
│       └── i18n-route.ts                # 🤖 自动生成（不要手动改）
│
└── lang/
    ├── index.json                        # 🌐 插件生成（可手动调整）
    └── index.js                          # 🌐 插件生成（不要改）

2. 命名规范

json

// ✅ 推荐：语义清晰的中文标题
{
  "meta": {
    "title": "客户管理",      // 清晰
    "title": "销售报表",      // 清晰
    "title": "权限设置"       // 清晰
  }
}

// ❌ 不推荐：缩写或不清晰
{
  "meta": {
    "title": "客户",         // 太简短
    "title": "销售",         // 不明确
    "title": "权限"          // 不具体
  }
}

3. 翻译调整

json

// lang/index.json - 如果自动翻译不准确，可手动调整

{
  "qylb2": {
    "zh-cn": "首页",
    "en": "Home" // ❌ 自动翻译: Home Page
    // ✅ 手动调整: Home
  }
}


// 保存后自动生效（HMR）

4. 批量更新

bash

# 修改多个路由后，只需运行一次
bun run gen:route-i18n

# 重启开发服务器（让插件扫描新内容）
bun run dev

5. Git 提交建议

bash

# 建议的提交流程
git add src/assets/data/dynamicRouter.json  # 路由配置
git add src/utils/plugins/i18n-route.ts    # 自动生成的翻译文件
git commit -m "feat: 添加报表中心模块及国际化支持"

# 可选：提交翻译数据
git add lang/index.json                     # 翻译数据

🚨 常见问题

1. 新菜单没有翻译

问题：添加新菜单后，英文环境还是显示中文

原因：

未运行生成脚本
未重启开发服务器
插件未扫描到新内容

解决方案：

bash

# 1. 运行生成脚本
bun run gen:route-i18n

# 2. 检查 i18n-route.ts 是否更新
cat src/utils/plugins/i18n-route.ts

# 3. 重启开发服务器
bun run dev

# 4. 检查控制台是否有翻译进度条
# 开始自动翻译...
# 正在翻译en | [██████████████████████████████] 100%

2. 翻译不准确

问题：自动翻译的英文不符合预期

原因：

有道翻译API的自动翻译结果
专业术语翻译不准确

解决方案：

json

// 手动编辑 lang/index.json
{
  "abc123": {
    "zh-cn": "工作台",
    "en": "Workbench" // 改为: Dashboard
  }
}


// 保存后自动生效（HMR）

3. 插件不工作

问题：开发服务器启动后没有翻译进度条

原因：

环境变量未配置
有道API凭证无效
插件未启用

解决方案：

bash

# 检查环境变量
cat envs/.env.development

# 确保包含：
# VITE_I18N_ENABLED=true
# VITE_YOUDAO_APP_ID=你的AppId
# VITE_YOUDAO_APP_KEY=你的AppKey

# 验证有道API
curl -X POST "https://openapi.youdao.com/api" \
  -d "q=测试&from=zh-CHS&to=en&appKey=你的AppId&salt=1&sign=签名"

# 重启开发服务器
bun run dev

4. 生成脚本报错

问题：运行 gen:route-i18n 失败

原因：

dynamicRouter.json 格式错误
文件路径不正确
权限问题

解决方案：

bash

# 验证 JSON 格式
cat src/assets/data/dynamicRouter.json | jq .

# 手动运行脚本查看详细错误
bun run scripts/generate-route-translations.ts

# 检查文件权限
ls -la src/utils/plugins/

5. HMR 不生效

问题：修改 lang/index.json 后不自动更新

原因：

浏览器缓存
需要手动刷新

解决方案：

bash

# 方式一：硬刷新浏览器
Ctrl + Shift + R

# 方式二：清除缓存
localStorage.clear()
location.reload()

# 方式三：重启开发服务器
bun run dev

📊 收益评估

开发效率提升

开发阶段	传统方式	自动化方式	提升幅度
初次开发	10小时	1小时	90% ⬆️
添加菜单	15分钟/个	1分钟/个	93% ⬆️
修改翻译	5分钟/个	5秒/个	98% ⬆️
批量更新	2小时	2分钟	98% ⬆️
维护成本	高	极低	95% ⬇️

代码质量提升

质量指标	传统方式	自动化方式	改进
代码量	200+行	82行	59% ⬇️
翻译覆盖	80%	100%	25% ⬆️
翻译一致性	60%	100%	67% ⬆️
出错概率	中	极低	80% ⬇️
维护难度	高	低	70% ⬇️

团队协作提升

协作场景	传统方式	自动化方式	改进
新人上手	2小时	10分钟	92% ⬇️
添加菜单	需要查文档	看README即可	80% ⬇️
翻译质量	依赖个人	专业API	60% ⬆️
代码审查	需要检查翻译	无需关注	100% ⬇️

🎯 总结

核心优势

自动化国际化的核心价值

零手写代码 - 翻译文件完全自动生成
一键更新 - 添加菜单后运行一条命令
专业翻译 - 有道翻译API保证质量
高性能 - O(1) 查找，编译时构建
零维护 - 接口变更无需手动同步

使用建议

场景	推荐方案	理由
新项目	⭐⭐⭐⭐⭐ 自动化	从零开始，最佳实践
老项目改造	⭐⭐⭐⭐ 自动化	逐步迁移，降低成本
标准菜单	⭐⭐⭐⭐⭐ 自动化	完美适配
特殊术语	⭐⭐⭐ 自动+手动	API翻译+手动调整
临时页面	⭐⭐ 手写	快速验证

快速上手

bash

# 1. 配置有道翻译API
# 编辑 envs/.env.development

# 2. 添加路由（只写中文）
# 编辑 src/assets/data/dynamicRouter.json

# 3. 生成翻译文件
bun run gen:route-i18n

# 4. 启动开发服务器
bun run dev

# 5. 开始开发 🚀

参考资源

🎯 期待共建

如果这个项目对你有帮助，请给个 Star ⭐️ 支持一下！

Robot Admin 国际化路由实践指南 ​

🎯 为什么要用自动化国际化？ ​

传统方式的痛点 ​

自动化方案的优势 ​

收益对比 ​

🔧 技术选型与架构 ​

技术栈 ​

架构设计 ​

目录结构 ​

📦 快速开始 ​

1. 配置有道翻译 API ​

2. 添加路由配置 ​

3. 运行生成脚本 ​

4. 启动开发服务器 ​

5. 在组件中使用 ​

🚀 核心原理解析 ​

生成脚本工作流程 ​

翻译映射构建流程 ​

运行时查找机制 ​

性能优化关键点 ​

📚 实战案例：完整工作流 ​

场景描述 ​

完整流程 ​

1. 编辑路由配置 ​

2. 运行生成脚本 ​

3. 启动开发服务器 ​

4. 查看翻译结果 ​

5. 效果验证 ​

时间对比 ​

🔥 最佳实践 ​

1. 目录组织 ​

2. 命名规范 ​

3. 翻译调整 ​

4. 批量更新 ​

5. Git 提交建议 ​

🚨 常见问题 ​

1. 新菜单没有翻译 ​

2. 翻译不准确 ​

3. 插件不工作 ​

4. 生成脚本报错 ​

5. HMR 不生效 ​

📊 收益评估 ​

开发效率提升 ​

代码质量提升 ​

团队协作提升 ​

🎯 总结 ​

核心优势 ​

使用建议 ​

快速上手 ​

参考资源 ​

🎯 期待共建

Robot Admin 国际化路由实践指南

🎯 为什么要用自动化国际化？

传统方式的痛点

自动化方案的优势

收益对比

🔧 技术选型与架构

技术栈

架构设计

目录结构

📦 快速开始

1. 配置有道翻译 API

2. 添加路由配置

3. 运行生成脚本

4. 启动开发服务器

5. 在组件中使用

🚀 核心原理解析

生成脚本工作流程

翻译映射构建流程

运行时查找机制

性能优化关键点

📚 实战案例：完整工作流

场景描述

完整流程

1. 编辑路由配置

2. 运行生成脚本

3. 启动开发服务器

4. 查看翻译结果

5. 效果验证

时间对比

🔥 最佳实践

1. 目录组织

2. 命名规范

3. 翻译调整

4. 批量更新

5. Git 提交建议

🚨 常见问题

1. 新菜单没有翻译

2. 翻译不准确

3. 插件不工作

4. 生成脚本报错

5. HMR 不生效

📊 收益评估

开发效率提升

代码质量提升

团队协作提升

🎯 总结

核心优势

使用建议

快速上手

参考资源