@maketribe/ms-app 3.0.4 → 3.0.6

package/src/composables/use-column-component.ts

@@ -0,0 +1,184 @@
+import { unref, computed, Ref, MaybeRef, ComputedRef, watch, ref } from "vue";
+import {
+  Column,
+  Component,
+  ComponentsCombine,
+  DataForm,
+  DataTable,
+  FilterColumn,
+  DataFilter,
+  FormColumn,
+  IComponents,
+  TableColumn,
+  isWhereFilter,
+} from "@maketribe/dm";
+import { useGlobalConfig } from "../components/config-provider";
+
+export const useComponent = (
+  componentName: MaybeRef<string>,
+  components: MaybeRef<IComponents>
+): {
+  componentInfo: ComputedRef<Component | null>;
+  component: ComputedRef<any>;
+  componentProps: ComputedRef<Record<string, any> | null>;
+} => {
+  const componentInfo = computed(() =>
+    unref(components).resolveComponent(unref(componentName))
+  );
+
+  const component = computed(() => unref(componentInfo)?.component ?? null);
+
+  const componentProps = computed(() => {
+    const componentProps = unref(componentInfo)?.defaultProps ?? null;
+
+    return componentProps ? { ...componentProps } : null;
+  });
+
+  return { componentInfo, component, componentProps };
+};
+
+export const useComponentWithDefault = (
+  componentInfo: ReturnType<typeof useComponent>,
+  defaultComponentInfo: ReturnType<typeof useComponent>
+) => {
+  const _componentInfo = computed(() =>
+    unref(componentInfo.componentInfo)
+      ? unref(componentInfo.componentInfo)
+      : unref(defaultComponentInfo.componentInfo)
+  );
+
+  const _componentProps = computed(() =>
+    unref(componentInfo.componentInfo)
+      ? unref(componentInfo.componentProps)
+      : unref(defaultComponentInfo.componentProps)
+  );
+
+  const _component = computed(() =>
+    unref(componentInfo.componentInfo)
+      ? unref(componentInfo.component)
+      : unref(defaultComponentInfo.component)
+  );
+
+  return {
+    componentInfo: _componentInfo,
+    componentProps: _componentProps,
+    component: _component,
+  };
+};
+
+export const useColumnComponent = (
+  column: Ref<Column | null> | Column,
+  components: Ref<IComponents> | IComponents
+) => {
+  const columnComponentInfo = computed(
+    () => unref(column)?.componentInfo || ""
+  );
+
+  const componentInfo: Ref<Component | null> = ref(null);
+  watch(
+    columnComponentInfo,
+    (columnComponentInfo) => {
+      if (typeof columnComponentInfo === "string") {
+        const { componentInfo: _componentInfo } = useComponent(
+          columnComponentInfo,
+          components
+        );
+
+        componentInfo.value = unref(_componentInfo);
+        return;
+      }
+
+      componentInfo.value = columnComponentInfo;
+    },
+    { immediate: true }
+  );
+
+  const component = computed(() => unref(componentInfo)?.component ?? null);
+  const componentProps = computed(() => {
+    const _componentInfo = unref(componentInfo);
+
+    if (!_componentInfo) {
+      return null;
+    }
+
+    return {
+      ..._componentInfo.defaultProps,
+      ...unref(column)?.componentProps,
+    };
+  });
+
+  return {
+    componentInfo: computed(() => unref(componentInfo)),
+    component,
+    componentProps,
+  };
+};
+
+export const useTableColumnComponent = (
+  column: Ref<TableColumn | null> | TableColumn,
+  dataTable: Ref<DataTable | null> | DataTable
+) => {
+  const defaultDataTableComponents = useGlobalConfig("dataTableComponents");
+
+  const componentCombine = computed(() => {
+    const _defaultDataTableComponents = unref(defaultDataTableComponents);
+
+    const componentsList = ([unref(dataTable)] as IComponents[]).concat(
+      _defaultDataTableComponents ? [_defaultDataTableComponents] : []
+    );
+
+    return new ComponentsCombine({ componentsList });
+  });
+
+  return useComponentWithDefault(
+    useColumnComponent(column, componentCombine),
+    useComponent("MKColumnText", componentCombine)
+  );
+};
+
+export const useFormColumnComponent = (
+  column: Ref<FormColumn | null> | FormColumn,
+  dataForm: Ref<DataForm | null> | DataForm
+) => {
+  const defaultDataFormComponents = useGlobalConfig("dataFormComponents");
+
+  const componentCombine = computed(() => {
+    const _defaultDataFormComponents = unref(defaultDataFormComponents);
+
+    const componentsList = ([unref(dataForm)] as IComponents[]).concat(
+      _defaultDataFormComponents ? [_defaultDataFormComponents] : []
+    );
+
+    return new ComponentsCombine({ componentsList });
+  });
+
+  return useComponentWithDefault(
+    useColumnComponent(column, componentCombine),
+    useComponent("MKFormInput", componentCombine)
+  );
+};
+
+export const useFilterColumnComponent = (
+  column: Ref<FilterColumn | null> | FilterColumn,
+  dataFilter: Ref<DataFilter | null> | DataFilter
+) => {
+  const defaulDataFilterComponents = useGlobalConfig("dataFilterComponents");
+  const defaulWhereFilterComponents = useGlobalConfig("whereFilterComponents");
+
+  const componentCombine = computed(() => {
+    const systemComponents = isWhereFilter(unref(dataFilter))
+      ? unref(defaulWhereFilterComponents)
+      : unref(defaulDataFilterComponents);
+
+    const componentsList = ([unref(dataFilter)] as IComponents[]).concat(
+      systemComponents ? [systemComponents] : []
+    );
+
+    return new ComponentsCombine({ componentsList });
+  });
+
+  return useComponentWithDefault(
+    useColumnComponent(column, componentCombine),
+    useComponent("MKConditionInput", componentCombine)
+  );
+};

package/src/composables/use-current-tab.ts

@@ -1,5 +1,4 @@
-import { MSAppClient } from "../MSAppClient";
-import type { Tab } from "../tabs";
+import { MSAppClient, Tab } from "../core";
 
 export const useCurrentTab = (): Tab | null =>
   MSAppClient.instance!.userSession!.tabs.getCurrentTab() ?? null;

package/src/composables/use-http-request.ts

@@ -1,5 +1,5 @@
 import { HttpRequest } from "@maketribe/request";
-import { MSAppClient } from "../MSAppClient";
+import { MSAppClient } from "../core";
 
 export const useHttpRequest = (): HttpRequest =>
   MSAppClient.instance!.httpRequest;

package/src/composables/use-i18n.ts

@@ -0,0 +1,7 @@
+import { unref } from "vue";
+import { I18n } from "@maketribe/locale";
+import { useGlobalConfig } from "../components/config-provider";
+
+export const useI18n = (): I18n | null => {
+  return unref(useGlobalConfig("i18n")) ?? null;
+};

package/src/composables/use-ms-app-client.ts

@@ -1,5 +1,5 @@
 import { inject } from "vue";
-import { MSAppClient } from "../MSAppClient";
+import { MSAppClient } from "../core";
 
 import { MSAPPCLIENT_CONTEXT_KEY } from "../tokens";
 

package/src/composables/use-user-info.ts

@@ -1,4 +1,4 @@
-import { MSAppClient } from "../MSAppClient";
+import { MSAppClient } from "../core";
 
 export const useUserInfo = () =>
   MSAppClient.instance?.userSession?.userInfo ?? null;

package/src/core/MSAppClient.ts

@@ -0,0 +1,246 @@
+import {
+  createRouter,
+  createWebHashHistory,
+  Router as VueRouter,
+} from "vue-router";
+import { 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);
+  }
+
+  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) {
+        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;
+  }
+
+  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,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);
+              }
+            })
+          );
+        })
+      );
+    });
+  }
+}