@maketribe/ms-app 3.0.0

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

@@ -0,0 +1,100 @@
+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 isCollapse = computed({
+      get: () => userSession.menu.isCollapsed,
+      set: (v) => (userSession.menu.isCollapsed = v),
+    });
+
+    const handleToggleMenu = () => {
+      isCollapse.value = !isCollapse.value;
+    };
+
+    const handleCommand = (command: UserDropdownItem) => {
+      command.callback();
+    };
+
+    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;
+
+      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>
+            <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/index.ts

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

@@ -0,0 +1,25 @@
+import { defineComponent } from "vue";
+import { MKSystemProvider } from "../../components";
+import MKAside from "./components/aside";
+import MKHeader from "./components/header";
+
+export default defineComponent({
+  name: "MKManagerSystem",
+  setup(props, { slots }) {
+    return () => {
+      return (
+        <MKSystemProvider>
+          <div class="mk-manager-system">
+            <div class="mk-manager-system__aside">
+              <MKAside />
+            </div>
+            <div class="mk-manager-system__main">
+              <MKHeader class="mk-manager-system__header" />
+              <div class="mk-manager-system__content">{slots.default?.()}</div>
+            </div>
+          </div>
+        </MKSystemProvider>
+      );
+    };
+  },
+});

package/src/menu/Menu.ts

@@ -0,0 +1,142 @@
+import { Disposable, Event } from "@maketribe/utils";
+import { PermissionPointManager } from "../PermissionPointManager";
+import { Router } from "../Router";
+import { MenuResult } from "../dataview";
+import { MenuNode } from "./MenuNode";
+
+export class Menu extends Disposable {
+  rootMenus: MenuNode[] = [];
+
+  _currentMenu: MenuNode | null = null;
+
+  isCollapsed: boolean = false;
+
+  permissionPointManager: PermissionPointManager;
+
+  router: Router;
+
+  currentMenuChangeEvent: Event<{ currentMenu: MenuNode | null }> =
+    this.register(new Event());
+
+  constructor(permissionPointManager: PermissionPointManager, router: Router) {
+    super();
+    this.permissionPointManager = permissionPointManager;
+    this.router = router;
+  }
+
+  setMenus(menus: MenuResult[]) {
+    const menuNodes = menus
+      .sort((menu1, menu2) => {
+        const sort1 = parseInt(menu1.sort) || 0;
+        const sort2 = parseInt(menu2.sort) || 0;
+
+        return sort2 - sort1;
+      })
+      .map((menuInfo) => {
+        const route = this.router.getRouteByID(menuInfo.routeId);
+
+        const permissionPoints =
+          this.permissionPointManager.getPermissionPointsByMenuID(menuInfo.id);
+
+        return new MenuNode({
+          id: menuInfo.id,
+          route,
+          iconName: menuInfo.iconName || "",
+          title: menuInfo.title || "",
+          permissionPoints,
+          children: [],
+        });
+      });
+
+    const rootMenuNodes: MenuNode[] = [];
+
+    for (let i = 0, len = menuNodes.length; i < len; i++) {
+      const menuNodeInfo = menus[i];
+      const menuNode = menuNodes[i];
+
+      menuNode.iconName = menuNode.iconName || "default-menu";
+
+      if (!menuNodeInfo.pid) {
+        rootMenuNodes.push(menuNode);
+      }
+
+      for (const route of this.router.getRoutesByMenuID(menuNode.id)) {
+        route.iconName = route.iconName || menuNode.iconName;
+      }
+
+      for (let j = 0; j < len; j++) {
+        const menuNodeInfoInner = menus[j];
+        const menuNodeInner = menuNodes[j];
+
+        if (menuNodeInfoInner.pid === menuNodeInfo.id) {
+          menuNode.children.push(menuNodeInner);
+          menuNodeInner.parent = menuNode;
+        }
+      }
+    }
+
+    this.rootMenus = rootMenuNodes;
+  }
+
+  findMenuNodeByID(id: MenuNode["id"]): MenuNode | null {
+    if (!id) {
+      return null;
+    }
+
+    let list = this.rootMenus.slice();
+
+    for (let i = 0; i < list.length; i++) {
+      const node = list[i];
+
+      if (node.id === id) {
+        return node;
+      }
+
+      list = list.concat(node.children);
+    }
+
+    return null;
+  }
+
+  async setCurrentMenuNode(node: MenuNode | null) {
+    this._currentMenu = node;
+
+    this.isCollapsed = false;
+
+    this.currentMenuChangeEvent.emit({ currentMenu: node });
+
+    return true;
+  }
+
+  getCurrentMenuNode() {
+    return this._currentMenu;
+  }
+
+  getFirstLeafMenuNode(menus: MenuNode[] = this.rootMenus) {
+    function _getFirstLeafMenuNode(menus: MenuNode[]): MenuNode | null {
+      if (!menus.length) {
+        return null;
+      }
+
+      return _getFirstLeafMenuNode(menus[0].children) || menus[0];
+    }
+
+    return _getFirstLeafMenuNode(menus);
+  }
+
+  getMenuNodeByID(id: string): MenuNode | null {
+    let nodes = this.rootMenus.slice();
+
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+
+      if (node.id === id) {
+        return node;
+      }
+
+      nodes = nodes.concat(node.children);
+    }
+
+    return null;
+  }
+}

package/src/menu/MenuNode.ts

@@ -0,0 +1,49 @@
+import { PermissionPoint } from "../PermissionPointManager";
+import { Route } from "../dataview";
+
+interface MenuNodeOptions {
+  id: string;
+  route?: Route | null;
+  iconName: string;
+  title: string;
+  permissionPoints: PermissionPoint[];
+  children: MenuNode[];
+  parent?: MenuNode | null;
+}
+
+export class MenuNode {
+  id: string;
+
+  iconName: string;
+  title: string;
+  permissionPoints: PermissionPoint[];
+  route: Route | null;
+  children: MenuNode[];
+  parent: MenuNode | null;
+
+  constructor(options: MenuNodeOptions) {
+    const { id, children, route, iconName, title, permissionPoints } = options;
+
+    this.id = id;
+    this.route = route ?? null;
+    this.iconName = iconName;
+    this.title = title;
+    this.children = children;
+    this.parent = options.parent ?? null;
+    this.permissionPoints = permissionPoints;
+  }
+
+  getMenuNodePath(): MenuNode[] {
+    const path: MenuNode[] = [];
+
+    let menuNode: MenuNode | null = this;
+
+    while (menuNode) {
+      path.unshift(menuNode);
+
+      menuNode = menuNode.parent;
+    }
+
+    return path;
+  }
+}

package/src/menu/index.ts

@@ -0,0 +1,2 @@
+export * from "./Menu";
+export * from "./MenuNode";

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

@@ -0,0 +1,49 @@
+<template>
+  <MKDataFormPage
+    :data-form="dataForm"
+    @submitted="handleCancel"
+    @cancel="handleCancel"
+    @error="handleError"
+  />
+</template>
+
+<script setup lang="ts">
+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 { useCurrentTab } from "../../../../composables/use-current-tab";
+
+const router = useRouter();
+
+const dataForm: Ref<DataForm | null> = computed(() => {
+  const dataForm = DataModelCache.instance.getDataForm(
+    unref(router.currentRoute).meta.name as string
+  );
+
+  return dataForm ? (reactive(dataForm) as DataForm) : null;
+});
+
+const currentTab = useCurrentTab();
+
+const handleError = (response: any) => {
+  ElMessage.error({ message: response.data.msg || "网络异常" });
+};
+
+const handleCancel = async () => {
+  await router.push({ name: `${unref(router.currentRoute).meta.name}/list` });
+  currentTab!.close();
+};
+
+watch(
+  dataForm,
+  (dataForm) => {
+    if (!dataForm) {
+      return;
+    }
+
+    unref(dataForm)?.addRecord();
+  },
+  { immediate: true }
+);
+</script>

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

@@ -0,0 +1,55 @@
+<template>
+  <MKDataFormPage
+    :data-form="dataForm"
+    @submitted="handleCancel"
+    @cancel="handleCancel"
+    @error="handleError"
+  />
+</template>
+
+<script setup lang="ts">
+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 { useCurrentTab } from "../../../../composables/use-current-tab";
+
+const router = useRouter();
+
+const id = computed(() => unref(router.currentRoute).params.id as string);
+
+const dataForm: Ref<DataForm | null> = computed(() => {
+  const dataForm = DataModelCache.instance.getDataForm(
+    unref(router.currentRoute).meta.name as string
+  );
+
+  return dataForm ? (reactive(dataForm) as DataForm) : null;
+});
+
+const currentTab = useCurrentTab();
+
+const handleError = (response: any) => {
+  ElMessage.error({ message: response.data.msg || "网络异常" });
+};
+
+const handleCancel = async () => {
+  await router.push({ name: `${unref(router.currentRoute).meta.name}/list` });
+  currentTab!.close();
+};
+
+watch(
+  dataForm,
+  (dataForm) => {
+    if (!dataForm) {
+      return;
+    }
+
+    if (!unref(id)) {
+      return;
+    }
+
+    unref(dataForm)?.editRecord(unref(id));
+  },
+  { immediate: true }
+);
+</script>

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

@@ -0,0 +1,56 @@
+<template>
+  <MKDataTablePage :data-table="dataTable" />
+</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";
+
+const router = useRouter();
+
+const props = defineProps({
+  dataTable: { type: DataTable<any> },
+});
+
+const dataTable = computed(() => {
+  const dataTable =
+    props.dataTable ||
+    DataModelCache.instance.getDataTable(
+      unref(router.currentRoute).meta.name as string
+    );
+
+  return dataTable ? (reactive(dataTable) as DataTable) : null;
+});
+
+watch(
+  dataTable,
+  (dataTable, _, onCleanup) => {
+    if (!dataTable) {
+      return;
+    }
+
+    const disposable = new Disposable();
+
+    disposable.register(
+      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();
+    });
+  },
+  { immediate: true }
+);
+</script>

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

@@ -0,0 +1,31 @@
+<template>
+  <MKDataTreePage
+    :data-table="dataTable"
+    :data-form="dataForm"
+    :props="{ label: 'name', children: 'children' }"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, unref } from "vue";
+import { useRouter } from "vue-router";
+import { DataForm, DataModelCache, DataTable } from "@maketribe/dm";
+
+const router = useRouter();
+
+const dataTable = computed(() => {
+  const dataTable = DataModelCache.instance.getDataTable(
+    unref(router.currentRoute).meta.name as string
+  );
+
+  return dataTable ? (reactive(dataTable) as DataTable) : null;
+});
+
+const dataForm = computed(() => {
+  const dataForm = DataModelCache.instance.getDataForm(
+    unref(router.currentRoute).meta.name as string
+  );
+
+  return dataForm ? (reactive(dataForm) as DataForm) : null;
+});
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+  <DefaultListPage :data-table="memberTable" />
+
+  <ElDialog v-model="isShowActiveMemberForm" class="dialogClass">
+    <MKDataForm :data-form="activeMemberForm" />
+    <template #footer>
+      <ElButton @click="handleActiveMemberConfirm" type="primary">
+        确定
+      </ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import { ElButton, ElDialog } from "element-plus";
+import { DataModelCache } from "@maketribe/dm";
+import DefaultListPage from "../default/index.vue";
+import { MemberTable } from "../../../../dataview";
+
+const isShowActiveMemberForm = ref(false);
+
+const memberTable = reactive(
+  DataModelCache.instance.getDataTable("ms-member")!
+) as MemberTable;
+const activeMemberForm = computed(() => memberTable.activeMemberForm);
+
+memberTable.activeMemberEvent.on(async (member) => {
+  memberTable.activeMemberForm.getLoadingManager().startLoading();
+  await memberTable.activeMemberForm.editRecord(member.id);
+  memberTable.activeMemberForm.getLoadingManager().completeLoading();
+  isShowActiveMemberForm.value = true;
+});
+
+const handleActiveMemberConfirm = async () => {
+  memberTable.approveMember();
+};
+</script>

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

@@ -0,0 +1,28 @@
+<template>
+  <DefaultListPage :data-table="roleTable" />
+
+  <ElDialog v-model="isShowDialog" appendToBody width="80%">
+    <MKRolePermissionConfig
+      :rolePermissionConfigTable="rolePermissionConfigTable"
+    />
+  </ElDialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import DefaultListPage from "../default/index.vue";
+import { RoleTable, RolePermissionConfigTable } from "../../../../dataview";
+import { MKRolePermissionConfig } from "../../../../components";
+
+const roleTable = reactive(new RoleTable()) as RoleTable;
+const rolePermissionConfigTable = reactive(
+  new RolePermissionConfigTable()
+) as RolePermissionConfigTable;
+
+const isShowDialog = ref(false);
+
+roleTable.configRolePermissionEvent.on(({ item }) => {
+  rolePermissionConfigTable.selectRolePermission(item.id);
+
+  isShowDialog.value = true;
+});
+</script>