签入版本

DjangoAdmin_Tornado_NaiveVue/zh/volume4/frontend/i18n.md

@@ -1,22 +1,21 @@
 # 国际化
 
 :::tip 说明
-当前项目仅支持中文界面，ElementPlus 使用中文语言包（`zh-cn`），所有界面文本直接硬编码在组件中。如需扩展多语言支持，可基于 vue-i18n 实现。
+当前项目仅支持中文界面，NaiveUI 默认使用中文，所有界面文本直接硬编码在组件中。如需扩展多语言支持，可基于 vue-i18n 实现。
 :::
 
 ## 当前状态
 
 项目当前为中文单语言版本：
 
-- ElementPlus 全局配置中文语言包：`app.use(ElementPlus, { locale: zhCn })`
-- 所有界面文本直接硬编码在组件中：`<el-button>添加岗位</el-button>`
+- NaiveUI 默认中文，无需额外配置
+- 所有界面文本直接硬编码在组件中：`<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>
+    <!-- 表格列定义在 columns.ts 中 -->
 </template>
 ```
 
@@ -65,8 +64,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,13 +73,20 @@ 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';
+NaiveUI 通过 `n-config-provider` 的 `locale` 属性支持国际化：
 
-app.use(ElementPlus, { locale: zhCn });
+```vue
+<template>
+    <n-config-provider :locale="zhCN">
+        <App />
+    </n-config-provider>
+</template>
+
+<script setup>
+import { zhCN, dateZhCN } from 'naive-ui';
+</script>
 ```
 
 ### 语言切换组件
@@ -89,19 +94,9 @@ 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>
+  <n-dropdown :options="langOptions" @select="handleLangChange">
+    <n-button text>🌐</n-button>
+  </n-dropdown>
 </template>
 
 <script setup lang="ts">
@@ -111,11 +106,16 @@ import { useAppStore } from '/@/store/modules/app';
 const { locale } = useI18n();
 const appStore = useAppStore();
 
+const langOptions = [
+    { label: '中文', key: 'zh-CN', disabled: locale.value === 'zh-CN' },
+    { label: 'English', key: 'en-US', disabled: locale.value === 'en-US' },
+];
+
 const handleLangChange = (lang: string) => {
   locale.value = lang;
   localStorage.setItem('lang', lang);
   appStore.setLocale(lang);
-  // 刷新页面以更新 ElementPlus 语言包
+  // 刷新页面以更新 NaiveUI 语言包
   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);
+  window.$message.error(msg);
 }
 ```
 
@@ -147,4 +147,4 @@ if (response.data.code !== 0) {
 
 ## 总结
 
-当前项目为中文单语言版本，ElementPlus 使用中文语言包。如需扩展多语言支持，可基于 vue-i18n 实现前端国际化，配合 ElementPlus 内置语言包和后端消息 code 实现全链路多语言。语言切换组件可放在顶栏，支持用户手动切换。
+当前项目为中文单语言版本，NaiveUI 默认使用中文。如需扩展多语言支持，可基于 vue-i18n 实现前端国际化，配合 NaiveUI 的 `n-config-provider` 内置语言包和后端消息 code 实现全链路多语言。语言切换组件可放在顶栏，支持用户手动切换。