@maketribe/ms-app 3.0.1 → 3.0.3

package/src/dataview/route/RouteForm.ts

@@ -0,0 +1,93 @@
+import { DataForm, DataFormOptions, FormColumn } from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
+import { RouteType } from "../../constants";
+import { MenuTable } from "../menu/MenuTable";
+
+export type RouteResult = {
+  id: string;
+  name: string;
+  title: string;
+  type: number;
+  menuId: string;
+  iconName: string;
+  path?: string;
+};
+
+export type Route = {
+  id: string;
+  name: string;
+  title: string;
+  type: RouteType;
+  menuId: string;
+  iconName: string;
+  path: string;
+};
+
+export class RouteForm extends DataForm<RouteResult, Route> {
+  constructor(options: DataFormOptions = {}) {
+    super({ name: "ms-route", ...options });
+  }
+
+  protected async initialize() {
+    (window as any).a = this;
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({ name: "name", label: "路由名", required: true }),
+      new FormColumn({ name: "title", label: "路由描述", required: true }),
+      new FormColumn({
+        name: "menuId",
+        label: "所属菜单",
+        componentInfo: "MKFormDataTableSelect",
+        required: true,
+        componentProps: {
+          labelFieldName: "title",
+          dataTable: new MenuTable({ pageSize: 10 }),
+        },
+      }),
+      new FormColumn({
+        name: "iconName",
+        label: "图标",
+        componentInfo: "MKFormIconSelect",
+      }),
+      new FormColumn({ name: "path", label: "路径" }),
+      new FormColumn({
+        name: "type",
+        label: "路由类型",
+        defaultValue: RouteType.ROUTE,
+        componentInfo: "MKFormDataSelect",
+        required: true,
+        componentProps: {
+          options: [
+            { value: RouteType.ROUTE, label: "站内路由" },
+            { value: RouteType.LINK, label: "站外链接" },
+          ],
+        },
+      }),
+    ]);
+  }
+
+  formatSubmitData(data: any) {
+    const type = Number.parseInt(data.type);
+
+    return {
+      ...data,
+      iconName: data.iconName || null,
+      type: Number.isNaN(type) ? RouteType.ROUTE : type,
+    };
+  }
+
+  formatItem(item: RouteResult): Route {
+    return {
+      id: item.id,
+      name: item.name || "",
+      title: item.title || "",
+      type:
+        `${item.type}` === RouteType.ROUTE ? RouteType.ROUTE : RouteType.LINK,
+      menuId: item.menuId,
+      iconName: item.iconName || "",
+      path: item.path || "",
+    };
+  }
+}
+
+defineDataForm(RouteForm);

package/src/dataview/route/RouteTable.ts

@@ -0,0 +1,71 @@
+import {
+  DataTable,
+  DataTableOptions,
+  TableColumn,
+  FilterColumn,
+  TableActionColumn,
+} from "@maketribe/dm";
+import { defineDataTable } from "../../define-data-table";
+import { Route, RouteResult } from "./RouteForm";
+import { RouteType } from "../../constants";
+
+export class RouteTable extends DataTable<RouteResult, Route> {
+  constructor(options: DataTableOptions = {}) {
+    super({ name: "ms-route", ...options });
+  }
+
+  protected async initialize() {
+    this.dataFilter.setColumns([
+      new FilterColumn({
+        name: "name",
+        label: "路由名",
+        componentInfo: "MKConditionInput",
+      }),
+      new FilterColumn({
+        name: "title",
+        label: "路由描述",
+        componentInfo: "MKConditionInput",
+      }),
+      new FilterColumn({
+        name: "type",
+        label: "路由类型",
+        componentInfo: "MKConditionSelect",
+        componentProps: {
+          options: [
+            { value: 0, label: "站内路由" },
+            { value: 1, label: "站外链接" },
+          ],
+        },
+      }),
+    ]);
+
+    this.setColumns([
+      new TableColumn({ name: "id", label: "编号", visible: false }),
+      new TableColumn({ name: "name", label: "路由名" }),
+      new TableColumn({ name: "title", label: "路由描述" }),
+      new TableColumn({
+        name: "type",
+        label: "路由类型",
+        componentInfo: "MKColumnObjectMappingText",
+        componentProps: {
+          mapping: { 0: "站内路由", 1: "站外链接" },
+        },
+      }),
+      new TableActionColumn(),
+    ]);
+  }
+
+  formatItem(item: RouteResult): Route {
+    return {
+      id: item.id,
+      name: item.name || "",
+      title: item.title || "",
+      type: item.type === 0 ? RouteType.ROUTE : RouteType.LINK,
+      menuId: item.menuId,
+      iconName: item.iconName || "",
+      path: item.path || "",
+    };
+  }
+}
+
+defineDataTable(RouteTable);

package/src/dataview/route/index.ts

@@ -0,0 +1,2 @@
+export * from "./RouteForm";
+export * from "./RouteTable";

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

@@ -0,0 +1,82 @@
+import { App, reactive } from "vue";
+import {
+  createRouter,
+  createWebHashHistory,
+  Router as VueRouter,
+} from "vue-router";
+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;
+  vueRouter?: VueRouter;
+  app: App;
+  router?: Router;
+  appID: string;
+  logo?: string;
+  projectName: string;
+  locale?: string;
+  httpRequest?: HttpRequest;
+};
+
+export const initApplication = async (options: InitMsApplicationOptions) => {
+  const app = options.app;
+
+  const vueRouter =
+    options.router ??
+    createRouter({
+      history: createWebHashHistory(),
+      routes: [],
+    });
+
+  const msAppClient = reactive(
+    new MSAppClient({
+      appID: options!.appID,
+      logo: options!.logo ?? "",
+      projectName: options!.projectName,
+      httpRequest: options.httpRequest ?? new WebHttpRequest(),
+      origin: location.origin,
+      locale: options!.locale,
+      vueRouter,
+      dataTableComponents: new MSDataTableComponents(),
+      dataFormComponents: new MSDataFormComponents(),
+      dataFilterComponents: new MSDataFilterComponents(),
+      whereFilterComponents: new MSDataFilterComponents(),
+    })
+  ) as unknown as MSAppClient;
+
+  app.provide(MSAPPCLIENT_CONTEXT_KEY, { msAppClient });
+
+  MSAppClient.instance = msAppClient;
+
+  (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);
+
+  return msAppClient;
+};

package/src/installer.ts

@@ -0,0 +1,26 @@
+import { Plugin, reactive } from "vue";
+import { makeInstaller } from "@maketribe/utils";
+import { ConfigProviderContext } from "@maketribe/dm-ui";
+
+import {
+  MKMaterialList,
+  MKMaterialSelect,
+  MKSystemProvider,
+  MKRolePermissionConfig,
+  MKImageSelect,
+  MKVerifyDialog,
+} from "./components";
+
+const components: Plugin[] = [
+  MKSystemProvider,
+  MKMaterialList,
+  MKMaterialSelect,
+  MKRolePermissionConfig,
+  MKImageSelect,
+  MKVerifyDialog,
+];
+
+export const installer = makeInstaller<ConfigProviderContext>(
+  components,
+  "1.0.0-dev"
+);

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;

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

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