签入版本

This commit is contained in:
2026-09-16 16:30:26 +08:00
parent c97d87847f
commit 67b91442fb
52 changed files with 2089 additions and 412 deletions
@@ -1,22 +1,22 @@
# 国际化
:::tip 说明
当前项目仅支持中文界面,ElementPlus 使用中文语言包(`zh-cn`),所有界面文本直接硬编码在组件中。如需扩展多语言支持,可基于 vue-i18n 实现。
当前项目仅支持中文界面,AntDesign 使用中文语言包(`zh-cn`),所有界面文本直接硬编码在组件中。如需扩展多语言支持,可基于 vue-i18n 实现。
:::
## 当前状态
项目当前为中文单语言版本:
- ElementPlus 全局配置中文语言包:`app.use(ElementPlus, { locale: zhCn })`
- 所有界面文本直接硬编码在组件中:`<el-button>添加岗位</el-button>`
- AntDesign 全局配置中文语言包:`app.use(AntDesign, { locale: zhCn })`
- 所有界面文本直接硬编码在组件中:`<a-button>添加岗位</a-button>`
- 后端返回的 `msg` 字段为中文:`"操作成功"`、`"岗位名称不能重复"`
```vue
<template>
<el-button type="primary">添加岗位</el-button>
<el-table-column label="岗位名称" prop="name" />
<el-table-column label="创建时间" prop="createTime" />
<a-button type="primary">添加岗位</a-button>
<a-table-column label="岗位名称" prop="name" />
<a-table-column label="创建时间" prop="createTime" />
</template>
```
@@ -65,8 +65,8 @@ export default i18n;
```vue
<template>
<el-button type="primary">{{ $t('common.add') }}</el-button>
<el-table-column :label="$t('position.name')" prop="name" />
<a-button type="primary">{{ $t('common.add') }}</a-button>
<a-table-column :label="$t('position.name')" prop="name" />
</template>
<script setup>
@@ -75,13 +75,13 @@ import { useI18n } from 'vue-i18n';
</script>
```
### ElementPlus 国际化
### AntDesign 国际化
```typescript
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';
import zhCn from 'ant-design-vue/es/locale/lang/zh-cn';
import en from 'ant-design-vue/es/locale/lang/en';
app.use(ElementPlus, { locale: zhCn });
app.use(AntDesign, { locale: zhCn });
```
### 语言切换组件
@@ -89,19 +89,19 @@ app.use(ElementPlus, { locale: zhCn });
```vue
<!-- src/components/LangSelect/index.vue -->
<template>
<el-dropdown @command="handleLangChange">
<a-dropdown @command="handleLangChange">
<span class="lang-icon">🌐</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="zh-CN" :disabled="locale === 'zh-CN'">
<a-dropdown-menu>
<a-dropdown-item command="zh-CN" :disabled="locale === 'zh-CN'">
中文
</el-dropdown-item>
<el-dropdown-item command="en-US" :disabled="locale === 'en-US'">
</a-dropdown-item>
<a-dropdown-item command="en-US" :disabled="locale === 'en-US'">
English
</el-dropdown-item>
</el-dropdown-menu>
</a-dropdown-item>
</a-dropdown-menu>
</template>
</el-dropdown>
</a-dropdown>
</template>
<script setup lang="ts">
@@ -115,7 +115,7 @@ const handleLangChange = (lang: string) => {
locale.value = lang;
localStorage.setItem('lang', lang);
appStore.setLocale(lang);
// 刷新页面以更新 ElementPlus 语言包
// 刷新页面以更新 AntDesign 语言包
window.location.reload();
};
</script>
@@ -137,7 +137,7 @@ const msgMap: Record<number, string> = {
// Axios 响应拦截器中
if (response.data.code !== 0) {
const msg = msgMap[response.data.code] || response.data.msg;
ElMessage.error(msg);
message.error(msg);
}
```
@@ -147,4 +147,4 @@ if (response.data.code !== 0) {
## 总结
当前项目为中文单语言版本,ElementPlus 使用中文语言包。如需扩展多语言支持,可基于 vue-i18n 实现前端国际化,配合 ElementPlus 内置语言包和后端消息 code 实现全链路多语言。语言切换组件可放在顶栏,支持用户手动切换。
当前项目为中文单语言版本,AntDesign 使用中文语言包。如需扩展多语言支持,可基于 vue-i18n 实现前端国际化,配合 AntDesign 内置语言包和后端消息 code 实现全链路多语言。语言切换组件可放在顶栏,支持用户手动切换。