plain-design 1.0.0-beta.49 → 1.0.0-beta.50

package/src/packages/i18n/i18n.utils.ts

@@ -1,164 +1,216 @@
-import {computed, reactive} from "plain-design-composition";
-import {deepIterateObject} from "../utils/deepIterateObject";
+import {createSyncHooks, reactive} from "plain-design-composition";
+import {ZhCnLocale} from './lang/zh-cn';
+import {deepmerge} from "../components/PageThemeUtils/deepmerge";
 
 /**
- * 获取对象的属性值访问路径字符串联合类型
- * 比如 type A = {
- *   base:{
- *     confirm:'确定',
- *     cancel:'取消',
- *   },
- *   date:{
- *     year:'年',
- *     month:'月',
- *     date:'日',
- *   },
- * }
- * 得到的联合类型是：'base.confirm'|'base.cancel'|'date.year'|'date.month'|'date.date'
+ /**
+ * 默认语言为中文
  * @author  韦胜健
- * @date    2022.5.2 11:44
+ * @date    2023/10/12 15:14
  */
-export type ObjectAccessPaths<T, Prev extends string = '', K = keyof T> =
-  K extends keyof T ? (
-      K extends string ? (
-        T[K] extends Record<string, any> ? ObjectAccessPaths<T[K], `${Prev}.${K}`> : (
-          `${Prev}.${K}` extends `.${infer L}` ? L : `${Prev}.${K}`
-          )
-        ) : never
-      ) :
-    never;
-// type A = ObjectAccessPaths<tZhCnLocale>
+const DEFAULT_LANG = 'zh-cn';
 
 /**
- * 将字符串类型分割为元组类型
- * base.select.reverse => ['base','select','reverse']
+ * 组件内置中文以及英文
  * @author  韦胜健
- * @date    2022.5.2 11:46
+ * @date    2023/10/12 15:14
  */
-type Split<Str extends string, Sep extends string, Prev extends any[] = []> = Str extends `${infer L}${Sep}${infer R}` ? [...Prev, L, ...Split<R, Sep>] : [...Prev, Str]
-// type A = Split<'base.select.reverse', '.'>
+const LANGS = {
+  [DEFAULT_LANG]: ZhCnLocale,
+};
 
 /**
- * 通过访问路劲元组类型，得到对象中具体属性值的类型
- * AccessObjectValue<A,['base','confirm']> 得到的类型是 `确定`
+ * 根据中文解析出来允许访问的编码类型
  * @author  韦胜健
- * @date    2022.5.2 11:48
+ * @date    2023/10/12 15:14
  */
-type AccessObjectValue<Obj extends Record<string, any>, Path extends string[]> = Path extends [infer L, ...infer R] ? (
-  L extends keyof Obj ? (R extends string[] ? AccessObjectValue<Obj[L], R> : never) : never
-  ) : Obj
-// type N = AccessObjectValue<tZhCnLocale, ['base', 'confirm']>
+type iFormat<
+  T extends Record<string, any>,
+  PREV extends string = '',
+  K = keyof T
+> = K extends keyof T
+  ? T[K] extends Record<any, any>
+    ? iFormat<T[K], K extends string ? (PREV extends '' ? K : `${PREV}.${K}`) : ''>
+    : [PREV] extends ['']
+      ? K
+      : K extends string
+        ? `${PREV}.${K}`
+        : never
+  : never;
 
 /**
- * 将对象类型转换为平铺属性的对象类型，比如A类型转化为
- * {
- *   "base.confirm":"确定",
- *   "base.cancel":"取消",
- *   "base.year":"年",
- *   "base.month":"月",
- *   "base.date":"日",
- * }
+ * 允许访问的编码类型
  * @author  韦胜健
- * @date    2022.5.2 11:49
+ * @date    2023/10/12 15:14
  */
-type ObjectMap<T extends Record<string, any>> = { [k in ObjectAccessPaths<T>]: AccessObjectValue<T, Split<k, '.'>> }
-// type O = ObjectMap<tZhCnLocale>
-
-/**
- * 联合类型转换为交叉类型（函数重载类型就是交叉类型）
- * @author  韦胜健
- * @date    2022.5.2 11:50
- */
-type UnionToIntersection<T> = (T extends any ? ((t: T) => void) : never) extends ((r: infer R) => any) ? R : never
-
-/**
- * 创建i18n对象
- * @author  韦胜健
- * @date    2022.5.2 10:34
- */
-export function createI18n<Locale extends Record<string, any>, OM = ObjectMap<Locale>, K extends keyof OM = keyof OM>(defaultLocale: Locale): UnionToIntersection<K extends keyof OM ? ((k: K, params?: Record<string, any>) => { d: <D = unknown>(defaultLang?: D) => OM[K] | D }) : never> & {
-  setLocale: (locale: any) => void,
-  setDefaultLocale: (defaultLocale: any) => void,
-  getLocale: () => Locale,
-  getDefaultLocale: () => Locale,
-} {
+type iStandardLangPath = iFormat<typeof ZhCnLocale>;
 
+export const i18n = (() => {
   const state = reactive({
-    /*当前语言*/
-    locale: defaultLocale,
-    /*从当前语言中取不到值得时候，从这个默认语言中取值*/
-    defaultLocale,
+    currentLang: DEFAULT_LANG,
+    langs: LANGS as any
   });
 
+  const hooks = {
+    onChangeLang: createSyncHooks<() => void>(),
+    onUpdateLangs: createSyncHooks<() => void>()
+  };
+
   /**
-   * 将多层级的对象拍平为一层的对象
+   * 使用指定的语言转化编码
    * @author  韦胜健
-   * @date    2022.5.2 12:04
+   * @date    2023/10/11 9:28
+   * @param   lang    指定的域名名字
+   * @param   path    要转换的编码
+   * @param   options 转换编码时的格式化参数
    */
-  const getMapObject = <Obj extends Record<string, any>>(obj: Obj): ObjectMap<Obj> => {
-    const map = {} as any;
-    deepIterateObject(obj, (key, value, accessPath) => {
-      if (typeof value === "string") {
-        map[accessPath?.join('.')] = value;
-      }
-    });
-    return map;
+  const intlWithLang = (lang: string, path: string, options: any): string | undefined => {
+    if (!state.langs[lang]) {
+      console.log({ langs: state.langs, lang });
+      throw new Error(`不存在多语言：${lang}`);
+    }
+    const array = path.split('.');
+    let current = state.langs[lang];
+    for (let i = 0, j = array.length; i < j; i++) {
+      const property = array[i];
+      let value = current[property];
+      if (i === j - 1) return !options ? value : formatLang(value, options);
+      if (!value) return '';
+      current = value;
+    }
+    return '';
   };
 
-  const map = computed(() => ({
-    locale: getMapObject(state.locale),
-    defaultLocale: getMapObject(state.defaultLocale)
-  }));
-
   /**
-   * 设置当前语言
+   * 使用当前语言转换编码
    * @author  韦胜健
-   * @date    2022.5.2 10:33
+   * @date    2023/10/11 9:29
    */
-  const setLocale = (locale: Locale) => state.locale = locale as any;
+  const $t = (path: string, options?: Record<string, any>) => {
+    let { currentLang } = state;
+    if (!state.langs[currentLang]) {
+      currentLang = DEFAULT_LANG;
+    }
+    const isDefaultLang = currentLang === DEFAULT_LANG;
+
+    let valString = intlWithLang(currentLang, path, options);
+
+    if (!valString) {
+      if (!isDefaultLang) {
+        valString = intlWithLang(DEFAULT_LANG, path, options);
+      }
+    }
+
+    return valString;
+  };
+
   /**
-   * 设置默认语言
+   * 类似于$t, 可以指定默认展示文本，当多语言配置即使默认语言也没有办法转化这个编码时
    * @author  韦胜健
-   * @date    2022.5.2 10:33
+   * @date    2023/10/12 15:12
    */
-  const setDefaultLocale = (defaultLocale: Locale) => state.defaultLocale = defaultLocale as any;
+  const $intl = (path: string, options?: Record<string, any>) => {
+    return {
+      d: (desc: string) => {
+        const valString = $t(path, options);
+        if (!!valString) {
+          return valString;
+        }
+        return desc;
+      }
+    };
+  };
+
+  const $it = (path: iStandardLangPath, options?: Record<string, any>) => {
+    return $intl(path, options);
+  };
 
   /**
-   * 获取当前语言
+   * 应用指定语言
    * @author  韦胜健
-   * @date    2024.4.20 8:49
+   * @date    2023/10/11 9:29
    */
-  const getLocale = () => state.locale;
-
+  const use = (lang: string, locale: any) => {
+    state.currentLang = lang;
+    state.langs[lang] = locale;
+    hooks.onChangeLang.exec(undefined);
+  };
   /**
-   * 获取默认语言
+   * 切换至指定语言
    * @author  韦胜健
-   * @date    2024.4.20 8:49
+   * @date    2023/10/11 9:30
    */
-  const getDefaultLocale = () => state.defaultLocale;
-
+  const switchTo = async (lang: string, loadMethod?: () => any) => {
+    let locale = !loadMethod ? state.langs[lang] : await loadMethod();
+    use(lang, locale);
+  };
+  /**
+   * 获取当前使用的语言
+   * @author  韦胜健
+   * @date    2023/10/11 9:30
+   */
+  const getCurrentLanguage = () => {
+    return state.currentLang;
+  };
   /**
-   * 取值
+   * 设置语言
    * @author  韦胜健
-   * @date    2022.5.2 10:33
+   * @date    2023/10/11 9:30
    */
-  const getter = (path: string, params?: Record<string, any>) => {
-    let value = (map.value.locale as any)[path];
-    if (!value) {
-      value = (map.value.defaultLocale as any)[path];
+  const setLangs = (langs: any) => {
+    state.langs = deepmerge(state.langs, langs);
+    hooks.onUpdateLangs.exec(undefined);
+  };
+
+  return {
+    $t,
+    $intl,
+    $it,
+    use,
+    switchTo,
+    getCurrentLanguage,
+    setLangs,
+    DEFAULT_LANG,
+    state,
+    hooks,
+  };
+})();
+
+const formatLang = (() => {
+  const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+  function hasOwn(obj: any, key: string) {
+    return hasOwnProperty.call(obj, key);
+  }
+
+  const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
+
+  const format = (string: string | null | undefined, ...args: any) => {
+    if (string == null || string.length === 0) {
+      return null;
     }
-    return {
-      d: (defaultString: string) => {
-        if (!!value) {
-          if (/\{.+\}/.test(value)) {
-            value = (value as string).replace(/\{(.+?)\}/, (input, group1) => params?.[group1]);
-          }
-          return value;
+    if (args.length === 1 && typeof args[0] === 'object') {
+      args = args[0];
+    }
+
+    if (!args || !args.hasOwnProperty) {
+      args = {};
+    }
+
+    return string.replace(RE_NARGS, (match, prefix, i, index) => {
+      let result;
+
+      if (string[index - 1] === '{' && string[index + match.length] === '}') {
+        return i;
+      } else {
+        result = hasOwn(args, i) ? args[i] : null;
+        if (result === null || result === undefined) {
+          return '';
         }
-        return defaultString || '';
-      },
-    };
-  };
 
-  return Object.assign(getter, { setLocale, setDefaultLocale, getLocale, getDefaultLocale }) as any;
-}
+        return result;
+      }
+    });
+  };
+  return format;
+})();

package/src/packages/i18n/index.ts

@@ -1,4 +1,5 @@
-import {createI18n} from "./i18n.utils";
-import {ZhCnLocale} from "./lang/zh-cn";
+import {i18n} from './i18n.utils';
 
-export const i18n = createI18n(ZhCnLocale);
+export default i18n;
+
+export {i18n};

package/src/packages/i18n/lang/en-us.ts

@@ -190,10 +190,11 @@ export const EnUsLocale: tZhCnLocale = {
     alignLeft: 'left',
     alignCenter: 'center',
     alignRight: 'right',
-    exportCurrentPageData: 'export current page data',
-    exportDataInTable: 'export data showed in table',
+    exportCurrentPageData: 'Export current page data',
+    exportDataInTable: 'Export data showed in table',
+    exportCurrentAllData: 'Export current all data',
     exportAllDataWithFilterSortMaybeFailedWithLargeData: 'export all data by sort and filter condition(maybe failed with latge data)',
-    selectDataToExport: 'select data to export',
+    selectDataToExport: 'Select data to export',
     customSelectDataToExport: 'custom select data to export',
     selectExportType: 'select export type',
     selectExportFields: 'select export fields',

package/src/packages/i18n/lang/zh-cn.ts

@@ -190,6 +190,7 @@ export const ZhCnLocale = {
     alignRight: '右对齐',
     exportCurrentPageData: '导出当前页数据',
     exportDataInTable: '导出表格当前显示的数据',
+    exportCurrentAllData: '导出当前所有数据',
     exportAllDataWithFilterSortMaybeFailedWithLargeData: '根据当前的筛选排序条件导出所有数据(数据量比较大的话可能会导出失败)',
     selectDataToExport: '选择需要导出的数据',
     customSelectDataToExport: '自定义选择导出需要的数据',