@maketribe/ms-app 3.0.29 → 3.0.31

package/src/dataview/role/role-permission-point/RolePermissionPointTable.ts

@@ -0,0 +1,29 @@
+import { DataTable, DataTableOptions, TableColumn } from "@maketribe/dm";
+
+export type RolePermissionPoint = {
+  id: string;
+  permissionPointDefId: string;
+  roleId: string;
+};
+
+export class RolePermissionPointTable extends DataTable<RolePermissionPoint> {
+  constructor(options: DataTableOptions = {}) {
+    super({
+      name: "ms-role-permission-point",
+      ...options,
+      interfaceURL: {
+        list: `/api/dv/ms-role-permission-point/allList`,
+      },
+    });
+  }
+
+  protected async initialize() {
+    await super.initialize();
+
+    this.setColumns([
+      new TableColumn({ name: "id", visible: false }),
+      new TableColumn({ name: "roleId" }),
+      new TableColumn({ name: "permissionPointDefId" }),
+    ]);
+  }
+}

package/src/dataview/role/role-permission-point/index.ts

@@ -0,0 +1 @@
+export * from "./RolePermissionPointTable";

package/src/dataview/role/role-route/RoleRouteTable.ts

@@ -0,0 +1,30 @@
+import { DataTable, DataTableOptions, TableColumn } from "@maketribe/dm";
+
+export type RoleRoute = {
+  id: string;
+  roleId: string;
+  routeId: string;
+};
+
+export class RoleRouteTable extends DataTable<RoleRoute> {
+  constructor(options: DataTableOptions = {}) {
+    super({
+      name: "ms-role-route",
+      ...options,
+
+      interfaceURL: {
+        list: `/api/dv/ms-role-route/allList`,
+      },
+    });
+  }
+
+  protected async initialize() {
+    await super.initialize();
+
+    this.setColumns([
+      new TableColumn({ name: "id", visible: false }),
+      new TableColumn({ name: "roleId" }),
+      new TableColumn({ name: "routeId" }),
+    ]);
+  }
+}

package/src/dataview/role/role-route/index.ts

@@ -0,0 +1 @@
+export * from "./RoleRouteTable";

package/src/dataview/route/RouteForm.ts

@@ -0,0 +1,94 @@
+import { DataForm, DataFormOptions, FormColumn } from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
+import { RouteType } from "../../constants";
+import { MenuTable } from "../menu/MenuTable";
+
+export type RouteResult = {
+  id: string;
+  name: string;
+  title: string;
+  type: number;
+  menuId: string;
+  iconName: string;
+  route?: string;
+};
+
+export type Route = {
+  id: string;
+  name: string;
+  title: string;
+  type: RouteType;
+  menuId: string;
+  iconName: string;
+  route: string;
+};
+
+export class RouteForm extends DataForm<RouteResult, Route> {
+  constructor(options: DataFormOptions = {}) {
+    super({ name: "ms-route", ...options });
+  }
+
+  protected async initialize() {
+    await super.initialize();
+
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({ name: "name", label: "路由名", required: true }),
+      new FormColumn({ name: "title", label: "路由描述", required: true }),
+      new FormColumn({
+        name: "menuId",
+        label: "所属菜单",
+        componentInfo: "MKFormDataTableSelect",
+        required: true,
+        componentProps: {
+          labelFieldName: "title",
+          dataTable: new MenuTable({ pageSize: 10 }),
+        },
+      }),
+      new FormColumn({
+        name: "iconName",
+        label: "图标",
+        componentInfo: "MKFormIconSelect",
+      }),
+      new FormColumn({ name: "route", label: "路径" }),
+      new FormColumn({
+        name: "type",
+        label: "路由类型",
+        defaultValue: RouteType.ROUTE,
+        componentInfo: "MKFormDataSelect",
+        required: true,
+        componentProps: {
+          options: [
+            { value: RouteType.ROUTE, label: "站内路由" },
+            { value: RouteType.LINK, label: "站外链接" },
+          ],
+        },
+      }),
+    ]);
+  }
+
+  formatSubmitData(data: any) {
+    const type = Number.parseInt(data.type);
+
+    return {
+      ...data,
+      iconName: data.iconName || null,
+      type: Number.isNaN(type) ? RouteType.ROUTE : type,
+    };
+  }
+
+  formatItem(item: RouteResult): Route {
+    return {
+      id: item.id,
+      name: item.name || "",
+      title: item.title || "",
+      type:
+        `${item.type}` === RouteType.ROUTE ? RouteType.ROUTE : RouteType.LINK,
+      menuId: item.menuId,
+      iconName: item.iconName || "",
+      route: item.route || "",
+    };
+  }
+}
+
+defineDataForm(RouteForm);

package/src/dataview/route/RouteTable.ts

@@ -0,0 +1,73 @@
+import {
+  DataTable,
+  DataTableOptions,
+  TableColumn,
+  FilterColumn,
+  TableActionColumn,
+} from "@maketribe/dm";
+import { defineDataTable } from "../../define-data-table";
+import { Route, RouteResult } from "./RouteForm";
+import { RouteType } from "../../constants";
+
+export class RouteTable extends DataTable<RouteResult, Route> {
+  constructor(options: DataTableOptions = {}) {
+    super({ name: "ms-route", ...options });
+  }
+
+  protected async initialize() {
+    await super.initialize();
+
+    this.dataFilter.setColumns([
+      new FilterColumn({
+        name: "name",
+        label: "路由名",
+        componentInfo: "MKConditionInput",
+      }),
+      new FilterColumn({
+        name: "title",
+        label: "路由描述",
+        componentInfo: "MKConditionInput",
+      }),
+      new FilterColumn({
+        name: "type",
+        label: "路由类型",
+        componentInfo: "MKConditionSelect",
+        componentProps: {
+          options: [
+            { value: 0, label: "站内路由" },
+            { value: 1, label: "站外链接" },
+          ],
+        },
+      }),
+    ]);
+
+    this.setColumns([
+      new TableColumn({ name: "name", label: "路由名" }),
+      new TableColumn({ name: "title", label: "路由描述" }),
+      new TableColumn({ name: "route", label: "路径" }),
+      new TableColumn({
+        name: "type",
+        label: "路由类型",
+        componentInfo: "MKColumnObjectMappingText",
+        componentProps: {
+          mapping: { 0: "站内路由", 1: "站外链接" },
+        },
+      }),
+      new TableActionColumn(),
+    ]);
+  }
+
+  formatItem(item: RouteResult): Route {
+    return {
+      id: item.id,
+      name: item.name || "",
+      title: item.title || "",
+      type: item.type === 0 ? RouteType.ROUTE : RouteType.LINK,
+      menuId: item.menuId,
+      iconName: item.iconName || "",
+      route: item.route || "",
+    };
+  }
+}
+
+defineDataTable(RouteTable);

package/src/dataview/route/index.ts

@@ -0,0 +1,2 @@
+export * from "./RouteForm";
+export * from "./RouteTable";

package/src/define-data-form.ts

@@ -0,0 +1,12 @@
+import { DataFormClass, DataModelDefines } from "./core";
+
+export const defineDataForm = <T extends DataFormClass>(
+  DataFormClass: T
+): T => {
+  DataModelDefines.instance.registerDataFormDefine(
+    new DataFormClass({}).name,
+    DataFormClass
+  );
+
+  return DataFormClass;
+};

package/src/define-data-table.ts

@@ -0,0 +1,12 @@
+import { DataModelDefines, DataTableClass } from "./core";
+
+export const defineDataTable = <T extends DataTableClass>(
+  DataTableClass: T
+): T => {
+  DataModelDefines.instance.registerDataTableDefine(
+    new DataTableClass({}).name,
+    DataTableClass
+  );
+
+  return DataTableClass;
+};

package/src/define-data-tree.ts

@@ -0,0 +1,12 @@
+import { DataTreeClass, DataModelDefines } from "./core";
+
+export const defineDataTree = <T extends DataTreeClass>(
+  DataTreeClass: T
+): T => {
+  DataModelDefines.instance.registerDataTreeDefine(
+    new DataTreeClass({}).name,
+    DataTreeClass
+  );
+
+  return DataTreeClass;
+};

package/src/index.ts

@@ -0,0 +1,19 @@
+export * from "./constants";
+export * from "./dataview";
+
+export * from "./core";
+
+import { installer } from "./installer";
+
+export * from "./layouts";
+export * from "./composables";
+export * from "./components";
+export * from "./tokens";
+
+export const install = installer.install;
+export const version = installer.version;
+
+export * from "./init-application";
+export * from "./define-data-table";
+export * from "./define-data-form";
+export * from "./define-data-tree";

package/src/init-application.ts

@@ -0,0 +1,83 @@
+import { App, reactive } from "vue";
+import {
+  createRouter,
+  createWebHashHistory,
+  Router as VueRouter,
+} from "vue-router";
+import { MSAppClient } from "./core";
+import { HttpRequest, WebHttpRequest } from "@maketribe/request";
+import { MSAPPCLIENT_CONTEXT_KEY } from "./tokens";
+
+import { generateRoutesFromFiles } from "./utils";
+import {
+  DataFilterComponents,
+  DataFormComponents,
+  DataTableComponents,
+} from "./core";
+
+export type InitMsApplicationOptions = {
+  routes: any;
+  vueRouter?: VueRouter;
+  app: App;
+  appID: string;
+  logo?: string;
+  projectName: string;
+  locale?: string;
+  httpRequest?: HttpRequest;
+};
+
+export const initApplication = async (options: InitMsApplicationOptions) => {
+  const app = options.app;
+
+  const vueRouter =
+    options.vueRouter ??
+    createRouter({
+      history: createWebHashHistory(),
+      routes: [],
+    });
+
+  const msAppClient = reactive(
+    new MSAppClient({
+      appID: options!.appID,
+      logo: options!.logo ?? "",
+      projectName: options!.projectName,
+      httpRequest: options.httpRequest ?? new WebHttpRequest(),
+      origin: location.origin,
+      locale: options!.locale,
+      vueRouter,
+      dataTableComponents: new DataTableComponents(),
+      dataFormComponents: new DataFormComponents(),
+      dataFilterComponents: new DataFilterComponents(),
+      whereFilterComponents: new DataFilterComponents(),
+    })
+  ) as unknown as MSAppClient;
+
+  app.provide(MSAPPCLIENT_CONTEXT_KEY, { msAppClient });
+
+  MSAppClient.instance = msAppClient;
+
+  (window as any).msAppClient = msAppClient;
+
+  const routes = generateRoutesFromFiles(
+    Object.keys(options.routes).map((key) => {
+      return {
+        path: key.replace(/^\.\/pages\/(.+)\.vue$/, (_, g) => g),
+        module: options.routes[key]?.default || options.routes[key],
+      };
+    })
+  );
+
+  for (const route of routes) {
+    if (route.key.startsWith("index")) {
+      msAppClient.pageManager.addExtendsPage(route);
+    } else {
+      msAppClient.pageManager.addNormalPage(route);
+    }
+  }
+
+  await msAppClient.init();
+
+  app.use(msAppClient.vueRouter);
+
+  return msAppClient;
+};

package/src/installer.ts

@@ -0,0 +1,73 @@
+import { Plugin } from "vue";
+import { makeInstaller } from "@maketribe/utils";
+import { Dialoger, Messager, Notificationer } from "@maketribe/dm";
+import { DialogerImpl, MessagerImpl, NotificationerImpl } from "./message-impl";
+import {
+  ConfigProviderContext,
+  MKConfigProvider,
+  MKDataForm,
+  MKDataFormPage,
+  MKDataTable,
+  MKDataTablePage,
+  MKImageView,
+  MKSvgIcon,
+  MKVideoView,
+  provideGlobalConfig,
+  MKDataTableSelect,
+  MKDataTableSelectDialog,
+  MKPagination,
+  MKDataTablePagination,
+  MKMarkdownEditor,
+  MKRichTextEditor,
+  MKMaterialList,
+  MKMaterialSelect,
+  MKSystemProvider,
+  MKRolePermissionConfig,
+  MKImageSelect,
+  MKVerifyDialog,
+  MKUploadFile,
+  MKUploadImage,
+  MKWebFileUploadContext,
+  MKMaterialUploadContext,
+} from "./components";
+
+const components: Plugin[] = [
+  MKConfigProvider,
+  MKDataForm,
+  MKDataFormPage,
+  MKDataTable,
+  MKDataTablePage,
+  MKImageView,
+  MKSvgIcon,
+  MKVideoView,
+  MKDataTableSelect,
+  MKDataTableSelectDialog,
+  MKPagination,
+  MKDataTablePagination,
+  MKMarkdownEditor,
+  MKRichTextEditor,
+  MKMaterialList,
+  MKMaterialSelect,
+  MKSystemProvider,
+  MKRolePermissionConfig,
+  MKImageSelect,
+  MKVerifyDialog,
+  MKUploadFile,
+  MKUploadImage,
+  MKWebFileUploadContext,
+  MKMaterialUploadContext,
+];
+
+export const installer = makeInstaller<ConfigProviderContext>(
+  components,
+  "1.0.0-dev",
+  (app, version, options) => {
+    if (options) {
+      provideGlobalConfig(options, app, true);
+    }
+
+    Messager.implInstance = new MessagerImpl();
+    Dialoger.implInstance = new DialogerImpl();
+    Notificationer.implInstance = new NotificationerImpl();
+  }
+);

package/src/layouts/components/bar/index.tsx

@@ -0,0 +1,102 @@
+import { computed, defineComponent, unref } from "vue";
+import { MKSvgIcon } from "../../../components";
+import { MSAppClient, MenuNode } from "../../../core";
+import { MenuType } from "../../../constants";
+
+export const MKBar = defineComponent({
+  name: "MKBar",
+  props: {
+    barItem: {
+      type: MenuNode,
+    },
+  },
+  setup(props) {
+    const msAppClient = MSAppClient.instance!;
+    const userSession = msAppClient.userSession!;
+    const menu = userSession.menu;
+    const vueRouter = msAppClient.vueRouter;
+    // const router = userSession.router;
+
+    const currentBarItem = computed(() => props.barItem);
+
+    const handleBarItemClick = (barItem: MenuNode) => {
+      let target: MenuNode | null = barItem;
+
+      if (barItem.children.length) {
+        target = menu.getFirstLeafMenuNode(barItem.children);
+      }
+
+      if (!target) {
+        return;
+      }
+
+      if (target?.route) {
+        vueRouter.push({ name: target.route.name });
+      }
+    };
+
+    return () => {
+      const barItems = menu.rootMenus
+        .filter((rootMenu) => rootMenu.type !== "3")
+        .map((rootMenu) => (
+          <div
+            class={[
+              "mk-bar__item",
+              rootMenu.children.length ? "has-children" : "",
+              unref(currentBarItem)?.id === rootMenu.id ? "is-active" : "",
+            ]}
+            onClick={() => handleBarItemClick(rootMenu)}
+          >
+            <div class="mk-bar__item-button">
+              <MKSvgIcon iconClass={rootMenu.iconName} />
+            </div>
+            <div class="mk-bar__item-title">{rootMenu.title} </div>
+          </div>
+        ));
+
+      const systemSettingNode = menu.rootMenus.find(
+        (rootMenu) => rootMenu.type === MenuType.SystemSettings
+      );
+
+      const footer = systemSettingNode?.children.length ? (
+        <div class="mk-bar__footer">
+          <div
+            class={[
+              "mk-bar__item",
+              "mk-bar__settings",
+              systemSettingNode.children.length ? "has-children" : "",
+              unref(currentBarItem)?.id === systemSettingNode.id
+                ? "is-active"
+                : "",
+            ]}
+            onClick={() => handleBarItemClick(systemSettingNode)}
+          >
+            <div class="mk-bar__item-button">
+              <MKSvgIcon iconClass={systemSettingNode.iconName} />
+            </div>
+            <div class="mk-bar__item-title">{systemSettingNode.title} </div>
+          </div>
+        </div>
+      ) : null;
+
+      const logo = msAppClient.logo ? (
+        <div class="mk-bar__logo">
+          <div
+            class="mk-logo"
+            style={{ backgroundImage: `url(${msAppClient.logo})` }}
+          />
+        </div>
+      ) : null;
+
+      return (
+        <div class="mk-bar">
+          {logo}
+
+          <div class="mk-bar__items">{barItems}</div>
+
+          {footer}
+        </div>
+      );
+    };
+  },
+});

package/src/layouts/components/dialogs/dialogs.tsx

@@ -0,0 +1,100 @@
+import { Fragment, Ref, defineComponent, ref, unref } from "vue";
+import { DialogInstance, Dialoger } from "@maketribe/dm";
+import { DialogerImpl } from "../../../message-impl";
+import { isFunction } from "lodash-es";
+import { ElButton, ElDialog } from "element-plus";
+
+export default defineComponent({
+  name: "MKDialogs",
+  setup(props) {
+    const dialogInstances: Ref<DialogInstance[]> = ref([]);
+
+    const dialogImplInstance = Dialoger.implInstance as DialogerImpl | null;
+
+    if (
+      dialogImplInstance?.dialogInstanceCreateEvent &&
+      isFunction(dialogImplInstance.dialogInstanceCreateEvent.on)
+    ) {
+      dialogImplInstance.dialogInstanceCreateEvent.on((dialogInstance) => {
+        dialogInstance.destroyEvent.on(() => {
+          const index = dialogInstances.value.findIndex(
+            (instance) => dialogInstance.id === instance.id
+          );
+
+          if (index === -1) {
+            return;
+          }
+
+          dialogInstances.value.splice(index, 1);
+        });
+
+        dialogInstances.value.push(dialogInstance);
+      });
+    }
+
+    const handleCancel = async (dialogInstance: DialogInstance) => {
+      if (
+        isFunction(dialogInstance.onCancel)
+          ? (await dialogInstance.onCancel()) === false
+          : false
+      ) {
+        return;
+      }
+
+      dialogInstance.visible = false;
+    };
+
+    const handleConfirm = async (dialogInstance: DialogInstance) => {
+      if (
+        isFunction(dialogInstance.onConfirm)
+          ? (await dialogInstance.onConfirm()) === false
+          : false
+      ) {
+        return;
+      }
+
+      dialogInstance.visible = false;
+    };
+
+    return () => {
+      const dialogs = unref(dialogInstances).map((dialogInstance) => {
+        return (
+          <ElDialog
+            modelValue={dialogInstance.visible}
+            onUpdate:modelValue={(visible: boolean) =>
+              (dialogInstance.visible = visible)
+            }
+            appendToBody
+            destroyOnClose={true}
+            width={dialogInstance.width}
+            v-slots={{
+              header: () =>
+                isFunction(dialogInstance.header)
+                  ? dialogInstance.header?.()
+                  : dialogInstance.title || "",
+              default: () => dialogInstance.body(),
+              footer: () =>
+                isFunction(dialogInstance.footer) ? (
+                  dialogInstance.footer?.()
+                ) : (
+                  <Fragment>
+                    <ElButton onClick={() => handleCancel(dialogInstance)}>
+                      {dialogInstance.cancelButtonText ?? "取消"}
+                    </ElButton>
+                    <ElButton
+                      type="primary"
+                      onClick={() => handleConfirm(dialogInstance)}
+                    >
+                      {dialogInstance.confirmButtonText ?? "确认"}
+                    </ElButton>
+                  </Fragment>
+                ),
+            }}
+          />
+        );
+      });
+
+      return <Fragment>{dialogs}</Fragment>;
+    };
+  },
+});

package/src/layouts/components/dialogs/index.ts

@@ -0,0 +1,5 @@
+import Dialogs from "./dialogs";
+
+export const MKDialogs = Dialogs;
+
+export default MKDialogs;

package/src/layouts/components/header/index.tsx

@@ -0,0 +1,18 @@
+import { defineComponent } from "vue";
+import { MKHeaderTools } from "./tools";
+
+export const MKHeader = defineComponent({
+  name: "MKHeader",
+  setup() {
+    return () => {
+      return (
+        <div class="mk-header">
+          <div class="mk-header__main"></div>
+          <div class="mk-header__tools">
+            <MKHeaderTools />
+          </div>
+        </div>
+      );
+    };
+  },
+});