Ver código fonte

feat: 调整多语言解决方案

将多语言的就近原则改为在public中集中定义
zhupei@smartai.com 1 ano atrás
pai
commit
964259e9ee
5 arquivos alterados com 75 adições e 28 exclusões
  1. 2 0
      docs/i18n.md
  2. 18 0
      public/i18n/lang-en.json
  3. 18 0
      public/i18n/lang-zh.json
  4. 31 24
      src/i18n.js
  5. 6 4
      src/index.js

+ 2 - 0
docs/i18n.md

@@ -2,8 +2,10 @@
 
 项目支持多语言,在开发过程中,应时刻注意`多语言`的设置。
 
+<s>
 多语言的定义按照`就近原则`,在哪个文件中使用的,就在该文件`同目录`下,创建一个多语言配置文件。
 
 查看示例:`src/views/common/Header.vue`与`src/views/common/header-i18n.js`
 
 所有`-i18n.js`文件,都需要在`src/i18n.js`中进行注册。
+</s>

+ 18 - 0
public/i18n/lang-en.json

@@ -0,0 +1,18 @@
+{
+  "message": {
+    "hello": "hello world"
+  },
+  "header": {
+    "conversation": "Conversation",
+    "knowledge": "Knowledge Base Management",
+    "model": "Model Management",
+    "agent": "Agent",
+    "intelligent": "Intelligent",
+    "permission": "Permission",
+
+    "search": "Search",
+    "language": "Language",
+    "theme": "Theme",
+    "setting": "Settings"
+  }
+}

+ 18 - 0
public/i18n/lang-zh.json

@@ -0,0 +1,18 @@
+{
+  "message": {
+    "hello": "欢迎光临"
+  },
+  "header": {
+    "conversation": "会话",
+    "knowledge": "知识库管理",
+    "model": "模型管理",
+    "agent": "Agent",
+    "intelligent": "智能体",
+    "permission": "权限管理",
+
+    "search": "搜索",
+    "language": "语言",
+    "theme": "主题",
+    "setting": "设置"
+  }
+}

+ 31 - 24
src/i18n.js

@@ -2,39 +2,32 @@ import { createI18n } from 'vue-i18n';
 
 import { localST_Locale } from './base/storage';
 
-import { header_zh, header_en } from './views/common/header-i18n';
-
 import { LANGUAGE_ENGLISH, LANGUAGE_CHINESE } from './base/variables';
 
 import { useLocaleStore } from './base/store/use-locale';
 
+import ajax from './base/ajax';
+
 /**
  * 多语言解决方案
  * @see https://vue-i18n.intlify.dev/
  */
 
-/**
- * 配置多语言
- * @see https://vue-i18n.intlify.dev/guide/installation.html#package-managers
- */
-const i18n = createI18n({
-  locale: LANGUAGE_CHINESE,
-  fallbackLocale: LANGUAGE_ENGLISH,
-  messages: {
-    en: {
-      message: {
-        hello: 'hello world'
-      },
-      header: header_en
-    },
-    zh: {
-      message: {
-        hello: '欢迎光临'
-      },
-      header: header_zh
-    }
+let i18n = null;
+
+// 创建一个函数来加载语言文件
+async function loadLocaleMessages() {
+  const messages = {};
+  const locales = [LANGUAGE_ENGLISH, LANGUAGE_CHINESE]; // 根据你的需求添加语言代码
+
+  for (const locale of locales) {
+    const url = `/i18n/lang-${locale}.json`;
+    const response = await ajax.get(url);
+    messages[locale] = response;
   }
-});
+
+  return messages;
+}
 
 /**
  * 检查一个字符串是否是合法的语言名称
@@ -56,6 +49,10 @@ export function setI18nLanguage(locale) {
     return;
   }
 
+  if (!i18n) {
+    return;
+  }
+
   i18n.global.locale = locale;
 
   localST_Locale.setItem(locale);
@@ -73,4 +70,14 @@ export function setI18nLanguage(locale) {
   store.updateLanguage(locale);
 }
 
-export default i18n;
+export async function setupI18n() {
+  const messages = await loadLocaleMessages();
+
+  i18n = createI18n({
+    locale: LANGUAGE_CHINESE,
+    fallbackLocale: LANGUAGE_ENGLISH,
+    messages
+  });
+
+  return i18n;
+}

+ 6 - 4
src/index.js

@@ -18,7 +18,7 @@ import { createPinia } from 'pinia';
 import App from './App.vue';
 
 import router from './router'; // 路由
-import i18n from './i18n'; // 多语言
+import { setupI18n } from './i18n';
 
 import { initTheme } from './base/theme';
 
@@ -29,7 +29,9 @@ app.use(WujieVue);
 app.use(pinia);
 app.use(ArcoVue);
 app.use(router);
-app.use(i18n);
 
-app.mount('#app');
-initTheme();
+setupI18n().then((i18n) => {
+  app.use(i18n);
+  app.mount('#app');
+  initTheme();
+});