@maketribe/ms-app 3.0.29 → 3.0.31

package/src/core/UserSession.ts

@@ -0,0 +1,215 @@
+import { Disposable, Event, createDisposable, md5 } from "@maketribe/utils";
+import { MemberInfo, UserInfo } from "./UserInfo";
+import { Menu } from "./menu";
+import { Tabs } from "./tabs";
+import { Router } from "./Router";
+import {
+  PermissionPoint,
+  PermissionPointManager,
+} from "./PermissionPointManager";
+import type { MSAppClient, LoginResult } from "./MSAppClient";
+import { MenuResult, Role, Route } from "../dataview";
+import { R } from "@maketribe/request";
+import {
+  ACCESS_TOKEN_HEADER,
+  AUTHORIZATION,
+  AUTHORIZATION_PREFIX,
+  X_ACCESS_TOKEN_HEADER,
+  X_AUTHORIZATION,
+} from "../constants";
+
+export type UserSessionOptions = {
+  msAppClient: MSAppClient;
+  accessToken?: string;
+  xAccessToken?: string;
+};
+
+let uid = 0;
+
+export class UserSession extends Disposable {
+  id = uid++;
+
+  msAppClient: MSAppClient;
+
+  vueRouter: MSAppClient["vueRouter"];
+
+  userInfo: UserInfo | null;
+
+  menu: Menu;
+
+  tabs: Tabs;
+
+  router: Router;
+
+  permissionPointManager: PermissionPointManager;
+
+  accessToken: string;
+
+  xAccessToken: string;
+
+  beforeInitRouterEvent: Event = this.register(new Event());
+
+  locking: boolean = false;
+
+  lockingChangeEvent: Event<{ locking: boolean }> = this.register(new Event());
+
+  constructor(options: UserSessionOptions) {
+    super();
+
+    this.msAppClient = options.msAppClient;
+
+    this.vueRouter = this.msAppClient.vueRouter;
+
+    this.userInfo = null;
+
+    this.router = this.register(new Router(this));
+    this.tabs = this.register(new Tabs(this));
+    this.permissionPointManager = new PermissionPointManager();
+    this.menu = this.register(
+      new Menu(this.permissionPointManager, this.router)
+    );
+
+    this.accessToken =
+      options.accessToken ?? localStorage.getItem(ACCESS_TOKEN_HEADER) ?? "";
+    this.xAccessToken =
+      options.xAccessToken ?? localStorage.getItem(X_ACCESS_TOKEN_HEADER) ?? "";
+  }
+
+  async init() {
+    type BasicInfoResult = {
+      member: MemberInfo;
+      menus: MenuResult[];
+      routes: Route[];
+      roles: Role[];
+      permissionPoints: PermissionPoint[];
+    };
+
+    const msAppClient = this.msAppClient;
+
+    const httpRequest = msAppClient.httpRequest;
+
+    const beforeRequestInterceptorID = httpRequest
+      .getInterceptors()
+      .request.use((config) => {
+        if (this.accessToken) {
+          config.headers[
+            AUTHORIZATION
+          ] = `${AUTHORIZATION_PREFIX} ${this.accessToken}`;
+        }
+
+        if (this.xAccessToken) {
+          config.headers[
+            X_AUTHORIZATION
+          ] = `${AUTHORIZATION_PREFIX} ${this.xAccessToken}`;
+        }
+
+        return config;
+      });
+
+    const beforeResponseInterceptorID = httpRequest
+      .getInterceptors()
+      .response.use((config) => {
+        if (config.data.code === 401) {
+          this.accessToken = this.xAccessToken = "";
+        } else {
+          this.accessToken =
+            config.headers[ACCESS_TOKEN_HEADER] || this.accessToken;
+
+          this.xAccessToken =
+            config.headers[X_ACCESS_TOKEN_HEADER] || this.xAccessToken;
+        }
+
+        localStorage.setItem(ACCESS_TOKEN_HEADER, this.accessToken);
+
+        localStorage.setItem(X_ACCESS_TOKEN_HEADER, this.xAccessToken);
+
+        return config;
+      });
+
+    this.register(
+      createDisposable(() => {
+        httpRequest.getInterceptors().request.eject(beforeRequestInterceptorID);
+        httpRequest
+          .getInterceptors()
+          .request.eject(beforeResponseInterceptorID);
+      })
+    );
+
+    try {
+      let response = await httpRequest.request<R<BasicInfoResult>>({
+        url: "/api/ms-login/login-info",
+        method: "GET",
+      });
+
+      if (!response.data || response.data.code !== 200) {
+        return response;
+      }
+
+      const BasicInfoResult = response.data!;
+
+      const { member, routes, menus, permissionPoints, roles } =
+        BasicInfoResult.data!;
+
+      this.userInfo = new UserInfo(
+        msAppClient,
+        member,
+        roles,
+        permissionPoints
+      );
+
+      this.router.setRoutes(routes);
+      this.permissionPointManager.setPermissionPoints(permissionPoints);
+      this.menu.setMenus(menus);
+
+      this.tabs.init();
+
+      this.beforeInitRouterEvent.emit();
+      this.router.init();
+
+      return response;
+    } catch (e) {
+      httpRequest.getInterceptors().request.eject(beforeRequestInterceptorID);
+      httpRequest.getInterceptors().request.eject(beforeResponseInterceptorID);
+    }
+  }
+
+  lock() {
+    this.locking = true;
+
+    this.lockingChangeEvent.emit({ locking: this.locking });
+  }
+
+  async unlock(password: string, code: string) {
+    const response = await this.msAppClient.httpRequest.request<R<LoginResult>>(
+      {
+        url: "/api/ms-login/login",
+        method: "POST",
+        data: {
+          account: this.userInfo!.account,
+          password: md5(`mkbl#${password}`),
+          vCode: code,
+        },
+      }
+    );
+
+    if (response.data.code !== 200) {
+      return response;
+    }
+
+    this.accessToken = response.headers[ACCESS_TOKEN_HEADER];
+    this.xAccessToken = response.headers[X_ACCESS_TOKEN_HEADER];
+
+    this.locking = false;
+
+    this.lockingChangeEvent.emit({ locking: this.locking });
+
+    return response;
+  }
+
+  public dispose(): void {
+    localStorage.removeItem(ACCESS_TOKEN_HEADER);
+    localStorage.removeItem(X_ACCESS_TOKEN_HEADER);
+
+    super.dispose();
+  }
+}

package/src/core/component/ConfigComponents.ts

@@ -0,0 +1,32 @@
+import { defineAsyncComponent } from "vue";
+import { ElInput, ElInputNumber } from "element-plus";
+import { Components } from "@maketribe/dm";
+
+export class ConfigComponents extends Components {
+  constructor() {
+    super();
+
+    this.registerComponent({
+      name: "MKConfigInput",
+      title: "输入框",
+      component: ElInput,
+      defaultProps: {
+        type: "textarea",
+      },
+    });
+
+    this.registerComponent({
+      name: "MKConfigInputNumber",
+      title: "数值输入框",
+      component: ElInputNumber,
+    });
+
+    this.registerComponent({
+      name: "MKConfigJsonEditor",
+      title: "JSON",
+      component: defineAsyncComponent(
+        () => import("../../components/json-editor")
+      ),
+    });
+  }
+}

package/src/core/component/DataFilterComponents.ts

@@ -0,0 +1,40 @@
+import { defineAsyncComponent } from "vue";
+import { Components } from "@maketribe/dm";
+
+export class DataFilterComponents extends Components {
+  constructor() {
+    super();
+
+    this.registerComponent({
+      name: "MKConditionInput",
+      title: "输入框",
+      component: defineAsyncComponent(
+        () => import("../../components/condition-components/condition-input")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKConditionNumber",
+      title: "数值",
+      component: defineAsyncComponent(
+        () => import("../../components/condition-components/condition-number")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKConditionSelect",
+      title: "下拉框",
+      component: defineAsyncComponent(
+        () => import("../../components/condition-components/condition-select")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKConditionDate",
+      title: "日期",
+      component: defineAsyncComponent(
+        () => import("../../components/condition-components/condition-date")
+      ),
+    });
+  }
+}

package/src/core/component/DataFormComponents.ts

@@ -0,0 +1,93 @@
+import { defineAsyncComponent } from "vue";
+import { ElInput, ElInputNumber } from "element-plus";
+import { Components } from "@maketribe/dm";
+
+export class DataFormComponents extends Components {
+  constructor() {
+    super();
+
+    this.registerComponent({
+      name: "MKFormInput",
+      title: "输入框",
+      component: ElInput,
+    });
+
+    this.registerComponent({
+      name: "MKFormInputNumber",
+      title: "数值输入框",
+      component: ElInputNumber,
+    });
+
+    this.registerComponent({
+      name: "MKFormDatePicker",
+      title: "时间选择组件",
+      component: defineAsyncComponent(
+        () => import("../../components/form-components/form-date-picker")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKFormDataSelect",
+      title: "数据源下拉框",
+      component: defineAsyncComponent(
+        () => import("../../components/form-components/form-data-select")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKFormIconSelect",
+      title: "图标选择",
+      component: defineAsyncComponent(
+        () => import("../../components/form-components/form-icon-select")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKFormDataTableSelect",
+      title: "数据表选择",
+      component: defineAsyncComponent(
+        () => import("../../components/form-components/form-data-table-select")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKFormRadioBox",
+      title: "单选框",
+      component: defineAsyncComponent(
+        () => import("../../components/form-components/form-radio-box")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKFormDetail",
+      title: "明细",
+      component: defineAsyncComponent(
+        () => import("../../components/form-components/form-detail")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKFormImageUpload",
+      title: "图片上传",
+      component: defineAsyncComponent(
+        () => import("../../components/form-components/form-image-upload")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKFormDetailSelect",
+      title: "明细选择",
+      component: defineAsyncComponent(
+        () => import("../../components/form-components/form-detail-select")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKFormRichTextEditor",
+      title: "富文本",
+      component: defineAsyncComponent(
+        () => import("../../components/form-components/form-rich-text-editor")
+      ),
+    });
+  }
+}

package/src/core/component/DataTableComponents.ts

@@ -0,0 +1,91 @@
+import { defineAsyncComponent } from "vue";
+import { Components } from "@maketribe/dm";
+
+export class DataTableComponents extends Components {
+  constructor() {
+    super();
+
+    this.registerComponent({
+      name: "MKColumnAction",
+      title: "操作",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-action")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKColumnText",
+      title: "文本",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-text")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKColumnObjectMappingText",
+      title: "对象映射文本",
+      component: defineAsyncComponent(
+        () =>
+          import(
+            "../../components/column-components/column-object-mapping-text"
+          )
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKColumnImage",
+      title: "图片",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-image")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKColumnSelect",
+      title: "行选择",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-select")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKColumnJson",
+      title: "JSON",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-json")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKColumnDate",
+      title: "日期时间",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-date")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKColumnSwitch",
+      title: "开关",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-switch")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKColumnTag",
+      title: "标签",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-tag")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKColumnLink",
+      title: "链接",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-link")
+      ),
+    });
+  }
+}

package/src/core/component/MaterialComponents.ts

@@ -0,0 +1,32 @@
+import { defineAsyncComponent } from "vue";
+import { Components } from "@maketribe/dm";
+
+export class MaterialComponents extends Components {
+  constructor() {
+    super();
+
+    this.registerComponent({
+      name: "MKImageView",
+      title: "图片",
+      component: defineAsyncComponent(
+        () => import("../../components/image-view")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKFileView",
+      title: "文件",
+      component: defineAsyncComponent(
+        () => import("../../components/file-view")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKVideoView",
+      title: "视频",
+      component: defineAsyncComponent(
+        () => import("../../components/video-view")
+      ),
+    });
+  }
+}

package/src/core/component/index.ts

@@ -0,0 +1,5 @@
+export * from "./DataTableComponents";
+export * from "./DataFormComponents";
+export * from "./DataFilterComponents";
+export * from "./ConfigComponents";
+export * from "./MaterialComponents";

package/src/core/index.ts

@@ -0,0 +1,11 @@
+export * from "./component";
+export * from "./menu";
+export * from "./tabs";
+export * from "./resolver/ITypeResolver";
+export * from "./DataModelDefines";
+export * from "./MSAppClient";
+export * from "./PageManager";
+export * from "./PermissionPointManager";
+export * from "./Router";
+export * from "./UserInfo";
+export * from "./UserSession";

package/src/core/menu/Menu.ts

@@ -0,0 +1,143 @@
+import { Disposable, Event } from "@maketribe/utils";
+import { MenuResult } from "../../dataview";
+import { PermissionPointManager } from "../PermissionPointManager";
+import { Router } from "../Router";
+import { MenuNode } from "./MenuNode";
+
+export class Menu extends Disposable {
+  rootMenus: MenuNode[] = [];
+
+  _currentMenu: MenuNode | null = null;
+
+  isCollapsed: boolean = false;
+
+  isVisible: boolean = true;
+
+  permissionPointManager: PermissionPointManager;
+
+  router: Router;
+
+  currentMenuChangeEvent: Event<{ currentMenu: MenuNode | null }> =
+    this.register(new Event());
+
+  constructor(permissionPointManager: PermissionPointManager, router: Router) {
+    super();
+    this.permissionPointManager = permissionPointManager;
+    this.router = router;
+  }
+
+  setMenus(menus: MenuResult[]) {
+    const menuNodes = menus
+      .sort((menu1, menu2) => {
+        const sort1 = parseInt(menu1.sort) || 0;
+        const sort2 = parseInt(menu2.sort) || 0;
+
+        return sort2 - sort1;
+      })
+      .map((menuInfo) => {
+        const route = this.router.getRouteByID(menuInfo.routeId);
+
+        const permissionPoints =
+          this.permissionPointManager.getPermissionPointsByMenuID(menuInfo.id);
+
+        return new MenuNode({
+          id: menuInfo.id,
+          route,
+          type: menuInfo.type,
+          iconName: menuInfo.iconName || "",
+          title: menuInfo.title || "",
+          permissionPoints,
+          children: [],
+        });
+      });
+
+    const rootMenuNodes: MenuNode[] = [];
+
+    for (let i = 0, len = menuNodes.length; i < len; i++) {
+      const menuNodeInfo = menus[i];
+      const menuNode = menuNodes[i];
+
+      menuNode.iconName = menuNode.iconName || "default-menu";
+
+      if (!menuNodeInfo.pid) {
+        rootMenuNodes.push(menuNode);
+      }
+
+      for (const route of this.router.getRoutesByMenuID(menuNode.id)) {
+        route.iconName = route.iconName || menuNode.iconName;
+      }
+
+      for (let j = 0; j < len; j++) {
+        const menuNodeInfoInner = menus[j];
+        const menuNodeInner = menuNodes[j];
+
+        if (menuNodeInfoInner.pid === menuNodeInfo.id) {
+          menuNode.children.push(menuNodeInner);
+          menuNodeInner.parent = menuNode;
+        }
+      }
+    }
+
+    this.rootMenus = rootMenuNodes;
+  }
+
+  findMenuNodeByID(id: MenuNode["id"]): MenuNode | null {
+    if (!id) {
+      return null;
+    }
+
+    let list = this.rootMenus.slice();
+
+    for (let i = 0; i < list.length; i++) {
+      const node = list[i];
+
+      if (node.id === id) {
+        return node;
+      }
+
+      list = list.concat(node.children);
+    }
+
+    return null;
+  }
+
+  async setCurrentMenuNode(node: MenuNode | null) {
+    this._currentMenu = node;
+
+    this.currentMenuChangeEvent.emit({ currentMenu: node });
+
+    return true;
+  }
+
+  getCurrentMenuNode() {
+    return this._currentMenu;
+  }
+
+  getFirstLeafMenuNode(menus: MenuNode[] = this.rootMenus) {
+    function _getFirstLeafMenuNode(menus: MenuNode[]): MenuNode | null {
+      if (!menus.length) {
+        return null;
+      }
+
+      return _getFirstLeafMenuNode(menus[0].children) || menus[0];
+    }
+
+    return _getFirstLeafMenuNode(menus);
+  }
+
+  getMenuNodeByID(id: string): MenuNode | null {
+    let nodes = this.rootMenus.slice();
+
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+
+      if (node.id === id) {
+        return node;
+      }
+
+      nodes = nodes.concat(node.children);
+    }
+
+    return null;
+  }
+}