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

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

@@ -0,0 +1,122 @@
+//#region src/components/Tabs/hooks/useAutoScroll.ts
+const ScrollDirection = {
+	Idle: 0,
+	Forward: 1,
+	Reverse: -1
+};
+const SCROLL_EPSILON = .5;
+/**
+* 横向自动滚动 —— 精简复刻 `@dnd-kit/dom` 的 `detectScrollIntent` + `Scroller` 思路。
+*
+* 指针进入 `scrollEl` 左/右边缘 threshold 区域时，按距边缘的比例计算速度
+* （越靠边越快）。滚动方向必须先被用户同向移动解锁；如果当前方向已经到达边界，
+* 则不产生滚动 intent，避免触底后因为鼠标还在边缘区被反复重新激活。
+*/
+function useAutoScroll(scrollEl, getPointerX, options = {}) {
+	const { threshold = .2, acceleration = 18, tolerance = 10, onScroll } = options;
+	let rafId;
+	let lastPointerX = null;
+	let maxScrollLeft;
+	const unlockedDirections = /* @__PURE__ */ new Set();
+	function getMaxScrollLeft() {
+		const el = scrollEl.value;
+		if (!el) return 0;
+		return maxScrollLeft ?? Math.max(0, el.scrollWidth - el.clientWidth);
+	}
+	function getEdgeIntent() {
+		const el = scrollEl.value;
+		const pointerX = getPointerX();
+		if (!el || pointerX == null) return {
+			direction: ScrollDirection.Idle,
+			speed: 0
+		};
+		const rect = el.getBoundingClientRect();
+		const triggerWidth = rect.width * threshold;
+		if (triggerWidth <= 0) return {
+			direction: ScrollDirection.Idle,
+			speed: 0
+		};
+		let direction = ScrollDirection.Idle;
+		let speed = 0;
+		const distRight = rect.right - pointerX;
+		const distLeft = pointerX - rect.left;
+		const canScrollRight = canScroll(ScrollDirection.Forward);
+		const canScrollLeft = canScroll(ScrollDirection.Reverse);
+		if (canScrollRight && distRight <= triggerWidth && pointerX <= rect.right + tolerance) {
+			const ratio = Math.abs((rect.right - triggerWidth - pointerX) / triggerWidth);
+			direction = ScrollDirection.Forward;
+			speed = acceleration * Math.min(ratio, 1);
+		} else if (canScrollLeft && distLeft <= triggerWidth && pointerX >= rect.left - tolerance) {
+			const ratio = Math.abs((rect.left + triggerWidth - pointerX) / triggerWidth);
+			direction = ScrollDirection.Reverse;
+			speed = acceleration * Math.min(ratio, 1);
+		}
+		return {
+			direction,
+			speed
+		};
+	}
+	function canScroll(direction) {
+		const el = scrollEl.value;
+		if (!el) return false;
+		const max = getMaxScrollLeft();
+		if (direction === ScrollDirection.Forward) return el.scrollLeft < max - SCROLL_EPSILON;
+		if (direction === ScrollDirection.Reverse) return el.scrollLeft > SCROLL_EPSILON;
+		return false;
+	}
+	function applyScroll() {
+		const el = scrollEl.value;
+		if (!el) return false;
+		const { direction, speed } = getEdgeIntent();
+		if (direction === ScrollDirection.Idle) return false;
+		if (!unlockedDirections.has(direction)) return false;
+		if (!canScroll(direction)) return false;
+		const delta = direction * speed;
+		if (delta !== 0) {
+			const before = el.scrollLeft;
+			const next = Math.min(getMaxScrollLeft(), Math.max(0, before + delta));
+			if (Math.abs(next - before) <= SCROLL_EPSILON) return false;
+			el.scrollLeft = next;
+			onScroll?.();
+			return true;
+		}
+		return false;
+	}
+	function tick() {
+		rafId = void 0;
+		if (applyScroll()) rafId = requestAnimationFrame(tick);
+	}
+	function scroll() {
+		const pointerX = getPointerX();
+		if (pointerX == null) return false;
+		if (lastPointerX != null) {
+			const moveDirection = Math.sign(pointerX - lastPointerX);
+			if (moveDirection !== ScrollDirection.Idle) unlockedDirections.add(moveDirection);
+		}
+		lastPointerX = pointerX;
+		const didScroll = applyScroll();
+		if (didScroll) rafId ??= requestAnimationFrame(tick);
+		return didScroll;
+	}
+	function start() {
+		const el = scrollEl.value;
+		maxScrollLeft = el ? Math.max(0, el.scrollWidth - el.clientWidth) : void 0;
+		scroll();
+	}
+	function stop() {
+		if (rafId != null) {
+			cancelAnimationFrame(rafId);
+			rafId = void 0;
+		}
+		lastPointerX = null;
+		maxScrollLeft = void 0;
+		unlockedDirections.clear();
+	}
+	return {
+		scroll,
+		start,
+		stop
+	};
+}
+//#endregion
+export { useAutoScroll };

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

@@ -0,0 +1,31 @@
+import { InnerTabItem } from "../interface.js";
+import { ComputedRef, Ref } from "vue";
+
+//#region src/components/Tabs/hooks/useTabDrag.d.ts
+interface UseTabDragOptions {
+  items: ComputedRef<InnerTabItem[]>;
+  scrollEl: Ref<HTMLElement | undefined>;
+  onReorder: (fromKey: string, toKey: string) => void;
+  enabled?: ComputedRef<boolean>;
+}
+interface TabDragItemProps {
+  onMousedown: (event: MouseEvent) => void;
+}
+/**
+ * 页签拖拽排序 —— 精简复刻 dnd-kit 的 useDraggable + sortable 实时让位。
+ *
+ * - 移动阈值（3px）区分点击与拖拽：未超阈值视为点击，让原生 click 走切换
+ * - 拖拽项 `transform: translateX(delta)` 跟随指针
+ * - 同组其他 tab 按虚拟插入位置实时 `translate` 让位（CSS translate 属性）
+ * - drop 锚点只在 `item.group === dragGroup` 内查找 → 天然不跨级
+ * - 松手 → onReorder 触发数据重排 → nextTick 用 flipAnimate（WAAPI FLIP）平滑归位
+ * - 拖拽结束后捕获抑制下一次 click，避免误触发 tab 切换
+ * - 边缘自动滚动串联 useAutoScroll
+ */
+declare function useTabDrag(options: UseTabDragOptions): {
+  isDragging: Ref<boolean, boolean>;
+  draggingKey: Ref<string, string>;
+  getItemProps: (key: string) => TabDragItemProps;
+};
+//#endregion
+export { TabDragItemProps, UseTabDragOptions, useTabDrag };

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

@@ -0,0 +1,252 @@
+import { flipAnimate } from "./flipAnimate.js";
+import { useAutoScroll } from "./useAutoScroll.js";
+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;
+const SCROLL_RESTORE_FRAMES = 2;
+const DISPLACEMENT_DURATION = 160;
+const DISPLACEMENT_EASING = "cubic-bezier(0.2, 0, 0, 1)";
+function isIgnoredTarget(target) {
+	return target instanceof HTMLElement && Boolean(target.closest(IGNORE_SELECTOR));
+}
+/**
+* 页签拖拽排序 —— 精简复刻 dnd-kit 的 useDraggable + sortable 实时让位。
+*
+* - 移动阈值（3px）区分点击与拖拽：未超阈值视为点击，让原生 click 走切换
+* - 拖拽项 `transform: translateX(delta)` 跟随指针
+* - 同组其他 tab 按虚拟插入位置实时 `translate` 让位（CSS translate 属性）
+* - drop 锚点只在 `item.group === dragGroup` 内查找 → 天然不跨级
+* - 松手 → onReorder 触发数据重排 → nextTick 用 flipAnimate（WAAPI FLIP）平滑归位
+* - 拖拽结束后捕获抑制下一次 click，避免误触发 tab 切换
+* - 边缘自动滚动串联 useAutoScroll
+*/
+function useTabDrag(options) {
+	const { items, scrollEl, onReorder, enabled } = options;
+	const isDragging = ref(false);
+	const draggingKey = ref("");
+	let dragGroup;
+	let dragStartClientX = 0;
+	let dragStartScrollLeft = 0;
+	let dragPointerOffsetX = 0;
+	let pointerClientX = 0;
+	let dragEl = null;
+	let groupRects = /* @__PURE__ */ new Map();
+	let pendingKey = "";
+	let pendingStartX = 0;
+	const { scroll: scrollOnDragMove, start: startAutoScroll, stop: stopAutoScroll } = useAutoScroll(scrollEl, () => pointerClientX, { onScroll: updateDragPosition });
+	function getGroupItems() {
+		return items.value.filter((item) => item.group === dragGroup);
+	}
+	function queryTabEl(key) {
+		return scrollEl.value?.querySelector(`[data-key="${key}"]`) ?? null;
+	}
+	function recordGroupRects() {
+		groupRects = /* @__PURE__ */ new Map();
+		for (const item of getGroupItems()) {
+			const el = queryTabEl(item.key);
+			if (!el) continue;
+			const rect = el.getBoundingClientRect();
+			groupRects.set(item.key, {
+				el,
+				left: rect.left,
+				width: rect.width,
+				translate: 0
+			});
+		}
+	}
+	function getCurrentScrollOffset() {
+		return (scrollEl.value?.scrollLeft ?? 0) - dragStartScrollLeft;
+	}
+	function getVisualPointerX() {
+		return pointerClientX + getCurrentScrollOffset();
+	}
+	function getDragCenterX() {
+		const dragRect = groupRects.get(draggingKey.value);
+		if (!dragRect) return getVisualPointerX();
+		return getVisualPointerX() - dragPointerOffsetX + dragRect.width / 2;
+	}
+	function getItemDisplacement(fromIdx, toIdx, dragWidth) {
+		const fromRect = groupRects.get(draggingKey.value);
+		const nextKey = fromIdx < toIdx ? getGroupItems()[fromIdx + 1]?.key : getGroupItems()[fromIdx - 1]?.key;
+		const nextRect = nextKey ? groupRects.get(nextKey) : void 0;
+		return dragWidth + (fromRect && nextRect ? Math.max(0, Math.abs(nextRect.left - fromRect.left) - (fromIdx < toIdx ? fromRect.width : nextRect.width)) : 0);
+	}
+	/** 计算拖拽项应去的目标项索引（匹配 reorderWithinGroup 的 toKey 语义） */
+	function computeTargetIdx(dragCenterX) {
+		const groupList = getGroupItems();
+		if (groupList.findIndex((item) => item.key === draggingKey.value) < 0) return -1;
+		const others = groupList.filter((item) => item.key !== draggingKey.value);
+		let targetIdx = others.length;
+		for (let i = 0; i < others.length; i++) {
+			const rect = groupRects.get(others[i].key);
+			if (!rect) continue;
+			if (dragCenterX < rect.left + rect.width / 2) {
+				targetIdx = i;
+				break;
+			}
+		}
+		return targetIdx;
+	}
+	/** 同组其他 tab 实时让位（区间内项 translate ±dragWidth） */
+	function applyDisplacement(targetIdx) {
+		const groupList = getGroupItems();
+		const fromIdx = groupList.findIndex((item) => item.key === draggingKey.value);
+		if (fromIdx < 0) return;
+		const dragWidth = groupRects.get(draggingKey.value)?.width ?? 0;
+		for (let i = 0; i < groupList.length; i++) {
+			const key = groupList[i].key;
+			if (key === draggingKey.value) continue;
+			const rect = groupRects.get(key);
+			if (!rect) continue;
+			let translate = 0;
+			if (fromIdx < targetIdx && i > fromIdx && i <= targetIdx) translate = -getItemDisplacement(fromIdx, targetIdx, dragWidth);
+			else if (fromIdx > targetIdx && i >= targetIdx && i < fromIdx) translate = getItemDisplacement(fromIdx, targetIdx, dragWidth);
+			applyTabTranslate(rect, translate);
+		}
+	}
+	function applyTabTranslate(rect, nextTranslate) {
+		const prevTranslate = rect.translate;
+		if (prevTranslate === nextTranslate) return;
+		rect.animation?.cancel();
+		rect.translate = nextTranslate;
+		rect.el.style.translate = nextTranslate ? `${nextTranslate}px` : "";
+		if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches || typeof rect.el.animate !== "function") return;
+		rect.animation = rect.el.animate({ translate: [`${prevTranslate}px`, `${nextTranslate}px`] }, {
+			duration: DISPLACEMENT_DURATION,
+			easing: DISPLACEMENT_EASING
+		});
+		const clearAnimation = () => {
+			rect.animation = void 0;
+		};
+		rect.animation.addEventListener("finish", clearAnimation, { once: true });
+		rect.animation.addEventListener("cancel", clearAnimation, { once: true });
+	}
+	function updateDragPosition() {
+		if (!isDragging.value) return;
+		if (dragEl) dragEl.style.transform = `translateX(${getVisualPointerX() - dragStartClientX}px)`;
+		applyDisplacement(computeTargetIdx(getDragCenterX()));
+	}
+	function clearInlineStyles(rects = groupRects, activeDragEl = dragEl) {
+		for (const rect of rects.values()) {
+			rect.animation?.cancel();
+			rect.animation = void 0;
+			rect.translate = 0;
+			const { el } = rect;
+			el.style.translate = "";
+		}
+		if (activeDragEl) activeDragEl.style.transform = "";
+	}
+	function restoreScrollLeft(scrollLeft, frames = SCROLL_RESTORE_FRAMES) {
+		const el = scrollEl.value;
+		if (!el) return;
+		el.scrollLeft = scrollLeft;
+		if (frames <= 0 || typeof requestAnimationFrame === "undefined") return;
+		requestAnimationFrame(() => restoreScrollLeft(scrollLeft, frames - 1));
+	}
+	function beginDrag(clientX) {
+		isDragging.value = true;
+		dragStartClientX = clientX;
+		dragStartScrollLeft = scrollEl.value?.scrollLeft ?? 0;
+		pointerClientX = clientX;
+		dragEl = queryTabEl(draggingKey.value);
+		recordGroupRects();
+		const dragRect = groupRects.get(draggingKey.value);
+		dragPointerOffsetX = dragRect ? clientX - dragRect.left : 0;
+		startAutoScroll();
+	}
+	/** 捕获阶段抑制拖拽结束后的下一次 click，避免误触发切换 */
+	function suppressNextClick() {
+		const target = dragEl;
+		if (!target) return;
+		const suppress = (event) => {
+			event.stopPropagation();
+			event.preventDefault();
+			target.removeEventListener("click", suppress, true);
+		};
+		target.addEventListener("click", suppress, {
+			capture: true,
+			once: true
+		});
+	}
+	function handleMousedown(event, item) {
+		if (event.button !== 0 || item.disabled) return;
+		if (isIgnoredTarget(event.target)) return;
+		if (enabled && !enabled.value) return;
+		event.preventDefault();
+		pendingKey = item.key;
+		pendingStartX = event.clientX;
+		draggingKey.value = item.key;
+		dragGroup = item.group;
+	}
+	function handleMousemove(event) {
+		if (!isDragging.value) {
+			if (!pendingKey) return;
+			if (Math.abs(event.clientX - pendingStartX) < DRAG_THRESHOLD) return;
+			beginDrag(pendingStartX);
+		}
+		pointerClientX = event.clientX;
+		updateDragPosition();
+		scrollOnDragMove();
+	}
+	function endDrag() {
+		const targetIdx = computeTargetIdx(getDragCenterX());
+		const groupList = getGroupItems();
+		const fromIdx = groupList.findIndex((item) => item.key === draggingKey.value);
+		const prevRects = /* @__PURE__ */ new Map();
+		for (const [key, { el }] of groupRects) prevRects.set(key, el.getBoundingClientRect());
+		stopAutoScroll();
+		const dragKey = draggingKey.value;
+		const targetItem = groupList[targetIdx];
+		const hasReorder = targetIdx >= 0 && targetIdx !== fromIdx && targetItem && targetItem.key !== dragKey;
+		const currentGroupRects = groupRects;
+		const currentDragEl = dragEl;
+		const currentScrollLeft = scrollEl.value?.scrollLeft ?? 0;
+		if (hasReorder) {
+			onReorder(dragKey, targetItem.key);
+			nextTick(() => {
+				restoreScrollLeft(currentScrollLeft);
+				clearInlineStyles(currentGroupRects, currentDragEl);
+				flipAnimate(groupList.map((item) => ({
+					key: item.key,
+					el: queryTabEl(item.key)
+				})).filter((entry) => Boolean(entry.el)), prevRects);
+				restoreScrollLeft(currentScrollLeft);
+			});
+		} else clearInlineStyles();
+		suppressNextClick();
+		isDragging.value = false;
+		draggingKey.value = "";
+		dragEl = null;
+		groupRects = /* @__PURE__ */ new Map();
+		dragPointerOffsetX = 0;
+		pendingKey = "";
+		dragGroup = void 0;
+	}
+	function handleMouseup() {
+		if (isDragging.value) endDrag();
+		else if (pendingKey) {
+			pendingKey = "";
+			draggingKey.value = "";
+			dragGroup = void 0;
+		}
+	}
+	const documentTarget = typeof document === "undefined" ? void 0 : document;
+	useEventListener(documentTarget, "mousemove", handleMousemove);
+	useEventListener(documentTarget, "mouseup", handleMouseup);
+	function getItemProps(key) {
+		const item = items.value.find((entry) => entry.key === key);
+		return { onMousedown: (event) => {
+			if (item) handleMousedown(event, item);
+		} };
+	}
+	return {
+		isDragging,
+		draggingKey,
+		getItemProps
+	};
+}
+//#endregion
+export { useTabDrag };

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

@@ -0,0 +1,13 @@
+import { LayoutTabsEmits, LayoutTabsProps, LayoutTabsSlots } from "./interface.js";
+import { SlotsType } from "vue";
+
+//#region src/components/Tabs/index.d.ts
+/**
+ * 标签栏默认高度（px，首帧兜底值，基于默认主题实测取整）。
+ * 真实高度由 LayoutTabs 挂载后用 useElementSize 测量并写回 context，
+ * 此常量仅用于测量回填前的占位，避免 fixed 占位首帧塌陷。
+ */
+declare const DEFAULT_TABS_HEIGHT = 41;
+declare const LayoutTabs: import("vue").DefineSetupFnComponent<LayoutTabsProps, LayoutTabsEmits, SlotsType<LayoutTabsSlots>, LayoutTabsProps, import("vue").PublicProps>;
+//#endregion
+export { DEFAULT_TABS_HEIGHT, LayoutTabs as default };

package/dist/components/Tabs/index.js

@@ -0,0 +1,181 @@
+import { useLayoutBase } from "../../hooks/useLayoutBase.js";
+import { CONTEXT_MENU_ITEMS, getDisabledState, getMenuItemLabel } from "./contextMenu.js";
+import InnerTabs from "./InnerTabs.js";
+import { Fragment, computed, createVNode, defineComponent, ref, watch } from "vue";
+import { unit } from "@gx-design-vue/pro-provider";
+import { classNames } from "@gx-design-vue/pro-utils";
+import { useElementSize } from "@vueuse/core";
+import { Dropdown } from "antdv-next";
+import { GIcon } from "@gx-design-vue/icon";
+//#region src/components/Tabs/index.tsx
+/**
+* 标签栏默认高度（px，首帧兜底值，基于默认主题实测取整）。
+* 真实高度由 LayoutTabs 挂载后用 useElementSize 测量并写回 context，
+* 此常量仅用于测量回填前的占位，避免 fixed 占位首帧塌陷。
+*/
+const DEFAULT_TABS_HEIGHT = 41;
+const LayoutTabs = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const { prefixCls, proClasses, tabsState, tabsHeight, setTabsHeight, contentFullscreen, header, isMobile } = useLayoutBase();
+	const contextMenuActiveKey = ref("");
+	const tabsContentRef = ref();
+	const { height: measuredTabsHeight } = useElementSize(tabsContentRef, void 0, { box: "border-box" });
+	watch(measuredTabsHeight, (height) => {
+		if (height > 0) setTabsHeight?.(height);
+	}, { immediate: true });
+	const dataSource = computed(() => tabsState?.dataSource?.value ?? []);
+	const activeKey = computed(() => tabsState?.activeKey?.value ?? "");
+	const checkIsFixed = computed(() => tabsState?.checkIsFixed ?? (() => false));
+	const isFixed = computed(() => !!props.config?.fixed && !isMobile.value);
+	const tabsClassNames = computed(() => classNames(`${prefixCls.value}-tabs`, proClasses.value.tabs, {
+		[`${prefixCls.value}-tabs-${props.config?.type}`]: props.config?.type,
+		[`${prefixCls.value}-tabs-fixed`]: isFixed.value
+	}));
+	const tabsContentStyle = computed(() => {
+		const style = {};
+		if (isFixed.value) {
+			const tabsWidthValue = tabsState?.tabsWidth?.value;
+			if (tabsWidthValue) style.width = tabsWidthValue;
+			style.top = contentFullscreen.value ? "0" : unit(header.value?.height);
+		}
+		return style;
+	});
+	function buildContextMenuItems(targetName) {
+		const isFixed = checkIsFixed.value(getRouteByName(targetName));
+		return CONTEXT_MENU_ITEMS.map((item) => {
+			if (item.key === "divider") return {
+				type: "divider",
+				key: "divider"
+			};
+			const menuKey = item.key;
+			return {
+				key: menuKey,
+				icon: typeof item.icon === "function" ? item.icon(menuKey === "fixed" ? isFixed : contentFullscreen.value) : item.icon,
+				label: getMenuItemLabel(menuKey, {
+					isFixed,
+					isFullscreen: contentFullscreen.value
+				}),
+				disabled: getDisabledState(menuKey, targetName, dataSource.value, isFixed)
+			};
+		});
+	}
+	function getRouteByName(name) {
+		return dataSource.value.find((item) => item.name === name) ?? {
+			name,
+			meta: {}
+		};
+	}
+	const innerItems = computed(() => dataSource.value.map((route) => ({
+		key: route.name,
+		label: route.meta?.title,
+		closable: !checkIsFixed.value(route) && dataSource.value.length > 1,
+		group: checkIsFixed.value(route) ? "fixed" : "normal"
+	})));
+	function renderTabSlot({ item }) {
+		const route = getRouteByName(item.key);
+		const routeName = route.name;
+		const isFixed = checkIsFixed.value(route);
+		const customRender = slots.tabBarItem?.({ route }) ?? props.tabBarItem?.({ route });
+		return createVNode(Dropdown, {
+			"trigger": ["contextmenu"],
+			"menu": {
+				items: buildContextMenuItems(routeName),
+				onClick: ({ key }) => {
+					tabsState?.handleContextMenuAction?.(key, routeName);
+				}
+			},
+			"onOpenChange": (open) => {
+				contextMenuActiveKey.value = open ? routeName : "";
+			}
+		}, { default: () => [customRender ?? createVNode("div", { "class": classNames(`${prefixCls.value}-tabs-title`) }, [
+			createVNode("span", { "class": `${prefixCls.value}-tabs-title-text` }, [route.meta?.title]),
+			isFixed && createVNode(GIcon, {
+				"type": "Pin",
+				"class": `${prefixCls.value}-tabs-title-pin`,
+				"data-drag-ignore": "true"
+			}, null),
+			dataSource.value.length > 1 && !isFixed && createVNode(GIcon, {
+				"type": "CloseOutlined",
+				"class": `${prefixCls.value}-tabs-title-close`,
+				"data-drag-ignore": "true",
+				"onClick": (event) => {
+					event.stopPropagation();
+					event.preventDefault();
+					tabsState?.handleTabRemove?.(routeName);
+				}
+			}, null)
+		])] });
+	}
+	function renderRightExtra() {
+		if (dataSource.value.length === 0) return null;
+		return createVNode("div", { "class": classNames(`${prefixCls.value}-tabs-extra`) }, [
+			createVNode(GIcon, {
+				"type": "ReloadOutlined",
+				"class": `${prefixCls.value}-tabs-extra-btn`,
+				"onClick": () => {
+					tabsState?.handleContextMenuAction?.("reloadPage", activeKey.value);
+				}
+			}, null),
+			createVNode(Dropdown, { "menu": {
+				items: buildContextMenuItems(activeKey.value),
+				onClick: ({ key }) => {
+					tabsState?.handleContextMenuAction?.(key, activeKey.value);
+				}
+			} }, { default: () => [createVNode(GIcon, {
+				"type": "DownOutlined",
+				"class": `${prefixCls.value}-tabs-extra-btn`
+			}, null)] }),
+			createVNode(GIcon, {
+				"type": contentFullscreen.value ? "FullscreenExitOutlined" : "FullscreenOutlined",
+				"class": `${prefixCls.value}-tabs-extra-btn`,
+				"onClick": () => {
+					tabsState?.handleContextMenuAction?.("fullScreen", activeKey.value);
+				}
+			}, null)
+		]);
+	}
+	return () => {
+		if (!tabsState || dataSource.value.length === 0) return null;
+		return createVNode(Fragment, null, [createVNode("div", { "class": tabsClassNames.value }, [isFixed.value && createVNode("div", {
+			"class": `${prefixCls.value}-tabs-placeholder`,
+			"style": { height: unit(tabsHeight?.value ?? 41) }
+		}, null), createVNode("div", {
+			"ref": tabsContentRef,
+			"class": classNames(`${prefixCls.value}-tabs-content`),
+			"style": tabsContentStyle.value
+		}, [createVNode(InnerTabs, {
+			"items": innerItems.value,
+			"activeKey": activeKey.value,
+			"draggable": props.config?.draggable !== false,
+			"onChange": (key) => {
+				tabsState?.handleTabClick?.(key);
+			},
+			"onReorder": (fromKey, toKey) => {
+				const fromItem = innerItems.value.find((item) => item.key === fromKey);
+				if (fromItem?.group) tabsState?.reorderWithinGroup?.(fromKey, toKey, fromItem.group);
+			}
+		}, {
+			tab: renderTabSlot,
+			extra: renderRightExtra
+		})])])]);
+	};
+}, {
+	props: {
+		config: {
+			type: Object,
+			required: false
+		},
+		tabBarItem: {
+			type: Function,
+			required: false
+		}
+	},
+	emits: [
+		"tabsChange",
+		"reloadPage",
+		"contentFullscreenChange"
+	],
+	name: "LayoutTabs",
+	inheritAttrs: false
+});
+//#endregion
+export { DEFAULT_TABS_HEIGHT, LayoutTabs as default };

package/dist/components/Tabs/interface.d.ts

@@ -0,0 +1,74 @@
+import { LayoutMenuRoute, LayoutTabsConfig } from "../../interface.js";
+import { CustomRender } from "@gx-design-vue/pro-utils";
+
+//#region src/components/Tabs/interface.d.ts
+/** 页签分组（拖拽排序约束：组内可拖，不跨级） */
+type TabGroup = 'fixed' | 'normal';
+/** 单个页签数据 */
+interface InnerTabItem {
+  /** 唯一标识 */
+  key: string;
+  /** 标题（string / VNode），未提供 #tab slot 时默认渲染 */
+  label?: any;
+  /** 是否显示关闭按钮，默认 true */
+  closable?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 所属分组（拖拽排序时约束组内，不跨级） */
+  group?: TabGroup;
+}
+interface InnerTabsEmits {
+  'update:activeKey': (key: string) => any;
+  'change': (key: string) => any;
+  'close': (key: string) => any;
+  /** 拖拽排序：从 fromKey 移到 toKey 位置（同组内） */
+  'reorder': (fromKey: string, toKey: string) => any;
+}
+interface InnerTabsEmitsProps {
+  'onUpdate:activeKey'?: InnerTabsEmits['update:activeKey'];
+  onChange?: InnerTabsEmits['change'];
+  onClose?: InnerTabsEmits['close'];
+  onReorder?: InnerTabsEmits['reorder'];
+}
+interface InnerTabsProps extends InnerTabsEmitsProps {
+  prefixCls?: string;
+  /** 页签列表 */
+  items?: InnerTabItem[];
+  /** 当前激活 key（支持 v-model:activeKey） */
+  activeKey?: string;
+  /** 是否开启拖拽排序，默认 true */
+  draggable?: boolean;
+}
+interface InnerTabsSlots {
+  /** 自定义单个页签内容（如上层挂右键菜单 / 图标） */
+  tab?: (props: {
+    item: InnerTabItem;
+    active: boolean;
+  }) => any;
+  /** 导航栏右侧额外区域 */
+  extra?: () => any;
+}
+interface LayoutTabsEmits {
+  'tabsChange': (tabs: LayoutMenuRoute[]) => void;
+  'reloadPage': () => void;
+  'contentFullscreenChange': (fullscreen: boolean) => void;
+}
+interface LayoutTabsEmitsProps {
+  onTabsChange?: LayoutTabsEmits['tabsChange'];
+  onReloadPage?: LayoutTabsEmits['reloadPage'];
+  onContentFullscreenChange?: LayoutTabsEmits['contentFullscreenChange'];
+}
+interface LayoutTabsProps extends LayoutTabsEmitsProps {
+  config?: LayoutTabsConfig;
+  /** 标签项自定义（等价 #tabBarItem slot） */
+  tabBarItem?: (slotProps: {
+    route: LayoutMenuRoute;
+  }) => CustomRender;
+}
+interface LayoutTabsSlots {
+  tabBarItem?: (props: {
+    route: LayoutMenuRoute;
+  }) => any;
+}
+//#endregion
+export { InnerTabItem, InnerTabsEmits, InnerTabsEmitsProps, InnerTabsProps, InnerTabsSlots, LayoutTabsEmits, LayoutTabsEmitsProps, LayoutTabsProps, LayoutTabsSlots, TabGroup };

package/dist/components/Tabs/interface.js

@@ -0,0 +1 @@
+export {};