优化更新

DjangoAdmin_Flask_NaiveVue/zh/volume4/frontend/i18n.md

@@ -1,25 +1,39 @@
 # 国际化
 
 :::tip 说明
-当前项目仅支持中文界面，ElementPlus 使用中文语言包（`zh-cn`），所有界面文本直接硬编码在组件中。如需扩展多语言支持，可基于 vue-i18n 实现。
+当前项目仅支持中文界面，NaiveUI 通过 `n-config-provider` 的 `locale` 属性配置中文语言包，所有界面文本直接硬编码在组件中。如需扩展多语言支持，可基于 vue-i18n 实现。
 :::
 
 ## 当前状态
 
 项目当前为中文单语言版本：
 
-- ElementPlus 全局配置中文语言包：`app.use(ElementPlus, { locale: zhCn })`
-- 所有界面文本直接硬编码在组件中：`<el-button>添加岗位</el-button>`
+- NaiveUI 通过 `n-config-provider` 全局配置中文语言包：`:locale="zhCN"`
+- 所有界面文本直接硬编码在组件中：`<n-button>添加岗位</n-button>`
 - 后端返回的 `msg` 字段为中文：`"操作成功"`、`"岗位名称不能重复"`
 
 ```vue
 <template>
-    <el-button type="primary">添加岗位</el-button>
-    <el-table-column label="岗位名称" prop="name" />
-    <el-table-column label="创建时间" prop="createTime" />
+    <n-button type="primary">添加岗位</n-button>
 </template>
 ```
 
+## NaiveUI 语言配置
+
+NaiveUI 通过 `n-config-provider` 组件配置语言：
+
+```vue
+<template>
+    <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
+        <router-view />
+    </n-config-provider>
+</template>
+
+<script setup>
+import { zhCN, dateZhCN } from 'naive-ui';
+</script>
+```
+
 ## 扩展方案
 
 如需支持多语言，推荐使用 vue-i18n：
@@ -65,8 +79,7 @@ export default i18n;
 
 ```vue
 <template>
-    <el-button type="primary">{{ $t('common.add') }}</el-button>
-    <el-table-column :label="$t('position.name')" prop="name" />
+    <n-button type="primary">{{ $t('common.add') }}</n-button>
 </template>
 
 <script setup>
@@ -75,19 +88,27 @@ import { useI18n } from 'vue-i18n';
 </script>
 ```
 
-### ElementPlus 国际化
+### NaiveUI 国际化
 
-```typescript
-import zhCn from 'element-plus/es/locale/lang/zh-cn';
-import en from 'element-plus/es/locale/lang/en';
+```vue
+<template>
+    <n-config-provider :locale="currentLocale" :date-locale="currentDateLocale">
+        <router-view />
+    </n-config-provider>
+</template>
 
-app.use(ElementPlus, { locale: zhCn });
+<script setup>
+import { zhCN, dateZhCN, enUS, dateEnUS } from 'naive-ui';
+
+const currentLocale = computed(() => lang === 'zh-CN' ? zhCN : enUS);
+const currentDateLocale = computed(() => lang === 'zh-CN' ? dateZhCN : dateEnUS);
+</script>
 ```
 
 :::tip 温馨提示
-国际化改造工作量较大，建议在项目初期规划。如仅需中文，当前硬编码方式即可满足需求。改造时需要同时处理前端文本和后端返回的 `msg` 字段。
+国际化改造工作量较大，建议在项目初期规划。如仅需中文，当前硬编码方式即可满足需求。改造时需要同时处理前端文本和后端返回的 `msg` 字段。NaiveUI 内置中文语言包，无需额外安装。
 :::
 
 ## 总结
 
-当前项目为中文单语言版本，ElementPlus 使用中文语言包。如需扩展多语言支持，可基于 vue-i18n 实现前端国际化，配合 ElementPlus 内置语言包和后端消息 code 实现全链路多语言。
+当前项目为中文单语言版本，NaiveUI 通过 `n-config-provider` 的 `:locale="zhCN"` 配置中文。如需扩展多语言支持，可基于 vue-i18n 实现前端国际化，配合 NaiveUI 内置语言包和后端消息 code 实现全链路多语言。