优化更新
This commit is contained in:
@@ -3,39 +3,36 @@
|
||||
<!-- Copyright (c) 2021-2026 小蚂蚁云团队 版权所有 -->
|
||||
|
||||
:::tip 说明
|
||||
当前项目仅支持中文界面,ElementPlus 使用中文语言包(`zh-cn`),所有界面文本直接硬编码在组件中。如需扩展多语言支持,可基于 vue-i18n 实现。
|
||||
当前项目仅支持中文界面,Ant Design Vue 默认支持中文,所有界面文本直接硬编码在组件中。如需扩展多语言支持,可基于 vue-i18n 实现。
|
||||
:::
|
||||
|
||||
## 当前状态
|
||||
|
||||
项目当前为中文单语言版本:
|
||||
|
||||
- ElementPlus 全局配置中文语言包:`app.use(ElementPlus, { locale: zhCn })`
|
||||
- 所有界面文本直接硬编码在组件中:`<el-button>添加岗位</el-button>`
|
||||
- Ant Design Vue 默认支持中文,无需额外配置语言包
|
||||
- 所有界面文本直接硬编码在组件中:`<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>
|
||||
<!-- 表格列通过 columns.ts 配置 -->
|
||||
</template>
|
||||
```
|
||||
|
||||
## ElementPlus 中文配置
|
||||
## Ant Design Vue 中文配置
|
||||
|
||||
项目在入口文件中全局配置 ElementPlus 中文语言包:
|
||||
Ant Design Vue 默认支持中文,无需额外配置。如需切换语言,可通过 ConfigProvider 设置:
|
||||
|
||||
```typescript
|
||||
// main.ts
|
||||
import ElementPlus from 'element-plus';
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||
|
||||
app.use(ElementPlus, { locale: zhCn });
|
||||
```vue
|
||||
<template>
|
||||
<a-config-provider :locale="zhCN">
|
||||
<App />
|
||||
</a-config-provider>
|
||||
</template>
|
||||
```
|
||||
|
||||
配置后,ElementPlus 组件的默认文本(如分页、日期选择器、表格空数据等)自动显示中文。
|
||||
|
||||
## 扩展方案
|
||||
|
||||
如需支持多语言,推荐使用 vue-i18n:
|
||||
@@ -126,8 +123,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>
|
||||
<!-- 表格列通过 columns.ts 配置 -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -136,12 +133,12 @@ const { t } = useI18n();
|
||||
</script>
|
||||
```
|
||||
|
||||
### ElementPlus 国际化联动
|
||||
### Ant Design Vue 国际化联动
|
||||
|
||||
```typescript
|
||||
// 动态切换 ElementPlus 语言
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||
import en from 'element-plus/es/locale/lang/en';
|
||||
// 动态切换 Ant Design Vue 语言
|
||||
import zhCN from 'ant-design-vue/es/locale/zh_CN';
|
||||
import enUS from 'ant-design-vue/es/locale/en_US';
|
||||
|
||||
const locale = computed(() => {
|
||||
return i18n.global.locale.value === 'zh-CN' ? zhCn : en;
|
||||
@@ -150,9 +147,9 @@ const locale = computed(() => {
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<el-config-provider :locale="locale">
|
||||
<a-config-provider :locale="locale">
|
||||
<App />
|
||||
</el-config-provider>
|
||||
</a-config-provider>
|
||||
</template>
|
||||
```
|
||||
|
||||
@@ -163,7 +160,7 @@ const locale = computed(() => {
|
||||
function changeLanguage(lang: string) {
|
||||
i18n.global.locale.value = lang;
|
||||
localStorage.setItem('lang', lang);
|
||||
// 同步切换 ElementPlus 语言
|
||||
// 同步切换 Ant Design Vue 语言
|
||||
}
|
||||
```
|
||||
|
||||
@@ -206,7 +203,7 @@ const errorMap = {
|
||||
```
|
||||
|
||||
:::warning 注意事项
|
||||
1. ElementPlus 内置组件的文本(如"暂无数据"、"请选择")通过 `locale` 属性自动切换
|
||||
1. Ant Design Vue 内置组件的文本(如"暂无数据"、"请选择")通过 `locale` 属性自动切换
|
||||
2. 后端返回的 `msg` 字段需要额外处理
|
||||
3. 日期格式、数字格式也需要考虑国际化
|
||||
:::
|
||||
@@ -227,4 +224,4 @@ const errorMap = {
|
||||
|
||||
## 总结
|
||||
|
||||
当前项目为中文单语言版本,ElementPlus 使用中文语言包。如需扩展多语言支持,可基于 vue-i18n 实现前端国际化,配合 ElementPlus 内置语言包和后端消息 code 实现全链路多语言。改造需考虑前端文本、ElementPlus 组件、后端消息三个维度的国际化。
|
||||
当前项目为中文单语言版本,Ant Design Vue 默认支持中文。如需扩展多语言支持,可基于 vue-i18n 实现前端国际化,配合 Ant Design Vue 内置语言包和后端消息 code 实现全链路多语言。改造需考虑前端文本、Ant Design Vue 组件、后端消息三个维度的国际化。
|
||||
|
||||
Reference in New Issue
Block a user