merge feat/i18n-sync into dev

重新提交：devui组件国际化放出并完善文档

Created-by: xbghc
Commit-by: xbghc;liuaolin44944
Merged-by: GreatZP
Description: 过去的提交在同步github内容时被覆盖了，先重新提交

ref: https://gitcode.com/DevCloudFE/vue-devui/pull/10

See merge request: DevCloudFE/vue-devui!19

Author: GreatZPP

packages/devui-vue/devui/locale/create.ts

@@ -16,7 +16,7 @@ export function get(object: any, path: string) {
 export function createI18nTranslate(name: string, app, newPrefix?: string) {
   const prefix = newPrefix || camelize(name) + '.';
   return (path: string): any => {
-    const messages = app?.appContext.config.globalProperties.langMessages?.value || Locale.messages();
+    const messages = app?.appContext.config.globalProperties.langMessages || Locale.messages();
     const message = get(messages, prefix + path) || get(messages, path);
     return message;
   };

packages/devui-vue/devui/locale/index.ts

@@ -1,35 +1,44 @@
 import { App, reactive, ref } from 'vue';
-import { deepAssign } from '../shared/utils/deep-assign';
 import zhCN from './lang/zh-cn';
+import enUS from './lang/en-us';
 
 const lang = ref('zh-CN');
-let langMessages = reactive({
-  [lang.value]: zhCN
+const nowApp = ref(); // 用来存储install注册实例的app
+let langMessages = reactive<{[index: string]: any}> ({
+  ['zh-CN']: zhCN,
+  ['en-US']: enUS,
 });
 
 const Locale = {
-  messages(): Record<string, unknown> {
-    return langMessages[lang.value];
+  messages(language = lang.value): Record<string, unknown> {
+    return langMessages[language];
   },
-
   lang(): string {
     return lang.value;
   },
-
-  use(newLang: string, newMessages?: Record<string, unknown>): void {
+  // 切换语言
+  use(newLang: string): void {
+    const app = nowApp.value;
     lang.value = newLang;
-    this.add({ [newLang]: newMessages });
+    app.config.globalProperties.langMessages = Locale.messages();
   },
-
-  add(newMessages = {}): void {
-    langMessages = deepAssign(langMessages, newMessages);
+  // 在列表中增加一种语言，相同则覆盖 (可以在不影响加载的情况下添加，提高切换性能)
+  add(newMessages: Record<string, unknown>): void {
+    langMessages = {
+      ...langMessages,
+      ...newMessages
+    };
   },
 };
-
+// 导出
 export { Locale };
 
 export default {
-  install(app: App): void {
-    app.config.globalProperties.langMessages = ref(Locale.messages());
+  title: '国际化',
+  category: '基础',
+  status: '100%',
+  install(app: App, language?: string): void {
+    app.config.globalProperties.langMessages = Locale.messages(language);
+    nowApp.value = app;
   }
 };

packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue

@@ -11,8 +11,6 @@ import ZhLang from './icons/ZhLang.vue'
 import EnLang from './icons/EnLang.vue'
 import ThemePicker from './ThemePicker.vue'
 import { Locale } from '@devui/locale'
-import enUS from '@devui/locale/lang/en-us'
-import zhCN from '@devui/locale/lang/zh-cn'
 import { LANG_KEY, CURRENT_LANG, ZH_CN, EN_US } from '../const'
 
 // 主题切换
@@ -66,16 +64,14 @@ const LANG_MAP = {
 }
 
 const currentLang = ref(CURRENT_LANG);
-const app = getCurrentInstance();
 const switchLang = () => {
   if (currentLang.value === ZH_CN) {
-    Locale.use(EN_US, enUS);
+    Locale.use(EN_US);
     currentLang.value = EN_US;
   } else {
-    Locale.use(ZH_CN, zhCN);
+    Locale.use(ZH_CN);
     currentLang.value = ZH_CN;
   }
-  app.appContext.config.globalProperties.langMessages.value = Locale.messages();
 };
 </script>
 
@@ -97,7 +93,7 @@ const switchLang = () => {
 
         <div class="custom-nav flex items-center ml-l">
           <div class="custom-nav-item ml-m" style="font-size: 0"
-            @click="() => useTranslation(defaultLanguage === ZH_CN ? EN_US : ZH_CN)" v-if="false">
+            @click="() => useTranslation(defaultLanguage === ZH_CN ? EN_US : ZH_CN)" v-if="true">
             <ZhLang v-if="defaultLanguage === ZH_CN"></ZhLang>
             <EnLang v-else></EnLang>
           </div>

packages/devui-vue/docs/theme-guide/index.md

@@ -139,3 +139,38 @@ export class Theme {
   isDark?: boolean;               // 是否是深色主题
 }
 ```
+
+# 组件国际化
+ 
+我们提供了一种比较简洁的方法，可以方便的进行组件的国际化。
+内置支持中文（zh-CN）和英文（en-US）两种，也支持自定义其他语言，并且可以在添加的语言列表中任意随意切换。
+
+<a href="https://github.com/DevCloudFE/vue-devui/tree/dev/packages/devui-vue/devui/locale/lang" target="_blank">多语言文件格式</a>
+
+在main.ts中引用并注册即可（不调用则默认是中文）:
+
+
+ #### 初始化
+
+```ts
+import { createApp } from 'vue';
+import LocalInstall from 'vue-devui/locale';
+const app = createApp(App);
+// 直接初始化使用
+app.use(LocalInstall);
+
+// 指定语言初始化使用
+app.use(LocalInstall, 'en-US');
+```
+
+ #### 切换语言
+```ts
+import { Locale } from 'vue-devui/locale';
+Locale.use('zh-CN');
+
+// 使用自定义语言，假如你有一个多语言文件为jaJP（具体的文件格式参照上述链接中的多语言文件格式）
+Locale.add({ 'ja-JP': jaJP });
+Locale.use('ja-JP');
+```
+
+有些组件暂未完备国际化配置，欢迎各位同学查漏补缺，[加入我们](/contributing/)，贡献代码。