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

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

@@ -0,0 +1,7 @@
+import { LayoutSiderEmits, LayoutSiderProps, LayoutSiderSlots } from "./interface.js";
+import { SlotsType } from "vue";
+
+//#region src/components/Sider/index.d.ts
+declare const LayoutSider: import("vue").DefineSetupFnComponent<LayoutSiderProps, LayoutSiderEmits, SlotsType<LayoutSiderSlots>, LayoutSiderProps, import("vue").PublicProps>;
+//#endregion
+export { LayoutSider as default };

package/dist/components/Sider/index.js

@@ -0,0 +1,206 @@
+import { useLayoutBase } from "../../hooks/useLayoutBase.js";
+import LayoutCollapseButton from "../CollapseButton/index.js";
+import LayoutLogo from "../Logo/index.js";
+import ProMenu from "../Menu/index.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, nextTick, onMounted, reactive, shallowRef } from "vue";
+import { unit } from "@gx-design-vue/pro-provider";
+import { classNames } from "@gx-design-vue/pro-utils";
+import { useResizeObserver } from "@vueuse/core";
+import { Drawer, LayoutSider as LayoutSider$1 } from "antdv-next";
+import { GScrollbar } from "@gx-design-vue/scrollbar";
+//#region src/components/Sider/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const LayoutSider = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const { sider, header, layout, menuState, prefixCls, cssVarCls, rootCls, collapseConfig, collapsed, isMobile, logoConfig, logoTitle, selectedKeys, openKeys, proClasses, proStyles, siderWidth, collapsedWidth } = useLayoutBase(props);
+	/** GScrollbar 组件引用，用于获取滚动容器 DOM */
+	const scrollbarRef = shallowRef();
+	/** 滚动阴影状态：上下边缘是否可继续滚动 */
+	const scrollShadow = reactive({
+		showTop: false,
+		showBottom: false
+	});
+	/** 根据滚动容器当前状态更新阴影显隐 */
+	function updateScrollShadow() {
+		const el = scrollbarRef.value?.wrapRef;
+		if (!el) return;
+		scrollShadow.showTop = el.scrollTop > 0;
+		scrollShadow.showBottom = el.scrollTop + el.clientHeight < el.scrollHeight - 2;
+	}
+	onMounted(() => {
+		nextTick(() => updateScrollShadow());
+	});
+	const scrollbarWrapEl = computed(() => scrollbarRef.value?.wrapRef);
+	const scrollbarViewEl = computed(() => scrollbarWrapEl.value?.firstElementChild);
+	useResizeObserver(scrollbarWrapEl, () => updateScrollShadow());
+	useResizeObserver(scrollbarViewEl, () => updateScrollShadow());
+	const siderMenus = computed(() => menuState?.siderMenus.value ?? []);
+	const siderClassNames = computed(() => classNames(`${prefixCls.value}-sider`, proClasses.value.sider, { [`${prefixCls.value}-sider-fixed`]: sider.value?.fixed }));
+	const siderChildrenClassNames = computed(() => classNames(`${prefixCls.value}-sider-children`, proClasses.value.siderChildren));
+	const siderHeaderClassNames = computed(() => classNames(`${prefixCls.value}-sider-header`, proClasses.value.siderHeader));
+	const siderFooterClassNames = computed(() => classNames(`${prefixCls.value}-sider-footer`, proClasses.value.siderFooter));
+	function handleToggleCollapsed() {
+		emit("update:collapsed", !collapsed.value);
+	}
+	function handleLogoClick() {
+		emit("logoClick");
+	}
+	function handleSelect(info) {
+		emit("select", info);
+	}
+	function handleOpenChange(keys) {
+		emit("openChange", keys);
+	}
+	function handleSiderCollapse(collapsedValue) {
+		emit("update:collapsed", collapsedValue);
+	}
+	function handleBreakpoint(broken) {
+		if (broken) emit("update:collapsed", true);
+	}
+	function renderSiderContent() {
+		const logoRender = slots.logo || logoConfig.value?.render;
+		const collapseRender = slots.collapse || collapseConfig.value?.render;
+		const collapseIconRender = slots.collapseIcon || collapseConfig.value?.icon;
+		return createVNode(Fragment, null, [
+			[
+				"side",
+				"mix",
+				"wide"
+			].includes(layout.value ?? "") && logoConfig.value && createVNode("div", {
+				"class": siderHeaderClassNames.value,
+				"style": {
+					...proStyles.value.siderHeader,
+					...["mix", "wide"].includes(layout.value ?? "") && header.value?.height ? { height: unit(header.value.height) } : {}
+				}
+			}, [typeof logoRender === "function" ? logoRender?.({
+				collapsed: collapsed.value,
+				title: logoTitle.value
+			}) : createVNode(LayoutLogo, { "onClick": handleLogoClick }, slots)]),
+			slots.menuHeader?.({
+				collapsed: collapsed.value,
+				isMobile: isMobile.value
+			}),
+			createVNode("div", { "class": `${prefixCls.value}-sider-content` }, [slots.menuExtra?.(), createVNode(GScrollbar, {
+				"ref": scrollbarRef,
+				"wrapClass": `${prefixCls.value}-sider-menu-container`,
+				"viewClass": `${prefixCls.value}-sider-menu-view`,
+				"onScroll": updateScrollShadow,
+				"data-top-shadow": scrollShadow.showTop,
+				"data-bottom-shadow": scrollShadow.showBottom
+			}, { default: () => [createVNode(ProMenu, {
+				"menus": siderMenus.value,
+				"selectedKeys": selectedKeys.value,
+				"openKeys": openKeys.value,
+				"collapsed": collapsed.value,
+				"getScrollContainer": () => scrollbarRef.value?.wrapRef,
+				"onSelect": handleSelect,
+				"onOpenChange": handleOpenChange
+			}, {
+				menuItemIcon: slots.menuItemIcon,
+				menuItemLabel: slots.menuItemLabel,
+				menuItemExtra: slots.menuItemExtra
+			})] })]),
+			slots.menuFooter && createVNode("div", {
+				"class": siderFooterClassNames.value,
+				"style": proStyles.value.siderFooter
+			}, [slots.menuFooter({
+				collapsed: collapsed.value,
+				isMobile: isMobile.value
+			})]),
+			collapseConfig.value && collapseConfig.value.placement === "sider" && (collapseRender?.({ collapsed: collapsed.value }) ?? createVNode(LayoutCollapseButton, {
+				"collapsed": collapsed.value,
+				"onClick": handleToggleCollapsed
+			}, { icon: collapseIconRender }))
+		]);
+	}
+	function renderSiderChildren() {
+		return createVNode("div", {
+			"class": siderChildrenClassNames.value,
+			"style": proStyles.value.siderChildren
+		}, [renderSiderContent()]);
+	}
+	return () => {
+		let _slot2;
+		const breakpoint = sider.value?.breakpoint || void 0;
+		if (isMobile.value) {
+			let _slot;
+			return createVNode(Drawer, {
+				"maskClosable": true,
+				"open": !collapsed.value,
+				"closable": false,
+				"placement": "left",
+				"rootClass": classNames(cssVarCls.value, rootCls.value),
+				"class": siderClassNames.value,
+				"style": {
+					padding: 0,
+					height: "100vh",
+					...proStyles.value.sider
+				},
+				"bodyStyle": {
+					height: "100vh",
+					padding: 0,
+					display: "flex",
+					flexDirection: "row"
+				},
+				"width": siderWidth.value,
+				"onClose": () => emit("update:collapsed", true)
+			}, _isSlot(_slot = renderSiderChildren()) ? _slot : { default: () => [_slot] });
+		}
+		return createVNode(Fragment, null, [sider.value?.fixed && createVNode("div", { "style": {
+			width: `${unit(siderWidth.value)}`,
+			overflow: "hidden",
+			flex: `0 0 ${unit(siderWidth.value)}`,
+			maxWidth: `${unit(siderWidth.value)}`,
+			minWidth: `${unit(siderWidth.value)}`,
+			transition: "all 0.2s ease 0s"
+		} }, null), createVNode(LayoutSider$1, {
+			"collapsible": true,
+			"collapsed": collapsed.value,
+			"width": sider.value?.width,
+			"collapsedWidth": collapsedWidth.value,
+			"breakpoint": breakpoint ?? void 0,
+			"class": siderClassNames.value,
+			"style": proStyles.value.sider,
+			"onCollapse": handleSiderCollapse,
+			"onBreakpoint": handleBreakpoint
+		}, _isSlot(_slot2 = renderSiderChildren()) ? _slot2 : { default: () => [_slot2] })]);
+	};
+}, {
+	props: {
+		proClasses: {
+			type: Object,
+			required: false
+		},
+		proStyles: {
+			type: Object,
+			required: false
+		},
+		"onUpdate:collapsed": {
+			type: Function,
+			required: false
+		},
+		onSelect: {
+			type: Function,
+			required: false
+		},
+		onOpenChange: {
+			type: Function,
+			required: false
+		},
+		onLogoClick: {
+			type: Function,
+			required: false
+		}
+	},
+	emits: [
+		"update:collapsed",
+		"select",
+		"openChange",
+		"logoClick"
+	],
+	name: "LayoutSider",
+	inheritAttrs: false
+});
+//#endregion
+export { LayoutSider as default };

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

@@ -0,0 +1,39 @@
+import { LayoutClassNamesType, LayoutMenuItemSlotProps, LayoutSelectInfo, LayoutSiderSlotProps, LayoutStylesType } from "../../interface.js";
+
+//#region src/components/Sider/interface.d.ts
+interface LayoutSiderEmits {
+  'update:collapsed': (collapsed: boolean) => void;
+  'select': (info: LayoutSelectInfo) => void;
+  'openChange': (keys: string[]) => void;
+  'logoClick': () => void;
+}
+interface LayoutSiderEmitsProps {
+  'onUpdate:collapsed'?: LayoutSiderEmits['update:collapsed'];
+  onSelect?: LayoutSiderEmits['select'];
+  onOpenChange?: LayoutSiderEmits['openChange'];
+  onLogoClick?: LayoutSiderEmits['logoClick'];
+}
+interface LayoutSiderProps extends LayoutSiderEmitsProps {
+  proClasses?: LayoutClassNamesType;
+  proStyles?: LayoutStylesType;
+}
+interface LayoutSiderSlots {
+  logo?: (props: {
+    collapsed: boolean;
+    title?: string;
+  }) => any;
+  collapse?: (props: {
+    collapsed: boolean;
+  }) => any;
+  collapseIcon?: (props: {
+    collapsed: boolean;
+  }) => any;
+  menuHeader?: (props: LayoutSiderSlotProps) => any;
+  menuFooter?: (props: LayoutSiderSlotProps) => any;
+  menuExtra?: () => any;
+  menuItemIcon?: (props: LayoutMenuItemSlotProps) => any;
+  menuItemLabel?: (props: LayoutMenuItemSlotProps) => any;
+  menuItemExtra?: (props: LayoutMenuItemSlotProps) => any;
+}
+//#endregion
+export { LayoutSiderEmits, LayoutSiderEmitsProps, LayoutSiderProps, LayoutSiderSlots };

package/dist/components/Sider/interface.js

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

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

@@ -0,0 +1,7 @@
+import { InnerTabsEmits, InnerTabsProps, InnerTabsSlots } from "./interface.js";
+import { SlotsType } from "vue";
+
+//#region src/components/Tabs/InnerTabs.d.ts
+declare const InnerTabs: import("vue").DefineSetupFnComponent<InnerTabsProps, InnerTabsEmits, SlotsType<InnerTabsSlots>, InnerTabsProps, import("vue").PublicProps>;
+//#endregion
+export { InnerTabs as default };

package/dist/components/Tabs/InnerTabs.js

@@ -0,0 +1,117 @@
+import { useTabDrag } from "./hooks/useTabDrag.js";
+import style_default from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps, nextTick, ref, watch } from "vue";
+import { classNames } from "@gx-design-vue/pro-utils";
+import { useScroll } from "@vueuse/core";
+import { useBaseConfig } from "antdv-next/config-provider/context";
+import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
+import { GIcon } from "@gx-design-vue/icon";
+//#region src/components/Tabs/InnerTabs.tsx
+/** 溢出时两端透明裁切宽度（px） */
+const MASK_GUTTER = 16;
+const MASK_COLOR = "#fff";
+const InnerTabs = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
+	const { prefixCls } = useBaseConfig("pro-inner-tabs", props);
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const scrollRef = ref();
+	const items = computed(() => props.items ?? []);
+	const activeKey = computed(() => props.activeKey ?? "");
+	const { arrivedState } = useScroll(scrollRef);
+	const { draggingKey: tabDraggingKey, getItemProps } = useTabDrag({
+		items,
+		scrollEl: scrollRef,
+		onReorder: (fromKey, toKey) => emit("reorder", fromKey, toKey),
+		enabled: computed(() => props.draggable !== false)
+	});
+	const wrapStyle = computed(() => {
+		const atLeft = arrivedState.left;
+		const atRight = arrivedState.right;
+		if (atLeft && atRight) return {};
+		const maskImage = !atLeft && !atRight ? `linear-gradient(90deg, transparent, ${MASK_COLOR} ${MASK_GUTTER}px, ${MASK_COLOR} calc(100% - ${MASK_GUTTER}px), transparent)` : !atLeft ? `linear-gradient(90deg, transparent, ${MASK_COLOR} ${MASK_GUTTER}px)` : `linear-gradient(90deg, ${MASK_COLOR} calc(100% - ${MASK_GUTTER}px), transparent)`;
+		return {
+			WebkitMaskImage: maskImage,
+			maskImage
+		};
+	});
+	function handleTabClick(item) {
+		if (item.disabled || item.key === activeKey.value) return;
+		emit("update:activeKey", item.key);
+		emit("change", item.key);
+	}
+	function handleRemoveClick(event, item) {
+		event.stopPropagation();
+		event.preventDefault();
+		emit("close", item.key);
+	}
+	function renderItem(item) {
+		const active = item.key === activeKey.value;
+		const closable = item.closable !== false;
+		const customTab = slots.tab?.({
+			item,
+			active
+		});
+		const dragging = tabDraggingKey.value === item.key;
+		return createVNode("div", mergeProps({
+			"key": item.key,
+			"class": classNames(`${prefixCls.value}-tab`, {
+				[`${prefixCls.value}-tab-active`]: active,
+				[`${prefixCls.value}-tab-disabled`]: item.disabled,
+				[`${prefixCls.value}-tab-dragging`]: dragging
+			}),
+			"data-key": item.key,
+			"onClick": () => handleTabClick(item)
+		}, getItemProps(item.key)), [customTab ?? createVNode(Fragment, null, [createVNode("span", { "class": `${prefixCls.value}-tab-btn` }, [item.label]), closable && createVNode(GIcon, {
+			"type": "CloseOutlined",
+			"class": `${prefixCls.value}-tab-close ${prefixCls.value}-tab-remove`,
+			"data-drag-ignore": "true",
+			"onClick": (event) => handleRemoveClick(event, item)
+		}, null)])]);
+	}
+	watch(() => [props.activeKey, items.value.length], () => {
+		nextTick(() => {
+			(scrollRef.value?.querySelector(`[data-key="${activeKey.value}"]`))?.scrollIntoView?.({
+				inline: "nearest",
+				block: "nearest"
+			});
+		});
+	}, { immediate: true });
+	return () => {
+		if (items.value.length === 0) return null;
+		return createVNode("div", { "class": classNames(prefixCls.value, hashId.value, cssVarCls.value, rootCls.value) }, [createVNode("div", { "class": `${prefixCls.value}-nav` }, [createVNode("div", {
+			"ref": scrollRef,
+			"class": `${prefixCls.value}-nav-wrap`,
+			"style": wrapStyle.value
+		}, [createVNode("div", { "class": `${prefixCls.value}-nav-list` }, [items.value.map((item) => renderItem(item))])]), slots.extra && createVNode("div", { "class": `${prefixCls.value}-extra` }, [slots.extra()])])]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		items: {
+			type: Array,
+			required: false
+		},
+		activeKey: {
+			type: String,
+			required: false
+		},
+		draggable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	},
+	emits: [
+		"update:activeKey",
+		"change",
+		"close",
+		"reorder"
+	],
+	name: "InnerTabs",
+	inheritAttrs: false
+});
+//#endregion
+export { InnerTabs as default };

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

@@ -0,0 +1,41 @@
+import { LayoutMenuRoute } from "../../interface.js";
+import { VNode } from "vue";
+
+//#region src/components/Tabs/contextMenu.d.ts
+/**
+ * 右键菜单操作类型
+ */
+type TabsMenuType = 'fixed' | 'close' | 'fullScreen' | 'reloadPage' | 'newBlank' | 'closeLeftTabs' | 'closeRightTabs' | 'closeOthersTabs' | 'closeAllTabs';
+/**
+ * 菜单项配置
+ */
+interface TabsMenuItem {
+  /** 唯一标识 */
+  key: TabsMenuType | 'divider';
+  /** 显示标签 */
+  label?: string;
+  /** 图标（VNode 或函数） */
+  icon?: VNode | ((value: boolean) => VNode);
+}
+/**
+ * 静态菜单项列表（含分隔符）
+ */
+declare const CONTEXT_MENU_ITEMS: TabsMenuItem[];
+/**
+ * 判断菜单项是否应禁用
+ *
+ * @param menuKey - 菜单项 key
+ * @param targetName - 目标标签 name
+ * @param dataSource - 完整标签列表
+ * @param isFixed - 目标标签是否固定
+ */
+declare function getDisabledState(menuKey: TabsMenuType, targetName: string, dataSource: LayoutMenuRoute[], isFixed: boolean): boolean;
+/**
+ * 获取菜单项动态标签（固定/取消固定、全屏/还原）
+ */
+declare function getMenuItemLabel(key: TabsMenuType, options: {
+  isFixed: boolean;
+  isFullscreen: boolean;
+}): string;
+//#endregion
+export { CONTEXT_MENU_ITEMS, TabsMenuItem, TabsMenuType, getDisabledState, getMenuItemLabel };

package/dist/components/Tabs/contextMenu.js

@@ -0,0 +1,89 @@
+import { h } from "vue";
+import { GIcon } from "@gx-design-vue/icon";
+//#region src/components/Tabs/contextMenu.ts
+/**
+* 静态菜单项列表（含分隔符）
+*/
+const CONTEXT_MENU_ITEMS = [
+	{
+		key: "fixed",
+		label: "置顶",
+		icon: (value) => h(GIcon, { type: value ? "PinOff" : "Pin" })
+	},
+	{
+		key: "close",
+		label: "关闭",
+		icon: h(GIcon, { type: "CloseOutlined" })
+	},
+	{
+		key: "fullScreen",
+		icon: (value) => h(GIcon, { type: value ? "FullscreenExitOutlined" : "FullscreenOutlined" })
+	},
+	{
+		key: "reloadPage",
+		label: "重新加载",
+		icon: h(GIcon, { type: "ReloadOutlined" })
+	},
+	{
+		key: "newBlank",
+		label: "新窗口打开",
+		icon: h(GIcon, { type: "ExportOutlined" })
+	},
+	{ key: "divider" },
+	{
+		key: "closeLeftTabs",
+		label: "关闭左侧",
+		icon: h(GIcon, { type: "VerticalRightOutlined" })
+	},
+	{
+		key: "closeRightTabs",
+		label: "关闭右侧",
+		icon: h(GIcon, { type: "VerticalLeftOutlined" })
+	},
+	{ key: "divider" },
+	{
+		key: "closeOthersTabs",
+		label: "关闭其他",
+		icon: h(GIcon, {
+			type: "VerticalAlignMiddleOutlined",
+			rotate: 90
+		})
+	},
+	{
+		key: "closeAllTabs",
+		label: "关闭全部",
+		icon: h(GIcon, { type: "SwapOutlined" })
+	}
+];
+/**
+* 判断菜单项是否应禁用
+*
+* @param menuKey - 菜单项 key
+* @param targetName - 目标标签 name
+* @param dataSource - 完整标签列表
+* @param isFixed - 目标标签是否固定
+*/
+function getDisabledState(menuKey, targetName, dataSource, isFixed) {
+	const activeIndex = dataSource.findIndex((item) => item.name === targetName);
+	switch (menuKey) {
+		case "close": return isFixed;
+		case "closeOthersTabs": return dataSource.filter((item, index) => index !== activeIndex && !isFixedTab(item)).length === 0;
+		case "closeLeftTabs": return dataSource.filter((item, index) => index < activeIndex && !isFixedTab(item)).length === 0;
+		case "closeRightTabs": return dataSource.filter((item, index) => index > activeIndex && !isFixedTab(item)).length === 0;
+		case "closeAllTabs": return dataSource.filter((item) => !isFixedTab(item)).length === 0;
+		default: return false;
+	}
+}
+/**
+* 获取菜单项动态标签（固定/取消固定、全屏/还原）
+*/
+function getMenuItemLabel(key, options) {
+	if (key === "fixed") return options.isFixed ? "取消置顶" : "置顶";
+	if (key === "fullScreen") return options.isFullscreen ? "还原" : "最大化";
+	return CONTEXT_MENU_ITEMS.find((i) => i.key === key)?.label ?? "";
+}
+function isFixedTab(route) {
+	return route?.meta?.tabState?.fixed === true;
+}
+//#endregion
+export { CONTEXT_MENU_ITEMS, getDisabledState, getMenuItemLabel };

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

@@ -0,0 +1,24 @@
+//#region src/components/Tabs/hooks/flipAnimate.d.ts
+interface FlipAnimateOptions {
+  /** 动画时长 ms，默认 200 */
+  duration?: number;
+  /** 缓动函数，默认 cubic-bezier(0.2,0,0,1)（对齐 dnd-kit motionEase） */
+  easing?: string;
+}
+interface FlipEntry {
+  key: string;
+  el: HTMLElement;
+}
+/**
+ * FLIP 动画 —— 精简复刻 `@dnd-kit/dom` 的 `sortable#animate`。
+ *
+ * 用 Web Animations API（`element.animate`）+ CSS `translate` 属性（非 transform）：
+ * 1. 取消元素上 transform/translate/scale 的 CSS transition（避免 getBoundingClientRect 取到中间帧）
+ * 2. 测新旧位置算 `delta = prev.left - next.left`
+ * 3. `el.animate({ translate: [delta, 0] }, { duration, easing })`
+ *
+ * 命中 `prefers-reduced-motion` 时 duration 置 0。
+ */
+declare function flipAnimate(entries: FlipEntry[], prevRects: Map<string, DOMRect>, options?: FlipAnimateOptions): void;
+//#endregion
+export { FlipAnimateOptions, FlipEntry, flipAnimate };

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

@@ -0,0 +1,40 @@
+//#region src/components/Tabs/hooks/flipAnimate.ts
+/**
+* FLIP 动画 —— 精简复刻 `@dnd-kit/dom` 的 `sortable#animate`。
+*
+* 用 Web Animations API（`element.animate`）+ CSS `translate` 属性（非 transform）：
+* 1. 取消元素上 transform/translate/scale 的 CSS transition（避免 getBoundingClientRect 取到中间帧）
+* 2. 测新旧位置算 `delta = prev.left - next.left`
+* 3. `el.animate({ translate: [delta, 0] }, { duration, easing })`
+*
+* 命中 `prefers-reduced-motion` 时 duration 置 0。
+*/
+function flipAnimate(entries, prevRects, options = {}) {
+	const { duration = 200, easing = "cubic-bezier(0.2, 0, 0, 1)" } = options;
+	const finalDuration = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : duration;
+	for (const { key, el } of entries) {
+		const prev = prevRects.get(key);
+		if (!prev) continue;
+		for (const animation of el.getAnimations()) {
+			const transitionProperty = animation.transitionProperty;
+			if (transitionProperty === "transform" || transitionProperty === "translate" || transitionProperty === "scale") animation.cancel();
+		}
+		const next = el.getBoundingClientRect();
+		const deltaX = prev.left - next.left;
+		const deltaY = prev.top - next.top;
+		if (deltaX === 0 && deltaY === 0) continue;
+		const animation = el.animate({ translate: [`${deltaX}px ${deltaY}px`, "0px 0px"] }, {
+			duration: finalDuration,
+			easing
+		});
+		const clearTranslate = () => {
+			el.style.translate = "";
+		};
+		if ("addEventListener" in animation) {
+			animation.addEventListener("finish", clearTranslate, { once: true });
+			animation.addEventListener("cancel", clearTranslate, { once: true });
+		}
+	}
+}
+//#endregion
+export { flipAnimate };

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

@@ -0,0 +1,27 @@
+import { Ref } from "vue";
+
+//#region src/components/Tabs/hooks/useAutoScroll.d.ts
+interface UseAutoScrollOptions {
+  /** 边缘激活区域占容器宽度比例，默认 0.2（对齐 dnd-kit detectScrollIntent threshold） */
+  threshold?: number;
+  /** 滚动加速度（基础速度），默认 25 */
+  acceleration?: number;
+  /** 指针超出边缘的容差（px），默认 10 */
+  tolerance?: number;
+  /** 滚动后回调，用于同步拖拽元素和让位元素位置 */
+  onScroll?: () => void;
+}
+/**
+ * 横向自动滚动 —— 精简复刻 `@dnd-kit/dom` 的 `detectScrollIntent` + `Scroller` 思路。
+ *
+ * 指针进入 `scrollEl` 左/右边缘 threshold 区域时，按距边缘的比例计算速度
+ * （越靠边越快）。滚动方向必须先被用户同向移动解锁；如果当前方向已经到达边界，
+ * 则不产生滚动 intent，避免触底后因为鼠标还在边缘区被反复重新激活。
+ */
+declare function useAutoScroll(scrollEl: Ref<HTMLElement | undefined>, getPointerX: () => number | null, options?: UseAutoScrollOptions): {
+  scroll: () => boolean;
+  start: () => void;
+  stop: () => void;
+};
+//#endregion
+export { UseAutoScrollOptions, useAutoScroll };