@gx-design-vue/pro-layout 0.1.0-alpha.11 → 0.1.0-alpha.13

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

@@ -3,6 +3,12 @@ import * as _$vue from "vue";
 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: _$vue.DefineSetupFnComponent<LayoutTabsProps, LayoutTabsEmits, SlotsType<LayoutTabsSlots>, LayoutTabsProps, _$vue.PublicProps>;
 //#endregion
-export { LayoutTabs as default };
+export { DEFAULT_TABS_HEIGHT, LayoutTabs as default };

package/dist/components/Tabs/index.js

@@ -1,21 +1,30 @@
 import { useLayoutBase } from "../../hooks/useLayoutBase.js";
 import { CONTEXT_MENU_ITEMS, getDisabledState, getMenuItemLabel } from "./contextMenu.js";
-import { Fragment, computed, createVNode, defineComponent, ref } from "vue";
+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 { Dropdown, Tabs } from "antdv-next";
+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, contentFullscreen, header, isMobile } = useLayoutBase();
+	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 tabsType = computed(() => {
-		if (props.config?.type === "card") return "card";
-		return "line";
-	});
 	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,
@@ -55,7 +64,14 @@ const LayoutTabs = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			meta: {}
 		};
 	}
-	function renderTabTitle(route) {
+	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 });
@@ -74,11 +90,13 @@ const LayoutTabs = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			createVNode("span", { "class": `${prefixCls.value}-tabs-title-text` }, [route.meta?.title]),
 			isFixed && createVNode(GIcon, {
 				"type": "Pin",
-				"class": `${prefixCls.value}-tabs-title-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();
@@ -87,11 +105,6 @@ const LayoutTabs = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			}, null)
 		])] });
 	}
-	const tabItems = computed(() => dataSource.value.map((route) => ({
-		key: route.name,
-		label: renderTabTitle(route),
-		closable: !checkIsFixed.value(route)
-	})));
 	function renderRightExtra() {
 		if (dataSource.value.length === 0) return null;
 		return createVNode("div", { "class": classNames(`${prefixCls.value}-tabs-extra`) }, [
@@ -122,29 +135,31 @@ const LayoutTabs = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	}
 	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` }, null), createVNode("div", {
+		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(Tabs, {
-			"type": tabsType.value,
-			"hideAdd": true,
+		}, [createVNode(InnerTabs, {
+			"items": innerItems.value,
 			"activeKey": activeKey.value,
-			"items": tabItems.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);
 			}
-		}, { rightExtra: renderRightExtra })])])]);
+		}, {
+			tab: renderTabSlot,
+			extra: renderRightExtra
+		})])])]);
 	};
 }, {
 	props: {
-		items: {
-			type: Array,
-			required: false
-		},
-		tabs: {
-			type: Array,
-			required: false
-		},
 		config: {
 			type: Object,
 			required: false
@@ -163,4 +178,4 @@ const LayoutTabs = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	inheritAttrs: false
 });
 //#endregion
-export { LayoutTabs as default };
+export { DEFAULT_TABS_HEIGHT, LayoutTabs as default };

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

@@ -1,8 +1,53 @@
 import { LayoutMenuRoute, LayoutTabsConfig } from "../../interface.js";
 import { CustomRender } from "@gx-design-vue/pro-utils";
-import { Tab } from "antdv-next/dist/tabs";
 
 //#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;
@@ -14,10 +59,6 @@ interface LayoutTabsEmitsProps {
   onContentFullscreenChange?: LayoutTabsEmits['contentFullscreenChange'];
 }
 interface LayoutTabsProps extends LayoutTabsEmitsProps {
-  /** 已转换好的 antdv-next 标签数据 */
-  items?: Tab[];
-  /** 原始标签路由 */
-  tabs?: LayoutMenuRoute[];
   config?: LayoutTabsConfig;
   /** 标签项自定义（等价 #tabBarItem slot） */
   tabBarItem?: (slotProps: {
@@ -30,4 +71,4 @@ interface LayoutTabsSlots {
   }) => any;
 }
 //#endregion
-export { LayoutTabsEmits, LayoutTabsEmitsProps, LayoutTabsProps, LayoutTabsSlots };
+export { InnerTabItem, InnerTabsEmits, InnerTabsEmitsProps, InnerTabsProps, InnerTabsSlots, LayoutTabsEmits, LayoutTabsEmitsProps, LayoutTabsProps, LayoutTabsSlots, TabGroup };

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

@@ -0,0 +1,34 @@
+import * as _$vue from "vue";
+import { GetDefaultToken } from "antdv-next/dist/theme/internal";
+
+//#region src/components/Tabs/style/index.d.ts
+/**
+ * InnerTabs 组件级 Token —— 仅承载尺寸相关字段；
+ * 卡片配色复用全局扁平 token `tabsColor*`（见 pro-provider/theme），保持与 layout 主题一致。
+ */
+interface ComponentToken {
+  /** 单个页签高度 */
+  itemHeight: number | string;
+  /** 页签横向内边距 */
+  itemPaddingInline: number | string;
+  /** 页签纵向内边距 */
+  itemPaddingBlock: number | string;
+  /** 页签间距 */
+  itemGap: number | string;
+  /** 页签圆角 */
+  itemBorderRadius: number | string;
+  /** 标题字号 */
+  titleFontSize: number;
+  /** 标题最大宽度（超出省略） */
+  titleMaxWidth: number | string;
+  /** 关闭按钮尺寸 */
+  closeIconSize: number | string;
+  /** 导航栏纵向内边距 */
+  navPaddingBlock: number | string;
+  /** 导航栏横向内边距 */
+  navPaddingInline: number | string;
+}
+declare const prepareComponentToken: GetDefaultToken<'InnerTabs'>;
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, _default as default, prepareComponentToken };

package/dist/components/Tabs/style/index.js

@@ -0,0 +1,140 @@
+import { proGenStyleHooks } from "@gx-design-vue/pro-provider";
+import { unit as unit$1 } from "@antdv-next/cssinjs";
+//#region src/components/Tabs/style/index.ts
+const prepareComponentToken = (token) => ({
+	itemHeight: token.controlHeightSM,
+	itemPaddingInline: token.paddingXS,
+	itemPaddingBlock: 2,
+	itemGap: token.marginXS,
+	itemBorderRadius: token.borderRadiusSM,
+	titleFontSize: token.fontSizeSM,
+	titleMaxWidth: 120,
+	closeIconSize: token.fontSizeSM,
+	navPaddingBlock: token.paddingXXS,
+	navPaddingInline: token.paddingSM
+});
+/**
+* InnerTabs 样式：横向卡片式页签条（default / active 双态），无底部 ink-bar。
+* 颜色取自扁平 token `tabsColor*`；mask-image 溢出淡出由组件内联 style 动态控制。
+*/
+const genInnerTabsStyle = (token) => {
+	const { componentCls } = token;
+	return { [componentCls]: {
+		display: "flex",
+		minWidth: 0,
+		[`${componentCls}-nav`]: {
+			position: "relative",
+			display: "flex",
+			flex: "1 1 auto",
+			minWidth: 0,
+			alignItems: "center",
+			paddingBlock: token.navPaddingBlock
+		},
+		[`${componentCls}-nav-wrap`]: {
+			position: "relative",
+			flex: "1 1 auto",
+			minWidth: 0,
+			marginBlock: token.calc(token.marginXXS).mul(-1).equal(),
+			paddingBlock: token.marginXXS,
+			overflowX: "auto",
+			overflowY: "hidden",
+			overflowAnchor: "none",
+			whiteSpace: "nowrap",
+			scrollbarWidth: "none",
+			msOverflowStyle: "none",
+			"&::-webkit-scrollbar": { display: "none" }
+		},
+		[`${componentCls}-nav-list`]: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: token.itemGap,
+			overflowAnchor: "none"
+		},
+		[`${componentCls}-tab`]: {
+			display: "inline-flex",
+			alignItems: "center",
+			flex: "none",
+			boxSizing: "border-box",
+			height: token.itemHeight,
+			paddingInline: token.itemPaddingInline,
+			paddingBlock: token.itemPaddingBlock,
+			fontSize: token.titleFontSize,
+			lineHeight: 1,
+			color: token.tabsColorText,
+			backgroundColor: token.tabsColorBgContainer,
+			border: `${unit$1(token.lineWidth)} ${token.lineType} ${token.tabsColorBorder}`,
+			borderRadius: token.itemBorderRadius,
+			cursor: "pointer",
+			userSelect: "none",
+			transition: [
+				`color ${token.motionDurationMid} ${token.motionEaseInOut}`,
+				`background-color ${token.motionDurationMid} ${token.motionEaseInOut}`,
+				`border-color ${token.motionDurationMid} ${token.motionEaseInOut}`,
+				`box-shadow ${token.motionDurationMid} ${token.motionEaseInOut}`
+			].join(", "),
+			"&:hover": {
+				color: token.tabsColorTextHover,
+				borderColor: token.tabsColorBorderHover,
+				backgroundColor: token.tabsColorBgContainerHover
+			},
+			[`&${componentCls}-tab-active`]: {
+				color: token.tabsColorTextActive,
+				borderColor: token.tabsColorBorderActive,
+				backgroundColor: token.tabsColorBgContainerActive,
+				"&:hover": {
+					color: token.tabsColorTextActive,
+					borderColor: token.tabsColorBorderActive,
+					backgroundColor: token.tabsColorBgContainerActive
+				}
+			},
+			[`&${componentCls}-tab-disabled`]: {
+				color: token.colorTextDisabled,
+				cursor: "not-allowed"
+			},
+			[`&${componentCls}-tab-dragging`]: {
+				zIndex: 1,
+				cursor: "grabbing",
+				color: token.tabsColorText,
+				backgroundColor: token.colorBgElevated,
+				borderColor: token.tabsColorBorderHover,
+				boxShadow: token.boxShadowSecondary,
+				opacity: 1,
+				transition: "none"
+			}
+		},
+		[`${componentCls}-tab-btn`]: {
+			display: "inline-block",
+			maxWidth: token.titleMaxWidth,
+			overflow: "hidden",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis",
+			verticalAlign: "middle",
+			transition: `color ${token.motionDurationMid}`
+		},
+		[`${componentCls}-tab-remove`]: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			marginInlineStart: token.marginXXS,
+			fontSize: token.closeIconSize,
+			lineHeight: 1,
+			color: token.tabsColorIcon,
+			cursor: "pointer",
+			transition: `all ${token.motionDurationMid}`,
+			"&:hover": { color: token.tabsColorIconHover }
+		},
+		[`${componentCls}-tab-active ${componentCls}-tab-remove`]: {
+			color: token.tabsColorIconActive,
+			"&:hover": { color: token.tabsColorIconActive }
+		},
+		[`${componentCls}-extra`]: {
+			display: "inline-flex",
+			flex: "none",
+			alignItems: "center",
+			marginInlineStart: token.marginSM
+		}
+	} };
+};
+var style_default = proGenStyleHooks("InnerTabs", genInnerTabsStyle, prepareComponentToken);
+//#endregion
+export { style_default as default, prepareComponentToken };

package/dist/context/index.d.ts

@@ -34,6 +34,8 @@ interface LayoutContextProps {
   cssVarCls: ComputedRef<string>;
   rootCls: ComputedRef<string>;
   hasFooterToolbar: Ref<boolean>;
+  tabsHeight: Ref<number>;
+  setTabsHeight: (value: number) => void;
   /**
    * PageContainer 级别的面包屑 slot 覆盖。
    * 当 position='header' 时，PageContainer 的 breadcrumb slot 通过此 ref 传到 Header。

package/dist/defaultConfig.js

@@ -19,7 +19,8 @@ const DEFAULT_LAYOUT_CONFIG = {
 	},
 	breadcrumb: {
 		placement: "header",
-		showHome: true
+		showHome: true,
+		homePath: "/"
 	},
 	tabsConfig: {
 		type: "button",