@oinone/kunlun-meta 6.2.0

package/src/metadata/types/tag.ts

@@ -0,0 +1,24 @@
+enum ElementType {
+  MASK = 'MASK',
+  BLOCK = 'BLOCK',
+  HEADER = 'HEADER',
+  CONTAINER = 'CONTAINER',
+  SIDEBAR = 'SIDEBAR',
+  CONTENT = 'CONTENT',
+  VIEW = 'VIEW',
+  FIELD = 'FIELD',
+  GROUP = 'GROUP',
+  GRID = 'GRID',
+  ACTION = 'ACTION',
+  API = 'API',
+  CONTEXT = 'CONTEXT',
+  REQUEST = 'REQUEST',
+  RESPONSE = 'RESPONSE',
+  CLEAR = 'CLEAR',
+  FILTER = 'FILTER',
+  WIDGET = 'WIDGET',
+  PROP = 'PROP',
+  VALIDATION = 'VALIDATION'
+}
+
+export { ElementType };

package/src/metadata/types/user.ts

@@ -0,0 +1,27 @@
+export enum UserBehaviorEventEnum {
+  SIGN_UP_PHONE = 'SIGN_UP_PHONE', // 手机号注册
+  SIGN_UP_EMAIL = 'SIGN_UP_EMAIL', // 邮箱注册
+
+  PHONE_MODIFY_PASSWORD_BY_PHONE_SUBMIT = 'MODIFY_PASSWORD_BY_PHONE', // "手机验证修改密码"
+  PHONE_MODIFY_PASSWORD_BY_PHONE_SEND_CODE = 'MODIFY_PASSWORD_BYPHONE_SEND_CODE', // "发送修改手机密码验证码"
+  EMAIL_MODIFY_PASSWORD_BY_EMAIL_SUBMIT = 'MODIFY_PASSWORD_BY_EMAIL', // "邮箱验证修改密码"
+  EMAIL_MODIFY_PASSWORD_BY_EMAIL_SEND_CODE = 'MODIFY_PASSWORD_SEND_RESET_EMAIL', // "发送重置密码邮件"
+
+  PHONE_MODIFY_PHONE_SUBMIT = 'MODIFY_PHONE', // "修改手机号"
+  PHONE_MODIFY_PHONE_OLD_PHONE_CODE = 'MODIFY_PHONE_OLD_PHONE_CODE', // "发送修改手机号-原手机验证码"
+  EMAIL_MODIFY_PHONE_SEND_EMAIL_CODE = 'MODIFY_PHONE_SEND_EMAIL', // "发送修改手机号-邮箱验证码"
+  PHONE_MODIFY_PHONE_NEW_PHONE_CODE = 'MODIFY_PHONE_NEW_PHONE_CODE', // "发送修改手机号-新手机验证码"
+
+  EMAIL_MODIFY_EMAIL_SUBMIT = 'MODIFY_EMAIL', // "修改邮箱", "修改邮箱"),
+  EMAIL_MODIFY_EMAIL_SEND_OLD_EMAIL = 'MODIFY_EMAIL_SEND_OLD_EMAIL', // "修改邮箱-发送原邮箱确认邮件"
+  PHONE_MODIFY_EMAIL_SEND_PHONE_CODE = 'MODIFY_EMAIL_SEND_PHONE_CODE', // "修改邮箱-手机验证码"
+  EMAIL_MODIFY_EMAIL_SEND_NEW_EMAIL = 'MODIFY_EMAIL_SEND_NEW_EMAIL', // "修改邮箱-发送新邮箱确认邮件"
+
+  PHONE_ADD_CORP_SEND_PHONE_CODE = 'ADD_CORP_SEND_PHONE_CODE', // "加入团队手机验证码"
+  EMAIL_ADD_CORP_SEND_EMAIL_CODE = 'ADD_CORP_SEND_EMAIL_CODE', // "加入团队邮件验证码"
+
+  PHONE_LOGIN_BY_PHONE_CODE = 'LOGIN_BY_PHONE_CODE', // 手机验证码登录
+  PHONE_SEND_LOGIN_BY_PHONE_CODE = 'SEND_LOGIN_BY_PHONE_CODE', // 发送手机验证码
+  EMAIL_LOGIN_BY_EMAIL_CODE = 'LOGIN_BY_EMAIL_CODE', // 邮箱验证码登录
+  EMAIL_SEND_LOGIN_BY_EMAIL_CODE = 'SEND_LOGIN_BY_EMAIL_CODE' // 发送邮箱验证码
+}

package/src/metadata/types/value.ts

@@ -0,0 +1,3 @@
+export type EntityId = string;
+export type BIGINT = number | string;
+export type Entity = Record<string, unknown>;

package/src/metadata/types/view.ts

@@ -0,0 +1,194 @@
+import { BIGINT, EntityId } from './value';
+
+export type ViewId = EntityId;
+
+// 视图分类，按照数据源形态区分
+export enum DataClass {
+  List = 'LIST', // 数据源为 ListValue
+  Object = 'OBJECT' // 数据源为 ObjectValue
+}
+
+/**
+ * 视图客户端类型
+ */
+export enum ViewClientType {
+  /**
+   * PC端
+   */
+  PC = 'PC',
+  /**
+   * 移动端
+   */
+  MOBILE = 'MOBILE'
+}
+
+/**
+ * <h3>视图类型</h3>
+ * <p>
+ * 视图类型是描述数据类型、数据传递、数据交互的基本属性
+ * </p>
+ */
+export enum ViewType {
+  /**
+   * 表格
+   */
+  Table = 'TABLE',
+  /**
+   * 表单
+   */
+  Form = 'FORM',
+  /**
+   * 详情
+   */
+  Detail = 'DETAIL',
+  /**
+   * 搜索
+   */
+  Search = 'SEARCH',
+  /**
+   * 画廊
+   */
+  Gallery = 'GALLERY',
+  /**
+   * 树
+   */
+  Tree = 'TREE',
+
+  /**
+   * 多视图
+   */
+  Multiple = 'MULTIPLE',
+
+  /**
+   * 自定义
+   */
+  Custom = 'CUSTOM'
+}
+
+/**
+ * <h3>视图模式</h3>
+ * <p>
+ * 视图模式是视图类型更具备操作性的定义，相同的视图类型会有不同模式进行描述。
+ * <p>例如:</p>
+ * <ul>
+ *   <li>【表单】视图类型可能会存在【创建】和【编辑】两种不同的模式</li>
+ *   <li>【表单】视图类型可能会在某些情况下手动修改为【只读】状态</li>
+ * </ul>
+ * </p>
+ */
+export enum ViewMode {
+  /**
+   * 创建
+   */
+  Create = 'CREATE',
+  /**
+   * 编辑
+   */
+  Editor = 'EDITOR',
+  /**
+   * 查看
+   */
+  Lookup = 'LOOKUP'
+}
+
+/**
+ * 跳转动作路由类型
+ */
+export enum ViewActionTarget {
+  /**
+   * 页面路由
+   */
+  Router = 'ROUTER',
+  /**
+   * 页面弹窗
+   */
+  Dialog = 'DIALOG',
+  /**
+   * 页面抽屉
+   */
+  Drawer = 'DRAWER',
+  /**
+   * 页内路由
+   */
+  Inner = 'INNER',
+  /**
+   * 打开新窗口
+   */
+  OpenWindow = 'OPEN_WINDOW',
+  /**
+   * 页面嵌入
+   */
+  Frame = 'iframe'
+}
+
+export enum SystemSource {
+  SYSTEM = 'SYSTEM', // 内核
+  BASE = 'BASE', // 系统原生
+  MANUAL = 'MANUAL', // 手工新增
+  UI = 'UI', // 界面新增
+  RELATION = 'RELATION', // 关联关系生成
+  ABSTRACT_INHERITED = 'ABSTRACT_INHERITED', // 抽象继承
+  TRANSIENT_INHERITED = 'TRANSIENT_INHERITED', // 临时继承
+  EXTEND_INHERITED = 'EXTEND_INHERITED', // 同表继承
+  MULTI_TABLE_INHERITED = 'MULTI_TABLE_INHERITED', // 多表继承
+  PROXY_INHERITED = 'PROXY_INHERITED' // 代理继承
+}
+
+export interface IView {
+  id: ViewId;
+  name: string;
+  type: ViewType;
+  model: string;
+  priority: BIGINT; // 优先级
+  template: string; // 自定义的模板
+  active?: any; // 激活状态，暂时不使用
+  title?: string;
+  systemSource?: SystemSource; // 系统来源
+  // 仅前端用，浏览器的title那里需要
+  moduleDisplayName?: SystemSource;
+
+  extension?: Record<string, string>;
+
+  modelDefinition?: {
+    model?: string;
+    name?: string;
+    moduleName?: string;
+    module?: string;
+  };
+
+  baseLayoutName?: string;
+  baseLayoutDefinition?: {
+    name: string;
+    template: string;
+  };
+}
+
+/**
+ * 组件的标签内的 <config /> 配置
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface IBaseWidgetConfig {}
+
+/**
+ * 视图组件基础配置
+ */
+export interface IViewWidgetConfig extends IBaseWidgetConfig {
+  // 数据的提交方式：all 全量一次性提交 非all的为先提交关联数据再提交主数据
+  submit?: string;
+  // 排除的动作，英文逗号分隔多个值
+  excludedActions?: string;
+  // 校验提示
+  validateTip?: boolean;
+}
+
+/**
+ * select组件配置
+ */
+export interface IBaseSelectWidgetConfig extends IBaseWidgetConfig {
+  // 搜索的时候匹配的字段，多个值用逗号分隔
+  searchField?: string;
+  // 展示选用的字段，多个值用逗号分隔
+  labelField?: string;
+  // 默认值 '-'，labelField多值间的分隔符，后端目前配置的是 name-separator，需要替换掉
+  separator?: string;
+}

package/src/plugin-loader/factory/PluginLoaderFactory.ts

@@ -0,0 +1,23 @@
+import { CJSPluginLoader } from '../loader/CJSPluginLoader';
+import { CSSPluginLoader } from '../loader/CSSPluginLoader';
+import { ESMPluginLoader } from '../loader/ESMPluginLoader';
+import { IIFEPluginLoader } from '../loader/IIFEPluginLoader';
+import { UMDPluginLoader } from '../loader/UMDPluginLoader';
+import { PluginLoader, PluginLoadType } from '../typing';
+
+export class PluginLoaderFactory {
+  public static get(type: PluginLoadType): PluginLoader | undefined {
+    switch (type) {
+      case 'esm':
+        return ESMPluginLoader.INSTANCE;
+      case 'cjs':
+        return CJSPluginLoader.INSTANCE;
+      case 'umd':
+        return UMDPluginLoader.INSTANCE;
+      case 'iife':
+        return IIFEPluginLoader.INSTANCE;
+      case 'css':
+        return CSSPluginLoader.INSTANCE;
+    }
+  }
+}

package/src/plugin-loader/factory/index.ts

@@ -0,0 +1 @@
+export * from './PluginLoaderFactory';

package/src/plugin-loader/index.ts

@@ -0,0 +1,33 @@
+import { RemotePluginLoader } from './loader/RemotePluginLoader';
+import { PluginLoadDependencies, PluginsLoaderConfig } from './typing';
+import { PluginLoadHelper } from './util';
+
+export class PluginsLoader {
+  public static async load(config: PluginsLoaderConfig, localDependencies?: PluginLoadDependencies): Promise<void> {
+    const { dependencies: dynamicDependencies, mounted, usingRemote } = config;
+    if (localDependencies) {
+      await PluginLoadHelper.loadDependencies(localDependencies);
+    }
+    if (dynamicDependencies) {
+      await PluginLoadHelper.loadDependencies(dynamicDependencies);
+    }
+    if (mounted) {
+      if (Array.isArray(mounted)) {
+        await PluginLoadHelper.loadJavascript(mounted);
+      } else {
+        const { js, css } = mounted;
+        if (js) {
+          await PluginLoadHelper.loadJavascript(js);
+        }
+        if (css) {
+          await PluginLoadHelper.loadCSS(css);
+        }
+      }
+    }
+    if (usingRemote) {
+      await RemotePluginLoader.INSTANCE.load();
+    }
+  }
+}
+
+export * from './typing';

package/src/plugin-loader/loader/CJSPluginLoader.ts

@@ -0,0 +1,18 @@
+import { PluginLoader, PluginLoadOption } from '../typing';
+import { ESMPluginLoader } from './ESMPluginLoader';
+
+export class CJSPluginLoader implements PluginLoader {
+  public static readonly INSTANCE = new CJSPluginLoader();
+
+  private constructor() {
+    // reject create object
+  }
+
+  public load(option: PluginLoadOption) {
+    return ESMPluginLoader.INSTANCE.load(option);
+  }
+
+  public loadDependencies(dependencies: Record<string, unknown>) {
+    return ESMPluginLoader.INSTANCE.loadDependencies(dependencies);
+  }
+}

package/src/plugin-loader/loader/CSSPluginLoader.ts

@@ -0,0 +1,29 @@
+import { PluginLoader, PluginLoadOption } from '../typing';
+import { bindLinkLoadedEvent } from './LoadedEvent';
+
+export class CSSPluginLoader implements PluginLoader {
+  public static readonly INSTANCE = new CSSPluginLoader();
+
+  private constructor() {
+    // reject create object
+  }
+
+  public async load(option: PluginLoadOption): Promise<void> {
+    const { id, path } = option;
+    const element = document.getElementById(id);
+    if (element) {
+      return;
+    }
+    return new Promise<void>((resolve) => {
+      const link = document.createElement('link');
+      link.id = id;
+      link.href = path;
+      link.rel = 'stylesheet';
+      link.type = 'text/css';
+      bindLinkLoadedEvent(link, resolve);
+      document.body.append(link);
+    });
+  }
+
+  public async loadDependencies(): Promise<void> {}
+}

package/src/plugin-loader/loader/ESMPluginLoader.ts

@@ -0,0 +1,53 @@
+import { PluginLoader, PluginLoadOption } from '../typing';
+import { bindScriptLoadedEvent } from './LoadedEvent';
+
+let counter = 0;
+
+export class ESMPluginLoader implements PluginLoader {
+  public static readonly INSTANCE = new ESMPluginLoader();
+
+  private constructor() {
+    // reject create object
+  }
+
+  public async load(option: PluginLoadOption): Promise<void> {
+    const { id, path, dependencies } = option;
+    const element = document.getElementById(id);
+    if (element) {
+      return;
+    }
+    if (dependencies) {
+      await this.loadDependencies(dependencies);
+    }
+    return new Promise<void>((resolve) => {
+      const script = document.createElement('script');
+      script.id = id;
+      script.src = path;
+      script.type = 'module';
+      bindScriptLoadedEvent(script, resolve);
+      document.body.append(script);
+    });
+  }
+
+  public async loadDependencies(dependencies: Record<string, unknown>): Promise<void> {
+    const importMap: Record<string, string> = {};
+    Object.entries(dependencies).forEach(([key, value]) => {
+      if (typeof value === 'string') {
+        importMap[key] = value;
+      }
+    });
+    if (!Object.keys(importMap).length) {
+      return;
+    }
+    return new Promise((resolve) => {
+      const importMapScript = document.createElement('script');
+      importMapScript.id = `import-map-${counter++}`;
+      importMapScript.type = 'importmap';
+      importMapScript.text = JSON.stringify({
+        imports: importMap
+      });
+      bindScriptLoadedEvent(importMapScript, resolve);
+      document.body.append(importMapScript);
+    });
+  }
+}

package/src/plugin-loader/loader/IIFEPluginLoader.ts

@@ -0,0 +1,18 @@
+import { PluginLoader, PluginLoadOption } from '../typing';
+import { UMDPluginLoader } from './UMDPluginLoader';
+
+export class IIFEPluginLoader implements PluginLoader {
+  public static readonly INSTANCE = new IIFEPluginLoader();
+
+  private constructor() {
+    // reject create object
+  }
+
+  public load(option: PluginLoadOption) {
+    return UMDPluginLoader.INSTANCE.load(option);
+  }
+
+  public loadDependencies(dependencies: Record<string, unknown>) {
+    return UMDPluginLoader.INSTANCE.loadDependencies(dependencies);
+  }
+}

package/src/plugin-loader/loader/LoadedEvent.ts

@@ -0,0 +1,24 @@
+type ResolveFunction = () => void;
+
+export function bindScriptLoadedEvent(script: HTMLScriptElement, resolve: ResolveFunction): void {
+  script.onload = onLoaded(script.src, resolve);
+  script.onerror = onErrorLoaded(script.src, resolve);
+}
+
+export function bindLinkLoadedEvent(link: HTMLLinkElement, resolve: ResolveFunction): void {
+  link.onload = onLoaded(link.href, resolve);
+  link.onerror = onErrorLoaded(link.href, resolve);
+}
+
+function onLoaded(src: string, resolve: ResolveFunction) {
+  return () => {
+    resolve();
+  };
+}
+
+function onErrorLoaded(src: string, resolve: ResolveFunction) {
+  return () => {
+    resolve();
+    console.error(`load error. ${src}`);
+  };
+}

package/src/plugin-loader/loader/PluginLoader.ts

@@ -0,0 +1,12 @@
+import { PluginLoaderFactory } from '../factory';
+import { PluginLoadOption, PluginLoadType } from '../typing';
+
+export class PluginLoader {
+  public static async load(options: PluginLoadOption[]): Promise<void> {
+    await Promise.allSettled(options.map((option) => PluginLoaderFactory.get(option.type)?.load(option)));
+  }
+
+  public static async loadDependencies(type: PluginLoadType, dependencies: Record<string, unknown>): Promise<void> {
+    await PluginLoaderFactory.get(type)?.loadDependencies(dependencies);
+  }
+}

package/src/plugin-loader/loader/RemotePluginLoader.ts

@@ -0,0 +1,54 @@
+import { gql, HttpClient } from '@oinone/kunlun-request';
+import { SYSTEM_MODULE_NAME } from '../../metadata';
+import { RemoteLoadOption } from '../typing';
+import { PluginLoadHelper } from '../util';
+
+const http = HttpClient.getInstance();
+
+export class RemotePluginLoader {
+  public static readonly INSTANCE = new RemotePluginLoader();
+
+  private cache: RemoteLoadOption | null | undefined;
+
+  public async load(): Promise<void> {
+    let option = this.cache;
+    if (option === undefined) {
+      option = await fetchRemoteLoadOptions();
+      if (!option) {
+        option = null;
+      }
+      this.cache = option;
+    }
+    if (option) {
+      const { javascript: js, css } = option;
+      const promises: Promise<void>[] = [];
+      if (js) {
+        promises.push(PluginLoadHelper.loadJavascript(js));
+      }
+      if (css) {
+        promises.push(PluginLoadHelper.loadCSS(css));
+      }
+      await Promise.allSettled(promises);
+    }
+  }
+}
+
+async function fetchRemoteLoadOptions(): Promise<RemoteLoadOption | undefined> {
+  const queryGql = gql`
+    {
+      widgetDefinitionQuery {
+        loadSDK(data: {}) {
+          javascript
+          css
+        }
+      }
+    }
+  `;
+  try {
+    const result = await http.query<RemoteLoadOption>(SYSTEM_MODULE_NAME.BASE, queryGql);
+    return result.data.widgetDefinitionQuery.loadSDK;
+  } catch (e) {
+    console.error('remote plugin load error.', e);
+    return undefined;
+  }
+}

package/src/plugin-loader/loader/UMDPluginLoader.ts

@@ -0,0 +1,50 @@
+import { PluginLoader, PluginLoadOption } from '../typing';
+import { bindScriptLoadedEvent } from './LoadedEvent';
+
+export class UMDPluginLoader implements PluginLoader {
+  public static readonly INSTANCE = new UMDPluginLoader();
+
+  public async load(option: PluginLoadOption): Promise<void> {
+    const { id, path, dependencies } = option;
+    const element = document.getElementById(id);
+    if (element) {
+      return;
+    }
+    if (dependencies) {
+      await this.loadDependencies(dependencies);
+    }
+    return new Promise((resolve) => {
+      const script = document.createElement('script');
+      script.id = id;
+      script.src = path;
+      script.type = 'text/javascript';
+      bindScriptLoadedEvent(script, resolve);
+      document.body.append(script);
+    });
+  }
+
+  public async loadDependencies(dependencies: Record<string, unknown>): Promise<void> {
+    if (!dependencies) {
+      return;
+    }
+    const global = window as unknown as Record<string, unknown>;
+    await Promise.allSettled(
+      Object.entries(dependencies).map(async ([key, value]) => {
+        if (global[key] === undefined) {
+          let mountModule: unknown | null | undefined;
+          if (typeof value === 'string') {
+            mountModule = await import(value);
+          } else {
+            mountModule = await value;
+          }
+          if (!mountModule) {
+            mountModule = null;
+          }
+          if (global[key] === undefined) {
+            global[key] = mountModule;
+          }
+        }
+      })
+    );
+  }
+}

package/src/plugin-loader/loader/index.ts

@@ -0,0 +1 @@
+export * from './PluginLoader';

package/src/plugin-loader/typing/index.ts

@@ -0,0 +1,2 @@
+export * from './load-option';
+export * from './loader-config';

package/src/plugin-loader/typing/load-option.ts

@@ -0,0 +1,51 @@
+/**
+ * 插件加载类型
+ */
+export type PluginLoadType = 'esm' | 'cjs' | 'umd' | 'iife' | 'css';
+
+/**
+ * Javascript插件
+ * default type: umd
+ */
+export type JavascriptPlugin = string | { type: PluginLoadType; path: string };
+
+/**
+ * CSS插件
+ * type: css
+ */
+export type CSSPlugin = string;
+
+/**
+ * key: module
+ * value: global name or module
+ */
+type PluginLoadDependencies = Record<string, unknown>;
+
+export interface PluginLoadOption {
+  id: string;
+  type: PluginLoadType;
+  path: string;
+  dependencies?: PluginLoadDependencies;
+}
+
+export interface RemoteLoadOption {
+  javascript?: JavascriptPlugin[];
+  css?: CSSPlugin[];
+}
+
+/**
+ * 加载器
+ */
+export interface PluginLoader {
+  /**
+   * 通过加载可选项进行加载
+   * @param option
+   */
+  load(option: PluginLoadOption): Promise<void>;
+
+  /**
+   * 依赖加载
+   * @param dependencies 加载依赖
+   */
+  loadDependencies(dependencies: PluginLoadDependencies): Promise<void>;
+}

package/src/plugin-loader/typing/loader-config.ts

@@ -0,0 +1,38 @@
+import { CSSPlugin, JavascriptPlugin, PluginLoadType } from './load-option';
+
+/**
+ * 插件加载依赖
+ */
+export type PluginLoadDependency = {
+  /**
+   * 插件加载类型
+   */
+  type: PluginLoadType;
+  /**
+   * 依赖项
+   */
+  dependencies: Record<string, unknown>;
+};
+
+/**
+ * 插件加载依赖
+ */
+export type PluginLoadDependencies = Record<string, unknown> | PluginLoadDependency[];
+
+/**
+ * 插件加载配置
+ */
+export interface PluginsLoaderConfig {
+  /**
+   * 动态指定依赖（未实现）
+   */
+  dependencies?: PluginLoadDependencies;
+  /**
+   * 挂载指定外部js和css；数组默认使用js加载
+   */
+  mounted?: JavascriptPlugin[] | { js?: JavascriptPlugin[]; css?: CSSPlugin[] };
+  /**
+   * 使用低无一体组件；默认为false
+   */
+  usingRemote?: boolean;
+}