@maketribe/ms-app 3.0.0

package/src/dataview/route/RouteTable.ts

@@ -0,0 +1,71 @@
+import {
+  DataTable,
+  DataTableOptions,
+  TableColumn,
+  FilterColumn,
+  TableActionColumn,
+  defineDataTable,
+} from "@maketribe/dm";
+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() {
+    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: "id", label: "编号", visible: false }),
+      new TableColumn({ name: "name", label: "路由名" }),
+      new TableColumn({ name: "title", 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 || "",
+      path: item.path || "",
+    };
+  }
+}
+
+defineDataTable(RouteTable);

package/src/dataview/route/index.ts

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

package/src/index.ts

@@ -0,0 +1,27 @@
+export * from "./constants";
+export * from "./dataview";
+
+export * from "./tabs";
+export * from "./menu";
+export * from "./Router";
+export * from "./PermissionPointManager";
+export * from "./UserSession";
+export * from "./MSAppClient";
+
+import { installer } from "./installer";
+
+export * from "./layouts";
+export * from "./composables";
+export * from "./components";
+export * from "./tokens";
+export * from "./ConfigComponents";
+export * from "./MaterialComponents";
+export { MSDataFormComponents } from "./MSDataFormComponents";
+export { MSDataTableComponents } from "./MSDataTableComponents";
+export { MSDataFilterComponents } from "./MSDataFilterComponents";
+
+export const install = installer.install;
+export const version = installer.version;
+
+export * from "./init-application";
+// export * from "./router";

package/src/init-application.ts

@@ -0,0 +1,84 @@
+import { App, reactive } from "vue";
+import {
+  createRouter,
+  createWebHashHistory,
+  Router as VueRouter,
+} from "vue-router";
+import { MSAppClient } from "./MSAppClient";
+import { HttpRequest, WebHttpRequest } from "@maketribe/request";
+import { MSAPPCLIENT_CONTEXT_KEY } from "./tokens";
+import { Router } from "vue-router";
+
+export type InitMsApplicationOptions = {
+  routes: any;
+  vueRouter?: VueRouter;
+  app: App;
+  router?: Router;
+  appID: string;
+  logo?: string;
+  projectName: string;
+  locale?: string;
+  httpRequest?: HttpRequest;
+};
+
+export const initApplication = async (options: InitMsApplicationOptions) => {
+  const app = options.app;
+
+  const vueRouter =
+    options.router ??
+    createRouter({
+      history: createWebHashHistory(),
+      routes: [],
+    });
+
+  const routes = Object.values(options.routes).map((item: any) => {
+    const component = item.default ?? item;
+
+    return {
+      ...component.mkRoute,
+      component,
+      children: [],
+      meta: {
+        ...component.mkRoute.meta,
+      },
+    };
+  });
+
+  for (const route of routes) {
+    for (const innerRoute of routes) {
+      if (innerRoute.parent === route.name) {
+        route.children.push(innerRoute);
+      }
+    }
+  }
+
+  routes
+    .filter((route) => !route.parent)
+    .forEach((route) => {
+      vueRouter.addRoute(route);
+    });
+
+  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,
+    })
+  ) as unknown as MSAppClient;
+
+  app.provide(MSAPPCLIENT_CONTEXT_KEY, { msAppClient });
+
+  MSAppClient.instance = msAppClient;
+
+  (window as any).msAppClient = msAppClient;
+
+  await msAppClient.init();
+
+  app.use(msAppClient.vueRouter);
+
+  return msAppClient;
+};

package/src/installer.ts

@@ -0,0 +1,26 @@
+import { Plugin, reactive } from "vue";
+import { makeInstaller } from "@maketribe/utils";
+import { ConfigProviderContext } from "@maketribe/dm-ui";
+
+import {
+  MKMaterialList,
+  MKMaterialSelect,
+  MKSystemProvider,
+  MKRolePermissionConfig,
+  MKImageSelect,
+  MKVerifyDialog,
+} from "./components";
+
+const components: Plugin[] = [
+  MKSystemProvider,
+  MKMaterialList,
+  MKMaterialSelect,
+  MKRolePermissionConfig,
+  MKImageSelect,
+  MKVerifyDialog,
+];
+
+export const installer = makeInstaller<ConfigProviderContext>(
+  components,
+  "1.0.0-dev"
+);

package/src/layouts/index.ts

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

package/src/layouts/manager-system/components/aside/aside.tsx

@@ -0,0 +1,45 @@
+import { Ref, computed, defineComponent, ref, unref } from "vue";
+import MKAsideBar from "./bar";
+import MKAsidePanel from "./panel";
+import { MenuNode } from "../../../../menu";
+import { MSAppClient } from "../../../../MSAppClient";
+
+export default defineComponent({
+  name: "MKMenu",
+  setup() {
+    const menu = MSAppClient.instance!.userSession!.menu;
+    const isCollapse = computed(() => menu.isCollapsed);
+
+    const currentMenuModule: Ref<MenuNode | null> = ref(
+      menu.getCurrentMenuNode()
+        ? findRootMenu(menu.getCurrentMenuNode()!)
+        : null
+    );
+
+    menu.currentMenuChangeEvent.on(({ currentMenu: menu }) => {
+      currentMenuModule.value = menu ? findRootMenu(menu) : null;
+    });
+
+    function findRootMenu(menuNode: MenuNode) {
+      while (menuNode?.parent) {
+        menuNode = menuNode.parent;
+      }
+
+      return menuNode;
+    }
+
+    return () => {
+      const _currentMenuModule = unref(currentMenuModule) as MenuNode;
+
+      return (
+        <div class="mk-aside">
+          <MKAsideBar menuModule={unref(currentMenuModule) as MenuNode} />
+          <MKAsidePanel
+            collapse={unref(isCollapse)}
+            menuModule={_currentMenuModule}
+          />
+        </div>
+      );
+    };
+  },
+});

package/src/layouts/manager-system/components/aside/bar/bar.tsx

@@ -0,0 +1,79 @@
+import { defineComponent } from "vue";
+import { ElScrollbar } from "element-plus";
+import { MenuNode } from "../../../../../menu";
+import { MSAppClient } from "../../../../../MSAppClient";
+import { MKSvgIcon } from "@maketribe/dm-ui";
+
+export default defineComponent({
+  name: "MKAsideBar",
+  props: {
+    menuModule: {
+      type: MenuNode,
+    },
+  },
+  setup(props) {
+    const msAppClient = MSAppClient.instance!;
+    const userSession = msAppClient.userSession!;
+
+    const menu = userSession.menu;
+    const router = userSession.router;
+
+    const handleMenuItemClick = async (item: MenuNode) => {
+      if (item.children.length) {
+        const _item = menu.getFirstLeafMenuNode(item.children);
+
+        if (!_item) {
+          return;
+        }
+
+        item = _item;
+      }
+
+      if (item.route) {
+        router.changeRoute({ name: item.route.name });
+      }
+    };
+
+    return () => {
+      const logo = msAppClient.logo ? (
+        <div class="mk-aside-bar__logo">
+          <div
+            class="mk-logo"
+            style={{ backgroundImage: `url(${msAppClient.logo})` }}
+          />
+        </div>
+      ) : null;
+
+      const menuItems = menu.rootMenus.map((menu) => (
+        <div
+          class={[
+            "mk-aside-bar__item",
+            props.menuModule?.id === menu.id ? "is-active" : "",
+          ]}
+        >
+          <div
+            class="mk-aside-bar__item-main"
+            onClick={() => handleMenuItemClick(menu)}
+          >
+            <div>
+              <MKSvgIcon
+                class="mk-aside-bar__item-icon"
+                iconClass={menu.iconName}
+              />
+              <span class="mk-aside-bar__item-label">{menu.title}</span>
+            </div>
+          </div>
+        </div>
+      ));
+
+      return (
+        <div class="mk-aside-bar">
+          {logo}
+          <div class="mk-aside-bar__icons">
+            <ElScrollbar height="100%">{menuItems}</ElScrollbar>
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/layouts/manager-system/components/aside/bar/index.ts

@@ -0,0 +1,5 @@
+import AsideBar from "./bar";
+
+export const MKAsideBar = AsideBar;
+
+export default MKAsideBar;

package/src/layouts/manager-system/components/aside/index.ts

@@ -0,0 +1,5 @@
+import Aside from "./aside";
+
+export const MKAside = Aside;
+
+export default MKAside;

package/src/layouts/manager-system/components/aside/menu/index.ts

@@ -0,0 +1,5 @@
+import AsideMenu from "./menu";
+
+export const MKAsideMenu = AsideMenu;
+
+export default MKAsideMenu;

package/src/layouts/manager-system/components/aside/menu/menu-item.tsx

@@ -0,0 +1,63 @@
+import { Fragment, defineComponent } from "vue";
+import { ElMenuItem, ElSubMenu } from "element-plus";
+import { MenuNode } from "../../../../../menu";
+import { MKSvgIcon } from "@maketribe/dm-ui";
+
+const MKAsideMenuItem = defineComponent({
+  name: "MKAsideMenuItem",
+  props: {
+    node: {
+      type: MenuNode,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => {
+      if (!props.node.children.length) {
+        const icon = props.node.iconName ? (
+          <MKSvgIcon
+            class="mk-menu-item__icon"
+            iconClass={props.node.iconName}
+          />
+        ) : null;
+
+        return (
+          <ElMenuItem index={props.node.id}>
+            {icon}
+            {props.node.title}
+          </ElMenuItem>
+        );
+      }
+
+      const items = props.node.children.map((node) => (
+        <MKAsideMenuItem node={node} key={node.id} />
+      ));
+
+      return (
+        <ElSubMenu
+          index={props.node.id}
+          v-slots={{
+            title: () => {
+              const icon = props.node.iconName ? (
+                <MKSvgIcon
+                  class="mk-menu-item__icon"
+                  iconClass={props.node.iconName}
+                />
+              ) : null;
+              return (
+                <Fragment>
+                  {icon}
+                  {props.node.title}
+                </Fragment>
+              );
+            },
+          }}
+        >
+          {items}
+        </ElSubMenu>
+      );
+    };
+  },
+});
+
+export default MKAsideMenuItem;

package/src/layouts/manager-system/components/aside/menu/menu.tsx

@@ -0,0 +1,51 @@
+import { defineComponent, ref, unref } from "vue";
+import { ElMenu } from "element-plus";
+import { MenuNode } from "../../../../../menu";
+import { MSAppClient } from "../../../../../MSAppClient";
+import MKAsideMenuItem from "./menu-item";
+
+export default defineComponent({
+  name: "MKAsideMenu",
+  props: {
+    menus: {
+      type: Array<MenuNode>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const userSession = MSAppClient.instance!.userSession!;
+
+    const menu = userSession.menu;
+    const router = userSession.router;
+
+    const currentMenuID = ref(menu.getCurrentMenuNode()?.id || "");
+
+    const handleSelect = async (id: string) => {
+      const item = menu.findMenuNodeByID(id);
+
+      if (item?.route) {
+        router.changeRoute({ name: item.route.name });
+      }
+    };
+
+    menu.currentMenuChangeEvent.on(({ currentMenu }) => {
+      currentMenuID.value = currentMenu?.id || "";
+    });
+
+    return () => {
+      const items = props.menus.map((menu) => (
+        <MKAsideMenuItem class="mk-menu-item" node={menu} key={menu.id} />
+      ));
+
+      return (
+        <ElMenu
+          class="mk-menu"
+          defaultActive={unref(currentMenuID)}
+          onSelect={handleSelect}
+        >
+          {items}
+        </ElMenu>
+      );
+    };
+  },
+});

package/src/layouts/manager-system/components/aside/panel/index.ts

@@ -0,0 +1,5 @@
+import MenuPanel from "./panel";
+
+export const MKAsidePanel = MenuPanel;
+
+export default MKAsidePanel;

package/src/layouts/manager-system/components/aside/panel/panel.tsx

@@ -0,0 +1,57 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElDivider, ElScrollbar } from "element-plus";
+import { MenuNode } from "../../../../../menu";
+import { MSAppClient } from "../../../../../MSAppClient";
+import MKAsideMenu from "../menu";
+
+export default defineComponent({
+  name: "MKAsidePanel",
+  props: {
+    menuModule: {
+      type: MenuNode,
+    },
+    collapse: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const msAppClient = MSAppClient.instance!;
+
+    const menus = computed(() => props.menuModule?.children ?? []);
+
+    const isCollapse = computed(() => {
+      if (props.collapse) {
+        return true;
+      }
+
+      return !props.menuModule || !props.menuModule.children.length;
+    });
+
+    const isRenderContent = computed(() => {
+      return !!props.menuModule?.children.length;
+    });
+
+    return () => {
+      const content = unref(isRenderContent) ? (
+        <div class="mk-aside-panel__content">
+          <div class="mk-aside-panel__title">{msAppClient.projectName}</div>
+
+          <ElDivider class="mk-aside-panel__divider">
+            {props.menuModule!.title}
+          </ElDivider>
+
+          <MKAsideMenu menus={unref(menus)} />
+        </div>
+      ) : null;
+
+      return (
+        <div class={["mk-aside-panel", unref(isCollapse) ? "is-collapse" : ""]}>
+          <div class="mk-aside-panel__wrapper">
+            <ElScrollbar height="100%">{content}</ElScrollbar>
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/layouts/manager-system/components/header/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,47 @@
+import { Ref, computed, defineComponent, ref, unref } from "vue";
+import { ElBreadcrumb, ElBreadcrumbItem } from "element-plus";
+import { MKSvgIcon } from "@maketribe/dm-ui";
+import { MenuNode } from "../../../../../menu";
+import { MSAppClient } from "../../../../../MSAppClient";
+
+export default defineComponent({
+  name: "MKHeaderBreadcrumb",
+  setup() {
+    const menu = MSAppClient.instance!.userSession!.menu;
+
+    const currentMenu = ref(menu.getCurrentMenuNode()) as Ref<MenuNode | null>;
+
+    menu.currentMenuChangeEvent.on(({ currentMenu: current }) => {
+      currentMenu.value = current;
+    });
+
+    const path = computed(() => {
+      const currentMenuNode = unref(currentMenu);;
+
+      if (!currentMenuNode) {
+        return [];
+      }
+
+      return currentMenuNode.getMenuNodePath().map((item) => ({
+        id: `menu_${item.id}`,
+        iconName: item.iconName,
+        title: item.title,
+      }));
+    });
+
+    return () => {
+      const breadcrumbItems = unref(path).map((item) => (
+        <ElBreadcrumbItem key={item.id}>
+          <MKSvgIcon iconClass={item.iconName} />
+          {item.title}
+        </ElBreadcrumbItem>
+      ));
+
+      return (
+        <ElBreadcrumb class="mk-header-breadcrumb">
+          {breadcrumbItems}
+        </ElBreadcrumb>
+      );
+    };
+  },
+});

package/src/layouts/manager-system/components/header/breadcrumb/index.ts

@@ -0,0 +1,5 @@
+import HeaderBreadcrumb from "./breadcrumb";
+
+export const MKHeaderBreadcrumb = HeaderBreadcrumb;
+
+export default HeaderBreadcrumb;

package/src/layouts/manager-system/components/header/header.tsx

@@ -0,0 +1,17 @@
+import { defineComponent } from "vue";
+import MKHeaderNav from "./nav";
+import MKHeaderTabs from "./tabs";
+
+export default defineComponent({
+  name: "MKHeader",
+  setup(props) {
+    return () => {
+      return (
+        <div class="mk-header">
+          <MKHeaderNav />
+          <MKHeaderTabs />
+        </div>
+      );
+    };
+  },
+});

package/src/layouts/manager-system/components/header/index.ts

@@ -0,0 +1,5 @@
+import Header from "./header";
+
+export const MKHeader = Header;
+
+export default MKHeader;

package/src/layouts/manager-system/components/header/nav/index.ts

@@ -0,0 +1,5 @@
+import HeaderNav from "./nav";
+
+export const MKHeaderNav = HeaderNav;
+
+export default MKHeaderNav;