fantasia-ui 0.2.56 → 0.2.59

package/dist/fantasia-ui.css

@@ -6696,73 +6696,57 @@ to {
   color: #94a3b8;
   font-weight: 700;
   background: rgba(248, 250, 252, 0.5);
-}.f-upload[data-v-8e954b9a] {
+}.f-upload[data-v-04ecda2b] {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.f-upload__zone[data-v-8e954b9a] {
+.f-upload__trigger[data-v-04ecda2b] {
+  display: inline-block;
+  cursor: pointer;
+}
+.f-upload__zone[data-v-04ecda2b] {
   height: 11rem;
+  width: 100%;
   border: 2px dashed #e2e8f0;
   border-radius: 8px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 1.25rem;
   text-align: center;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.f-upload__zone[data-v-8e954b9a]:hover {
+.f-upload__zone[data-v-04ecda2b]:hover {
   border-color: #818cf8;
   background: rgba(248, 250, 252, 0.3);
 }
-.f-upload--drag[data-v-8e954b9a] {
+.f-upload--drag .f-upload__zone[data-v-04ecda2b] {
   border-color: #6366f1;
   background: rgba(238, 242, 255, 0.2);
 }
-.f-upload__input[data-v-8e954b9a] {
+.f-upload__input[data-v-04ecda2b] {
   display: none;
 }
-.f-upload__label[data-v-8e954b9a] {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-.f-upload__button[data-v-8e954b9a] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 2.5rem;
-  padding: 0 1rem;
-  border-radius: 9999px;
-  background: linear-gradient(135deg, #ec4899, #a855f7);
-  color: #fff;
-  cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  box-shadow: 0 6px 16px rgba(168, 85, 247, 0.2);
-}
-.f-upload__button[data-v-8e954b9a]:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 10px 18px rgba(168, 85, 247, 0.24);
-}
-.f-upload__title[data-v-8e954b9a] {
+.f-upload__title[data-v-04ecda2b] {
   font-size: 0.75rem;
   font-weight: 700;
   color: #334155;
 }
-.f-upload__hint[data-v-8e954b9a] {
+.f-upload__hint[data-v-04ecda2b] {
   font-size: 0.625rem;
   font-weight: 700;
   color: #94a3b8;
   margin-top: 0.25rem;
   line-height: 1.4;
 }
-.f-upload__file-item[data-v-8e954b9a] {
+.f-upload__list[data-v-04ecda2b] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.f-upload__file-item[data-v-04ecda2b] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -6773,18 +6757,30 @@ to {
   font-size: 0.75rem;
   color: #4338ca;
 }
-.f-upload__file-info[data-v-8e954b9a] {
+.f-upload__file-item--error[data-v-04ecda2b] {
+  background: rgba(254, 226, 226, 0.5);
+  border-color: #fecaca;
+  color: #b91c1c;
+}
+.f-upload__file-item--success[data-v-04ecda2b] {
+  border-color: #bbf7d0;
+}
+.f-upload__file-info[data-v-04ecda2b] {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   flex: 1;
   min-width: 0;
 }
-.f-upload__file-name[data-v-8e954b9a] {
+.f-upload__file-name[data-v-04ecda2b] {
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+.f-upload__file-error[data-v-04ecda2b] {
+  font-size: 0.6875rem;
+  color: #dc2626;
 }.f-button-group[data-v-62561657] {
   display: inline-flex;
   vertical-align: middle;

package/dist/fantasia-ui.es.js

@@ -38,7 +38,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, unref, renderSlot, normalizeClass, createCommentVNode, Fragment, renderList, createElementVNode, toDisplayString, ref, watch, createVNode, withDirectives, Transition, withCtx, vShow, mergeModels, useModel, inject, createBlock, resolveDynamicComponent, nextTick, onUnmounted, Teleport, withModifiers, withKeys, isRef, vModelText, createTextVNode, TransitionGroup, useSlots, provide, onMounted, readonly, onBeforeUnmount, reactive, toRefs, createStaticVNode, h, render } from "vue";
-import { CloseCircleOutline, EyeOutline, EyeOffOutline, StarOutline, StarHalf, Star, ChevronDownOutline, ChevronBackOutline, EllipsisHorizontal, ChevronForwardOutline, CloseCircle, Close, Person, InformationCircleOutline, WarningOutline, AlertCircleOutline, CheckmarkCircleOutline, CloudUpload, DocumentOutline, RemoveOutline, AddOutline, ChevronUpOutline, InformationCircle, AlertCircle, CheckmarkCircle, CloseOutline, Warning } from "@vicons/ionicons5";
+import { CloseCircleOutline, EyeOutline, EyeOffOutline, StarOutline, StarHalf, Star, ChevronDownOutline, ChevronBackOutline, EllipsisHorizontal, ChevronForwardOutline, CloseCircle, Close, Person, InformationCircleOutline, WarningOutline, AlertCircleOutline, CheckmarkCircleOutline, CloudUpload, CheckmarkCircle, AlertCircle, DocumentOutline, Reload, RemoveOutline, AddOutline, ChevronUpOutline, InformationCircle, CloseOutline, Warning } from "@vicons/ionicons5";
 import { useEventListener } from "@vueuse/core";
 const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "FIcon",
@@ -722,7 +722,7 @@ const _hoisted_7$5 = {
   class: "page-btn ellipsis"
 };
 const _hoisted_8$4 = ["onClick"];
-const _hoisted_9$4 = {
+const _hoisted_9$3 = {
   key: 5,
   class: "f-pagination__jump"
 };
@@ -831,7 +831,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               })
-            ], 2)) : item === "jumper" ? (openBlock(), createElementBlock("div", _hoisted_9$4, [
+            ], 2)) : item === "jumper" ? (openBlock(), createElementBlock("div", _hoisted_9$3, [
               _cache[3] || (_cache[3] = createElementVNode("span", { class: "jump-label" }, "前往", -1)),
               withDirectives(createElementVNode("input", {
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(jumpInput) ? jumpInput.value = $event : null),
@@ -885,7 +885,7 @@ const _hoisted_8$3 = {
   key: 1,
   class: "f-card__cover"
 };
-const _hoisted_9$3 = { class: "f-card__content" };
+const _hoisted_9$2 = { class: "f-card__content" };
 const _hoisted_10$2 = {
   key: 0,
   class: "f-card__body"
@@ -931,7 +931,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           _ctx.$slots.cover ? (openBlock(), createElementBlock("div", _hoisted_8$3, [
             renderSlot(_ctx.$slots, "cover", {}, void 0, true)
           ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_9$3, [
+          createElementVNode("div", _hoisted_9$2, [
             _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_10$2, [
               renderSlot(_ctx.$slots, "default", {}, void 0, true)
             ])) : createCommentVNode("", true),
@@ -2383,7 +2383,7 @@ const _hoisted_5$7 = { class: "f-transfer__actions" };
 const _hoisted_6$6 = ["disabled"];
 const _hoisted_7$3 = ["disabled"];
 const _hoisted_8$2 = { class: "f-transfer__panel" };
-const _hoisted_9$2 = { class: "f-transfer__header" };
+const _hoisted_9$1 = { class: "f-transfer__header" };
 const _hoisted_10$1 = { class: "f-transfer__list" };
 const _hoisted_11$1 = ["onClick"];
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
@@ -2469,7 +2469,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           }, " ← ", 8, _hoisted_7$3)
         ]),
         createElementVNode("div", _hoisted_8$2, [
-          createElementVNode("div", _hoisted_9$2, toDisplayString(_ctx.rightTitle), 1),
+          createElementVNode("div", _hoisted_9$1, toDisplayString(_ctx.rightTitle), 1),
           createElementVNode("ul", _hoisted_10$1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rightList), (item) => {
               return openBlock(), createElementBlock("li", {
@@ -2806,7 +2806,7 @@ const _hoisted_6$4 = {
 };
 const _hoisted_7$2 = { class: "f-table__th-inner" };
 const _hoisted_8$1 = { class: "f-table__body" };
-const _hoisted_9$1 = {
+const _hoisted_9 = {
   key: 0,
   class: "f-table__spacer"
 };
@@ -2929,7 +2929,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               ])
             ]),
             createElementVNode("tbody", _hoisted_8$1, [
-              unref(offsetTop) > 0 ? (openBlock(), createElementBlock("tr", _hoisted_9$1, [
+              unref(offsetTop) > 0 ? (openBlock(), createElementBlock("tr", _hoisted_9, [
                 createElementVNode("td", {
                   colspan: unref(colSpan),
                   style: normalizeStyle({ height: unref(offsetTop) + "px" })
@@ -2995,42 +2995,96 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
 });
 const FTable = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-01724962"]]);
 const _hoisted_1$c = { class: "f-upload" };
-const _hoisted_2$a = { class: "f-upload__label" };
-const _hoisted_3$a = ["accept"];
+const _hoisted_2$a = ["accept", "multiple"];
+const _hoisted_3$a = { class: "f-upload__zone" };
 const _hoisted_4$7 = { class: "f-upload__hint" };
 const _hoisted_5$4 = {
-  key: 1,
-  class: "f-upload__button"
+  key: 0,
+  class: "f-upload__list"
 };
-const _hoisted_6$3 = ["accept"];
-const _hoisted_7$1 = {
-  key: 2,
-  class: "f-upload__file-item"
+const _hoisted_6$3 = { class: "f-upload__file-info" };
+const _hoisted_7$1 = { class: "f-upload__file-name" };
+const _hoisted_8 = {
+  key: 1,
+  class: "f-upload__file-error"
 };
-const _hoisted_8 = { class: "f-upload__file-info" };
-const _hoisted_9 = { class: "f-upload__file-name" };
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "FUpload",
   props: /* @__PURE__ */ mergeModels({
     accept: {},
+    hint: { default: "支持 .xlsx .xls .json .txt" },
     limit: {},
-    progress: {},
-    buttonMode: { type: Boolean, default: false },
-    buttonText: { default: "选择文件" },
-    hint: { default: "支持 .xlsx .xls .json .txt" }
+    autoUpload: { type: Boolean, default: true },
+    beforeUpload: {},
+    httpRequest: {}
   }, {
-    "file": { default: "" },
-    "fileModifiers": {}
+    "fileList": { default: () => [] },
+    "fileListModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["change", "exceed"], ["update:file"]),
-  setup(__props, { emit: __emit }) {
-    const file = useModel(__props, "file");
+  emits: /* @__PURE__ */ mergeModels(["change", "progress", "success", "error", "remove", "exceed"], ["update:fileList"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const fileList = useModel(__props, "fileList");
     const props = __props;
     const emit = __emit;
     const dragActive = ref(false);
-    const isCloseHover = ref(false);
-    const clearFile = () => {
-      file.value = "";
+    const hoveredUid = ref(null);
+    const genUid = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    const findItem = (uid) => fileList.value.find((f) => f.uid === uid);
+    const updateItem = (uid, patch) => {
+      const item = findItem(uid);
+      if (item) Object.assign(item, patch);
+      return item;
+    };
+    const submitUpload = (item) => __async(null, null, function* () {
+      if (!props.httpRequest) return;
+      updateItem(item.uid, { status: "uploading", percentage: 0 });
+      try {
+        const response = yield props.httpRequest(item.raw, (percent) => {
+          const current = updateItem(item.uid, { percentage: percent });
+          if (current) emit("progress", current);
+        });
+        const done = updateItem(item.uid, { status: "success", percentage: 100, response });
+        if (done) emit("success", done, response);
+      } catch (err) {
+        const failed = updateItem(item.uid, { status: "error", errorMessage: (err == null ? void 0 : err.message) || "上传失败" });
+        if (failed) emit("error", failed, err);
+      }
+    });
+    const addFiles = (files) => __async(null, null, function* () {
+      if (!files.length) return;
+      const remaining = props.limit != null ? props.limit - fileList.value.length : Infinity;
+      if (remaining <= 0) {
+        emit("exceed", files);
+        return;
+      }
+      const accepted = files.slice(0, remaining);
+      const rejected = files.slice(remaining);
+      if (rejected.length) emit("exceed", rejected);
+      for (const raw of accepted) {
+        if (props.beforeUpload) {
+          const ok = yield props.beforeUpload(raw);
+          if (!ok) continue;
+        }
+        const item = {
+          uid: genUid(),
+          name: raw.name,
+          status: "ready",
+          percentage: 0,
+          raw
+        };
+        fileList.value = [...fileList.value, item];
+        emit("change", item);
+        if (props.autoUpload) submitUpload(item);
+      }
+    });
+    const retryUpload = (uid) => {
+      const item = findItem(uid);
+      if (item) submitUpload(item);
+    };
+    const removeFile = (uid) => {
+      const item = findItem(uid);
+      fileList.value = fileList.value.filter((f) => f.uid !== uid);
+      if (item) emit("remove", item);
     };
     const onDragOver = (e) => {
       e.preventDefault();
@@ -3044,94 +3098,94 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       var _a, _b;
       e.preventDefault();
       dragActive.value = false;
-      const f = (_b = (_a = e.dataTransfer) == null ? void 0 : _a.files) == null ? void 0 : _b[0];
-      if (!f) return;
-      if (props.limit && f.size > props.limit) {
-        emit("exceed", f);
-        return;
-      }
-      emit("change", f);
+      const files = Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.files) != null ? _b : []);
+      addFiles(files);
     };
     const onFileChange = (e) => {
       var _a;
-      const f = (_a = e.target.files) == null ? void 0 : _a[0];
-      if (!f) return;
-      if (props.limit && f.size > props.limit) {
-        emit("exceed", f);
-        return;
-      }
-      emit("change", f);
+      const input = e.target;
+      const files = Array.from((_a = input.files) != null ? _a : []);
+      input.value = "";
+      addFiles(files);
     };
+    __expose({ retryUpload, removeFile, submitAll: () => fileList.value.filter((f) => f.status === "ready").forEach(submitUpload) });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        !_ctx.buttonMode ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass(["f-upload__zone", { "f-upload--drag": unref(dragActive) }]),
+        createElementVNode("label", {
+          class: normalizeClass(["f-upload__trigger", { "f-upload--drag": unref(dragActive) }]),
           onDragover: onDragOver,
           onDragleave: onDragLeave,
           onDrop
         }, [
-          createElementVNode("label", _hoisted_2$a, [
-            createElementVNode("input", {
-              type: "file",
-              accept: _ctx.accept,
-              class: "f-upload__input",
-              onChange: onFileChange
-            }, null, 40, _hoisted_3$a),
-            renderSlot(_ctx.$slots, "default", {}, () => [
+          createElementVNode("input", {
+            type: "file",
+            accept: _ctx.accept,
+            multiple: _ctx.limit == null || _ctx.limit > 1,
+            class: "f-upload__input",
+            onChange: onFileChange
+          }, null, 40, _hoisted_2$a),
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createElementVNode("div", _hoisted_3$a, [
               createVNode(FIcon, { size: 40 }, {
                 default: withCtx(() => [
                   createVNode(unref(CloudUpload))
                 ]),
                 _: 1
               }),
-              _cache[2] || (_cache[2] = createElementVNode("span", { class: "f-upload__title" }, "点击或拖拽文件至此处", -1)),
+              _cache[1] || (_cache[1] = createElementVNode("span", { class: "f-upload__title" }, "点击或拖拽文件至此处", -1)),
               createElementVNode("span", _hoisted_4$7, toDisplayString(_ctx.hint), 1)
-            ], true)
-          ])
-        ], 34)) : (openBlock(), createElementBlock("label", _hoisted_5$4, [
-          createElementVNode("input", {
-            type: "file",
-            accept: _ctx.accept,
-            class: "f-upload__input",
-            onChange: onFileChange
-          }, null, 40, _hoisted_6$3),
-          renderSlot(_ctx.$slots, "default", {}, () => [
-            createElementVNode("span", null, toDisplayString(_ctx.buttonText), 1)
+            ])
           ], true)
-        ])),
-        file.value ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
-          createVNode(FIcon, null, {
-            default: withCtx(() => [
-              createVNode(unref(DocumentOutline))
-            ]),
-            _: 1
-          }),
-          createElementVNode("div", _hoisted_8, [
-            createElementVNode("span", _hoisted_9, toDisplayString(file.value), 1),
-            _ctx.progress != null ? (openBlock(), createBlock(FProgress, {
-              key: 0,
-              percent: _ctx.progress,
-              "show-text": ""
-            }, null, 8, ["percent"])) : createCommentVNode("", true)
-          ]),
-          createVNode(FIcon, {
-            onClick: withModifiers(clearFile, ["stop"]),
-            onMouseenter: _cache[0] || (_cache[0] = ($event) => isCloseHover.value = true),
-            onMouseleave: _cache[1] || (_cache[1] = ($event) => isCloseHover.value = false),
-            style: { "cursor": "pointer", "transition": "color 0.2s" }
-          }, {
-            default: withCtx(() => [
-              (openBlock(), createBlock(resolveDynamicComponent(unref(isCloseHover) ? unref(CloseCircle) : unref(Close))))
-            ]),
-            _: 1
-          })
+        ], 34),
+        fileList.value.length ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(fileList.value, (item) => {
+            return openBlock(), createElementBlock("div", {
+              key: item.uid,
+              class: normalizeClass(["f-upload__file-item", `f-upload__file-item--${item.status}`])
+            }, [
+              createVNode(FIcon, null, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(item.status === "success" ? unref(CheckmarkCircle) : item.status === "error" ? unref(AlertCircle) : unref(DocumentOutline))))
+                ]),
+                _: 2
+              }, 1024),
+              createElementVNode("div", _hoisted_6$3, [
+                createElementVNode("span", _hoisted_7$1, toDisplayString(item.name), 1),
+                item.status === "uploading" ? (openBlock(), createBlock(FProgress, {
+                  key: 0,
+                  percent: item.percentage,
+                  "show-text": ""
+                }, null, 8, ["percent"])) : item.status === "error" ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(item.errorMessage), 1)) : createCommentVNode("", true)
+              ]),
+              item.status === "error" ? (openBlock(), createBlock(FIcon, {
+                key: 0,
+                onClick: withModifiers(($event) => retryUpload(item.uid), ["stop"]),
+                style: { "cursor": "pointer" }
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(Reload))
+                ]),
+                _: 2
+              }, 1032, ["onClick"])) : createCommentVNode("", true),
+              createVNode(FIcon, {
+                onClick: withModifiers(($event) => removeFile(item.uid), ["stop"]),
+                onMouseenter: ($event) => hoveredUid.value = item.uid,
+                onMouseleave: _cache[0] || (_cache[0] = ($event) => hoveredUid.value = null),
+                style: { "cursor": "pointer", "transition": "color 0.2s" }
+              }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(hoveredUid) === item.uid ? unref(CloseCircle) : unref(Close))))
+                ]),
+                _: 2
+              }, 1032, ["onClick", "onMouseenter"])
+            ], 2);
+          }), 128))
         ])) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const FUpload = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-8e954b9a"]]);
+const FUpload = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-04ecda2b"]]);
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "FButtonGroup",
   props: {

package/dist/fantasia-ui.umd.js

@@ -723,7 +723,7 @@ var __async = (__this, __arguments, generator) => {
     class: "page-btn ellipsis"
   };
   const _hoisted_8$4 = ["onClick"];
-  const _hoisted_9$4 = {
+  const _hoisted_9$3 = {
     key: 5,
     class: "f-pagination__jump"
   };
@@ -832,7 +832,7 @@ var __async = (__this, __arguments, generator) => {
                   ]),
                   _: 1
                 })
-              ], 2)) : item === "jumper" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$4, [
+              ], 2)) : item === "jumper" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$3, [
                 _cache[3] || (_cache[3] = vue.createElementVNode("span", { class: "jump-label" }, "前往", -1)),
                 vue.withDirectives(vue.createElementVNode("input", {
                   "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(jumpInput) ? jumpInput.value = $event : null),
@@ -886,7 +886,7 @@ var __async = (__this, __arguments, generator) => {
     key: 1,
     class: "f-card__cover"
   };
-  const _hoisted_9$3 = { class: "f-card__content" };
+  const _hoisted_9$2 = { class: "f-card__content" };
   const _hoisted_10$2 = {
     key: 0,
     class: "f-card__body"
@@ -932,7 +932,7 @@ var __async = (__this, __arguments, generator) => {
             _ctx.$slots.cover ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$3, [
               vue.renderSlot(_ctx.$slots, "cover", {}, void 0, true)
             ])) : vue.createCommentVNode("", true),
-            vue.createElementVNode("div", _hoisted_9$3, [
+            vue.createElementVNode("div", _hoisted_9$2, [
               _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$2, [
                 vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
               ])) : vue.createCommentVNode("", true),
@@ -2384,7 +2384,7 @@ var __async = (__this, __arguments, generator) => {
   const _hoisted_6$6 = ["disabled"];
   const _hoisted_7$3 = ["disabled"];
   const _hoisted_8$2 = { class: "f-transfer__panel" };
-  const _hoisted_9$2 = { class: "f-transfer__header" };
+  const _hoisted_9$1 = { class: "f-transfer__header" };
   const _hoisted_10$1 = { class: "f-transfer__list" };
   const _hoisted_11$1 = ["onClick"];
   const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
@@ -2470,7 +2470,7 @@ var __async = (__this, __arguments, generator) => {
             }, " ← ", 8, _hoisted_7$3)
           ]),
           vue.createElementVNode("div", _hoisted_8$2, [
-            vue.createElementVNode("div", _hoisted_9$2, vue.toDisplayString(_ctx.rightTitle), 1),
+            vue.createElementVNode("div", _hoisted_9$1, vue.toDisplayString(_ctx.rightTitle), 1),
             vue.createElementVNode("ul", _hoisted_10$1, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rightList), (item) => {
                 return vue.openBlock(), vue.createElementBlock("li", {
@@ -2807,7 +2807,7 @@ var __async = (__this, __arguments, generator) => {
   };
   const _hoisted_7$2 = { class: "f-table__th-inner" };
   const _hoisted_8$1 = { class: "f-table__body" };
-  const _hoisted_9$1 = {
+  const _hoisted_9 = {
     key: 0,
     class: "f-table__spacer"
   };
@@ -2930,7 +2930,7 @@ var __async = (__this, __arguments, generator) => {
                 ])
               ]),
               vue.createElementVNode("tbody", _hoisted_8$1, [
-                vue.unref(offsetTop) > 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_9$1, [
+                vue.unref(offsetTop) > 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_9, [
                   vue.createElementVNode("td", {
                     colspan: vue.unref(colSpan),
                     style: vue.normalizeStyle({ height: vue.unref(offsetTop) + "px" })
@@ -2996,42 +2996,96 @@ var __async = (__this, __arguments, generator) => {
   });
   const FTable = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-01724962"]]);
   const _hoisted_1$c = { class: "f-upload" };
-  const _hoisted_2$a = { class: "f-upload__label" };
-  const _hoisted_3$a = ["accept"];
+  const _hoisted_2$a = ["accept", "multiple"];
+  const _hoisted_3$a = { class: "f-upload__zone" };
   const _hoisted_4$7 = { class: "f-upload__hint" };
   const _hoisted_5$4 = {
-    key: 1,
-    class: "f-upload__button"
+    key: 0,
+    class: "f-upload__list"
   };
-  const _hoisted_6$3 = ["accept"];
-  const _hoisted_7$1 = {
-    key: 2,
-    class: "f-upload__file-item"
+  const _hoisted_6$3 = { class: "f-upload__file-info" };
+  const _hoisted_7$1 = { class: "f-upload__file-name" };
+  const _hoisted_8 = {
+    key: 1,
+    class: "f-upload__file-error"
   };
-  const _hoisted_8 = { class: "f-upload__file-info" };
-  const _hoisted_9 = { class: "f-upload__file-name" };
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "FUpload",
     props: /* @__PURE__ */ vue.mergeModels({
       accept: {},
+      hint: { default: "支持 .xlsx .xls .json .txt" },
       limit: {},
-      progress: {},
-      buttonMode: { type: Boolean, default: false },
-      buttonText: { default: "选择文件" },
-      hint: { default: "支持 .xlsx .xls .json .txt" }
+      autoUpload: { type: Boolean, default: true },
+      beforeUpload: {},
+      httpRequest: {}
     }, {
-      "file": { default: "" },
-      "fileModifiers": {}
+      "fileList": { default: () => [] },
+      "fileListModifiers": {}
     }),
-    emits: /* @__PURE__ */ vue.mergeModels(["change", "exceed"], ["update:file"]),
-    setup(__props, { emit: __emit }) {
-      const file = vue.useModel(__props, "file");
+    emits: /* @__PURE__ */ vue.mergeModels(["change", "progress", "success", "error", "remove", "exceed"], ["update:fileList"]),
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const fileList = vue.useModel(__props, "fileList");
       const props = __props;
       const emit = __emit;
       const dragActive = vue.ref(false);
-      const isCloseHover = vue.ref(false);
-      const clearFile = () => {
-        file.value = "";
+      const hoveredUid = vue.ref(null);
+      const genUid = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+      const findItem = (uid) => fileList.value.find((f) => f.uid === uid);
+      const updateItem = (uid, patch) => {
+        const item = findItem(uid);
+        if (item) Object.assign(item, patch);
+        return item;
+      };
+      const submitUpload = (item) => __async(null, null, function* () {
+        if (!props.httpRequest) return;
+        updateItem(item.uid, { status: "uploading", percentage: 0 });
+        try {
+          const response = yield props.httpRequest(item.raw, (percent) => {
+            const current = updateItem(item.uid, { percentage: percent });
+            if (current) emit("progress", current);
+          });
+          const done = updateItem(item.uid, { status: "success", percentage: 100, response });
+          if (done) emit("success", done, response);
+        } catch (err) {
+          const failed = updateItem(item.uid, { status: "error", errorMessage: (err == null ? void 0 : err.message) || "上传失败" });
+          if (failed) emit("error", failed, err);
+        }
+      });
+      const addFiles = (files) => __async(null, null, function* () {
+        if (!files.length) return;
+        const remaining = props.limit != null ? props.limit - fileList.value.length : Infinity;
+        if (remaining <= 0) {
+          emit("exceed", files);
+          return;
+        }
+        const accepted = files.slice(0, remaining);
+        const rejected = files.slice(remaining);
+        if (rejected.length) emit("exceed", rejected);
+        for (const raw of accepted) {
+          if (props.beforeUpload) {
+            const ok = yield props.beforeUpload(raw);
+            if (!ok) continue;
+          }
+          const item = {
+            uid: genUid(),
+            name: raw.name,
+            status: "ready",
+            percentage: 0,
+            raw
+          };
+          fileList.value = [...fileList.value, item];
+          emit("change", item);
+          if (props.autoUpload) submitUpload(item);
+        }
+      });
+      const retryUpload = (uid) => {
+        const item = findItem(uid);
+        if (item) submitUpload(item);
+      };
+      const removeFile = (uid) => {
+        const item = findItem(uid);
+        fileList.value = fileList.value.filter((f) => f.uid !== uid);
+        if (item) emit("remove", item);
       };
       const onDragOver = (e) => {
         e.preventDefault();
@@ -3045,94 +3099,94 @@ var __async = (__this, __arguments, generator) => {
         var _a, _b;
         e.preventDefault();
         dragActive.value = false;
-        const f = (_b = (_a = e.dataTransfer) == null ? void 0 : _a.files) == null ? void 0 : _b[0];
-        if (!f) return;
-        if (props.limit && f.size > props.limit) {
-          emit("exceed", f);
-          return;
-        }
-        emit("change", f);
+        const files = Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.files) != null ? _b : []);
+        addFiles(files);
       };
       const onFileChange = (e) => {
         var _a;
-        const f = (_a = e.target.files) == null ? void 0 : _a[0];
-        if (!f) return;
-        if (props.limit && f.size > props.limit) {
-          emit("exceed", f);
-          return;
-        }
-        emit("change", f);
+        const input = e.target;
+        const files = Array.from((_a = input.files) != null ? _a : []);
+        input.value = "";
+        addFiles(files);
       };
+      __expose({ retryUpload, removeFile, submitAll: () => fileList.value.filter((f) => f.status === "ready").forEach(submitUpload) });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
-          !_ctx.buttonMode ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: vue.normalizeClass(["f-upload__zone", { "f-upload--drag": vue.unref(dragActive) }]),
+          vue.createElementVNode("label", {
+            class: vue.normalizeClass(["f-upload__trigger", { "f-upload--drag": vue.unref(dragActive) }]),
             onDragover: onDragOver,
             onDragleave: onDragLeave,
             onDrop
           }, [
-            vue.createElementVNode("label", _hoisted_2$a, [
-              vue.createElementVNode("input", {
-                type: "file",
-                accept: _ctx.accept,
-                class: "f-upload__input",
-                onChange: onFileChange
-              }, null, 40, _hoisted_3$a),
-              vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            vue.createElementVNode("input", {
+              type: "file",
+              accept: _ctx.accept,
+              multiple: _ctx.limit == null || _ctx.limit > 1,
+              class: "f-upload__input",
+              onChange: onFileChange
+            }, null, 40, _hoisted_2$a),
+            vue.renderSlot(_ctx.$slots, "default", {}, () => [
+              vue.createElementVNode("div", _hoisted_3$a, [
                 vue.createVNode(FIcon, { size: 40 }, {
                   default: vue.withCtx(() => [
                     vue.createVNode(vue.unref(ionicons5.CloudUpload))
                   ]),
                   _: 1
                 }),
-                _cache[2] || (_cache[2] = vue.createElementVNode("span", { class: "f-upload__title" }, "点击或拖拽文件至此处", -1)),
+                _cache[1] || (_cache[1] = vue.createElementVNode("span", { class: "f-upload__title" }, "点击或拖拽文件至此处", -1)),
                 vue.createElementVNode("span", _hoisted_4$7, vue.toDisplayString(_ctx.hint), 1)
-              ], true)
-            ])
-          ], 34)) : (vue.openBlock(), vue.createElementBlock("label", _hoisted_5$4, [
-            vue.createElementVNode("input", {
-              type: "file",
-              accept: _ctx.accept,
-              class: "f-upload__input",
-              onChange: onFileChange
-            }, null, 40, _hoisted_6$3),
-            vue.renderSlot(_ctx.$slots, "default", {}, () => [
-              vue.createElementVNode("span", null, vue.toDisplayString(_ctx.buttonText), 1)
+              ])
             ], true)
-          ])),
-          file.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
-            vue.createVNode(FIcon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(ionicons5.DocumentOutline))
-              ]),
-              _: 1
-            }),
-            vue.createElementVNode("div", _hoisted_8, [
-              vue.createElementVNode("span", _hoisted_9, vue.toDisplayString(file.value), 1),
-              _ctx.progress != null ? (vue.openBlock(), vue.createBlock(FProgress, {
-                key: 0,
-                percent: _ctx.progress,
-                "show-text": ""
-              }, null, 8, ["percent"])) : vue.createCommentVNode("", true)
-            ]),
-            vue.createVNode(FIcon, {
-              onClick: vue.withModifiers(clearFile, ["stop"]),
-              onMouseenter: _cache[0] || (_cache[0] = ($event) => isCloseHover.value = true),
-              onMouseleave: _cache[1] || (_cache[1] = ($event) => isCloseHover.value = false),
-              style: { "cursor": "pointer", "transition": "color 0.2s" }
-            }, {
-              default: vue.withCtx(() => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(isCloseHover) ? vue.unref(ionicons5.CloseCircle) : vue.unref(ionicons5.Close))))
-              ]),
-              _: 1
-            })
+          ], 34),
+          fileList.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fileList.value, (item) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: item.uid,
+                class: vue.normalizeClass(["f-upload__file-item", `f-upload__file-item--${item.status}`])
+              }, [
+                vue.createVNode(FIcon, null, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.status === "success" ? vue.unref(ionicons5.CheckmarkCircle) : item.status === "error" ? vue.unref(ionicons5.AlertCircle) : vue.unref(ionicons5.DocumentOutline))))
+                  ]),
+                  _: 2
+                }, 1024),
+                vue.createElementVNode("div", _hoisted_6$3, [
+                  vue.createElementVNode("span", _hoisted_7$1, vue.toDisplayString(item.name), 1),
+                  item.status === "uploading" ? (vue.openBlock(), vue.createBlock(FProgress, {
+                    key: 0,
+                    percent: item.percentage,
+                    "show-text": ""
+                  }, null, 8, ["percent"])) : item.status === "error" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8, vue.toDisplayString(item.errorMessage), 1)) : vue.createCommentVNode("", true)
+                ]),
+                item.status === "error" ? (vue.openBlock(), vue.createBlock(FIcon, {
+                  key: 0,
+                  onClick: vue.withModifiers(($event) => retryUpload(item.uid), ["stop"]),
+                  style: { "cursor": "pointer" }
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(ionicons5.Reload))
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"])) : vue.createCommentVNode("", true),
+                vue.createVNode(FIcon, {
+                  onClick: vue.withModifiers(($event) => removeFile(item.uid), ["stop"]),
+                  onMouseenter: ($event) => hoveredUid.value = item.uid,
+                  onMouseleave: _cache[0] || (_cache[0] = ($event) => hoveredUid.value = null),
+                  style: { "cursor": "pointer", "transition": "color 0.2s" }
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(hoveredUid) === item.uid ? vue.unref(ionicons5.CloseCircle) : vue.unref(ionicons5.Close))))
+                  ]),
+                  _: 2
+                }, 1032, ["onClick", "onMouseenter"])
+              ], 2);
+            }), 128))
           ])) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
-  const FUpload = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-8e954b9a"]]);
+  const FUpload = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-04ecda2b"]]);
   const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "FButtonGroup",
     props: {

package/dist/types/packages/components/modules/FUpload.vue.d.ts

@@ -1,32 +1,35 @@
-type __VLS_Props = {
-    accept?: string;
-    limit?: number;
-    progress?: number | null;
-    buttonMode?: boolean;
-    buttonText?: string;
-    hint?: string;
-};
+import type { FUploadProps, UploadFileItem } from '../../types';
+type __VLS_Props = FUploadProps;
 type __VLS_PublicProps = __VLS_Props & {
-    'file'?: string;
+    'fileList'?: UploadFileItem[];
 };
-declare var __VLS_1: {}, __VLS_10: {};
+declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (file: File) => any;
-    exceed: (file: File) => any;
-    "update:file": (value: string) => any;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {
+    retryUpload: (uid: string) => void;
+    removeFile: (uid: string) => void;
+    submitAll: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    success: (file: UploadFileItem, response: string) => any;
+    error: (file: UploadFileItem, error: unknown) => any;
+    progress: (file: UploadFileItem) => any;
+    change: (file: UploadFileItem) => any;
+    remove: (file: UploadFileItem) => any;
+    exceed: (files: File[]) => any;
+    "update:fileList": (value: UploadFileItem[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onChange?: (file: File) => any;
-    onExceed?: (file: File) => any;
-    "onUpdate:file"?: (value: string) => any;
+    onSuccess?: (file: UploadFileItem, response: string) => any;
+    onError?: (file: UploadFileItem, error: unknown) => any;
+    onProgress?: (file: UploadFileItem) => any;
+    onChange?: (file: UploadFileItem) => any;
+    onRemove?: (file: UploadFileItem) => any;
+    onExceed?: (files: File[]) => any;
+    "onUpdate:fileList"?: (value: UploadFileItem[]) => any;
 }>, {
-    buttonMode: boolean;
-    buttonText: string;
     hint: string;
+    autoUpload: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/types/packages/index.d.ts

@@ -4,6 +4,4 @@ declare const install: Plugin;
 export default install;
 export * from './components';
 export * from './composables';
-export type { FDialogFn, FDialogOptions } from './types/components';
-export type { FMessageFn, FMessageOptions, FMessageInstance } from './types/components';
-export type { FNotificationFn, FNotificationOptions, FNotificationInstance } from './types/components';
+export type { FDialogFn, FDialogOptions, FMessageFn, FMessageOptions, FMessageInstance, FNotificationFn, FNotificationOptions, FNotificationInstance, UploadFileItem } from './types/components';

package/dist/types/packages/types/components/modules/f-upload.d.ts

@@ -1,11 +1,28 @@
-type imageType = 'image/png' | 'image/jpeg' | 'image/webp' | 'image/jpg' | 'image/bmp' | 'image/gif' | 'image/svg+xml' | 'image/svg';
-type fileType = imageType;
-type fileTypes = 'image';
-type fileTypesMap = {
-    [key in fileTypes]: fileType[];
-};
-interface SheetData {
-    sheetName: string;
-    data: any[];
+interface FUploadProps {
+    accept?: string;
+    hint?: string;
+    /** 最多允许存在的文件数（数量限制，不是字节大小） */
+    limit?: number;
+    /** 选中后是否立即自动上传，默认 true */
+    autoUpload?: boolean;
+    /**
+     * 校验/拦截钩子：返回 false 或 reject 则该文件不会进入列表也不会上传。
+     * 用来做文件大小、类型等前置校验，替代过去分散在各业务组件里的校验代码。
+     */
+    beforeUpload?: (file: File) => boolean | Promise<boolean>;
+    /**
+     * 实际上传逻辑，由调用方注入——组件本身不关心用的是 fetch/axios/dispatcher，
+     * 只负责在合适的时机调用它，并把 onProgress 回调交给它在上传过程中调用。
+     */
+    httpRequest?: (file: File, onProgress: (percent: number) => void) => Promise<string>;
 }
-export type { fileTypesMap, SheetData, imageType };
+interface UploadFileItem {
+    uid: string;
+    name: string;
+    status: 'ready' | 'uploading' | 'success' | 'error';
+    percentage: number;
+    raw: File;
+    response?: string;
+    errorMessage?: string;
+}
+export type { FUploadProps, UploadFileItem };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fantasia-ui",
   "private": false,
-  "version": "0.2.56",
+  "version": "0.2.59",
   "type": "module",
   "main": "dist/fantasia-ui.umd.js",
   "module": "dist/fantasia-ui.es.js",