@maketribe/ms-app 3.0.0 → 3.0.3

package/src/dataview/menu/MenuForm.ts

@@ -1,10 +1,12 @@
 import {
   DataForm,
   DataFormOptions,
+  DataFormType,
   FormColumn,
   FormDetailColumn,
-  defineDataForm,
+  isWhereFilter,
 } from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
 import { RouteTable } from "../route/RouteTable";
 import { MenuTable } from "./MenuTable";
 import { RouteForm, RouteResult } from "../route/RouteForm";
@@ -21,6 +23,7 @@ export type MenuResult = {
   pid: string | null;
   routeId: string;
   sort: string;
+  type: number;
   routes: RouteResult[];
   permissionPoints: PermissionPointDefine[];
 };
@@ -32,6 +35,7 @@ export type MenuItem = {
   pid: string;
   routeId: string;
   sort: string;
+  type: number;
   routes: RouteResult[];
   permissionPoints: PermissionPointDefine[];
 };
@@ -42,22 +46,41 @@ export class MenuForm extends DataForm<MenuResult, MenuItem> {
   }
 
   protected async initialize() {
+    const menuTable = this.register(new MenuTable({ pageSize: 10 }));
+
+    if (isWhereFilter(menuTable.dataFilter)) {
+      menuTable.dataFilter.getDefaultGroup().addCondition("type", "=", 1);
+    }
+
     this.setColumns([
       new FormColumn({ name: "id", label: "编号" }),
-      new FormColumn({ name: "title", label: "菜单描述" }),
+      new FormColumn({ name: "title", label: "菜单描述", required: true }),
       new FormColumn({
         name: "iconName",
         label: "图标",
         componentInfo: "MKFormIconSelect",
         required: true,
       }),
+      new FormColumn({
+        name: "type",
+        label: "菜单类型",
+        componentInfo: "MKFormDataSelect",
+        defaultValue: 2,
+        required: true,
+        componentProps: {
+          options: [
+            { value: 1, label: "菜单组" },
+            { value: 2, label: "菜单" },
+          ],
+        },
+      }),
       new FormColumn({
         name: "routeId",
         label: "默认路由",
         componentInfo: "MKFormDataTableSelect",
         componentProps: {
           labelFieldName: "title",
-          dataTable: new RouteTable({ pageSize: 10 }),
+          dataTable: this.register(new RouteTable({ pageSize: 10 })),
         },
       }),
       new FormColumn({
@@ -66,33 +89,60 @@ export class MenuForm extends DataForm<MenuResult, MenuItem> {
         componentInfo: "MKFormDataTableSelect",
         componentProps: {
           labelFieldName: "title",
-          dataTable: new MenuTable({ pageSize: 10 }),
+          dataTable: menuTable,
         },
       }),
-      new FormColumn({ name: "sort", label: "排序" }),
+      new FormColumn({ name: "sort", label: "排序", defaultValue: "0" }),
       new FormDetailColumn({
         name: "routes",
         label: "该菜单所属路由定义",
         associationFieldName: "menuId",
-        detailForm: new RouteForm(),
-        detailTable: new RouteTable(),
+        detailForm: this.register(new RouteForm()),
+        detailTable: this.register(new RouteTable()),
       }),
       new FormDetailColumn({
         name: "permissionPoints",
         label: "该菜单所属权限定义",
         associationFieldName: "menuId",
-        detailForm: new PermissionPointDefineForm(),
-        detailTable: new PermissionPointDefineTable(),
+        detailForm: this.register(new PermissionPointDefineForm()),
+        detailTable: this.register(new PermissionPointDefineTable()),
       }),
     ]);
+
+    this.register(
+      this.formItemValueChangeEvent.on(({ formItem }) => {
+        if (formItem.name === "type") {
+          this.getColumn("routes")!.visible = this.data?.type !== 1;
+          this.getColumn("permissionPoints")!.visible = this.data?.type !== 1;
+        }
+      })
+    );
+
+    this.register(
+      this.dataChangeEvent.on(({}) => {
+        this.getColumn("routes")!.visible = this.data?.type !== 1;
+        this.getColumn("permissionPoints")!.visible = this.data?.type !== 1;
+      })
+    );
+
+    this.register(
+      this.dataFormTypeChangeEvent.on(({ dataFormType }) => {
+        this.getColumn("type")!.disabled = dataFormType !== DataFormType.ADD;
+      })
+    );
   }
 
   formatSubmitData(data: any) {
+    const permissionPoints = data.type === 2 ? data.permissionPoints : [];
+    const routes = data.type === 2 ? data.routes : [];
+
     return {
       ...data,
       iconName: data.iconName || null,
       pid: data.pid || null,
       routeId: data.routeId || null,
+      permissionPoints,
+      routes,
     };
   }
 
@@ -103,6 +153,7 @@ export class MenuForm extends DataForm<MenuResult, MenuItem> {
       iconName: item.iconName || "",
       pid: item.pid || "",
       routeId: item.routeId,
+      type: item.type,
       sort: item.sort || "0",
       routes: item.routes || [],
       permissionPoints: item.permissionPoints || [],

package/src/dataview/menu/MenuTable.ts

@@ -3,9 +3,9 @@ import {
   DataTableOptions,
   TableActionColumn,
   TableColumn,
-  defineDataTable,
 } from "@maketribe/dm";
-import { MenuItem, MenuResult } from "./MenuForm";
+import { defineDataTable } from "../../define-data-table";
+import type { MenuItem, MenuResult } from "./MenuForm";
 
 export class MenuTable<T extends MenuItem = MenuItem> extends DataTable<
   MenuResult,

package/src/dataview/role/RoleForm.ts

@@ -1,9 +1,5 @@
-import {
-  DataForm,
-  DataFormOptions,
-  FormColumn,
-  defineDataForm,
-} from "@maketribe/dm";
+import { DataForm, DataFormOptions, FormColumn } from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
 
 export type Role = {
   id: string;

package/src/dataview/role/RoleTable.ts

@@ -7,8 +7,9 @@ import {
   ActionButton,
   EditButton,
   DeleteButton,
-  defineDataTable,
+  ClassifySearchItem,
 } from "@maketribe/dm";
+import { defineDataTable } from "../../define-data-table";
 import { Role } from "./RoleForm";
 import { Event } from "@maketribe/utils";
 

package/src/dataview/route/RouteForm.ts

@@ -1,9 +1,5 @@
-import {
-  DataForm,
-  DataFormOptions,
-  FormColumn,
-  defineDataForm,
-} from "@maketribe/dm";
+import { DataForm, DataFormOptions, FormColumn } from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
 import { RouteType } from "../../constants";
 import { MenuTable } from "../menu/MenuTable";
 
@@ -33,6 +29,7 @@ export class RouteForm extends DataForm<RouteResult, Route> {
   }
 
   protected async initialize() {
+    (window as any).a = this;
     this.setColumns([
       new FormColumn({ name: "id", label: "编号" }),
       new FormColumn({ name: "name", label: "路由名", required: true }),
@@ -56,13 +53,13 @@ export class RouteForm extends DataForm<RouteResult, Route> {
       new FormColumn({
         name: "type",
         label: "路由类型",
-        defaultValue: "0",
+        defaultValue: RouteType.ROUTE,
         componentInfo: "MKFormDataSelect",
         required: true,
         componentProps: {
           options: [
-            { value: "0", label: "站内路由" },
-            { value: "1", label: "站外链接" },
+            { value: RouteType.ROUTE, label: "站内路由" },
+            { value: RouteType.LINK, label: "站外链接" },
           ],
         },
       }),
@@ -70,9 +67,12 @@ export class RouteForm extends DataForm<RouteResult, Route> {
   }
 
   formatSubmitData(data: any) {
+    const type = Number.parseInt(data.type);
+
     return {
       ...data,
       iconName: data.iconName || null,
+      type: Number.isNaN(type) ? RouteType.ROUTE : type,
     };
   }
 
@@ -81,7 +81,8 @@ export class RouteForm extends DataForm<RouteResult, Route> {
       id: item.id,
       name: item.name || "",
       title: item.title || "",
-      type: [0, "0"].includes(item.type) ? RouteType.ROUTE : RouteType.LINK,
+      type:
+        `${item.type}` === RouteType.ROUTE ? RouteType.ROUTE : RouteType.LINK,
       menuId: item.menuId,
       iconName: item.iconName || "",
       path: item.path || "",

package/src/dataview/route/RouteTable.ts

@@ -4,8 +4,8 @@ import {
   TableColumn,
   FilterColumn,
   TableActionColumn,
-  defineDataTable,
 } from "@maketribe/dm";
+import { defineDataTable } from "../../define-data-table";
 import { Route, RouteResult } from "./RouteForm";
 import { RouteType } from "../../constants";
 

package/src/define-data-form.ts

@@ -0,0 +1,12 @@
+import { DataFormClass, DataModelDefines } from "./DataModelDefines";
+
+export const defineDataForm = <T extends DataFormClass>(
+  DataFormClass: T
+): T => {
+  DataModelDefines.instance.registerDataFormDefine(
+    new DataFormClass({}).name,
+    DataFormClass
+  );
+
+  return DataFormClass;
+};

package/src/define-data-table.ts

@@ -0,0 +1,12 @@
+import { DataModelDefines, DataTableClass } from "./DataModelDefines";
+
+export const defineDataTable = <T extends DataTableClass>(
+  DataTableClass: T
+): T => {
+  DataModelDefines.instance.registerDataTableDefine(
+    new DataTableClass({}).name,
+    DataTableClass
+  );
+
+  return DataTableClass;
+};

package/src/index.ts

@@ -24,4 +24,6 @@ export const install = installer.install;
 export const version = installer.version;
 
 export * from "./init-application";
-// export * from "./router";
+export * from "./DataModelDefines";
+export * from "./define-data-table";
+export * from "./define-data-form";

package/src/init-application.ts

@@ -8,6 +8,10 @@ import { MSAppClient } from "./MSAppClient";
 import { HttpRequest, WebHttpRequest } from "@maketribe/request";
 import { MSAPPCLIENT_CONTEXT_KEY } from "./tokens";
 import { Router } from "vue-router";
+import { MSDataTableComponents } from "./MSDataTableComponents";
+import { MSDataFormComponents } from "./MSDataFormComponents";
+import { MSDataFilterComponents } from "./MSDataFilterComponents";
+import { generateRoutesFromFiles } from "./utils";
 
 export type InitMsApplicationOptions = {
   routes: any;
@@ -31,33 +35,6 @@ export const initApplication = async (options: InitMsApplicationOptions) => {
       routes: [],
     });
 
-  const routes = Object.values(options.routes).map((item: any) => {
-    const component = item.default ?? item;
-
-    return {
-      ...component.mkRoute,
-      component,
-      children: [],
-      meta: {
-        ...component.mkRoute.meta,
-      },
-    };
-  });
-
-  for (const route of routes) {
-    for (const innerRoute of routes) {
-      if (innerRoute.parent === route.name) {
-        route.children.push(innerRoute);
-      }
-    }
-  }
-
-  routes
-    .filter((route) => !route.parent)
-    .forEach((route) => {
-      vueRouter.addRoute(route);
-    });
-
   const msAppClient = reactive(
     new MSAppClient({
       appID: options!.appID,
@@ -67,6 +44,10 @@ export const initApplication = async (options: InitMsApplicationOptions) => {
       origin: location.origin,
       locale: options!.locale,
       vueRouter,
+      dataTableComponents: new MSDataTableComponents(),
+      dataFormComponents: new MSDataFormComponents(),
+      dataFilterComponents: new MSDataFilterComponents(),
+      whereFilterComponents: new MSDataFilterComponents(),
     })
   ) as unknown as MSAppClient;
 
@@ -76,6 +57,23 @@ export const initApplication = async (options: InitMsApplicationOptions) => {
 
   (window as any).msAppClient = msAppClient;
 
+  const routes = generateRoutesFromFiles(
+    Object.keys(options.routes).map((key) => {
+      return {
+        path: key.replace(/^\.\/pages\/(.+)\.vue$/, (_, g) => g),
+        module: options.routes[key]?.default || options.routes[key],
+      };
+    })
+  );
+
+  for (const route of routes) {
+    if (route.key.startsWith("index-")) {
+      msAppClient.pageManager.addExtendsPage(route);
+    } else {
+      msAppClient.pageManager.addNormalPage(route);
+    }
+  }
+
   await msAppClient.init();
 
   app.use(msAppClient.vueRouter);

package/src/layouts/common/lock/index.ts

@@ -0,0 +1,5 @@
+import Lock from "./lock";
+
+export const MKLock = Lock;
+
+export default MKLock;

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

@@ -0,0 +1,92 @@
+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 "../../../MSAppClient";
+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

@@ -0,0 +1,76 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElTooltip } from "element-plus";
+import { MKSvgIcon } from "@maketribe/dm-ui";
+import { MSAppClient } from "../../../../MSAppClient";
+import { MenuNode } from "../../../../menu";
+
+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.map((rootMenu) => (
+        <div
+          class={[
+            "mk-bar__item",
+            rootMenu.children.length ? "has-children" : "",
+            unref(currentBarItem)?.id === rootMenu.id ? "is-active" : "",
+          ]}
+        >
+          <ElTooltip content={rootMenu.title} placement="right">
+            <div
+              class="mk-bar__item-button"
+              onClick={() => handleBarItemClick(rootMenu)}
+            >
+              <MKSvgIcon iconClass={rootMenu.iconName} />
+            </div>
+          </ElTooltip>
+        </div>
+      ));
+
+      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>
+
+          <div class="mk-bar__footer">
+            <MKSvgIcon class="mk-bar__setting" iconClass="Setting" />
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/layouts/default/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./bar";
+export * from "./menu";

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

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

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