@gx-design-vue/pro-layout 0.1.0-alpha.21 → 0.1.0-alpha.23

package/dist/components/AppPage/index.js

@@ -66,7 +66,6 @@ const ProAppPage = /* @__PURE__ */ defineComponent({
 		});
 		const rootClassNames = computed(() => classNames(prefixCls.value, hashId.value, cssVarCls.value, rootCls.value, loading.value && `${prefixCls.value}-loading`, props.class));
 		const maskStyle = computed(() => ({
-			zIndex: props.spinning?.blur ? 999 : void 0,
 			backgroundColor: props.spinning?.blur ? void 0 : "unset",
 			...props.spinning?.style || {}
 		}));

package/dist/components/AppPage/style.js

@@ -15,6 +15,7 @@ const genAppPageStyle = (token) => {
 		},
 		"&-blur": {
 			position: "absolute",
+			zIndex: 999,
 			top: 0,
 			left: 0,
 			width: "100%",
@@ -25,7 +26,7 @@ const genAppPageStyle = (token) => {
 				top: "50%",
 				left: "50%",
 				transform: "translate(-50%, -50%)",
-				[`${componentCls}-spin-dot,.anticon`]: {
+				[`${componentCls}-spin-dot,.anticon,.pro-anticon`]: {
 					fontSize: 32,
 					[`${token.antCls}-spin-dot,.gx-spin-icon`]: { animationDuration: "0.75s" }
 				},

package/dist/components/PageTransition/index.d.ts

@@ -48,8 +48,8 @@ declare const GPageTransition: import("vue").DefineComponent<import("vue").Extra
     default: string;
   };
 }>> & Readonly<{}>, {
-  reverse: boolean;
   direction: string;
+  reverse: boolean;
   name: string;
   disabled: boolean;
 }, SlotsType<GPageTransitionSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/Tabs/hooks/useTabDrag.d.ts

@@ -14,7 +14,9 @@ interface TabDragItemProps {
 /**
  * 页签拖拽排序 —— 精简复刻 dnd-kit 的 useDraggable + sortable 实时让位。
  *
- * - 移动阈值（3px）区分点击与拖拽：未超阈值视为点击，让原生 click 走切换
+ * - 按住延迟（200ms）区分点击与拖拽：未超时松手视为点击，让原生 click 走切换
+ * - 延迟期间位移超过容差（10px）→ 取消拖拽意图（视为滑动/滚动）
+ * - 计时器触发后：draggingKey 赋值 → 拖拽样式出现（cursor: grabbing + 阴影）
  * - 拖拽项 `transform: translateX(delta)` 跟随指针
  * - 同组其他 tab 按虚拟插入位置实时 `translate` 让位（CSS translate 属性）
  * - drop 锚点只在 `item.group === dragGroup` 内查找 → 天然不跨级

package/dist/components/Tabs/hooks/useTabDrag.js

@@ -4,8 +4,13 @@ import { nextTick, ref } from "vue";
 import { useEventListener } from "@vueuse/core";
 //#region src/components/Tabs/hooks/useTabDrag.ts
 const IGNORE_SELECTOR = "button, a, input, [data-drag-ignore=\"true\"]";
-/** 移动阈值（px），超过才视为拖拽，避免误触影响点击切换 */
-const DRAG_THRESHOLD = 3;
+/**
+* 按住延迟（ms），参考 dnd-kit DelayConstraint 默认值。
+* 在此时间内未松手且未发生大位移 → 激活拖拽；否则视为点击或滑动。
+*/
+const DRAG_DELAY = 200;
+/** 延迟期间允许的最大位移（px），超过则取消拖拽意图（视为滑动/滚动） */
+const DRAG_DELAY_TOLERANCE = 10;
 const SCROLL_RESTORE_FRAMES = 2;
 const DISPLACEMENT_DURATION = 160;
 const DISPLACEMENT_EASING = "cubic-bezier(0.2, 0, 0, 1)";
@@ -15,7 +20,9 @@ function isIgnoredTarget(target) {
 /**
 * 页签拖拽排序 —— 精简复刻 dnd-kit 的 useDraggable + sortable 实时让位。
 *
-* - 移动阈值（3px）区分点击与拖拽：未超阈值视为点击，让原生 click 走切换
+* - 按住延迟（200ms）区分点击与拖拽：未超时松手视为点击，让原生 click 走切换
+* - 延迟期间位移超过容差（10px）→ 取消拖拽意图（视为滑动/滚动）
+* - 计时器触发后：draggingKey 赋值 → 拖拽样式出现（cursor: grabbing + 阴影）
 * - 拖拽项 `transform: translateX(delta)` 跟随指针
 * - 同组其他 tab 按虚拟插入位置实时 `translate` 让位（CSS translate 属性）
 * - drop 锚点只在 `item.group === dragGroup` 内查找 → 天然不跨级
@@ -36,6 +43,8 @@ function useTabDrag(options) {
 	let groupRects = /* @__PURE__ */ new Map();
 	let pendingKey = "";
 	let pendingStartX = 0;
+	/** 按住延迟计时器（参考 dnd-kit DelayConstraint） */
+	let dragDelayTimer;
 	const { scroll: scrollOnDragMove, start: startAutoScroll, stop: stopAutoScroll } = useAutoScroll(scrollEl, () => pointerClientX, { onScroll: updateDragPosition });
 	function getGroupItems() {
 		return items.value.filter((item) => item.group === dragGroup);
@@ -149,8 +158,8 @@ function useTabDrag(options) {
 	function beginDrag(clientX) {
 		isDragging.value = true;
 		dragStartClientX = clientX;
-		dragStartScrollLeft = scrollEl.value?.scrollLeft ?? 0;
 		pointerClientX = clientX;
+		dragStartScrollLeft = scrollEl.value?.scrollLeft ?? 0;
 		dragEl = queryTabEl(draggingKey.value);
 		recordGroupRects();
 		const dragRect = groupRects.get(draggingKey.value);
@@ -176,16 +185,25 @@ function useTabDrag(options) {
 		if (isIgnoredTarget(event.target)) return;
 		if (enabled && !enabled.value) return;
 		event.preventDefault();
+		clearPendingDrag();
 		pendingKey = item.key;
 		pendingStartX = event.clientX;
-		draggingKey.value = item.key;
 		dragGroup = item.group;
+		dragDelayTimer = setTimeout(() => {
+			if (!pendingKey) return;
+			draggingKey.value = pendingKey;
+			pointerClientX = pendingStartX;
+			beginDrag(pendingStartX);
+		}, DRAG_DELAY);
 	}
 	function handleMousemove(event) {
 		if (!isDragging.value) {
 			if (!pendingKey) return;
-			if (Math.abs(event.clientX - pendingStartX) < DRAG_THRESHOLD) return;
-			beginDrag(pendingStartX);
+			if (Math.abs(event.clientX - pendingStartX) > DRAG_DELAY_TOLERANCE) {
+				clearPendingDrag();
+				return;
+			}
+			return;
 		}
 		pointerClientX = event.clientX;
 		updateDragPosition();
@@ -222,16 +240,22 @@ function useTabDrag(options) {
 		dragEl = null;
 		groupRects = /* @__PURE__ */ new Map();
 		dragPointerOffsetX = 0;
+		dragGroup = void 0;
+		clearPendingDrag();
+	}
+	/** 清理延迟计时器与待定状态 */
+	function clearPendingDrag() {
+		if (dragDelayTimer != null) {
+			clearTimeout(dragDelayTimer);
+			dragDelayTimer = void 0;
+		}
 		pendingKey = "";
+		draggingKey.value = "";
 		dragGroup = void 0;
 	}
 	function handleMouseup() {
 		if (isDragging.value) endDrag();
-		else if (pendingKey) {
-			pendingKey = "";
-			draggingKey.value = "";
-			dragGroup = void 0;
-		}
+		else if (pendingKey) clearPendingDrag();
 	}
 	const documentTarget = typeof document === "undefined" ? void 0 : document;
 	useEventListener(documentTarget, "mousemove", handleMousemove);

package/dist/hooks/useLayoutBase.d.ts

@@ -38,14 +38,14 @@ declare function useLayoutBase(props?: {
   selectedKeys: import("vue").ComputedRef<string[]>;
   openKeys: import("vue").ComputedRef<string[]>;
   proClasses: import("vue").ComputedRef<{
-    siderHeader?: string;
-    siderFooter?: string;
-    footer?: string;
+    content?: string;
     header?: string;
-    breadcrumb?: string;
     sider?: string;
+    breadcrumb?: string;
     logo?: string;
-    content?: string;
+    siderHeader?: string;
+    siderFooter?: string;
+    footer?: string;
     root?: string;
     siderChildren?: string;
     logoImage?: string;
@@ -53,14 +53,14 @@ declare function useLayoutBase(props?: {
     tabs?: string;
   }>;
   proStyles: import("vue").ComputedRef<{
-    siderHeader?: import("vue").CSSProperties;
-    siderFooter?: import("vue").CSSProperties;
-    footer?: import("vue").CSSProperties;
+    content?: import("vue").CSSProperties;
     header?: import("vue").CSSProperties;
-    breadcrumb?: import("vue").CSSProperties;
     sider?: import("vue").CSSProperties;
+    breadcrumb?: import("vue").CSSProperties;
     logo?: import("vue").CSSProperties;
-    content?: import("vue").CSSProperties;
+    siderHeader?: import("vue").CSSProperties;
+    siderFooter?: import("vue").CSSProperties;
+    footer?: import("vue").CSSProperties;
     root?: import("vue").CSSProperties;
     siderChildren?: import("vue").CSSProperties;
     logoImage?: import("vue").CSSProperties;