plain-design 1.0.0-beta.147 → 1.0.0-beta.149

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

@@ -1,272 +1,272 @@
-import {anonymousEffects, createHooks, reactive} from "@peryl/react-compose";
-import {ZhCnLocale} from './lang/zh-cn';
-import {deepmerge} from "../components/PageThemeUtils/deepmerge";
-import {PlainObject} from "@peryl/utils/event";
-import {createCache} from "../utils/createCache";
-
-/**
- /**
- * 默认语言为中文
- * @author  韦胜健
- * @date    2023/10/12 15:14
- */
-const DEFAULT_LANG = 'zh-cn';
-
-/**
- * 根据中文解析出来允许访问的编码类型
- * @author  韦胜健
- * @date    2023/10/12 15:14
- */
-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;
-
-/**
- * 允许访问的编码类型
- * @author  韦胜健
- * @date    2023/10/12 15:14
- */
-type iStandardLangPath = iFormat<typeof ZhCnLocale>;
-
-export const i18n = (() => {
-
-  const state = reactive({
-    currentLang: DEFAULT_LANG,
-    langs: {
-      [DEFAULT_LANG]: ZhCnLocale,
-    } as any,
-    localeOptions: [
-      { label: '中文', key: DEFAULT_LANG, lang: ZhCnLocale }
-    ] as { label: string, key: string, lang: PlainObject }[]
-  });
-
-  const hooks = {
-    onChangeLang: createHooks<() => void>(anonymousEffects),
-    onUpdateLangs: createHooks<() => void>(anonymousEffects)
-  };
-
-  /**
-   * 使用指定的语言转化编码
-   * @author  韦胜健
-   * @date    2023/10/11 9:28
-   * @param   lang    指定的域名名字
-   * @param   path    要转换的编码
-   * @param   options 转换编码时的格式化参数
-   */
-  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 '';
-  };
-
-  /**
-   * 使用当前语言转换编码
-   * @author  韦胜健
-   * @date    2023/10/11 9:29
-   */
-  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    2023/10/12 15:12
-   */
-  const $intl = (path: string, options?: Record<string, any>) => {
-    return {
-      d: (desc: string): any => {
-        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    2023/10/11 9:29
-   */
-  const use = (lang: string, locale: any) => {
-    state.currentLang = lang;
-    if (!!locale) {state.langs[lang] = deepmerge(state.langs[lang], locale);}
-    hooks.onChangeLang.exec(undefined);
-  };
-  /**
-   * 切换至指定语言
-   * @author  韦胜健
-   * @date    2023/10/11 9:30
-   */
-  const switchTo = async (lang: string, loadMethod?: () => any) => {
-    let locale = !loadMethod ? undefined : await loadMethod();
-    use(lang, locale);
-  };
-  /**
-   * 获取当前使用的语言
-   * @author  韦胜健
-   * @date    2023/10/11 9:30
-   */
-  const getCurrentLanguage = () => {return state.currentLang;};
-  /**
-   * 设置语言
-   * @author  韦胜健
-   * @date    2023/10/11 9:30
-   */
-  const setLangs = (langs: any) => {
-
-    let result = {} as any;
-    Object.keys({ ...state.langs, ...langs }).forEach(localeName => {
-      result[localeName] = mergeLangs(
-        state.langs[localeName],
-        langs[localeName],
-        (lang1, lang2) => {
-          return mergeLangs(
-            lang1,
-            lang2,
-            (item1, item2) => {
-              return {
-                ...item1,
-                ...item2,
-              };
-            }
-          );
-        }
-      );
-    });
-
-    state.langs = result;
-
-    hooks.onUpdateLangs.exec(undefined);
-  };
-
-  const mergeLangs = (lang1: PlainObject | undefined, lang2: PlainObject | undefined, merge: (val1: PlainObject, val2: PlainObject) => PlainObject | undefined): PlainObject | undefined => {
-
-    if (!lang1 || !lang2) {
-      return lang1 || lang2;
-    }
-
-    if (typeof lang1 !== "object" || typeof lang2 !== "object") {
-      return lang2 != null ? lang2 : lang1;
-    }
-
-    const keys = new Set<string>();
-    Object.keys(lang1).forEach(key => {keys.add(key);});
-    Object.keys(lang2).forEach(key => {keys.add(key);});
-    const result = {} as PlainObject;
-    keys.forEach((key) => {
-      const val1 = lang1[key];
-      const val2 = lang2[key];
-      if (!!val1 && !!val2) {
-        if (typeof val1 === "object" && typeof val2 === "object") {
-          result[key] = merge(val1, val2);
-        } else {
-          result[key] = val2;
-        }
-      } else {
-        result[key] = val1 || val2;
-      }
-    });
-    return result;
-  };
-
-  const applyCache = () => {
-    const cache = createCache<string>('@@I18N_LANG');
-    if (cache.get()) {switchTo(cache.get()!);}
-    hooks.onChangeLang.use(() => {cache.set(state.currentLang);});
-  };
-
-  return {
-    $t,
-    $intl,
-    $it,
-    use,
-    switchTo,
-    getCurrentLanguage,
-    setLangs,
-    DEFAULT_LANG,
-    state,
-    hooks,
-    applyCache,
-  };
-})();
-
-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;
-    }
-    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 result;
-      }
-    });
-  };
-  return format;
-})();
+import {anonymousEffects, createHooks, reactive} from "@peryl/react-compose";
+import {ZhCnLocale} from './lang/zh-cn';
+import {deepmerge} from "../components/PageThemeUtils/deepmerge";
+import {PlainObject} from "@peryl/utils/event";
+import {createCache} from "../utils/createCache";
+
+/**
+ /**
+ * 默认语言为中文
+ * @author  韦胜健
+ * @date    2023/10/12 15:14
+ */
+const DEFAULT_LANG = 'zh-cn';
+
+/**
+ * 根据中文解析出来允许访问的编码类型
+ * @author  韦胜健
+ * @date    2023/10/12 15:14
+ */
+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;
+
+/**
+ * 允许访问的编码类型
+ * @author  韦胜健
+ * @date    2023/10/12 15:14
+ */
+type iStandardLangPath = iFormat<typeof ZhCnLocale>;
+
+export const i18n = (() => {
+
+  const state = reactive({
+    currentLang: DEFAULT_LANG,
+    langs: {
+      [DEFAULT_LANG]: ZhCnLocale,
+    } as any,
+    localeOptions: [
+      { label: '中文', key: DEFAULT_LANG, lang: ZhCnLocale }
+    ] as { label: string, key: string, lang: PlainObject }[]
+  });
+
+  const hooks = {
+    onChangeLang: createHooks<() => void>(anonymousEffects),
+    onUpdateLangs: createHooks<() => void>(anonymousEffects)
+  };
+
+  /**
+   * 使用指定的语言转化编码
+   * @author  韦胜健
+   * @date    2023/10/11 9:28
+   * @param   lang    指定的域名名字
+   * @param   path    要转换的编码
+   * @param   options 转换编码时的格式化参数
+   */
+  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 '';
+  };
+
+  /**
+   * 使用当前语言转换编码
+   * @author  韦胜健
+   * @date    2023/10/11 9:29
+   */
+  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    2023/10/12 15:12
+   */
+  const $intl = (path: string, options?: Record<string, any>) => {
+    return {
+      d: (desc: string): any => {
+        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    2023/10/11 9:29
+   */
+  const use = (lang: string, locale: any) => {
+    state.currentLang = lang;
+    if (!!locale) {state.langs[lang] = deepmerge(state.langs[lang], locale);}
+    hooks.onChangeLang.exec(undefined);
+  };
+  /**
+   * 切换至指定语言
+   * @author  韦胜健
+   * @date    2023/10/11 9:30
+   */
+  const switchTo = async (lang: string, loadMethod?: () => any) => {
+    let locale = !loadMethod ? undefined : await loadMethod();
+    use(lang, locale);
+  };
+  /**
+   * 获取当前使用的语言
+   * @author  韦胜健
+   * @date    2023/10/11 9:30
+   */
+  const getCurrentLanguage = () => {return state.currentLang;};
+  /**
+   * 设置语言
+   * @author  韦胜健
+   * @date    2023/10/11 9:30
+   */
+  const setLangs = (langs: any) => {
+
+    let result = {} as any;
+    Object.keys({ ...state.langs, ...langs }).forEach(localeName => {
+      result[localeName] = mergeLangs(
+        state.langs[localeName],
+        langs[localeName],
+        (lang1, lang2) => {
+          return mergeLangs(
+            lang1,
+            lang2,
+            (item1, item2) => {
+              return {
+                ...item1,
+                ...item2,
+              };
+            }
+          );
+        }
+      );
+    });
+
+    state.langs = result;
+
+    hooks.onUpdateLangs.exec(undefined);
+  };
+
+  const mergeLangs = (lang1: PlainObject | undefined, lang2: PlainObject | undefined, merge: (val1: PlainObject, val2: PlainObject) => PlainObject | undefined): PlainObject | undefined => {
+
+    if (!lang1 || !lang2) {
+      return lang1 || lang2;
+    }
+
+    if (typeof lang1 !== "object" || typeof lang2 !== "object") {
+      return lang2 != null ? lang2 : lang1;
+    }
+
+    const keys = new Set<string>();
+    Object.keys(lang1).forEach(key => {keys.add(key);});
+    Object.keys(lang2).forEach(key => {keys.add(key);});
+    const result = {} as PlainObject;
+    keys.forEach((key) => {
+      const val1 = lang1[key];
+      const val2 = lang2[key];
+      if (!!val1 && !!val2) {
+        if (typeof val1 === "object" && typeof val2 === "object") {
+          result[key] = merge(val1, val2);
+        } else {
+          result[key] = val2;
+        }
+      } else {
+        result[key] = val1 || val2;
+      }
+    });
+    return result;
+  };
+
+  const applyCache = () => {
+    const cache = createCache<string>('@@I18N_LANG');
+    if (cache.get()) {switchTo(cache.get()!);}
+    hooks.onChangeLang.use(() => {cache.set(state.currentLang);});
+  };
+
+  return {
+    $t,
+    $intl,
+    $it,
+    use,
+    switchTo,
+    getCurrentLanguage,
+    setLangs,
+    DEFAULT_LANG,
+    state,
+    hooks,
+    applyCache,
+  };
+})();
+
+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;
+    }
+    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 result;
+      }
+    });
+  };
+  return format;
+})();

package/src/packages/i18n/index.ts

@@ -1,5 +1,5 @@
-import {i18n} from './i18n.utils';
-
-export default i18n;
-
-export {i18n};
+import {i18n} from './i18n.utils';
+
+export default i18n;
+
+export {i18n};

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

@@ -329,6 +329,9 @@ export const EnUsLocale: tZhCnLocale = {
     notSupportDropper: 'Your browser does not support color pickers. It is recommended to use Google Chrome',
     exitDropperMode: 'Press the ESC key to close the color suction tube',
   },
+  iconPicker: {
+    placeholder: 'Please select or input icon name',
+  },
   ai: {
     placeholder: 'Please enter the content to be sent to the AI, such as: Who are you?',
     require: 'The content of the question cannot be empty',

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

@@ -327,6 +327,9 @@ export const ZhCnLocale = {
     notSupportDropper: '您的浏览器不支持颜色拾取器，推荐使用谷歌浏览器',
     exitDropperMode: '按 ESC 键关闭取色吸管',
   },
+  iconPicker: {
+    placeholder: '请选择或者输入图标',
+  },
   ai: {
     placeholder: '请输入要发送给ai的内容如：你是谁',
     require: '提问的内容不能为空',

package/src/packages/index.tsx

@@ -1,5 +1,5 @@
-import * as PLAIN from './entry';
-
-export * from './entry';
-
-export default PLAIN;
+import * as PLAIN from './entry';
+
+export * from './entry';
+
+export default PLAIN;

package/src/packages/styles/application/application.public.scss

@@ -1,15 +1,15 @@
-@import "./application.public.normalize";
-@import "./application.public.transition";
-
-.plain-disable-inner-transition {
-  * {
-    transition: none !important;
-  }
-}
-
-@include comp(theme-selector) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: plv(text-1);
-}
+@import "./application.public.normalize";
+@import "./application.public.transition";
+
+.plain-disable-inner-transition {
+  * {
+    transition: none !important;
+  }
+}
+
+@include comp(theme-selector) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: plv(text-1);
+}