@maketribe/ms-app 3.0.4 → 3.0.6

package/src/core/Router.ts

@@ -0,0 +1,129 @@
+import { Disposable, Event, createDisposable } from "@maketribe/utils";
+import { Route } from "../dataview";
+import type { UserSession } from "./UserSession";
+
+const NORMALIZE_ROUTE_NAME_REG = /^([^\\]+)\/(.+)$/;
+
+export class Router extends Disposable {
+  userSession: UserSession;
+
+  routes: Route[] = [];
+
+  currentRoute: any | null = null;
+
+  beforeRouteChange: Event<{ routeInfo: Route; route: any }> = this.register(
+    new Event()
+  );
+
+  routeChange: Event<{ routeInfo: Route; route: any }> = this.register(
+    new Event()
+  );
+
+  constructor(userSession: UserSession) {
+    super();
+
+    this.userSession = userSession;
+  }
+
+  setRoutes(routes: Route[]) {
+    this.routes = routes;
+  }
+
+  init() {
+    const vueRouter = this.userSession.vueRouter;
+    const vueRoutes = vueRouter.getRoutes();
+
+    // 给有权限访问的页面,注册默认页面
+    const defaultPageRoutes = this.routes.filter(
+      (route) => !vueRoutes.find((item) => item.name === route.name)
+    );
+
+    for (const defaultPageRoute of defaultPageRoutes) {
+      const match = defaultPageRoute.name.match(NORMALIZE_ROUTE_NAME_REG);
+
+      if (match) {
+        const name = match[1];
+        const action = match[2];
+
+        switch (action) {
+          case "list":
+            vueRouter.addRoute("mk-ms-main", {
+              name: defaultPageRoute.name,
+              path: `/dv/${name}`,
+              component: () => import("../page/index/dv/default/index.vue"),
+              meta: { name },
+            });
+            break;
+          case "edit":
+            vueRouter.addRoute("mk-ms-main", {
+              name: defaultPageRoute.name,
+              path: `/dv/${name}/:id`,
+              component: () => import("../page/index/dv/default/edit.vue"),
+              meta: { name },
+            });
+            break;
+          case "add":
+            vueRouter.addRoute("mk-ms-main", {
+              name: defaultPageRoute.name,
+              path: `/dv/${name}/add`,
+              component: () => import("../page/index/dv/default/add.vue"),
+              meta: { name },
+            });
+            break;
+          case "tree":
+            vueRouter.addRoute("mk-ms-main", {
+              name: defaultPageRoute.name,
+              path: `/dv/${name}`,
+              component: () => import("../page/index/dv/default/tree.vue"),
+              meta: { name },
+            });
+            break;
+        }
+      }
+    }
+
+    this.register(
+      createDisposable(() => {
+        for (const defaultPageRoute of defaultPageRoutes) {
+          vueRouter.removeRoute(defaultPageRoute.name);
+        }
+      })
+    );
+  }
+
+  getRouteByName(name: string): Route | null {
+    return this.routes.find((route) => route.name === name) ?? null;
+  }
+
+  getRouteByID(id: string): Route | null {
+    return this.routes.find((route) => route.id === id) ?? null;
+  }
+
+  getRoutesByMenuID(menuId: Route["menuId"]): Route[] {
+    return this.routes.filter((route) => route.menuId === menuId);
+  }
+
+  async changeRoute(route: any) {
+    if (!route) {
+      return true;
+    }
+
+    const routeInfo = this.getRouteByName(route.name);
+
+    if (!routeInfo) {
+      return true;
+    }
+
+    if (
+      (await this.beforeRouteChange.emitAsync({ route, routeInfo })) !== false
+    ) {
+      this.currentRoute = route;
+
+      this.routeChange.emit({ route, routeInfo });
+
+      return true;
+    }
+
+    return false;
+  }
+}

package/src/core/UserInfo.ts

@@ -0,0 +1,66 @@
+import type { MSAppClient } from "./MSAppClient";
+import { PermissionPoint } from "./PermissionPointManager";
+import { Role } from "../dataview/role/RoleForm";
+
+export interface MemberInfo {
+  id: number;
+  account: string;
+  email: string;
+  nickName: string;
+  avatarPath: string;
+  isSuper: string;
+  errorCount: string;
+  errorDatetime: string;
+  isLock: string;
+  unlockDatetime: string;
+}
+
+export class UserInfo {
+  id: number;
+  account: string;
+  email: string;
+  nickName: string;
+  avatar: URL | null;
+  isLocked: boolean;
+  isSuper: boolean;
+  payload: any;
+
+  roles: Role[];
+  permissionPoints: PermissionPoint[];
+
+  constructor(
+    msAppClient: MSAppClient,
+    payload: MemberInfo,
+    roles: Role[],
+    permissionPoints: PermissionPoint[]
+  ) {
+    this.id = payload.id;
+    this.account = payload.account;
+    this.email = payload.email;
+    this.nickName = payload.nickName;
+    this.isLocked = payload.isLock === "1";
+    this.isSuper = payload.isSuper === "1";
+    this.roles = roles;
+    this.permissionPoints = permissionPoints;
+
+    try {
+      this.avatar = payload.avatarPath
+        ? new URL(payload.avatarPath, msAppClient.origin)
+        : null;
+    } catch (e) {
+      this.avatar = null;
+    }
+
+    this.payload = payload;
+  }
+
+  hasRole(name: Role["name"]): boolean {
+    return !!this.roles.find((role) => role.name === name);
+  }
+
+  hasPermissionPoint(key: PermissionPoint["key"]) {
+    return !!this.permissionPoints.find(
+      (permissionPoint) => permissionPoint.key === key
+    );
+  }
+}

package/src/core/UserSession.ts

@@ -0,0 +1,233 @@
+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();
+
+      this.router.routeChange.on(({ route, routeInfo }) => {
+        const menuNode = this.menu.findMenuNodeByID(routeInfo.menuId);
+
+        this.menu.setCurrentMenuNode(menuNode);
+
+        const tab =
+          this.tabs.findTabByID(routeInfo.name) ??
+          this.tabs.createTab({
+            id: routeInfo.name,
+            title: routeInfo.title,
+            affix: route.matched?.[route.matched?.length - 1]?.meta?.affix,
+            realRoute: route,
+            route: routeInfo,
+          });
+
+        this.tabs.switchTab(tab);
+      });
+
+      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/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,109 @@
+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: "MKFormImageList",
+      title: "图片列表",
+      component: defineAsyncComponent(
+        () => import("../../components/form-components/form-image-list")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKFormImageSelect",
+      title: "图片选择",
+      component: defineAsyncComponent(
+        () => import("../../components/form-components/form-image-list")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKFormRichTextEditor",
+      title: "富文本",
+      component: defineAsyncComponent(
+        () => import("../../components/form-components/form-rich-text-editor")
+      ),
+    });
+  }
+}

package/src/core/component/DataTableComponents.ts

@@ -0,0 +1,51 @@
+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")
+      ),
+    });
+  }
+}

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";