Merge branch 'main' into docs

Author: q4speed

README.md

@@ -56,7 +56,7 @@ app.mount('#app')
 
 ### License & Copyright
 
-Copyright (c) 2014-2024 飞致云 FIT2CLOUD, All rights reserved.
+Copyright (c) 2014-2025 FIT2CLOUD 飞致云, All rights reserved.
 
 Licensed under The GNU General Public License version 3 (GPLv3)  (the "License"); you may not use this file except in
 compliance with the License. You may obtain a copy of the License at

examples/locale/index.ts

@@ -0,0 +1,27 @@
+import {createI18n} from 'vue-i18n';
+import zh from '@/locale/lang/zh-cn';
+import tw from '@/locale/lang/zh-tw';
+import en from '@/locale/lang/en';
+import ru from '@/locale/lang/ru';
+import ja from '@/locale/lang/ja';
+import ms from '@/locale/lang/ms';
+import pt from '@/locale/lang/pt-br';
+
+const i18n = createI18n({
+  legacy: false,
+  locale: localStorage.getItem('lang') || 'zh',
+  fallbackLocale: 'zh',
+  globalInjection: true,
+  messages: {
+    zh,
+    tw,
+    ru,
+    en,
+    ja,
+    ms,
+    pt,
+  },
+  warnHtmlMessage: false,
+});
+
+export default i18n;

examples/main.ts

@@ -1,5 +1,6 @@
 import {createApp} from 'vue'
 import App from './App.vue'
+import i18n from './locale'
 // 整体引入
 import Fit2CloudPlus from '@/index'
 import ElementPlus from 'element-plus'
@@ -14,9 +15,10 @@ import './index.scss';
 
 const app = createApp(App);
 app.use(router)
-const options = {size: 'default', zIndex: 3000}
+const options = {size: 'default', zIndex: 3000, i18n: i18n.global.t}
 app.use(Fit2CloudPlus, options);
 app.use(ElementPlus, options)
+app.use(i18n);
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }

examples/markdown/getting-started.md

@@ -132,3 +132,53 @@ app.mount('#app')
 
 ```
 
+## 国际化
+
+创建国际化文件，例如:
+
+```typescript
+// locale/lang/zh.ts
+import fit2cloudLocale from 'fit2cloud-ui-plus/src/locale/lang/ru'
+
+const message = {
+  home: "首页",
+  ...
+}
+
+export default {
+  ...fit2cloudLocale,
+  ...message
+};
+```
+
+初始化 i18n ，例如：创建 locale/index.ts 文件：
+
+```typescript
+import {createI18n} from 'vue-i18n';
+import zh from './locale/lang/zh';
+import en from './locale/lang/en';
+
+const i18n = createI18n({
+  legacy: false,
+  locale: localStorage.getItem('lang') || 'zh',
+  fallbackLocale: 'zh',
+  globalInjection: true,
+  messages: {
+    zh,
+    en
+  },
+  warnHtmlMessage: false,
+});
+
+export default i18n;
+
+```
+
+在 main.ts 中引入翻译的方法, 例如:
+
+```typescript
+import i18n from './locale'
+
+const options = {size: 'default', zIndex: 3000, i18n: i18n.global.t}
+app.use(Fit2CloudPlus, options);
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fit2cloud-ui-plus",
-  "version": "1.1.18",
+  "version": "1.2.0",
   "private": false,
   "main": "./lib/fit2cloud-ui-plus.es.js",
   "files": [
@@ -32,6 +32,7 @@
     "vite-plugin-markdown": "^2.0.2",
     "vue": "^3.2.37",
     "vue-clipboard3": "^2.0.0",
+    "vue-i18n": "^10.0.5",
     "vue-router": "^4.0.14"
   },
   "devDependencies": {

src/components/table/table-column-select/FuTableColumnSelectPopover.vue

@@ -1,9 +1,6 @@
 <template>
   <el-popover class="fu-table-column-select" :popper-class="popperClass" :trigger="trigger"
               :show-arrow="false" :style="{'visibility': hasSelect ? 'visible': 'hidden'}">
-    <h3>
-      {{ header }}
-    </h3>
     <div class="fu-table-column-select-popper__body">
       <div v-for="(c, i) in columns" :key="i" class="fu-table-column-select-popper__item">
         <el-checkbox v-model="c.show" :checked="c.show !== false" draggable="true" @dragstart="dragstart($event, i)"
@@ -79,8 +76,4 @@ const hasSelect = computed(() => {
   return props.columns?.length > 0 && !isFixAll.value
 });
 
-const header = computed(() => {
-  return props.title || t('fu.table.custom_table_fields')
-});
-
 </script>

src/hooks/use-global-config/index.ts

@@ -8,6 +8,7 @@ export const globalConfigKey: InjectionKey<Ref<GlobalConfig>> = Symbol('GlobalCo
 export interface GlobalConfig {
   size?: string,
   locale?: any
+  i18n?: Function
 }
 
 export function useGlobalConfig(key?: keyof any, defaultValue = undefined) {

src/hooks/use-locale/index.ts

@@ -1,10 +1,10 @@
-import { computed, isRef, ref, unref } from 'vue'
-import { get } from 'lodash-unified'
+import {computed, isRef, ref, unref} from 'vue'
+import {get} from 'lodash-unified'
 import Chinese from '@/locale/lang/zh-cn'
-import { useGlobalConfig } from '@/hooks'
-import type { MaybeRef } from '@vueuse/core'
-import type { Ref } from 'vue'
-import type { Language } from '@/locale'
+import {useGlobalConfig} from '@/hooks'
+import type {MaybeRef} from '@vueuse/core'
+import type {Ref} from 'vue'
+import type {Language} from '@/locale'
 
 export type TranslatorOption = Record<string, string | number>
 export type Translator = (path: string, option?: TranslatorOption) => string
@@ -16,18 +16,22 @@ export type LocaleContext = {
 
 export const buildTranslator =
   (locale: MaybeRef<Language>): Translator =>
-  (path, option) =>
-    translate(path, option, unref(locale))
+    (path, option) =>
+      translate(path, option, unref(locale))
 
 export const translate = (
   path: string,
   option: undefined | TranslatorOption,
   locale: Language
-): string =>
-  (get(locale, path, path) as string).replace(
-    /\{(\w+)\}/g,
-    (_, key) => `${option?.[key] ?? `{${key}}`}`
-  )
+): string => {
+  if (!i18nHandler) {
+    return (get(locale, path, path) as string).replace(
+      /\{(\w+)\}/g,
+      (_, key) => `${option?.[key] ?? `{${key}}`}`
+    )
+  }
+  return i18nHandler(path);
+}
 
 export const buildLocaleContext = (
   locale: MaybeRef<Language>
@@ -45,3 +49,9 @@ export const useLocale = () => {
   const locale = useGlobalConfig('locale')
   return buildLocaleContext(computed(() => locale.value || Chinese))
 }
+
+let i18nHandler: Function;
+
+export const i18n = (fn: Function | undefined) => {
+  i18nHandler = fn || i18nHandler;
+};

src/index.ts

@@ -1,7 +1,7 @@
 import PackageJSON from "../package.json"
 
 import type {App} from 'vue'
-import {GlobalConfig, provideGlobalConfig} from "@/hooks";
+import {GlobalConfig, i18n, provideGlobalConfig} from "@/hooks";
 
 const components = import.meta.globEager('@/components/*/index.ts');
 
@@ -10,6 +10,7 @@ const install = (app: App, config: GlobalConfig): void => {
     let component = components[key].default;
     app.use(component)
   })
+  i18n(config.i18n)
   provideGlobalConfig(config)
 }
 

src/locale/index.ts

@@ -1,6 +1,10 @@
 export { default as en } from './lang/en'
 export { default as zhCn } from './lang/zh-cn'
 export { default as zhTw } from './lang/zh-tw'
+export { default as ja } from './lang/ja'
+export { default as ms } from './lang/ms'
+export { default as ru } from './lang/ru'
+export { default as ptBr } from './lang/pt-br'
 
 export type TranslatePair = {
   [key: string]: string | string[] | TranslatePair