@maketribe/ms-app 3.0.0 → 3.0.3

package/src/layouts/default/index.tsx

@@ -0,0 +1,72 @@
+import { Ref, defineComponent, ref, unref } from "vue";
+import { RouterView } from "vue-router";
+import { ElAside, ElContainer, ElHeader, ElMain } from "element-plus";
+import { MKSystemProvider } from "../../components";
+import { MKBar, MKMenu } from "./components";
+import { MenuNode } from "../../menu";
+import { MSAppClient } from "../../MSAppClient";
+
+function includeMenuNode(rootMenuNode: MenuNode, menuNode: MenuNode) {
+  let list = [rootMenuNode];
+
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i];
+
+    if (item.id === menuNode.id) {
+      return true;
+    }
+
+    list = list.concat(item.children);
+  }
+
+  return false;
+}
+
+export const MKLayoutDefault = defineComponent({
+  name: "MKLayoutDefault",
+  setup() {
+    const msAppClient = MSAppClient.instance!;
+    const userSession = msAppClient.userSession!;
+    const menu = userSession.menu;
+
+    const currentBarItem: Ref<MenuNode | null> = ref(null);
+
+    handleCurrentMenuChange();
+    menu.currentMenuChangeEvent.on(handleCurrentMenuChange);
+
+    function handleCurrentMenuChange() {
+      currentBarItem.value = menu.getCurrentMenuNode()
+        ? menu.rootMenus.find((item) =>
+            includeMenuNode(item, menu.getCurrentMenuNode()!)
+          ) ?? null
+        : null;
+    }
+
+    return () => {
+      return (
+        <MKSystemProvider>
+          <ElContainer class="mk-layout-default">
+            <ElAside>
+              <MKBar barItem={unref(currentBarItem) as MenuNode} />
+            </ElAside>
+            <ElMain>
+              <ElContainer class="mk-layout-default__body">
+                <ElHeader class="mk-layout-default__header"></ElHeader>
+                <ElMain>
+                  <ElContainer class="mk-layout-default__main">
+                    <ElAside class="mk-layout-default__menu">
+                      <MKMenu barItem={unref(currentBarItem) as MenuNode} />
+                    </ElAside>
+                    <ElMain>
+                      <RouterView />
+                    </ElMain>
+                  </ElContainer>
+                </ElMain>
+              </ElContainer>
+            </ElMain>
+          </ElContainer>
+        </MKSystemProvider>
+      );
+    };
+  },
+});

package/src/layouts/index.ts

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

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

@@ -36,19 +36,14 @@ export default defineComponent({
       },
     ];
 
-    const isCollapse = computed({
-      get: () => userSession.menu.isCollapsed,
-      set: (v) => (userSession.menu.isCollapsed = v),
-    });
-
-    const handleToggleMenu = () => {
-      isCollapse.value = !isCollapse.value;
-    };
-
     const handleCommand = (command: UserDropdownItem) => {
       command.callback();
     };
 
+    const handleMenuClick = () => {
+      userSession.menu.isVisible = true;
+    };
+
     return () => {
       const _userInfo = unref(userInfo);
 
@@ -75,18 +70,14 @@ export default defineComponent({
         </ElDropdown>
       ) : null;
 
-      const asideFolld = unref(isCollapse) ? (
-        <MKSvgIcon iconClass="Expand" />
-      ) : (
-        <MKSvgIcon iconClass="Fold" />
-      );
-
       return (
         <div class="mk-header-nav">
           <div class="mk-header-nav__main">
-            <span class="mk-header-nav__aside-fold" onClick={handleToggleMenu}>
-              {asideFolld}
-            </span>
+            <MKSvgIcon
+              class="mk-header-nav__menu"
+              iconClass="xitongcaidan"
+              onClick={handleMenuClick}
+            />
             <MKHeaderBreadcrumb />
           </div>
           <div class="mk-header-nav__tools">

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>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,112 @@
+import { Fragment, Ref, computed, defineComponent, ref, unref } from "vue";
+import { ElButton, ElMenu, ElMenuItem, ElSubMenu } from "element-plus";
+import { MKSvgIcon } from "@maketribe/dm-ui";
+import { MSAppClient } from "../../../../MSAppClient";
+import { MenuNode } from "../../../../menu";
+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/manager-system.tsx

@@ -1,22 +1,98 @@
-import { defineComponent } from "vue";
+import { computed, defineComponent, onMounted, unref } from "vue";
+import { createDisposable } from "@maketribe/utils";
 import { MKSystemProvider } from "../../components";
-import MKAside from "./components/aside";
+import MKMenu from "./components/menu";
 import MKHeader from "./components/header";
+import { MSAppClient } from "../../MSAppClient";
+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">
+          <div
+            class={[
+              "mk-manager-system",
+              `mk-manager-system__bar--${
+                unref(isVisible) ? "visible" : "hidden"
+              }`,
+            ]}
+          >
+            {mask}
             <div class="mk-manager-system__aside">
-              <MKAside />
+              <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>
       );

package/src/menu/Menu.ts

@@ -11,6 +11,8 @@ export class Menu extends Disposable {
 
   isCollapsed: boolean = false;
 
+  isVisible: boolean = true;
+
   permissionPointManager: PermissionPointManager;
 
   router: Router;
@@ -101,8 +103,6 @@ export class Menu extends Disposable {
   async setCurrentMenuNode(node: MenuNode | null) {
     this._currentMenu = node;
 
-    this.isCollapsed = false;
-
     this.currentMenuChangeEvent.emit({ currentMenu: node });
 
     return true;

package/src/page/index/404.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>404</div>
+</template>

package/src/page/index/dv/default/add.vue

@@ -11,13 +11,14 @@
 import { unref, computed, watch, Ref, reactive } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
-import { DataForm, DataModelCache } from "@maketribe/dm";
+import { DataForm } from "@maketribe/dm";
+import { DataModelDefines } from "../../../../DataModelDefines";
 import { useCurrentTab } from "../../../../composables/use-current-tab";
 
 const router = useRouter();
 
 const dataForm: Ref<DataForm | null> = computed(() => {
-  const dataForm = DataModelCache.instance.getDataForm(
+  const dataForm = DataModelDefines.instance.getDataForm(
     unref(router.currentRoute).meta.name as string
   );
 

package/src/page/index/dv/default/edit.vue

@@ -11,7 +11,8 @@
 import { unref, computed, watch, Ref, reactive } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
-import { DataForm, DataModelCache } from "@maketribe/dm";
+import { DataForm } from "@maketribe/dm";
+import { DataModelDefines } from "../../../../DataModelDefines";
 import { useCurrentTab } from "../../../../composables/use-current-tab";
 
 const router = useRouter();
@@ -19,7 +20,7 @@ const router = useRouter();
 const id = computed(() => unref(router.currentRoute).params.id as string);
 
 const dataForm: Ref<DataForm | null> = computed(() => {
-  const dataForm = DataModelCache.instance.getDataForm(
+  const dataForm = DataModelDefines.instance.getDataForm(
     unref(router.currentRoute).meta.name as string
   );
 

package/src/page/index/dv/default/index.vue

@@ -1,11 +1,13 @@
 <template>
-  <MKDataTablePage :data-table="dataTable" />
+  <MKDataTablePage :data-table="dataTable" selection />
 </template>
 <script setup lang="ts">
 import { unref, computed, reactive, watch } from "vue";
 import { useRouter } from "vue-router";
 import { Disposable } from "@maketribe/utils";
-import { DataModelCache, DataTable } from "@maketribe/dm";
+import { DataTable } from "@maketribe/dm";
+import { MKDataTablePage } from "@maketribe/dm-ui";
+import { DataModelDefines } from "../../../../DataModelDefines";
 
 const router = useRouter();
 
@@ -16,7 +18,7 @@ const props = defineProps({
 const dataTable = computed(() => {
   const dataTable =
     props.dataTable ||
-    DataModelCache.instance.getDataTable(
+    DataModelDefines.instance.getDataTable(
       unref(router.currentRoute).meta.name as string
     );
 
@@ -26,29 +28,22 @@ const dataTable = computed(() => {
 watch(
   dataTable,
   (dataTable, _, onCleanup) => {
-    if (!dataTable) {
-      return;
-    }
-
-    const disposable = new Disposable();
-
-    disposable.register(
+    if (dataTable) {
       dataTable.addRecordEvent.on(() => {
         router.push({ name: `${unref(dataTable).name}/add` });
-      })
-    );
+      });
 
-    disposable.register(
       dataTable.editRecordEvent.on(({ item }) => {
         router.push({
           name: `${unref(dataTable).name}/edit`,
           params: { id: item[unref(dataTable)?.primaryKey as string] },
         });
-      })
-    );
+      });
+    }
 
     onCleanup(() => {
-      disposable.dispose();
+      dataTable?.clearSelection();
+      dataTable?.dispose();
     });
   },
   { immediate: true }

package/src/page/index/dv/default/tree.vue

@@ -9,12 +9,13 @@
 <script setup lang="ts">
 import { computed, reactive, unref } from "vue";
 import { useRouter } from "vue-router";
-import { DataForm, DataModelCache, DataTable } from "@maketribe/dm";
+import { DataForm, DataTable } from "@maketribe/dm";
+import { DataModelDefines } from "../../../../DataModelDefines";
 
 const router = useRouter();
 
 const dataTable = computed(() => {
-  const dataTable = DataModelCache.instance.getDataTable(
+  const dataTable = DataModelDefines.instance.getDataTable(
     unref(router.currentRoute).meta.name as string
   );
 
@@ -22,7 +23,7 @@ const dataTable = computed(() => {
 });
 
 const dataForm = computed(() => {
-  const dataForm = DataModelCache.instance.getDataForm(
+  const dataForm = DataModelDefines.instance.getDataForm(
     unref(router.currentRoute).meta.name as string
   );
 

package/src/page/index/dv/ms-member/index.vue

@@ -14,14 +14,14 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from "vue";
 import { ElButton, ElDialog } from "element-plus";
-import { DataModelCache } from "@maketribe/dm";
+import { DataModelDefines } from "../../../../DataModelDefines";
 import DefaultListPage from "../default/index.vue";
 import { MemberTable } from "../../../../dataview";
 
 const isShowActiveMemberForm = ref(false);
 
 const memberTable = reactive(
-  DataModelCache.instance.getDataTable("ms-member")!
+  DataModelDefines.instance.getDataTable("ms-member")!
 ) as MemberTable;
 const activeMemberForm = computed(() => memberTable.activeMemberForm);
 

package/src/page/index/material/index.vue

@@ -11,4 +11,3 @@ const materialMan = reactive(
   new MaterialMan({ components: new MaterialComponents() })
 ) as MaterialMan;
 </script>
-<style lang="scss"></style>

package/src/page/index.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { MKManagerSystem, MKLayoutDefault } from "../layouts";
+
+defineOptions({
+  mkRoute: {
+    name: "mk-ms-main",
+    path: "/",
+  },
+});
+</script>
+
+<template>
+  <MKLayoutDefault>
+    <RouterView />
+  </MKLayoutDefault>
+</template>

package/src/router-middleware/auth.ts

@@ -1,16 +1,15 @@
-import { MSAppClient } from "../MSAppClient";
+import type { MSAppClient } from "../MSAppClient";
 import { isSameRoute } from "@maketribe/utils";
 import { RouteLocationNormalized, RouteLocationRaw } from "vue-router";
 
 export const authBeforeEach = async (
+  msAppClient: MSAppClient,
   to: RouteLocationNormalized,
   from: RouteLocationNormalized
 ): Promise<RouteLocationRaw | void> => {
   if (to.meta.isAuthorization === false) {
     return;
   }
-  
-  const msAppClient = MSAppClient.instance!;
 
   let userSession = msAppClient.userSession;
 
@@ -37,14 +36,18 @@ export const authBeforeEach = async (
   const route = router.getRouteByName(to.name as string);
 
   if (!route) {
-    // 前往第一个菜单
-    const menuNode = userSession.menu.getFirstLeafMenuNode();
+    // return { name: "notFound" };
+    // // 前往第一个菜单
+    // const menuNode = userSession.menu.getFirstLeafMenuNode();
 
-    if (!menuNode || !menuNode.route) {
-      return { name: "login" };
-    }
+    // if (!menuNode || !menuNode.route) {
+    //   return { name: "login" };
+    // }
 
-    return { name: menuNode.route.name };
+    // // return { name: menuNode.route.name };
+    // return to;
+
+    return;
   }
 
   const matched = to.matched[to.matched.length - 1];