@maketribe/ms-app 3.0.38 → 3.0.40

package/src/components/upload-file/ui/upload-image/upload-image.tsx

@@ -1,337 +0,0 @@
-import {
-  Fragment,
-  Ref,
-  VNode,
-  computed,
-  defineComponent,
-  ref,
-  unref,
-  watch,
-} from "vue";
-import { ElImage, ElTooltip, ElImageViewer } from "element-plus";
-import { MKSvgIcon } from "../../../svg-icon";
-import { MKUploadFile } from "../../upload-file";
-import { uploadImageEmits, uploadImageProps } from "./upload-image-options";
-import { UploadContext } from "../../context";
-
-const MKUploadImageItem = defineComponent({
-  name: "MKUploadImageItem",
-  props: {
-    modelValue: {
-      type: String,
-      default: "",
-    },
-    uploadContext: {
-      type: UploadContext,
-      required: true,
-    },
-  },
-  emits: ["update:modelValue", "view", "delete"],
-  setup(props, { emit }) {
-    const uploadFileInstance: Ref<InstanceType<typeof MKUploadFile> | null> =
-      ref(null);
-
-    const imageInstance: Ref<InstanceType<typeof ElImage> | null> = ref(null);
-
-    const modelValue = computed({
-      get: () => props.modelValue as string,
-      set: (v: string) => {
-        emit("update:modelValue", v);
-      },
-    });
-
-    const handleUpdateModelValue = (v: string) => {
-      modelValue.value = v;
-    };
-
-    const handleClick = (event: MouseEvent) => {
-      event.stopPropagation();
-
-      if (unref(modelValue)) {
-        return;
-      }
-
-      unref(uploadFileInstance)?.handleUpload();
-    };
-
-    const handleView = (event: MouseEvent) => {
-      event.stopPropagation();
-
-      emit("view", unref(modelValue));
-    };
-
-    const handleDelete = (event: MouseEvent) => {
-      event.stopPropagation();
-
-      // modelValue.value = "";
-      emit("delete", unref(modelValue));
-    };
-
-    return () => {
-      let content;
-
-      if (unref(modelValue)) {
-        content = (
-          <Fragment>
-            <ElImage
-              ref={
-                ((el: InstanceType<typeof ElImage>) =>
-                  (imageInstance.value = el)) as any
-              }
-              src={unref(modelValue)}
-              class="mk-upload-image-item__image"
-              fit="cover"
-            />
-
-            <div class="mk-upload-image-item__mask">
-              <ElTooltip content="查看">
-                <MKSvgIcon iconClass="View" onClick={handleView} />
-              </ElTooltip>
-              <ElTooltip content="删除">
-                <MKSvgIcon iconClass="Delete" onClick={handleDelete} />
-              </ElTooltip>
-            </div>
-          </Fragment>
-        );
-      } else {
-        content = <MKSvgIcon iconClass="Plus" />;
-      }
-
-      return (
-        <div class="mk-upload-image-item">
-          <MKUploadFile
-            modelValue={props.modelValue}
-            onUpdate:modelValue={handleUpdateModelValue}
-            uploadContext={props.uploadContext}
-            ref={
-              ((el: InstanceType<typeof MKUploadFile>) =>
-                (uploadFileInstance.value = el)) as any
-            }
-          >
-            <div class="mk-upload-image-item__wrapper" onClick={handleClick}>
-              {content}
-            </div>
-          </MKUploadFile>
-        </div>
-      );
-    };
-  },
-});
-
-export default defineComponent({
-  name: "MKUploadImage",
-  props: uploadImageProps,
-  emits: uploadImageEmits,
-  setup(props, { emit }) {
-    const modelValue = computed({
-      get: () => props.modelValue as string[] | string,
-      set: (v: string[] | string) => emit("update:modelValue", v),
-    });
-
-    const currentImageSrc: Ref<string> = ref("");
-
-    const multiple = computed(() => props.multiple);
-
-    const isShowImageViewer: Ref<boolean> = ref(false);
-
-    watch(
-      computed(() => [unref(modelValue), unref(multiple)]),
-      ([value, multiple]) => {
-        if (multiple && !Array.isArray(value)) {
-          modelValue.value = [];
-        }
-      },
-      { immediate: true }
-    );
-
-    const handleDelete = (src: string) => {
-      if (!unref(multiple)) {
-        modelValue.value = "";
-        return;
-      }
-
-      const index = unref(modelValue).indexOf(src);
-
-      if (index === -1) {
-        return;
-      }
-
-      (modelValue.value as string[]).splice(index, 1);
-    };
-
-    const handleShowImageViewer = (src: string) => {
-      isShowImageViewer.value = true;
-      currentImageSrc.value = src;
-    };
-
-    const handleCloseImageViewer = () => {
-      isShowImageViewer.value = false;
-    };
-
-    const handleAppendImage = (src: string) => {
-      const _value = unref(modelValue);
-
-      if (Array.isArray(_value)) {
-        _value.push(src);
-      }
-    };
-
-    return () => {
-      const _multiple = unref(multiple);
-
-      let content;
-
-      if (!_multiple) {
-        content = (
-          <MKUploadImageItem
-            onView={handleShowImageViewer}
-            onDelete={handleDelete}
-            modelValue={unref(modelValue) as string}
-            onUpdate:modelValue={(value) => (modelValue.value = value)}
-            uploadContext={props.uploadContext}
-          />
-        );
-      } else {
-        let images: VNode[] | null = null;
-
-        if (Array.isArray(unref(modelValue))) {
-          images = (unref(modelValue) as string[]).map((src) => (
-            <MKUploadImageItem
-              onView={handleShowImageViewer}
-              onDelete={handleDelete}
-              modelValue={src}
-              uploadContext={props.uploadContext}
-            />
-          ));
-        }
-
-        content = (
-          <Fragment>
-            {images}
-            <MKUploadImageItem
-              onUpdate:modelValue={handleAppendImage}
-              uploadContext={props.uploadContext}
-            />
-          </Fragment>
-        );
-      }
-
-      const imageViewer = unref(isShowImageViewer) ? (
-        <ElImageViewer
-          onClose={handleCloseImageViewer}
-          urlList={[unref(currentImageSrc)]}
-        />
-      ) : null;
-
-      return (
-        <div class="mk-upload-image">
-          {content}
-          {imageViewer}
-        </div>
-      );
-    };
-  },
-  // setup(props, { emit }) {
-  //   const uploadFileInstance: Ref<InstanceType<typeof MKUploadFile> | null> =
-  //     ref(null);
-
-  //   const imageInstance: Ref<InstanceType<typeof ElImage> | null> = ref(null);
-
-  //   const isShowImageViewer: Ref<boolean> = ref(false);
-
-  //   const modelValue = computed({
-  //     get: () => props.modelValue as string,
-  //     set: (v: string) => {
-  //       emit("update:modelValue", v);
-  //     },
-  //   });
-
-  //   const handleUpdateModelValue = (v: string) => {
-  //     modelValue.value = v;
-  //   };
-
-  //   const handleClick = (event: MouseEvent) => {
-  //     event.stopPropagation();
-
-  //     if (unref(modelValue)) {
-  //       return;
-  //     }
-
-  //     unref(uploadFileInstance)?.handleUpload();
-  //   };
-
-  //   const handleView = (event: MouseEvent) => {
-  //     event.stopPropagation();
-
-  //     isShowImageViewer.value = true;
-  //   };
-
-  //   const handleCloseImageViewer = () => {
-  //     isShowImageViewer.value = false;
-  //   };
-
-  //   const handleDelete = (event: MouseEvent) => {
-  //     event.stopPropagation();
-
-  //     modelValue.value = "";
-  //   };
-
-  //   return () => {
-  //     let content;
-
-  //     if (unref(modelValue)) {
-  //       const imageViewer = unref(isShowImageViewer) ? (
-  //         <ElImageViewer
-  //           onClose={handleCloseImageViewer}
-  //           urlList={[unref(modelValue)]}
-  //         />
-  //       ) : null;
-
-  //       content = (
-  //         <Fragment>
-  //           <ElImage
-  //             ref={
-  //               ((el: InstanceType<typeof ElImage>) =>
-  //                 (imageInstance.value = el)) as any
-  //             }
-  //             src={unref(modelValue)}
-  //             class="mk-upload-image__image"
-  //             fit="cover"
-  //           />
-
-  //           {imageViewer}
-
-  //           <div class="mk-upload-image__mask">
-  //             <ElTooltip content="查看">
-  //               <MKSvgIcon iconClass="View" onClick={handleView} />
-  //             </ElTooltip>
-  //             <ElTooltip content="删除">
-  //               <MKSvgIcon iconClass="Delete" onClick={handleDelete} />
-  //             </ElTooltip>
-  //           </div>
-  //         </Fragment>
-  //       );
-  //     } else {
-  //       content = <MKSvgIcon iconClass="Plus" />;
-  //     }
-
-  //     return (
-  //       <div class="mk-upload-image">
-  //         <MKUploadFile
-  //           modelValue={props.modelValue}
-  //           onUpdate:modelValue={handleUpdateModelValue}
-  //           uploadContext={props.uploadContext}
-  //           ref={
-  //             ((el: InstanceType<typeof MKUploadFile>) =>
-  //               (uploadFileInstance.value = el)) as any
-  //           }
-  //         >
-  //           <div class="mk-upload-image__wrapper" onClick={handleClick}>
-  //             {content}
-  //           </div>
-  //         </MKUploadFile>
-  //       </div>
-  //     );
-  //   };
-  // },
-});

package/src/components/upload-file/upload-file-options.ts

@@ -1,22 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { UploadContext } from "./context";
-import { MaterialUploadContext } from "./context/MaterialUploadContext";
-
-export const uploadFileProps = buildProps({
-  modelValue: {
-    type: String,
-  },
-  uploadContext: {
-    type: UploadContext,
-    default: () => new MaterialUploadContext(),
-  },
-} as const);
-
-export type UploadFileProps = ExtractPropTypes<typeof uploadFileProps>;
-
-export const uploadFileEmits = {
-  "update:modelValue": (path: string) => true,
-};
-
-export type UploadFileEmits = typeof uploadFileEmits;

package/src/components/upload-file/upload-file.tsx

@@ -1,69 +0,0 @@
-import { computed, defineComponent, inject, unref } from "vue";
-import { uploadFileEmits, uploadFileProps } from "./upload-file-options";
-import { ElMessage } from "element-plus";
-import { UploadContextCtxKey } from "./context";
-import { withInstall } from "@maketribe/utils";
-
-/**
- * 文件上传
- *
- * 文件上传在本后台中有两大分类
- * 1.直接上传文件
- * 2.使用素材库文件
- *
- * 文件上传的界面交互又会分为几种情况
- * 1.单文件上传（单文件上传，可能会根据。文件情况的不同，界面显示方式不一样）
- * 2.多文件上传（多文件上传基于单文件的逻辑，不过是会变成多个文件）
- *
- * 希望文件交互组件不需要用了解是直接上传文件或使用素材库。
- *
- */
-
-const _UploadFile = defineComponent({
-  name: "MKUploadFile",
-  props: uploadFileProps,
-  emits: uploadFileEmits,
-  setup(props, { emit }) {
-    const uploadContextCtx = inject(UploadContextCtxKey, null);
-
-    const value = computed({
-      get: () => props.modelValue as string,
-      set: (v: string) => emit("update:modelValue", v),
-    });
-
-    const uploadContext = computed(
-      () => uploadContextCtx?.uploadContext || props.uploadContext
-    );
-
-    const handleUpload = async () => {
-      try {
-        const uploadResult = await unref(uploadContext).selectFile();
-
-        if (uploadResult.success) {
-          value.value = uploadResult.path || value.value;
-          return;
-        }
-
-        ElMessage.error(uploadResult.msg);
-      } catch (e) {
-        console.error(e);
-        ElMessage.error("网络异常");
-      }
-    };
-
-    return {
-      handleUpload,
-    };
-  },
-  render() {
-    const { handleUpload, $slots } = this;
-
-    return (
-      <span class="mk-upload-file" onClick={handleUpload}>
-        {$slots.default?.()}
-      </span>
-    );
-  },
-});
-
-export const MKUploadFile = withInstall(_UploadFile);

package/src/components/verify-dialog/index.ts

@@ -1,5 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import VerifyDialog from "./verify-dialog";
-
-export const MKVerifyDialog = withInstall(VerifyDialog);
-export default MKVerifyDialog;

package/src/components/verify-dialog/verify-dialog-option.ts

@@ -1,24 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-
-export const verifyDialogProps = buildProps({
-  visible: {
-    type: Boolean,
-    required: true,
-  },
-  scene: {
-    type: String,
-    required: true,
-  },
-  width: {
-    type: String,
-    default: "300px",
-  },
-} as const);
-
-export const verifyDialogEmits = {
-  "update:visible": (modelValue: any) => true,
-
-  confirm: (modelValue: any) => true,
-};
-export type VerifyDialogProps = ExtractPropTypes<typeof verifyDialogEmits>;

package/src/components/verify-dialog/verify-dialog.tsx

@@ -1,179 +0,0 @@
-import {
-  computed,
-  defineComponent,
-  unref,
-  ref,
-  onMounted,
-  watch,
-  Ref,
-} from "vue";
-import { ElDialog, ElSlider, ElButton } from "element-plus";
-import { useHttpRequest } from "../../composables";
-import { verifyDialogProps, verifyDialogEmits } from "./verify-dialog-option";
-import { Disposable, createDisposable } from "@maketribe/utils";
-
-export default defineComponent({
-  name: "MKVerifyDialog",
-  props: verifyDialogProps,
-  emits: verifyDialogEmits,
-  // expose: ["fail"],
-  setup(props, { emit, expose }) {
-    const wrapperEl: Ref<HTMLElement | null> = ref(null);
-    const buttonEl: Ref<HTMLElement | null> = ref(null);
-    const grandEl: Ref<HTMLElement | null> = ref(null);
-    // 样式默认宽度是48px
-    let slideWidth: number = 48;
-
-    const isError = ref(false);
-
-    const deg = ref(0);
-
-    const httpRequest = useHttpRequest();
-
-    const imageUrl = ref("");
-
-    const imageStyle = computed(() => {
-      return {
-        backgroundImage: `url(${unref(imageUrl)})`,
-        transform: `rotate(-${unref(deg)}deg)`,
-      };
-    });
-
-    const visible = computed({
-      get: () => props.visible,
-      set: (v) => emit("update:visible", v),
-    });
-
-    const getImage = async () => {
-      const params = { scene: props.scene };
-
-      const response = await httpRequest!.get(
-        "/api/open/verification/rotation/image",
-        {
-          params,
-          responseType: "blob",
-        }
-      );
-
-      return response.data ?? null;
-    };
-
-    const handleSwitchConfirm = () => {
-      emit("confirm", unref(deg));
-    };
-
-    const handleMouseDown = (mouseDownEvent: MouseEvent) => {
-      if (unref(isError)) {
-        return;
-      }
-
-      const disposable = new Disposable();
-
-      const totalWidth = unref(wrapperEl)!.getBoundingClientRect().width;
-
-      const handleMouseMove = (event: MouseEvent) => {
-        // 限定宽度范围
-        slideWidth = Math.min(
-          Math.max(event.clientX - mouseDownEvent.clientX + 48, 48),
-          totalWidth
-        );
-
-        deg.value = Math.floor(((slideWidth - 48) / (totalWidth - 48)) * 360);
-
-        unref(grandEl)!.style.width = `${slideWidth}px`;
-        unref(buttonEl)!.style.transform = `translateX(${slideWidth - 48}px)`;
-      };
-
-      const handleMouseUp = (event: MouseEvent) => {
-        if (deg.value !== 0) {
-          handleSwitchConfirm();
-        }
-
-        disposable.dispose();
-      };
-
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-
-      disposable.register(
-        createDisposable(() => {
-          document.removeEventListener("mousemove", handleMouseMove);
-          document.removeEventListener("mouseup", handleMouseUp);
-        })
-      );
-    };
-
-    const reset = () => {
-      unref(grandEl)!.style.width = ``;
-      unref(buttonEl)!.style.transform = ``;
-    };
-
-    expose({
-      fail: () => {
-        isError.value = true;
-
-        setTimeout(() => {
-          isError.value = false;
-
-          reset();
-        }, 1000);
-      },
-    });
-
-    onMounted(() => {
-      watch(
-        visible,
-        async (visible, _, onCleanup) => {
-          if (visible) {
-            const blob = await getImage();
-
-            const url = URL.createObjectURL(blob);
-            imageUrl.value = url;
-
-            onCleanup(() => {
-              URL.revokeObjectURL(url);
-            });
-          }
-        },
-        { immediate: true }
-      );
-    });
-    return () => {
-      return (
-        <ElDialog
-          modelValue={visible.value}
-          onUpdate:modelValue={(v: boolean) => (visible.value = v)}
-          modal-class="mk-verify-dialog"
-          width={props.width}
-          title="请完成下方验证后继续操作"
-          appendToBody
-        >
-          <div class="mk-verify-dialog__wrapper">
-            <div
-              class="mk-verify-dialog__image"
-              ref="imageEl"
-              style={imageStyle.value}
-            />
-            <div class="mk-verify-dialog__coordinate" />
-          </div>
-          <div class={["mk-verify-switch", unref(isError) ? "is-error" : ""]}>
-            <div
-              class="mk-verify-switch__wrapper"
-              ref={((el: HTMLDivElement) => (wrapperEl.value = el)) as any}
-            >
-              <div
-                class="mk-verify-switch__button-grand"
-                ref={((el: HTMLDivElement) => (grandEl.value = el)) as any}
-              />
-              <div
-                class="mk-verify-switch__button"
-                ref={((el: HTMLDivElement) => (buttonEl.value = el)) as any}
-                onMousedown={handleMouseDown}
-              />
-            </div>
-          </div>
-        </ElDialog>
-      );
-    };
-  },
-});

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

@@ -1,7 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import VideoView from "./video-view";
-
-export const MKVideoView = withInstall(VideoView);
-export default MKVideoView;
-
-export * from "./video-view-options";

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

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