@maketribe/ms-app 3.0.30 → 3.0.31

package/src/core/MSAppClient.ts

@@ -0,0 +1,260 @@
+import {
+  createRouter,
+  createWebHashHistory,
+  Router as VueRouter,
+} from "vue-router";
+import {
+  DataViewRequest,
+  DVQueryable,
+  HttpRequest,
+  R,
+  WebHttpRequest,
+} from "@maketribe/request";
+import { IComponents, DataModel, Components } from "@maketribe/dm";
+import { I18n } from "@maketribe/locale";
+
+import { Event, md5 } from "@maketribe/utils";
+import { UserSession } from "./UserSession";
+import { authBeforeEach } from "../router-middleware";
+import { PageManager } from "./PageManager";
+import { ACCESS_TOKEN_HEADER, X_ACCESS_TOKEN_HEADER } from "../constants";
+
+export type LoginResult = {
+  account: string;
+  email: string;
+  nickName: string;
+  avatarPath: string;
+};
+
+export interface MSAppClientOptions {
+  pageManager?: PageManager;
+  projectName: string;
+  httpRequest?: HttpRequest;
+  origin: string;
+  appID: string;
+  logo?: string;
+  locale?: string;
+  vueRouter?: VueRouter;
+  dataTableComponents?: IComponents;
+  dataFormComponents?: IComponents;
+  dataFilterComponents?: IComponents;
+  whereFilterComponents?: IComponents;
+}
+
+export class MSAppClient {
+  static instance: MSAppClient | null = null;
+
+  origin: string = "";
+
+  private _options: Required<MSAppClientOptions>;
+
+  projectName: string;
+
+  logo: string;
+
+  appID: string;
+
+  userSession: UserSession | null = null;
+
+  httpRequest: HttpRequest;
+
+  ready: boolean = false;
+
+  initd: boolean = false;
+
+  pageManager: PageManager;
+
+  /**
+   * @deprecated
+   * @description 使用 MSAppClient.instance.userSession.userInfo
+   */
+  get userInfo() {
+    return this.userSession?.userInfo ?? null;
+  }
+
+  i18n: I18n;
+
+  dataTableComponents: IComponents;
+  dataFormComponents: IComponents;
+  dataFilterComponents: IComponents;
+  whereFilterComponents: IComponents;
+
+  vueRouter: VueRouter;
+
+  beforeInitUserSessionEvent: Event<{ userSession: UserSession }> = new Event();
+
+  userSessionChangeEvent: Event<{ userSession: UserSession | null }> =
+    new Event();
+
+  constructor(options: MSAppClientOptions) {
+    this._options = this._normalizeOptions(options);
+
+    this.appID = this._options.appID;
+
+    this.logo = this._options.logo;
+
+    this.projectName = options.projectName;
+
+    this.i18n = I18n.instance;
+    this.i18n.setCurrentLanguageName(this._options.locale);
+
+    this.dataTableComponents = this._options.dataTableComponents;
+    this.dataFormComponents = this._options.dataFormComponents;
+    this.dataFilterComponents = this._options.dataFilterComponents;
+    this.whereFilterComponents = this._options.whereFilterComponents;
+
+    this.vueRouter = this._options.vueRouter;
+
+    this.pageManager = this._options.pageManager;
+
+    HttpRequest.appID = this.appID;
+
+    this.httpRequest = this._options.httpRequest;
+
+    DataModel.setHttpRequest(this.httpRequest);
+    DVQueryable.setDefaultDataViewRequest(
+      new DataViewRequest({ httpRequest: this.httpRequest })
+    );
+  }
+
+  setUserSession(userSession: UserSession | null) {
+    if (this.userSession) {
+      this.userSession.dispose();
+    }
+
+    this.userSession = userSession;
+
+    this.userSessionChangeEvent.emit({ userSession });
+  }
+
+  private _normalizeOptions(
+    options: MSAppClientOptions
+  ): Required<MSAppClientOptions> {
+    return {
+      appID: options.appID,
+      projectName: options.projectName,
+      httpRequest: options.httpRequest ?? new WebHttpRequest(),
+      origin: options.origin,
+      logo: options.logo || "",
+      locale: options.locale || "zh-cn",
+      vueRouter:
+        options.vueRouter ??
+        createRouter({
+          history: createWebHashHistory(),
+          routes: [],
+        }),
+      pageManager: options.pageManager ?? new PageManager(),
+      dataTableComponents: options.dataTableComponents ?? new Components(),
+      dataFormComponents: options.dataFormComponents ?? new Components(),
+      dataFilterComponents: options.dataFilterComponents ?? new Components(),
+      whereFilterComponents: options.whereFilterComponents ?? new Components(),
+    };
+  }
+  getI18n() {
+    return this.i18n;
+  }
+
+  getOptions() {
+    return this._options;
+  }
+
+  async loadCurrentUserSession(options?: {
+    accessToken: string;
+    xAccessToken: string;
+  }) {
+    const userSession = (this.userSession = new UserSession({
+      msAppClient: this,
+      ...options,
+    }));
+    this.userSession = null;
+
+    this.beforeInitUserSessionEvent.emit({ userSession });
+    const userSessionInitResult = await userSession.init();
+
+    if (userSessionInitResult?.data.code !== 200) {
+      userSession.dispose();
+      return userSessionInitResult!;
+    }
+
+    this.setUserSession(userSession);
+  }
+
+  async init() {
+    if (this.initd) {
+      return;
+    }
+
+    this.vueRouter.beforeEach(async (to, from, next) => {
+      const route = await authBeforeEach(this, to, from);
+
+      if (route) {
+        next(route);
+        return;
+      }
+
+      next();
+    });
+
+    this.pageManager.init();
+    this.pageManager.setMSAppCLient(this);
+
+    this.httpRequest.getInterceptors().response.use((config) => {
+      if (config.data.code === 401) {
+        this.vueRouter.push({ name: "login" });
+        // if (this.userSession) {
+        //   this.userSession.lock();
+        // } else {
+        //   this.vueRouter.push({ name: "login" });
+        // }
+      }
+      return config;
+    });
+
+    this.initd = true;
+  }
+
+  async login(account: string, password: string, code: string) {
+    const response = await this.httpRequest.request<R<LoginResult>>({
+      url: "/api/ms-login/login",
+      method: "POST",
+      data: { account, password: md5(`mkbl#${password}`), vCode: code },
+    });
+
+    if (response.data.code === 200) {
+      await this.loadCurrentUserSession({
+        accessToken: response.headers[ACCESS_TOKEN_HEADER],
+        xAccessToken: response.headers[X_ACCESS_TOKEN_HEADER],
+      });
+    }
+
+    return response;
+  }
+
+  formatURL(url: string) {
+    return url;
+  }
+
+  async modifyPassword(account: string, code: string) {
+    type LoginResult = {
+      account: string;
+      email: string;
+      nickName: string;
+      avatarPath: string;
+    };
+
+    const response = await this.httpRequest.request<R<LoginResult>>({
+      url: "/api/ms-login/modify-password",
+      method: "POST",
+      data: { account, vCode: code },
+    });
+
+    return response;
+  }
+
+  async logout() {
+    this.userSession?.dispose();
+    this.setUserSession(null);
+
+    return this.httpRequest.get("/api/ms-login/logout");
+  }
+}

package/src/core/PageManager.ts

@@ -0,0 +1,169 @@
+import { RouteRecordRaw } from "vue-router";
+import type { MSAppClient } from "./MSAppClient";
+import { Disposable, Event, createDisposable } from "@maketribe/utils";
+
+export class PageManager {
+  normalPages: RouteRecordRaw[] = [];
+
+  extendsPages: RouteRecordRaw[] = [];
+
+  msAppClient: MSAppClient | null = null;
+
+  msAppClientChangeEvent: Event<{ msAppClient: MSAppClient | null }> =
+    new Event();
+
+  msAppClientDisposable: Disposable | null = null;
+
+  setMSAppCLient(msAppClient: MSAppClient | null) {
+    this.msAppClientDisposable?.dispose();
+
+    this.msAppClientDisposable = new Disposable();
+
+    this.msAppClient = msAppClient;
+
+    this.msAppClientChangeEvent.emit({ msAppClient });
+  }
+
+  addNormalPage(normalPage: RouteRecordRaw) {
+    this.normalPages.push(normalPage);
+  }
+
+  addExtendsPage(extendsPage: RouteRecordRaw) {
+    this.extendsPages.push(extendsPage);
+  }
+
+  init() {
+    this.addNormalPage({
+      name: "mk-ms-layout",
+      path: "/",
+      component: () => import("../page/index.vue"),
+    });
+
+    this.addNormalPage({
+      name: "login",
+      path: "/login",
+      meta: {
+        isAuthorization: false,
+      },
+      component: () => import("../page/login/index.vue"),
+    });
+
+    this.addNormalPage({
+      name: "signup",
+      path: "/signup",
+      meta: {
+        isAuthorization: false,
+      },
+      component: () => import("../page/signup/index.vue"),
+    });
+
+    this.addExtendsPage({
+      name: "dv/ms-material/list",
+      path: "/material-list",
+      component: () => import("../page/index/material/index.vue"),
+      meta: { name: "ms-material" },
+    });
+
+    this.addExtendsPage({
+      name: "dv/ms-member/single/list/normal",
+      path: "/dv/ms-member",
+      component: () => import("../page/index/dv/ms-member/index.vue"),
+      meta: { name: "ms-member" },
+    });
+
+    this.addExtendsPage({
+      name: "dv/ms-role/single/list/dialog",
+      path: "/dv/ms-role",
+      component: () => import("../page/index/dv/ms-role/index.vue"),
+      meta: { name: "ms-role" },
+    });
+
+    this.addExtendsPage({
+      name: "dv/local-log/single/tree/dialog",
+      path: "/log/local",
+      component: () => import("../page/index/dv/local-log/index.vue"),
+      meta: { name: "local-log" },
+    });
+
+    this.msAppClientChangeEvent.on(({ msAppClient }) => {
+      if (!msAppClient) {
+        return;
+      }
+
+      const vueRouter = msAppClient.vueRouter;
+      const vueRoutes = vueRouter.getRoutes();
+
+      const addedNormalPageNames: string[] = [];
+
+      for (const normalPage of this.normalPages) {
+        const vueRoute = vueRoutes.find(
+          (vueRoute) => vueRoute.name === normalPage.name
+        );
+
+        if (!vueRoute) {
+          addedNormalPageNames.push(normalPage.name as string);
+          vueRouter.addRoute(normalPage);
+        }
+      }
+
+      this.msAppClientDisposable?.register(
+        createDisposable(() => {
+          for (const addedNormalPageName of addedNormalPageNames) {
+            vueRouter.removeRoute(addedNormalPageName);
+          }
+        })
+      );
+
+      this.msAppClientDisposable?.register(
+        msAppClient.beforeInitUserSessionEvent.on(({ userSession }) => {
+          if (!userSession) {
+            return;
+          }
+
+          userSession.beforeInitRouterEvent.on(() => {
+            const router = userSession.router;
+
+            const addedExtendsPageNames: string[] = [];
+
+            for (const extendsPage of this.extendsPages) {
+              const routeInfo = router.getRouteByName(
+                extendsPage.name as string
+              );
+
+              if (!routeInfo) {
+                continue;
+              }
+
+              const vueRoute = vueRoutes.find(
+                (vueRoute) => vueRoute.name === extendsPage.name
+              );
+
+              if (!vueRoute) {
+                extendsPage.path = routeInfo.route || extendsPage.path;
+                addedExtendsPageNames.push(extendsPage.name as string);
+                vueRouter.addRoute("mk-ms-layout", extendsPage);
+              }
+            }
+
+            if (!this.extendsPages.find((page) => page.name === "notFound")) {
+              this.addExtendsPage({
+                name: "notFound",
+                // path: ":pathMatch(.*)*",
+                path: "",
+                component: () => import("../page/index/404.vue"),
+              });
+            }
+
+            userSession.register(
+              createDisposable(() => {
+                for (const addedExtendsPageName of addedExtendsPageNames) {
+                  vueRouter.removeRoute(addedExtendsPageName);
+                }
+              })
+            );
+          });
+        })
+      );
+    });
+  }
+}

package/src/core/PermissionPointManager.ts

@@ -0,0 +1,26 @@
+export interface PermissionPoint {
+  id: number;
+  menuId: string;
+  key: string;
+  name: string;
+}
+
+export class PermissionPointManager {
+  permissionPoints: PermissionPoint[];
+
+  constructor() {
+    this.permissionPoints = [];
+  }
+
+  setPermissionPoints(permissionPoints: PermissionPoint[]) {
+    this.permissionPoints = permissionPoints;
+  }
+
+  init() {}
+
+  getPermissionPointsByMenuID(menuID: string): PermissionPoint[] {
+    return this.permissionPoints.filter(
+      (permissionPoint) => permissionPoint.menuId === menuID
+    );
+  }
+}

package/src/core/Router.ts

@@ -0,0 +1,150 @@
+import { Disposable, Event, createDisposable } from "@maketribe/utils";
+import { Route } from "../dataview";
+import type { UserSession } from "./UserSession";
+
+const NORMALIZE_ROUTE_NAME_REG = /^dv\/([^/]+)\/([^/]+)(\/.+)?$/;
+
+export class Router extends Disposable {
+  userSession: UserSession;
+
+  routes: Route[] = [];
+
+  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 "single":
+            const [listType, type] = match[3].slice(1).split("/");
+
+            switch (listType) {
+              case "list":
+                switch (type) {
+                  case "normal":
+                    vueRouter.addRoute("mk-ms-layout", {
+                      name: defaultPageRoute.name,
+                      path: defaultPageRoute.route || `/dv/${name}`,
+                      component: () =>
+                        import(
+                          "../page/index/dv/default/single/list/normal.vue"
+                        ),
+                      meta: { name },
+                    });
+                    break;
+                  case "dialog":
+                    vueRouter.addRoute("mk-ms-layout", {
+                      name: defaultPageRoute.name,
+                      path: defaultPageRoute.route || `/dv/${name}`,
+                      component: () =>
+                        import(
+                          "../page/index/dv/default/single/list/dialog.vue"
+                        ),
+                      meta: { name },
+                    });
+                    break;
+                }
+
+                break;
+              case "tree":
+                switch (type) {
+                  case "dialog":
+                    vueRouter.addRoute("mk-ms-layout", {
+                      name: defaultPageRoute.name,
+                      path: defaultPageRoute.route || `/dv/${name}`,
+                      component: () =>
+                        import(
+                          "../page/index/dv/default/single/tree/dialog.vue"
+                        ),
+                      meta: { name },
+                    });
+                    break;
+                }
+                break;
+              case "table-tree":
+                switch (type) {
+                  case "dialog":
+                    vueRouter.addRoute("mk-ms-layout", {
+                      name: defaultPageRoute.name,
+                      path: defaultPageRoute.route || `/dv/${name}`,
+                      component: () =>
+                        import(
+                          "../page/index/dv/default/single/table-tree/dialog.vue"
+                        ),
+                      meta: { name },
+                    });
+                    break;
+                }
+            }
+
+            break;
+          case "list":
+            vueRouter.addRoute("mk-ms-layout", {
+              name: defaultPageRoute.name,
+              path: defaultPageRoute.route || `/dv/${name}`,
+              component: () => import("../page/index/dv/default/table.vue"),
+              meta: { name },
+            });
+            break;
+          case "edit":
+            vueRouter.addRoute("mk-ms-layout", {
+              name: defaultPageRoute.name,
+              path: defaultPageRoute.route || `/dv/${name}/:id`,
+              component: () => import("../page/index/dv/default/edit.vue"),
+              meta: { name },
+            });
+            break;
+          case "add":
+            vueRouter.addRoute("mk-ms-layout", {
+              name: defaultPageRoute.name,
+              path: defaultPageRoute.route || `/dv/${name}/add`,
+              component: () => import("../page/index/dv/default/add.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);
+  }
+}

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: string;
+  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).toString()
+        : "";
+    } catch (e) {
+      this.avatar = "";
+    }
+
+    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
+    );
+  }
+}