@maketribe/ms-app 3.0.6 → 3.0.7

package/dist/style/src/layouts/manager-system/menu.scss

@@ -1,229 +0,0 @@
-@mixin menuVars {
-  --el-menu-bg-color: #001428;
-  --el-menu-text-color: rgb(192, 196, 204);
-  --el-menu-hover-bg-color: rgba(64, 158, 255, 0.06);
-  --el-menu-active-color: white;
-  --el-menu-item-height: 40px;
-  --el-menu-sub-item-height: 40px;
-}
-
-@mixin commonMenu {
-  user-select: none;
-
-  .el-menu-item {
-    & + .el-menu-item {
-      margin-top: 4px;
-    }
-
-    & + .el-sub-menu {
-      .el-sub-menu__title {
-        margin-top: 4px;
-      }
-    }
-  }
-
-  .el-sub-menu {
-    & + .el-menu-item {
-      margin-top: 4px;
-    }
-
-    & + .el-sub-menu {
-      .el-sub-menu__title {
-        margin-top: 4px;
-      }
-    }
-
-    &.is-active {
-      > .el-sub-menu__title {
-        color: var(--el-menu-active-color);
-        background-color: var(--el-me nu-hover-bg-color);
-      }
-    }
-  }
-}
-
-.mk-menu {
-  @include menuVars();
-
-  display: flex;
-  flex-direction: column;
-  width: 200px;
-  height: 100%;
-  background-color: var(--el-menu-bg-color);
-
-  @include commonMenu();
-
-  @at-root {
-    .mk-menu__popper {
-      @include menuVars();
-      @include commonMenu();
-
-      .mk-svg-icon {
-        margin-right: 8px;
-      }
-
-      .el-menu-item {
-        &.is-active {
-          background-color: var(--el-menu-hover-bg-color);
-        }
-      }
-    }
-  }
-
-  .el-menu {
-    flex: 1;
-    border: none;
-
-    .mk-svg-icon {
-      margin-right: 8px;
-    }
-
-    .el-menu-item {
-      &.is-active {
-        background-color: var(--el-menu-hover-bg-color);
-      }
-    }
-
-    .el-sub-menu.is-opened {
-      .el-sub-menu__title {
-        margin-bottom: 4px;
-      }
-    }
-
-    > .el-sub-menu,
-    > .el-menu-item {
-      position: relative;
-    }
-  }
-
-  > .el-menu {
-    > .is-active {
-      &::before {
-        content: "";
-        position: absolute;
-        width: 2px;
-        left: 0;
-        top: 50%;
-        height: 0%;
-        transform: translate(0, -50%);
-        background-color: var(--el-color-primary);
-      }
-    }
-  }
-
-  &__footer {
-    --el-fill-color: var(--el-menu-hover-bg-color);
-    --el-fill-color-light: var(--el-menu-hover-bg-color);
-
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    border-top: 1px solid rgb(30, 50, 60);
-    padding: 0 20px;
-    height: 56px;
-
-    .el-button {
-      color: var(--el-menu-text-color);
-      width: 32px;
-      font-size: 16px;
-    }
-  }
-
-  &--collapse {
-    width: 54px;
-
-    .el-menu {
-      &--collapse {
-        width: 54px;
-      }
-
-      .mk-svg-icon {
-        margin-right: 0;
-      }
-
-      .el-menu-item,
-      .el-sub-menu__title {
-        padding: 0;
-        justify-content: center;
-      }
-
-      > .is-active {
-        &::before {
-          height: 100%;
-        }
-      }
-    }
-
-    .mk-logo {
-      padding: 0;
-      justify-content: center;
-
-      &__logo {
-        margin-right: 0;
-      }
-
-      span {
-        display: none;
-      }
-    }
-
-    .mk-menu__footer {
-      padding: 0;
-      justify-content: center;
-    }
-  }
-
-  @media screen and (max-width: 1000px) {
-    .mk-menu__footer {
-      display: none;
-    }
-  }
-}
-
-// .mk-menu {
-//   border: none;
-
-//   --el-menu-item-height: 50px;
-//   --el-menu-level-padding: 17px;
-//   --el-menu-icon-width: 14px;
-
-//   .el-sub-menu {
-//     & + .el-menu-item,
-//     & + .el-sub-menu,
-//     .el-menu-item:first-child,
-//     .el-sub-menu:first-child {
-//       margin-top: 5px;
-//     }
-
-//     &__title {
-//       &:hover {
-//         color: var(--el-color-primary);
-//       }
-//     }
-//   }
-
-//   .el-menu-item {
-//     border-radius: 5px;
-
-//     & + .el-menu-item,
-//     & + .el-sub-menu {
-//       margin-top: 5px;
-//     }
-
-//     &.is-active {
-//       background-color: var(--el-color-primary-light-9);
-//     }
-
-//     &:hover {
-//       color: var(--el-color-primary);
-//     }
-//   }
-
-//   &-item {
-//     & &__icon {
-//       margin-right: 3px;
-//       width: 1em;
-//       font-size: inherit;
-//     }
-//   }
-// }

package/src/layouts/default/components/bar/settings.tsx

@@ -1,63 +0,0 @@
-import { Fragment, defineComponent, ref, unref } from "vue";
-import { ElPopover, progressProps } from "element-plus";
-import { MKSvgIcon } from "../../../../components";
-import { MSAppClient, MenuNode } from "../../../../core";
-
-export default defineComponent({
-  name: "MKBarSettings",
-  props: {
-    menuItems: {
-      type: Array<MenuNode>,
-      required: true,
-    },
-  },
-  setup(props, { emit }) {
-    const isVisible = ref(false);
-
-    const userSession = MSAppClient.instance!.userSession!;
-    const menu = userSession.menu;
-    const router = userSession.router;
-
-    const handleItemClick = (menuNode: MenuNode) => {
-      isVisible.value = false;
-
-      const item = menu.findMenuNodeByID(menuNode.id);
-
-      if (item?.route) {
-        router.changeRoute({ name: item.route.name });
-      }
-    };
-
-    return () => {
-      return (
-        <ElPopover
-          visible={unref(isVisible)}
-          onUpdate:visible={(visible: boolean) => (isVisible.value = visible)}
-          trigger="click"
-          placement="right"
-          v-slots={{
-            reference: () => (
-              <MKSvgIcon class="mk-bar-settings__icon" iconClass="Setting" />
-            ),
-            default: () => {
-              const children = props.menuItems.map((menuItem) => (
-                <div
-                  class="mk-bar-settings__item"
-                  onClick={() => handleItemClick(menuItem)}
-                >
-                  <MKSvgIcon
-                    class="mk-bar-settings__item-icon"
-                    iconClass={menuItem.iconName}
-                  />
-                  {menuItem.title}
-                </div>
-              ));
-
-              return <Fragment>{children}</Fragment>;
-            },
-          }}
-        />
-      );
-    };
-  },
-});

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

@@ -1,44 +0,0 @@
-import { Ref, computed, defineComponent, ref, unref } from "vue";
-import MKAsideBar from "./bar";
-import MKAsidePanel from "./panel";
-import { MenuNode, MSAppClient } from "../../../../core";
-
-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

@@ -1,78 +0,0 @@
-import { defineComponent } from "vue";
-import { ElScrollbar } from "element-plus";
-import { MenuNode, MSAppClient } from "../../../../../core";
-import { MKSvgIcon } from "../../../../../components";
-
-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

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

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

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

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

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

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

@@ -1,63 +0,0 @@
-import { Fragment, defineComponent } from "vue";
-import { ElMenuItem, ElSubMenu } from "element-plus";
-import { MenuNode } from "../../../../../core";
-import { MKSvgIcon } from "../../../../../components";
-
-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

@@ -1,50 +0,0 @@
-import { defineComponent, ref, unref } from "vue";
-import { ElMenu } from "element-plus";
-import { MenuNode, MSAppClient } from "../../../../../core";
-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

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

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

@@ -1,56 +0,0 @@
-import { computed, defineComponent, unref } from "vue";
-import { ElDivider, ElScrollbar } from "element-plus";
-import { MenuNode, MSAppClient } from "../../../../../core";
-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

@@ -1,46 +0,0 @@
-import { Ref, computed, defineComponent, ref, unref } from "vue";
-import { ElBreadcrumb, ElBreadcrumbItem } from "element-plus";
-import { MKSvgIcon } from "../../../../../components";
-import { MenuNode, MSAppClient } from "../../../../../core";
-
-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

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

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

@@ -1,17 +0,0 @@
-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

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

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

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