@maketribe/ms-app 3.0.0 → 3.0.1

package/src/UserSession.ts

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

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

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

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

package/src/components/index.ts

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

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

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

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

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

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

@@ -1,23 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { MaterialMan } from "../../dataview";
-
-export const materialListProps = buildProps({
-  materialMan: {
-    type: MaterialMan,
-    required: true,
-  },
-  selectable: {
-    type: Boolean,
-    default: false,
-  },
-  selectedPath: {
-    type: String,
-  },
-} as const);
-
-export type MaterialListProps = ExtractPropTypes<typeof materialListProps>;
-
-export const materialListEmits = {
-  "update:selected-path": (path: any) => typeof path === "string",
-};

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

@@ -1,151 +0,0 @@
-<template>
-  <div class="mk-material-list">
-    <MaterialGroup :material-man="materialMan" />
-    <div class="mk-material-list__main" v-loading="loading">
-      <div class="mk-material-list__header">
-        <div class="mk-material-list__header-left">
-          <div class="mk-material-list__types">
-            <div
-              v-for="item of materialTypes"
-              :key="item.value"
-              :class="[
-                'mk-material-list__type',
-                currentMaterialTypeId === item.value ? 'is-active' : '',
-              ]"
-              @click="handleMaterialTypeClick(item)"
-            >
-              {{ item.label }}
-            </div>
-          </div>
-        </div>
-        <div class="mk-material-list__header-right">
-          <template v-if="currentMaterialType">
-            {{ currentMaterialType.label }}大小不超过
-            {{ currentMaterialType.limit }} M
-            <MKUploadFile
-              :upload="materialMan.upload"
-              :accept="currentMaterialType.accept"
-            >
-              <ElButton type="primary">
-                选择{{ currentMaterialType.label }}
-              </ElButton>
-            </MKUploadFile>
-          </template>
-        </div>
-      </div>
-
-      <div class="mk-material-list__body">
-        <ElScrollbar height="100%">
-          <div class="mk-material-list__wrapper">
-            <MaterialItem
-              v-for="material of materialList"
-              :key="material.id"
-              :class="[
-                'mk-material-list__item',
-                value === material.path ? 'is-current' : '',
-              ]"
-              :material-table="materialTable"
-              :material="material"
-              @click.capture="handleMaterialItemClick($event, material)"
-            />
-          </div>
-        </ElScrollbar>
-      <div class="mk-material-list__footer">
-        <ElPagination
-          class="mk-data-table-pagination"
-          :background="true"
-          :pageSizes="unref(pageSizes)"
-          :currentPage="unref(currentPage)"
-          :pageSize="unref(pageSize)"
-          :total="unref(totalRecCount)"
-          layout="prev, pager, next"
-          @current-change="changeCurrentPage"
-          @size-change="changePageSize"
-        />
-      </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, unref, watch } from "vue";
-import { ElPagination } from "element-plus";
-import { MKUploadFile } from "@maketribe/dm-ui";
-import { MaterialType, Material } from "../../dataview";
-import MaterialGroup from "./material-group.vue";
-import MaterialItem from "./material-item.vue";
-import { materialListProps, materialListEmits } from "./material-list-options";
-
-defineOptions({ name: "MKMaterialList" });
-
-const props = defineProps(materialListProps);
-
-const emit = defineEmits(materialListEmits);
-
-props.materialMan.init();
-
-const loading = computed(() => props.materialMan.materialTable.loading);
-
-const value = computed({
-  get: () => {
-    return props.selectable ? props.selectedPath ?? null : null;
-  },
-  set: (v) => {
-    emit("update:selected-path", v);
-  },
-});
-
-const materialTable = computed(() => props.materialMan.materialTable);
-const pageSizes = computed(() => unref(materialTable).pageSizes);
-const currentPage = computed({
-  get: () => unref(materialTable).currentPage,
-  set: (v) => {
-    unref(materialTable).pageTo(v);
-  },
-});
-const pageSize = computed({
-  get: () => unref(materialTable).pageSize,
-  set: (v) => {
-    unref(materialTable).setPageSize(v);
-  },
-});
-const totalRecCount = computed(() => unref(materialTable).totalRecCount);
-const changeCurrentPage = (v: number) => {
-  currentPage.value = v;
-};
-const changePageSize = (v: number) => {
-  pageSize.value = v;
-};
-
-
-
-const materialList = computed(() => unref(materialTable).getList());
-const materialTypes = computed(() => props.materialMan.materialTypes);
-const currentMaterialTypeId = computed(
-  () => props.materialMan.currentMaterialTypeId
-);
-
-const currentMaterialType = computed(
-  () => props.materialMan.currentMaterialType
-);
-
-const handleMaterialTypeClick = (materialType: MaterialType) => {
-  if (materialType.value === unref(currentMaterialTypeId)) {
-    return;
-  }
-
-  props.materialMan.setCurrentMaterialTypeId(materialType.value);
-};
-
-const handleMaterialItemClick = (event: MouseEvent, material: Material) => {
-  if (!props.selectable) {
-    return;
-  }
-
-  event.preventDefault();
-  event.stopPropagation();
-
-  value.value = material.path;
-};
-</script>

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

@@ -1,15 +0,0 @@
-import { App } from "vue";
-import { SFCWithInstall } from "@maketribe/utils";
-import MaterialSelect from "./material-select-api";
-
-const _MaterialSelect = MaterialSelect as SFCWithInstall<typeof MaterialSelect>;
-
-_MaterialSelect.install = (app: App) => {
-  _MaterialSelect._context = app._context;
-};
-
-export default _MaterialSelect;
-export const MKMaterialSelect = _MaterialSelect;
-
-export * from "./material-select-type";
-