@maketribe/ms-app 3.0.1 → 3.0.3

package/src/PageManager.ts

@@ -0,0 +1,145 @@
+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-main",
+      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: "ms-material/list",
+      path: "/material-list",
+      component: () => import("./page/index/material/index.vue"),
+    });
+
+    this.addExtendsPage({
+      name: "ms-member/list",
+      path: "/dv/ms-member",
+      component: () => import("./page/index/dv/ms-member/index.vue"),
+    });
+
+    this.addExtendsPage({
+      name: "ms-role/list",
+      path: "/dv/ms-role",
+      component: () => import("./page/index/dv/ms-role/index.vue"),
+    });
+
+    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;
+          }
+
+          const addedExtendsPageNames: string[] = [];
+
+          if (!this.extendsPages.find((page) => page.name === "notFound")) {
+            this.addExtendsPage({
+              name: "notFound",
+              path: "/:pathMatch(.*)*",
+              component: () => import("./page/index/404.vue"),
+            });
+          }
+
+          for (const extendsPage of this.extendsPages) {
+            const vueRoute = vueRoutes.find(
+              (vueRoute) => vueRoute.name === extendsPage.name
+            );
+
+            if (!vueRoute) {
+              addedExtendsPageNames.push(extendsPage.name as string);
+              vueRouter.addRoute("mk-ms-main", extendsPage);
+            }
+          }
+
+          userSession.register(
+            createDisposable(() => {
+              for (const addedExtendsPageName of addedExtendsPageNames) {
+                vueRouter.removeRoute(addedExtendsPageName);
+              }
+            })
+          );
+        })
+      );
+    });
+  }
+}

package/src/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/Router.ts

@@ -0,0 +1,133 @@
+import { Disposable, Event, createDisposable } from "@maketribe/utils";
+import { Route } from "./dataview";
+import type { UserSession } from "./UserSession";
+// import DefaultListPage from "./page/index/dv/default/index.vue";
+// import DefaultAddPage from "./page/index/dv/default/add.vue";
+// import DefaultEditPage from "./page/index/dv/default/edit.vue";
+// import DefaultTreePage from "./page/index/dv/default/tree.vue";
+
+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/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/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/components/image-select/image-select-option.ts

@@ -0,0 +1,11 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const imageSelectProps = buildProps({
+  modelValue: { type: String, required: true },
+} as const);
+
+export const imageSelectEmits = {
+  "update:model-value": (modelValue: any) => true,
+};
+export type imageSelectProps = ExtractPropTypes<typeof imageSelectProps>;

package/src/components/image-select/image-select.tsx

@@ -0,0 +1,40 @@
+import { defineComponent, computed } from "vue";
+import { ElIcon } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
+import { imageSelectProps, imageSelectEmits } from "./image-select-option";
+import { MKMaterialSelect } from "../../components/material-select";
+
+export default defineComponent({
+  name: "MKFileView",
+  props: imageSelectProps,
+  emits: imageSelectEmits,
+
+  setup(props, { emit }) {
+    const modelValue = computed({
+      get: () => props.modelValue,
+      set: (v) => emit("update:model-value", v),
+    });
+
+    const handleSelectClick = async (e: MouseEvent) => {
+      modelValue.value = await MKMaterialSelect();
+    };
+
+    return () => {
+      const imageVNode = props.modelValue ? (
+        <img
+          src={props.modelValue}
+          class="img-select-content"
+          onClick={handleSelectClick}
+        />
+      ) : (
+        <span onClick={handleSelectClick}>
+          <ElIcon class="img-select-icon">
+            <Plus />
+          </ElIcon>
+        </span>
+      );
+
+      return <div class="img-select">{imageVNode}</div>;
+    };
+  },
+});

package/src/components/image-select/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from "@maketribe/utils";
+import imageSelect from "./image-select";
+
+export const MKImageSelect = withInstall(imageSelect);
+
+export default MKImageSelect;

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from "./system-provider";
+export * from "./material-list";
+export * from "./material-select";
+export * from "./role-permission-config";
+export * from "./menu-permission-table";
+export * from "./image-select";
+export * from "./verify-dialog";
+export * from "./member-table";

package/src/components/material-list/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import MaterialList from "./material-list.vue";
+
+export const MKMaterialList = withInstall(MaterialList);
+export default MKMaterialList;
+
+export * from "./material-list-options";