签入版本

2026-09-16 13:28:20 +08:00
parent 6cd5e80de0
commit c97d87847f
410 changed files with 68726 additions and 0 deletions
@@ -0,0 +1,150 @@
+# 国际化
+
+:::tip 说明
+当前项目仅支持中文界面，ElementPlus 使用中文语言包（`zh-cn`），所有界面文本直接硬编码在组件中。如需扩展多语言支持，可基于 vue-i18n 实现。
+:::
+
+## 当前状态
+
+项目当前为中文单语言版本：
+
+- ElementPlus 全局配置中文语言包：`app.use(ElementPlus, { locale: zhCn })`
+- 所有界面文本直接硬编码在组件中：`<el-button>添加岗位</el-button>`
+- 后端返回的 `msg` 字段为中文：`"操作成功"`、`"岗位名称不能重复"`
+
+```vue
+<template>
+    <el-button type="primary">添加岗位</el-button>
+    <el-table-column label="岗位名称" prop="name" />
+    <el-table-column label="创建时间" prop="createTime" />
+</template>
+```
+
+## 扩展方案
+
+如需支持多语言，推荐使用 vue-i18n：
+
+### 安装依赖
+
+```bash
+pnpm add vue-i18n
+```
+
+### 配置 i18n
+
+```typescript
+// src/i18n/index.ts
+import { createI18n } from 'vue-i18n';
+import zhCN from './locales/zh-CN.json';
+import enUS from './locales/en-US.json';
+
+const i18n = createI18n({
+    legacy: false,
+    locale: localStorage.getItem('lang') || 'zh-CN',
+    fallbackLocale: 'zh-CN',
+    messages: { 'zh-CN': zhCN, 'en-US': enUS },
+});
+
+export default i18n;
+```
+
+### 语言文件
+
+```json
+// src/i18n/locales/zh-CN.json
+{
+ "common": {
+    "add": "新增", "edit": "编辑", "delete": "删除",
+    "search": "搜索", "reset": "重置", "confirm": "确定", "cancel": "取消"
+ },
+ "position": { "name": "岗位名称", "status": "状态", "sort": "排序" }
+}
+```
+
+### 组件中使用
+
+```vue
+<template>
+    <el-button type="primary">{{ $t('common.add') }}</el-button>
+    <el-table-column :label="$t('position.name')" prop="name" />
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n';
+    const { t } = useI18n();
+</script>
+```
+
+### ElementPlus 国际化
+
+```typescript
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import en from 'element-plus/es/locale/lang/en';
+
+app.use(ElementPlus, { locale: zhCn });
+```
+
+### 语言切换组件
+
+```vue
+<!-- src/components/LangSelect/index.vue -->
+<template>
+  <el-dropdown @command="handleLangChange">
+    <span class="lang-icon">🌐</span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item command="zh-CN" :disabled="locale === 'zh-CN'">
+          中文
+        </el-dropdown-item>
+        <el-dropdown-item command="en-US" :disabled="locale === 'en-US'">
+          English
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useAppStore } from '/@/store/modules/app';
+
+const { locale } = useI18n();
+const appStore = useAppStore();
+
+const handleLangChange = (lang: string) => {
+  locale.value = lang;
+  localStorage.setItem('lang', lang);
+  appStore.setLocale(lang);
+  // 刷新页面以更新 ElementPlus 语言包
+  window.location.reload();
+};
+</script>
+```
+
+### 后端消息国际化
+
+后端返回的 `msg` 字段可通过 code 映射实现多语言：
+
+```typescript
+// 前端根据 code 映射多语言消息
+const msgMap: Record<number, string> = {
+  0: t('common.success'),
+  1: t('common.failed'),
+  401: t('common.unauthorized'),
+  403: t('common.forbidden'),
+};
+
+// Axios 响应拦截器中
+if (response.data.code !== 0) {
+  const msg = msgMap[response.data.code] || response.data.msg;
+  ElMessage.error(msg);
+}
+```
+
+:::tip 温馨提示
+国际化改造工作量较大，建议在项目初期规划。如仅需中文，当前硬编码方式即可满足需求。改造时需要同时处理前端文本和后端返回的 `msg` 字段。
+:::
+
+## 总结
+
+当前项目为中文单语言版本，ElementPlus 使用中文语言包。如需扩展多语言支持，可基于 vue-i18n 实现前端国际化，配合 ElementPlus 内置语言包和后端消息 code 实现全链路多语言。语言切换组件可放在顶栏，支持用户手动切换。