@maketribe/ms-app 3.0.30 → 3.0.31

package/src/layouts/components/header/tools.tsx

@@ -0,0 +1,55 @@
+import { computed, defineComponent, unref } from "vue";
+import {
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElImage,
+} from "element-plus";
+import { MSAppClient } from "../../../core";
+import { MKSvgIcon } from "../../../components";
+
+export const MKHeaderTools = defineComponent({
+  name: "MKHeaderTools",
+  setup(props) {
+    const msAppClient = MSAppClient.instance!;
+    const userSession = msAppClient.userSession!;
+
+    const userInfo = computed(() => userSession.userInfo!);
+
+    const avatar = computed(() => unref(userInfo).avatar || "/avatar.png");
+
+    return () => {
+      return (
+        <div class="mk-header-tools">
+          <div class="mk-header-tools__item">
+            <ElDropdown
+              class="mk-header-tools__user"
+              trigger="click"
+              v-slots={{
+                default: () => (
+                  <div class="mk-header-tools__user-info">
+                    <ElImage
+                      class="mk-header-tools__avatar"
+                      src={unref(avatar)}
+                    />
+                    <span class="mk-header-tools__nickName">
+                      {unref(userInfo).nickName}
+                    </span>
+                  </div>
+                ),
+                dropdown: () => (
+                  <ElDropdownMenu>
+                    <ElDropdownItem onClick={() => msAppClient.logout()}>
+                      <MKSvgIcon iconClass="SwitchButton" />
+                      退出登录
+                    </ElDropdownItem>
+                  </ElDropdownMenu>
+                ),
+              }}
+            />
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/layouts/components/index.ts

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

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

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

package/src/layouts/components/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 "../../../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)}
+          onConfirm={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/components/menu/index.tsx

@@ -0,0 +1,61 @@
+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,
+    },
+    collapse: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const msAppClient = MSAppClient.instance!;
+    const userSession = msAppClient.userSession!;
+    const menu = userSession.menu;
+    const vueRouter = msAppClient.vueRouter;
+    // 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) {
+        vueRouter.push({ 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/components/menu/menu-item.tsx

@@ -0,0 +1,63 @@
+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/container/default.tsx

@@ -0,0 +1,85 @@
+import { Ref, defineComponent, ref, unref } from "vue";
+import { RouterView, useRouter } from "vue-router";
+import { ElAside, ElContainer, ElHeader, ElMain } from "element-plus";
+import { MKSystemProvider } from "../../components";
+import { MKBar, MKMenu, MKDialogs } from "../components";
+import { MenuNode } from "../../core";
+import { MSAppClient } from "../../core";
+import { MKHeader } from "../components/header";
+import { createDisposable } from "@maketribe/utils";
+
+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 vueRouter = useRouter();
+
+    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;
+    }
+
+    // 用户会话销毁就前往登录页面。
+    userSession.register(
+      createDisposable(() => {
+        vueRouter.push({ name: "login" });
+      })
+    );
+
+    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">
+                  <MKHeader />
+                </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>
+          <MKDialogs />
+        </MKSystemProvider>
+      );
+    };
+  },
+});

package/src/layouts/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from "@maketribe/utils";
+import Layout from "./layout";
+
+export const MKLayout = withInstall(Layout);
+
+export default MKLayout;

package/src/layouts/layout.tsx

@@ -0,0 +1,11 @@
+import { defineComponent } from "vue";
+import { MKLayoutDefault } from "./container/default";
+
+export default defineComponent({
+  name: "MKLayout",
+  setup() {
+    return () => {
+      return <MKLayoutDefault />;
+    };
+  },
+});

package/src/message-impl/DialogerImpl.ts

@@ -0,0 +1,84 @@
+import {
+  DialogInstance,
+  IDialogMessage,
+  IDialogRenderOptions,
+  SkeletonDialoger,
+} from "@maketribe/dm";
+import { Event } from "@maketribe/utils";
+import { ElMessageBox } from "element-plus";
+import { isFunction } from "lodash-es";
+
+let uid = 0;
+
+export class DialogerImpl extends SkeletonDialoger {
+  dialogInstanceCreateEvent: Event<DialogInstance> = new Event();
+
+  async prompt(options: IDialogMessage): Promise<string> {
+    const promptResult = await ElMessageBox.prompt(
+      options.message,
+      options.title,
+      options
+    );
+
+    return promptResult.value;
+  }
+
+  async confirm(options: IDialogMessage): Promise<boolean> {
+    try {
+      await ElMessageBox.confirm(options.message, options.title, options);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  async alert(options: IDialogMessage): Promise<void> {
+    await ElMessageBox.alert(options.message, options.title, options);
+  }
+
+  customRender(options: IDialogRenderOptions): DialogInstance {
+    const dialogInstance: DialogInstance = {
+      ...options,
+      id: uid++,
+      visible: true,
+      destroyEvent: new Event(),
+      destroy: () => {
+        dialogInstance.visible = false;
+        dialogInstance.destroyEvent.emit();
+      },
+    };
+    this.dialogInstanceCreateEvent.emit(dialogInstance);
+
+    return dialogInstance;
+  }
+
+  async custom(options: IDialogRenderOptions): Promise<boolean> {
+    return new Promise<boolean>((resolve) => {
+      this.customRender({
+        ...options,
+        onConfirm: async () => {
+          if (
+            isFunction(options.onConfirm)
+              ? (await options.onConfirm()) === false
+              : false
+          ) {
+            return false;
+          }
+
+          resolve(true);
+        },
+        onCancel: async () => {
+          if (
+            isFunction(options.onCancel)
+              ? (await options.onCancel()) === false
+              : false
+          ) {
+            return false;
+          }
+
+          resolve(false);
+        },
+      });
+    });
+  }
+}

package/src/message-impl/MessagerImpl.ts

@@ -0,0 +1,17 @@
+import { SkeletonMessageSender, IMessage } from "@maketribe/dm";
+import { ElMessage } from "element-plus";
+
+export class MessagerImpl extends SkeletonMessageSender<IMessage> {
+  info(message: IMessage): void {
+    ElMessage.info(message);
+  }
+  success(message: IMessage): void {
+    ElMessage.success(message);
+  }
+  warning(message: IMessage): void {
+    ElMessage.warning(message);
+  }
+  error(message: IMessage): void {
+    ElMessage.error(message);
+  }
+}

package/src/message-impl/NotificationerImpl.ts

@@ -0,0 +1,17 @@
+import { NotificationMessage, SkeletonMessageSender } from "@maketribe/dm";
+import { ElNotification } from "element-plus";
+
+export class NotificationerImpl extends SkeletonMessageSender<NotificationMessage> {
+  info(message: NotificationMessage): void {
+    ElNotification.info(message);
+  }
+  success(message: NotificationMessage): void {
+    ElNotification.success(message);
+  }
+  warning(message: NotificationMessage): void {
+    ElNotification.warning(message);
+  }
+  error(message: NotificationMessage): void {
+    ElNotification.error(message);
+  }
+}

package/src/message-impl/index.ts

@@ -0,0 +1,3 @@
+export * from "./MessagerImpl";
+export * from "./NotificationerImpl";
+export * from "./DialogerImpl";

package/src/page/index/404.vue

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

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

@@ -0,0 +1,50 @@
+<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 } from "@maketribe/dm";
+import { DataModelDefines } from "../../../../core";
+import { useCurrentTab } from "../../../../composables/use-current-tab";
+
+const router = useRouter();
+
+const dataForm: Ref<DataForm | null> = computed(() => {
+  const dataForm = DataModelDefines.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: `dv/${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,56 @@
+<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 } from "@maketribe/dm";
+import { DataModelDefines } from "../../../../core";
+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 = DataModelDefines.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: `dv/${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>