9.17 国际化（i18n）

:::danger 功能未实现本章描述的国际化（i18n）方案为规划中的功能，核心依赖（locales/ 目录、LangSwitch 组件、locale Store）尚未在项目中实现。请勿按本文档操作，等待后续版本发布。 :::

:::tip 概述本节介绍前端项目的国际化方案，基于 vue-i18n 实现多语言切换。项目默认提供中文和英文两种语言，可按需扩展其他语言。 :::

技术方案

项目	说明
插件	vue-i18n v9
默认语言	中文（zh-CN）
支持语言	zh-CN、en-US
存储位置	localStorage（持久化用户选择）

目录结构

:::warning 下列目录尚未创建 ui/src/locales/ 目录当前不存在，以下为规划结构。 :::

ui/src/
├── locales/
│   ├── index.ts           # i18n 初始化配置
│   ├── lang/
│   │   ├── zh-CN.ts       # 中文语言包
│   │   └── en-US.ts       # 英文语言包
│   └── helper.ts          # 语言切换辅助函数

语言包结构

:::warning 下列文件尚不存在 ui/src/locales/lang/zh-CN.ts 当前不存在，以下为规划示例。 :::

// ui/src/locales/lang/zh-CN.ts
export default {
  common: {
    search: '搜索',
    reset: '重置',
    add: '新增',
    edit: '编辑',
    delete: '删除',
    export: '导出',
    import: '导入',
    confirm: '确认',
    cancel: '取消',
    success: '操作成功',
    failed: '操作失败',
  },
  table: {
    id: 'ID',
    name: '名称',
    status: '状态',
    createTime: '创建时间',
    action: '操作',
  },
  login: {
    username: '用户名',
    password: '密码',
    captcha: '验证码',
    submit: '登录',
    rememberMe: '记住我',
  },
};

使用方式

模板中使用

<template>
  <div>
    <!-- 基础翻译 -->
    <n-button>{{ $t('common.search') }}</n-button>
    <n-button>{{ $t('common.reset') }}</n-button>

    <!-- 带参数翻译 -->
    <p>{{ $t('message.welcome', { name: 'Admin' }) }}</p>
  </div>
</template>

Script 中使用

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n();

// 翻译
const searchText = t('common.search');

// 切换语言
const switchLang = (lang: string) => {
  locale.value = lang;
  localStorage.setItem('lang', lang);
};
</script>

列定义中使用

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const columns = computed(() => [
  { title: t('table.id'), field: 'id', width: 80 },
  { title: t('table.name'), field: 'name' },
  { title: t('table.status'), field: 'statusText', width: 100 },
  { title: t('table.createTime'), field: 'createTime', width: 180 },
]);
</script>

语言切换组件

:::warning 下列组件和 Store 尚不存在 ui/src/components/LangSwitch/ 和 ui/src/store/modules/locale.ts 当前不存在，以下为规划示例。 :::

<!-- ui/src/components/LangSwitch/index.vue -->
<template>
  <n-dropdown :options="langOptions" @select="switchLang">
    <n-button>语言</n-button>
  </n-dropdown>
</template>

<script setup lang="ts">
import { h } from 'vue';
import { useI18n } from 'vue-i18n';
import { useLocaleStore } from '@/store/modules/locale';

const { locale } = useI18n();
const localeStore = useLocaleStore();

const langOptions = [
  { label: '中文', key: 'zh-CN' },
  { label: 'English', key: 'en-US' },
];

const switchLang = (lang: string) => {
  locale.value = lang;
  localeStore.setLocale(lang);
};
</script>

后端消息国际化

后端错误消息也可支持国际化，通过请求头 Accept-Language 判断语言：

:::warning 下列中间件尚不存在 app/middleware/LangMiddleware.php 当前不存在，以下为规划示例。 :::

// app/middleware/LangMiddleware.php
public function handle(Request $request, \Closure $next): Response
{
    $lang = $request->header('Accept-Language', 'zh-CN');
    app()->setLang($lang);
    return $next($request);
}

添加新语言

:::warning 以下步骤依赖未实现的功能 ui/src/locales/ 目录尚不存在，请勿执行以下操作。 :::

创建语言包文件 ui/src/locales/lang/ja-JP.ts
复制中文语言包结构并翻译
在 ui/src/locales/index.ts 中注册新语言
在语言切换组件中添加选项

// ui/src/locales/index.ts
import zhCN from './lang/zh-CN';
import enUS from './lang/en-US';
import jaJP from './lang/ja-JP';  // 新增

const messages = {
  'zh-CN': zhCN,
  'en-US': enUS,
  'ja-JP': jaJP,  // 新增
};

4.7 KiB Raw Blame History Unescape Escape