@maketribe/ms-app 3.0.5 → 3.0.7

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

@@ -1,91 +0,0 @@
-import { ElDropdown, ElDropdownItem } from "element-plus";
-import { MKSvgIcon } from "../../../../../components";
-import { Fragment, computed, defineComponent, unref } from "vue";
-import { MKHeaderTools } from "../tools";
-import { MKHeaderBreadcrumb } from "../breadcrumb";
-import { useRouter } from "vue-router";
-import { MSAppClient } from "../../../../../core";
-
-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

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

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

@@ -1,71 +0,0 @@
-import { Fragment, Ref, computed, defineComponent, ref, unref } from "vue";
-import { ElTabPane, ElTabs, TabPaneName } from "element-plus";
-import { MKSvgIcon } from "../../../../../components";
-import { MSAppClient, Tab } from "../../../../../core";
-
-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

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

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

@@ -1,15 +0,0 @@
-import { MKSvgIcon } from "../../../../../components";
-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

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

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

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

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

@@ -1,111 +0,0 @@
-import { Fragment, Ref, computed, defineComponent, ref, unref } from "vue";
-import { ElButton, ElMenu, ElMenuItem, ElSubMenu } from "element-plus";
-import { MKSvgIcon } from "../../../../components";
-import { MenuNode, MSAppClient } from "../../../../core";
-import MKLogo from "./logo";
-
-const MKMenuItem = defineComponent({
-  name: "MKMenuItem",
-  props: {
-    menuItem: { type: MenuNode, required: true },
-  },
-  setup(props) {
-    return () => {
-      const menuItem = props.menuItem;
-
-      if (menuItem.children.length) {
-        const childrenMenuItems = menuItem.children.map((childMenuItem) => (
-          <MKMenuItem menuItem={childMenuItem} key={childMenuItem.id} />
-        ));
-
-        return (
-          <ElSubMenu
-            index={menuItem.id}
-            popperClass="mk-menu__popper"
-            v-slots={{
-              title: () => (
-                <Fragment>
-                  <MKSvgIcon iconClass={menuItem.iconName} />
-                  <span>{menuItem.title}</span>
-                </Fragment>
-              ),
-            }}
-          >
-            {childrenMenuItems}
-          </ElSubMenu>
-        );
-      }
-
-      return (
-        <ElMenuItem index={menuItem.id}>
-          <MKSvgIcon iconClass={menuItem.iconName} />
-          <span>{menuItem.title}</span>
-        </ElMenuItem>
-      );
-    };
-  },
-});
-
-export default defineComponent({
-  name: "MKMenu",
-  setup() {
-    const userSession = MSAppClient.instance!.userSession!;
-
-    const menu = userSession.menu;
-    const router = userSession.router;
-
-    const currentMenuID: Ref<string> = ref(menu.getCurrentMenuNode()?.id ?? "");
-
-    const isCollapsed = computed(() => menu.isCollapsed);
-
-    menu.currentMenuChangeEvent.on(({ currentMenu }) => {
-      if (currentMenu) {
-        currentMenuID.value = currentMenu.id;
-      }
-    });
-
-    const handleSelect = (id: string) => {
-      const menuNode = menu.findMenuNodeByID(id);
-
-      if (menuNode?.route) {
-        router.changeRoute(menuNode.route);
-      }
-    };
-
-    const handleCollapse = () => {
-      menu.isCollapsed = !menu.isCollapsed;
-    };
-
-    return () => {
-      const menuItems = menu.rootMenus.map((menuItem) => (
-        <MKMenuItem menuItem={menuItem} key={menuItem.id} />
-      ));
-
-      const asideFold = unref(isCollapsed) ? (
-        <MKSvgIcon iconClass="Expand" />
-      ) : (
-        <MKSvgIcon iconClass="Fold" />
-      );
-
-      return (
-        <div class={["mk-menu", unref(isCollapsed) ? "mk-menu--collapse" : ""]}>
-          <MKLogo />
-          <ElMenu
-            collapse={unref(isCollapsed)}
-            collapseTransition={false}
-            defaultActive={unref(currentMenuID)}
-            onSelect={handleSelect}
-            uniqueOpened
-          >
-            {menuItems}
-          </ElMenu>
-          <div class="mk-menu__footer">
-            <ElButton text onClick={handleCollapse}>
-              {asideFold}
-            </ElButton>
-          </div>
-        </div>
-      );
-    };
-  },
-});

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

@@ -1,6 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import ManagerSystem from "./manager-system";
-
-export const MKManagerSystem = withInstall(ManagerSystem);
-
-export default MKManagerSystem;

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

@@ -1,101 +0,0 @@
-import { computed, defineComponent, onMounted, unref } from "vue";
-import { createDisposable } from "@maketribe/utils";
-import { MKSystemProvider } from "../../components";
-import MKMenu from "./components/menu";
-import MKHeader from "./components/header";
-import { MSAppClient } from "../../core";
-import MKLock from "../common/lock";
-
-export default defineComponent({
-  name: "MKManagerSystem",
-  setup(props, { slots }) {
-    const userSession = MSAppClient.instance!.userSession!;
-
-    const isVisible = computed(() => userSession.menu.isVisible);
-
-    onMounted(() => {
-      let oldInnerWidth: number = window.innerWidth;
-
-      const handleResize = () => {
-        const innerWidth = window.innerWidth;
-
-        if (oldInnerWidth > 1000 && innerWidth <= 1000) {
-          userSession.menu.isVisible = false;
-          userSession.menu.isCollapsed = false;
-        } else if (oldInnerWidth <= 1000 && innerWidth > 1000) {
-          userSession.menu.isVisible = true;
-
-          if (!userSession.menu.isCollapsed) {
-            userSession.menu.isCollapsed = true;
-          }
-        } else if (oldInnerWidth > 1200 && innerWidth <= 1200) {
-          if (!userSession.menu.isCollapsed) {
-            userSession.menu.isCollapsed = true;
-          }
-        } else if (oldInnerWidth <= 1200 && innerWidth > 1200) {
-          if (userSession.menu.isCollapsed) {
-            userSession.menu.isCollapsed = false;
-          }
-        }
-
-        oldInnerWidth = innerWidth;
-      };
-
-      if (oldInnerWidth <= 1000) {
-        userSession.menu.isVisible = false;
-        userSession.menu.isCollapsed = false;
-      } else if (oldInnerWidth <= 1200) {
-        userSession.menu.isVisible = true;
-        userSession.menu.isCollapsed = true;
-      } else {
-        userSession.menu.isVisible = true;
-        userSession.menu.isCollapsed = false;
-      }
-
-      window.addEventListener("resize", handleResize);
-
-      userSession.register(
-        createDisposable(() => {
-          window.removeEventListener("resize", handleResize);
-        })
-      );
-    });
-
-    const handleMaskClick = () => {
-      userSession.menu.isVisible = false;
-    };
-
-    return () => {
-      const mask = unref(isVisible) ? (
-        <div
-          class="mk-manager-system__mask mk-overlay"
-          onClick={handleMaskClick}
-        />
-      ) : null;
-
-      return (
-        <MKSystemProvider>
-          <div
-            class={[
-              "mk-manager-system",
-              `mk-manager-system__bar--${
-                unref(isVisible) ? "visible" : "hidden"
-              }`,
-            ]}
-          >
-            {mask}
-            <div class="mk-manager-system__aside">
-              <MKMenu />
-            </div>
-            <div class="mk-manager-system__main">
-              <MKHeader class="mk-manager-system__header" />
-              <div class="mk-manager-system__content">{slots.default?.()}</div>
-            </div>
-
-            <MKLock />
-          </div>
-        </MKSystemProvider>
-      );
-    };
-  },
-});