hy-dispatch-ui-v3 0.1.4 → 0.1.6

package/dist/tailwind.css

@@ -624,6 +624,10 @@ video {
   left: 1rem;
 }
 
+.right-4 {
+  right: 1rem;
+}
+
 .top-0 {
   top: 0px;
 }
@@ -692,6 +696,10 @@ video {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .inline {
   display: inline;
 }
@@ -716,6 +724,10 @@ video {
   height: 0.75rem !important;
 }
 
+.\!h-\[20px\] {
+  height: 20px !important;
+}
+
 .\!h-\[46px\] {
   height: 46px !important;
 }
@@ -748,6 +760,10 @@ video {
   height: 45px;
 }
 
+.h-\[500px\] {
+  height: 500px;
+}
+
 .h-full {
   height: 100%;
 }
@@ -764,6 +780,10 @@ video {
   width: 0.75rem !important;
 }
 
+.\!w-\[20px\] {
+  width: 20px !important;
+}
+
 .\!w-\[46px\] {
   width: 46px !important;
 }
@@ -800,6 +820,10 @@ video {
   width: 1px;
 }
 
+.\!min-w-\[120px\] {
+  min-width: 120px !important;
+}
+
 .max-w-\[300px\] {
   max-width: 300px;
 }
@@ -877,6 +901,10 @@ video {
   align-items: center;
 }
 
+.\!justify-center {
+  justify-content: center !important;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -941,6 +969,10 @@ video {
   border-width: 1px;
 }
 
+.border-0 {
+  border-width: 0px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -953,6 +985,10 @@ video {
   border-right-width: 1px;
 }
 
+.border-solid {
+  border-style: solid;
+}
+
 .\!border-border {
   --tw-border-opacity: 1 !important;
   border-color: rgb(var(--hy-border), var(--tw-border-opacity, 1)) !important;
@@ -963,6 +999,11 @@ video {
   border-color: rgb(var(--hy-theme), var(--tw-border-opacity, 1)) !important;
 }
 
+.border-background-3 {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--hy-background-3), var(--tw-border-opacity, 1));
+}
+
 .border-border {
   --tw-border-opacity: 1;
   border-color: rgb(var(--hy-border), var(--tw-border-opacity, 1));
@@ -1000,6 +1041,10 @@ video {
   padding: 0px !important;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .p-\[1px\] {
   padding: 1px;
 }
@@ -1038,6 +1083,11 @@ video {
   padding-right: 6px;
 }
 
+.py-\[10px\] {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1094,6 +1144,10 @@ video {
   padding-top: 0.625rem;
 }
 
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
 .pt-\[11px\] {
   padding-top: 11px;
 }
@@ -1119,6 +1173,11 @@ video {
   line-height: 1.5rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;

package/es/components/appConfigProvider/appConfigProvider.vue.mjs

@@ -1,7 +1,7 @@
-import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, unref, computed, openBlock, createBlock, mergeProps, withCtx, renderSlot } from 'vue';
 import { ElConfigProvider } from 'element-plus';
 import * as ElementLocale from 'element-plus/es/locales.mjs';
-import { provideGlobalConfig } from '../../hooks/useGlobalConfig.mjs';
+import { provideGlobalConfig, useGlobalConfig } from '../../hooks/useGlobalConfig.mjs';
 
 const __default__ = defineComponent({
   name: "AppConfigProvider"
@@ -62,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   },
   setup(__props) {
     const props = __props;
-    const globalConfig = provideGlobalConfig(props);
+    const globalConfig = provideGlobalConfig(props, null, !unref(useGlobalConfig()));
     const config = computed(() => {
       const { locale, api, userAvatarMap, ...config2 } = globalConfig.value;
       return {

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,285 @@
+import { defineComponent, useModel, useTemplateRef, ref, computed, resolveComponent, 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 { Delete } from '@element-plus/icons-vue';
+import { AppDialog } from '../appDialog/index.mjs';
+import { isFile } from '../../utils/is.mjs';
+import { sizeToTextHandler, blobToDataURL, fileUpload } from '../../utils/file.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({
+    dialogWidth: { type: [String, Number], default: 1e3 },
+    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 }
+  }, {
+    "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 展示看到的截图框宽高
+    }));
+    function openFilePicker(param, name = "img.png") {
+      if (typeof param === "string") {
+        openCutter(param, name);
+        return;
+      }
+      if (isFile(param)) {
+        beforeAvatarUpload(file);
+        return;
+      }
+      uploadRef.value.click();
+    }
+    async function beforeAvatarUpload(file2) {
+      const limit = file2.size < props.maxSize;
+      if (!limit) {
+        ElMessage.error(
+          t("cutter.uploadPictureLimit", [sizeToTextHandler(props.maxSize)])
+        );
+        return false;
+      }
+      const result = await blobToDataURL(file2);
+      openCutter(result, file2.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) => {
+          var _a, _b;
+          data.name = fileInfo.value.name;
+          const res = await fileUpload(data).catch((res2) => {
+            ElMessage.error(res2.msg || res2);
+            reject();
+          });
+          if (res.code === 200) {
+            imgSrc.value = await blobToDataURL(data);
+            modelValue.value = ((_a = res.data) == null ? void 0 : _a.key) || ((_b = res.data) == null ? void 0 : _b.url) || res.data;
+            emits("confirm", res);
+            resolve();
+          } else {
+            ElMessage.error(res.msg || res);
+            reject();
+          }
+        });
+      });
+    }
+    __expose({
+      open: openFilePicker,
+      clear: onClearHandler
+    });
+    return (_ctx, _cache) => {
+      const _component_User = resolveComponent("User");
+      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
+          },
+          {
+            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(_component_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 */
+          },
+          512
+          /* NEED_PATCH */
+        ), [
+          [vShow, __props.showUpload]
+        ]),
+        createVNode(unref(AppDialog), {
+          modelValue: visible.value,
+          "onUpdate:modelValue": ($event) => visible.value = $event,
+          title: unref(t)("cutter.imageSegmentation"),
+          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 */
+        }, 8, ["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;
+  }
+}