@maketribe/ms-app 3.0.0

package/src/Router.ts

@@ -0,0 +1,133 @@
+import { Disposable, Event, createDisposable } from "@maketribe/utils";
+import { Route } from "./dataview";
+import type { UserSession } from "./UserSession";
+import DefaultListPage from "./page/index/dv/default/index.vue";
+import DefaultAddPage from "./page/index/dv/default/add.vue";
+import DefaultEditPage from "./page/index/dv/default/edit.vue";
+import DefaultTreePage from "./page/index/dv/default/tree.vue";
+
+const NORMALIZE_ROUTE_NAME_REG = /^([^\\]+)\/(.+)$/;
+
+export class Router extends Disposable {
+  userSession: UserSession;
+
+  routes: Route[] = [];
+
+  currentRoute: any | null = null;
+
+  beforeRouteChange: Event<{ routeInfo: Route; route: any }> = this.register(
+    new Event()
+  );
+
+  routeChange: Event<{ routeInfo: Route; route: any }> = this.register(
+    new Event()
+  );
+
+  constructor(userSession: UserSession) {
+    super();
+
+    this.userSession = userSession;
+  }
+
+  setRoutes(routes: Route[]) {
+    this.routes = routes;
+  }
+
+  init() {
+    const vueRouter = this.userSession.vueRouter;
+    const vueRoutes = vueRouter.getRoutes();
+
+    // 给有权限访问的页面,注册默认页面
+    const defaultPageRoutes = this.routes.filter(
+      (route) => !vueRoutes.find((item) => item.name === route.name)
+    );
+
+    for (const defaultPageRoute of defaultPageRoutes) {
+      const match = defaultPageRoute.name.match(NORMALIZE_ROUTE_NAME_REG);
+
+      if (match) {
+        const name = match[1];
+        const action = match[2];
+
+        switch (action) {
+          case "list":
+            vueRouter.addRoute("mk-ms-main", {
+              name: defaultPageRoute.name,
+              path: `/dv/${name}`,
+              component: DefaultListPage,
+              meta: { name },
+            });
+            break;
+          case "edit":
+            vueRouter.addRoute("mk-ms-main", {
+              name: defaultPageRoute.name,
+              path: `/dv/${name}/:id`,
+              component: DefaultEditPage,
+              meta: { name },
+            });
+            break;
+          case "add":
+            vueRouter.addRoute("mk-ms-main", {
+              name: defaultPageRoute.name,
+              path: `/dv/${name}/add`,
+              component: DefaultAddPage,
+              meta: { name },
+            });
+            break;
+          case "tree":
+            vueRouter.addRoute("mk-ms-main", {
+              name: defaultPageRoute.name,
+              path: `/dv/${name}`,
+              component: DefaultTreePage,
+              meta: { name },
+            });
+            break;
+        }
+      }
+    }
+
+    this.register(
+      createDisposable(() => {
+        for (const defaultPageRoute of defaultPageRoutes) {
+          vueRouter.removeRoute(defaultPageRoute.name);
+        }
+      })
+    );
+  }
+
+  getRouteByName(name: string): Route | null {
+    return this.routes.find((route) => route.name === name) ?? null;
+  }
+
+  getRouteByID(id: string): Route | null {
+    return this.routes.find((route) => route.id === id) ?? null;
+  }
+
+  getRoutesByMenuID(menuId: Route["menuId"]): Route[] {
+    return this.routes.filter((route) => route.menuId === menuId);
+  }
+
+  async changeRoute(route: any) {
+    if (!route) {
+      return true;
+    }
+
+    const routeInfo = this.getRouteByName(route.name);
+
+    if (!routeInfo) {
+      return true;
+    }
+
+    if (
+      (await this.beforeRouteChange.emitAsync({ route, routeInfo })) !== false
+    ) {
+      this.currentRoute = route;
+
+      this.routeChange.emit({ route, routeInfo });
+
+      return true;
+    }
+
+    return false;
+  }
+}

package/src/UserInfo.ts

@@ -0,0 +1,66 @@
+import type { MSAppClient } from "./MSAppClient";
+import { PermissionPoint } from "./PermissionPointManager";
+import { Role } from "./dataview/role/RoleForm";
+
+export interface MemberInfo {
+  id: number;
+  account: string;
+  email: string;
+  nickName: string;
+  avatarPath: string;
+  isSuper: string;
+  errorCount: string;
+  errorDatetime: string;
+  isLock: string;
+  unlockDatetime: string;
+}
+
+export class UserInfo {
+  id: number;
+  account: string;
+  email: string;
+  nickName: string;
+  avatar: URL | null;
+  isLocked: boolean;
+  isSuper: boolean;
+  payload: any;
+
+  roles: Role[];
+  permissionPoints: PermissionPoint[];
+
+  constructor(
+    msAppClient: MSAppClient,
+    payload: MemberInfo,
+    roles: Role[],
+    permissionPoints: PermissionPoint[]
+  ) {
+    this.id = payload.id;
+    this.account = payload.account;
+    this.email = payload.email;
+    this.nickName = payload.nickName;
+    this.isLocked = payload.isLock === "1";
+    this.isSuper = payload.isSuper === "1";
+    this.roles = roles;
+    this.permissionPoints = permissionPoints;
+
+    try {
+      this.avatar = payload.avatarPath
+        ? new URL(payload.avatarPath, msAppClient.origin)
+        : null;
+    } catch (e) {
+      this.avatar = null;
+    }
+
+    this.payload = payload;
+  }
+
+  hasRole(name: Role["name"]): boolean {
+    return !!this.roles.find((role) => role.name === name);
+  }
+
+  hasPermissionPoint(key: PermissionPoint["key"]) {
+    return !!this.permissionPoints.find(
+      (permissionPoint) => permissionPoint.key === key
+    );
+  }
+}

package/src/UserSession.ts

@@ -0,0 +1,190 @@
+import { Disposable, Event, createDisposable } from "@maketribe/utils";
+import { MemberInfo, UserInfo } from "./UserInfo";
+import { Menu } from "./menu";
+import { Tabs } from "./tabs";
+import { Router } from "./Router";
+import {
+  PermissionPoint,
+  PermissionPointManager,
+} from "./PermissionPointManager";
+import type { MSAppClient } from "./MSAppClient";
+import { MenuResult, Role, Route } from "./dataview";
+import { R } from "@maketribe/request";
+import {
+  ACCESS_TOKEN_HEADER,
+  AUTHORIZATION,
+  AUTHORIZATION_PREFIX,
+  X_ACCESS_TOKEN_HEADER,
+  X_AUTHORIZATION,
+} from "./constants";
+
+export type UserSessionOptions = {
+  msAppClient: MSAppClient;
+};
+
+export class UserSession extends Disposable {
+  msAppClient: MSAppClient;
+
+  vueRouter: MSAppClient["vueRouter"];
+
+  userInfo: UserInfo | null;
+
+  menu: Menu;
+
+  tabs: Tabs;
+
+  router: Router;
+
+  permissionPointManager: PermissionPointManager;
+
+  accessToken: string;
+
+  xAccessToken: string;
+
+  beforeInitRouterEvent: Event = this.register(new Event());
+
+  constructor(options: UserSessionOptions) {
+    super();
+
+    this.msAppClient = options.msAppClient;
+
+    this.vueRouter = this.msAppClient.vueRouter;
+
+    this.userInfo = null;
+
+    this.router = this.register(new Router(this));
+    this.tabs = this.register(new Tabs(this));
+    this.permissionPointManager = new PermissionPointManager();
+    this.menu = this.register(
+      new Menu(this.permissionPointManager, this.router)
+    );
+
+    this.accessToken = localStorage.getItem(ACCESS_TOKEN_HEADER) ?? "";
+    this.xAccessToken = localStorage.getItem(X_ACCESS_TOKEN_HEADER) ?? "";
+  }
+
+  async init() {
+    type BasicInfoResult = {
+      member: MemberInfo;
+      menus: MenuResult[];
+      routes: Route[];
+      roles: Role[];
+      permissionPoints: PermissionPoint[];
+    };
+
+    const msAppClient = this.msAppClient;
+
+    const httpRequest = msAppClient.httpRequest;
+
+    const beforeRequestInterceptorID = httpRequest
+      .getInterceptors()
+      .request.use((config) => {
+        if (this.accessToken) {
+          config.headers[
+            AUTHORIZATION
+          ] = `${AUTHORIZATION_PREFIX} ${this.accessToken}`;
+        }
+
+        if (this.xAccessToken) {
+          config.headers[
+            X_AUTHORIZATION
+          ] = `${AUTHORIZATION_PREFIX} ${this.xAccessToken}`;
+        }
+
+        return config;
+      });
+
+    const beforeResponseInterceptorID = httpRequest
+      .getInterceptors()
+      .response.use((config) => {
+        if (config.data.code === 401) {
+          this.accessToken = this.xAccessToken = "";
+        } else {
+          this.accessToken =
+            config.headers[ACCESS_TOKEN_HEADER] || this.accessToken;
+
+          this.xAccessToken =
+            config.headers[X_ACCESS_TOKEN_HEADER] || this.xAccessToken;
+        }
+
+        localStorage.setItem(ACCESS_TOKEN_HEADER, this.accessToken);
+
+        localStorage.setItem(X_ACCESS_TOKEN_HEADER, this.xAccessToken);
+
+        return config;
+      });
+
+    try {
+      let response = await httpRequest.request<R<BasicInfoResult>>({
+        url: "/api/ms-login/login-info",
+        method: "GET",
+      });
+
+      if (!response.data || response.data.code !== 200) {
+        return response;
+      }
+
+      const BasicInfoResult = response.data!;
+
+      const { member, routes, menus, permissionPoints, roles } =
+        BasicInfoResult.data!;
+
+      this.userInfo = new UserInfo(
+        msAppClient,
+        member,
+        roles,
+        permissionPoints
+      );
+
+      this.router.setRoutes(routes);
+      this.permissionPointManager.setPermissionPoints(permissionPoints);
+      this.menu.setMenus(menus);
+
+      this.tabs.init();
+
+      this.beforeInitRouterEvent.emit();
+      this.router.init();
+
+      this.router.routeChange.on(({ route, routeInfo }) => {
+        const menuNode = this.menu.findMenuNodeByID(routeInfo.menuId);
+
+        this.menu.setCurrentMenuNode(menuNode);
+
+        const tab =
+          this.tabs.findTabByID(routeInfo.name) ??
+          this.tabs.createTab({
+            id: routeInfo.name,
+            title: routeInfo.title,
+            affix: route.matched?.[route.matched?.length - 1]?.meta?.affix,
+            realRoute: route,
+            route: routeInfo,
+          });
+
+        this.tabs.switchTab(tab);
+      });
+
+      this.register(
+        createDisposable(() => {
+          httpRequest
+            .getInterceptors()
+            .request.eject(beforeRequestInterceptorID);
+          httpRequest
+            .getInterceptors()
+            .request.eject(beforeResponseInterceptorID);
+        })
+      );
+
+      return response;
+    } catch (e) {
+      httpRequest.getInterceptors().request.eject(beforeRequestInterceptorID);
+      httpRequest.getInterceptors().request.eject(beforeResponseInterceptorID);
+    }
+  }
+
+  public dispose(): void {
+    localStorage.removeItem(ACCESS_TOKEN_HEADER);
+    localStorage.removeItem(X_ACCESS_TOKEN_HEADER);
+
+    super.dispose();
+  }
+}

package/src/components/image-select/image-select-option.ts

@@ -0,0 +1,11 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const imageSelectProps = buildProps({
+  modelValue: { type: String, required: true },
+} as const);
+
+export const imageSelectEmits = {
+  "update:model-value": (modelValue: any) => true,
+};
+export type imageSelectProps = ExtractPropTypes<typeof imageSelectProps>;

package/src/components/image-select/image-select.tsx

@@ -0,0 +1,40 @@
+import { defineComponent, computed } from "vue";
+import { ElIcon } from "element-plus";
+import { Plus } from "@element-plus/icons";
+import { imageSelectProps, imageSelectEmits } from "./image-select-option";
+import { MKMaterialSelect } from "../../components/material-select";
+
+export default defineComponent({
+  name: "MKFileView",
+  props: imageSelectProps,
+  emits: imageSelectEmits,
+
+  setup(props, { emit }) {
+    const modelValue = computed({
+      get: () => props.modelValue,
+      set: (v) => emit("update:model-value", v),
+    });
+
+    const handleSelectClick = async (e: MouseEvent) => {
+      modelValue.value = await MKMaterialSelect();
+    };
+
+    return () => {
+      const imageVNode = props.modelValue ? (
+        <img
+          src={props.modelValue}
+          class="img-select-content"
+          onClick={handleSelectClick}
+        />
+      ) : (
+        <span onClick={handleSelectClick}>
+          <ElIcon class="img-select-icon">
+            <Plus />
+          </ElIcon>
+        </span>
+      );
+
+      return <div class="img-select">{imageVNode}</div>;
+    };
+  },
+});

package/src/components/image-select/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from "@maketribe/utils";
+import imageSelect from "./image-select";
+
+export const MKImageSelect = withInstall(imageSelect);
+
+export default MKImageSelect;

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from "./system-provider";
+export * from "./material-list";
+export * from "./material-select";
+export * from "./role-permission-config";
+export * from "./menu-permission-table";
+export * from "./image-select";
+export * from "./verify-dialog";
+export * from "./member-table";

package/src/components/material-list/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import MaterialList from "./material-list.vue";
+
+export const MKMaterialList = withInstall(MaterialList);
+export default MKMaterialList;
+
+export * from "./material-list-options";

package/src/components/material-list/material-group-form-popover.vue

@@ -0,0 +1,66 @@
+<template>
+  <ElPopover
+    v-model:visible="visible"
+    title="添加素材分组"
+    effect="light"
+    placement="right"
+    trigger="click"
+    width="320"
+  >
+    <template #reference>
+      <slot></slot>
+    </template>
+
+    <div>
+      <MKDataForm :data-form="materialGroupForm"  v-loading="loading" />
+      <div style=" display: flex; align-items: center; justify-content: space-between;">
+        <ElButton type="primary" :loading="!allowSubmit" @click="handleSaveClick" >
+          保存
+        </ElButton>
+        <ElButton @click="handleCancelClick">取消</ElButton>
+      </div>
+    </div>
+  </ElPopover>
+</template>
+
+<script setup lang="ts">
+import { Ref, computed, ref, unref } from "vue";
+import { ElMessage } from "element-plus";
+import { MKDataForm } from "@maketribe/dm-ui";
+import { MaterialGroupForm, MaterialMan } from "../../dataview";
+
+const props = defineProps({
+  materialMan: {
+    type: MaterialMan,
+    required: true,
+  },
+  materialGroupForm: {
+    type: MaterialGroupForm,
+    required: true,
+  },
+});
+
+const visible: Ref<boolean> = ref(false);
+
+const loading = computed(() => props.materialGroupForm.loading);
+const allowSubmit = computed(
+  () => !!(unref(loading) || !props.materialGroupForm.allowSubmit)
+);
+
+const handleSaveClick = async () => {
+  const result = await props.materialGroupForm.submit();
+
+  if (result.data.code !== 200) {
+    ElMessage.error(result.data.msg);
+    return;
+  }
+
+  props.materialMan.materialGroupTable.load();
+
+  visible.value = false;
+};
+
+const handleCancelClick = () => {
+  visible.value = false;
+};
+</script>

package/src/components/material-list/material-group.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="mk-material-group" v-loading="loading">
+    <div class="mk-material-group__header">
+      <div class="mk-material-group__header-title">素材分组</div>
+      <MaterialGroupFromPopper
+        :material-man="materialMan"
+        :material-group-form="materialGroupForm"
+      >
+        <ElButton
+          @click="handleAddClick"
+          :icon="Plus"
+          size="small"
+          type="primary"
+        >
+        </ElButton>
+      </MaterialGroupFromPopper>
+    </div>
+    <div class="mk-material-group__main">
+      <ElScrollbar height="100%">
+        <MKDataTree
+          :auto-load="false"
+          :data-table="materialGroupTable"
+          :props="{ label: 'desc', children: 'children' }"
+          highlight-current
+          @nodeClick="handleNodeClick"
+        >
+          <template #node-tools="{ data }">
+            <div class="mk-material-group__tools" @click.stop>
+              <ElTooltip content="添加">
+                <span class="mk-material-group__tools-item">
+                  <MaterialGroupFromPopper
+                    :material-man="materialMan"
+                    :material-group-form="materialGroupForm"
+                  >
+                    <ElIcon @click="handleAddClick(data)"><Plus /></ElIcon>
+                  </MaterialGroupFromPopper>
+                </span>
+              </ElTooltip>
+              <ElTooltip content="编辑">
+                <span class="mk-material-group__tools-item">
+                  <MaterialGroupFromPopper
+                    :material-man="materialMan"
+                    :material-group-form="materialGroupForm"
+                  >
+                    <ElIcon @click="handleEditClick(data)"><Edit /></ElIcon>
+                  </MaterialGroupFromPopper>
+                </span>
+              </ElTooltip>
+              <ElTooltip content="删除">
+                <span class="mk-material-group__tools-item">
+                  <ElIcon @click="handleDeleteClick(data)"><Delete /></ElIcon>
+                </span>
+              </ElTooltip>
+            </div>
+          </template>
+        </MKDataTree>
+      </ElScrollbar>
+    </div>
+    <div class="mk-material-group__footer"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, reactive } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Plus, Edit, Delete } from "@element-plus/icons";
+import {
+  MaterialMan,
+  MaterialGroupNode,
+  MaterialGroupForm,
+  Material,
+} from "../../dataview";
+import { MKDataTree, useI18n } from "@maketribe/dm-ui";
+import MaterialGroupFromPopper from "./material-group-form-popover.vue";
+
+const props = defineProps({
+  materialMan: {
+    type: MaterialMan,
+    required: true,
+  },
+});
+
+const i18n = useI18n()!;
+
+const materialGroupForm = reactive(
+  new MaterialGroupForm()
+) as MaterialGroupForm;
+
+(window as any).materialGroupForm = materialGroupForm;
+
+const materialGroupTable = computed(() => props.materialMan.materialGroupTable);
+
+const loading = computed(() => props.materialMan.materialGroupTable.loading);
+
+const handleNodeClick = (item: MaterialGroupNode) => {
+  if (!item.children.length) {
+    props.materialMan.setCurrentMaterialGroupId(item.id);
+  }
+};
+
+const handleAddClick = async (parent?: MaterialGroupNode) => {
+  materialGroupForm.addRecord();
+
+  await nextTick();
+
+  materialGroupForm.setData({
+    ...materialGroupForm.data,
+    parentGroupId: parent?.id || null,
+  } as MaterialGroupNode);
+};
+
+const handleEditClick = (item: MaterialGroupNode) => {
+  materialGroupForm.editRecord(item);
+};
+
+const handleDeleteClick = async (item: MaterialGroupNode) => {
+  const isConfirm = await ElMessageBox.confirm(
+    i18n.translate("mk.dataTablePage.deleteMessage"),
+    i18n.translate("mk.dataTablePage.deleteTitle"),
+    { type: "warning" }
+  ).then(
+    () => true,
+    () => false
+  );
+
+  if (!isConfirm) {
+    return;
+  }
+
+  const result =
+    await props.materialMan.materialGroupTable.deleteRecordAfterRefresh(item);
+
+  if (result.data.code !== 200) {
+    ElMessage.error(result.data.msg);
+    return;
+  }
+};
+</script>

package/src/components/material-list/material-item.vue

@@ -0,0 +1,26 @@
+<template>
+  <ElCard class="mk-material-item" shadow="never">
+    <div class="mk-material-item__preview">
+      <MaterialComponent :src="material.path" />
+    </div>
+    <div class="mk-material-item__title">{{ material.desc }}</div>
+  </ElCard>
+</template>
+
+<script setup lang="ts">
+import { Material, MaterialTable } from "../../dataview";
+import { computed, toRaw } from "vue";
+
+const props = defineProps({
+  materialTable: { type: MaterialTable, required: true },
+  material: { type: Object, required: true },
+});
+
+const MaterialComponent = computed(() => {
+  const component =
+    props.materialTable.resolveMaterialComponent(props.material as Material) ||
+    props.materialTable.materialComponents.resolveComponent("MKFileView")!;
+
+  return toRaw(component.component);
+});
+</script>