qidian-vue-ui 1.3.4 → 1.4.1

package/dist/components/file-viewer/index.css

@@ -1,4 +1,18 @@
-.qd-file-viewer[data-v-b3189b53] {
+.qd-file-viewer[data-v-d9e97271],
+.qd-file-viewer__content[data-v-d9e97271] {
   width: 100%;
   height: 100%;
 }
+.qd-file-viewer--image[data-v-d9e97271] {
+  transform: translate3d(0, 0, 0);
+}
+.qd-file-viewer--image[data-v-d9e97271] .t-image-viewer__trigger {
+  display: none;
+}
+.qd-file-viewer--image[data-v-d9e97271] .t-image-viewer__modal-box,
+.qd-file-viewer--image[data-v-d9e97271] .t-image-viewer-preview-image {
+  animation: none;
+}
+.qd-file-viewer--image[data-v-d9e97271] .t-image-viewer__modal-mask {
+  transition: none;
+}

package/dist/components/file-viewer/index.vue.mjs

@@ -2,7 +2,7 @@ import './index.css'
 import _sfc_main from "./index.vue2.mjs";
 /* empty css            */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const QdFileViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b3189b53"]]);
+const QdFileViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d9e97271"]]);
 export {
   QdFileViewer as default
 };

package/dist/components/file-viewer/index.vue2.mjs

@@ -1,7 +1,10 @@
 import './index.css'
-import { defineComponent, computed, createBlock, openBlock, unref } from "vue";
+import { defineComponent, ref, computed, watch, nextTick, createElementBlock, openBlock, normalizeClass, createBlock, unref } from "vue";
 import { allRenderers } from "@file-viewer/preset-all";
 import { FileViewer } from "@file-viewer/vue3";
+import { ImageViewer } from "tdesign-vue-next";
+import { isImage } from "../../utils/tools.mjs";
+import { useConfig } from "../config-provider/useConfig.mjs";
 import { useTheme } from "../../hooks/useTheme.mjs";
 import QdOfficePdf from "../office/pdf/index.vue.mjs";
 import merge from "../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/merge.mjs";
@@ -11,11 +14,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     src: {},
     file: {},
-    options: {}
+    options: {},
+    attach: {}
   },
   setup(__props) {
     const props = __props;
     const tdTheme = useTheme();
+    const { t } = useConfig("wrapper");
+    const rootRef = ref();
+    const imageViewerVisible = ref(false);
     const isPdf = computed(() => {
       const { file, src } = props;
       if (file) {
@@ -28,36 +35,85 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return false;
     });
+    const fileType = computed(() => {
+      const { file, src } = props;
+      if (file && "type" in file && file.type) return file.type;
+      if (file && "name" in file && file.name) return file.name;
+      return src || "";
+    });
+    const isImageFile = computed(() => isImage(fileType.value));
+    const imageViewerSource = computed(() => {
+      const { file, src } = props;
+      if (typeof File !== "undefined" && file instanceof File) return file;
+      if (src) return src;
+      return void 0;
+    });
+    const imageViewerImages = computed(
+      () => imageViewerSource.value ? [imageViewerSource.value] : []
+    );
+    const useImageViewer = computed(() => isImageFile.value && !!imageViewerSource.value);
+    const resolvedAttach = computed(() => {
+      if (rootRef.value) return () => rootRef.value;
+      return "body";
+    });
+    watch(
+      useImageViewer,
+      (val) => {
+        if (!val) {
+          imageViewerVisible.value = false;
+          return;
+        }
+        nextTick(() => {
+          imageViewerVisible.value = true;
+        });
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
-      return isPdf.value ? (openBlock(), createBlock(unref(QdOfficePdf), {
-        key: 0,
-        class: "qd-file-viewer",
-        src: __props.src,
-        file: __props.file
-      }, null, 8, ["src", "file"])) : (openBlock(), createBlock(unref(FileViewer), {
-        key: 1,
-        class: "qd-file-viewer",
-        file: __props.file,
-        url: __props.src,
-        options: unref(merge)(
-          {
-            theme: unref(tdTheme),
-            toolbar: {
-              download: false,
-              exportHtml: false,
-              print: false
+      return openBlock(), createElementBlock("div", {
+        ref_key: "rootRef",
+        ref: rootRef,
+        class: normalizeClass(["qd-file-viewer", useImageViewer.value ? "qd-file-viewer--image" : ""])
+      }, [
+        useImageViewer.value ? (openBlock(), createBlock(unref(ImageViewer), {
+          key: 0,
+          visible: imageViewerVisible.value,
+          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => imageViewerVisible.value = $event),
+          images: imageViewerImages.value,
+          "close-btn": false,
+          "close-on-esc-keydown": false,
+          "close-on-overlay": false,
+          attach: resolvedAttach.value
+        }, null, 8, ["visible", "images", "attach"])) : isPdf.value ? (openBlock(), createBlock(unref(QdOfficePdf), {
+          key: 1,
+          class: "qd-file-viewer__content",
+          src: __props.src,
+          file: __props.file
+        }, null, 8, ["src", "file"])) : (openBlock(), createBlock(unref(FileViewer), {
+          key: 2,
+          class: "qd-file-viewer__content",
+          file: __props.file,
+          url: __props.src,
+          options: unref(merge)(
+            {
+              theme: unref(tdTheme),
+              toolbar: {
+                download: false,
+                exportHtml: false,
+                print: false
+              },
+              pdf: {
+                defaultNavigationVisible: false
+              }
             },
-            pdf: {
-              defaultNavigationVisible: false
+            __props.options,
+            {
+              builtinRenderers: "none",
+              renderers: unref(allRenderers)
             }
-          },
-          __props.options,
-          {
-            builtinRenderers: "none",
-            renderers: unref(allRenderers)
-          }
-        )
-      }, null, 8, ["file", "url", "options"]));
+          )
+        }, null, 8, ["file", "url", "options"]))
+      ], 2);
     };
   }
 });

package/dist/components/file-viewer/types.d.ts

@@ -1,7 +1,9 @@
 import type { FileRef, FileViewerOptions } from '@file-viewer/vue3';
+import type { QdDialogProps } from '../dialog';
 export type QdFileViewerFile = FileRef;
 export interface QdFileViewerProps {
     src?: string;
     file?: QdFileViewerFile;
     options?: Omit<FileViewerOptions, 'builtinRenderers' | 'renderers'>;
+    attach?: QdDialogProps['attach'];
 }

package/dist/components/multi-file-viewer/index.vue.d.ts

@@ -6,6 +6,7 @@ declare const _default: import("vue").DefineComponent<QdMultiFileViewerProps, {
     show: typeof show;
     hide: typeof hide;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<QdMultiFileViewerProps> & Readonly<{}>, {
-    wrapper: QdDialogProps | false;
+    wrapper: Omit<QdDialogProps, "attach" | "destroyOnClose"> | false;
+    fileViewerOnly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/multi-file-viewer/index.vue.mjs

@@ -1,11 +1,11 @@
 import './index.css'
 import { defineComponent, mergeDefaults, ref, computed, watch, createBlock, openBlock, resolveDynamicComponent, mergeProps, withCtx, createElementBlock, Fragment, createVNode, createElementVNode, unref, renderList, createTextVNode, toDisplayString, createCommentVNode, nextTick } from "vue";
 import { Menu, MenuItem, Empty, ImageViewer } from "tdesign-vue-next";
+import { isImage } from "../../utils/tools.mjs";
 import { useConfig } from "../config-provider/useConfig.mjs";
 import _sfc_main$1 from "../dialog/index.vue.mjs";
 /* empty css                    */
 import QdFileViewer from "../file-viewer/index.vue.mjs";
-import { IMAGE_REGEXP } from "../upload/common.mjs";
 import { qdMultiFileViewerWrapperProps, qdMultiFileViewerProps } from "./props.mjs";
 import merge from "../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/merge.mjs";
 const _hoisted_1 = {
@@ -20,6 +20,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     index: {},
     options: {},
     files: {},
+    attach: {},
+    fileViewerOnly: { type: Boolean },
     wrapper: { type: [Object, Boolean] }
   }, qdMultiFileViewerProps),
   setup(__props, { expose: __expose }) {
@@ -55,22 +57,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const allFilesAreImages = computed(() => {
       const files = mergedProps.value.files;
-      return !!files?.length && files.every((item) => isImage(item) && !!resolveImageViewerSource(item));
+      return !!files?.length && files.every((item) => isImage(resolveFileType(item)) && !!resolveImageViewerSource(item));
     });
+    const fileViewerOnly = computed(
+      () => mergedProps.value.wrapper === false || mergedProps.value.fileViewerOnly === true
+    );
+    const useImageViewer = computed(() => allFilesAreImages.value && !fileViewerOnly.value);
     const imageViewerImages = computed(
       () => (mergedProps.value.files ?? []).map((item) => resolveImageViewerSource(item) ?? "")
     );
-    const imageViewerAttach = computed(() => {
-      const wrapper = mergedProps.value.wrapper === false ? void 0 : mergedProps.value.wrapper;
-      return wrapper?.attach ?? wrapperT("attach") ?? "body";
-    });
-    const isDialog = computed(() => mergedProps.value.wrapper !== false && !allFilesAreImages.value);
+    const resolvedAttach = computed(() => mergedProps.value.attach ?? wrapperT("attach") ?? "body");
+    const isDialog = computed(() => mergedProps.value.wrapper !== false && !useImageViewer.value);
     const dialogProps = computed(() => {
       const wrapper = mergedProps.value.wrapper === false ? void 0 : mergedProps.value.wrapper;
       return {
         ...qdMultiFileViewerWrapperProps,
         ...wrapper,
         header: wrapper?.header ?? activeFileName.value,
+        attach: resolvedAttach.value,
+        destroyOnClose: true,
         cancelBtn: wrapper?.cancelBtn === void 0 ? t("closeText") : typeof wrapper.cancelBtn === "object" && wrapper.cancelBtn !== null ? { ...wrapper.cancelBtn, content: t("closeText") } : wrapper.cancelBtn
       };
     });
@@ -82,9 +87,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (file && "name" in file && file.name) return file.name;
       return item.src || item.name || "";
     }
-    function isImage(item) {
-      return IMAGE_REGEXP.test(resolveFileType(item));
-    }
     function resolveImageViewerSource(item) {
       if (typeof File !== "undefined" && item.file instanceof File) return item.file;
       if (item.src) return item.src;
@@ -117,9 +119,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function show(override) {
       runtimeOverrides.value = override ?? {};
       activeIndex.value = normalizeIndex(mergedProps.value.index, mergedProps.value.files);
-      if (allFilesAreImages.value) {
+      if (useImageViewer.value) {
         imageViewerIndex.value = activeIndex.value;
-        imageViewerVisible.value = true;
+        imageViewerVisible.value = false;
+        nextTick(() => {
+          imageViewerVisible.value = true;
+        });
         return;
       }
       if (!isDialog.value) return;
@@ -139,12 +144,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     __expose({ show, hide });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(wrapperTag.value), mergeProps(wrapperBindings.value, {
-        class: ["qd-multi-file-viewer", allFilesAreImages.value ? "qd-multi-file-viewer--image" : ""],
+        class: ["qd-multi-file-viewer", useImageViewer.value ? "qd-multi-file-viewer--image" : ""],
         ref_key: "dialogRef",
         ref: dialogRef
       }), {
         default: withCtx(() => [
-          !allFilesAreImages.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          !useImageViewer.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             mergedProps.value.files?.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
               createVNode(unref(Menu), {
                 value: activeIndex.value,
@@ -180,7 +185,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             index: imageViewerIndex.value,
             "onUpdate:index": _cache[1] || (_cache[1] = ($event) => imageViewerIndex.value = $event),
             images: imageViewerImages.value,
-            attach: imageViewerAttach.value
+            attach: resolvedAttach.value
           }, null, 8, ["visible", "index", "images", "attach"]))
         ]),
         _: 1

package/dist/components/multi-file-viewer/props.d.ts

@@ -11,4 +11,5 @@ export declare const qdMultiFileViewerProps: {
         readonly confirmBtn: null;
         readonly footer: false;
     };
+    readonly fileViewerOnly: false;
 };

package/dist/components/multi-file-viewer/props.mjs

@@ -5,7 +5,8 @@ const qdMultiFileViewerWrapperProps = {
   footer: false
 };
 const qdMultiFileViewerProps = {
-  wrapper: () => qdMultiFileViewerWrapperProps
+  wrapper: () => qdMultiFileViewerWrapperProps,
+  fileViewerOnly: false
 };
 export {
   qdMultiFileViewerProps,

package/dist/components/multi-file-viewer/types.d.ts

@@ -10,7 +10,9 @@ export interface QdMultiFileViewerProps {
     index?: number;
     options?: QdFileViewerProps['options'];
     files?: QdMultiFileViewerItem[];
-    wrapper?: QdDialogProps | false;
+    attach?: QdDialogProps['attach'];
+    fileViewerOnly?: boolean;
+    wrapper?: Omit<QdDialogProps, 'attach' | 'destroyOnClose'> | false;
 }
 export interface QdMultiFileViewerInstanceFunctions {
     show: (props?: Partial<QdMultiFileViewerProps>) => void;

package/dist/components/office/pdf/utils/image2pdf.mjs

@@ -1,10 +1,11 @@
+import { isImage } from "../../../../utils/tools.mjs";
 function isImageUrl(url) {
-  return /\.(jpg|jpeg|png|gif|webp|bmp)(\?.*)?$/i.test(url);
+  return isImage(url);
 }
 function isImageFile(file) {
   if (file.type.startsWith("image/")) return true;
   if (!(file instanceof File)) return false;
-  return /\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name);
+  return isImage(file.name);
 }
 function loadImage(src) {
   return new Promise((resolve, reject) => {

package/dist/components/service/table/index.css

@@ -1,25 +1,25 @@
-.qd-service-table[data-v-77723bee] {
+.qd-service-table[data-v-c2177f89] {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
-.qd-service-table[data-v-77723bee] >  .t-table__content {
+.qd-service-table[data-v-c2177f89] >  .t-table__content {
   flex: 1;
 }
-.qd-service-table[data-v-77723bee] .t-table__tree-col:not(:has(.t-table__tree-op-icon)) {
+.qd-service-table[data-v-c2177f89] .t-table__tree-col:not(:has(.t-table__tree-op-icon)) {
   margin-left: calc(var(--td-font-size-body-large) + var(--td-comp-margin-s));
 }
-.qd-service-table[data-v-77723bee] .t-table__tree-leaf-node .t-table__tree-op-icon:empty {
+.qd-service-table[data-v-c2177f89] .t-table__tree-leaf-node .t-table__tree-op-icon:empty {
   width: calc(var(--td-font-size-body-large) + var(--td-comp-margin-s));
 }
-.qd-service-table[data-v-77723bee] .t-affix {
-  transform: var(--v2846a290);
+.qd-service-table[data-v-c2177f89] .t-affix {
+  transform: var(--v072441ea);
 }
-.qd-service-table--ps-x-fixed[data-v-77723bee] .ps__rail-x {
+.qd-service-table--ps-x-fixed[data-v-c2177f89] .ps__rail-x {
   position: fixed;
-  left: var(--v4a362512) !important;
-  bottom: var(--v224f22e0) !important;
+  left: var(--ac91cc66) !important;
+  bottom: var(--v79d9a896) !important;
 }
-.qd-service-table--disable-horizontal-scroll[data-v-77723bee] colgroup > col {
+.qd-service-table--disable-horizontal-scroll[data-v-c2177f89] colgroup > col {
   width: auto !important;
 }

package/dist/components/service/table/index.vue.mjs

@@ -2,7 +2,7 @@ import './index.css'
 import _sfc_main from "./index.vue2.mjs";
 /* empty css            */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const QdServiceTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-77723bee"]]);
+const QdServiceTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c2177f89"]]);
 export {
   QdServiceTable as default
 };

package/dist/components/service/table/index.vue2.mjs

@@ -307,9 +307,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     emit: __emit
   }) {
     useCssVars((_ctx) => ({
-      "v2846a290": affixedHeaderTransform.value,
-      "v4a362512": tableContentLeft.value,
-      "v224f22e0": outsideBottom.value
+      "v072441ea": affixedHeaderTransform.value,
+      "ac91cc66": tableContentLeft.value,
+      "v79d9a896": outsideBottom.value
     }));
     const props = __props;
     const emit = __emit;
@@ -355,19 +355,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const tableContentVisible = ref(false);
     const isScrollSyncing = ref(false);
     const tableContentRect = reactive(useElementBounding(tableContentEl));
-    const tableContentLeft = computed(() => `${tableContentRect.left}px`);
+    const tableContentLeft = computed(() => `${tableContentRect.left - affixedRailOffsetX.value}px`);
     const outsideScrollRect = reactive(useElementBounding(outsideScrollEl));
-    const outsideBottom = computed(() => outsideScrollEl.value ? `${window.innerHeight - outsideScrollRect.bottom}px` : "0");
+    const affixBottomOffset = ref(0);
+    let probeRafId = 0;
+    let animatingAncestorCleanup = null;
+    const outsideBottom = computed(() => {
+      if (!outsideScrollEl.value) return "0";
+      return `${Math.max(0, window.innerHeight - outsideScrollRect.bottom + affixBottomOffset.value)}px`;
+    });
     const tableHeaderHalfVisible = computed(() => {
       if (!tableContentVisible.value) return false;
       return tableContentRect.top + tableHeaderH.value * 0.5 <= outsideScrollRect.bottom;
     });
     const tableContentFullVisible = computed(() => {
       if (!tableContentVisible.value) return false;
-      const contentBottom = tableContentRect.bottom;
-      const containerBottom = outsideScrollRect.bottom;
-      return contentBottom <= containerBottom;
+      return tableContentRect.bottom <= outsideScrollRect.bottom - affixBottomOffset.value;
     });
+    const isPsXFixed = computed(() => tableContentVisible.value && tableHeaderHalfVisible.value && !tableContentFullVisible.value);
     const {
       ps: tablePs
     } = usePerfectScrollbar(tableContentEl, {
@@ -403,6 +408,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       stop: outsideTableContentStop
     } = useMouseInElement(tableContentEl);
     const affixedHeaderTransform = ref("none");
+    const affixedRailOffsetX = ref(0);
     const affixBaseEl = computed(() => outsideScrollEl.value || tableRef.value?.$el);
     const reProps = computed(() => {
       const {
@@ -826,10 +832,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return keys;
       }, []);
     }
+    function refreshAffixedMetrics() {
+      tableContentRect.update();
+      outsideScrollRect.update();
+      affixedRailOffsetX.value = getTransformOffset(affixBaseEl.value).x;
+    }
     function onResize(entries) {
       const el = entries[0].target;
       outsideScrollEl.value = getScrollEl(el);
-      outsideScrollRect.update();
+      refreshAffixedMetrics();
       const headerEl = el.querySelector(".t-table__header");
       tableHeaderEl.value = headerEl;
       let headerH = 0;
@@ -837,6 +848,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       tableHeaderH.value = headerH;
       const contentEl = el.querySelector(".t-table__content");
       tableContentEl.value = contentEl;
+      probeBottomBlockHeight();
     }
     function isTransformAnimating(node) {
       return node.getAnimations().length > 0;
@@ -851,6 +863,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return null;
     }
+    function watchAnimatingTransformAncestor() {
+      animatingAncestorCleanup?.();
+      const animatingNode = findAnimatingTransformAncestor(affixBaseEl.value);
+      if (!animatingNode) return;
+      const cleanup = () => {
+        animatingNode.removeEventListener("transitionend", onEnd);
+        animatingNode.removeEventListener("animationend", onEnd);
+        animatingAncestorCleanup = null;
+      };
+      const onEnd = () => {
+        cleanup();
+        refreshAffixedMetrics();
+      };
+      animatingNode.addEventListener("transitionend", onEnd);
+      animatingNode.addEventListener("animationend", onEnd);
+      animatingAncestorCleanup = cleanup;
+    }
     async function applyAffixedTransform() {
       const el = affixBaseEl.value;
       if (!el) return;
@@ -861,6 +890,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
       affixedHeaderTransform.value = `translateY(-${y}px)`;
     }
+    function scheduleProbeBottomBlock() {
+      if (probeRafId) return;
+      probeRafId = requestAnimationFrame(() => {
+        probeRafId = 0;
+        probeBottomBlockHeight();
+      });
+    }
+    function probeBottomBlockHeight() {
+      const scrollEl = outsideScrollEl.value;
+      const tableEl = tableRef.value?.$el;
+      if (!scrollEl || !tableEl) return;
+      const sRect = scrollEl.getBoundingClientRect();
+      const stack = document.elementsFromPoint(sRect.left + sRect.width / 2, sRect.bottom - 1);
+      let blockHeight = 0;
+      for (const el of stack) {
+        if (tableEl.contains(el)) continue;
+        if (el === scrollEl || el.contains(scrollEl)) continue;
+        const {
+          position
+        } = getComputedStyle(el);
+        if (position !== "fixed" && position !== "sticky") continue;
+        const rect = el.getBoundingClientRect();
+        if (rect.top < sRect.top) continue;
+        blockHeight = Math.max(blockHeight, sRect.bottom - rect.top);
+      }
+      affixBottomOffset.value = blockHeight;
+    }
     watch(columnControllerVisible, (visible) => {
       const {
         columns
@@ -879,6 +935,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       requestAnimationFrame(() => {
         tablePs.value?.update();
       });
+      watchAnimatingTransformAncestor();
+      nextTick(() => {
+        setTimeout(refreshAffixedMetrics, 320);
+      });
+    });
+    watch(isOutsideTableContent, (outside) => {
+      if (outside) return;
+      refreshAffixedMetrics();
+    });
+    watch(outsideScrollEl, (el, _old, onCleanup) => {
+      if (!el) return;
+      probeBottomBlockHeight();
+      const onScroll = () => scheduleProbeBottomBlock();
+      el.addEventListener("scroll", onScroll, {
+        passive: true
+      });
+      onCleanup(() => {
+        el.removeEventListener("scroll", onScroll);
+        if (probeRafId) {
+          cancelAnimationFrame(probeRafId);
+          probeRafId = 0;
+        }
+      });
+    }, {
+      immediate: true
     });
     onActivated(() => {
       setScrollElTo();
@@ -890,6 +971,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onBeforeUnmount(() => {
       tableContentStop();
       outsideTableContentStop();
+      if (probeRafId) cancelAnimationFrame(probeRafId);
+      animatingAncestorCleanup?.();
     });
     __expose(createExposeProxy({
       data,
@@ -917,7 +1000,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createBlock(resolveDynamicComponent(reProps.value.tableOptions.tree ? unref(EnhancedTable) : unref(Table)), mergeProps({
         ref: "table",
-        class: ["qd-service-table", __props.headerBg ? "" : "t-table--header-bg-inherit", unref(isOutsideTableContent) ? "" : "qd-service-table--inside-table-content", tableContentVisible.value && tableHeaderHalfVisible.value && !tableContentFullVisible.value ? "qd-service-table--ps-x-fixed" : "", __props.disableHorizontalScroll ? "qd-service-table--disable-horizontal-scroll" : ""],
+        class: ["qd-service-table", __props.headerBg ? "" : "t-table--header-bg-inherit", unref(isOutsideTableContent) ? "" : "qd-service-table--inside-table-content", isPsXFixed.value ? "qd-service-table--ps-x-fixed" : "", __props.disableHorizontalScroll ? "qd-service-table--disable-horizontal-scroll" : ""],
         "selected-row-keys": unref(selectedRowKeys),
         "onUpdate:selectedRowKeys": _cache[0] || (_cache[0] = ($event) => isRef(selectedRowKeys) ? selectedRowKeys.value = $event : null),
         "active-row-keys": unref(activeRowKeys),

package/dist/components/upload/common.d.ts

@@ -1,5 +1,5 @@
+import type { UploadFile } from 'tdesign-vue-next';
 import type { Slot } from 'vue';
 export declare function handleAbridgeName(inputName: string, leftCount?: number, rightCount?: number): string;
-export declare const IMAGE_REGEXP: RegExp;
-export declare function returnFileSize(number: number | undefined): string;
+export declare function getFileType(file: UploadFile): string;
 export declare function hasSlotContent(slot?: Slot): boolean;

package/dist/components/upload/common.mjs

@@ -15,14 +15,8 @@ function handleAbridgeName(inputName, leftCount = 5, rightCount = 7) {
   }
   return name.replace(new RegExp(`^(.{${leftLength}})(.+)(.{${rightLength}})$`), "$1…$3");
 }
-const IMAGE_REGEXP = /(.png|.jpg|.jpeg|.jpe|.webp|.avif|.heic|.heif|.svg|.gif|.bmp)/i;
-function returnFileSize(number) {
-  if (!number && number !== 0) return "";
-  const SIZE_MAP = { KB: 1024, MB: 1048576, GB: 1073741824 };
-  if (number < SIZE_MAP.KB) return `${number} Bytes`;
-  if (number < SIZE_MAP.MB) return `${(number / SIZE_MAP.KB).toFixed(1)} KB`;
-  if (number < SIZE_MAP.GB) return `${(number / SIZE_MAP.MB).toFixed(1)} MB`;
-  return `${(number / SIZE_MAP.GB).toFixed(1)} GB`;
+function getFileType(file) {
+  return file.raw?.type || file.type || file.name || "";
 }
 function hasSlotContent(slot) {
   if (!slot) return false;
@@ -40,8 +34,7 @@ function isValidSlotChild(children) {
   return true;
 }
 export {
-  IMAGE_REGEXP,
+  getFileType,
   handleAbridgeName,
-  hasSlotContent,
-  returnFileSize
+  hasSlotContent
 };

package/dist/components/upload/file-flow-file-list-display/index.vue.mjs

@@ -1,7 +1,9 @@
 import { defineComponent, computed, createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, Fragment, renderList, createBlock, unref, resolveDynamicComponent, normalizeClass, createVNode } from "vue";
+import { formatByte } from "qidian-shared";
 import { TimeFilledIcon, ErrorCircleFilledIcon, CheckCircleFilledIcon, FileIcon } from "tdesign-icons-vue-next";
 import { Image, Button, Loading } from "tdesign-vue-next";
-import { handleAbridgeName, returnFileSize, IMAGE_REGEXP } from "../common.mjs";
+import { isImage } from "../../../utils/tools.mjs";
+import { getFileType, handleAbridgeName } from "../common.mjs";
 import QdFileIcon from "../../file-icon/index.vue.mjs";
 const _hoisted_1 = { style: { "min-width": "120px" } };
 const _hoisted_2 = { style: { "min-width": "120px" } };
@@ -37,15 +39,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const allSuccess = computed(
       () => props.files.every((file) => file.status === "success" || !file.status)
     );
-    function getFileType(file) {
-      return file.raw?.type || file.type || file.name || "";
-    }
     function hasThumbnail(file) {
       return !(!file.raw && !file.type && file.url);
     }
-    function isImage(file) {
-      return IMAGE_REGEXP.test(getFileType(file));
-    }
     function getStatusIcon(status) {
       const iconMap = {
         success: CheckCircleFilledIcon,
@@ -97,7 +93,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createElementVNode("td", _hoisted_6, [
                 createElementVNode("span", _hoisted_7, [
                   __props.showThumbnail && hasThumbnail(file) ? (openBlock(), createElementBlock("span", _hoisted_8, [
-                    isImage(file) ? (openBlock(), createBlock(unref(Image), {
+                    unref(isImage)(unref(getFileType)(file)) ? (openBlock(), createBlock(unref(Image), {
                       key: 0,
                       class: "t-upload__file-thumbnail",
                       src: file.url || file.raw,
@@ -118,7 +114,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }, toDisplayString(__props.abridgeName?.length && file.name ? unref(handleAbridgeName)(file.name, ...__props.abridgeName) : file.name), 9, _hoisted_9)
                 ])
               ]),
-              createElementVNode("td", null, toDisplayString(unref(returnFileSize)(file.size)), 1),
+              createElementVNode("td", null, toDisplayString(unref(formatByte)(file.size)), 1),
               createElementVNode("td", null, [
                 createElementVNode("div", _hoisted_10, [
                   (openBlock(), createBlock(resolveDynamicComponent(getStatusIcon(file.status)))),

package/dist/components/upload/image-file-list-display/index.vue.mjs

@@ -1,7 +1,8 @@
 import { defineComponent, useSlots, computed, createElementBlock, openBlock, createCommentVNode, Fragment, renderList, createBlock, createVNode, createElementVNode, unref, toDisplayString, renderSlot, withCtx, withModifiers, createTextVNode, normalizeClass } from "vue";
 import { ErrorCircleFilledIcon, DeleteIcon, BrowseIcon, AddIcon } from "tdesign-icons-vue-next";
 import { Loading, Image, Space, Divider, Link } from "tdesign-vue-next";
-import { IMAGE_REGEXP, handleAbridgeName, hasSlotContent } from "../common.mjs";
+import { isImage } from "../../../utils/tools.mjs";
+import { getFileType, handleAbridgeName, hasSlotContent } from "../common.mjs";
 import QdFileIcon from "../../file-icon/index.vue.mjs";
 const _hoisted_1 = { class: "t-upload__card" };
 const _hoisted_2 = {
@@ -49,12 +50,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const showTrigger = computed(
       () => props.trigger && !props.disabled && (!props.max || props.files.length < props.max)
     );
-    function getFileType(file) {
-      return file.raw?.type || file.type || file.name || "";
-    }
-    function isImage(file) {
-      return IMAGE_REGEXP.test(getFileType(file));
-    }
     function fileName(file) {
       if (!props.abridgeName || !file.name) return file.name ?? "";
       return handleAbridgeName(file.name, ...props.abridgeName);
@@ -93,7 +88,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ])
               ])
             ])) : (openBlock(), createElementBlock("div", _hoisted_6, [
-              isImage(file) ? (openBlock(), createBlock(unref(Image), {
+              unref(isImage)(unref(getFileType)(file)) ? (openBlock(), createBlock(unref(Image), {
                 key: 0,
                 class: "t-upload__card-image",
                 src: file.url || file.raw,

package/dist/components/upload/image-flow-file-list-display/index.vue.mjs

@@ -1,7 +1,8 @@
 import { defineComponent, useSlots, createElementBlock, openBlock, Fragment, renderList, createElementVNode, createCommentVNode, normalizeClass, createBlock, createVNode, unref, toDisplayString, renderSlot, withCtx, withModifiers, createTextVNode } from "vue";
 import { ErrorCircleFilledIcon, BrowseIcon, DeleteIcon, CheckCircleFilledIcon, TimeFilledIcon } from "tdesign-icons-vue-next";
 import { Loading, Image, Space, Divider } from "tdesign-vue-next";
-import { handleAbridgeName, IMAGE_REGEXP, hasSlotContent } from "../common.mjs";
+import { isImage } from "../../../utils/tools.mjs";
+import { getFileType, handleAbridgeName, hasSlotContent } from "../common.mjs";
 import QdFileIcon from "../../file-icon/index.vue.mjs";
 const _hoisted_1 = { class: "t-upload__card clearfix" };
 const _hoisted_2 = {
@@ -35,17 +36,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const slots = useSlots();
-    function getFileType(file) {
-      return file.raw?.type || file.type || file.name || "";
-    }
-    function isImage(file) {
-      return IMAGE_REGEXP.test(getFileType(file));
-    }
     function handlePreview({ e }, index, file) {
       props.onPreview?.({ file, index, e });
     }
     function canMaskPreview(file) {
-      return props.disabled && (Boolean(file.url) || Boolean(file.raw)) && file.status !== "progress" && file.status !== "fail" && !hasSlotContent(slots["file-middle-actions"]) && !hasSlotContent(slots["file-actions"]);
+      return props.disabled && file.status !== "progress" && file.status !== "fail" && !hasSlotContent(slots["file-middle-actions"]) && !hasSlotContent(slots["file-actions"]);
     }
     function handleMaskPreview(e, index, file) {
       if (!canMaskPreview(file)) return;
@@ -67,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])) : file.status === "fail" ? (openBlock(), createElementBlock("div", _hoisted_3, [
                 createVNode(unref(ErrorCircleFilledIcon)),
                 createElementVNode("p", null, toDisplayString(__props.locale.progress.failText), 1)
-              ])) : (["waiting", "success"].includes(file.status) || !file.status && file.url) && isImage(file) ? (openBlock(), createBlock(unref(Image), {
+              ])) : (["waiting", "success"].includes(file.status) || !file.status && file.url) && unref(isImage)(unref(getFileType)(file)) ? (openBlock(), createBlock(unref(Image), {
                 key: 2,
                 class: "t-upload__card-image",
                 src: file.url || file.raw,

package/dist/utils/tools.d.ts

@@ -33,4 +33,11 @@ export declare function getTransformOffset(el?: HTMLElement | null, options?: {
 }): {
     x: number;
     y: number;
+    node: HTMLElement;
+} | {
+    x: number;
+    y: number;
+    node: null | undefined;
 };
+export declare const IMAGE_REGEXP: RegExp;
+export declare function isImage(value: string): boolean;

package/dist/utils/tools.mjs

@@ -13,14 +13,20 @@ function getTransformOffset(el, options) {
   while (node) {
     if (getComputedStyle(node).transform !== "none" && !skip?.(node)) {
       const { x, y } = node.getBoundingClientRect();
-      return { x, y };
+      return { x, y, node };
     }
     node = node.parentElement;
   }
-  return { x: 0, y: 0 };
+  return { x: 0, y: 0, node };
+}
+const IMAGE_REGEXP = /(.png|.jpg|.jpeg|.jpe|.webp|.avif|.heic|.heif|.svg|.gif|.bmp)/i;
+function isImage(value) {
+  return IMAGE_REGEXP.test(value);
 }
 export {
+  IMAGE_REGEXP,
   getPublicUrl,
   getTransformOffset,
+  isImage,
   useUICsl
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qidian-vue-ui",
-  "version": "1.3.4",
+  "version": "1.4.1",
   "description": "基于 TDesign 的 QiDian Vue UI 组件库",
   "author": "qidian",
   "license": "MIT",
@@ -130,7 +130,7 @@
     "vue-codemirror": "^6.1.1",
     "vue-echarts": "^8.0.1",
     "vue-stream-markdown": "1.0.1-beta.1",
-    "qidian-shared": "1.0.76"
+    "qidian-shared": "1.0.77"
   },
   "scripts": {
     "clean": "rm -rf dist",