@maketribe/ms-app 3.0.30 → 3.0.31

package/src/components/video-view/video-view-options.ts

@@ -0,0 +1,10 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const videoViewProps = buildProps({
+  src: { type: String, required: true },
+  poster: { type: String, required: false },
+  dialogWidth: { type: String, default: "800px" },
+} as const);
+
+export type VideoViewProps = ExtractPropTypes<typeof videoViewProps>;

package/src/components/video-view/video-view.tsx

@@ -0,0 +1,115 @@
+import { Fragment, Ref, defineComponent, ref, unref, watch } from "vue";
+import { ElButton, ElDialog, ElIcon } from "element-plus";
+import { Film, View, Download, Close } from "@element-plus/icons-vue";
+import MKImageView from "../image-view";
+import { videoViewProps } from "./video-view-options";
+
+export default defineComponent({
+  name: "MKVideoView",
+  props: videoViewProps,
+  setup(props) {
+    const isShowVideoDialog = ref(false);
+
+    const videoEl: Ref<HTMLVideoElement | null> = ref(null);
+
+    const handleViewClick = () => {
+      isShowVideoDialog.value = true;
+    };
+
+    const handleDownloadClick = () => {
+      if (!props.src) {
+        return;
+      }
+
+      const a = document.createElement("a");
+      a.setAttribute("download", new Date().getTime().toString());
+      a.target = "_blank";
+      a.href = props.src;
+      Object.assign(a.style, { width: "1px", height: "1px" });
+
+      document.body.append(a);
+      a.click();
+
+      setTimeout(() => {
+        document.body.removeChild(a);
+      });
+    };
+
+    watch(isShowVideoDialog, (isShowVideoDialog) => {
+      if (!unref(videoEl)) {
+        return;
+      }
+
+      if (!isShowVideoDialog) {
+        unref(videoEl)!.pause();
+        unref(videoEl)!.currentTime = 0;
+      }
+    });
+
+    return () => (
+      <div class="mk-video-view">
+        <MKImageView
+          src={props.src}
+          showPreview={false}
+          v-slots={{
+            error: () => {
+              return (
+                <Fragment>
+                  <ElIcon size="20">
+                    <Film />
+                  </ElIcon>
+                  <div class="mk-video-view__tools">
+                    <ElButton
+                      type="primary"
+                      icon={View}
+                      onClick={handleViewClick}
+                    />
+                    <ElButton
+                      type="primary"
+                      icon={Download}
+                      onClick={handleDownloadClick}
+                    />
+                  </div>
+                </Fragment>
+              );
+            },
+          }}
+        />
+        <ElDialog
+          appendToBody
+          showClose={false}
+          width={props.dialogWidth}
+          modelValue={unref(isShowVideoDialog)}
+          onUpdate:modelValue={(v) => {
+            isShowVideoDialog.value = v;
+          }}
+          v-slots={{
+            header: (scope: any) => {
+              return (
+                <div class="mk-video-view__dialog-header">
+                  <ElButton
+                    type="primary"
+                    icon={Download}
+                    onClick={handleDownloadClick}
+                  >
+                    下载
+                  </ElButton>
+                  <ElButton icon={Close} onClick={scope.close} />
+                </div>
+              );
+            },
+          }}
+        >
+          <video
+            class="mk-video-view__video"
+            src={props.src}
+            draggable="false"
+            preload="true"
+            controls
+            ref={(el: any) => (videoEl.value = el)}
+          />
+        </ElDialog>
+      </div>
+    );
+  },
+});

package/src/composables/create-data-form.ts

@@ -0,0 +1,6 @@
+import { reactive } from "vue";
+import { DataForm, DataFormOptions } from "@maketribe/dm";
+
+export const createDataForm = (dataFormOptions: DataFormOptions): DataForm => {
+  return reactive(new DataForm(dataFormOptions)) as DataForm;
+};

package/src/composables/create-data-table.ts

@@ -0,0 +1,8 @@
+import { reactive } from "vue";
+import { DataTable, DataTableOptions } from "@maketribe/dm";
+
+export const createDataTable = (
+  dataTableOptions: DataTableOptions
+): DataTable => {
+  return reactive(new DataTable(dataTableOptions)) as DataTable;
+};

package/src/composables/index.ts

@@ -0,0 +1,17 @@
+export * from "./create-data-table";
+export * from "./create-data-form";
+export * from "./use-column-component";
+export * from "./use-i18n";
+export * from "./on-tab-before-close";
+export * from "./on-tab-refresh";
+export * from "./on-tab-before-switch";
+export * from "./use-current-tab";
+export * from "./use-http-request";
+export * from "./use-ms-app-client";
+export * from "./use-user-info";
+export * from "./on-tab-before-close";
+export * from "./on-tab-refresh";
+export * from "./use-current-tab";
+export * from "./use-http-request";
+export * from "./use-ms-app-client";
+export * from "./use-user-info";

package/src/composables/on-tab-before-close.ts

@@ -0,0 +1,8 @@
+import { EventCallback } from "@maketribe/utils";
+import { MSAppClient } from "../core/MSAppClient";
+
+export const onTabBeforeClose = (callback: EventCallback<undefined>) => {
+  MSAppClient.instance!.userSession!.tabs.getCurrentTab()?.beforeCloseEvent.once(
+    callback
+  );
+};

package/src/composables/on-tab-before-switch.ts

@@ -0,0 +1,8 @@
+import { EventCallback } from "@maketribe/utils";
+import { MSAppClient } from "../core";
+
+export const onTabBeforeSwitch = (callback: EventCallback<undefined>) => {
+  MSAppClient.instance!.userSession!.tabs.getCurrentTab()?.beforeCloseEvent.on(
+    callback
+  );
+};

package/src/composables/on-tab-refresh.ts

@@ -0,0 +1,8 @@
+import { EventCallback } from "@maketribe/utils";
+import { MSAppClient } from "../core";
+
+export const onTabRefresh = (callback: EventCallback<undefined>) => {
+  MSAppClient.instance!.userSession!.tabs.getCurrentTab()?.beforeSwitchEvent.on(
+    callback
+  );
+};

package/src/composables/use-column-component.ts

@@ -0,0 +1,184 @@
+import { unref, computed, Ref, MaybeRef, ComputedRef, watch, ref } from "vue";
+import {
+  Column,
+  Component,
+  ComponentsCombine,
+  DataForm,
+  DataTable,
+  FilterColumn,
+  DataFilter,
+  FormColumn,
+  IComponents,
+  TableColumn,
+  isWhereFilter,
+} from "@maketribe/dm";
+import { useGlobalConfig } from "../components/config-provider";
+
+export const useComponent = (
+  componentName: MaybeRef<string>,
+  components: MaybeRef<IComponents>
+): {
+  componentInfo: ComputedRef<Component | null>;
+  component: ComputedRef<any>;
+  componentProps: ComputedRef<Record<string, any> | null>;
+} => {
+  const componentInfo = computed(() =>
+    unref(components).resolveComponent(unref(componentName))
+  );
+
+  const component = computed(() => unref(componentInfo)?.component ?? null);
+
+  const componentProps = computed(() => {
+    const componentProps = unref(componentInfo)?.defaultProps ?? null;
+
+    return componentProps ? { ...componentProps } : null;
+  });
+
+  return { componentInfo, component, componentProps };
+};
+
+export const useComponentWithDefault = (
+  componentInfo: ReturnType<typeof useComponent>,
+  defaultComponentInfo: ReturnType<typeof useComponent>
+) => {
+  const _componentInfo = computed(() =>
+    unref(componentInfo.componentInfo)
+      ? unref(componentInfo.componentInfo)
+      : unref(defaultComponentInfo.componentInfo)
+  );
+
+  const _componentProps = computed(() =>
+    unref(componentInfo.componentInfo)
+      ? unref(componentInfo.componentProps)
+      : unref(defaultComponentInfo.componentProps)
+  );
+
+  const _component = computed(() =>
+    unref(componentInfo.componentInfo)
+      ? unref(componentInfo.component)
+      : unref(defaultComponentInfo.component)
+  );
+
+  return {
+    componentInfo: _componentInfo,
+    componentProps: _componentProps,
+    component: _component,
+  };
+};
+
+export const useColumnComponent = (
+  column: Ref<Column | null> | Column,
+  components: Ref<IComponents> | IComponents
+) => {
+  const columnComponentInfo = computed(
+    () => unref(column)?.componentInfo || ""
+  );
+
+  const componentInfo: Ref<Component | null> = ref(null);
+  watch(
+    columnComponentInfo,
+    (columnComponentInfo) => {
+      if (typeof columnComponentInfo === "string") {
+        const { componentInfo: _componentInfo } = useComponent(
+          columnComponentInfo,
+          components
+        );
+
+        componentInfo.value = unref(_componentInfo);
+        return;
+      }
+
+      componentInfo.value = columnComponentInfo;
+    },
+    { immediate: true }
+  );
+
+  const component = computed(() => unref(componentInfo)?.component ?? null);
+  const componentProps = computed(() => {
+    const _componentInfo = unref(componentInfo);
+
+    if (!_componentInfo) {
+      return null;
+    }
+
+    return {
+      ..._componentInfo.defaultProps,
+      ...unref(column)?.componentProps,
+    };
+  });
+
+  return {
+    componentInfo: computed(() => unref(componentInfo)),
+    component,
+    componentProps,
+  };
+};
+
+export const useTableColumnComponent = (
+  column: Ref<TableColumn | null> | TableColumn,
+  dataTable: Ref<DataTable | null> | DataTable
+) => {
+  const defaultDataTableComponents = useGlobalConfig("dataTableComponents");
+
+  const componentCombine = computed(() => {
+    const _defaultDataTableComponents = unref(defaultDataTableComponents);
+
+    const componentsList = ([unref(dataTable)] as IComponents[]).concat(
+      _defaultDataTableComponents ? [_defaultDataTableComponents] : []
+    );
+
+    return new ComponentsCombine({ componentsList });
+  });
+
+  return useComponentWithDefault(
+    useColumnComponent(column, componentCombine),
+    useComponent("MKColumnText", componentCombine)
+  );
+};
+
+export const useFormColumnComponent = (
+  column: Ref<FormColumn | null> | FormColumn,
+  dataForm: Ref<DataForm | null> | DataForm
+) => {
+  const defaultDataFormComponents = useGlobalConfig("dataFormComponents");
+
+  const componentCombine = computed(() => {
+    const _defaultDataFormComponents = unref(defaultDataFormComponents);
+
+    const componentsList = ([unref(dataForm)] as IComponents[]).concat(
+      _defaultDataFormComponents ? [_defaultDataFormComponents] : []
+    );
+
+    return new ComponentsCombine({ componentsList });
+  });
+
+  return useComponentWithDefault(
+    useColumnComponent(column, componentCombine),
+    useComponent("MKFormInput", componentCombine)
+  );
+};
+
+export const useFilterColumnComponent = (
+  column: Ref<FilterColumn | null> | FilterColumn,
+  dataFilter: Ref<DataFilter | null> | DataFilter
+) => {
+  const defaulDataFilterComponents = useGlobalConfig("dataFilterComponents");
+  const defaulWhereFilterComponents = useGlobalConfig("whereFilterComponents");
+
+  const componentCombine = computed(() => {
+    const systemComponents = isWhereFilter(unref(dataFilter))
+      ? unref(defaulWhereFilterComponents)
+      : unref(defaulDataFilterComponents);
+
+    const componentsList = ([unref(dataFilter)] as IComponents[]).concat(
+      systemComponents ? [systemComponents] : []
+    );
+
+    return new ComponentsCombine({ componentsList });
+  });
+
+  return useComponentWithDefault(
+    useColumnComponent(column, componentCombine),
+    useComponent("MKConditionInput", componentCombine)
+  );
+};

package/src/composables/use-current-tab.ts

@@ -0,0 +1,4 @@
+import { MSAppClient, Tab } from "../core";
+
+export const useCurrentTab = (): Tab | null =>
+  MSAppClient.instance!.userSession!.tabs.getCurrentTab() ?? null;

package/src/composables/use-http-request.ts

@@ -0,0 +1,5 @@
+import { HttpRequest } from "@maketribe/request";
+import { MSAppClient } from "../core";
+
+export const useHttpRequest = (): HttpRequest | null =>
+  MSAppClient.instance?.httpRequest ?? null;

package/src/composables/use-i18n.ts

@@ -0,0 +1,7 @@
+import { unref } from "vue";
+import { I18n } from "@maketribe/locale";
+import { useGlobalConfig } from "../components/config-provider";
+
+export const useI18n = (): I18n | null => {
+  return unref(useGlobalConfig("i18n")) ?? null;
+};

package/src/composables/use-ms-app-client.ts

@@ -0,0 +1,10 @@
+import { inject } from "vue";
+import { MSAppClient } from "../core";
+
+import { MSAPPCLIENT_CONTEXT_KEY } from "../tokens";
+
+export const useMSAppClient = (): MSAppClient | null => {
+  const msAppClientContext = inject(MSAPPCLIENT_CONTEXT_KEY);
+
+  return msAppClientContext?.msAppClient ?? null;
+};

package/src/composables/use-user-info.ts

@@ -0,0 +1,4 @@
+import { MSAppClient } from "../core";
+
+export const useUserInfo = () =>
+  MSAppClient.instance?.userSession?.userInfo ?? null;

package/src/constants/index.ts

@@ -0,0 +1,6 @@
+export * from "./pattern";
+export * from "./token";
+export * from "./route";
+export * from "./menu";
+export * from "./region";
+export * from "./log";

package/src/constants/log.ts

@@ -0,0 +1,5 @@
+export enum LoginLogType {
+  SUCCESS = 1,
+  FAILURE = 2,
+  LOCK = 3,
+}

package/src/constants/menu.ts

@@ -0,0 +1,5 @@
+export enum MenuType {
+  Container = "1",
+  Menu = "2",
+  SystemSettings = "3",
+}

package/src/constants/pattern.ts

@@ -0,0 +1,4 @@
+export const IP_PATTERN =
+  /^(1\d\d|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d\d|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d\d|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d\d|2[0-4]\d|25[0-5]|[1-9]\d|\d)$/;
+
+export const EMAIL_PATTERN = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;

package/src/constants/region.ts

@@ -0,0 +1,6 @@
+export enum RegionLevel {
+  Province = 1,
+  City = 2,
+  District = 3,
+  Town = 4,
+}

package/src/constants/route.ts

@@ -0,0 +1,4 @@
+export enum RouteType {
+  ROUTE = "0",
+  LINK = "1",
+}

package/src/constants/token.ts

@@ -0,0 +1,5 @@
+export const AUTHORIZATION_PREFIX = "Bearer";
+export const AUTHORIZATION = "Authorization";
+export const X_AUTHORIZATION = "X-Authorization";
+export const ACCESS_TOKEN_HEADER = "access-token";
+export const X_ACCESS_TOKEN_HEADER = "x-access-token";

package/src/core/DataModelDefines.ts

@@ -0,0 +1,72 @@
+import { DataTable, DataForm, DataTree } from "@maketribe/dm";
+
+export type DataTableClass = {
+  new (options: any): DataTable;
+};
+
+export type DataFormClass = {
+  new (options: any): DataForm;
+};
+
+export type DataTreeClass = {
+  new (options: any): DataTree;
+};
+
+/**
+ * 数据模型缓存
+ *
+ * 如果需要让自定义数据模型可以交给该类缓存，需要完成以下约束
+ * - 可以只传递name就可以创建出对应的类的实例
+ */
+export class DataModelDefines {
+  static instance = new DataModelDefines();
+
+  private _dataTableDefines: Map<string, DataTableClass>;
+  private _dataFormDefines: Map<string, DataFormClass>;
+  private _dataTreeDefines: Map<string, DataTreeClass>;
+
+  constructor() {
+    this._dataTableDefines = new Map();
+    this._dataFormDefines = new Map();
+    this._dataTreeDefines = new Map();
+  }
+
+  getDataTable(name: string): DataTable | null {
+    const DataTableDefine = this._dataTableDefines.get(name);
+
+    return DataTableDefine ? new DataTableDefine({}) : null;
+  }
+
+  getDataForm(name: string): DataForm | null {
+    const DataFormDefine = this._dataFormDefines.get(name);
+
+    return DataFormDefine ? new DataFormDefine({}) : null;
+  }
+
+  getDataTree(name: string): DataTree | null {
+    const DataTreeDefine = this._dataTreeDefines.get(name);
+
+    return DataTreeDefine ? new DataTreeDefine({}) : null;
+  }
+
+  registerDataTableDefine<T extends DataTableClass>(
+    name: string,
+    DataTableDefine: T
+  ) {
+    this._dataTableDefines.set(name, DataTableDefine);
+  }
+
+  registerDataFormDefine<T extends DataFormClass>(
+    name: string,
+    dataFormDefine: T
+  ) {
+    this._dataFormDefines.set(name, dataFormDefine);
+  }
+
+  registerDataTreeDefine<T extends DataTreeClass>(
+    name: string,
+    dataTreeDefine: T
+  ) {
+    this._dataTreeDefines.set(name, dataTreeDefine);
+  }
+}