@zat-design/sisyphus-react 4.5.6-beta.3 → 4.5.6

package/es/ProLayout/components/ProCollapse/index.js

@@ -5,6 +5,8 @@ import classNames from 'classnames';
 import foldSvg from "../../../assets/fold.svg";
 import ProIcon from "../../../ProIcon/index";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const OPEN_ACTIVE_KEYS = ['1'];
+const CLOSED_ACTIVE_KEYS = [];
 const ProCollapse = props => {
   const {
     title,
@@ -34,7 +36,7 @@ const ProCollapse = props => {
     ...collapseProps
   };
   if (open !== undefined && !('activeKey' in finalCollapseProps)) {
-    finalCollapseProps.activeKey = open ? ['1'] : [];
+    finalCollapseProps.activeKey = open ? OPEN_ACTIVE_KEYS : CLOSED_ACTIVE_KEYS;
   }
   const cls = classNames({
     'pro-collapse': true,

package/es/ProLayout/components/TabsManager/components/TabContextMenu.d.ts

@@ -2,6 +2,6 @@ import { TabContextMenuProps } from '../propTypes';
 /**
  * 右键菜单组件 - 兼容Antd 4.x和5.x
  */
-declare function TabContextMenu({ tabId, children, closable, onClose, onCloseOthers, onCloseRight, onCloseAll, menuItems: customMenuItems, tabMenuClick, tab, tabs, }: TabContextMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function TabContextMenu({ tabId, children, closable, onClose, onCloseOthers, onCloseRight, onCloseAll, pinned, pinDisabled, onTogglePin, menuItems: customMenuItems, tabMenuClick, tab, tabs, }: TabContextMenuProps): import("react/jsx-runtime").JSX.Element;
 export default TabContextMenu;
 export { TabContextMenu };

package/es/ProLayout/components/TabsManager/components/TabContextMenu.js

@@ -14,6 +14,9 @@ function TabContextMenu({
   onCloseOthers,
   onCloseRight,
   onCloseAll,
+  pinned = false,
+  pinDisabled = false,
+  onTogglePin,
   menuItems: customMenuItems,
   tabMenuClick,
   tab,
@@ -49,8 +52,14 @@ function TabContextMenu({
       case 'closeAll':
         onCloseAll();
         break;
+      case 'togglePin':
+        if (pinDisabled) {
+          return;
+        }
+        onTogglePin?.(tabId);
+        break;
     }
-  }, [tabId, closable, onClose, onCloseOthers, onCloseRight, onCloseAll, tabMenuClick, tab, tabs]);
+  }, [tabId, closable, onClose, onCloseOthers, onCloseRight, onCloseAll, pinDisabled, onTogglePin, tabMenuClick, tab, tabs]);
 
   // 默认右键菜单配置 - 统一使用items方式（antd 4.20+都支持）
   const defaultMenuItems = [{
@@ -66,6 +75,12 @@ function TabContextMenu({
   }, {
     key: 'closeAll',
     label: locale.ProLayout.tabMenuCloseAll
+  }, {
+    type: 'divider'
+  }, {
+    key: 'togglePin',
+    label: pinned ? locale.ProLayout.tabMenuUnpin : locale.ProLayout.tabMenuPin,
+    disabled: pinDisabled
   }];
 
   // 合并自定义菜单项和默认菜单项

package/es/ProLayout/components/TabsManager/components/TabItem.d.ts

@@ -8,6 +8,12 @@ interface TabItemComponentProps {
     onCloseOthers: () => void;
     onCloseRight: () => void;
     onCloseAll: () => void;
+    /** 当前标签是否已固定 */
+    pinned?: boolean;
+    /** 是否禁用固定/取消固定（config.fixed 声明的强制固定不可取消） */
+    pinDisabled?: boolean;
+    /** 切换固定状态回调 */
+    onTogglePin?: () => void;
     /** 所有标签页列表 */
     tabsList?: TabItem[];
     /** 自定义菜单项 */

package/es/ProLayout/components/TabsManager/components/TabItem.js

@@ -1,7 +1,15 @@
 import React from 'react';
 import { CloseOutlined } from '@ant-design/icons';
+import ProTooltip from "../../../../ProTooltip";
 import { TabContextMenu } from "./TabContextMenu";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MAX_TAB_TITLE_LENGTH = 12;
+const getTabDisplayTitle = title => {
+  const text = title || '';
+  const chars = Array.from(text);
+  if (chars.length <= MAX_TAB_TITLE_LENGTH) return text;
+  return `${chars.slice(0, MAX_TAB_TITLE_LENGTH).join('')}...`;
+};
 /**
  * 单个标签页组件
  */
@@ -13,10 +21,16 @@ const TabItemComponent = ({
   onCloseOthers,
   onCloseRight,
   onCloseAll,
+  pinned = false,
+  pinDisabled = false,
+  onTogglePin,
   tabsList = [],
   menuItems,
   tabMenuClick
 }) => {
+  const tabTitle = tab.title || tab.name || '';
+  const displayTitle = getTabDisplayTitle(tabTitle);
+  const isTitleOverflow = displayTitle !== tabTitle;
   const handleCloseClick = e => {
     e.stopPropagation();
     onClose();
@@ -36,6 +50,9 @@ const TabItemComponent = ({
     onCloseOthers: () => onCloseOthers(),
     onCloseRight: () => onCloseRight(),
     onCloseAll: onCloseAll,
+    pinned: pinned,
+    pinDisabled: pinDisabled,
+    onTogglePin: onTogglePin ? () => onTogglePin() : undefined,
     tab: tab,
     tabs: tabsList,
     menuItems: menuItems,
@@ -51,10 +68,16 @@ const TabItemComponent = ({
           children: typeof tab.icon === 'string' ? /*#__PURE__*/_jsx("i", {
             className: `iconfont ${tab.icon}`
           }) : tab.icon
-        }), /*#__PURE__*/_jsx("span", {
+        }), /*#__PURE__*/_jsx("div", {
           className: "pro-layout-tab-title",
-          title: tab.title,
-          children: tab.title
+          children: isTitleOverflow ? /*#__PURE__*/_jsx(ProTooltip, {
+            text: displayTitle,
+            title: tabTitle,
+            line: 1,
+            width: "12em",
+            placement: "top",
+            scrollFollowParent: false
+          }) : tabTitle
         }), tab.closable && /*#__PURE__*/_jsx("span", {
           className: "pro-layout-tab-close",
           onClick: handleCloseClick,

package/es/ProLayout/components/TabsManager/hooks/useTabsState.js

@@ -1,10 +1,9 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { message } from 'antd';
-import { arrayMove } from '@dnd-kit/sortable';
 import { DEFAULT_TABS_CONFIG } from "../propTypes";
 import { useTabsCache } from "./useTabsCache";
 import locale, { formatMessage } from "../../../../locale";
-import { createTabFromMenu, generateTabId, shouldOpenExternal, handleExternalOpen, checkTabLimit, getRightTabs, flattenMenuData, canOpenAsTab, getMenuRoute } from "../utils";
+import { createTabFromMenu, generateTabId, shouldOpenExternal, handleExternalOpen, checkTabLimit, getRightTabs, flattenMenuData, canOpenAsTab, getMenuRoute, findExistingTab, derivePinned, pinTab as pinTabInList, unpinTab as unpinTabInList, reorderWithPinConstraint } from "../utils";
 
 /**
  * 标签页状态管理Hook
@@ -59,6 +58,13 @@ export const useTabsState = options => {
         restoredState.activeTabInfo = restoredState.activeTab;
         delete restoredState.activeTab;
       }
+
+      // 兼容旧缓存：无 pinned 字段的标签用 closable===false 推导出 pinned，
+      // 保证刷新后固定标签仍落在左侧固定区
+      restoredState.tabsList = restoredState.tabsList.map(tab => tab.pinned === undefined ? {
+        ...tab,
+        pinned: derivePinned(tab)
+      } : tab);
       setState(restoredState);
     }
     setIsInitialized(true);
@@ -120,8 +126,7 @@ export const useTabsState = options => {
 
     // 如果 forceNew = false（默认），检查是否已存在相同的标签页
     if (!forceNew) {
-      const menuRoute = getMenuRoute(menuItem);
-      const existingTab = state.tabsList.find(tab => tab.menuItem?.code === menuItem.code || tab.url === menuRoute);
+      const existingTab = findExistingTab(state.tabsList, menuItem);
       if (existingTab) {
         // 如果已存在，可以添加（会切换到已存在的标签页）
         return true;
@@ -152,8 +157,7 @@ export const useTabsState = options => {
       }
 
       // 非强制新建时，查找已存在的标签页并切换
-      const menuRoute = getMenuRoute(menuItem);
-      const existingTab = !forceNew ? prevState.tabsList.find(tab => tab.menuItem?.code === menuItem.code || tab.url === menuRoute) : undefined;
+      const existingTab = !forceNew ? findExistingTab(prevState.tabsList, menuItem) : undefined;
       if (existingTab) {
         // 若来源菜单明确标记 closable: false 而已有 tab 未继承，则修正
         const correctedTab = menuItem.closable === false && existingTab.closable !== false ? {
@@ -217,6 +221,9 @@ export const useTabsState = options => {
         }),
         ...(updates.closable !== undefined && {
           closable: updates.closable
+        }),
+        ...(updates.pinned !== undefined && {
+          pinned: updates.pinned
         })
       } : target.menuItem;
       const nextTab = {
@@ -231,6 +238,9 @@ export const useTabsState = options => {
         ...(updates.closable !== undefined && {
           closable: updates.closable
         }),
+        ...(updates.pinned !== undefined && {
+          pinned: updates.pinned
+        }),
         menuItem: nextMenuItem
       };
       const newTabsList = [...prevState.tabsList];
@@ -384,15 +394,47 @@ export const useTabsState = options => {
 
   /**
    * 重排标签页顺序（拖拽结束后调用）
+   * 应用固定分区约束：普通标签不可拖入固定区、固定标签不可拖出固定区
    */
   const reorderTabs = useCallback((activeId, overId) => {
     setState(prevState => {
-      const activeIndex = prevState.tabsList.findIndex(tab => tab.id === activeId);
-      const overIndex = prevState.tabsList.findIndex(tab => tab.id === overId);
-      if (activeIndex === -1 || overIndex === -1 || activeIndex === overIndex) return prevState;
+      const nextTabsList = reorderWithPinConstraint(prevState.tabsList, activeId, overId);
+      if (nextTabsList === prevState.tabsList) return prevState;
+      return {
+        ...prevState,
+        tabsList: nextTabsList
+      };
+    });
+  }, []);
+
+  /**
+   * 固定标签页：设为 pinned/不可关闭并移动到固定区末尾
+   */
+  const pinTab = useCallback(tabId => {
+    setState(prevState => {
+      const nextTabsList = pinTabInList(prevState.tabsList, tabId);
+      if (nextTabsList === prevState.tabsList) return prevState;
+      const nextActiveTabInfo = prevState.activeKey === tabId ? nextTabsList.find(tab => tab.id === tabId) : prevState.activeTabInfo;
+      return {
+        ...prevState,
+        tabsList: nextTabsList,
+        activeTabInfo: nextActiveTabInfo
+      };
+    });
+  }, []);
+
+  /**
+   * 取消固定标签页：设为可关闭并移动到普通区最前
+   */
+  const unpinTab = useCallback(tabId => {
+    setState(prevState => {
+      const nextTabsList = unpinTabInList(prevState.tabsList, tabId);
+      if (nextTabsList === prevState.tabsList) return prevState;
+      const nextActiveTabInfo = prevState.activeKey === tabId ? nextTabsList.find(tab => tab.id === tabId) : prevState.activeTabInfo;
       return {
         ...prevState,
-        tabsList: arrayMove(prevState.tabsList, activeIndex, overIndex)
+        tabsList: nextTabsList,
+        activeTabInfo: nextActiveTabInfo
       };
     });
   }, []);
@@ -419,7 +461,7 @@ export const useTabsState = options => {
     const flatMenus = flattenMenuData(dataSource.menus || []);
     const targetMenu = flatMenus.find(item => getMenuRoute(item) === currentPath);
     if (!targetMenu || !canOpenAsTab(targetMenu)) return;
-    const existingTab = state.tabsList.find(tab => tab.menuItem?.code === targetMenu.code || tab.url === getMenuRoute(targetMenu));
+    const existingTab = findExistingTab(state.tabsList, targetMenu);
     if (existingTab) {
       if (state.activeKey !== existingTab.id) switchTab(existingTab.id);
       return;
@@ -438,6 +480,8 @@ export const useTabsState = options => {
     closeRightTabs,
     closeAllTabs,
     resetTabs,
-    reorderTabs
+    reorderTabs,
+    pinTab,
+    unpinTab
   };
 };

package/es/ProLayout/components/TabsManager/index.js

@@ -2,7 +2,7 @@ import { useCallback, useMemo, forwardRef, useImperativeHandle, useState, useEff
 import { createPortal } from 'react-dom';
 import { useTabsState } from "./hooks/useTabsState";
 import { useIframeRoute } from "./hooks/useIframeRoute";
-import { flattenMenuData } from "./utils";
+import { flattenMenuData, derivePinned } from "./utils";
 import { TabItemComponent } from "./components/TabItem";
 import { TabsHeader } from "./components/TabsHeader";
 import { TabsContext } from "./components/TabsContext";
@@ -45,7 +45,9 @@ const TabsManager = /*#__PURE__*/forwardRef(({
     closeOtherTabs,
     closeRightTabs,
     closeAllTabs,
-    reorderTabs
+    reorderTabs,
+    pinTab,
+    unpinTab
   } = useTabsState({
     config,
     dataSource,
@@ -165,26 +167,30 @@ const TabsManager = /*#__PURE__*/forwardRef(({
     // menus 为空说明异步数据尚未返回，等 dataSource 变化后重跑，避免用 code 创建占位 tab
     if (sourceMenus.length === 0) return;
     config.fixed.forEach(code => {
-      // 已存在（如缓存恢复）：仅校正 closable，不调 addTab 以保留缓存中的 activeKey
+      // 已存在（如缓存恢复）：仅校正 closable/pinned，不调 addTab 以保留缓存中的 activeKey
       const existing = state.tabsList.find(tab => tab.menuItem?.code === code || tab.code === code);
       if (existing) {
-        if (existing.closable !== false) {
+        if (existing.closable !== false || existing.pinned !== true) {
           updateTab(existing.id, {
-            closable: false
+            closable: false,
+            pinned: true
           });
         }
         return;
       }
       const matchedMenu = sourceMenus.find(item => item.code === code);
+      // pinned:true 使声明式固定标签与用户手动固定统一走 pinned 分区逻辑
       const menuItem = matchedMenu ? {
         ...matchedMenu,
-        closable: false
+        closable: false,
+        pinned: true
       } : {
         id: Date.now(),
         code,
         name: code,
         url: `/${code}`,
-        closable: false
+        closable: false,
+        pinned: true
       };
       // silent: 已有 active(如 iframe 路由命中)时不抢 active;无 active 时仍激活以保留默认行为
       addTabRef.current(menuItem, {
@@ -201,13 +207,25 @@ const TabsManager = /*#__PURE__*/forwardRef(({
     originalOnMenuClick?.(params);
   }, [addTab, originalOnMenuClick]);
 
+  // 切换固定状态：已固定→取消固定，未固定→固定
+  const handleTogglePin = useCallback(tabId => {
+    const target = state.tabsList.find(tab => tab.id === tabId);
+    if (!target) return;
+    if (derivePinned(target)) {
+      unpinTab(tabId);
+    } else {
+      pinTab(tabId);
+    }
+  }, [state.tabsList, pinTab, unpinTab]);
+
   // 创建标签页实例 API
   const tabsInstance = useMemo(() => ({
     addTab: (params, options) => {
       const {
         code,
         name,
-        extra
+        extra,
+        relationKey
       } = params;
       const sourceMenus = Array.isArray(dataSource?.menus) ? flattenMenuData(dataSource.menus) : [];
       const matchedMenu = sourceMenus.find(item => item.code === code);
@@ -215,13 +233,15 @@ const TabsManager = /*#__PURE__*/forwardRef(({
         ...matchedMenu,
         // 允许外部覆盖展示名称和附加数据，但保留菜单原始 closable/url 等配置
         name: name || matchedMenu.name,
-        extra: extra ?? matchedMenu.extra
+        extra: extra ?? matchedMenu.extra,
+        relationKey: relationKey ?? matchedMenu.relationKey
       } : {
         id: Date.now(),
         code,
         name,
         url: `/${code}`,
-        extra
+        extra,
+        relationKey
       };
       addTab(menuItem, options);
     },
@@ -248,25 +268,35 @@ const TabsManager = /*#__PURE__*/forwardRef(({
   // 构建 Tabs items
   const tabsItems = useMemo(() => {
     if (state.tabsList.length === 0) return [];
-    return state.tabsList.map(tab => ({
-      key: tab.id,
-      label: /*#__PURE__*/_jsx(TabItemComponent, {
-        tab: tab,
-        active: tab.id === state.activeKey,
-        onClick: () => switchTab(tab.id),
-        onClose: () => removeTab(tab.id),
-        onCloseOthers: () => closeOtherTabs(tab.id),
-        onCloseRight: () => closeRightTabs(tab.id),
-        onCloseAll: closeAllTabs,
-        tabsList: state.tabsList,
-        menuItems: config?.menuItems,
-        tabMenuClick: config?.tabMenuClick
-      }),
-      closable: false,
-      // 关闭 antd 内置 ×，由 TabItemComponent 自定义按钮处理
-      children: null
-    }));
-  }, [state.tabsList, state.activeKey, config?.menuItems, config?.tabMenuClick, switchTab, removeTab, closeOtherTabs, closeRightTabs, closeAllTabs]);
+
+    // config.fixed 声明的 code 集合：这些标签是强制固定，不允许用户取消固定
+    const forcedFixedCodes = new Set(config?.fixed ?? []);
+    return state.tabsList.map(tab => {
+      const pinned = derivePinned(tab);
+      const pinDisabled = forcedFixedCodes.has(tab.menuItem?.code ?? tab.code);
+      return {
+        key: tab.id,
+        label: /*#__PURE__*/_jsx(TabItemComponent, {
+          tab: tab,
+          active: tab.id === state.activeKey,
+          onClick: () => switchTab(tab.id),
+          onClose: () => removeTab(tab.id),
+          onCloseOthers: () => closeOtherTabs(tab.id),
+          onCloseRight: () => closeRightTabs(tab.id),
+          onCloseAll: closeAllTabs,
+          pinned: pinned,
+          pinDisabled: pinDisabled,
+          onTogglePin: () => handleTogglePin(tab.id),
+          tabsList: state.tabsList,
+          menuItems: config?.menuItems,
+          tabMenuClick: config?.tabMenuClick
+        }),
+        closable: false,
+        // 关闭 antd 内置 ×，由 TabItemComponent 自定义按钮处理
+        children: null
+      };
+    });
+  }, [state.tabsList, state.activeKey, config?.menuItems, config?.tabMenuClick, config?.fixed, switchTab, removeTab, closeOtherTabs, closeRightTabs, closeAllTabs, handleTogglePin]);
   const activeComponent = config?.activeComponent;
   const emptyComponent = config?.empty;
 

package/es/ProLayout/components/TabsManager/propTypes.d.ts

@@ -29,6 +29,12 @@ export interface TabContextMenuProps {
     onCloseOthers: (tabId: string) => void;
     onCloseRight: (tabId: string) => void;
     onCloseAll: () => void;
+    /** 当前标签页是否已固定（决定菜单显示「固定标签」还是「取消固定」） */
+    pinned?: boolean;
+    /** 是否禁用固定/取消固定项（如 config.fixed 声明的强制固定标签不可取消） */
+    pinDisabled?: boolean;
+    /** 切换固定状态回调 */
+    onTogglePin?: (tabId: string) => void;
     /** 自定义菜单项，会与默认菜单项合并 */
     menuItems?: MenuProps['items'];
     /** 自定义菜单项点击回调 */
@@ -77,6 +83,10 @@ export interface UseTabsStateReturn {
     resetTabs: () => void;
     /** 重排标签页顺序 */
     reorderTabs: (activeId: string, overId: string) => void;
+    /** 固定标签页（设为不可关闭并移动到固定区末尾） */
+    pinTab: (tabId: string) => void;
+    /** 取消固定标签页（设为可关闭并移动到普通区最前） */
+    unpinTab: (tabId: string) => void;
 }
 export interface TabsCacheManager {
     save: (state: TabsState) => void;

package/es/ProLayout/components/TabsManager/style/index.less

@@ -228,6 +228,18 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       transition: color 0.2s;
+
+      .pro-tooltip {
+        color: inherit;
+        font-weight: inherit;
+        font-size: inherit;
+      }
+
+      .singleLine {
+        color: inherit;
+        font-weight: inherit;
+        font-size: inherit;
+      }
     }
 
     .pro-layout-tab-close {

package/es/ProLayout/components/TabsManager/utils/index.d.ts

@@ -4,6 +4,8 @@ import { TabItem, MenusType } from '../../../propTypes';
  * 约定优先使用 redirectUrl，其次回退 url
  */
 export declare const getMenuRoute: (menuItem: MenusType) => string;
+export declare const hasRelationKey: (relationKey: MenusType["relationKey"]) => relationKey is string | number;
+export declare const findExistingTab: (tabsList: TabItem[], menuItem: MenusType) => TabItem | undefined;
 /**
  * 根据菜单项生成TabItem
  */
@@ -45,3 +47,33 @@ export declare const isLeafMenuItem: (menuItem: MenusType) => boolean;
  * 规则：只有叶子节点（无 children）才可打开
  */
 export declare const canOpenAsTab: (menuItem: MenusType) => boolean;
+/**
+ * 推导标签页是否处于固定状态。
+ * pinned 为本质状态；未显式设置 pinned 的旧缓存标签，用 closable===false 推导。
+ */
+export declare const derivePinned: (tab: TabItem) => boolean;
+/**
+ * 分区边界：第一个「非固定标签」的下标，等于固定标签的数量。
+ * 约定固定区始终排在普通区左侧，故边界即两区分界点。
+ */
+export declare const getPinnedBoundary: (tabs: TabItem[]) => number;
+/**
+ * 固定标签：将目标标签设为 pinned=true / closable=false，并移动到固定区末尾。
+ * - 已固定则幂等（顺序不变）
+ * - tabId 不存在时返回原数组引用
+ */
+export declare const pinTab: (tabs: TabItem[], tabId: string) => TabItem[];
+/**
+ * 取消固定：将目标标签设为 pinned=false / closable=true，并移动到普通区最前
+ * （即剩余固定区之后的第一位）。
+ * - 已是普通标签则幂等（顺序不变）
+ * - tabId 不存在时返回原数组引用
+ */
+export declare const unpinTab: (tabs: TabItem[], tabId: string) => TabItem[];
+/**
+ * 约束重排：在普通 arrayMove 基础上，钳制落点以维持「固定区在左、普通区在右」不变量。
+ * - 被拖动的普通标签：落点钳制到 >= boundary（不进固定区）
+ * - 被拖动的固定标签：落点钳制到 <= boundary-1（不出固定区）
+ * - 钳制后落点等于原位、或 id 相同/无效时，返回原数组引用（避免无效更新）
+ */
+export declare const reorderWithPinConstraint: (tabs: TabItem[], activeId: string, overId: string) => TabItem[];

package/es/ProLayout/components/TabsManager/utils/index.js

@@ -5,12 +5,22 @@
 export const getMenuRoute = menuItem => {
   return menuItem.redirectUrl || menuItem.url || '';
 };
+export const hasRelationKey = relationKey => relationKey !== undefined && relationKey !== null && relationKey !== '';
+export const findExistingTab = (tabsList, menuItem) => {
+  if (hasRelationKey(menuItem.relationKey)) {
+    return tabsList.find(tab => tab.relationKey === menuItem.relationKey || tab.menuItem?.relationKey === menuItem.relationKey);
+  }
+  const menuRoute = getMenuRoute(menuItem);
+  return tabsList.find(tab => tab.menuItem?.code === menuItem.code || tab.url === menuRoute);
+};
 
 /**
  * 根据菜单项生成TabItem
  */
 export const createTabFromMenu = (menuItem, index = 0) => {
   const route = getMenuRoute(menuItem);
+  // pinned 优先取菜单显式声明，否则由 closable===false 推导（声明式固定标签）
+  const pinned = menuItem.pinned ?? menuItem.closable === false;
   const result = {
     id: String(menuItem.id || menuItem.code || menuItem.url || index),
     code: menuItem.code,
@@ -18,8 +28,10 @@ export const createTabFromMenu = (menuItem, index = 0) => {
     title: menuItem.name,
     url: route,
     closable: menuItem.closable !== false,
+    pinned,
     menuItem,
-    icon: menuItem.icon || menuItem.imgUrl
+    icon: menuItem.icon || menuItem.imgUrl,
+    relationKey: menuItem.relationKey
   };
   return result;
 };
@@ -115,4 +127,97 @@ export const canOpenAsTab = menuItem => {
   if (!menuItem) return false;
   if (!(menuItem.url || menuItem.redirectUrl)) return false;
   return isLeafMenuItem(menuItem);
+};
+
+/**
+ * 推导标签页是否处于固定状态。
+ * pinned 为本质状态；未显式设置 pinned 的旧缓存标签，用 closable===false 推导。
+ */
+export const derivePinned = tab => tab.pinned ?? tab.closable === false;
+
+/**
+ * 分区边界：第一个「非固定标签」的下标，等于固定标签的数量。
+ * 约定固定区始终排在普通区左侧，故边界即两区分界点。
+ */
+export const getPinnedBoundary = tabs => {
+  const index = tabs.findIndex(tab => !derivePinned(tab));
+  return index === -1 ? tabs.length : index;
+};
+
+/**
+ * 不依赖外部库的数组移动（immutable）。
+ * from/to 越界时返回原数组的浅拷贝。
+ */
+const moveItem = (list, from, to) => {
+  const result = [...list];
+  if (from < 0 || from >= result.length || to < 0 || to >= result.length) return result;
+  const [removed] = result.splice(from, 1);
+  result.splice(to, 0, removed);
+  return result;
+};
+
+/**
+ * 固定标签：将目标标签设为 pinned=true / closable=false，并移动到固定区末尾。
+ * - 已固定则幂等（顺序不变）
+ * - tabId 不存在时返回原数组引用
+ */
+export const pinTab = (tabs, tabId) => {
+  const index = tabs.findIndex(tab => tab.id === tabId);
+  if (index === -1) return tabs;
+  if (derivePinned(tabs[index])) return tabs;
+  const pinnedTab = {
+    ...tabs[index],
+    pinned: true,
+    closable: false
+  };
+  // 移除目标后计算固定区末尾位置（= 剩余标签中的固定数量）
+  const rest = tabs.filter((_, i) => i !== index);
+  const insertAt = getPinnedBoundary(rest);
+  return [...rest.slice(0, insertAt), pinnedTab, ...rest.slice(insertAt)];
+};
+
+/**
+ * 取消固定：将目标标签设为 pinned=false / closable=true，并移动到普通区最前
+ * （即剩余固定区之后的第一位）。
+ * - 已是普通标签则幂等（顺序不变）
+ * - tabId 不存在时返回原数组引用
+ */
+export const unpinTab = (tabs, tabId) => {
+  const index = tabs.findIndex(tab => tab.id === tabId);
+  if (index === -1) return tabs;
+  if (!derivePinned(tabs[index])) return tabs;
+  const normalTab = {
+    ...tabs[index],
+    pinned: false,
+    closable: true
+  };
+  const rest = tabs.filter((_, i) => i !== index);
+  const insertAt = getPinnedBoundary(rest);
+  return [...rest.slice(0, insertAt), normalTab, ...rest.slice(insertAt)];
+};
+
+/**
+ * 约束重排：在普通 arrayMove 基础上，钳制落点以维持「固定区在左、普通区在右」不变量。
+ * - 被拖动的普通标签：落点钳制到 >= boundary（不进固定区）
+ * - 被拖动的固定标签：落点钳制到 <= boundary-1（不出固定区）
+ * - 钳制后落点等于原位、或 id 相同/无效时，返回原数组引用（避免无效更新）
+ */
+export const reorderWithPinConstraint = (tabs, activeId, overId) => {
+  if (activeId === overId) return tabs;
+  const activeIndex = tabs.findIndex(tab => tab.id === activeId);
+  const overIndex = tabs.findIndex(tab => tab.id === overId);
+  if (activeIndex === -1 || overIndex === -1) return tabs;
+  const boundary = getPinnedBoundary(tabs);
+  const activePinned = derivePinned(tabs[activeIndex]);
+  let targetIndex = overIndex;
+  if (activePinned) {
+    // 固定标签只能落在固定区内：[0, boundary-1]
+    const maxIndex = boundary - 1;
+    if (targetIndex > maxIndex) targetIndex = maxIndex;
+  } else {
+    // 普通标签只能落在普通区内：[boundary, length-1]
+    if (targetIndex < boundary) targetIndex = boundary;
+  }
+  if (targetIndex === activeIndex) return tabs;
+  return moveItem(tabs, activeIndex, targetIndex);
 };