fantasia-ui 0.3.2 → 0.3.3

package/dist/fantasia-ui.css

@@ -5859,46 +5859,41 @@
 
 .f-table {
   position: relative;
+  display: flex;
+  flex-direction: column;
   border: 1px solid #e2e8f0;
   border-radius: 6px;
   overflow: hidden;
   min-height: 14rem;
 }
-.f-table__loading {
-  position: absolute;
-  inset: 0;
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(2px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 0.625rem;
-  z-index: 10;
-}
 .f-table__scroll {
   position: relative;
+  flex: 1;
+  min-height: 0;
   width: 100%;
-  height: 100%;
   overflow: auto;
 }
 .f-table__inner {
   width: 100%;
+  min-width: 100%;
   border-collapse: collapse;
   font-size: 0.75rem;
   text-align: left;
   table-layout: auto;
-  min-width: 100%;
 }
 .f-table__inner th,
 .f-table__inner td {
-  padding: 0.625rem;
+  padding: 0 0.625rem;
   border-right: 1px solid #e2e8f0;
 }
 .f-table__inner th:last-child,
 .f-table__inner td:last-child {
   border-right: none;
 }
+.f-table__inner th {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
 .f-table__col--index {
   width: 3rem;
 }
@@ -5946,6 +5941,12 @@
   font-weight: 800;
   color: #64748b;
 }
+.f-table__text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .f-table__spacer td {
   padding: 0;
   border: none;
@@ -5957,6 +5958,26 @@
   font-weight: 700;
   background: rgba(248, 250, 252, 0.5);
 }
+.f-table__tip {
+  position: fixed;
+  z-index: 3000;
+  max-width: 320px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: rgba(15, 23, 42, 0.96);
+  color: #f8fafc;
+  font-size: 12px;
+  line-height: 1.5;
+  word-break: break-all;
+  pointer-events: none;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
+}
+.f-table__tip.is-top {
+  transform: translate(-50%, -100%);
+}
+.f-table__tip.is-bottom {
+  transform: translate(-50%, 0);
+}
 
 .f-tabs {
   width: 100%;
@@ -7521,10 +7542,10 @@ to {
 .f-tag--plain.default[data-v-19e20dd3] {
   color: var(--text-muted);
   border: 1px solid var(--border2);
-}.f-tooltip[data-v-37ae9256] {
+}.f-tooltip[data-v-398a5be6] {
   display: contents;
 }
-.f-tooltip-wrapper[data-v-37ae9256] {
+.f-tooltip-wrapper[data-v-398a5be6] {
   position: fixed;
   z-index: 999;
   padding: 5px 9px;
@@ -7539,7 +7560,7 @@ to {
   word-break: break-word;
   white-space: pre-wrap;
 }
-.f-tooltip-wrapper .f-tooltip-arrow[data-v-37ae9256] {
+.f-tooltip-wrapper .f-tooltip-arrow[data-v-398a5be6] {
   position: absolute;
   width: 6px;
   height: 6px;
@@ -7548,32 +7569,32 @@ to {
   border-bottom: 1px solid rgba(148, 163, 184, 0.2);
   transform: rotate(45deg);
 }
-.f-tooltip-wrapper.is-top .f-tooltip-arrow[data-v-37ae9256] {
+.f-tooltip-wrapper.is-top .f-tooltip-arrow[data-v-398a5be6] {
   bottom: -3px;
   left: 50%;
   translate: -50% 0;
 }
-.f-tooltip-wrapper.is-bottom .f-tooltip-arrow[data-v-37ae9256] {
+.f-tooltip-wrapper.is-bottom .f-tooltip-arrow[data-v-398a5be6] {
   top: -3px;
   left: 50%;
   translate: -50% 0;
 }
-.f-tooltip-wrapper.is-left .f-tooltip-arrow[data-v-37ae9256] {
+.f-tooltip-wrapper.is-left .f-tooltip-arrow[data-v-398a5be6] {
   right: -3px;
   top: 50%;
   translate: 0 -50%;
 }
-.f-tooltip-wrapper.is-right .f-tooltip-arrow[data-v-37ae9256] {
+.f-tooltip-wrapper.is-right .f-tooltip-arrow[data-v-398a5be6] {
   left: -3px;
   top: 50%;
   translate: 0 -50%;
 }
-.f-tooltip-enter-active[data-v-37ae9256],
-.f-tooltip-leave-active[data-v-37ae9256] {
+.f-tooltip-enter-active[data-v-398a5be6],
+.f-tooltip-leave-active[data-v-398a5be6] {
   transition: opacity 0.15s ease, transform 0.15s ease;
 }
-.f-tooltip-enter-from[data-v-37ae9256],
-.f-tooltip-leave-to[data-v-37ae9256] {
+.f-tooltip-enter-from[data-v-398a5be6],
+.f-tooltip-leave-to[data-v-398a5be6] {
   opacity: 0;
   transform: scale(0.92);
 }.f-progress[data-v-95060470] {
@@ -11242,105 +11263,126 @@ to {
 .f-editor__textarea[data-v-48883044]::placeholder {
   color: #475569;
   opacity: 0.7;
-}.f-table[data-v-ce2c2d93] {
+}.f-table[data-v-5ae2ec2c] {
   position: relative;
+  display: flex;
+  flex-direction: column;
   border: 1px solid #e2e8f0;
   border-radius: 6px;
   overflow: hidden;
   min-height: 14rem;
 }
-.f-table__loading[data-v-ce2c2d93] {
-  position: absolute;
-  inset: 0;
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(2px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 0.625rem;
-  z-index: 10;
-}
-.f-table__scroll[data-v-ce2c2d93] {
+.f-table__scroll[data-v-5ae2ec2c] {
   position: relative;
+  flex: 1;
+  min-height: 0;
   width: 100%;
-  height: 100%;
   overflow: auto;
 }
-.f-table__inner[data-v-ce2c2d93] {
+.f-table__inner[data-v-5ae2ec2c] {
   width: 100%;
+  min-width: 100%;
   border-collapse: collapse;
   font-size: 0.75rem;
   text-align: left;
   table-layout: auto;
-  min-width: 100%;
 }
-.f-table__inner th[data-v-ce2c2d93],
-.f-table__inner td[data-v-ce2c2d93] {
-  padding: 0.625rem;
+.f-table__inner th[data-v-5ae2ec2c],
+.f-table__inner td[data-v-5ae2ec2c] {
+  padding: 0 0.625rem;
   border-right: 1px solid #e2e8f0;
 }
-.f-table__inner th[data-v-ce2c2d93]:last-child,
-.f-table__inner td[data-v-ce2c2d93]:last-child {
+.f-table__inner th[data-v-5ae2ec2c]:last-child,
+.f-table__inner td[data-v-5ae2ec2c]:last-child {
   border-right: none;
 }
-.f-table__col--index[data-v-ce2c2d93] {
+.f-table__inner th[data-v-5ae2ec2c] {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+.f-table__col--index[data-v-5ae2ec2c] {
   width: 3rem;
 }
-.f-table__head[data-v-ce2c2d93] {
+.f-table__head[data-v-5ae2ec2c] {
   position: sticky;
   top: 0;
   z-index: 2;
   background: #1e293b;
   color: #ffffff;
 }
-.f-table__th[data-v-ce2c2d93] {
+.f-table__th[data-v-5ae2ec2c] {
   font-weight: 700;
   text-align: center;
 }
-.f-table__th--index[data-v-ce2c2d93] {
+.f-table__th--index[data-v-5ae2ec2c] {
   background: #0f172a;
   width: 3rem;
 }
-.f-table__th-inner[data-v-ce2c2d93] {
+.f-table__th-inner[data-v-5ae2ec2c] {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.25rem;
 }
-.f-table__row[data-v-ce2c2d93] {
+.f-table__row[data-v-5ae2ec2c] {
   border-bottom: 1px solid #e2e8f0;
 }
-.f-table__row[data-v-ce2c2d93]:hover {
+.f-table__row[data-v-5ae2ec2c]:hover {
   background: rgba(248, 250, 252, 0.7);
 }
-.f-table__td[data-v-ce2c2d93] {
+.f-table__td[data-v-5ae2ec2c] {
   text-align: center;
   font-size: 0.6875rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.f-table__td--muted[data-v-ce2c2d93] {
+.f-table__td--muted[data-v-5ae2ec2c] {
   color: #94a3b8;
   text-decoration: line-through;
   opacity: 0.6;
 }
-.f-table__td--index[data-v-ce2c2d93] {
+.f-table__td--index[data-v-5ae2ec2c] {
   background: rgba(248, 250, 252, 0.5);
   font-weight: 800;
   color: #64748b;
 }
-.f-table__spacer td[data-v-ce2c2d93] {
+.f-table__text[data-v-5ae2ec2c] {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.f-table__spacer td[data-v-5ae2ec2c] {
   padding: 0;
   border: none;
 }
-.f-table__empty[data-v-ce2c2d93] {
+.f-table__empty[data-v-5ae2ec2c] {
   padding: 3rem 0;
   text-align: center;
   color: #94a3b8;
   font-weight: 700;
   background: rgba(248, 250, 252, 0.5);
+}
+.f-table__tip[data-v-5ae2ec2c] {
+  position: fixed;
+  z-index: 3000;
+  max-width: 320px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: rgba(15, 23, 42, 0.96);
+  color: #f8fafc;
+  font-size: 12px;
+  line-height: 1.5;
+  word-break: break-all;
+  pointer-events: none;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
+}
+.f-table__tip.is-top[data-v-5ae2ec2c] {
+  transform: translate(-50%, -100%);
+}
+.f-table__tip.is-bottom[data-v-5ae2ec2c] {
+  transform: translate(-50%, 0);
 }.f-upload[data-v-45a5af2d] {
   display: flex;
   flex-direction: column;

package/dist/fantasia-ui.es.js

@@ -37,7 +37,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-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, Comment as Comment$1, Text, provide, onMounted, readonly, onBeforeUnmount, reactive, toRefs, createStaticVNode, h, render } from "vue";
+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, Comment as Comment$1, Text, provide, onMounted, readonly, reactive, onBeforeUnmount, 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, CheckmarkCircle, AlertCircle, DocumentOutline, Reload, RemoveOutline, AddOutline, ChevronUpOutline, InformationCircle, CloseOutline, Warning } from "@vicons/ionicons5";
 import { useEventListener } from "@vueuse/core";
 const _sfc_main$S = /* @__PURE__ */ defineComponent({
@@ -1009,6 +1009,16 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     const visible = ref(false);
     const position = ref({ top: 0, left: 0 });
     let showTimer = null;
+    const getAnchorRect = () => {
+      const root = triggerRef.value;
+      if (!root) return null;
+      const el = root.firstElementChild;
+      if (el) return el.getBoundingClientRect();
+      const range = document.createRange();
+      range.selectNodeContents(root);
+      const rect = range.getBoundingClientRect();
+      return rect.width || rect.height ? rect : null;
+    };
     const show = () => {
       if (props.disabled) return;
       showTimer = setTimeout(() => {
@@ -1021,11 +1031,12 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
       visible.value = false;
     };
     const updatePosition = () => {
-      var _a, _b;
       if (!tooltipRef.value) return;
-      const triggerEl = (_b = (_a = triggerRef.value) == null ? void 0 : _a.firstElementChild) != null ? _b : triggerRef.value;
-      if (!triggerEl) return;
-      const trigger = triggerEl.getBoundingClientRect();
+      const trigger = getAnchorRect();
+      if (!trigger) {
+        visible.value = false;
+        return;
+      }
       const tooltip = tooltipRef.value.getBoundingClientRect();
       const gap = props.offset;
       const [side, align] = props.placement.split("-");
@@ -1096,7 +1107,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-37ae9256"]]);
+const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-398a5be6"]]);
 const _hoisted_1$w = { class: "f-progress" };
 const _hoisted_2$q = {
   key: 0,
@@ -2807,39 +2818,35 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 const FEditor = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-48883044"]]);
-const _hoisted_1$e = { class: "f-table" };
+const _hoisted_1$e = { class: "f-table__inner" };
 const _hoisted_2$c = {
-  key: 0,
-  class: "f-table__loading"
-};
-const _hoisted_3$c = { class: "f-table__inner" };
-const _hoisted_4$9 = {
   key: 0,
   class: "f-table__col--index"
 };
-const _hoisted_5$6 = { class: "f-table__head" };
-const _hoisted_6$5 = {
+const _hoisted_3$c = { class: "f-table__head" };
+const _hoisted_4$9 = {
   key: 0,
   class: "f-table__th f-table__th--index"
 };
-const _hoisted_7$2 = { class: "f-table__th-inner" };
-const _hoisted_8$1 = { class: "f-table__body" };
-const _hoisted_9 = {
+const _hoisted_5$6 = { class: "f-table__th-inner" };
+const _hoisted_6$5 = {
   key: 0,
   class: "f-table__spacer"
 };
-const _hoisted_10 = ["colspan"];
-const _hoisted_11 = {
+const _hoisted_7$2 = ["colspan"];
+const _hoisted_8$1 = {
   key: 0,
   class: "f-table__td f-table__td--index"
 };
-const _hoisted_12 = { key: 2 };
-const _hoisted_13 = ["colspan"];
-const _hoisted_14 = {
+const _hoisted_9 = ["data-tooltip"];
+const _hoisted_10 = { key: 2 };
+const _hoisted_11 = ["colspan"];
+const _hoisted_12 = {
   key: 3,
   class: "f-table__spacer"
 };
-const _hoisted_15 = ["colspan"];
+const _hoisted_13 = ["colspan"];
+const TIP_HALF_WIDTH = 160;
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "FTable",
   props: {
@@ -2848,9 +2855,10 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     rowHeight: { default: 40 },
     overscan: { default: 5 },
     showIndex: { type: Boolean, default: true },
-    loading: { type: Boolean, default: false },
-    loadingText: { default: "鍔犺浇涓?.." },
-    emptyText: { default: "鏆傛棤鏁版嵁" }
+    emptyText: { default: "暂无数据" },
+    rowKey: {},
+    height: {},
+    overflowTooltip: { type: Boolean, default: false }
   },
   setup(__props) {
     const props = __props;
@@ -2858,14 +2866,16 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const scrollTop = ref(0);
     const viewportHeight = ref(0);
     const colSpan = computed(() => props.columns.length + (props.showIndex ? 1 : 0));
-    const startIndex = computed(() => {
-      const raw = Math.floor(scrollTop.value / props.rowHeight) - props.overscan;
-      return Math.max(0, raw);
+    const rootStyle = computed(() => {
+      if (props.height === void 0) return void 0;
+      return { height: typeof props.height === "number" ? `${props.height}px` : props.height };
     });
+    const startIndex = computed(
+      () => Math.max(0, Math.floor(scrollTop.value / props.rowHeight) - props.overscan)
+    );
     const endIndex = computed(() => {
       const visible = Math.ceil(viewportHeight.value / props.rowHeight);
-      const raw = startIndex.value + visible + props.overscan * 2;
-      return Math.min(props.data.length - 1, raw);
+      return Math.min(props.data.length - 1, startIndex.value + visible + props.overscan * 2);
     });
     const visibleRows = computed(
       () => props.data.slice(startIndex.value, endIndex.value + 1).map((row, i) => ({
@@ -2877,24 +2887,56 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const offsetBottom = computed(
       () => Math.max(0, (props.data.length - endIndex.value - 1) * props.rowHeight)
     );
-    const onScroll = (e) => {
-      scrollTop.value = e.target.scrollTop;
+    const getKey = (row, index) => {
+      var _a;
+      return props.rowKey ? (_a = row[props.rowKey]) != null ? _a : index : index;
     };
     const formatCell = (val) => {
-      if (val === null || val === void 0) return "-";
+      if (val === null || val === void 0) return "";
       if (typeof val === "object") return JSON.stringify(val);
       return String(val);
     };
+    const tip = reactive({
+      show: false,
+      text: "",
+      top: 0,
+      left: 0,
+      placement: "top"
+    });
+    const hideTip = () => {
+      if (tip.show) tip.show = false;
+    };
+    const onBodyOver = (e) => {
+      var _a, _b;
+      const el = e.target.closest(".f-table__text");
+      if (!el) return hideTip();
+      const colFlag = el.dataset.tooltip;
+      const enabled = colFlag === void 0 ? props.overflowTooltip : colFlag === "1";
+      if (!enabled || el.scrollWidth <= el.clientWidth) return hideTip();
+      const r = el.getBoundingClientRect();
+      const placeTop = r.top > 48;
+      const center = r.left + r.width / 2;
+      tip.text = (_b = (_a = el.textContent) == null ? void 0 : _a.trim()) != null ? _b : "";
+      tip.left = Math.max(
+        TIP_HALF_WIDTH + 8,
+        Math.min(center, window.innerWidth - TIP_HALF_WIDTH - 8)
+      );
+      tip.top = placeTop ? r.top - 8 : r.bottom + 8;
+      tip.placement = placeTop ? "top" : "bottom";
+      tip.show = true;
+    };
+    const onScroll = (e) => {
+      scrollTop.value = e.target.scrollTop;
+      hideTip();
+    };
     let ro = null;
     onMounted(() => {
-      if (scrollEl.value) {
-        viewportHeight.value = scrollEl.value.clientHeight;
-        ro = new ResizeObserver(([entry]) => {
-          if (entry)
-            viewportHeight.value = entry.contentRect.height;
-        });
-        ro.observe(scrollEl.value);
-      }
+      if (!scrollEl.value) return;
+      viewportHeight.value = scrollEl.value.clientHeight;
+      ro = new ResizeObserver(([entry]) => {
+        if (entry) viewportHeight.value = entry.contentRect.height;
+      });
+      ro.observe(scrollEl.value);
     });
     onBeforeUnmount(() => {
       ro == null ? void 0 : ro.disconnect();
@@ -2902,22 +2944,22 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     watch(() => props.data, () => {
       if (scrollEl.value) scrollEl.value.scrollTop = 0;
       scrollTop.value = 0;
+      hideTip();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_2$c, [
-          _cache[0] || (_cache[0] = createElementVNode("span", { class: "spinner" }, null, -1)),
-          createElementVNode("span", null, toDisplayString(_ctx.loadingText), 1)
-        ])) : createCommentVNode("", true),
+      return openBlock(), createElementBlock("div", {
+        class: "f-table",
+        style: normalizeStyle(unref(rootStyle))
+      }, [
         createElementVNode("div", {
           class: "f-table__scroll",
           ref_key: "scrollEl",
           ref: scrollEl,
-          onScroll
+          onScrollPassive: onScroll
         }, [
-          createElementVNode("table", _hoisted_3$c, [
+          createElementVNode("table", _hoisted_1$e, [
             createElementVNode("colgroup", null, [
-              _ctx.showIndex ? (openBlock(), createElementBlock("col", _hoisted_4$9)) : createCommentVNode("", true),
+              _ctx.showIndex ? (openBlock(), createElementBlock("col", _hoisted_2$c)) : createCommentVNode("", true),
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (col) => {
                 var _a, _b;
                 return openBlock(), createElementBlock("col", {
@@ -2929,16 +2971,16 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 }, null, 4);
               }), 128))
             ]),
-            createElementVNode("thead", _hoisted_5$6, [
+            createElementVNode("thead", _hoisted_3$c, [
               createElementVNode("tr", null, [
-                _ctx.showIndex ? (openBlock(), createElementBlock("th", _hoisted_6$5, "#")) : createCommentVNode("", true),
+                _ctx.showIndex ? (openBlock(), createElementBlock("th", _hoisted_4$9, "#")) : createCommentVNode("", true),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (col) => {
                   return openBlock(), createElementBlock("th", {
                     key: col.key,
                     class: normalizeClass(["f-table__th", col.thClass])
                   }, [
                     renderSlot(_ctx.$slots, `header-${col.key}`, { column: col }, () => [
-                      createElementVNode("div", _hoisted_7$2, [
+                      createElementVNode("div", _hoisted_5$6, [
                         createElementVNode("span", null, toDisplayString(col.label), 1)
                       ])
                     ], true)
@@ -2946,23 +2988,29 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 }), 128))
               ])
             ]),
-            createElementVNode("tbody", _hoisted_8$1, [
-              unref(offsetTop) > 0 ? (openBlock(), createElementBlock("tr", _hoisted_9, [
+            createElementVNode("tbody", {
+              class: "f-table__body",
+              onMouseover: onBodyOver,
+              onMouseleave: hideTip
+            }, [
+              unref(offsetTop) > 0 ? (openBlock(), createElementBlock("tr", _hoisted_6$5, [
                 createElementVNode("td", {
                   colspan: unref(colSpan),
                   style: normalizeStyle({ height: unref(offsetTop) + "px" })
-                }, null, 12, _hoisted_10)
+                }, null, 12, _hoisted_7$2)
               ])) : createCommentVNode("", true),
               unref(visibleRows).length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(visibleRows), ({ row, index }) => {
                 return openBlock(), createElementBlock("tr", {
-                  key: index,
-                  class: "f-table__row"
+                  key: getKey(row, index),
+                  class: "f-table__row",
+                  style: normalizeStyle({ height: _ctx.rowHeight + "px" })
                 }, [
-                  _ctx.showIndex ? (openBlock(), createElementBlock("td", _hoisted_11, toDisplayString(index + 1), 1)) : createCommentVNode("", true),
+                  _ctx.showIndex ? (openBlock(), createElementBlock("td", _hoisted_8$1, toDisplayString(index + 1), 1)) : createCommentVNode("", true),
                   (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (col) => {
                     return openBlock(), createElementBlock("td", {
                       key: col.key,
-                      class: normalizeClass(["f-table__td", col.tdClass])
+                      class: normalizeClass(["f-table__td", col.tdClass]),
+                      style: normalizeStyle(col.width ? { maxWidth: col.width } : void 0)
                     }, [
                       _ctx.$slots[`cell-${col.key}`] ? renderSlot(_ctx.$slots, `cell-${col.key}`, {
                         key: 0,
@@ -2976,19 +3024,15 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                         value: row[col.key],
                         index,
                         col
-                      }, void 0, true) : (openBlock(), createBlock(FTooltip, {
+                      }, void 0, true) : (openBlock(), createElementBlock("span", {
                         key: 2,
-                        content: formatCell(row[col.key])
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(formatCell(row[col.key])), 1)
-                        ]),
-                        _: 2
-                      }, 1032, ["content"]))
-                    ], 2);
+                        class: "f-table__text",
+                        "data-tooltip": col.tooltip === void 0 ? void 0 : col.tooltip ? "1" : "0"
+                      }, toDisplayString(formatCell(row[col.key])), 9, _hoisted_9))
+                    ], 6);
                   }), 128))
-                ]);
-              }), 128)) : !_ctx.loading ? (openBlock(), createElementBlock("tr", _hoisted_12, [
+                ], 4);
+              }), 128)) : (openBlock(), createElementBlock("tr", _hoisted_10, [
                 createElementVNode("td", {
                   colspan: unref(colSpan),
                   class: "f-table__empty"
@@ -2996,22 +3040,29 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   renderSlot(_ctx.$slots, "empty", {}, () => [
                     createTextVNode(toDisplayString(_ctx.emptyText), 1)
                   ], true)
-                ], 8, _hoisted_13)
-              ])) : createCommentVNode("", true),
-              unref(offsetBottom) > 0 ? (openBlock(), createElementBlock("tr", _hoisted_14, [
+                ], 8, _hoisted_11)
+              ])),
+              unref(offsetBottom) > 0 ? (openBlock(), createElementBlock("tr", _hoisted_12, [
                 createElementVNode("td", {
                   colspan: unref(colSpan),
                   style: normalizeStyle({ height: unref(offsetBottom) + "px" })
-                }, null, 12, _hoisted_15)
+                }, null, 12, _hoisted_13)
               ])) : createCommentVNode("", true)
-            ])
+            ], 32)
           ])
-        ], 544)
-      ]);
+        ], 544),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          unref(tip).show ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["f-table__tip", `is-${unref(tip).placement}`]),
+            style: normalizeStyle({ top: unref(tip).top + "px", left: unref(tip).left + "px" })
+          }, toDisplayString(unref(tip).text), 7)) : createCommentVNode("", true)
+        ]))
+      ], 4);
     };
   }
 });
-const FTable = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-ce2c2d93"]]);
+const FTable = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-5ae2ec2c"]]);
 const _hoisted_1$d = { class: "f-upload" };
 const _hoisted_2$b = ["accept", "multiple"];
 const _hoisted_3$b = { class: "f-upload__zone" };

package/dist/fantasia-ui.umd.js

@@ -1010,6 +1010,16 @@ var __async = (__this, __arguments, generator) => {
       const visible = vue.ref(false);
       const position = vue.ref({ top: 0, left: 0 });
       let showTimer = null;
+      const getAnchorRect = () => {
+        const root = triggerRef.value;
+        if (!root) return null;
+        const el = root.firstElementChild;
+        if (el) return el.getBoundingClientRect();
+        const range = document.createRange();
+        range.selectNodeContents(root);
+        const rect = range.getBoundingClientRect();
+        return rect.width || rect.height ? rect : null;
+      };
       const show = () => {
         if (props.disabled) return;
         showTimer = setTimeout(() => {
@@ -1022,11 +1032,12 @@ var __async = (__this, __arguments, generator) => {
         visible.value = false;
       };
       const updatePosition = () => {
-        var _a, _b;
         if (!tooltipRef.value) return;
-        const triggerEl = (_b = (_a = triggerRef.value) == null ? void 0 : _a.firstElementChild) != null ? _b : triggerRef.value;
-        if (!triggerEl) return;
-        const trigger = triggerEl.getBoundingClientRect();
+        const trigger = getAnchorRect();
+        if (!trigger) {
+          visible.value = false;
+          return;
+        }
         const tooltip = tooltipRef.value.getBoundingClientRect();
         const gap = props.offset;
         const [side, align] = props.placement.split("-");
@@ -1097,7 +1108,7 @@ var __async = (__this, __arguments, generator) => {
       };
     }
   });
-  const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-37ae9256"]]);
+  const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-398a5be6"]]);
   const _hoisted_1$w = { class: "f-progress" };
   const _hoisted_2$q = {
     key: 0,
@@ -2808,39 +2819,35 @@ var __async = (__this, __arguments, generator) => {
     }
   });
   const FEditor = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-48883044"]]);
-  const _hoisted_1$e = { class: "f-table" };
+  const _hoisted_1$e = { class: "f-table__inner" };
   const _hoisted_2$c = {
-    key: 0,
-    class: "f-table__loading"
-  };
-  const _hoisted_3$c = { class: "f-table__inner" };
-  const _hoisted_4$9 = {
     key: 0,
     class: "f-table__col--index"
   };
-  const _hoisted_5$6 = { class: "f-table__head" };
-  const _hoisted_6$5 = {
+  const _hoisted_3$c = { class: "f-table__head" };
+  const _hoisted_4$9 = {
     key: 0,
     class: "f-table__th f-table__th--index"
   };
-  const _hoisted_7$2 = { class: "f-table__th-inner" };
-  const _hoisted_8$1 = { class: "f-table__body" };
-  const _hoisted_9 = {
+  const _hoisted_5$6 = { class: "f-table__th-inner" };
+  const _hoisted_6$5 = {
     key: 0,
     class: "f-table__spacer"
   };
-  const _hoisted_10 = ["colspan"];
-  const _hoisted_11 = {
+  const _hoisted_7$2 = ["colspan"];
+  const _hoisted_8$1 = {
     key: 0,
     class: "f-table__td f-table__td--index"
   };
-  const _hoisted_12 = { key: 2 };
-  const _hoisted_13 = ["colspan"];
-  const _hoisted_14 = {
+  const _hoisted_9 = ["data-tooltip"];
+  const _hoisted_10 = { key: 2 };
+  const _hoisted_11 = ["colspan"];
+  const _hoisted_12 = {
     key: 3,
     class: "f-table__spacer"
   };
-  const _hoisted_15 = ["colspan"];
+  const _hoisted_13 = ["colspan"];
+  const TIP_HALF_WIDTH = 160;
   const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     __name: "FTable",
     props: {
@@ -2849,9 +2856,10 @@ var __async = (__this, __arguments, generator) => {
       rowHeight: { default: 40 },
       overscan: { default: 5 },
       showIndex: { type: Boolean, default: true },
-      loading: { type: Boolean, default: false },
-      loadingText: { default: "鍔犺浇涓?.." },
-      emptyText: { default: "鏆傛棤鏁版嵁" }
+      emptyText: { default: "暂无数据" },
+      rowKey: {},
+      height: {},
+      overflowTooltip: { type: Boolean, default: false }
     },
     setup(__props) {
       const props = __props;
@@ -2859,14 +2867,16 @@ var __async = (__this, __arguments, generator) => {
       const scrollTop = vue.ref(0);
       const viewportHeight = vue.ref(0);
       const colSpan = vue.computed(() => props.columns.length + (props.showIndex ? 1 : 0));
-      const startIndex = vue.computed(() => {
-        const raw = Math.floor(scrollTop.value / props.rowHeight) - props.overscan;
-        return Math.max(0, raw);
+      const rootStyle = vue.computed(() => {
+        if (props.height === void 0) return void 0;
+        return { height: typeof props.height === "number" ? `${props.height}px` : props.height };
       });
+      const startIndex = vue.computed(
+        () => Math.max(0, Math.floor(scrollTop.value / props.rowHeight) - props.overscan)
+      );
       const endIndex = vue.computed(() => {
         const visible = Math.ceil(viewportHeight.value / props.rowHeight);
-        const raw = startIndex.value + visible + props.overscan * 2;
-        return Math.min(props.data.length - 1, raw);
+        return Math.min(props.data.length - 1, startIndex.value + visible + props.overscan * 2);
       });
       const visibleRows = vue.computed(
         () => props.data.slice(startIndex.value, endIndex.value + 1).map((row, i) => ({
@@ -2878,24 +2888,56 @@ var __async = (__this, __arguments, generator) => {
       const offsetBottom = vue.computed(
         () => Math.max(0, (props.data.length - endIndex.value - 1) * props.rowHeight)
       );
-      const onScroll = (e) => {
-        scrollTop.value = e.target.scrollTop;
+      const getKey = (row, index) => {
+        var _a;
+        return props.rowKey ? (_a = row[props.rowKey]) != null ? _a : index : index;
       };
       const formatCell = (val) => {
-        if (val === null || val === void 0) return "-";
+        if (val === null || val === void 0) return "";
         if (typeof val === "object") return JSON.stringify(val);
         return String(val);
       };
+      const tip = vue.reactive({
+        show: false,
+        text: "",
+        top: 0,
+        left: 0,
+        placement: "top"
+      });
+      const hideTip = () => {
+        if (tip.show) tip.show = false;
+      };
+      const onBodyOver = (e) => {
+        var _a, _b;
+        const el = e.target.closest(".f-table__text");
+        if (!el) return hideTip();
+        const colFlag = el.dataset.tooltip;
+        const enabled = colFlag === void 0 ? props.overflowTooltip : colFlag === "1";
+        if (!enabled || el.scrollWidth <= el.clientWidth) return hideTip();
+        const r = el.getBoundingClientRect();
+        const placeTop = r.top > 48;
+        const center = r.left + r.width / 2;
+        tip.text = (_b = (_a = el.textContent) == null ? void 0 : _a.trim()) != null ? _b : "";
+        tip.left = Math.max(
+          TIP_HALF_WIDTH + 8,
+          Math.min(center, window.innerWidth - TIP_HALF_WIDTH - 8)
+        );
+        tip.top = placeTop ? r.top - 8 : r.bottom + 8;
+        tip.placement = placeTop ? "top" : "bottom";
+        tip.show = true;
+      };
+      const onScroll = (e) => {
+        scrollTop.value = e.target.scrollTop;
+        hideTip();
+      };
       let ro = null;
       vue.onMounted(() => {
-        if (scrollEl.value) {
-          viewportHeight.value = scrollEl.value.clientHeight;
-          ro = new ResizeObserver(([entry]) => {
-            if (entry)
-              viewportHeight.value = entry.contentRect.height;
-          });
-          ro.observe(scrollEl.value);
-        }
+        if (!scrollEl.value) return;
+        viewportHeight.value = scrollEl.value.clientHeight;
+        ro = new ResizeObserver(([entry]) => {
+          if (entry) viewportHeight.value = entry.contentRect.height;
+        });
+        ro.observe(scrollEl.value);
       });
       vue.onBeforeUnmount(() => {
         ro == null ? void 0 : ro.disconnect();
@@ -2903,22 +2945,22 @@ var __async = (__this, __arguments, generator) => {
       vue.watch(() => props.data, () => {
         if (scrollEl.value) scrollEl.value.scrollTop = 0;
         scrollTop.value = 0;
+        hideTip();
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
-          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
-            _cache[0] || (_cache[0] = vue.createElementVNode("span", { class: "spinner" }, null, -1)),
-            vue.createElementVNode("span", null, vue.toDisplayString(_ctx.loadingText), 1)
-          ])) : vue.createCommentVNode("", true),
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "f-table",
+          style: vue.normalizeStyle(vue.unref(rootStyle))
+        }, [
           vue.createElementVNode("div", {
             class: "f-table__scroll",
             ref_key: "scrollEl",
             ref: scrollEl,
-            onScroll
+            onScrollPassive: onScroll
           }, [
-            vue.createElementVNode("table", _hoisted_3$c, [
+            vue.createElementVNode("table", _hoisted_1$e, [
               vue.createElementVNode("colgroup", null, [
-                _ctx.showIndex ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_4$9)) : vue.createCommentVNode("", true),
+                _ctx.showIndex ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_2$c)) : vue.createCommentVNode("", true),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, (col) => {
                   var _a, _b;
                   return vue.openBlock(), vue.createElementBlock("col", {
@@ -2930,16 +2972,16 @@ var __async = (__this, __arguments, generator) => {
                   }, null, 4);
                 }), 128))
               ]),
-              vue.createElementVNode("thead", _hoisted_5$6, [
+              vue.createElementVNode("thead", _hoisted_3$c, [
                 vue.createElementVNode("tr", null, [
-                  _ctx.showIndex ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_6$5, "#")) : vue.createCommentVNode("", true),
+                  _ctx.showIndex ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_4$9, "#")) : vue.createCommentVNode("", true),
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, (col) => {
                     return vue.openBlock(), vue.createElementBlock("th", {
                       key: col.key,
                       class: vue.normalizeClass(["f-table__th", col.thClass])
                     }, [
                       vue.renderSlot(_ctx.$slots, `header-${col.key}`, { column: col }, () => [
-                        vue.createElementVNode("div", _hoisted_7$2, [
+                        vue.createElementVNode("div", _hoisted_5$6, [
                           vue.createElementVNode("span", null, vue.toDisplayString(col.label), 1)
                         ])
                       ], true)
@@ -2947,23 +2989,29 @@ var __async = (__this, __arguments, generator) => {
                   }), 128))
                 ])
               ]),
-              vue.createElementVNode("tbody", _hoisted_8$1, [
-                vue.unref(offsetTop) > 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_9, [
+              vue.createElementVNode("tbody", {
+                class: "f-table__body",
+                onMouseover: onBodyOver,
+                onMouseleave: hideTip
+              }, [
+                vue.unref(offsetTop) > 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_6$5, [
                   vue.createElementVNode("td", {
                     colspan: vue.unref(colSpan),
                     style: vue.normalizeStyle({ height: vue.unref(offsetTop) + "px" })
-                  }, null, 12, _hoisted_10)
+                  }, null, 12, _hoisted_7$2)
                 ])) : vue.createCommentVNode("", true),
                 vue.unref(visibleRows).length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(vue.unref(visibleRows), ({ row, index }) => {
                   return vue.openBlock(), vue.createElementBlock("tr", {
-                    key: index,
-                    class: "f-table__row"
+                    key: getKey(row, index),
+                    class: "f-table__row",
+                    style: vue.normalizeStyle({ height: _ctx.rowHeight + "px" })
                   }, [
-                    _ctx.showIndex ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_11, vue.toDisplayString(index + 1), 1)) : vue.createCommentVNode("", true),
+                    _ctx.showIndex ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_8$1, vue.toDisplayString(index + 1), 1)) : vue.createCommentVNode("", true),
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, (col) => {
                       return vue.openBlock(), vue.createElementBlock("td", {
                         key: col.key,
-                        class: vue.normalizeClass(["f-table__td", col.tdClass])
+                        class: vue.normalizeClass(["f-table__td", col.tdClass]),
+                        style: vue.normalizeStyle(col.width ? { maxWidth: col.width } : void 0)
                       }, [
                         _ctx.$slots[`cell-${col.key}`] ? vue.renderSlot(_ctx.$slots, `cell-${col.key}`, {
                           key: 0,
@@ -2977,19 +3025,15 @@ var __async = (__this, __arguments, generator) => {
                           value: row[col.key],
                           index,
                           col
-                        }, void 0, true) : (vue.openBlock(), vue.createBlock(FTooltip, {
+                        }, void 0, true) : (vue.openBlock(), vue.createElementBlock("span", {
                           key: 2,
-                          content: formatCell(row[col.key])
-                        }, {
-                          default: vue.withCtx(() => [
-                            vue.createTextVNode(vue.toDisplayString(formatCell(row[col.key])), 1)
-                          ]),
-                          _: 2
-                        }, 1032, ["content"]))
-                      ], 2);
+                          class: "f-table__text",
+                          "data-tooltip": col.tooltip === void 0 ? void 0 : col.tooltip ? "1" : "0"
+                        }, vue.toDisplayString(formatCell(row[col.key])), 9, _hoisted_9))
+                      ], 6);
                     }), 128))
-                  ]);
-                }), 128)) : !_ctx.loading ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_12, [
+                  ], 4);
+                }), 128)) : (vue.openBlock(), vue.createElementBlock("tr", _hoisted_10, [
                   vue.createElementVNode("td", {
                     colspan: vue.unref(colSpan),
                     class: "f-table__empty"
@@ -2997,22 +3041,29 @@ var __async = (__this, __arguments, generator) => {
                     vue.renderSlot(_ctx.$slots, "empty", {}, () => [
                       vue.createTextVNode(vue.toDisplayString(_ctx.emptyText), 1)
                     ], true)
-                  ], 8, _hoisted_13)
-                ])) : vue.createCommentVNode("", true),
-                vue.unref(offsetBottom) > 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_14, [
+                  ], 8, _hoisted_11)
+                ])),
+                vue.unref(offsetBottom) > 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_12, [
                   vue.createElementVNode("td", {
                     colspan: vue.unref(colSpan),
                     style: vue.normalizeStyle({ height: vue.unref(offsetBottom) + "px" })
-                  }, null, 12, _hoisted_15)
+                  }, null, 12, _hoisted_13)
                 ])) : vue.createCommentVNode("", true)
-              ])
+              ], 32)
             ])
-          ], 544)
-        ]);
+          ], 544),
+          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+            vue.unref(tip).show ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass(["f-table__tip", `is-${vue.unref(tip).placement}`]),
+              style: vue.normalizeStyle({ top: vue.unref(tip).top + "px", left: vue.unref(tip).left + "px" })
+            }, vue.toDisplayString(vue.unref(tip).text), 7)) : vue.createCommentVNode("", true)
+          ]))
+        ], 4);
       };
     }
   });
-  const FTable = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-ce2c2d93"]]);
+  const FTable = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-5ae2ec2c"]]);
   const _hoisted_1$d = { class: "f-upload" };
   const _hoisted_2$b = ["accept", "multiple"];
   const _hoisted_3$b = { class: "f-upload__zone" };

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

@@ -11,7 +11,7 @@ declare var __VLS_2: `header-${string}`, __VLS_3: {
     value: unknown;
     index: number;
     col: import("../../types/index").FTableColumn;
-}, __VLS_14: {};
+}, __VLS_11: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
 } & {
@@ -19,15 +19,14 @@ type __VLS_Slots = {} & {
 } & {
     cell?: (props: typeof __VLS_9) => any;
 } & {
-    empty?: (props: typeof __VLS_14) => any;
+    empty?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<FTableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FTableProps> & Readonly<{}>, {
-    loading: boolean;
     rowHeight: number;
     overscan: number;
     showIndex: boolean;
-    loadingText: string;
     emptyText: string;
+    overflowTooltip: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -5,6 +5,7 @@ interface FTableColumn {
     minWidth?: string;
     thClass?: string | Record<string, boolean>;
     tdClass?: string | Record<string, boolean>;
+    tooltip?: boolean;
 }
 interface FTableProps {
     data: Record<string, unknown>[];
@@ -12,8 +13,12 @@ interface FTableProps {
     rowHeight?: number;
     overscan?: number;
     showIndex?: boolean;
-    loading?: boolean;
-    loadingText?: string;
     emptyText?: string;
+    /** 行唯一键字段，不传则按下标 */
+    rowKey?: string;
+    /** 表格高度，如 400 / '60vh'；不传则由外层容器决定 */
+    height?: number | string;
+    /** 默认文本单元格被截断时，是否显示 tooltip（列上的 tooltip 可单独覆盖） */
+    overflowTooltip?: boolean;
 }
 export type { FTableColumn, FTableProps };

package/package.json

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