@vunk/form 1.1.11 → 1.1.13

package/components/geoinput-read/src/ctx.js

@@ -2,6 +2,7 @@ import { _VkfInputCtx } from '@vunk/form/components/input';
 import { EMPTY_FEATURE_COLLECTION } from '@vumap/core/shared/static';
 import { _VmGeojsonLayerCtx } from '@vumap/core/components/geojson-layer';
 import { bindPropsFactory, onEmitsFactory } from '@vunk/core/shared/utils-vue';
+import { pickObject } from '@vunk/core/shared/utils-object';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -53,9 +54,12 @@ const props = __spreadProps(__spreadValues(__spreadValues({}, _VkfInputCtx.props
   }
 });
 const createBindProps = bindPropsFactory(props);
-const emits = __spreadProps(__spreadValues(__spreadValues({}, _VmGeojsonLayerCtx.emits), _VkfInputCtx.emits), {
+const emits = __spreadProps(__spreadValues(__spreadValues({}, pickObject(_VmGeojsonLayerCtx.emits, {
+  excludes: ["click"]
+})), _VkfInputCtx.emits), {
   "layerChange": (layer) => layer,
-  "update:modelValue": (e) => e
+  "update:modelValue": (e) => e,
+  "layerClick": (e) => e
 });
 const createOnEmits = onEmitsFactory(emits);
 

package/components/geoinput-read/src/index.vue.d.ts

@@ -240,25 +240,26 @@ declare const _default: import("vue").DefineComponent<{
         showMap: boolean;
     }>;
     coreOnEmits: {
-        click: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        "update:modelValue": (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        input: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        change: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        focus: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        blur: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        clear: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        mouseleave: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        mouseenter: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        keydown: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        compositionstart: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        compositionupdate: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        compositionend: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        load: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
-        layerChange: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => void;
+        "update:modelValue": (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        input: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        change: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        focus: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        blur: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        clear: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        mouseleave: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        mouseenter: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        keydown: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        compositionstart: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        compositionupdate: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        compositionend: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        load: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        layerChange: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
+        layerClick: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => void;
     };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     layerChange: (layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent;
     'update:modelValue': (e: import("geojson").FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties>) => import("geojson").FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
+    layerClick: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent;
     input: (value: string) => boolean;
     change: (value: string) => boolean;
     focus: (evt: FocusEvent) => boolean;
@@ -270,7 +271,6 @@ declare const _default: import("vue").DefineComponent<{
     compositionstart: (evt: CompositionEvent) => boolean;
     compositionupdate: (evt: CompositionEvent) => boolean;
     compositionend: (evt: CompositionEvent) => boolean;
-    click: (e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent;
     load: (e: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -436,7 +436,6 @@ declare const _default: import("vue").DefineComponent<{
     validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     inputStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => import("element-plus/es/utils").Mutable<{}>, boolean>;
 }>> & {
-    onClick?: ((e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((e: import("geojson").FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties>) => any) | undefined;
     onInput?: ((value: string) => any) | undefined;
@@ -451,6 +450,7 @@ declare const _default: import("vue").DefineComponent<{
     onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
     onLoad?: ((e: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => any) | undefined;
     onLayerChange?: ((layer: import("@vumap/core/components/geojson-add-layer/src/types").LoadEvent) => any) | undefined;
+    onLayerClick?: ((e: import("@vumap/core/components/geojson-layer-set/src/types").ClickEvent) => any) | undefined;
 }, {
     required: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     type: string;

package/components/upload-plus/index.css

@@ -0,0 +1,85 @@
+
+@keyframes hide {
+  0% {
+    opacity: 1; /* 初始状态为完全显示 */
+  }
+  100% {
+    opacity: 0; /* 最终状态为完全隐藏 */
+    display: none; /* 同时隐藏元素 */
+  }
+}
+
+.vkf-upload-plus{
+  --vkf-upload-plus-height: 34px;
+}
+.vkf-upload-plus-label{
+ position: relative;
+}
+.vkf-upload-plus-cube-x,
+.vkf-upload-plus-msg-x
+{
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.vkf-upload-plus-msg-x{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-color-success);
+  background: var(--el-bg-color);
+  animation-name: hide; /* 指定使用hide关键帧动画 */
+  animation-duration: 1s; /* 动画持续时间为2秒 */
+  animation-delay: 1s; /* 延迟2秒后开始动画 */
+  animation-fill-mode: forwards; /* 动画结束后保持最后一帧的状态 */
+}
+.vkf-upload-plus-msg{
+  margin-left: 2px;
+}
+.vkf-upload-plus-cube {
+  float: left;
+  height: 100%;
+}
+.vkf-upload-plus-cube.error {
+  background: var(--el-color-danger);
+}
+.vkf-upload-plus-cube .success{
+  background: var(--el-color-success);
+}
+.vkf-upload-plus-cube .uploading{
+  background: var(--el-color-primary);
+}
+.vkf-upload-plus-cube .error{
+  background: var(--el-color-danger);
+}
+
+.vkf-upload-plus-btng >.el-button:first-child{
+  border-radius: 0;
+}
+.vkf-upload-plus-btng >.el-button{
+  height: var(--vkf-upload-plus-height);
+}
+.vkf-upload-plus-main{
+  display: flex;
+  align-items: center;
+  border: var(--el-border);
+  border-radius: var(--el-border-radius-base);
+}
+.vkf-upload-plus-label{
+  cursor: pointer;
+}
+.vkf-upload-plus-label .el-input{
+  pointer-events: none;
+  --el-input-border-color: transparent;
+}
+.vkf-upload-plus-label .el-input.is-success .el-icon{
+   color: var(--el-color-success);
+}
+.vkf-upload-plus-label .el-input.is-error .el-icon{
+  color: var(--el-color-danger);
+}
+.vkf-upload-plus-input{
+  display: none;
+}

package/components/upload-plus/index.d.ts

@@ -0,0 +1,6 @@
+import VkfUploadPlus from './src/index.vue.d';
+export * as __VkfUploadPlus from './src/types';
+export * as _VkfUploadPlusConst from './src/const';
+export * as _VkfUploadPlusApi from './src/api';
+export { VkfUploadPlus, };
+export default VkfUploadPlus;

package/components/upload-plus/index.js

@@ -0,0 +1,485 @@
+import { _VkfFormItemCtx, VkfFormItem } from '@vunk/form/components/form-item';
+import { openBlock, createElementBlock, createElementVNode, defineComponent, reactive, ref, computed, resolveComponent, createBlock, mergeProps, withCtx, createVNode, normalizeClass, createCommentVNode, Fragment, renderList, normalizeStyle, createTextVNode } from 'vue';
+import { ElInput, ElButtonGroup, ElButton, ElIcon } from 'element-plus';
+import { createFileChunk, calculateFileHashSample } from '@vunk/form/shared/upload';
+import { RestFetch } from '@vunk/core/shared/utils-fetch';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const props = __spreadProps(__spreadValues({}, _VkfFormItemCtx.props), {
+  size: {
+    type: Number,
+    default: 1024 / (16 * 16) * 1024 * 1024
+  },
+  dictId: {
+    type: String,
+    default: ""
+  }
+});
+const emits = {};
+
+var Status = /* @__PURE__ */ ((Status2) => {
+  Status2["wait"] = "wait";
+  Status2["pause"] = "pause";
+  Status2["uploading"] = "uploading";
+  Status2["error"] = "error";
+  Status2["done"] = "done";
+  return Status2;
+})(Status || {});
+
+var _const = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Status: Status
+});
+
+const restFetch = new RestFetch({
+  baseURL: "http://192.168.110.209:36800"
+});
+const verify = async (params) => {
+  return restFetch.request({
+    method: "GET",
+    url: "/dict/hdfs/getChunkList",
+    params
+  }).then((res) => {
+    return res.data.map((item) => item.identifier);
+  });
+};
+const upload = async (data, init) => {
+  return new Promise((resolve, reject) => {
+    var _a;
+    const xhr = new XMLHttpRequest();
+    xhr.upload.onprogress = (init == null ? void 0 : init.onprogress) || null;
+    xhr.open("post", restFetch.baseURL + "/dict/hdfs/chunk/upload");
+    const form = new FormData();
+    form.append("file", data.chunk);
+    form.append("identifier", data.fileHash);
+    form.append("filename", data.fileName);
+    form.append("chunkNumber", data.index + 1 + "");
+    form.append("chunkIdentifier", data.hash + "");
+    form.append("totalChunk", data.chunksLength + "");
+    form.append("chunkSize", data.sliceSize + "");
+    form.append("currentChunkSize", data.chunk.size + "");
+    form.append("totalSize", data.fileSize + "");
+    xhr.send(form);
+    xhr.onreadystatechange = (e) => {
+      const target = e.target;
+      if (xhr.readyState === 4) {
+        if (xhr.status === 200) {
+          if (init == null ? void 0 : init.xhrs) {
+            const i = init.xhrs.findIndex((req) => req === xhr);
+            init.xhrs.splice(i, 1);
+          }
+          resolve({
+            data: target.response
+          });
+        } else if (xhr.status === 500) {
+          reject(target.response);
+        }
+      }
+    };
+    xhr.timeout = 5 * 1e3;
+    xhr.ontimeout = (e) => {
+      reject(e);
+    };
+    (_a = init == null ? void 0 : init.xhrs) == null ? void 0 : _a.push(xhr);
+  });
+};
+const merge = async (data) => {
+  return restFetch.request({
+    method: "POST",
+    url: "/dict/hdfs/chunk/merge",
+    data
+  }).then((res) => {
+    return res.datas;
+  });
+};
+
+var api = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  restFetch: restFetch,
+  verify: verify,
+  upload: upload,
+  merge: merge
+});
+
+/*! Element Plus Icons Vue v2.1.0 */
+
+// unplugin-vue:/plugin-vue/export-helper
+var export_helper_default = (sfc, props) => {
+  let target = sfc.__vccOpts || sfc;
+  for (let [key, val] of props)
+    target[key] = val;
+  return target;
+};
+
+// unplugin-vue:/home/runner/work/element-plus-icons/element-plus-icons/packages/vue/src/components/circle-close-filled.vue?vue&type=script&lang.ts
+var circle_close_filled_vue_vue_type_script_lang_default = {
+  name: "CircleCloseFilled"
+};
+var _hoisted_150 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+}, _hoisted_250 = /* @__PURE__ */ createElementVNode(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"
+  },
+  null,
+  -1
+  /* HOISTED */
+), _hoisted_349 = [
+  _hoisted_250
+];
+function _sfc_render50(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_150, _hoisted_349);
+}
+var circle_close_filled_default = /* @__PURE__ */ export_helper_default(circle_close_filled_vue_vue_type_script_lang_default, [["render", _sfc_render50], ["__file", "circle-close-filled.vue"]]);
+
+// unplugin-vue:/home/runner/work/element-plus-icons/element-plus-icons/packages/vue/src/components/success-filled.vue?vue&type=script&lang.ts
+var success_filled_vue_vue_type_script_lang_default = {
+  name: "SuccessFilled"
+};
+var _hoisted_1249 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+}, _hoisted_2249 = /* @__PURE__ */ createElementVNode(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z"
+  },
+  null,
+  -1
+  /* HOISTED */
+), _hoisted_3248 = [
+  _hoisted_2249
+];
+function _sfc_render249(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1249, _hoisted_3248);
+}
+var success_filled_default = /* @__PURE__ */ export_helper_default(success_filled_vue_vue_type_script_lang_default, [["render", _sfc_render249], ["__file", "success-filled.vue"]]);
+
+// unplugin-vue:/home/runner/work/element-plus-icons/element-plus-icons/packages/vue/src/components/upload-filled.vue?vue&type=script&lang.ts
+var upload_filled_vue_vue_type_script_lang_default = {
+  name: "UploadFilled"
+};
+var _hoisted_1274 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+}, _hoisted_2274 = /* @__PURE__ */ createElementVNode(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M544 864V672h128L512 480 352 672h128v192H320v-1.6c-5.376.32-10.496 1.6-16 1.6A240 240 0 0 1 64 624c0-123.136 93.12-223.488 212.608-237.248A239.808 239.808 0 0 1 512 192a239.872 239.872 0 0 1 235.456 194.752c119.488 13.76 212.48 114.112 212.48 237.248a240 240 0 0 1-240 240c-5.376 0-10.56-1.28-16-1.6v1.6H544z"
+  },
+  null,
+  -1
+  /* HOISTED */
+), _hoisted_3273 = [
+  _hoisted_2274
+];
+function _sfc_render274(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1274, _hoisted_3273);
+}
+var upload_filled_default = /* @__PURE__ */ export_helper_default(upload_filled_vue_vue_type_script_lang_default, [["render", _sfc_render274], ["__file", "upload-filled.vue"]]);
+
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _sfc_main = defineComponent({
+  name: "VkfUploadPlus",
+  components: {
+    VkfFormItem,
+    ElInput,
+    ElButtonGroup,
+    ElButton,
+    ElIcon,
+    SuccessFilled: success_filled_default
+  },
+  emits,
+  props,
+  setup(props2, { emit }) {
+    const formItemBindProps = _VkfFormItemCtx.createBindProps(props2);
+    const uuid = Math.random().toString(36).slice(-8);
+    const container = reactive({});
+    const fileStatus = ref(Status.wait);
+    const chunks = ref([]);
+    const uploadingXhrs = ref([]);
+    const filePrefixIcon = computed(() => {
+      if (fileStatus.value === Status.done) {
+        return success_filled_default;
+      }
+      if (fileStatus.value === Status.error) {
+        return circle_close_filled_default;
+      }
+      return upload_filled_default;
+    });
+    const handleFileChange = (e) => {
+      const target = e.target;
+      const file = target.files?.[0];
+      if (file) {
+        container.file = file;
+        fileStatus.value = Status.wait;
+      }
+    };
+    const handleUpload = async () => {
+      if (!container.file)
+        return;
+      fileStatus.value = Status.uploading;
+      const chunkFiles = createFileChunk(container.file, props2.size);
+      const hash = await calculateFileHashSample(container.file);
+      container.hash = hash;
+      const uploadedList = await verify({
+        identifier: hash
+      });
+      const sliceSize = chunkFiles[0].size;
+      chunks.value = chunkFiles.map((chunk, index) => {
+        const _container = container;
+        const chunkHash = _container.hash + "-" + index;
+        return {
+          fileName: _container.file.name,
+          fileHash: _container.hash,
+          fileSize: _container.file.size,
+          chunk,
+          hash: chunkHash,
+          index,
+          progress: uploadedList.indexOf(chunkHash) > -1 ? 100 : 0,
+          chunksLength: chunkFiles.length,
+          sliceSize,
+          status: Status.wait
+        };
+      });
+      const needUpload = chunks.value.filter((v) => uploadedList.indexOf(v.hash) === -1);
+      cUploadedChunks(
+        needUpload
+      ).then(() => {
+        return cFile();
+      }).then(() => {
+        fileStatus.value = Status.done;
+      }).catch(() => {
+        fileStatus.value = Status.error;
+      });
+    };
+    const handlePause = () => {
+      uploadingXhrs.value.forEach((xhr) => {
+        xhr.abort();
+      });
+      uploadingXhrs.value = [];
+      fileStatus.value = Status.pause;
+    };
+    async function cUploadedChunks(urls, max = 4, retrys = 3) {
+      return new Promise((resolve, reject) => {
+        const len = urls.length;
+        let counter = 0;
+        const retryArr = [];
+        const start = async () => {
+          while (counter < len && max > 0) {
+            max--;
+            const i = urls.findIndex((v) => v.status === Status.wait || v.status === Status.error);
+            const currentChunk = urls[i];
+            if (currentChunk) {
+              currentChunk.status = Status.uploading;
+              upload(currentChunk, {
+                onprogress(ev) {
+                  chunks.value[currentChunk.index].progress = parseInt(ev.loaded / ev.total * 100 + "");
+                },
+                xhrs: uploadingXhrs.value
+              }).then(() => {
+                urls[i].status = Status.done;
+                max++;
+                counter++;
+              }).then(() => {
+                if (counter === len) {
+                  resolve(void 0);
+                } else {
+                  start();
+                }
+              }).catch(() => {
+                const index = urls[i].index;
+                urls[i].status = Status.error;
+                if (typeof retryArr[index] !== "number") {
+                  retryArr[index] = 0;
+                }
+                retryArr[index]++;
+                console.warn(
+                  index,
+                  urls[i],
+                  retryArr[index],
+                  "\u6B21\u62A5\u9519"
+                );
+                chunks.value[index].progress = -1;
+                if (retryArr[index] >= retrys) {
+                  return reject();
+                }
+                max++;
+                start();
+              });
+            }
+          }
+        };
+        start();
+      });
+    }
+    function cFile() {
+      if (!container.file)
+        return;
+      if (!container.hash)
+        return;
+      return merge({
+        filename: container.file.name,
+        identifier: container.hash,
+        dictId: props2.dictId
+      });
+    }
+    return {
+      formItemBindProps,
+      handleFileChange,
+      uuid,
+      container,
+      handleUpload,
+      fileStatus,
+      chunks,
+      Status,
+      filePrefixIcon,
+      handlePause
+    };
+  }
+});
+const _hoisted_1 = { class: "vkf-upload-plus-main" };
+const _hoisted_2 = ["for"];
+const _hoisted_3 = {
+  key: 0,
+  class: "vkf-upload-plus-msg-x"
+};
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("span", { class: "vkf-upload-plus-msg" }, " \u4E0A\u4F20\u6210\u529F ", -1);
+const _hoisted_5 = {
+  key: 1,
+  class: "vkf-upload-plus-cube-x"
+};
+const _hoisted_6 = ["id"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElInput = resolveComponent("ElInput");
+  const _component_SuccessFilled = resolveComponent("SuccessFilled");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_ElButton = resolveComponent("ElButton");
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_button_group = resolveComponent("el-button-group");
+  const _component_VkfFormItem = resolveComponent("VkfFormItem");
+  return openBlock(), createBlock(_component_VkfFormItem, mergeProps(_ctx.formItemBindProps, { class: "vkf-upload-plus" }), {
+    default: withCtx(() => [
+      createElementVNode("div", _hoisted_1, [
+        createElementVNode("label", {
+          for: _ctx.uuid,
+          class: "vkf-upload-plus-label"
+        }, [
+          createVNode(_component_ElInput, {
+            class: normalizeClass({
+              "is-success": _ctx.fileStatus === _ctx.Status.done,
+              "is-error": _ctx.fileStatus === _ctx.Status.error
+            }),
+            modelValue: _ctx.container.file?.name,
+            prefixIcon: _ctx.filePrefixIcon,
+            placeholder: "\u8BF7\u9009\u62E9\u6587\u4EF6"
+          }, null, 8, ["class", "modelValue", "prefixIcon"]),
+          _ctx.fileStatus === _ctx.Status.done ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            createVNode(_component_ElIcon, null, {
+              default: withCtx(() => [
+                createVNode(_component_SuccessFilled)
+              ]),
+              _: 1
+            }),
+            _hoisted_4
+          ])) : createCommentVNode("v-if", true),
+          _ctx.fileStatus === _ctx.Status.uploading || _ctx.fileStatus === _ctx.Status.pause ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.chunks, (chunk) => {
+              return openBlock(), createElementBlock("div", {
+                class: normalizeClass(["vkf-upload-plus-cube", {
+                  "error": chunk.status == _ctx.Status.error
+                }]),
+                key: chunk.hash,
+                style: normalizeStyle({
+                  width: 100 / chunk.chunksLength + "%"
+                })
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass({
+                    "uploading": chunk.progress > 0 && chunk.progress < 100,
+                    "success": chunk.progress == 100
+                  }),
+                  style: normalizeStyle({
+                    height: chunk.progress + "%"
+                  })
+                }, null, 6)
+              ], 6);
+            }), 128))
+          ])) : createCommentVNode("v-if", true)
+        ], 8, _hoisted_2),
+        createElementVNode("input", {
+          type: "file",
+          id: _ctx.uuid,
+          class: "vkf-upload-plus-input",
+          onChange: _cache[0] || (_cache[0] = (...args) => _ctx.handleFileChange && _ctx.handleFileChange(...args))
+        }, null, 40, _hoisted_6),
+        createVNode(_component_el_button_group, { class: "vkf-upload-plus-btng" }, {
+          default: withCtx(() => [
+            _ctx.fileStatus === _ctx.Status.uploading ? (openBlock(), createBlock(_component_ElButton, {
+              key: 0,
+              type: "danger",
+              onClick: _ctx.handlePause
+            }, {
+              default: withCtx(() => [
+                createTextVNode(" \u6682\u505C ")
+              ]),
+              _: 1
+            }, 8, ["onClick"])) : (openBlock(), createBlock(_component_el_button, {
+              key: 1,
+              type: "primary",
+              onClick: _ctx.handleUpload
+            }, {
+              default: withCtx(() => [
+                createTextVNode("\u4E0A\u4F20")
+              ]),
+              _: 1
+            }, 8, ["onClick"]))
+          ]),
+          _: 1
+        })
+      ])
+    ]),
+    _: 1
+  }, 16);
+}
+var VkfUploadPlus = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfUploadPlus.install = (app) => {
+  app.component(VkfUploadPlus.name, VkfUploadPlus);
+};
+
+export { VkfUploadPlus, api as _VkfUploadPlusApi, _const as _VkfUploadPlusConst, types as __VkfUploadPlus, VkfUploadPlus as default };