yc-pro-components 0.0.75 → 0.0.77

package/index.mjs

@@ -1,5 +1,5 @@
-/*! yc-pro-components v0.0.75 */
-import { unref, isRef, ref, inject, isReactive, watch, computed, shallowRef, provide, onMounted, nextTick, onBeforeUnmount, defineComponent, useAttrs, watchEffect, openBlock, createBlock, mergeProps, createSlots, withCtx, createElementVNode, renderSlot, normalizeStyle, createVNode, createTextVNode, toDisplayString, createElementBlock, normalizeClass, createCommentVNode, reactive, Fragment, renderList, resolveDynamicComponent, normalizeProps, guardReactiveProps, h, withDirectives, isVNode, withKeys, withModifiers, TransitionGroup, toHandlers, getCurrentInstance, resolveComponent, toRefs, useSlots, onUnmounted, resolveDirective, pushScopeId, popScopeId, onBeforeMount, getCurrentScope, onScopeDispose, toRef, mergeModels, useModel, vShow, createStaticVNode, hasInjectionContext, markRaw, effectScope, toRaw } from 'vue';
+/*! yc-pro-components v0.0.77 */
+import { unref, isRef, ref, inject, isReactive, watch, computed, shallowRef, provide, onMounted, nextTick, onBeforeUnmount, defineComponent, useAttrs, watchEffect, openBlock, createBlock, mergeProps, createSlots, withCtx, createElementVNode, renderSlot, normalizeStyle, createVNode, createTextVNode, toDisplayString, createElementBlock, normalizeClass, createCommentVNode, reactive, Fragment, renderList, resolveDynamicComponent, normalizeProps, guardReactiveProps, h, withDirectives, isVNode, withKeys, withModifiers, TransitionGroup, toHandlers, getCurrentInstance, resolveComponent, pushScopeId, popScopeId, toRefs, useSlots, onUnmounted, resolveDirective, onBeforeMount, getCurrentScope, onScopeDispose, toRef, mergeModels, useModel, vShow, createStaticVNode, hasInjectionContext, markRaw, effectScope, toRaw } from 'vue';
 import { dayjs, localeContextKey, ElDialog, ElButton, ElPagination, ElRadioGroup, ElRadio, ElTableColumn, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon, ElTooltip, ElPopconfirm, ElLink, ElMessageBox, useFormDisabled, ElDatePicker, ClickOutside, ElTag, ElInput, ElAutocomplete, ElCascader, ElCheckboxGroup, ElCheckbox, ElColorPicker, ElInputNumber, ElRate, ElSelect, ElOption, ElSlider, ElSwitch, ElTimePicker, ElTimeSelect, ElTransfer, ElTreeSelect, ElSelectV2, ElText, ElDivider, ElFormItem, ElOptionGroup, ElRow, ElCol, ElForm, ElCard, ElMessage, ElImage, ElProgress, ElAvatar, ElPopover, ElTable, vLoading, ElDescriptions, ElDescriptionsItem, ElDrawer, TableV2FixedDir, ElAutoResizer, ElTableV2, ElSteps, ElStep, ElBreadcrumb, ElBreadcrumbItem, ElMenuItem, ElSubMenu, ElMenu, ElScrollbar, ElHeader, ElContainer, ElMain, ElBacktop, ElUpload } from 'element-plus';
 
 const makeInstaller = (components = [], directives = {}) => {
@@ -8613,6 +8613,204 @@ function useDictInjection(dictStore) {
   provide(DictStoreInjectionKey, dictStore);
 }
 
+const DEFAULT_RESIZE_AREA_WIDTH = 12;
+const DEFAULT_BORDER_COLOR = "var(--theme-color)";
+const DEFAULT_SCROLL_SELECTOR = ".el-scrollbar__wrap";
+function useTableDragScroll(wrapperRef, tableRef, options = {}) {
+  var _a, _b, _c;
+  const resizeAreaWidth = (_a = options.resizeAreaWidth) != null ? _a : DEFAULT_RESIZE_AREA_WIDTH;
+  const borderColor = (_b = options.resizeBorderColor) != null ? _b : DEFAULT_BORDER_COLOR;
+  const scrollSelector = (_c = options.scrollContainerSelector) != null ? _c : DEFAULT_SCROLL_SELECTOR;
+  const isDragging = ref(false);
+  const isResizing = ref(false);
+  const startX = ref(0);
+  const scrollLeft = ref(0);
+  const scrollContainer = ref(null);
+  const isEnabled = () => {
+    const enabled = options.enabled;
+    if (enabled === void 0) return true;
+    if (typeof enabled === "boolean") return enabled;
+    return enabled.value;
+  };
+  const getTableEl = () => {
+    var _a2;
+    const fromRef = (_a2 = tableRef == null ? void 0 : tableRef.value) == null ? void 0 : _a2.$el;
+    if (fromRef) return fromRef;
+    const wrapper = wrapperRef.value;
+    if (!wrapper) return null;
+    return wrapper.querySelector(".el-table");
+  };
+  const refreshScrollContainer = () => {
+    const tableEl = getTableEl();
+    if (tableEl) {
+      scrollContainer.value = tableEl.querySelector(scrollSelector);
+    }
+  };
+  const isInsideTable = (e) => {
+    const tableEl = getTableEl();
+    if (!tableEl) return false;
+    const target = e.target;
+    return !!target && tableEl.contains(target);
+  };
+  const isInResizeArea = (e, th) => {
+    const rect = th.getBoundingClientRect();
+    const mouseX = e.clientX;
+    return mouseX >= rect.right - resizeAreaWidth && mouseX <= rect.right + 4;
+  };
+  const getCurrentColumn = (e) => {
+    var _a2;
+    let current = e.target;
+    while (current && ((_a2 = current.tagName) == null ? void 0 : _a2.toLowerCase()) !== "th") {
+      current = current.parentElement;
+      if (!current || current === wrapperRef.value) return null;
+    }
+    return current;
+  };
+  const clearAllHeaderStyles = () => {
+    const tableEl = getTableEl();
+    if (!tableEl) return;
+    const headers = tableEl.querySelectorAll("th");
+    headers.forEach((header) => {
+      const h = header;
+      h.style.borderRight = "";
+      h.style.cursor = "";
+    });
+  };
+  const onMouseDown = (e) => {
+    if (!isEnabled()) return;
+    if (!isInsideTable(e)) return;
+    if (!scrollContainer.value) {
+      refreshScrollContainer();
+      if (!scrollContainer.value) return;
+    }
+    const target = e.target;
+    const column = getCurrentColumn(e);
+    if (column && isInResizeArea(e, column)) {
+      isDragging.value = false;
+      isResizing.value = true;
+      return;
+    }
+    if (target.classList.contains("noclick")) {
+      isDragging.value = false;
+      isResizing.value = true;
+      return;
+    }
+    isDragging.value = true;
+    isResizing.value = false;
+    startX.value = e.clientX;
+    scrollLeft.value = scrollContainer.value.scrollLeft;
+    if (wrapperRef.value) {
+      wrapperRef.value.style.cursor = "";
+    }
+    target.style.cursor = "";
+  };
+  const onMouseMove = (e) => {
+    var _a2, _b2, _c2;
+    if (!isEnabled()) return;
+    const target = e.target;
+    const parentElement = target.parentElement;
+    const insideTable = isInsideTable(e);
+    if (!insideTable) {
+      if (wrapperRef.value) {
+        wrapperRef.value.style.cursor = "";
+      }
+      if (isDragging.value && scrollContainer.value) {
+        const deltaX2 = e.clientX - startX.value;
+        scrollContainer.value.scrollLeft = scrollLeft.value - deltaX2;
+      }
+      return;
+    }
+    if (target.classList.contains("drag-disabled")) {
+      target.style.cursor = "pointer";
+      return;
+    }
+    const column = getCurrentColumn(e);
+    if (column) {
+      const allHeaders = (_a2 = column.parentElement) == null ? void 0 : _a2.querySelectorAll("th");
+      if (isInResizeArea(e, column)) {
+        isDragging.value = false;
+        isResizing.value = true;
+        column.style.borderRight = `2px solid ${borderColor}`;
+        allHeaders == null ? void 0 : allHeaders.forEach((header) => {
+          const h = header;
+          if (h !== column) {
+            h.style.borderRight = "";
+            h.style.cursor = "";
+          }
+        });
+        return;
+      } else {
+        allHeaders == null ? void 0 : allHeaders.forEach((header) => {
+          const h = header;
+          h.style.borderRight = "";
+          h.style.cursor = "";
+        });
+        isResizing.value = false;
+      }
+    }
+    if (target.classList.contains("noclick") || target.classList.contains("el-table__column-resize-proxy")) {
+      isDragging.value = false;
+      isResizing.value = true;
+      return;
+    }
+    if (isResizing.value || ((_b2 = parentElement == null ? void 0 : parentElement.tagName) == null ? void 0 : _b2.toLowerCase()) === "th" || ((_c2 = target.tagName) == null ? void 0 : _c2.toLowerCase()) === "th") {
+      isDragging.value = false;
+      return;
+    }
+    if (target.classList.contains("edit-icon")) {
+      target.style.cursor = "pointer";
+      return;
+    }
+    isResizing.value = false;
+    target.style.cursor = "";
+    if (wrapperRef.value) {
+      wrapperRef.value.style.cursor = "grab";
+    }
+    if (!isDragging.value || !scrollContainer.value) return;
+    const deltaX = e.clientX - startX.value;
+    scrollContainer.value.scrollLeft = scrollLeft.value - deltaX;
+  };
+  const onMouseUp = () => {
+    isDragging.value = false;
+    isResizing.value = false;
+    if (wrapperRef.value) {
+      wrapperRef.value.style.cursor = "";
+    }
+    clearAllHeaderStyles();
+  };
+  const onTableBodyOver = () => {
+    const ths = document.querySelectorAll(".el-table__header th");
+    ths.forEach((th) => {
+      const h = th;
+      h.style.borderRight = "";
+      h.style.cursor = "";
+    });
+  };
+  let tableBodyEl = null;
+  onMounted(() => {
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    requestAnimationFrame(() => {
+      var _a2;
+      refreshScrollContainer();
+      const tableEl = getTableEl();
+      tableBodyEl = (_a2 = tableEl == null ? void 0 : tableEl.querySelector(".el-table__body")) != null ? _a2 : null;
+      tableBodyEl == null ? void 0 : tableBodyEl.addEventListener("mouseover", onTableBodyOver);
+    });
+  });
+  onBeforeUnmount(() => {
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+    tableBodyEl == null ? void 0 : tableBodyEl.removeEventListener("mouseover", onTableBodyOver);
+  });
+  return {
+    onMouseDown,
+    isDragging,
+    isResizing,
+    refreshScrollContainer
+  };
+}
+
 const _hoisted_1$v = { class: "plus-dialog-body" };
 var _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{
@@ -18337,11 +18535,12 @@ var Popover = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__file", "index.vue"]]
 
 const PlusPopover = Popover;
 
+const _withScopeId$4 = (n) => (pushScopeId("data-v-d1506155"), n = n(), popScopeId(), n);
 const _hoisted_1$k = { class: "plus-table-title-bar" };
 const _hoisted_2$e = { class: "plus-table-title-bar__title" };
 const _hoisted_3$c = { class: "plus-table-title-bar__toolbar" };
 const _hoisted_4$a = { class: "plus-table-title-bar__toolbar__density" };
-const _hoisted_5$9 = /* @__PURE__ */ createElementVNode(
+const _hoisted_5$9 = /* @__PURE__ */ _withScopeId$4(() => /* @__PURE__ */ createElementVNode(
   "svg",
   {
     viewBox: "0 0 1024 1024",
@@ -18355,14 +18554,15 @@ const _hoisted_5$9 = /* @__PURE__ */ createElementVNode(
   ],
   -1
   /* HOISTED */
-);
+));
 const _hoisted_6$7 = { class: "plus-table-checkbox-checkAll" };
-const _hoisted_7$5 = {
+const _hoisted_7$5 = { class: "plus-table-checkbox-actions" };
+const _hoisted_8$4 = {
   key: 0,
   class: "plus-table-checkbox-handle"
 };
-const _hoisted_8$4 = { key: 1 };
 const _hoisted_9$4 = { key: 1 };
+const _hoisted_10$3 = { key: 1 };
 var _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "PlusTableToolbar"
@@ -18402,6 +18602,12 @@ var _sfc_main$y = /* @__PURE__ */ defineComponent({
       var _a;
       return ((_a = columnSetting.value) == null ? void 0 : _a.overflowLabelLength) || 6;
     });
+    const confirmTextValue = computed(
+      () => {
+        var _a;
+        return ((_a = columnSetting.value) == null ? void 0 : _a.confirmText) || String(t("plus.table.confirmText"));
+      }
+    );
     const sortable = ref(null);
     const buttonNameDensity = [
       {
@@ -18423,6 +18629,20 @@ var _sfc_main$y = /* @__PURE__ */ defineComponent({
       }
       return props.columns.filter((item) => unref(item.headerIsChecked) !== false).map((item) => getTableKey(item));
     };
+    const buildFilterColumns = () => {
+      return props.columns.map((item) => {
+        if (state.checkList.includes(getTableKey(item))) {
+          return { ...item, headerIsChecked: true };
+        }
+        return { ...item, headerIsChecked: false };
+      });
+    };
+    const buildConfirmPayload = () => {
+      const columns = buildFilterColumns();
+      const order = columns.map((item) => String(item.prop || "")).filter(Boolean);
+      const checked = columns.filter((item) => item.headerIsChecked !== false).map((item) => String(item.prop || "")).filter(Boolean);
+      return { columns, order, checked };
+    };
     const state = reactive({
       checkAll: true,
       isIndeterminate: false,
@@ -18451,13 +18671,11 @@ var _sfc_main$y = /* @__PURE__ */ defineComponent({
       handleFilterTableConfirm("allCheck");
     };
     const handleFilterTableConfirm = (type) => {
-      const filterColumns = props.columns.map((item) => {
-        if (state.checkList.includes(getTableKey(item))) {
-          return { ...item, headerIsChecked: true };
-        }
-        return { ...item, headerIsChecked: false };
-      });
-      emit("filterTableHeader", filterColumns, type);
+      emit("filterTableHeader", buildFilterColumns(), type);
+    };
+    const handleConfirmClick = async () => {
+      var _a, _b;
+      await ((_b = (_a = columnSetting.value) == null ? void 0 : _a.onConfirm) == null ? void 0 : _b.call(_a, buildConfirmPayload()));
     };
     const handleCheckGroupChange = (value) => {
       setCheckAllState(value);
@@ -18522,10 +18740,10 @@ var _sfc_main$y = /* @__PURE__ */ defineComponent({
               1
               /* TEXT */
             )
-          ])
+          ], true)
         ]),
         createElementVNode("div", _hoisted_3$c, [
-          renderSlot(_ctx.$slots, "toolbar"),
+          renderSlot(_ctx.$slots, "toolbar", {}, void 0, true),
           ((_a = titleBarConfig.value) == null ? void 0 : _a.refresh) === true ? (openBlock(), createElementBlock("span", {
             key: 0,
             class: "plus-table-title-bar__toolbar__refresh",
@@ -18549,7 +18767,7 @@ var _sfc_main$y = /* @__PURE__ */ defineComponent({
                     _: 1
                     /* STABLE */
                   }, 8, ["size", "color"])
-                ])
+                ], true)
               ]),
               _: 3
               /* FORWARDED */
@@ -18582,7 +18800,7 @@ var _sfc_main$y = /* @__PURE__ */ defineComponent({
                       _: 1
                       /* STABLE */
                     }, 8, ["size", "color"])
-                  ])
+                  ], true)
                 ]),
                 _: 3
                 /* FORWARDED */
@@ -18647,14 +18865,14 @@ var _sfc_main$y = /* @__PURE__ */ defineComponent({
                       _: 1
                       /* STABLE */
                     }, 8, ["size", "color"])
-                  ])
+                  ], true)
                 ]),
                 _: 3
                 /* FORWARDED */
               }, 8, ["content"])
             ]),
             default: withCtx(() => {
-              var _a2, _b2, _c2;
+              var _a2, _b2, _c2, _d;
               return [
                 createElementVNode("div", _hoisted_6$7, [
                   createVNode(unref(ElCheckbox), {
@@ -18673,24 +18891,43 @@ var _sfc_main$y = /* @__PURE__ */ defineComponent({
                     _: 1
                     /* STABLE */
                   }, 8, ["modelValue", "indeterminate"]),
-                  ((_a2 = columnSetting.value) == null ? void 0 : _a2.reset) !== false ? (openBlock(), createBlock(unref(ElLink), mergeProps({
-                    key: 0,
-                    type: "primary",
-                    underline: unref(versionIsLessThan299) ? false : "never",
-                    href: "javaScript:;"
-                  }, unref(isPlainObject$1)((_b2 = columnSetting.value) == null ? void 0 : _b2.reset) ? (_c2 = columnSetting.value) == null ? void 0 : _c2.reset : {}, {
-                    onClick: withModifiers(resetCheckBoxList, ["stop", "prevent"])
-                  }), {
-                    default: withCtx(() => [
-                      createTextVNode(
-                        toDisplayString(unref(t)("plus.table.resetText")),
-                        1
-                        /* TEXT */
-                      )
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  }, 16, ["underline"])) : createCommentVNode("v-if", true)
+                  createElementVNode("div", _hoisted_7$5, [
+                    ((_a2 = columnSetting.value) == null ? void 0 : _a2.confirm) ? (openBlock(), createBlock(unref(ElLink), {
+                      key: 0,
+                      type: "primary",
+                      underline: unref(versionIsLessThan299) ? false : "never",
+                      href: "javaScript:;",
+                      onClick: withModifiers(handleConfirmClick, ["stop", "prevent"])
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(
+                          toDisplayString(confirmTextValue.value),
+                          1
+                          /* TEXT */
+                        )
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    }, 8, ["underline"])) : createCommentVNode("v-if", true),
+                    ((_b2 = columnSetting.value) == null ? void 0 : _b2.reset) !== false ? (openBlock(), createBlock(unref(ElLink), mergeProps({
+                      key: 1,
+                      type: "primary",
+                      underline: unref(versionIsLessThan299) ? false : "never",
+                      href: "javaScript:;"
+                    }, unref(isPlainObject$1)((_c2 = columnSetting.value) == null ? void 0 : _c2.reset) ? (_d = columnSetting.value) == null ? void 0 : _d.reset : {}, {
+                      onClick: withModifiers(resetCheckBoxList, ["stop", "prevent"])
+                    }), {
+                      default: withCtx(() => [
+                        createTextVNode(
+                          toDisplayString(unref(t)("plus.table.resetText")),
+                          1
+                          /* TEXT */
+                        )
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    }, 16, ["underline"])) : createCommentVNode("v-if", true)
+                  ])
                 ]),
                 createVNode(unref(ElCheckboxGroup), {
                   modelValue: state.checkList,
@@ -18715,10 +18952,10 @@ var _sfc_main$y = /* @__PURE__ */ defineComponent({
                               key: item.prop,
                               class: "plus-table-checkbox-item"
                             }, [
-                              ((_a3 = columnSetting.value) == null ? void 0 : _a3.dragSort) !== false ? (openBlock(), createElementBlock("div", _hoisted_7$5, [
+                              ((_a3 = columnSetting.value) == null ? void 0 : _a3.dragSort) !== false ? (openBlock(), createElementBlock("div", _hoisted_8$4, [
                                 renderSlot(_ctx.$slots, "drag-sort-icon", {}, () => [
                                   createTextVNode("\u2637")
-                                ])
+                                ], true)
                               ])) : createCommentVNode("v-if", true),
                               createCommentVNode(" element-plus \u7248\u672C\u53F7\u5C0F\u4E8E2.6.0 "),
                               unref(versionIsLessThan260) ? (openBlock(), createBlock(unref(ElCheckbox), {
@@ -18744,7 +18981,7 @@ var _sfc_main$y = /* @__PURE__ */ defineComponent({
                                     /* DYNAMIC */
                                   }, 1032, ["content"])) : (openBlock(), createElementBlock(
                                     "span",
-                                    _hoisted_8$4,
+                                    _hoisted_9$4,
                                     toDisplayString(item.label ? getLabelValue(item.label) : ""),
                                     1
                                     /* TEXT */
@@ -18779,7 +19016,7 @@ var _sfc_main$y = /* @__PURE__ */ defineComponent({
                                         /* DYNAMIC */
                                       }, 1032, ["content"])) : (openBlock(), createElementBlock(
                                         "span",
-                                        _hoisted_9$4,
+                                        _hoisted_10$3,
                                         toDisplayString(item.label ? getLabelValue(item.label) : ""),
                                         1
                                         /* TEXT */
@@ -18816,7 +19053,7 @@ var _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-var PlusTableTitleBar = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__file", "table-title-bar.vue"]]);
+var PlusTableTitleBar = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-d1506155"], ["__file", "table-title-bar.vue"]]);
 
 const _hoisted_1$j = { class: "plus-table-expand-col" };
 var _sfc_main$x = /* @__PURE__ */ defineComponent({
@@ -33167,7 +33404,8 @@ var _sfc_main$f = /* @__PURE__ */ defineComponent({
     hideHeaderFilter: { type: Boolean, default: true },
     columnCacheKey: { default: void 0 },
     disableColumnCache: { type: Boolean, default: false },
-    columnSettingsText: { default: void 0 }
+    columnSettingsText: { default: void 0 },
+    dragScroll: { type: [Boolean, Object], default: false }
   },
   emits: ["header-filter-confirm", "header-filter-reset"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -33178,6 +33416,21 @@ var _sfc_main$f = /* @__PURE__ */ defineComponent({
     const plusPageConfig = useYcComponentConfig("plusPage");
     const plusPageRef = ref();
     const rootRef = ref();
+    const dragScrollWrapperRef = ref(null);
+    const dragScrollEnabled = computed(() => props.dragScroll !== false && props.dragScroll != null);
+    const dragScrollOptions = computed(() => {
+      const value = props.dragScroll;
+      if (value && typeof value === "object") return value;
+      return {};
+    });
+    const { onMouseDown: onDragScrollMouseDown } = useTableDragScroll(
+      dragScrollWrapperRef,
+      void 0,
+      {
+        ...dragScrollOptions.value,
+        enabled: dragScrollEnabled
+      }
+    );
     const plusTableInstance = computed(() => {
       var _a;
       return (_a = plusPageRef.value) == null ? void 0 : _a.plusTableInstance;
@@ -33595,6 +33848,7 @@ var _sfc_main$f = /* @__PURE__ */ defineComponent({
     void resolvedColumnSettingsText.value;
     void hasRequest.value;
     void showDefaultColumnSettingsIcon.value;
+    void dragScrollEnabled.value;
     __expose({
       plusPageRef,
       plusTableInstance,
@@ -33652,62 +33906,76 @@ var _sfc_main$f = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["yc-plus-page", { "yc-plus-page--borderless": isBorderless.value }])
         },
         [
-          createVNode(unref(PlusPage), mergeProps({
-            ref_key: "plusPageRef",
-            ref: plusPageRef
-          }, { ...props, ..._ctx.$attrs }, {
-            columns: enhancedColumns.value,
-            "is-card": _ctx.isCard,
-            request: wrappedRequest.value,
-            search: mergedSearch.value,
-            "search-card-props": mergedSearchCardProps.value,
-            "table-card-props": mergedTableCardProps.value,
-            table: mergedTable.value,
-            pagination: mergedPagination.value,
-            "default-page-info": { page: 1, pageSize: DEFAULT_PAGE_SIZE },
-            onFilterTableHeader: handleFilterTableHeader,
-            onHeaderDragend: handleHeaderDragend
-          }), createSlots({
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default", {}, void 0, true)
-            ]),
-            _: 2
-            /* DYNAMIC */
-          }, [
-            _ctx.$slots["column-settings-icon"] ? {
-              name: "column-settings-icon",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "column-settings-icon", {}, void 0, true)
-              ]),
-              key: "0"
-            } : showDefaultColumnSettingsIcon.value ? {
-              name: "column-settings-icon",
-              fn: withCtx(() => [
-                createElementVNode("div", { class: "column-settings-wrapper" }, [
-                  createVNode(unref(YcSvgIcon), {
-                    src: fieldSettingIconUrl.value,
-                    size: 16
-                  }, null, 8, ["src"]),
-                  createElementVNode(
-                    "span",
-                    { class: "column-settings-text" },
-                    toDisplayString(resolvedColumnSettingsText.value),
-                    1
-                    /* TEXT */
-                  )
-                ])
-              ]),
-              key: "1"
-            } : void 0,
-            renderList(_ctx.$slots, (_, name) => {
-              return {
-                name,
-                fn: withCtx((slotProps) => [
-                  name !== "column-settings-icon" && name !== "default" ? renderSlot(_ctx.$slots, name, normalizeProps(mergeProps({ key: 0 }, slotProps)), void 0, true) : createCommentVNode("v-if", true)
-                ])
-              };
-            })
-          ]), 1040, ["columns", "is-card", "request", "search", "search-card-props", "table-card-props", "table", "pagination", "default-page-info"])
+          createCommentVNode(" \u62D6\u62FD\u6EDA\u52A8\u5305\u88F9\u5C42\uFF1AdragScroll \u542F\u7528\u65F6\u4ECB\u5165\uFF0C\u4F46\u59CB\u7EC8\u4FDD\u7559 ref\uFF0C\n         \u4EE5\u4FDD\u8BC1 mousedown \u900F\u4F20 + hook \u5185\u90E8 DOM \u67E5\u8BE2\u6B63\u5E38 "),
+          createElementVNode(
+            "div",
+            {
+              ref_key: "dragScrollWrapperRef",
+              ref: dragScrollWrapperRef,
+              class: normalizeClass(["yc-plus-page__drag-wrapper", { "yc-plus-page__drag-wrapper--enabled": dragScrollEnabled.value }]),
+              onMousedown: _cache[0] || (_cache[0] = ($event) => dragScrollEnabled.value ? unref(onDragScrollMouseDown)($event) : void 0)
+            },
+            [
+              createVNode(unref(PlusPage), mergeProps({
+                ref_key: "plusPageRef",
+                ref: plusPageRef
+              }, { ...props, ..._ctx.$attrs }, {
+                columns: enhancedColumns.value,
+                "is-card": _ctx.isCard,
+                request: wrappedRequest.value,
+                search: mergedSearch.value,
+                "search-card-props": mergedSearchCardProps.value,
+                "table-card-props": mergedTableCardProps.value,
+                table: mergedTable.value,
+                pagination: mergedPagination.value,
+                "default-page-info": { page: 1, pageSize: DEFAULT_PAGE_SIZE },
+                onFilterTableHeader: handleFilterTableHeader,
+                onHeaderDragend: handleHeaderDragend
+              }), createSlots({
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, [
+                _ctx.$slots["column-settings-icon"] ? {
+                  name: "column-settings-icon",
+                  fn: withCtx(() => [
+                    renderSlot(_ctx.$slots, "column-settings-icon", {}, void 0, true)
+                  ]),
+                  key: "0"
+                } : showDefaultColumnSettingsIcon.value ? {
+                  name: "column-settings-icon",
+                  fn: withCtx(() => [
+                    createElementVNode("div", { class: "column-settings-wrapper" }, [
+                      createVNode(unref(YcSvgIcon), {
+                        src: fieldSettingIconUrl.value,
+                        size: 16
+                      }, null, 8, ["src"]),
+                      createElementVNode(
+                        "span",
+                        { class: "column-settings-text" },
+                        toDisplayString(resolvedColumnSettingsText.value),
+                        1
+                        /* TEXT */
+                      )
+                    ])
+                  ]),
+                  key: "1"
+                } : void 0,
+                renderList(_ctx.$slots, (_, name) => {
+                  return {
+                    name,
+                    fn: withCtx((slotProps) => [
+                      name !== "column-settings-icon" && name !== "default" ? renderSlot(_ctx.$slots, name, normalizeProps(mergeProps({ key: 0 }, slotProps)), void 0, true) : createCommentVNode("v-if", true)
+                    ])
+                  };
+                })
+              ]), 1040, ["columns", "is-card", "request", "search", "search-card-props", "table-card-props", "table", "pagination", "default-page-info"])
+            ],
+            34
+            /* CLASS, NEED_HYDRATION */
+          )
         ],
         2
         /* CLASS */
@@ -33716,7 +33984,7 @@ var _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-var YcPlusPageComponent = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-73380467"], ["__file", "index.vue"]]);
+var YcPlusPageComponent = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-3ce473db"], ["__file", "index.vue"]]);
 
 function compareValues(a, b) {
   if (a == null && b == null) return 0;
@@ -60376,8 +60644,7 @@ const closeAllDrawer = () => {
   drawerStore.value = [];
 };
 
-const import_meta = {};
-const _withScopeId$3 = (n) => (pushScopeId("data-v-eb9ddafc"), n = n(), popScopeId(), n);
+const _withScopeId$3 = (n) => (pushScopeId("data-v-80cac14a"), n = n(), popScopeId(), n);
 const _hoisted_1$6 = { class: "custom-drawer-header" };
 const _hoisted_2$6 = { class: "header-content" };
 const _hoisted_3$6 = ["id"];
@@ -60396,7 +60663,7 @@ var _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
     const shouldRender = claimDrawerInstance();
-    if (!shouldRender && import_meta.env.DEV) {
+    if (!shouldRender && process.env.NODE_ENV !== "production") {
       console.warn(
         "[YcDrawer] Multiple <YcDrawer /> instances detected. Only the first instance renders drawers. Remove duplicate <YcDrawer /> from your component \u2014 it only needs to be placed once in the root App."
       );
@@ -60638,7 +60905,7 @@ var _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-var YcDrawerComponent = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-eb9ddafc"], ["__file", "index.vue"]]);
+var YcDrawerComponent = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-80cac14a"], ["__file", "index.vue"]]);
 
 const YcDrawer = YcDrawerComponent;
 const ReDrawer = YcDrawerComponent;
@@ -64262,8 +64529,8 @@ function createDictStore(config) {
   });
 }
 
-const version = "0.0.75";
+const version = "0.0.77";
 
 const install = installer.install;
 
-export { DEFAULT_CDN_CONFIG, DEFAULT_OPERATORS, DEFAULT_YC_CONFIG, DatePickerValueIsArrayList, DefaultPageInfo, DefaultPageSizeList, DictStoreInjectionKey, NO_VALUE_OPERATORS, OPERATOR_CATALOG, OPERATOR_LABELS, PlusBreadcrumb, PlusCheckCard, PlusCheckCardGroup, PlusDatePicker, PlusDescriptions, PlusDialog, PlusDialogForm, PlusDisplayItem, PlusDrawerForm, PlusForm, PlusFormItem, PlusHeader, PlusInputTag, PlusLayout, PlusPage, PlusPagination, PlusPopover, PlusRadio, PlusSearch, PlusSidebar, PlusSidebarItem, PlusStepsForm, PlusTable, PlusVirtualTable, YcAnimateSelector as ReAnimateSelector, YcAuth as ReAuth, YcBatchImportDialog as ReBatchImportDialog, YcCard as ReCard, YcCol as ReCol, YcConfigProvider as ReConfigProvider, ReDialog, YcDownloadDialog as ReDownloadDialog, ReDrawer, ReFormContainerHeader, YcLineTree as ReLineTree, ReMoreActions, YcCountTo as ReNormalCountTo, YcPerms as RePerms, RePlusPage, RePlusTree, YcSegmented as ReSegmented, YcSelectV2 as ReSelectV2, YcStatusDialog as ReStatusDialog, YcSvgIcon as ReSvgIcon, YcTabsWithFilter as ReTabsWithFilter, YcText as ReText, YcReboundCountTo as ReboundCountTo, SIZE_MAP, STATUS_CONFIG_MAP, TableColumnsEmptyTextInjectionKey, TableFormFieldRefInjectionKey, TableFormRefInjectionKey, TableFormRowInfoInjectionKey, ValueIsArrayList, ValueIsBooleanList, ValueIsNumberList, YC_CONFIG_KEY, YcAnimateSelector, YcAnimateSelectorWithInstall, YcAuth, YcAuthWithInstall, YcBatchImportDialog, YcBatchImportDialogWithInstall, YcCard, YcCardWithInstall, YcCol, YcConfigProvider, YcCountTo, YcDialog, YcDownloadDialog, YcDownloadDialogWithInstall, YcDrawer, YcFlicker, YcFormContainerHeader, YcLineTree, YcLineTreeWithInstall, YcMoreActions, YcPerms, YcPermsWithInstall, YcPlusPage, YcPlusTree, YcReboundCountTo, YcReboundCountToWithInstall, YcSegmented, YcSegmentedWithInstall, YcSelectV2, YcStatusDialog, YcSvgIcon, YcTableHeaderFilterCell, YcTabsWithFilter, YcTabsWithFilterWithInstall, YcText, YcTextWithInstall, addDrawer, animates, closeAllDrawer, closeDrawer, createDictStore, installer as default, drawerStore, findNodeById, findNodeByPath, findNodePosition, fnPerm, n as hasFunctionPermission, insertAsChild, insertAsSibling, insertNodeAtPosition, install, providePlusProConfig, removeNode, reorderNodeChildren, reorderSiblingNodes, selectValueTypeList, updateDrawer, useColumnAdapter, useDialogFormConfig, useDictInjection, useDrawerFormConfig, a as useFunctionPermission, useGetOptions, useHeaderFilter, useLocalHeaderFilter, useLocale, usePlusFormReset, usePlusProConfig, useRenderFlicker, useRenderFlicker as useRenderReFlicker, useSelectWithMapping, useSelectWithPagination, useSortableDrag$1 as useSortableDrag, useTable, useVirtualScroll, useVirtualSelection, useYcAuth, useYcCdn, useYcCdnUrl, useYcComponentConfig, useYcConfig, useYcPerms, useYcShowPageSearch, useYcTranslate, version };
+export { DEFAULT_CDN_CONFIG, DEFAULT_OPERATORS, DEFAULT_YC_CONFIG, DatePickerValueIsArrayList, DefaultPageInfo, DefaultPageSizeList, DictStoreInjectionKey, NO_VALUE_OPERATORS, OPERATOR_CATALOG, OPERATOR_LABELS, PlusBreadcrumb, PlusCheckCard, PlusCheckCardGroup, PlusDatePicker, PlusDescriptions, PlusDialog, PlusDialogForm, PlusDisplayItem, PlusDrawerForm, PlusForm, PlusFormItem, PlusHeader, PlusInputTag, PlusLayout, PlusPage, PlusPagination, PlusPopover, PlusRadio, PlusSearch, PlusSidebar, PlusSidebarItem, PlusStepsForm, PlusTable, PlusVirtualTable, YcAnimateSelector as ReAnimateSelector, YcAuth as ReAuth, YcBatchImportDialog as ReBatchImportDialog, YcCard as ReCard, YcCol as ReCol, YcConfigProvider as ReConfigProvider, ReDialog, YcDownloadDialog as ReDownloadDialog, ReDrawer, ReFormContainerHeader, YcLineTree as ReLineTree, ReMoreActions, YcCountTo as ReNormalCountTo, YcPerms as RePerms, RePlusPage, RePlusTree, YcSegmented as ReSegmented, YcSelectV2 as ReSelectV2, YcStatusDialog as ReStatusDialog, YcSvgIcon as ReSvgIcon, YcTabsWithFilter as ReTabsWithFilter, YcText as ReText, YcReboundCountTo as ReboundCountTo, SIZE_MAP, STATUS_CONFIG_MAP, TableColumnsEmptyTextInjectionKey, TableFormFieldRefInjectionKey, TableFormRefInjectionKey, TableFormRowInfoInjectionKey, ValueIsArrayList, ValueIsBooleanList, ValueIsNumberList, YC_CONFIG_KEY, YcAnimateSelector, YcAnimateSelectorWithInstall, YcAuth, YcAuthWithInstall, YcBatchImportDialog, YcBatchImportDialogWithInstall, YcCard, YcCardWithInstall, YcCol, YcConfigProvider, YcCountTo, YcDialog, YcDownloadDialog, YcDownloadDialogWithInstall, YcDrawer, YcFlicker, YcFormContainerHeader, YcLineTree, YcLineTreeWithInstall, YcMoreActions, YcPerms, YcPermsWithInstall, YcPlusPage, YcPlusTree, YcReboundCountTo, YcReboundCountToWithInstall, YcSegmented, YcSegmentedWithInstall, YcSelectV2, YcStatusDialog, YcSvgIcon, YcTableHeaderFilterCell, YcTabsWithFilter, YcTabsWithFilterWithInstall, YcText, YcTextWithInstall, addDrawer, animates, closeAllDrawer, closeDrawer, createDictStore, installer as default, drawerStore, findNodeById, findNodeByPath, findNodePosition, fnPerm, n as hasFunctionPermission, insertAsChild, insertAsSibling, insertNodeAtPosition, install, providePlusProConfig, removeNode, reorderNodeChildren, reorderSiblingNodes, selectValueTypeList, updateDrawer, useColumnAdapter, useDialogFormConfig, useDictInjection, useDrawerFormConfig, a as useFunctionPermission, useGetOptions, useHeaderFilter, useLocalHeaderFilter, useLocale, usePlusFormReset, usePlusProConfig, useRenderFlicker, useRenderFlicker as useRenderReFlicker, useSelectWithMapping, useSelectWithPagination, useSortableDrag$1 as useSortableDrag, useTable, useTableDragScroll, useVirtualScroll, useVirtualSelection, useYcAuth, useYcCdn, useYcCdnUrl, useYcComponentConfig, useYcConfig, useYcPerms, useYcShowPageSearch, useYcTranslate, version };