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

package/dist/ProLayout.js

@@ -156,6 +156,7 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 			emit("contentFullscreenChange", val);
 		}
 	});
+	const tabsHeight = ref(41);
 	function handleSelect(info) {
 		menuState.selectedKeys.value = info.keys;
 		selectedKeysModel.value = info.keys;
@@ -224,7 +225,11 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 			hasFooterToolbar.value = value;
 		},
 		navigate,
-		tabsState
+		tabsState,
+		tabsHeight,
+		setTabsHeight: (value) => {
+			tabsHeight.value = value;
+		}
 	});
 	expose({ tabs: tabsState.tabsController });
 	function resolveLayoutSlots() {

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

@@ -42,8 +42,8 @@ declare const ProAppPage: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   message: PropType<ConfigOptions>;
   notification: PropType<NotificationConfig>;
 }>> & Readonly<{}>, {
-  spinning: AppPageSpinning;
   indicator: CustomRender;
+  spinning: AppPageSpinning;
 }, SlotsType<{
   default: () => any;
   indicator: () => any;

package/dist/components/Breadcrumb/index.js

@@ -3,6 +3,7 @@ import { renderMenuIcon } from "../Menu/iconRender.js";
 import { Fragment, computed, createTextVNode, createVNode, defineComponent } from "vue";
 import { classNames } from "@gx-design-vue/pro-utils";
 import { Dropdown } from "antdv-next";
+import { useRouter } from "vue-router";
 import { GIcon } from "@gx-design-vue/icon";
 //#region src/components/Breadcrumb/index.tsx
 /** 首页占位路由名 */
@@ -24,11 +25,16 @@ function renderBreadcrumbItemContent(prefixCls, route) {
 */
 const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	const { navigate, prefixCls, menuState, breadcrumbConfig } = useLayoutBase();
+	const router = useRouter();
 	const breadcrumbRoutes = computed(() => props.routes ?? menuState?.breadcrumbRoutes.value ?? []);
 	const homeIconConfig = computed(() => {
 		if (props.homeIcon !== void 0) return props.homeIcon;
 		return breadcrumbConfig ? breadcrumbConfig.value?.showHome : void 0;
 	});
+	const homePath = computed(() => {
+		if (props.homePath !== void 0) return props.homePath;
+		return breadcrumbConfig?.value?.homePath ?? "/";
+	});
 	const lookup = computed(() => menuState?.lookup.value);
 	const selectedKeys = computed(() => menuState?.selectedKeys.value ?? []);
 	const displayRoutes = computed(() => {
@@ -48,13 +54,21 @@ const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	* 首页占位项本身没有子节点，不展示 dropdown。
 	*/
 	function getDropdownChildren(route) {
-		if (route.name === BREADCRUMB_HOME_KEY) return void 0;
+		if (route.name === BREADCRUMB_HOME_KEY) {
+			const visibleTopMenus = (menuState?.headerMenus.value ?? menuState?.menus.value ?? []).filter((menu) => !menu.meta?.hideInMenu);
+			return visibleTopMenus.length ? visibleTopMenus : void 0;
+		}
 		const visibleChildren = ((lookup.value?.get(route.name))?.route)?.children?.filter((child) => !child.meta?.hideInMenu);
 		return visibleChildren?.length ? visibleChildren : void 0;
 	}
 	/** 点击面包屑项导航 */
 	function handleItemClick(route, isLast) {
 		if (isLast) return;
+		if (route.name === BREADCRUMB_HOME_KEY) {
+			const targetPath = homePath.value;
+			if (router.currentRoute.value.fullPath !== targetPath) router.push(targetPath);
+			return;
+		}
 		navigate?.(route.name);
 	}
 	/** 点击 dropdown 子菜单项导航 */
@@ -82,7 +96,10 @@ const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots }) => {
 				})),
 				selectedKeys: dropdownSelectedKeys,
 				onClick: ({ key }) => handleDropdownMenuClick(String(key))
-			} }, { default: () => [createVNode("span", { "class": `${breadcrumbCls}-overlay-link` }, [itemContent, createVNode(GIcon, { "type": "DownOutlined" }, null)])] }) : createVNode("span", {
+			} }, { default: () => [createVNode("span", {
+				"class": `${breadcrumbCls}-overlay-link`,
+				"onClick": route.name === BREADCRUMB_HOME_KEY ? () => handleItemClick(route, isLast) : void 0
+			}, [itemContent, createVNode(GIcon, { "type": "DownOutlined" }, null)])] }) : createVNode("span", {
 				"class": classNames(`${breadcrumbCls}-link`, isLast && `${breadcrumbCls}-link-last`),
 				"onClick": () => handleItemClick(route, isLast)
 			}, [itemContent])]), !isLast && createVNode("li", { "class": `${breadcrumbCls}-separator` }, [createTextVNode("/")])]);
@@ -98,6 +115,10 @@ const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			type: Boolean,
 			required: false,
 			default: void 0
+		},
+		homePath: {
+			type: String,
+			required: false
 		}
 	},
 	name: "LayoutBreadcrumb",

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

@@ -15,6 +15,11 @@ interface LayoutBreadcrumbProps {
    * - `false`：不显示首页项
    */
   homeIcon?: WithFalse<boolean>;
+  /**
+   * 覆盖 context 的首页点击跳转路径。
+   * 默认从 layoutContext.breadcrumbConfig.homePath 读取，缺省 '/'。
+   */
+  homePath?: string;
 }
 interface LayoutBreadcrumbSlots {
   /** 自定义每个面包屑项的渲染 */

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

@@ -49,10 +49,10 @@ declare const GPageTransition: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     default: string;
   };
 }>> & Readonly<{}>, {
-  name: string;
   reverse: boolean;
-  disabled: boolean;
   direction: string;
+  name: string;
+  disabled: boolean;
 }, SlotsType<GPageTransitionSlots>, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { GPageTransition as default };

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

@@ -0,0 +1,8 @@
+import { InnerTabsEmits, InnerTabsProps, InnerTabsSlots } from "./interface.js";
+import * as _$vue from "vue";
+import { SlotsType } from "vue";
+
+//#region src/components/Tabs/InnerTabs.d.ts
+declare const InnerTabs: _$vue.DefineSetupFnComponent<InnerTabsProps, InnerTabsEmits, SlotsType<InnerTabsSlots>, InnerTabsProps, _$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-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/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 };

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 };