hy-dispatch-ui-v3 0.1.5 → 0.2.0

package/es/components/appConfirmDialog/appConfirmDialog.vue.mjs

@@ -145,7 +145,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
             createElementVNode(
               "span",
               { class: "text-sm text-main font-bold" },
-              toDisplayString(__props.dialogTitle || unref(t)("confirmDialog.prompt")),
+              toDisplayString(__props.dialogTitle || unref(t)("dialog.prompt")),
               1
               /* TEXT */
             ),
@@ -212,7 +212,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
               }, {
                 default: withCtx(() => [
                   createTextVNode(
-                    toDisplayString(__props.cancelText || unref(t)("confirmDialog.cancel")),
+                    toDisplayString(__props.cancelText || unref(t)("dialog.cancel")),
                     1
                     /* TEXT */
                   )
@@ -228,7 +228,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
               }, {
                 default: withCtx(() => [
                   createTextVNode(
-                    toDisplayString(__props.submitText || unref(t)("confirmDialog.confirm")),
+                    toDisplayString(__props.submitText || unref(t)("dialog.confirm")),
                     1
                     /* TEXT */
                   )

package/es/components/appConfirmDialog/appConfirmMethod.mjs

@@ -2,8 +2,8 @@ import { unref, createVNode, render } from 'vue';
 import { defaultAxios } from '../../hooks/useApi.mjs';
 import { AppConfigProvider } from '../appConfigProvider/index.mjs';
 import _sfc_main from './appConfirmDialog.vue.mjs';
-import { useGlobalConfig } from '../../hooks/useGlobalConfig.mjs';
 import { useLocale } from '../../hooks/useLocale.mjs';
+import { useGlobalConfig } from '../../hooks/useGlobalConfig.mjs';
 
 function appConfirmMethod(config) {
   let container = document.createDocumentFragment();
@@ -52,9 +52,9 @@ function appConfirmMethod(config) {
 _sfc_main.tip = (props) => {
   const { t } = useLocale();
   return appConfirmMethod({
-    dialogTitle: t("confirmDialog.prompt"),
-    title: t("confirmDialog.prompt"),
-    content: t("confirmDialog.content"),
+    dialogTitle: t("dialog.prompt"),
+    title: t("dialog.prompt"),
+    content: t("dialog.content"),
     showCancel: false,
     ...props
   });
@@ -62,19 +62,19 @@ _sfc_main.tip = (props) => {
 _sfc_main.confirm = (props) => {
   const { t } = useLocale();
   return appConfirmMethod({
-    dialogTitle: t("confirmDialog.prompt"),
-    title: t("confirmDialog.prompt"),
-    content: t("confirmDialog.content"),
+    dialogTitle: t("dialog.prompt"),
+    title: t("dialog.prompt"),
+    content: t("dialog.content"),
     ...props
   });
 };
 _sfc_main.warning = (props) => {
   const { t } = useLocale();
   return appConfirmMethod({
-    dialogTitle: t("confirmDialog.riskWarning"),
-    title: t("confirmDialog.prompt"),
+    dialogTitle: t("dialog.riskWarning"),
+    title: t("dialog.prompt"),
     titleClass: "text-warning",
-    content: t("confirmDialog.content"),
+    content: t("dialog.content"),
     iconColor: "rgb(var(--hy-warning))",
     ...props
   });
@@ -82,10 +82,10 @@ _sfc_main.warning = (props) => {
 _sfc_main.danger = (props) => {
   const { t } = useLocale();
   return appConfirmMethod({
-    dialogTitle: t("confirmDialog.dangerousOperation"),
+    dialogTitle: t("dialog.dangerousOperation"),
     titleClass: "text-danger",
-    title: t("confirmDialog.prompt"),
-    content: t("confirmDialog.content"),
+    title: t("dialog.prompt"),
+    content: t("dialog.content"),
     submitType: "danger",
     iconColor: "rgb(var(--hy-danger))",
     ...props

package/es/components/appCutter/appCutter.vue.mjs

@@ -0,0 +1,358 @@
+import { defineComponent, useModel, useTemplateRef, ref, computed, openBlock, createElementBlock, withDirectives, createVNode, unref, withCtx, createElementVNode, renderSlot, normalizeStyle, createBlock, Fragment, createCommentVNode, toDisplayString, withModifiers, vShow, mergeProps, mergeModels } from 'vue';
+import { VueCropper } from 'vue-cropper';
+import { ElUpload, ElImage, ElIcon, ElMessage } from 'element-plus';
+import { User, Delete } from '@element-plus/icons-vue';
+import { blobToDataURL, sizeToTextHandler, fileUpload } from '../../utils/file.mjs';
+import { AppDialog } from '../appDialog/index.mjs';
+import { useLocale } from '../../hooks/useLocale.mjs';
+
+import "vue-cropper/dist/index.css";
+
+import "./style/appCutter.scss";
+
+const __default__ = defineComponent({
+  name: "AppCutter"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: /* @__PURE__ */ mergeModels({
+    defaultImg: { type: String },
+    // 默认展示图片
+    uploadText: {
+      // 上传文本
+      type: String,
+      default: () => {
+        const { t } = useLocale();
+        return t("cutter.uploadPicture");
+      }
+    },
+    showUpload: { type: Boolean, default: true },
+    // 是否显示上传模块
+    showText: { type: Boolean, default: true },
+    // 是否显示上传提示文本
+    showDelete: { type: Boolean, default: true },
+    // 是否显示删除按钮
+    maxSize: { type: Number, default: 1024 * 1024 * 2 },
+    // 限制上传文件大小
+    accept: { type: String, default: "image/png,image/jpg,image/jpeg,image/gif" },
+    // 限制上传文件类型
+    info: { type: Boolean, default: true },
+    // 裁剪框的大小信息
+    outputSize: { type: Number, default: 1 },
+    // 裁剪生成图片的质量
+    outputType: { type: String, default: "jpeg" },
+    // 裁剪生成图片的格式
+    autoCrop: { type: Boolean, default: true },
+    // 是否默认生成截图框
+    autoCropWidth: { type: Number, default: 100 },
+    // 默认生成截图框宽度
+    autoCropHeight: { type: Number, default: 100 },
+    // 默认生成截图框高度
+    fixedBox: { type: Boolean, default: false },
+    // 固定截图框大小 不允许改变
+    fixed: { type: Boolean, default: true },
+    // 是否开启截图框宽高固定比例
+    fixedNumber: { type: Array },
+    // 截图框的宽高比例
+    full: { type: Boolean, default: true },
+    // 是否输出原图比例的截图
+    canMoveBox: { type: Boolean, default: false },
+    // 截图框能否拖动
+    original: { type: Boolean, default: false },
+    // 上传图片按照原始比例渲染
+    centerBox: { type: Boolean, default: true },
+    // 截图框是否被限制在图片里面
+    infoTrue: { type: Boolean, default: false },
+    // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+    readonly: { type: Boolean, default: false },
+    // 是否只读
+    directTransmission: { type: Boolean, default: true },
+    // 是否使用直传接口
+    onClose: Function,
+    onCancel: Function
+  }, {
+    "modelValue": { type: String },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["confirm"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { t } = useLocale();
+    const modelValue = useModel(__props, "modelValue");
+    const cropperRef = useTemplateRef("cropperRef");
+    const uploadRef = useTemplateRef("uploadRef");
+    const visible = ref(false);
+    const imgSrc = ref();
+    const fileInfo = ref({
+      name: "",
+      src: ""
+    });
+    const imageSrc = computed(() => imgSrc.value || props.defaultImg);
+    const options = computed(() => ({
+      info: props.info,
+      // 裁剪框的大小信息
+      outputSize: props.outputSize,
+      // 裁剪生成图片的质量
+      outputType: props.outputType,
+      // 裁剪生成图片的格式
+      canScale: props.canScale,
+      // 图片是否允许滚轮缩放
+      autoCrop: props.autoCrop,
+      // 是否默认生成截图框
+      autoCropWidth: props.autoCropWidth,
+      // 默认生成截图框宽度
+      autoCropHeight: props.autoCropHeight,
+      // 默认生成截图框高度
+      fixedBox: props.fixedBox,
+      // 固定截图框大小 不允许改变
+      fixed: props.fixed,
+      // 是否开启截图框宽高固定比例
+      fixedNumber: props.fixedNumber,
+      // 截图框的宽高比例
+      full: props.full,
+      // 是否输出原图比例的截图
+      canMoveBox: props.canMoveBox,
+      // 截图框能否拖动
+      original: props.original,
+      // 上传图片按照原始比例渲染
+      centerBox: props.centerBox,
+      // 截图框是否被限制在图片里面
+      infoTrue: props.infoTrue,
+      // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+      ...customOptions.value
+    }));
+    const customOptions = ref({});
+    let customSubmit = null;
+    let customCancel = null;
+    let customClose = null;
+    async function beforeAvatarUpload(file) {
+      const limit = file.size < props.maxSize;
+      if (!limit) {
+        ElMessage.error(
+          t("cutter.uploadPictureLimit", [sizeToTextHandler(props.maxSize)])
+        );
+        return false;
+      }
+      const result = await blobToDataURL(file);
+      openCutter(result, file.name);
+      return false;
+    }
+    function openCutter(src, name) {
+      visible.value = true;
+      fileInfo.value.src = src;
+      fileInfo.value.name = name;
+    }
+    function onClearHandler() {
+      imgSrc.value = "";
+      modelValue.value = null;
+      fileInfo.value = {
+        name: "",
+        src: ""
+      };
+    }
+    async function onSubmitHandler() {
+      return new Promise((resolve, reject) => {
+        cropperRef.value.getCropBlob(async (data) => {
+          data.name = fileInfo.value.name;
+          const res = await fileUpload(data, props.directTransmission).catch(
+            (res2) => {
+              ElMessage.error(res2.msg || res2);
+              reject();
+            }
+          );
+          if (res.code === 200) {
+            const url = await blobToDataURL(data);
+            const key = res.data?.key || res.data?.url || res.data;
+            imgSrc.value = url;
+            modelValue.value = key;
+            if (customSubmit) {
+              await customSubmit({ url, key });
+            }
+            emits("confirm", { url, key });
+            resolve();
+          } else {
+            ElMessage.error(res.msg || res);
+            reject();
+          }
+        });
+      });
+    }
+    async function onCancelHandler() {
+      if (customCancel) {
+        return await customCancel();
+      }
+      if (props.onCancel) {
+        return await props.onCancel();
+      }
+    }
+    async function onCloseHandler() {
+      if (customCancel) {
+        return await customClose();
+      }
+      if (props.onClose) {
+        return await props.onClose();
+      }
+    }
+    __expose({
+      open: async (params) => {
+        const {
+          url,
+          fileName = "img.png",
+          options: options2,
+          file,
+          onSubmit,
+          onCancel,
+          onClose
+        } = params || {};
+        if (file) {
+          const result = await blobToDataURL(file);
+          openCutter(result, file.name);
+        } else if (url) {
+          openCutter(url, fileName);
+        } else {
+          uploadRef.value.click();
+        }
+        customOptions.value = options2 || {};
+        customClose = async () => {
+          if (onClose) {
+            await onClose();
+          }
+          customOptions.value = {};
+        };
+        customCancel = async () => {
+          if (onCancel) {
+            await onCancel();
+          }
+          customOptions.value = {};
+        };
+        customSubmit = async (value) => {
+          await onSubmit(value);
+          customOptions.value = {};
+        };
+      },
+      clear: onClearHandler
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", { class: "inline-block" }, [
+        withDirectives(createVNode(unref(ElUpload), {
+          accept: ".png,.jpg,.gif,.jpeg",
+          "before-upload": beforeAvatarUpload,
+          action: "",
+          class: "upload_box",
+          "show-file-list": false,
+          disabled: __props.readonly
+        }, {
+          default: withCtx(() => [
+            createElementVNode(
+              "div",
+              {
+                ref_key: "uploadRef",
+                ref: uploadRef,
+                class: "app-cutter-upload-box"
+              },
+              [
+                renderSlot(_ctx.$slots, "default", { src: imgSrc.value }, () => [
+                  createElementVNode(
+                    "div",
+                    {
+                      class: "app-cutter-upload-card",
+                      style: normalizeStyle({
+                        width: `${__props.autoCropWidth}px`,
+                        height: `${__props.autoCropHeight}px`
+                      })
+                    },
+                    [
+                      modelValue.value && imageSrc.value ? (openBlock(), createBlock(unref(ElImage), {
+                        key: 0,
+                        src: imageSrc.value,
+                        style: normalizeStyle({
+                          width: `${__props.autoCropWidth}px`,
+                          height: `${__props.autoCropHeight}px`
+                        })
+                      }, null, 8, ["src", "style"])) : (openBlock(), createElementBlock(
+                        Fragment,
+                        { key: 1 },
+                        [
+                          createCommentVNode(' <AppIcon\n              v-else\n              svg-name="emptyHead"\n              style="width: 70px; height: 70px"\n            /> '),
+                          createVNode(unref(ElIcon), {
+                            color: "rgb(var(--hy-auxiliary))",
+                            size: "64"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(unref(User))
+                            ]),
+                            _: 1
+                            /* STABLE */
+                          })
+                        ],
+                        2112
+                        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                      ))
+                    ],
+                    4
+                    /* STYLE */
+                  )
+                ]),
+                __props.uploadText && __props.showText ? (openBlock(), createElementBlock(
+                  "div",
+                  {
+                    key: 0,
+                    class: "app-cutter-tip"
+                  },
+                  toDisplayString(__props.uploadText),
+                  1
+                  /* TEXT */
+                )) : createCommentVNode("v-if", true),
+                __props.showDelete ? withDirectives((openBlock(), createElementBlock("div", {
+                  key: 1,
+                  class: "app-cutter-delete",
+                  onClick: withModifiers(($event) => onClearHandler(), ["stop"])
+                }, [
+                  createCommentVNode(' <AppIcon svg-name="delete" /> '),
+                  createVNode(unref(ElIcon), { color: "rgb(var(--hy-danger-2))" }, {
+                    default: withCtx(() => [
+                      createVNode(unref(Delete))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ], 8, ["onClick"])), [
+                  [vShow, modelValue.value]
+                ]) : createCommentVNode("v-if", true)
+              ],
+              512
+              /* NEED_PATCH */
+            )
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["disabled"]), [
+          [vShow, __props.showUpload]
+        ]),
+        createVNode(unref(AppDialog), mergeProps({
+          modelValue: visible.value,
+          "onUpdate:modelValue": ($event) => visible.value = $event,
+          title: unref(t)("cutter.imageSegmentation")
+        }, _ctx.$attrs, {
+          onClose: onCloseHandler,
+          onCancel: onCancelHandler,
+          onSubmit: onSubmitHandler
+        }), {
+          default: withCtx(() => [
+            createElementVNode("div", { class: "h-[500px]" }, [
+              createVNode(unref(VueCropper), mergeProps({
+                ref_key: "cropperRef",
+                ref: cropperRef,
+                img: fileInfo.value.src
+              }, options.value), null, 16, ["img"])
+            ])
+          ]),
+          _: 1
+          /* STABLE */
+        }, 16, ["modelValue", "onUpdate:modelValue", "title"])
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/appCutter/index.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './appCutter.vue.mjs';
+import { withInstall } from '../../utils/handler.mjs';
+
+const AppCutter = withInstall(_sfc_main);
+
+export { AppCutter, AppCutter as default };

package/es/components/appCutter/style/appCutter.scss

@@ -0,0 +1,51 @@
+.app-cutter-upload-box {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  .app-cutter-delete {
+    width: 100%;
+    height: 23px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: -23px;
+    z-index: 3;
+    transition: all 0.3s;
+    background: rgba(0, 0, 0, 0.6);
+  }
+  .app-cutter-tip {
+    width: 100%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 3;
+    font-size: 14px;
+    color: rgb(var(--hy-theme));
+    text-align: center;
+    user-select: none;
+    opacity: 0;
+    transition: all 0.3s;
+  }
+  &:hover {
+    .app-cutter-delete {
+      bottom: 0;
+    }
+    .app-cutter-tip {
+      opacity: 1;
+    }
+  }
+  .app-cutter-upload-card {
+    width: 70px;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgb(var(--hy-border));
+    border-radius: 4px;
+    background-color: rgb(var(--hy-background-2));
+    position: relative;
+  }
+}

package/es/components/appDatePicker/appDatePicker.vue.mjs

@@ -61,7 +61,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         startValue.value = value[0] ? `${value[0]}${isFill ? " 00:00:00" : ""}` : null;
         endValue.value = value[1] ? `${value[1]}${isFill ? " 23:59:59" : ""}` : null;
       } else {
-        dateValue.value = isFill && (value == null ? void 0 : value.length) ? [`${value[0]} 00:00:00`, `${value[1]} 23:59:59`] : value;
+        dateValue.value = isFill && value?.length ? [`${value[0]} 00:00:00`, `${value[1]} 23:59:59`] : value;
       }
       emits("change", dateValue.value);
     }