@maketribe/ms-app 3.0.6 → 3.0.8

package/src/components/menu-permission-table/menu-permission-table.vue

@@ -1,147 +0,0 @@
-<script setup lang="ts">
-import { Ref, reactive, ref, unref } from "vue";
-import { ElMessage, ElCard } from "element-plus";
-import { MenuTree, MenuForm, MenuNodeItem } from "../../dataview";
-import { MKDataTree, MKDataTablePage, MKDataFormPage } from "../data-model";
-
-const treeEl: Ref<any> = ref(null);
-
-const menuTree = reactive(new MenuTree()) as MenuTree;
-const menuForm = reactive(new MenuForm()) as MenuForm;
-
-const isShowPermissionPointDefineFormDialog = ref(false);
-const isShowMenuFormDialog = ref(false);
-
-const handlePermissionClick = (data: MenuNodeItem) => {
-  unref(menuTree).toPermissionPointDefine(data);
-};
-
-const handleAddRecord = () => {
-  isShowPermissionPointDefineFormDialog.value = true;
-};
-
-const handleEditRecord = () => {
-  isShowPermissionPointDefineFormDialog.value = true;
-};
-
-const handleSubmitted = () => {
-  isShowPermissionPointDefineFormDialog.value = false;
-};
-
-const handleCancl = () => {
-  isShowPermissionPointDefineFormDialog.value = false;
-};
-
-const handleMenuEditRecord = ({ item }: { item: MenuNodeItem }) => {
-  menuForm.editRecord(item);
-  isShowMenuFormDialog.value = true;
-};
-
-const handleMenuAddRecord = () => {
-  menuForm.addRecord();
-  isShowMenuFormDialog.value = true;
-};
-
-const handleMenuAddChildrenRecord = async (data: any) => {
-  menuForm.addRecord({
-    pid: data.id,
-    id: "",
-    title: "",
-    iconName: "",
-    routeId: "",
-  });
-  isShowMenuFormDialog.value = true;
-};
-
-const handleMenuSubmitted = (result: any) => {
-  if (result.data.code != 200) {
-    ElMessage.error(result.data?.msg || "添加失败");
-    return;
-  }
-  isShowMenuFormDialog.value = false;
-};
-
-const handleMenuCancel = () => {
-  isShowMenuFormDialog.value = false;
-};
-</script>
-
-<template>
-  <div class="mk-menu-permission">
-    <ElCard class="mk-menu-permission__menu">
-      <template #header>
-        <div class="header-box">
-          <div class="header-box-main">菜单</div>
-          <div class="header-box-tools">
-            <ElButton @click="handleMenuAddRecord" type="primary"
-              >添加</ElButton
-            >
-          </div>
-        </div>
-      </template>
-      <ElScrollbar height="100%">
-        <MKDataTree
-          ref="treeEl"
-          :data-table="menuTree"
-          :data-form="menuForm"
-          style="padding: 0 10px"
-          @edit-record="handleMenuEditRecord"
-        >
-          <template #node-tools-prefix="{ data }">
-            <ElButton
-              v-if="!data.children.length"
-              link
-              @click="handlePermissionClick(data)"
-            >
-              权限
-            </ElButton>
-            <ElButton
-              link
-              type="primary"
-              @click="handleMenuAddChildrenRecord(data)"
-            >
-              新增
-            </ElButton>
-          </template>
-        </MKDataTree>
-      </ElScrollbar>
-    </ElCard>
-    <div class="mk-menu-permission__permission">
-      <MKDataTablePage
-        v-if="menuTree.currentMenuId"
-        class="mk-menu-permission__permission-table"
-        :data-table="menuTree.permissionPointDefineTable"
-        @add-record="handleAddRecord"
-        @edit-record="handleEditRecord"
-      />
-    </div>
-  </div>
-
-  <ElDialog
-    v-model="isShowMenuFormDialog"
-    width="70%"
-    appendToBody
-    class="dataFormPageDialog"
-  >
-    <MKDataFormPage
-      v-if="isShowMenuFormDialog"
-      :data-form="menuForm"
-      @cancel="handleMenuCancel"
-      @submitted="handleMenuSubmitted"
-    />
-  </ElDialog>
-
-  <ElDialog
-    v-model="isShowPermissionPointDefineFormDialog"
-    width="70%"
-    appendToBody
-    class="dataFormPageDialog"
-  >
-    <MKDataFormPage
-      v-if="isShowPermissionPointDefineFormDialog"
-      :data-form="menuTree.permissionPointDefineForm"
-      @cancel="handleCancl"
-      @submitted="handleSubmitted"
-    />
-  </ElDialog>
-</template>

package/src/layouts/common/lock/lock.tsx

@@ -1,92 +0,0 @@
-import { defineComponent, ref, unref } from "vue";
-import { useRouter } from "vue-router";
-import { ElButton, ElInput } from "element-plus";
-import { Messager } from "@maketribe/dm";
-import { MSAppClient } from "../../../core";
-import { MKVerifyDialog } from "../../../components";
-
-export default defineComponent({
-  name: "MKLock",
-  setup() {
-    const msAppClient = MSAppClient.instance!;
-
-    const vueRouter = useRouter();
-
-    const locking = ref(msAppClient.userSession!.locking ?? false);
-
-    const password = ref("");
-    const isVisibleVerify = ref(false);
-
-    const handleToLogin = () => {
-      vueRouter.push({ name: "login" });
-    };
-
-    const handleUnlock = () => {
-      isVisibleVerify.value = true;
-    };
-
-    const handleVerifySuccess = async (code: string) => {
-      const userSession = msAppClient.userSession!;
-
-      try {
-        const response = await userSession.unlock(unref(password), code);
-
-        if (response.data.code !== 200) {
-          Messager.instance.error({ message: response.data.msg });
-          return;
-        }
-      } catch (e) {
-        console.error(e);
-
-        Messager.instance.error({ message: "网络异常" });
-      } finally {
-        isVisibleVerify.value = false;
-      }
-    };
-
-    msAppClient.userSession!.lockingChangeEvent.on(({ locking: isLocking }) => {
-      locking.value = isLocking;
-    });
-
-    return () => {
-      if (!unref(locking)) {
-        return null;
-      }
-
-      const verifyDialogVNode = unref(isVisibleVerify) ? (
-        <MKVerifyDialog
-          scene="Login"
-          visible={unref(isVisibleVerify)}
-          onUpdate:visible={(v) => (isVisibleVerify.value = v as boolean)}
-          onVerifySuccessful={handleVerifySuccess}
-        />
-      ) : null;
-
-      return (
-        <div class="mk-lock">
-          <div class="mk-lock__overlay mk-overlay"></div>
-
-          <div class="mk-lock-entry">
-            <div class="mk-lock-entry__user-info"></div>
-            <ElInput
-              type="password"
-              placeholder="请输入用户密码"
-              modelValue={unref(password)}
-              onUpdate:modelValue={(v: string) => (password.value = v)}
-            />
-            <div class="mk-lock-entry__footer">
-              <ElButton type="primary" link onClick={handleToLogin}>
-                返回登陆
-              </ElButton>
-              <ElButton type="primary" link onClick={handleUnlock}>
-                进入系统
-              </ElButton>
-            </div>
-          </div>
-
-          {verifyDialogVNode}
-        </div>
-      );
-    };
-  },
-});

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

@@ -1,82 +0,0 @@
-import { computed, defineComponent, unref } from "vue";
-import { MKSvgIcon } from "../../../../components";
-import { MSAppClient, MenuNode } from "../../../../core";
-import MKBarSettings from "./settings";
-
-export const MKBar = defineComponent({
-  name: "MKBar",
-  props: {
-    barItem: {
-      type: MenuNode,
-    },
-  },
-  setup(props) {
-    const msAppClient = MSAppClient.instance!;
-    const userSession = msAppClient.userSession!;
-    const menu = userSession.menu;
-    const router = userSession.router;
-
-    const currentBarItem = computed(() => props.barItem);
-
-    const handleBarItemClick = (barItem: MenuNode) => {
-      let target: MenuNode | null = barItem;
-
-      if (barItem.children.length) {
-        target = menu.getFirstLeafMenuNode(barItem.children);
-      }
-
-      if (!target) {
-        return;
-      }
-
-      if (target?.route) {
-        router.changeRoute({ name: target.route.name });
-      }
-    };
-
-    return () => {
-      const barItems = menu.rootMenus
-        .filter((rootMenu) => rootMenu.type !== "3")
-        .map((rootMenu) => (
-          <div
-            class={[
-              "mk-bar__item",
-              rootMenu.children.length ? "has-children" : "",
-              unref(currentBarItem)?.id === rootMenu.id ? "is-active" : "",
-            ]}
-            onClick={() => handleBarItemClick(rootMenu)}
-          >
-            <div class="mk-bar__item-button">
-              <MKSvgIcon iconClass={rootMenu.iconName} />
-            </div>
-            <div class="mk-bar__item-title">{rootMenu.title} </div>
-          </div>
-        ));
-
-      const systemSettingNode = menu.rootMenus.find(
-        (rootMenu) => rootMenu.type === "3"
-      );
-
-      const footer = systemSettingNode?.children.length ? (
-        <div class="mk-bar__footer">
-          <MKBarSettings menuItems={systemSettingNode.children} />
-        </div>
-      ) : null;
-
-      return (
-        <div class="mk-bar">
-          <div class="mk-bar__logo">
-            <div
-              class="mk-logo"
-              style={{ backgroundImage: `url(${msAppClient.logo})` }}
-            />
-          </div>
-
-          <div class="mk-bar__items">{barItems}</div>
-
-          {footer}
-        </div>
-      );
-    };
-  },
-});

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/default/components/menu/index.tsx

@@ -1,56 +0,0 @@
-import { computed, defineComponent, ref, unref } from "vue";
-import { ElMenu } from "element-plus";
-import { MenuNode, MSAppClient } from "../../../../core";
-import MKAsideMenuItem from "./menu-item";
-
-export const MKMenu = defineComponent({
-  name: "MKMenu",
-  props: {
-    barItem: {
-      type: MenuNode,
-    },
-  },
-  setup(props) {
-    const msAppClient = MSAppClient.instance!;
-    const userSession = msAppClient.userSession!;
-    const menu = userSession.menu;
-    const router = userSession.router;
-
-    const currentMenuNode = ref(menu.getCurrentMenuNode());
-
-    const barItem = computed(() => props.barItem);
-
-    const handleSelect = async (id: string) => {
-      const item = menu.findMenuNodeByID(id);
-
-      if (item?.route) {
-        router.changeRoute({ name: item.route.name });
-      }
-    };
-
-    menu.currentMenuChangeEvent.on(({ currentMenu }) => {
-      currentMenuNode.value = currentMenu;
-    });
-
-    return () => {
-      if (!unref(barItem)?.children.length) {
-        return null;
-      }
-
-      const menuItems = unref(barItem)!.children.map((menu) => (
-        <MKAsideMenuItem class="mk-menu-item" node={menu} key={menu.id} />
-      ));
-
-      return (
-        <div class="mk-menu">
-          <ElMenu
-            defaultActive={unref(currentMenuNode)?.id ?? ""}
-            onSelect={handleSelect}
-          >
-            {menuItems}
-          </ElMenu>
-        </div>
-      );
-    };
-  },
-});

package/src/layouts/default/components/menu/menu-item.tsx

@@ -1,63 +0,0 @@
-import { Fragment, computed, defineComponent } from "vue";
-import { ElMenuItem, ElSubMenu } from "element-plus";
-import { MKSvgIcon } from "../../../../components";
-import { MenuNode } from "../../../../core";
-
-const MKAsideMenuItem = defineComponent({
-  name: "MKMenuItem",
-  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/default/index.tsx

@@ -1,74 +0,0 @@
-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 "../../core";
-import { MSAppClient } from "../../core";
-
-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
-            .filter((rootMenu) => rootMenu.type !== "3")
-            .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/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>
-      );
-    };
-  },
-});