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

package/dist/hooks/useMenu.js

@@ -0,0 +1,166 @@
+import { buildBreadcrumbRoutes, buildMenuLookup, collectMenuNames, insertMenuAtPath, normalizeMenus, removeMenuAtPath, resolveMatchedChain, resolveRouteTarget, routesToMenus, selectMenuBranch, toBreadcrumbItems, updateMenuAtPath, updateMenuMetaAtPath } from "../utils/menu.js";
+import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+//#region src/hooks/useMenu.ts
+/**
+* 菜单组合式：以 shallowRef 菜单树为总状态，派生选中 / 展开 / 面包屑 / 查找索引。
+*
+* 关键响应式（根治旧实现卡顿 / 内存问题）：
+* - `menus` / `selectedKeys` / `openKeys` 均为 shallowRef，可由 context 主动控制；
+* - `lookup` 内携带 path，深层菜单更新走 O(1) 查找 + O(depth) 局部克隆；
+* - 派生索引仅在 `menus` 根引用变化时重建，无 deep watch、无全量 cloneDeep。
+*/
+function useMenu(options) {
+	const router = useRouter();
+	const route = useRoute();
+	const currentName = computed(() => options.currentName?.() ?? route.name);
+	const sourceMenus = computed(() => toValue(options.menus) ?? routesToMenus(router.getRoutes()));
+	const menus = shallowRef(normalizeMenus(sourceMenus.value));
+	const selectedKeys = shallowRef([...toValue(options.selectedKeys) ?? []]);
+	const openKeys = shallowRef([...toValue(options.openKeys) ?? []]);
+	const menuModel = computed(() => {
+		const { flatMenus, lookup } = buildMenuLookup(menus.value);
+		return {
+			menus: menus.value,
+			flatMenus,
+			lookup
+		};
+	});
+	const flatMenus = computed(() => menuModel.value.flatMenus);
+	const lookup = computed(() => menuModel.value.lookup);
+	const matchedChain = computed(() => resolveMatchedChain(lookup.value, currentName.value));
+	const activeChainKey = computed(() => matchedChain.value.map((item) => item.name).join("\0"));
+	const currentMeta = computed(() => lookup.value.get(currentName.value ?? "")?.route.meta ?? {});
+	const breadcrumbRoutes = computed(() => buildBreadcrumbRoutes(matchedChain.value, { current: lookup.value.get(currentName.value ?? "")?.route }));
+	const breadcrumbItems = computed(() => toBreadcrumbItems(breadcrumbRoutes.value));
+	const splitActive = computed(() => toValue(options.layout) === "mix" && !toValue(options.isMobile));
+	const topName = computed(() => matchedChain.value[0]?.name);
+	const headerMenus = computed(() => splitActive.value ? menus.value.map((menu) => ({
+		...menu,
+		children: void 0
+	})) : menus.value);
+	const siderMenus = computed(() => splitActive.value ? selectMenuBranch(menus.value, topName.value) : menus.value);
+	function commitMenus(nextMenus, options) {
+		menus.value = options?.normalize === false ? nextMenus : normalizeMenus(nextMenus);
+		pruneKeys();
+	}
+	function pruneKeys() {
+		const validNames = lookup.value;
+		selectedKeys.value = selectedKeys.value.filter((name) => validNames.has(name));
+		openKeys.value = openKeys.value.filter((name) => validNames.has(name));
+	}
+	function syncSelectedKeys() {
+		if (toValue(options.selectedKeys) !== void 0) return;
+		selectedKeys.value = matchedChain.value.map((item) => item.name);
+	}
+	function syncOpenKeys() {
+		if (toValue(options.openKeys) !== void 0) return;
+		const activeParents = matchedChain.value.map((item) => item.name).filter((name) => name !== currentName.value);
+		openKeys.value = toValue(options.config).autoClose ? activeParents : Array.from(/* @__PURE__ */ new Set([...openKeys.value, ...activeParents]));
+	}
+	function getMenuPath(name) {
+		return lookup.value.get(name)?.path;
+	}
+	function setMenus(nextMenus) {
+		commitMenus(nextMenus);
+	}
+	function refreshMenus() {
+		commitMenus([...menus.value]);
+	}
+	function batchMenus(updater, options) {
+		const nextMenus = updater(menus.value);
+		commitMenus(nextMenus === menus.value ? [...nextMenus] : nextMenus, options);
+	}
+	function addMenu(menu, parentName, index) {
+		const parentPath = parentName ? getMenuPath(parentName) : void 0;
+		if (parentName && !parentPath) return;
+		commitMenus(insertMenuAtPath(menus.value, parentPath, menu, index));
+	}
+	function updateMenu(name, updater, options) {
+		const path = getMenuPath(name);
+		if (!path) return;
+		commitMenus(updateMenuAtPath(menus.value, path, updater), options);
+	}
+	function setMenuMeta(name, updater, options) {
+		const entry = lookup.value.get(name);
+		if (!entry) return;
+		const currentMeta = entry.route.meta ?? {};
+		const nextMeta = typeof updater === "function" ? updater(currentMeta) : {
+			...currentMeta,
+			...updater
+		};
+		const shouldNormalize = options?.normalize ?? (currentMeta.order !== nextMeta.order || currentMeta.hideInMenu !== nextMeta.hideInMenu || currentMeta.hideChildrenInMenu !== nextMeta.hideChildrenInMenu);
+		commitMenus(updateMenuMetaAtPath(menus.value, entry.path, nextMeta), { normalize: shouldNormalize });
+	}
+	function showMenu(name) {
+		setMenuMeta(name, { hideInMenu: false }, { normalize: true });
+	}
+	function hideMenu(name) {
+		setMenuMeta(name, { hideInMenu: true }, { normalize: true });
+	}
+	function removeMenu(name) {
+		const entry = lookup.value.get(name);
+		if (!entry) return;
+		const removedNames = new Set(collectMenuNames(entry.route));
+		commitMenus(removeMenuAtPath(menus.value, entry.path), { normalize: false });
+		selectedKeys.value = selectedKeys.value.filter((key) => !removedNames.has(key));
+		openKeys.value = openKeys.value.filter((key) => !removedNames.has(key));
+	}
+	const stopSource = watch(sourceMenus, (nextMenus) => commitMenus(nextMenus), { flush: "sync" });
+	const stopControlledSelectedKeys = watch(() => toValue(options.selectedKeys), (nextKeys) => {
+		if (nextKeys !== void 0) {
+			selectedKeys.value = [...nextKeys];
+			return;
+		}
+		syncSelectedKeys();
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	const stopControlledOpenKeys = watch(() => toValue(options.openKeys), (nextKeys) => {
+		if (nextKeys !== void 0) {
+			openKeys.value = [...nextKeys];
+			return;
+		}
+		syncOpenKeys();
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	const stopSelected = watch(activeChainKey, syncSelectedKeys, { immediate: true });
+	const stopOpen = watch(activeChainKey, syncOpenKeys, { immediate: true });
+	onScopeDispose(() => {
+		stopSource();
+		stopControlledSelectedKeys();
+		stopControlledOpenKeys();
+		stopSelected();
+		stopOpen();
+	});
+	function resolveRoute(name) {
+		return resolveRouteTarget(lookup.value, name);
+	}
+	return { menuState: {
+		menus,
+		flatMenus,
+		selectedKeys,
+		openKeys,
+		breadcrumbRoutes,
+		breadcrumbItems,
+		currentMeta,
+		headerMenus,
+		siderMenus,
+		resolveRoute,
+		lookup,
+		setMenus,
+		refreshMenus,
+		batchMenus,
+		addMenu,
+		updateMenu,
+		setMenuMeta,
+		showMenu,
+		hideMenu,
+		removeMenu
+	} };
+}
+//#endregion
+export { useMenu };

package/dist/hooks/useTabs.d.ts

@@ -0,0 +1,54 @@
+import { TabGroup } from "../components/Tabs/interface.js";
+import { LayoutMenuRoute, LayoutTabsConfig, LayoutTabsController } from "../interface.js";
+import { TabsMenuType } from "../components/Tabs/contextMenu.js";
+import { ComputedRef, Ref } from "vue";
+
+//#region src/hooks/useTabs.d.ts
+interface MenuDataState {
+  fixed: LayoutMenuRoute[];
+  normal: LayoutMenuRoute[];
+}
+interface UseTabsStateOptions {
+  /** 标签栏配置 */
+  config: ComputedRef<LayoutTabsConfig>;
+  /** 扁平菜单列表（用于固定标签扫描 & 过滤无效 fixed 标签） */
+  flatMenus: ComputedRef<LayoutMenuRoute[]>;
+  /** 侧边栏展开宽度（支持响应式 — 路由切换时 Sider 可见性可能变化） */
+  siderWidth: ComputedRef<number | string>;
+  /** 是否移动端 */
+  isMobile: ComputedRef<boolean>;
+  /** 内容是否全屏 */
+  contentFullscreen: Ref<boolean>;
+  /** 事件回调（单向通知，不再有 v-model 回流） */
+  onTabsChange: (tabs: LayoutMenuRoute[]) => void;
+  onReloadPage: () => void;
+  onContentFullscreenChange: (fullscreen: boolean) => void;
+}
+interface UseTabsStateReturn {
+  /** 标签原始状态（fixed + normal） — 单一真相源 */
+  menuDataState: MenuDataState;
+  /** 合并后的完整标签列表 */
+  dataSource: ComputedRef<LayoutMenuRoute[]>;
+  /** 当前激活的标签 key（route.name） */
+  activeKey: ComputedRef<string>;
+  /** 标签栏宽度 */
+  tabsWidth: ComputedRef<string>;
+  handleAddTabs: (record: LayoutMenuRoute) => void;
+  handleTabClick: (name: string) => void;
+  handleTabRemove: (name: string) => void;
+  handleContextMenuAction: (key: TabsMenuType, targetName: string) => void;
+  checkIsFixed: (route: LayoutMenuRoute) => boolean;
+  /** 同组内重排序（拖拽用）；跨组或同位置忽略 */
+  reorderWithinGroup: (fromKey: string, toKey: string, group: TabGroup) => void;
+  tabsController: LayoutTabsController;
+}
+declare function useTabsState(options: UseTabsStateOptions): UseTabsStateReturn;
+/**
+ * 命令式控制多标签（清空 / 关闭 / 增删改）。
+ * 通过 inject 获取 `GProLayout` 暴露的 tabs 控制器。
+ */
+declare function useTabs(): {
+  tabsRouter: LayoutTabsController;
+};
+//#endregion
+export { MenuDataState, UseTabsStateOptions, UseTabsStateReturn, useTabs, useTabsState };

package/dist/hooks/useTabs.js

@@ -0,0 +1,388 @@
+import { useInjectLayoutContext } from "../context/index.js";
+import { computed, reactive, ref, toRaw, watch } from "vue";
+import { unit } from "@gx-design-vue/pro-provider";
+import { isBoolean } from "@gx-design-vue/pro-utils";
+import { useLocalStorage, useThrottleFn } from "@vueuse/core";
+import { useRoute, useRouter } from "vue-router";
+import { cloneDeep } from "es-toolkit";
+//#region src/hooks/useTabs.ts
+function getTabName(route) {
+	return route.name;
+}
+function cloneRouteValue(value) {
+	return value === void 0 ? void 0 : cloneDeep(toRaw(value));
+}
+function normalizeTabState(tabState) {
+	return tabState ? { ...toRaw(tabState) } : void 0;
+}
+function normalizeTabMeta(meta) {
+	if (!meta) return void 0;
+	const rawMeta = toRaw(meta);
+	return {
+		title: rawMeta.title,
+		tabState: normalizeTabState(rawMeta.tabState),
+		menuSelectKey: rawMeta.menuSelectKey
+	};
+}
+function mergeTabMeta(target, patch) {
+	if (!target && !patch) return void 0;
+	const rawTarget = toRaw(target ?? {});
+	const rawPatch = toRaw(patch ?? {});
+	return {
+		title: rawPatch.title ?? rawTarget.title,
+		tabState: rawTarget.tabState || rawPatch.tabState ? {
+			...normalizeTabState(rawTarget.tabState),
+			...normalizeTabState(rawPatch.tabState)
+		} : void 0,
+		menuSelectKey: rawPatch.menuSelectKey ?? rawTarget.menuSelectKey
+	};
+}
+function normalizeTabRoute(record) {
+	const rawRecord = toRaw(record);
+	return {
+		name: rawRecord.name,
+		path: rawRecord.path,
+		fullPath: rawRecord.fullPath,
+		query: cloneRouteValue(rawRecord.query),
+		params: cloneRouteValue(rawRecord.params),
+		redirect: rawRecord.redirect,
+		meta: normalizeTabMeta(rawRecord.meta)
+	};
+}
+function mergeTabRoute(target, patch) {
+	const rawTarget = toRaw(target);
+	const rawPatch = toRaw(patch);
+	return normalizeTabRoute({
+		name: rawPatch.name ?? rawTarget.name,
+		path: rawPatch.path ?? rawTarget.path,
+		fullPath: rawPatch.fullPath ?? rawTarget.fullPath,
+		query: rawPatch.query === void 0 ? rawTarget.query : rawPatch.query,
+		params: rawPatch.params === void 0 ? rawTarget.params : rawPatch.params,
+		redirect: rawPatch.redirect ?? rawTarget.redirect,
+		meta: mergeTabMeta(rawTarget.meta, rawPatch.meta)
+	});
+}
+function toStorageTabRoute(record) {
+	const rawRecord = toRaw(record);
+	const rawMeta = toRaw(rawRecord.meta ?? {});
+	return {
+		name: rawRecord.name,
+		path: rawRecord.path,
+		fullPath: rawRecord.fullPath,
+		query: cloneRouteValue(rawRecord.query),
+		params: cloneRouteValue(rawRecord.params),
+		redirect: rawRecord.redirect,
+		meta: {
+			title: rawMeta.title,
+			tabState: normalizeTabState(rawMeta.tabState),
+			menuSelectKey: rawMeta.menuSelectKey
+		}
+	};
+}
+function toStorageMenuDataState(state) {
+	return {
+		fixed: state.fixed.map(toStorageTabRoute),
+		normal: state.normal.map(toStorageTabRoute)
+	};
+}
+function isFixedTabRoute(route) {
+	const { fixed } = route?.meta?.tabState ?? {};
+	return isBoolean(fixed) ? fixed : false;
+}
+/** 初始状态：仅从 localStorage 恢复（单一外部源，不再有 v-model 优先级） */
+function getInitialTabsState(storageTabs, persistent) {
+	if (persistent && storageTabs.value) return {
+		fixed: storageTabs.value.fixed?.map(normalizeTabRoute) ?? [],
+		normal: storageTabs.value.normal?.map(normalizeTabRoute) ?? []
+	};
+	return {
+		fixed: [],
+		normal: []
+	};
+}
+function useTabsState(options) {
+	const { config, flatMenus, siderWidth, isMobile, contentFullscreen, onTabsChange, onReloadPage, onContentFullscreenChange } = options;
+	const router = useRouter();
+	const currentRoute = useRoute();
+	const isPersistent = computed(() => config.value.persistent !== false);
+	const storageTabs = useLocalStorage("pro-layout-tabs", {
+		fixed: [],
+		normal: []
+	});
+	const menuDataState = reactive(getInitialTabsState(storageTabs, isPersistent.value));
+	const menusReady = ref(flatMenus.value.length > 0);
+	const dataSource = computed(() => [...menuDataState.fixed, ...menuDataState.normal]);
+	const activeKey = computed(() => currentRoute.name);
+	const tabsWidth = computed(() => {
+		if (contentFullscreen.value || isMobile.value) return "100%";
+		const width = unit(siderWidth.value);
+		return siderWidth.value ? `calc(100% - ${width})` : "100%";
+	});
+	function checkIsFixed(route) {
+		return isFixedTabRoute(route);
+	}
+	function getCurrentRoute(name) {
+		return dataSource.value.find((item) => getTabName(item) === name);
+	}
+	/** 获取路由跳转 path */
+	function getRoutePath(route) {
+		return route.redirect || route.fullPath || route.path || "";
+	}
+	/** 构建路由跳转额外参数 */
+	function getExtraProps(route) {
+		const extra = {};
+		if (route.query) extra.query = route.query;
+		if (route.params) extra.params = route.params;
+		return extra;
+	}
+	function changeTabsList(record, operation) {
+		const targetArray = checkIsFixed(record) ? "fixed" : "normal";
+		const { type, addType, params } = operation;
+		if (type === "add" && addType) menuDataState[targetArray][addType](normalizeTabRoute(params));
+		else if (type === "merge") menuDataState[targetArray] = menuDataState[targetArray].map((item) => {
+			if (getTabName(item) === getTabName(record)) return mergeTabRoute(item, params);
+			return item;
+		});
+		else if (type === "remove") menuDataState[targetArray] = menuDataState[targetArray].filter((item) => getTabName(item) !== getTabName(record));
+	}
+	function handleAddTabs(record) {
+		const { hidden } = record?.meta?.tabState ?? {};
+		if (!record.name || !record.meta || hidden === true) return;
+		const fixed = checkIsFixed(record);
+		const name = getTabName(record);
+		const tabData = normalizeTabRoute(record);
+		const existing = dataSource.value.find((item) => getTabName(item) === name);
+		if (!existing) {
+			menuDataState[fixed ? "fixed" : "normal"].push(tabData);
+			return;
+		}
+		if (checkIsFixed(existing) !== fixed) {
+			changeTabsList(existing, {
+				type: "remove",
+				params: existing
+			});
+			menuDataState[fixed ? "fixed" : "normal"].push(mergeTabRoute(existing, tabData));
+		} else changeTabsList(record, {
+			type: "merge",
+			params: tabData
+		});
+	}
+	/** 导航到最后一个标签 */
+	function navigateToLastTab() {
+		const lastTab = dataSource.value.slice(-1)[0];
+		if (lastTab) router.push({
+			path: getRoutePath(lastTab),
+			...getExtraProps(lastTab)
+		});
+		else router.push("/");
+	}
+	function handleTabRemove(name) {
+		const record = getCurrentRoute(name);
+		if (!record) return;
+		changeTabsList(record, {
+			type: "remove",
+			params: record
+		});
+		if (getTabName(record) === activeKey.value) navigateToLastTab();
+	}
+	function handleTabClick(name) {
+		const record = getCurrentRoute(name);
+		if (!record || name === activeKey.value) return;
+		router.push({
+			path: getRoutePath(record),
+			...getExtraProps(record)
+		});
+	}
+	function handleContextMenuAction(key, targetName) {
+		const targetRoute = getCurrentRoute(targetName);
+		if (!targetRoute) return;
+		const activeIndex = menuDataState.normal.findIndex((item) => getTabName(item) === targetName);
+		const isFixed = checkIsFixed(targetRoute);
+		switch (key) {
+			case "fixed":
+				if (isFixed) {
+					const fixedIndex = menuDataState.fixed.findIndex((item) => getTabName(item) === targetName);
+					menuDataState.normal.unshift(mergeTabRoute(targetRoute, { meta: { tabState: { fixed: false } } }));
+					menuDataState.fixed = menuDataState.fixed.filter((_, index) => index !== fixedIndex);
+				} else {
+					menuDataState.fixed.push(mergeTabRoute(targetRoute, { meta: { tabState: { fixed: true } } }));
+					menuDataState.normal = menuDataState.normal.filter((_, index) => index !== activeIndex);
+				}
+				break;
+			case "close":
+				handleTabRemove(targetName);
+				break;
+			case "closeOthersTabs":
+				menuDataState.normal = menuDataState.normal.filter((item) => getTabName(item) === targetName || checkIsFixed(item));
+				if (!dataSource.value.some((item) => getTabName(item) === activeKey.value)) router.push({
+					path: getRoutePath(targetRoute),
+					...getExtraProps(targetRoute)
+				});
+				break;
+			case "closeLeftTabs":
+				if (activeIndex >= 0) {
+					menuDataState.normal = menuDataState.normal.filter((_, index) => index >= activeIndex);
+					if (!dataSource.value.some((item) => getTabName(item) === activeKey.value)) router.push({
+						path: getRoutePath(targetRoute),
+						...getExtraProps(targetRoute)
+					});
+				}
+				break;
+			case "closeRightTabs":
+				if (activeIndex >= 0) menuDataState.normal = menuDataState.normal.filter((_, index) => index <= activeIndex);
+				if (!dataSource.value.some((item) => getTabName(item) === activeKey.value)) router.push({
+					path: getRoutePath(targetRoute),
+					...getExtraProps(targetRoute)
+				});
+				break;
+			case "closeAllTabs":
+				menuDataState.normal = menuDataState.normal.filter((item) => checkIsFixed(item));
+				navigateToLastTab();
+				break;
+			case "reloadPage":
+				if (targetName === activeKey.value) throttledReload();
+				break;
+			case "newBlank":
+				window.open(location.href);
+				break;
+			case "fullScreen":
+				contentFullscreen.value = !contentFullscreen.value;
+				onContentFullscreenChange(contentFullscreen.value);
+				break;
+			default: break;
+		}
+	}
+	const throttledReload = useThrottleFn(() => {
+		onReloadPage();
+	}, 500);
+	watch(flatMenus, (menus) => {
+		if (!menus.length) return;
+		if (!menusReady.value) menusReady.value = true;
+		const menuNameSet = new Set(menus.map((menuItem) => menuItem.name));
+		if (menuDataState.fixed.length) menuDataState.fixed = menuDataState.fixed.filter((item) => menuNameSet.has(item.name));
+		const openedNames = new Set(dataSource.value.map((tab) => getTabName(tab)));
+		menus.forEach((item) => {
+			if (openedNames.has(getTabName(item)) || checkIsFixed(item)) handleAddTabs(item);
+		});
+	}, { immediate: true });
+	watch(() => {
+		const tabState = currentRoute.meta?.tabState;
+		return {
+			name: currentRoute.name,
+			fullPath: currentRoute.fullPath,
+			path: currentRoute.path,
+			query: currentRoute.query,
+			params: currentRoute.params,
+			title: currentRoute.meta?.title,
+			tabFixed: tabState?.fixed,
+			tabHidden: tabState?.hidden
+		};
+	}, () => {
+		if (currentRoute?.name) handleAddTabs(currentRoute);
+	}, { immediate: true });
+	watch(dataSource, (allTabs) => {
+		if (isPersistent.value && menusReady.value) storageTabs.value = toStorageMenuDataState(menuDataState);
+		onTabsChange(allTabs);
+	});
+	/** 同组内重排序（拖拽用）；跨组或同位置直接忽略 */
+	function reorderWithinGroup(fromKey, toKey, group) {
+		const arr = menuDataState[group];
+		const fromIdx = arr.findIndex((item) => item.name === fromKey);
+		const toIdx = arr.findIndex((item) => item.name === toKey);
+		if (fromIdx < 0 || toIdx < 0 || fromIdx === toIdx) return;
+		const next = arr.slice();
+		const [moved] = next.splice(fromIdx, 1);
+		next.splice(toIdx, 0, moved);
+		menuDataState[group] = next;
+	}
+	return {
+		menuDataState,
+		dataSource,
+		activeKey,
+		tabsWidth,
+		handleAddTabs,
+		handleTabClick,
+		handleTabRemove,
+		handleContextMenuAction,
+		checkIsFixed,
+		reorderWithinGroup,
+		tabsController: {
+			getTabs: () => dataSource.value.map((item) => normalizeTabRoute(item)),
+			getActive: () => activeKey.value,
+			isActive: (name) => activeKey.value === name,
+			isFixed: (name) => {
+				const route = getCurrentRoute(name);
+				return route ? checkIsFixed(route) : false;
+			},
+			add: (record) => handleAddTabs(record),
+			close: (name) => handleTabRemove(name ?? activeKey.value),
+			closeOthers: (name) => handleContextMenuAction("closeOthersTabs", name ?? activeKey.value),
+			closeLeft: (name) => handleContextMenuAction("closeLeftTabs", name ?? activeKey.value),
+			closeRight: (name) => handleContextMenuAction("closeRightTabs", name ?? activeKey.value),
+			closeAll: () => handleContextMenuAction("closeAllTabs", activeKey.value),
+			clean: () => {
+				menuDataState.fixed = [];
+				menuDataState.normal = [];
+			},
+			switchTo: (name) => handleTabClick(name),
+			toggleFixed: (name, fixed) => {
+				const route = getCurrentRoute(name);
+				if (!route) return;
+				const currentFixed = checkIsFixed(route);
+				if ((fixed ?? !currentFixed) !== currentFixed) handleContextMenuAction("fixed", name);
+			},
+			reload: (name) => {
+				const target = name ?? activeKey.value;
+				const run = () => throttledReload();
+				if (target !== activeKey.value) {
+					const route = getCurrentRoute(target);
+					if (route) {
+						router.push({
+							path: getRoutePath(route),
+							...getExtraProps(route)
+						}).then(run);
+						return;
+					}
+				}
+				run();
+			},
+			toggleFullscreen: () => handleContextMenuAction("fullScreen", activeKey.value),
+			update: (record, op) => changeTabsList(record, {
+				type: op.type,
+				addType: op.addType,
+				params: op.params ?? record
+			})
+		}
+	};
+}
+/**
+* 命令式控制多标签（清空 / 关闭 / 增删改）。
+* 通过 inject 获取 `GProLayout` 暴露的 tabs 控制器。
+*/
+const fallbackController = {
+	getTabs: () => [],
+	getActive: () => "",
+	isActive: () => false,
+	isFixed: () => false,
+	add: () => {},
+	close: () => {},
+	closeOthers: () => {},
+	closeLeft: () => {},
+	closeRight: () => {},
+	closeAll: () => {},
+	clean: () => {},
+	switchTo: () => {},
+	toggleFixed: () => {},
+	reload: () => {},
+	toggleFullscreen: () => {},
+	update: () => {}
+};
+/**
+* 命令式控制多标签（清空 / 关闭 / 增删改）。
+* 通过 inject 获取 `GProLayout` 暴露的 tabs 控制器。
+*/
+function useTabs() {
+	return { tabsRouter: useInjectLayoutContext()?.tabsState?.tabsController ?? fallbackController };
+}
+//#endregion
+export { useTabs, useTabsState };

package/dist/index.d.ts

@@ -1,28 +1,23 @@
-import { AppRouteModule, ClassNamesType, Component, MenuDataItem, Meta, SemanticName, StylesType, TabsMeta } from "./types/RouteTypings.js";
-import { ProLayoutConfig, ProLayoutType, defaultSettings, getTokenLayoutTheme } from "./config/index.js";
-import _default$3, { GlobalFooterProps } from "./components/GlobalFooter/index.js";
-import { TabsRouteProps } from "./components/TabsRoute/index.js";
-import { ProLayoutContextProps, defaultContextKey, provideProLayoutContext, useProLayoutContext } from "./Context/index.js";
-import GProPageContainer, { PageContainerProps } from "./components/PageContainer/index.js";
-import _default, { LazyIcon } from "./components/BaseMenu/index.js";
-import SiderMenuWrapper from "./components/SiderMenu/index.js";
-import { useLayoutExpose } from "./hooks/layout/useLayoutExpose.js";
-import { usePageContent } from "./hooks/layout/usePageContent.js";
-import { MenuData, clearMenuItem, filterTree, flatMap, getLastPath, getMatchedList, getMenuData, getMenuFirstChildren, getParentKeys, handlePathKey } from "./utils/menu.js";
-import { useProLayoutMenuContext } from "./hooks/menu/context.js";
-import _default$2 from "./ProLayout.js";
-import { iconStyle } from "./style/index.js";
+import { LayoutBreadcrumbProps, LayoutBreadcrumbSlots } from "./components/Breadcrumb/interface.js";
+import { LayoutCollapseButtonEmits, LayoutCollapseButtonEmitsProps, LayoutCollapseButtonProps, LayoutCollapseButtonSlots } from "./components/CollapseButton/interface.js";
+import { LayoutFooterProps, LayoutFooterSlots } from "./components/Footer/interface.js";
+import { LayoutHeaderEmits, LayoutHeaderEmitsProps, LayoutHeaderProps, LayoutHeaderSlots } from "./components/Header/interface.js";
+import { LayoutLogoEmits, LayoutLogoEmitsProps, LayoutLogoProps, LayoutLogoSlots } from "./components/Logo/interface.js";
+import { PRO_MENU_SLOT_KEYS, ProMenuEmits, ProMenuEmitsProps, ProMenuProps, ProMenuSlots } from "./components/Menu/interface.js";
+import { LayoutSiderEmits, LayoutSiderEmitsProps, LayoutSiderProps, LayoutSiderSlots } from "./components/Sider/interface.js";
+import { InnerTabItem, InnerTabsEmits, InnerTabsEmitsProps, InnerTabsProps, InnerTabsSlots, LayoutTabsEmits, LayoutTabsEmitsProps, LayoutTabsProps, LayoutTabsSlots, TabGroup } from "./components/Tabs/interface.js";
+import { LayoutContentEmits, LayoutContentEmitsProps, LayoutContentProps, LayoutContentSlots } from "./components/WrapContent/interface.js";
+import { APP_PAGE_SLOT_KEYS, AppPageSlotKey, AppPageSpinning, BreadcrumbItemType, CardProps, DeepPartial, EmptyEmits, FOOTER_TOOLBAR_SLOT_KEYS, FooterToolbarClassNamesType, FooterToolbarSemanticName, FooterToolbarSlotKey, FooterToolbarStylesType, GFooterToolbarProps, GFooterToolbarSlots, GPageContainerEmits, GPageContainerEmitsProps, GPageContainerProps, GPageContainerSlots, GPageTransitionProps, GPageTransitionSlots, GProAppPageProps, GProAppPageSlots, GProLayoutEmits, GProLayoutEmitsProps, GProLayoutProps, GProLayoutRef, GProLayoutSlots, LAYOUT_SLOT_KEYS, LayoutBreadcrumbConfig, LayoutBreadcrumbSlotProps, LayoutClassNamesType, LayoutCollapseConfig, LayoutFooterConfig, LayoutFooterLink, LayoutHeaderConfig, LayoutHeaderSlotProps, LayoutLogoConfig, LayoutMenuConfig, LayoutMenuItemSlotProps, LayoutMenuRoute, LayoutPageContainerConfig, LayoutSelectInfo, LayoutSemanticName, LayoutSiderConfig, LayoutSiderSlotProps, LayoutStylesType, LayoutTabsConfig, LayoutTabsController, LayoutTabsUpdateOp, MenuClassNamesType, MenuClickInfo, MenuProps, MenuRenderItem, MenuSelectInfo, MenuSemanticName, MenuStylesType, Meta, PAGE_CONTAINER_SLOT_KEYS, PageContainerClassNamesType, PageContainerLoading, PageContainerSemanticName, PageContainerSlotKey, PageContainerStylesType, SiderProps, SpinProps, Tab, TabsMeta, TabsProps, WatermarkProps } from "./interface.js";
+import GProLayout from "./ProLayout.js";
+import { ProAppPageContext, useAppPageContext } from "./components/AppPage/context.js";
 import ProAppPage from "./components/AppPage/index.js";
-import { baseMenuProps } from "./components/BaseMenu/props.js";
-import _default$1 from "./components/PageTranstion/index.js";
-import { OpenEventHandler, SelectInfo } from "./components/SiderMenu/typings.js";
-import { AnimateConfig, animateSetting } from "./config/animate.js";
-import export_default from "./hooks/menu/index.js";
-import export_default$1 from "./hooks/theme/index.js";
-import { ProSettingsProps } from "./props/defaultSettings.js";
-import { calculateCss, convertCSSPropertiesToString, cssValueToNumber, extractCSSVariableName, getCssVarOrUnit, getCssVarValue, getCssVariableValue, layout } from "./utils/style/index.js";
-import { removeDuplicatesByName } from "./utils/index.js";
-import { BasicLayoutProps, CollapsedProps, CommonLayoutProps, HeaderLayoutProps, LayoutClassNamesType, LayoutContext, LayoutSemanticName, LayoutStylesType, ProLayoutExpose, ProLayoutInjextExpose, SiderLayoutProps, TabsRouteExpose } from "./types/typings.js";
-import { provideProLayoutExposeContext, useProLayoutExposeContext } from "./Context/expose.js";
-import { MenuMode } from "ant-design-vue";
-export { AnimateConfig, AppRouteModule, BasicLayoutProps, ClassNamesType, CollapsedProps, CommonLayoutProps, Component, _default as GBaseMenu, _default$1 as GPageTransition, ProAppPage as GProAppPage, _default$2 as GProLayout, GProPageContainer, _default$3 as GlobalFooter, type GlobalFooterProps, HeaderLayoutProps, LayoutClassNamesType, LayoutContext, LayoutSemanticName, LayoutStylesType, LazyIcon, MenuData, MenuDataItem, type MenuMode, Meta, type OpenEventHandler, type PageContainerProps, ProLayoutConfig, ProLayoutContextProps, ProLayoutExpose, ProLayoutInjextExpose, ProLayoutType, type ProSettingsProps, type SelectInfo, SemanticName, SiderLayoutProps, SiderMenuWrapper, StylesType, TabsMeta, TabsRouteExpose, type TabsRouteProps, animateSetting, baseMenuProps, calculateCss, clearMenuItem, convertCSSPropertiesToString, cssValueToNumber, defaultContextKey, defaultSettings, extractCSSVariableName, filterTree, flatMap, getCssVarOrUnit, getCssVarValue, getCssVariableValue, getLastPath, getMatchedList, getMenuData, getMenuFirstChildren, getParentKeys, getTokenLayoutTheme, handlePathKey, iconStyle, layout, provideProLayoutContext, provideProLayoutExposeContext, removeDuplicatesByName, useLayoutExpose, export_default as useLayoutMenu, usePageContent, useProLayoutContext, useProLayoutExposeContext, useProLayoutMenuContext, export_default$1 as useThemeState };
+import GFooterToolbar from "./components/FooterToolbar/index.js";
+import ProMenu from "./components/Menu/index.js";
+import ProPageContainer from "./components/PageContainer/index.js";
+import GPageTransition from "./components/PageTransition/index.js";
+import InnerTabs from "./components/Tabs/InnerTabs.js";
+import { MenuLookupEntry, MenuMetaPatch, MenuModel, MenuRoutePatch, MenuTreeMutationOptions, ResolveRouteResult, buildBreadcrumbRoutes, buildMenuLookup, cleanMenus, collectMenuNames, getLastPath, insertMenuAtPath, normalizeMenus, partitionFixedMenus, removeMenuAtPath, resolveMatchedChain, resolveRouteTarget, routesToMenus, selectMenuBranch, sortMenusByOrder, toBreadcrumbItems, updateMenuAtPath, updateMenuMetaAtPath } from "./utils/menu.js";
+import { LayoutMenuState, UseLayoutMenuOptions, UseLayoutMenuReturn, useMenu } from "./hooks/useMenu.js";
+import { useTabs } from "./hooks/useTabs.js";
+import { LayoutContextProps, useInjectLayoutContext } from "./context/index.js";
+export { APP_PAGE_SLOT_KEYS, AppPageSlotKey, AppPageSpinning, type BreadcrumbItemType, type CardProps, DeepPartial, EmptyEmits, FOOTER_TOOLBAR_SLOT_KEYS, FooterToolbarClassNamesType, FooterToolbarSemanticName, FooterToolbarSlotKey, FooterToolbarStylesType, GFooterToolbar, GFooterToolbarProps, GFooterToolbarSlots, InnerTabs as GInnerTabs, GPageContainerEmits, GPageContainerEmitsProps, GPageContainerProps, GPageContainerSlots, GPageTransition, GPageTransitionProps, GPageTransitionSlots, ProAppPage as GProAppPage, GProAppPageProps, GProAppPageSlots, GProLayout, GProLayoutEmits, GProLayoutEmitsProps, GProLayoutProps, GProLayoutRef, GProLayoutSlots, ProPageContainer as GProPageContainer, InnerTabItem, InnerTabsEmits, InnerTabsEmitsProps, InnerTabsProps, InnerTabsSlots, LAYOUT_SLOT_KEYS, LayoutBreadcrumbConfig, LayoutBreadcrumbProps, LayoutBreadcrumbSlotProps, LayoutBreadcrumbSlots, LayoutClassNamesType, LayoutCollapseButtonEmits, LayoutCollapseButtonEmitsProps, LayoutCollapseButtonProps, LayoutCollapseButtonSlots, LayoutCollapseConfig, LayoutContentEmits, LayoutContentEmitsProps, LayoutContentProps, LayoutContentSlots, type LayoutContextProps, LayoutFooterConfig, LayoutFooterLink, LayoutFooterProps, LayoutFooterSlots, LayoutHeaderConfig, LayoutHeaderEmits, LayoutHeaderEmitsProps, LayoutHeaderProps, LayoutHeaderSlotProps, LayoutHeaderSlots, LayoutLogoConfig, LayoutLogoEmits, LayoutLogoEmitsProps, LayoutLogoProps, LayoutLogoSlots, LayoutMenuConfig, LayoutMenuItemSlotProps, LayoutMenuRoute, type LayoutMenuState, LayoutPageContainerConfig, LayoutSelectInfo, LayoutSemanticName, LayoutSiderConfig, LayoutSiderEmits, LayoutSiderEmitsProps, LayoutSiderProps, LayoutSiderSlotProps, LayoutSiderSlots, LayoutStylesType, LayoutTabsConfig, LayoutTabsController, LayoutTabsEmits, LayoutTabsEmitsProps, LayoutTabsProps, LayoutTabsSlots, LayoutTabsUpdateOp, MenuClassNamesType, MenuClickInfo, MenuLookupEntry, MenuMetaPatch, MenuModel, type MenuProps, MenuRenderItem, MenuRoutePatch, MenuSelectInfo, MenuSemanticName, MenuStylesType, MenuTreeMutationOptions, Meta, PAGE_CONTAINER_SLOT_KEYS, PRO_MENU_SLOT_KEYS, PageContainerClassNamesType, PageContainerLoading, PageContainerSemanticName, PageContainerSlotKey, PageContainerStylesType, type ProAppPageContext, ProMenu, ProMenuEmits, ProMenuEmitsProps, ProMenuProps, ProMenuSlots, ResolveRouteResult, type SiderProps, type SpinProps, type Tab, TabGroup, TabsMeta, type TabsProps, type UseLayoutMenuOptions, type UseLayoutMenuReturn, type WatermarkProps, buildBreadcrumbRoutes, buildMenuLookup, cleanMenus, collectMenuNames, getLastPath, insertMenuAtPath, normalizeMenus, partitionFixedMenus, removeMenuAtPath, resolveMatchedChain, resolveRouteTarget, routesToMenus, selectMenuBranch, sortMenusByOrder, toBreadcrumbItems, updateMenuAtPath, updateMenuMetaAtPath, useAppPageContext, useInjectLayoutContext, useMenu, useTabs };