@maketribe/ms-app 3.0.1 → 3.0.4

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;

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

@@ -0,0 +1,91 @@
+import { ElDropdown, ElDropdownItem } from "element-plus";
+import { MKSvgIcon } from "@maketribe/dm-ui";
+import { Fragment, computed, defineComponent, unref } from "vue";
+import { MKHeaderTools } from "../tools";
+import { MKHeaderBreadcrumb } from "../breadcrumb";
+import { useRouter } from "vue-router";
+import { MSAppClient } from "../../../../../MSAppClient";
+
+type UserDropdownItem = { title: string; icon: string; callback: () => any };
+
+export default defineComponent({
+  name: "MKHeaderNav",
+  setup() {
+    const vueRouter = useRouter();
+
+    const msAppClient = MSAppClient.instance!;
+    const userSession = msAppClient.userSession!;
+
+    const userInfo = computed(() => userSession.userInfo);
+
+    const dropdownItems: UserDropdownItem[] = [
+      // {
+      //   title: "个人中心",
+      //   icon: "User",
+      //   callback: () => {
+      //     vueRouter.push({ name: "profile" });
+      //   },
+      // },
+      {
+        title: "退出登陆",
+        icon: "SwitchButton",
+        callback: () => {
+          msAppClient.logout();
+          vueRouter.push({ name: "login" });
+        },
+      },
+    ];
+
+    const handleCommand = (command: UserDropdownItem) => {
+      command.callback();
+    };
+
+    const handleMenuClick = () => {
+      userSession.menu.isVisible = true;
+    };
+
+    return () => {
+      const _userInfo = unref(userInfo);
+
+      const userDropdown = _userInfo ? (
+        <ElDropdown
+          class="mk-header-nav__user"
+          onCommand={handleCommand}
+          v-slots={{
+            dropdown: () => {
+              const items = dropdownItems.map((item) => (
+                <ElDropdownItem command={item}>
+                  <MKSvgIcon iconClass={item.icon} /> {item.title}
+                </ElDropdownItem>
+              ));
+
+              return <Fragment>{items}</Fragment>;
+            },
+          }}
+        >
+          <span class="mk-header-nav__user-info">
+            {_userInfo.nickName}
+            <MKSvgIcon class="mk-header-nav__arrow" iconClass="ArrowDownBold" />
+          </span>
+        </ElDropdown>
+      ) : null;
+
+      return (
+        <div class="mk-header-nav">
+          <div class="mk-header-nav__main">
+            <MKSvgIcon
+              class="mk-header-nav__menu"
+              iconClass="xitongcaidan"
+              onClick={handleMenuClick}
+            />
+            <MKHeaderBreadcrumb />
+          </div>
+          <div class="mk-header-nav__tools">
+            <MKHeaderTools />
+            {userDropdown}
+          </div>
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,5 @@
+import HeaderTabs from "./tabs";
+
+export const MKHeaderTabs = HeaderTabs;
+
+export default MKHeaderTabs;

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

@@ -0,0 +1,72 @@
+import { Fragment, Ref, computed, defineComponent, ref, unref } from "vue";
+import { ElTabPane, ElTabs, TabPaneName } from "element-plus";
+import { MKSvgIcon } from "@maketribe/dm-ui";
+import { MSAppClient } from "../../../../../MSAppClient";
+import { Tab } from "../../../../../tabs";
+
+export default defineComponent({
+  name: "MKHeaderTabs",
+  setup() {
+    const userSession = MSAppClient.instance!.userSession!;
+    const tabs = userSession.tabs;
+    const router = userSession.router;
+
+    const currentTab = ref(tabs.getCurrentTab()) as Ref<Tab | null>;
+    const tabList = ref(tabs.getTabs()) as unknown as Ref<Tab[]>;
+
+    const allowClose = computed(() => unref(tabList).length > 1);
+
+    tabs.tabsChangeEvent.on(({ tabs }) => {
+      tabList.value = tabs;
+    });
+
+    tabs.currentTabChangeEvent.on(({ currentTab: current }) => {
+      currentTab.value = current;
+    });
+
+    const handleCloseTab = (id: TabPaneName) => {
+      const tab = tabs.findTabByID(`${id}`);
+
+      if (tab) {
+        tabs.closeTab(tab);
+      }
+    };
+
+    const handleTabItemSelect = (id: TabPaneName) => {
+      const tab = tabs.findTabByID(`${id}`);
+
+      if (tab) {
+        router.changeRoute(tab.realRoute);
+      }
+    };
+
+    return () => {
+      const tabPanes = unref(tabList).map((tab) => (
+        <ElTabPane
+          name={tab.id}
+          v-slots={{
+            label: () => (
+              <Fragment>
+                <MKSvgIcon iconClass={tab.route.iconName} />
+                {tab.title}
+              </Fragment>
+            ),
+          }}
+        />
+      ));
+
+      return (
+        <div class="mk-header-tabs">
+          <ElTabs
+            modelValue={unref(currentTab)?.id ?? ""}
+            onTabChange={handleTabItemSelect}
+            onTabRemove={handleCloseTab}
+            closable={unref(allowClose)}
+          >
+            {tabPanes}
+          </ElTabs>
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,5 @@
+import HeaderTools from "./tools";
+
+export const MKHeaderTools = HeaderTools;
+
+export default MKHeaderTools;

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

@@ -0,0 +1,15 @@
+import { MKSvgIcon } from "@maketribe/dm-ui";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "MKHeaderTools",
+  setup() {
+    return () => {
+      return (
+        <div class="mk-header-tools">
+          {/* <MKSvgIcon class="mk-header-tools__item" iconClass="Refresh" /> */}
+        </div>
+      );
+    };
+  },
+});

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

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

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

@@ -0,0 +1,29 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElTooltip } from "element-plus";
+import { MSAppClient } from "../../../../MSAppClient";
+
+export default defineComponent({
+  name: "MKLogo",
+  setup() {
+    const msAppClient = MSAppClient.instance!;
+
+    const logo = computed(() => msAppClient.logo);
+    const projectName = computed(() => msAppClient.projectName);
+
+    return () => {
+      return (
+        <div class="mk-logo">
+          <div
+            class="mk-logo__logo"
+            style={{ backgroundImage: `url(${unref(logo)})` }}
+          >
+            {unref(projectName)}
+          </div>
+          <ElTooltip content={unref(projectName)}>
+            <span>{unref(projectName)}</span>
+          </ElTooltip>
+        </div>
+      );
+    };
+  },
+});