hy-dispatch-ui-v3 0.1.5 → 0.2.0

package/lib/components/appConfirmDialog/appConfirmDialog.vue.js

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

package/lib/components/appConfirmDialog/appConfirmMethod.js

@@ -6,8 +6,8 @@ var vue = require('vue');
 var useApi = require('../../hooks/useApi.js');
 var index = require('../appConfigProvider/index.js');
 var appConfirmDialog = require('./appConfirmDialog.vue.js');
-var useGlobalConfig = require('../../hooks/useGlobalConfig.js');
 var useLocale = require('../../hooks/useLocale.js');
+var useGlobalConfig = require('../../hooks/useGlobalConfig.js');
 
 function appConfirmMethod(config) {
   let container = document.createDocumentFragment();
@@ -56,9 +56,9 @@ function appConfirmMethod(config) {
 appConfirmDialog.default.tip = (props) => {
   const { t } = useLocale.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
   });
@@ -66,19 +66,19 @@ appConfirmDialog.default.tip = (props) => {
 appConfirmDialog.default.confirm = (props) => {
   const { t } = useLocale.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
   });
 };
 appConfirmDialog.default.warning = (props) => {
   const { t } = useLocale.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
   });
@@ -86,10 +86,10 @@ appConfirmDialog.default.warning = (props) => {
 appConfirmDialog.default.danger = (props) => {
   const { t } = useLocale.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/lib/components/appCutter/appCutter.vue.js

@@ -0,0 +1,362 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var vueCropper = require('vue-cropper');
+var elementPlus = require('element-plus');
+var iconsVue = require('@element-plus/icons-vue');
+var file = require('../../utils/file.js');
+var index = require('../appDialog/index.js');
+var useLocale = require('../../hooks/useLocale.js');
+
+import "vue-cropper/dist/index.css";
+
+import "./style/appCutter.scss";
+
+const __default__ = vue.defineComponent({
+  name: "AppCutter"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: /* @__PURE__ */ vue.mergeModels({
+    defaultImg: { type: String },
+    // 默认展示图片
+    uploadText: {
+      // 上传文本
+      type: String,
+      default: () => {
+        const { t } = useLocale.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__ */ vue.mergeModels(["confirm"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { t } = useLocale.useLocale();
+    const modelValue = vue.useModel(__props, "modelValue");
+    const cropperRef = vue.useTemplateRef("cropperRef");
+    const uploadRef = vue.useTemplateRef("uploadRef");
+    const visible = vue.ref(false);
+    const imgSrc = vue.ref();
+    const fileInfo = vue.ref({
+      name: "",
+      src: ""
+    });
+    const imageSrc = vue.computed(() => imgSrc.value || props.defaultImg);
+    const options = vue.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 = vue.ref({});
+    let customSubmit = null;
+    let customCancel = null;
+    let customClose = null;
+    async function beforeAvatarUpload(file$1) {
+      const limit = file$1.size < props.maxSize;
+      if (!limit) {
+        elementPlus.ElMessage.error(
+          t("cutter.uploadPictureLimit", [file.sizeToTextHandler(props.maxSize)])
+        );
+        return false;
+      }
+      const result = await file.blobToDataURL(file$1);
+      openCutter(result, file$1.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 file.fileUpload(data, props.directTransmission).catch(
+            (res2) => {
+              elementPlus.ElMessage.error(res2.msg || res2);
+              reject();
+            }
+          );
+          if (res.code === 200) {
+            const url = await file.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 {
+            elementPlus.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: file$1,
+          onSubmit,
+          onCancel,
+          onClose
+        } = params || {};
+        if (file$1) {
+          const result = await file.blobToDataURL(file$1);
+          openCutter(result, file$1.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 vue.openBlock(), vue.createElementBlock("div", { class: "inline-block" }, [
+        vue.withDirectives(vue.createVNode(vue.unref(elementPlus.ElUpload), {
+          accept: ".png,.jpg,.gif,.jpeg",
+          "before-upload": beforeAvatarUpload,
+          action: "",
+          class: "upload_box",
+          "show-file-list": false,
+          disabled: __props.readonly
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode(
+              "div",
+              {
+                ref_key: "uploadRef",
+                ref: uploadRef,
+                class: "app-cutter-upload-box"
+              },
+              [
+                vue.renderSlot(_ctx.$slots, "default", { src: imgSrc.value }, () => [
+                  vue.createElementVNode(
+                    "div",
+                    {
+                      class: "app-cutter-upload-card",
+                      style: vue.normalizeStyle({
+                        width: `${__props.autoCropWidth}px`,
+                        height: `${__props.autoCropHeight}px`
+                      })
+                    },
+                    [
+                      modelValue.value && imageSrc.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElImage), {
+                        key: 0,
+                        src: imageSrc.value,
+                        style: vue.normalizeStyle({
+                          width: `${__props.autoCropWidth}px`,
+                          height: `${__props.autoCropHeight}px`
+                        })
+                      }, null, 8, ["src", "style"])) : (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 1 },
+                        [
+                          vue.createCommentVNode(' <AppIcon\n              v-else\n              svg-name="emptyHead"\n              style="width: 70px; height: 70px"\n            /> '),
+                          vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                            color: "rgb(var(--hy-auxiliary))",
+                            size: "64"
+                          }, {
+                            default: vue.withCtx(() => [
+                              vue.createVNode(vue.unref(iconsVue.User))
+                            ]),
+                            _: 1
+                            /* STABLE */
+                          })
+                        ],
+                        2112
+                        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                      ))
+                    ],
+                    4
+                    /* STYLE */
+                  )
+                ]),
+                __props.uploadText && __props.showText ? (vue.openBlock(), vue.createElementBlock(
+                  "div",
+                  {
+                    key: 0,
+                    class: "app-cutter-tip"
+                  },
+                  vue.toDisplayString(__props.uploadText),
+                  1
+                  /* TEXT */
+                )) : vue.createCommentVNode("v-if", true),
+                __props.showDelete ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                  key: 1,
+                  class: "app-cutter-delete",
+                  onClick: vue.withModifiers(($event) => onClearHandler(), ["stop"])
+                }, [
+                  vue.createCommentVNode(' <AppIcon svg-name="delete" /> '),
+                  vue.createVNode(vue.unref(elementPlus.ElIcon), { color: "rgb(var(--hy-danger-2))" }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.Delete))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ], 8, ["onClick"])), [
+                  [vue.vShow, modelValue.value]
+                ]) : vue.createCommentVNode("v-if", true)
+              ],
+              512
+              /* NEED_PATCH */
+            )
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["disabled"]), [
+          [vue.vShow, __props.showUpload]
+        ]),
+        vue.createVNode(vue.unref(index.AppDialog), vue.mergeProps({
+          modelValue: visible.value,
+          "onUpdate:modelValue": ($event) => visible.value = $event,
+          title: vue.unref(t)("cutter.imageSegmentation")
+        }, _ctx.$attrs, {
+          onClose: onCloseHandler,
+          onCancel: onCancelHandler,
+          onSubmit: onSubmitHandler
+        }), {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", { class: "h-[500px]" }, [
+              vue.createVNode(vue.unref(vueCropper.VueCropper), vue.mergeProps({
+                ref_key: "cropperRef",
+                ref: cropperRef,
+                img: fileInfo.value.src
+              }, options.value), null, 16, ["img"])
+            ])
+          ]),
+          _: 1
+          /* STABLE */
+        }, 16, ["modelValue", "onUpdate:modelValue", "title"])
+      ]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/appCutter/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var appCutter = require('./appCutter.vue.js');
+var handler = require('../../utils/handler.js');
+
+const AppCutter = handler.withInstall(appCutter.default);
+
+exports.AppCutter = AppCutter;
+exports.default = AppCutter;

package/lib/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/lib/components/appDatePicker/appDatePicker.vue.js

@@ -65,7 +65,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);
     }