@maketribe/ms-app 3.0.29 → 3.0.31

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

@@ -0,0 +1,11 @@
+import { MKUploadFile } from "./upload-file";
+
+export { MKUploadFile };
+
+export default MKUploadFile;
+
+export * from "./upload-file";
+export * from "./context";
+export * from "./ui";
+
+export * from "./upload-file-options";

package/src/components/upload-file/ui/index.ts

@@ -0,0 +1 @@
+export * from "./upload-image";

package/src/components/upload-file/ui/upload-image/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import UploadImage from "./upload-image";
+
+export const MKUploadImage = withInstall(UploadImage);
+export default MKUploadImage;
+
+export * from "./upload-image-options";

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

@@ -0,0 +1,25 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { MaterialUploadContext, UploadContext } from "../../context";
+
+export const uploadImageProps = buildProps({
+  uploadContext: {
+    type: UploadContext,
+    default: () => new MaterialUploadContext(),
+  },
+  modelValue: {
+    type: [String, Array<String>],
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+} as const);
+
+export type UploadImageProps = ExtractPropTypes<typeof uploadImageProps>;
+
+export const uploadImageEmits = {
+  "update:modelValue": (path: string | string[]) => true,
+};
+
+export type UploadImageEmits = typeof uploadImageEmits;

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

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

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

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

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

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

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

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