@zat-design/sisyphus-react-mcp 1.0.1 → 1.0.2

package/meta/components.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.6-beta.3",
+  "version": "4.5.6-beta.4",
   "components": [
     {
       "name": "FormsProvider",

package/meta/examples.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.6-beta.3",
+  "version": "4.5.6-beta.4",
   "examples": [
     {
       "component": "ProAction",
@@ -923,77 +923,77 @@
       "file": "base.tsx",
       "title": "基础使用",
       "note": "",
-      "source": "/**\n * title: ProIcon的基础使用\n * desc: 根据设置的type字段显示对应的图标以及设置size修改图标的显示大小,也可以添加className\n */\nimport { useExternal } from 'ahooks';\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { Button, Divider } from 'antd';\n// 这里为了演示组件demo,组件里引入iconfont.js文件,真实项目中不建议这么做\n\nexport default () => {\n  const status = useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n\n  if (status !== 'ready') {\n    return null;\n  }\n  return (\n    <>\n      <Divider orientation=\"left\">嵌入到Button按钮模式</Divider>\n      <Button type=\"primary\" icon={<ProIcon type=\"tishixinxi\" />}>\n        我是antd primary按钮\n      </Button>\n      <Button type=\"text\" icon={<ProIcon type=\"tishixinxi\" />}>\n        我是antd链接按钮\n      </Button>\n      <Divider orientation=\"left\">icon模式</Divider>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"caozuorizhi\" size={18} rotate={12} className=\"componentClassName\" />\n      </span>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"caozuorizhi\" size={28} />\n      </span>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"caozuorizhi\" size={38} style={{ height: '30px' }} />\n      </span>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"danzhengdayin-daohangcaidan\" size={20} spin />\n      </span>\n    </>\n  );\n};\n"
+      "source": "/**\n * title: ProIcon的基础使用\n * desc: |\n *   根据设置的type字段显示对应的图标以及设置size修改图标的显示大小,也可以添加className\n */\nimport { useExternal } from 'ahooks';\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { Button, Divider } from 'antd';\n// 这里为了演示组件demo,组件里引入iconfont.js文件,真实项目中不建议这么做\n\nexport default () => {\n  const status = useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n\n  if (status !== 'ready') {\n    return null;\n  }\n  return (\n    <>\n      <Divider orientation=\"left\">嵌入到Button按钮模式</Divider>\n      <Button type=\"primary\" icon={<ProIcon type=\"tishixinxi\" />}>\n        我是antd primary按钮\n      </Button>\n      <Button type=\"text\" icon={<ProIcon type=\"tishixinxi\" />}>\n        我是antd链接按钮\n      </Button>\n      <Divider orientation=\"left\">icon模式</Divider>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"caozuorizhi\" size={18} rotate={12} className=\"componentClassName\" />\n      </span>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"caozuorizhi\" size={28} />\n      </span>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"caozuorizhi\" size={38} style={{ height: '30px' }} />\n      </span>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"danzhengdayin-daohangcaidan\" size={20} spin />\n      </span>\n    </>\n  );\n};\n"
     },
     {
       "component": "ProIcon",
       "file": "click.tsx",
       "title": "点击事件",
       "note": "",
-      "source": "/**\n * title: ProIcon的点击事件\n * desc: 可以通过设置属性onClick来完成点击图标后所要完成的事情\n */\nimport { message, Space } from 'antd';\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { useExternal } from 'ahooks';\n\nexport default () => {\n  const proIconOnClick = () => {\n    message.success('您成功点击了图标');\n  };\n  useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n\n  return (\n    <Space orientation=\"vertical\">\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"zonghechaxun-daohangcaidan\" size={25} onClick={proIconOnClick} />\n      </span>\n    </Space>\n  );\n};\n"
+      "source": "/**\n * title: ProIcon的点击事件\n * desc: |\n *   可以通过设置属性onClick来完成点击图标后所要完成的事情\n */\nimport { message, Space } from 'antd';\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { useExternal } from 'ahooks';\n\nexport default () => {\n  const proIconOnClick = () => {\n    message.success('您成功点击了图标');\n  };\n  useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n\n  return (\n    <Space orientation=\"vertical\">\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"zonghechaxun-daohangcaidan\" size={25} onClick={proIconOnClick} />\n      </span>\n    </Space>\n  );\n};\n"
     },
     {
       "component": "ProIcon",
       "file": "color.tsx",
       "title": "设置颜色",
       "note": "",
-      "source": "/**\n * title: 设置ProIcon图标的颜色\n * desc: 可以通过设置属性color来更改图标的显示颜色\n */\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { useExternal } from 'ahooks';\n// 这里为了演示组件demo,组件里引入iconfont.js文件,真实项目中不建议这么做\n\nexport default () => {\n  useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n  return (\n    <>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"danzhengdayin-daohangcaidan\" size={20} color=\"#369\" />\n      </span>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"danzhengdayin-daohangcaidan\" size={28} color=\"red\" />\n      </span>\n    </>\n  );\n};\n"
+      "source": "/**\n * title: 设置ProIcon图标的颜色\n * desc: |\n *   可以通过设置属性color来更改图标的显示颜色\n */\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { useExternal } from 'ahooks';\n// 这里为了演示组件demo,组件里引入iconfont.js文件,真实项目中不建议这么做\n\nexport default () => {\n  useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n  return (\n    <>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"danzhengdayin-daohangcaidan\" size={20} color=\"#369\" />\n      </span>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"danzhengdayin-daohangcaidan\" size={28} color=\"red\" />\n      </span>\n    </>\n  );\n};\n"
     },
     {
       "component": "ProIcon",
       "file": "component.tsx",
       "title": "component 自定义 SVG 组件",
       "note": "",
-      "source": "/**\n * title: ProIcon的component属性\n * desc: component属性支持传入SVG文件路径（webpack导入）或React组件，可通过size和color调整大小和颜色\n */\nimport React from 'react';\nimport { message, Space, Divider } from 'antd';\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport SearchView from './searchView.svg';\n\n// 创建一个 SVG React 组件\nconst SearchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n  <svg width=\"19\" height=\"15\" viewBox=\"0 0 19 15\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <g fill=\"currentColor\" fillRule=\"nonzero\">\n      <path d=\"M18.8595156,13.853235 L15.9118005,9.83277831 C16.9574103,8.79234063 17.6131433,7.33016175 17.6131433,5.70884872 C17.6131433,2.56113225 15.1539732,0 12.1315716,0 C9.10917008,0 6.65,2.56113225 6.65,5.70884872 C6.65,8.85656518 9.10917008,11.4176974 12.1315716,11.4176974 C13.1052358,11.4176974 14.0179175,11.1493815 14.811375,10.6841104 L17.7693681,14.7188392 C17.9043518,14.9029496 18.1078551,15 18.3147844,15 C18.4593609,15 18.6059929,14.952902 18.7293283,14.8537108 C19.0314999,14.6139391 19.0890564,14.1657945 18.8595156,13.853235 Z M8.02107811,5.70813511 C8.02107811,3.34681256 9.86494177,1.42649857 12.1322568,1.42649857 C14.3995719,1.42649857 16.2434356,3.34681256 16.2434356,5.70813511 C16.2434356,8.06945766 14.3995719,9.98977165 12.1322568,9.98977165 C9.86494177,9.98977165 8.02107811,8.06945766 8.02107811,5.70813511 Z\" />\n      <path d=\"M4.9875,2.34375 L0.7125,2.34375 C0.3192,2.34375 0,2.02875 0,1.640625 C0,1.2525 0.3192,0.9375 0.7125,0.9375 L4.9875,0.9375 C5.3808,0.9375 5.7,1.2525 5.7,1.640625 C5.7,2.02875 5.3808,2.34375 4.9875,2.34375 Z\" />\n      <path d=\"M3.95833333,7.96875 L0.791666667,7.96875 C0.354666667,7.96875 0,7.65445313 0,7.265625 C0,6.8775 0.354666667,6.5625 0.791666667,6.5625 L3.95833333,6.5625 C4.39533333,6.5625 4.75,6.8775 4.75,7.265625 C4.75,7.65445313 4.39533333,7.96875 3.95833333,7.96875 Z\" />\n      <path d=\"M7.89230769,13.59375 L0.657692308,13.59375 C0.294646154,13.59375 0,13.2794531 0,12.890625 C0,12.5017969 0.294646154,12.1875 0.657692308,12.1875 L7.89230769,12.1875 C8.25535385,12.1875 8.55,12.5017969 8.55,12.890625 C8.55,13.2794531 8.25535385,13.59375 7.89230769,13.59375 Z\" />\n    </g>\n  </svg>\n);\n\nexport default () => {\n  const proIconOnClick = () => {\n    message.success('您成功点击了图标');\n  };\n\n  return (\n    <div>\n      <div style={{ marginBottom: 16 }}>\n        <h4>方式1: 传入 SVG 文件路径（webpack 导入）</h4>\n        <Space size=\"large\">\n          {/* @ts-ignore */}\n          <ProIcon component={SearchView} size={24} onClick={proIconOnClick} />\n          {/* @ts-ignore */}\n          <ProIcon component={SearchView} size={32} color=\"#1890ff\" onClick={proIconOnClick} />\n          {/* @ts-ignore */}\n          <ProIcon component={SearchView} size={40} color=\"#52c41a\" onClick={proIconOnClick} />\n          {/* @ts-ignore */}\n          <ProIcon\n            component={SearchView}\n            size={32}\n            color=\"#f5222d\"\n            rotate={45}\n            onClick={proIconOnClick}\n          />\n          {/* @ts-ignore */}\n          <ProIcon component={SearchView} size={28} color=\"#722ed1\" spin onClick={proIconOnClick} />\n        </Space>\n      </div>\n\n      <Divider />\n\n      <div>\n        <h4>方式2: 传入 React 组件</h4>\n        <Space size=\"large\">\n          {/* @ts-ignore */}\n          <ProIcon component={SearchIcon} size={24} onClick={proIconOnClick} />\n          {/* @ts-ignore */}\n          <ProIcon component={SearchIcon} size={32} color=\"#1890ff\" onClick={proIconOnClick} />\n          {/* @ts-ignore */}\n          <ProIcon component={SearchIcon} size={40} color=\"#52c41a\" onClick={proIconOnClick} />\n          {/* @ts-ignore */}\n          <ProIcon\n            component={SearchIcon}\n            size={32}\n            color=\"#f5222d\"\n            rotate={45}\n            onClick={proIconOnClick}\n          />\n          {/* @ts-ignore */}\n          <ProIcon component={SearchIcon} size={28} color=\"#722ed1\" spin onClick={proIconOnClick} />\n        </Space>\n      </div>\n    </div>\n  );\n};\n"
+      "source": "/**\n * title: ProIcon的component属性\n * desc: |\n *   component属性支持传入SVG文件路径（webpack导入）或React组件，可通过size和color调整大小和颜色\n */\nimport React from 'react';\nimport { message, Space, Divider } from 'antd';\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport SearchView from './searchView.svg';\n\n// 创建一个 SVG React 组件\nconst SearchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n  <svg width=\"19\" height=\"15\" viewBox=\"0 0 19 15\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <g fill=\"currentColor\" fillRule=\"nonzero\">\n      <path d=\"M18.8595156,13.853235 L15.9118005,9.83277831 C16.9574103,8.79234063 17.6131433,7.33016175 17.6131433,5.70884872 C17.6131433,2.56113225 15.1539732,0 12.1315716,0 C9.10917008,0 6.65,2.56113225 6.65,5.70884872 C6.65,8.85656518 9.10917008,11.4176974 12.1315716,11.4176974 C13.1052358,11.4176974 14.0179175,11.1493815 14.811375,10.6841104 L17.7693681,14.7188392 C17.9043518,14.9029496 18.1078551,15 18.3147844,15 C18.4593609,15 18.6059929,14.952902 18.7293283,14.8537108 C19.0314999,14.6139391 19.0890564,14.1657945 18.8595156,13.853235 Z M8.02107811,5.70813511 C8.02107811,3.34681256 9.86494177,1.42649857 12.1322568,1.42649857 C14.3995719,1.42649857 16.2434356,3.34681256 16.2434356,5.70813511 C16.2434356,8.06945766 14.3995719,9.98977165 12.1322568,9.98977165 C9.86494177,9.98977165 8.02107811,8.06945766 8.02107811,5.70813511 Z\" />\n      <path d=\"M4.9875,2.34375 L0.7125,2.34375 C0.3192,2.34375 0,2.02875 0,1.640625 C0,1.2525 0.3192,0.9375 0.7125,0.9375 L4.9875,0.9375 C5.3808,0.9375 5.7,1.2525 5.7,1.640625 C5.7,2.02875 5.3808,2.34375 4.9875,2.34375 Z\" />\n      <path d=\"M3.95833333,7.96875 L0.791666667,7.96875 C0.354666667,7.96875 0,7.65445313 0,7.265625 C0,6.8775 0.354666667,6.5625 0.791666667,6.5625 L3.95833333,6.5625 C4.39533333,6.5625 4.75,6.8775 4.75,7.265625 C4.75,7.65445313 4.39533333,7.96875 3.95833333,7.96875 Z\" />\n      <path d=\"M7.89230769,13.59375 L0.657692308,13.59375 C0.294646154,13.59375 0,13.2794531 0,12.890625 C0,12.5017969 0.294646154,12.1875 0.657692308,12.1875 L7.89230769,12.1875 C8.25535385,12.1875 8.55,12.5017969 8.55,12.890625 C8.55,13.2794531 8.25535385,13.59375 7.89230769,13.59375 Z\" />\n    </g>\n  </svg>\n);\n\nexport default () => {\n  const proIconOnClick = () => {\n    message.success('您成功点击了图标');\n  };\n\n  return (\n    <div>\n      <div style={{ marginBottom: 16 }}>\n        <h4>方式1: 传入 SVG 文件路径（webpack 导入）</h4>\n        <Space size=\"large\">\n          {/* @ts-ignore */}\n          <ProIcon component={SearchView} size={24} onClick={proIconOnClick} />\n          {/* @ts-ignore */}\n          <ProIcon component={SearchView} size={32} color=\"#1890ff\" onClick={proIconOnClick} />\n          {/* @ts-ignore */}\n          <ProIcon component={SearchView} size={40} color=\"#52c41a\" onClick={proIconOnClick} />\n          {/* @ts-ignore */}\n          <ProIcon\n            component={SearchView}\n            size={32}\n            color=\"#f5222d\"\n            rotate={45}\n            onClick={proIconOnClick}\n          />\n          {/* @ts-ignore */}\n          <ProIcon component={SearchView} size={28} color=\"#722ed1\" spin onClick={proIconOnClick} />\n        </Space>\n      </div>\n\n      <Divider />\n\n      <div>\n        <h4>方式2: 传入 React 组件</h4>\n        <Space size=\"large\">\n          {/* @ts-ignore */}\n          <ProIcon component={SearchIcon} size={24} onClick={proIconOnClick} />\n          {/* @ts-ignore */}\n          <ProIcon component={SearchIcon} size={32} color=\"#1890ff\" onClick={proIconOnClick} />\n          {/* @ts-ignore */}\n          <ProIcon component={SearchIcon} size={40} color=\"#52c41a\" onClick={proIconOnClick} />\n          {/* @ts-ignore */}\n          <ProIcon\n            component={SearchIcon}\n            size={32}\n            color=\"#f5222d\"\n            rotate={45}\n            onClick={proIconOnClick}\n          />\n          {/* @ts-ignore */}\n          <ProIcon component={SearchIcon} size={28} color=\"#722ed1\" spin onClick={proIconOnClick} />\n        </Space>\n      </div>\n    </div>\n  );\n};\n"
     },
     {
       "component": "ProIcon",
       "file": "disabled.tsx",
       "title": "disabled 禁止",
       "note": "",
-      "source": "/**\n * title: ProIcon的disabled\n * desc: 可以通过设置属性disabled禁止点击\n */\nimport { message } from 'antd';\nimport { useExternal } from 'ahooks';\nimport { ProIcon } from '@zat-design/sisyphus-react';\n\nexport default () => {\n  const proIconOnClick = () => {\n    message.success('您成功点击了图标');\n  };\n  const status = useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n\n  return (\n    <>\n      <ProIcon type=\"zonghechaxun-daohangcaidan\" size={25} onClick={proIconOnClick} disabled />\n    </>\n  );\n};\n"
+      "source": "/**\n * title: ProIcon的disabled\n * desc: |\n *   可以通过设置属性disabled禁止点击\n */\nimport { message } from 'antd';\nimport { useExternal } from 'ahooks';\nimport { ProIcon } from '@zat-design/sisyphus-react';\n\nexport default () => {\n  const proIconOnClick = () => {\n    message.success('您成功点击了图标');\n  };\n  const status = useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n\n  return (\n    <>\n      <ProIcon type=\"zonghechaxun-daohangcaidan\" size={25} onClick={proIconOnClick} disabled />\n    </>\n  );\n};\n"
     },
     {
       "component": "ProIcon",
       "file": "loading.tsx",
       "title": "loading 加载",
       "note": "",
-      "source": "/**\n * title: 设置ProIcon图标的loading\n * desc: icon 模式使用 `spin` 表达加载状态；`mode=\"button\"` 时通过 `buttonProps.loading` 控制按钮 loading\n */\nimport { useSetState, useExternal } from 'ahooks';\nimport { ProIcon } from '@zat-design/sisyphus-react';\n\nexport default () => {\n  const [{ loading }, setState] = useSetState({\n    loading: true,\n  });\n  useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n  return (\n    <>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon\n          mode=\"button\"\n          size={20}\n          buttonProps={{\n            loading,\n          }}\n        >\n          ProIcon 按钮查看\n        </ProIcon>\n      </span>\n    </>\n  );\n};\n"
+      "source": "/**\n * title: 设置ProIcon图标的loading\n * desc: |\n *   icon 模式使用 `spin` 表达加载状态；`mode=\"button\"` 时通过 `buttonProps.loading` 控制按钮 loading\n */\nimport { useSetState, useExternal } from 'ahooks';\nimport { ProIcon } from '@zat-design/sisyphus-react';\n\nexport default () => {\n  const [{ loading }, setState] = useSetState({\n    loading: true,\n  });\n  useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n  return (\n    <>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon\n          mode=\"button\"\n          size={20}\n          buttonProps={{\n            loading,\n          }}\n        >\n          ProIcon 按钮查看\n        </ProIcon>\n      </span>\n    </>\n  );\n};\n"
     },
     {
       "component": "ProIcon",
       "file": "mode.tsx",
       "title": "mode 模式",
       "note": "",
-      "source": "/**\n * title: ProIcon的两种模式\n * desc: 用于中后台系统中，对于表格操作栏进行【中文、图标】的互换，详情配置见ProConfigProvider\n */\nimport { Space } from 'antd';\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { useExternal } from 'ahooks';\n\nexport default () => {\n  const status = useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n  return (\n    <Space>\n      <ProIcon mode=\"button\">查看</ProIcon>\n      {/* mode button type自动转换对应语言名 */}\n      <ProIcon mode=\"button\" type=\"view\" />\n    </Space>\n  );\n};\n"
+      "source": "/**\n * title: ProIcon的两种模式\n * desc: |\n *   用于中后台系统中，对于表格操作栏进行【中文、图标】的互换，详情配置见ProConfigProvider\n */\nimport { Space } from 'antd';\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { useExternal } from 'ahooks';\n\nexport default () => {\n  const status = useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n  return (\n    <Space>\n      <ProIcon mode=\"button\">查看</ProIcon>\n      {/* mode button type自动转换对应语言名 */}\n      <ProIcon mode=\"button\" type=\"view\" />\n    </Space>\n  );\n};\n"
     },
     {
       "component": "ProIcon",
       "file": "theme.tsx",
       "title": "跟随主题色",
       "note": "",
-      "source": "/**\n * title: ProIcon的基础使用\n * desc: 设置theme字段为true跟随主题色, 默认不跟随\n */\nimport { useExternal } from 'ahooks';\nimport { ProIcon } from '@zat-design/sisyphus-react';\n\nexport default () => {\n  const status = useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n\n  if (status !== 'ready') {\n    return null;\n  }\n  return (\n    <>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"caozuorizhi\" size={18} theme />\n      </span>\n    </>\n  );\n};\n"
+      "source": "/**\n * title: ProIcon的基础使用\n * desc: |\n *   设置theme字段为true跟随主题色, 默认不跟随\n */\nimport { useExternal } from 'ahooks';\nimport { ProIcon } from '@zat-design/sisyphus-react';\n\nexport default () => {\n  const status = useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n\n  if (status !== 'ready') {\n    return null;\n  }\n  return (\n    <>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"caozuorizhi\" size={18} theme />\n      </span>\n    </>\n  );\n};\n"
     },
     {
       "component": "ProIcon",
       "file": "tooltip.tsx",
       "title": "设置 tooltip",
       "note": "",
-      "source": "/**\n * title: 设置ProIcon图标的tooltip\n * desc: 可以通过设置属性tooltip来更改图标的tooltip\n */\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { useExternal } from 'ahooks';\n\nexport default () => {\n  useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n  return (\n    <>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"danzhengdayin-daohangcaidan\" tooltip=\"我是提示一\" size={20} />\n      </span>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"danzhengdayin-daohangcaidan\" tooltip=\"我是提示二\" size={28} />\n      </span>\n    </>\n  );\n};\n"
+      "source": "/**\n * title: 设置ProIcon图标的tooltip\n * desc: |\n *   可以通过设置属性tooltip来更改图标的tooltip\n */\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { useExternal } from 'ahooks';\n\nexport default () => {\n  useExternal(\n    'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n  );\n  return (\n    <>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"danzhengdayin-daohangcaidan\" tooltip=\"我是提示一\" size={20} />\n      </span>\n      <span style={{ margin: '0 20px' }}>\n        <ProIcon type=\"danzhengdayin-daohangcaidan\" tooltip=\"我是提示二\" size={28} />\n      </span>\n    </>\n  );\n};\n"
     },
     {
       "component": "ProLayout",
       "file": "appsFlat.tsx",
       "title": "应用入口(扁平模式) （v4.1.0 新增）",
-      "note": "在 Header 中展示应用入口图标,点击后弹出应用列表。支持扁平列表模式,适用于应用数量较少的场景。",
-      "source": "/**\n * title: 应用入口(扁平模式)\n * desc: 在Header中展示应用入口,支持扁平列表模式\n * iframe: 600\n */\n\nimport { useToggle } from 'ahooks';\nimport { Avatar, Button, Dropdown, message } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport type { AppsOption } from '@zat-design/sisyphus-react';\nimport menusData from './data/menusData';\n\nconst Layout = ({ children }: any) => {\n  const userName = menusData.userInfo.simpleCname;\n  const [state, { toggle }] = useToggle(false);\n  const items: MenuProps['items'] = [\n    {\n      key: '1',\n      label: (\n        <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhongan.tech/\">\n          退出登录\n        </a>\n      ),\n    },\n  ];\n\n  // 扁平应用列表配置\n  const appsOptions: AppsOption[] = [\n    {\n      value: 'app1',\n      label: '承保管理',\n      icon: <span style={{ fontSize: 18 }}>📋</span>,\n      onChange: (value) => {\n        message.success(`点击了应用: ${value}`);\n      },\n    },\n    {\n      value: 'app2',\n      label: '理赔管理',\n      icon: <span style={{ fontSize: 18 }}>💼</span>,\n      onChange: (value) => {\n        message.success(`点击了应用: ${value}`);\n      },\n    },\n    {\n      value: 'app3',\n      label: '财务管理',\n      icon: <span style={{ fontSize: 18 }}>💰</span>,\n      onChange: (value) => {\n        message.success(`点击了应用: ${value}`);\n      },\n    },\n    {\n      value: 'app4',\n      label: '系统设置',\n      icon: <span style={{ fontSize: 18 }}>⚙️</span>,\n      onChange: (value) => {\n        message.success(`点击了应用: ${value}`);\n      },\n    },\n  ];\n\n  return (\n    <>\n      <ProLayout\n        title=\"保险核心系统\"\n        iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n        dataSource={menusData}\n        collapsed={state}\n        pathPrefix=\"/property-frame-ui\"\n        appsOptions={appsOptions}\n        onMenuClick={(data) => {\n          console.log('data', data);\n        }}\n        rightContentRender={\n          <>\n            {userName ? (\n              <Dropdown menu={{ items }}>\n                <span>\n                  <Avatar>{userName.substring(0, 1)}</Avatar>\n                  <span style={{ marginLeft: 8 }}>{userName}</span>\n                </span>\n              </Dropdown>\n            ) : (\n              <span\n                onClick={() => {\n                  // login();\n                }}\n              >\n                登录\n              </span>\n            )}\n          </>\n        }\n      >\n        {children}\n        我是content内容区域,子应用显示区域\n        <Button\n          style={{ marginLeft: 16 }}\n          onClick={() => {\n            toggle();\n          }}\n        >\n          控制菜单的按钮\n        </Button>\n      </ProLayout>\n    </>\n  );\n};\n\nexport default Layout;\n"
+      "note": "",
+      "source": "/**\n * title: 应用入口(扁平模式)\n * desc: |\n *   在 Header 中展示应用入口,支持扁平列表模式\n * iframe: 600\n */\n\nimport { useToggle } from 'ahooks';\nimport { Avatar, Button, Dropdown, message } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport type { AppsOption } from '@zat-design/sisyphus-react';\nimport menusData from './data/menusData';\n\nconst Layout = ({ children }: any) => {\n  const userName = menusData.userInfo.simpleCname;\n  const [state, { toggle }] = useToggle(false);\n  const items: MenuProps['items'] = [\n    {\n      key: '1',\n      label: (\n        <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhongan.tech/\">\n          退出登录\n        </a>\n      ),\n    },\n  ];\n\n  // 扁平应用列表配置\n  const appsOptions: AppsOption[] = [\n    {\n      value: 'app1',\n      label: '承保管理',\n      icon: <span style={{ fontSize: 18 }}>📋</span>,\n      onChange: (value) => {\n        message.success(`点击了应用: ${value}`);\n      },\n    },\n    {\n      value: 'app2',\n      label: '理赔管理',\n      icon: <span style={{ fontSize: 18 }}>💼</span>,\n      onChange: (value) => {\n        message.success(`点击了应用: ${value}`);\n      },\n    },\n    {\n      value: 'app3',\n      label: '财务管理',\n      icon: <span style={{ fontSize: 18 }}>💰</span>,\n      onChange: (value) => {\n        message.success(`点击了应用: ${value}`);\n      },\n    },\n    {\n      value: 'app4',\n      label: '系统设置',\n      icon: <span style={{ fontSize: 18 }}>⚙️</span>,\n      onChange: (value) => {\n        message.success(`点击了应用: ${value}`);\n      },\n    },\n  ];\n\n  return (\n    <>\n      <ProLayout\n        title=\"保险核心系统\"\n        iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n        dataSource={menusData}\n        collapsed={state}\n        pathPrefix=\"/property-frame-ui\"\n        appsOptions={appsOptions}\n        onMenuClick={(data) => {\n          console.log('data', data);\n        }}\n        rightContentRender={\n          <>\n            {userName ? (\n              <Dropdown menu={{ items }}>\n                <span>\n                  <Avatar>{userName.substring(0, 1)}</Avatar>\n                  <span style={{ marginLeft: 8 }}>{userName}</span>\n                </span>\n              </Dropdown>\n            ) : (\n              <span\n                onClick={() => {\n                  // login();\n                }}\n              >\n                登录\n              </span>\n            )}\n          </>\n        }\n      >\n        {children}\n        我是content内容区域,子应用显示区域\n        <Button\n          style={{ marginLeft: 16 }}\n          onClick={() => {\n            toggle();\n          }}\n        >\n          控制菜单的按钮\n        </Button>\n      </ProLayout>\n    </>\n  );\n};\n\nexport default Layout;\n"
     },
     {
       "component": "ProLayout",
       "file": "appsGroup.tsx",
       "title": "应用入口(分组模式) （v4.1.0 新增）",
-      "note": "在 Header 中展示应用入口图标,点击后弹出分组的应用列表。支持分组模式,适用于应用数量较多需要分类管理的场景。",
-      "source": "/**\n * title: 应用入口(分组模式)\n * desc: 在Header中展示应用入口,支持分组模式\n * iframe: 600\n */\n\nimport { useToggle } from 'ahooks';\nimport { Avatar, Button, Dropdown, message } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport type { AppsGroup } from '@zat-design/sisyphus-react';\nimport menusData from './data/menusData';\n\nconst Layout = ({ children }: any) => {\n  const userName = menusData.userInfo.simpleCname;\n  const [state, { toggle }] = useToggle(false);\n  const items: MenuProps['items'] = [\n    {\n      key: '1',\n      label: (\n        <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhongan.tech/\">\n          退出登录\n        </a>\n      ),\n    },\n  ];\n\n  // 分组应用列表配置\n  const appsOptions: AppsGroup[] = [\n    {\n      value: 'business',\n      label: '业务管理',\n      options: [\n        {\n          value: 'app1',\n          label: 'AI智检',\n          icon: <span style={{ fontSize: 32 }}>📊</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app2',\n          label: 'AI语音平台',\n          icon: <span style={{ fontSize: 32 }}>🎙️</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app3',\n          label: '智能代练机器人',\n          icon: <span style={{ fontSize: 32 }}>🤖</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app4',\n          label: 'AI中台',\n          icon: <span style={{ fontSize: 32 }}>💼</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app5',\n          label: 'AI质量中台',\n          icon: <span style={{ fontSize: 32 }}>📈</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n      ],\n    },\n    {\n      value: 'system',\n      label: '增长平台',\n      options: [\n        {\n          value: 'app6',\n          label: '事件中心',\n          icon: <span style={{ fontSize: 32 }}>🎯</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app7',\n          label: '客户数据...',\n          icon: <span style={{ fontSize: 32 }}>👥</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app8',\n          label: '营销策略...',\n          icon: <span style={{ fontSize: 32 }}>📢</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app9',\n          label: '社域运营...',\n          icon: <span style={{ fontSize: 32 }}>🌐</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app10',\n          label: '验证消息',\n          icon: <span style={{ fontSize: 32 }}>✅</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app11',\n          label: '活动工厂',\n          icon: <span style={{ fontSize: 32 }}>🏭</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app12',\n          label: '提质分析...',\n          icon: <span style={{ fontSize: 32 }}>📊</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app13',\n          label: '数据分析...',\n          icon: <span style={{ fontSize: 32 }}>📉</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app14',\n          label: '内容管理...',\n          icon: <span style={{ fontSize: 32 }}>📝</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app15',\n          label: '权益管理...',\n          icon: <span style={{ fontSize: 32 }}>🎁</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app16',\n          label: '数据决策AI...',\n          icon: <span style={{ fontSize: 32 }}>🧠</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n      ],\n    },\n  ];\n\n  return (\n    <>\n      <ProLayout\n        title=\"保险核心系统\"\n        iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n        dataSource={menusData}\n        collapsed={state}\n        pathPrefix=\"/property-frame-ui\"\n        appsOptions={appsOptions}\n        onMenuClick={(data) => {\n          console.log('data', data);\n        }}\n        rightContentRender={\n          <>\n            {userName ? (\n              <Dropdown menu={{ items }}>\n                <span>\n                  <Avatar>{userName.substring(0, 1)}</Avatar>\n                  <span style={{ marginLeft: 8 }}>{userName}</span>\n                </span>\n              </Dropdown>\n            ) : (\n              <span\n                onClick={() => {\n                  // login();\n                }}\n              >\n                登录\n              </span>\n            )}\n          </>\n        }\n      >\n        {children}\n        我是content内容区域,子应用显示区域\n        <Button\n          style={{ marginLeft: 16 }}\n          onClick={() => {\n            toggle();\n          }}\n        >\n          控制菜单的按钮\n        </Button>\n      </ProLayout>\n    </>\n  );\n};\n\nexport default Layout;\n"
+      "note": "",
+      "source": "/**\n * title: 应用入口(分组模式)\n * desc: |\n *   在 Header 中展示应用入口,支持分组模式\n * iframe: 600\n */\n\nimport { useToggle } from 'ahooks';\nimport { Avatar, Button, Dropdown, message } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport type { AppsGroup } from '@zat-design/sisyphus-react';\nimport menusData from './data/menusData';\n\nconst Layout = ({ children }: any) => {\n  const userName = menusData.userInfo.simpleCname;\n  const [state, { toggle }] = useToggle(false);\n  const items: MenuProps['items'] = [\n    {\n      key: '1',\n      label: (\n        <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhongan.tech/\">\n          退出登录\n        </a>\n      ),\n    },\n  ];\n\n  // 分组应用列表配置\n  const appsOptions: AppsGroup[] = [\n    {\n      value: 'business',\n      label: '业务管理',\n      options: [\n        {\n          value: 'app1',\n          label: 'AI智检',\n          icon: <span style={{ fontSize: 32 }}>📊</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app2',\n          label: 'AI语音平台',\n          icon: <span style={{ fontSize: 32 }}>🎙️</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app3',\n          label: '智能代练机器人',\n          icon: <span style={{ fontSize: 32 }}>🤖</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app4',\n          label: 'AI中台',\n          icon: <span style={{ fontSize: 32 }}>💼</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app5',\n          label: 'AI质量中台',\n          icon: <span style={{ fontSize: 32 }}>📈</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n      ],\n    },\n    {\n      value: 'system',\n      label: '增长平台',\n      options: [\n        {\n          value: 'app6',\n          label: '事件中心',\n          icon: <span style={{ fontSize: 32 }}>🎯</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app7',\n          label: '客户数据...',\n          icon: <span style={{ fontSize: 32 }}>👥</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app8',\n          label: '营销策略...',\n          icon: <span style={{ fontSize: 32 }}>📢</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app9',\n          label: '社域运营...',\n          icon: <span style={{ fontSize: 32 }}>🌐</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app10',\n          label: '验证消息',\n          icon: <span style={{ fontSize: 32 }}>✅</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app11',\n          label: '活动工厂',\n          icon: <span style={{ fontSize: 32 }}>🏭</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app12',\n          label: '提质分析...',\n          icon: <span style={{ fontSize: 32 }}>📊</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app13',\n          label: '数据分析...',\n          icon: <span style={{ fontSize: 32 }}>📉</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app14',\n          label: '内容管理...',\n          icon: <span style={{ fontSize: 32 }}>📝</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app15',\n          label: '权益管理...',\n          icon: <span style={{ fontSize: 32 }}>🎁</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n        {\n          value: 'app16',\n          label: '数据决策AI...',\n          icon: <span style={{ fontSize: 32 }}>🧠</span>,\n          onChange: (value) => {\n            message.success(`点击了应用: ${value}`);\n          },\n        },\n      ],\n    },\n  ];\n\n  return (\n    <>\n      <ProLayout\n        title=\"保险核心系统\"\n        iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n        dataSource={menusData}\n        collapsed={state}\n        pathPrefix=\"/property-frame-ui\"\n        appsOptions={appsOptions}\n        onMenuClick={(data) => {\n          console.log('data', data);\n        }}\n        rightContentRender={\n          <>\n            {userName ? (\n              <Dropdown menu={{ items }}>\n                <span>\n                  <Avatar>{userName.substring(0, 1)}</Avatar>\n                  <span style={{ marginLeft: 8 }}>{userName}</span>\n                </span>\n              </Dropdown>\n            ) : (\n              <span\n                onClick={() => {\n                  // login();\n                }}\n              >\n                登录\n              </span>\n            )}\n          </>\n        }\n      >\n        {children}\n        我是content内容区域,子应用显示区域\n        <Button\n          style={{ marginLeft: 16 }}\n          onClick={() => {\n            toggle();\n          }}\n        >\n          控制菜单的按钮\n        </Button>\n      </ProLayout>\n    </>\n  );\n};\n\nexport default Layout;\n"
     },
     {
       "component": "ProLayout",
@@ -1048,8 +1048,8 @@
       "component": "ProLayout",
       "file": "tabsAdvanced.tsx",
       "title": "标签页模式",
-      "note": "通过设置 `mode=\"tabs\"` 开启标签页模式，菜单点击将会创建新标签页而非直接路由跳转，类似于 IDE 的标签页功能。",
-      "source": "/**\n * iframe: 600\n * title: 标签页高级配置\n * desc: 展示标签页的高级配置选项和回调函数的使用\n */\n\nimport { useCallback } from 'react';\nimport { useToggle } from 'ahooks';\nimport { Avatar, Dropdown, Card } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport menusData from './data/menusTabsData'; // 菜单数据源\nimport { resolveTabComponent } from './tabsComponents';\n\nconst TabsAdvancedDemo = ({ children }: any) => {\n  const userName = menusData.userInfo.simpleCname;\n  const [collapsed, { toggle }] = useToggle(false);\n\n  const items: MenuProps['items'] = [\n    {\n      key: '1',\n      label: (\n        <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhonganinfo.com/\">\n          退出登录\n        </a>\n      ),\n    },\n  ];\n\n  const handleTabChange = useCallback((activeKey, activeTabInfo, allTabs) => {\n    console.log('标签页切换:', { activeKey, activeTabInfo, allTabs });\n  }, []);\n\n  return (\n    <>\n      <ProLayout\n        title=\"标签页高级配置演示\"\n        logo={\n          <img\n            src=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\"\n            alt=\"logo\"\n          />\n        }\n        iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n        dataSource={menusData}\n        collapsed={collapsed}\n        pathPrefix=\"/property-frame-ui\"\n        // 开启标签页模式\n        mode=\"tabs\"\n        // 动态标签页配置\n        tabs={{\n          storage: 'localStorage',\n          cacheKey: 'advanced-tabs-demo',\n          onTabChange: handleTabChange,\n          activeComponent: resolveTabComponent, // 激活组件解析器\n          empty: (\n            <Card title=\"标签页演示内容\" style={{ margin: '16px 0' }}>\n              <p>欢迎使用 ProLayout 标签页功能！</p>\n              <p>点击左侧菜单体验标签页功能：</p>\n              <ul>\n                <li>📌 点击菜单创建新标签页</li>\n                <li>🖱️ 右键标签页查看更多操作</li>\n                <li>❌ 点击 × 关闭标签页</li>\n                <li>💾 标签页会自动缓存</li>\n              </ul>\n            </Card>\n          ),\n        }}\n        rightContentRender={\n          <>\n            {userName ? (\n              <Dropdown menu={{ items }}>\n                <span>\n                  <Avatar>{userName.substring(0, 1)}</Avatar>\n                  <span style={{ marginLeft: 8 }}>{userName}</span>\n                </span>\n              </Dropdown>\n            ) : (\n              <span onClick={() => {}}>登录</span>\n            )}\n          </>\n        }\n      >\n        {children}\n      </ProLayout>\n    </>\n  );\n};\n\nexport default TabsAdvancedDemo;\n"
+      "note": "",
+      "source": "/**\n * iframe: 600\n * title: 标签页高级配置\n * desc: |\n *   展示标签页的高级配置选项和回调函数的使用\n */\n\nimport { useCallback } from 'react';\nimport { useToggle } from 'ahooks';\nimport { Avatar, Dropdown, Card } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport menusData from './data/menusTabsData'; // 菜单数据源\nimport { resolveTabComponent } from './tabsComponents';\n\nconst TabsAdvancedDemo = ({ children }: any) => {\n  const userName = menusData.userInfo.simpleCname;\n  const [collapsed, { toggle }] = useToggle(false);\n\n  const items: MenuProps['items'] = [\n    {\n      key: '1',\n      label: (\n        <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhonganinfo.com/\">\n          退出登录\n        </a>\n      ),\n    },\n  ];\n\n  const handleTabChange = useCallback((activeKey, activeTabInfo, allTabs) => {\n    console.log('标签页切换:', { activeKey, activeTabInfo, allTabs });\n  }, []);\n\n  return (\n    <>\n      <ProLayout\n        title=\"标签页高级配置演示\"\n        logo={\n          <img\n            src=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\"\n            alt=\"logo\"\n          />\n        }\n        iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n        dataSource={menusData}\n        collapsed={collapsed}\n        pathPrefix=\"/property-frame-ui\"\n        // 开启标签页模式\n        mode=\"tabs\"\n        // 动态标签页配置\n        tabs={{\n          storage: 'localStorage',\n          cacheKey: 'advanced-tabs-demo',\n          onTabChange: handleTabChange,\n          activeComponent: resolveTabComponent, // 激活组件解析器\n          empty: (\n            <Card title=\"标签页演示内容\" style={{ margin: '16px 0' }}>\n              <p>欢迎使用 ProLayout 标签页功能！</p>\n              <p>点击左侧菜单体验标签页功能：</p>\n              <ul>\n                <li>📌 点击菜单创建新标签页</li>\n                <li>🖱️ 右键标签页查看更多操作</li>\n                <li>❌ 点击 × 关闭标签页</li>\n                <li>💾 标签页会自动缓存</li>\n              </ul>\n            </Card>\n          ),\n        }}\n        rightContentRender={\n          <>\n            {userName ? (\n              <Dropdown menu={{ items }}>\n                <span>\n                  <Avatar>{userName.substring(0, 1)}</Avatar>\n                  <span style={{ marginLeft: 8 }}>{userName}</span>\n                </span>\n              </Dropdown>\n            ) : (\n              <span onClick={() => {}}>登录</span>\n            )}\n          </>\n        }\n      >\n        {children}\n      </ProLayout>\n    </>\n  );\n};\n\nexport default TabsAdvancedDemo;\n"
     },
     {
       "component": "ProLayout",
@@ -1062,22 +1062,29 @@
       "component": "ProLayout",
       "file": "tabsFixed.tsx",
       "title": "固定标签页",
-      "note": "在菜单数据中设置 `closable: false`，点击该菜单时会创建固定标签页。固定标签页没有关闭按钮，且不会被\"关闭全部\"、\"关闭其他\"等批量操作移除。 通过 `tabs.fixed` 可以声明式地配置初始固定标签页，无需手动调用 `useProLayoutTabs`：",
-      "source": "/**\n * iframe: 600\n * title: 标签页高级配置\n * desc: 展示标签页的高级配置选项和回调函数的使用\n */\nimport { useToggle } from 'ahooks';\nimport React, { useState, useEffect } from 'react';\nimport { Avatar, Dropdown } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport menusFixedTabsData from './data/menusFixedTabsData';\nimport { resolveTabComponent } from './tabsComponents';\n\nconst TabsFixedDemo = ({ children, ...res }: any) => {\n  const [collapsed, { toggle }] = useToggle(false);\n\n  // 模拟异步加载：初始菜单为空，800ms 后返回真实数据\n  const [dataSource, setDataSource] = useState<typeof menusFixedTabsData>({\n    ...menusFixedTabsData,\n    menus: [],\n  });\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDataSource(menusFixedTabsData);\n    }, 800);\n    return () => clearTimeout(timer);\n  }, []);\n\n  const userName = dataSource.userInfo.simpleCname;\n  const items: MenuProps['items'] = [{ key: '1', label: '退出登录' }];\n\n  return (\n    <ProLayout\n      title=\"固定标签页演示\"\n      logo={\n        <img src=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\" alt=\"logo\" />\n      }\n      iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n      dataSource={dataSource}\n      collapsed={collapsed}\n      onCollapsedChange={toggle}\n      mode=\"tabs\"\n      tabs={{\n        \n        storage: 'sessionStorage',\n        cacheKey: 'fixed-tabs-demo',\n        activeComponent: resolveTabComponent,\n        fixed: ['Workspace'],\n        // iframe 嵌入支持:被第三方系统 iframe 嵌入(URL 带 ?isIframe)时进入 pure 模式,\n        // 按 routes 命中后只渲染投保单录入内容,隐藏 Header / Menu / TabsBar\n        iframe: {\n          routes: [\n            {\n              path: '/~demos/prolayout-tabsfixed',\n              code: 'PolicyInput',\n              name: '投保单录入',\n            },\n          ],\n        },\n      }}\n      rightContentRender={\n        <Dropdown menu={{ items }}>\n          <span>\n            <Avatar>{userName.substring(0, 1)}</Avatar>\n            <span style={{ marginLeft: 8 }}>{userName}</span>\n          </span>\n        </Dropdown>\n      }\n    >\n      {children}\n    </ProLayout>\n  );\n};\n\nexport default TabsFixedDemo;\n"
+      "note": "",
+      "source": "/**\n * iframe: 600\n * title: 固定标签页（声明式 + 手动固定）\n * desc: |\n *   演示 tabs.fixed 声明式固定「工作台」+ 右键手动固定/取消固定。\n *   固定标签排在固定区、不可被批量关闭；声明式固定的「取消固定」为禁用，顺序变更写入缓存。\n */\nimport { useToggle } from 'ahooks';\nimport React, { useState, useEffect } from 'react';\nimport { Avatar, Dropdown } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport menusFixedTabsData from './data/menusFixedTabsData';\nimport { resolveTabComponent } from './tabsComponents';\n\nconst TabsFixedDemo = ({ children, ...res }: any) => {\n  const [collapsed, { toggle }] = useToggle(false);\n\n  // 模拟异步加载：初始菜单为空，800ms 后返回真实数据\n  const [dataSource, setDataSource] = useState<typeof menusFixedTabsData>({\n    ...menusFixedTabsData,\n    menus: [],\n  });\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDataSource(menusFixedTabsData);\n    }, 800);\n    return () => clearTimeout(timer);\n  }, []);\n\n  const userName = dataSource.userInfo.simpleCname;\n  const items: MenuProps['items'] = [{ key: '1', label: '退出登录' }];\n\n  return (\n    <ProLayout\n      title=\"固定标签页演示\"\n      logo={\n        <img src=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\" alt=\"logo\" />\n      }\n      iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n      dataSource={dataSource}\n      collapsed={collapsed}\n      onCollapsedChange={toggle}\n      mode=\"tabs\"\n      tabs={{\n        storage: 'sessionStorage',\n        cacheKey: 'fixed-tabs-demo',\n        activeComponent: resolveTabComponent,\n        fixed: ['Workspace'],\n        // iframe 嵌入支持:被第三方系统 iframe 嵌入(URL 带 ?isIframe)时进入 pure 模式,\n        // 按 routes 命中后只渲染投保单录入内容,隐藏 Header / Menu / TabsBar\n        iframe: {\n          routes: [\n            {\n              path: '/~demos/prolayout-tabsfixed',\n              code: 'PolicyInput',\n              name: '投保单录入',\n            },\n          ],\n        },\n      }}\n      rightContentRender={\n        <Dropdown menu={{ items }}>\n          <span>\n            <Avatar>{userName.substring(0, 1)}</Avatar>\n            <span style={{ marginLeft: 8 }}>{userName}</span>\n          </span>\n        </Dropdown>\n      }\n    >\n      {children}\n    </ProLayout>\n  );\n};\n\nexport default TabsFixedDemo;\n"
     },
     {
       "component": "ProLayout",
       "file": "tabsIframe.tsx",
       "title": "标签页模式 iframe 嵌入（v4.4.0 新增）",
-      "note": "通过 `tabs.iframe` 配置,让一个使用 ProLayout 的系统**同时具备「独立访问」和「被第三方 iframe 嵌入」两套行为**: - **独立访问**(URL 上没有 `?isIframe`): 完整 Layout(Header + Menu + Tabs)正常渲染,`tabs.iframe` 配置被忽略 - **被嵌入**(URL 上拼 `?isIframe=1`,大小写不敏感,值不限): 进入 pure 模式, 按 `tabs.iframe.routes` 匹配 `pathname` 自动 addTab 并激活,隐藏 Header / Menu / TabsBar, 仅渲染当前 tab 内容 URL 上其余的 query 参数会自动作为 `extra` 透传给业务组件 props, 业务方需保证 query 字段名与组件 props 名一致。",
-      "source": "/**\n * iframe: 600\n * title: 标签页 iframe 嵌入\n * desc: |\n *   演示一个外层第三方 host 系统通过 iframe 嵌入「固定标签页 demo」(tabsFixed)。\n */\n\nconst TabsIframeDemo = () => (\n  <div style={{ padding: 16, background: '#f5f7fa', minHeight: 600 }}>\n    <h3 style={{ margin: '0 0 8px' }}>外层第三方 host 系统</h3>\n    <p style={{ margin: '0 0 16px', color: '#666', lineHeight: 1.6 }}>\n      下方 iframe 嵌入了 <code>tabsFixed</code> demo(配置了 <code>tabs.iframe.routes</code>)。\n      iframe URL 上拼了 <code>?isIframe=1</code>,子系统检测到后进入 pure 模式,\n      隐藏 Header / Menu / TabsBar,只渲染 routes 命中的投保单录入内容。\n    </p>\n    <iframe\n      title=\"投保单录入(iframe 嵌入 tabsFixed)\"\n      src=\"/~demos/prolayout-tabsfixed?isIframe=1&taskId=7300041&taskNo=abc0098\"\n      style={{\n        width: '100%',\n        height: 520,\n        border: '1px solid #e5e7eb',\n        borderRadius: 8,\n        background: '#fff',\n        display: 'block',\n      }}\n    />\n  </div>\n);\n\nexport default TabsIframeDemo;\n"
+      "note": "URL 上其余的 query 参数会自动作为 `extra` 透传给业务组件 props, 业务方需保证 query 字段名与组件 props 名一致。",
+      "source": "/**\n * iframe: 600\n * title: 标签页 iframe 嵌入\n * desc: |\n *   演示外层 host 通过 iframe 嵌入 tabsFixed demo；URL 拼 ?isIframe=1 后子系统进入 pure 模式，仅渲染 routes 命中内容。\n */\n\nconst TabsIframeDemo = () => (\n  <div style={{ padding: 16, background: '#f5f7fa', minHeight: 600 }}>\n    <h3 style={{ margin: '0 0 8px' }}>外层第三方 host 系统</h3>\n    <p style={{ margin: '0 0 16px', color: '#666', lineHeight: 1.6 }}>\n      下方 iframe 嵌入了 <code>tabsFixed</code> demo(配置了 <code>tabs.iframe.routes</code>)。\n      iframe URL 上拼了 <code>?isIframe=1</code>,子系统检测到后进入 pure 模式, 隐藏 Header / Menu /\n      TabsBar,只渲染 routes 命中的投保单录入内容。\n    </p>\n    <iframe\n      title=\"投保单录入(iframe 嵌入 tabsFixed)\"\n      src=\"/~demos/prolayout-tabsfixed?isIframe=1&taskId=7300041&taskNo=abc0098\"\n      style={{\n        width: '100%',\n        height: 520,\n        border: '1px solid #e5e7eb',\n        borderRadius: 8,\n        background: '#fff',\n        display: 'block',\n      }}\n    />\n  </div>\n);\n\nexport default TabsIframeDemo;\n"
+    },
+    {
+      "component": "ProLayout",
+      "file": "tabsRelationDetail.tsx",
+      "title": "详情标签页关联复用（查询 tab → 详情 tab）",
+      "note": "",
+      "source": "/**\n * iframe: 640\n * title: 详情标签页关联复用\n * desc: |\n *   详情作为独立 tab 打开：addTab 传入 relationKey，相同 key 复用已有 tab 并切换，不同 key 新开；forceNew 可强制新建。\n */\nimport { useState } from 'react';\nimport { Avatar, Button, Descriptions, Form, Tag } from 'antd';\nimport { ProForm, ProHeader, ProLayout, ProTable } from '@zat-design/sisyphus-react';\nimport type {\n  ProFormColumnType,\n  ProTableColumnType,\n  ProTableListResponseType,\n} from '@zat-design/sisyphus-react';\nimport menusData from './data/menusSubViewData';\nimport { getUseAntdTableDemoData } from '../../ProTable/demos/data/useAntdTableDemoData';\n\nconst { useAntdTable } = ProTable;\n\nconst searchColumn: ProFormColumnType[] = [\n  { type: 'Input', label: '产品代码', name: 'productCode' },\n  { type: 'Input', label: '产品名称', name: 'productName' },\n  { type: 'Input', label: '产品公司', name: 'companyName' },\n];\n\nconst ProductDetail = ({ record }: { record: Record<string, any> }) => {\n  return (\n    <>\n      <ProHeader\n        breadcrumbColumns={[\n          { type: 'breadcrumb', value: '产品详情' },\n          { type: 'tag', value: record.productCode, tag: record.productStatus },\n        ]}\n      />\n      <Descriptions bordered column={2}>\n        <Descriptions.Item label=\"产品代码\">{record.productCode}</Descriptions.Item>\n        <Descriptions.Item label=\"产品名称\">{record.productName}</Descriptions.Item>\n        <Descriptions.Item label=\"产品公司\">{record.companyName}</Descriptions.Item>\n        <Descriptions.Item label=\"产品状态\">{record.productStatus}</Descriptions.Item>\n        <Descriptions.Item label=\"更新日期\" span={2}>\n          {record.updateDate}\n        </Descriptions.Item>\n      </Descriptions>\n      <div style={{ marginTop: 16, color: '#666' }}>\n        当前详情是独立 tab。回到「产品查询」后再次点击同一产品的「查看」，会直接激活这个详情\n        tab；点击其他产品会新开详情 tab。\n      </div>\n    </>\n  );\n};\n\nconst ProductQueryList = () => {\n  const [layoutTabs] = ProLayout.useProLayoutTabs();\n  const [form] = Form.useForm();\n\n  const getTableData = (data: any) =>\n    new Promise<ProTableListResponseType<Record<string, any>>>((resolve) => {\n      setTimeout(() => {\n        resolve({\n          status: 200,\n          // @ts-ignore demo 数据\n          data: {\n            list: getUseAntdTableDemoData(data.pageNum),\n            total: 50,\n            pageNum: 1,\n            pageSize: 10,\n          },\n          message: '',\n        });\n      }, 300);\n    });\n\n  const { onSearch, onReset, tableProps } = useAntdTable(getTableData, {\n    form,\n    rowKey: 'productId',\n    rowSelections: true,\n    transformResponse: (res: any) => ({ ...res.data }),\n  });\n\n  const handleView = (record: Record<string, any>) => {\n    layoutTabs.addTab({\n      code: 'ProductDetail',\n      name: `产品详情-${record.productName}-${record.productCode}`,\n      relationKey: `product-detail:${record.productId}`,\n      extra: { record },\n    });\n  };\n\n  const columns: ProTableColumnType[] = [\n    { title: '产品代码', dataIndex: 'productCode', width: 160 },\n    { title: '产品名称', dataIndex: 'productName', width: 220 },\n    { title: '产品公司', dataIndex: 'companyName', width: 160 },\n    {\n      title: '产品状态',\n      dataIndex: 'productStatus',\n      width: 120,\n      render: (text: string) => <Tag color=\"green\">{text}</Tag>,\n    },\n    {\n      title: '操作',\n      dataIndex: 'operate',\n      width: 120,\n      fixed: 'right',\n      render: (_: string, record: Record<string, any>) => (\n        <Button type=\"link\" onClick={() => handleView(record)}>\n          查看\n        </Button>\n      ),\n    },\n  ];\n\n  return (\n    <>\n      <ProHeader title=\"产品查询\" />\n      <ProForm\n        columns={searchColumn}\n        confirmLoading={tableProps.loading}\n        form={form}\n        onCancel={onReset}\n        onFinish={onSearch}\n      />\n      <ProTable\n        tableId=\"tabs-relation-detail-demo\"\n        columns={columns}\n        scroll={{ x: 'max-content' }}\n        {...tableProps}\n      />\n    </>\n  );\n};\n\nconst tabComponentMap: Record<string, React.FC<any>> = {\n  ProductQuery: ProductQueryList,\n  ProductDetail,\n};\n\nconst resolveTabComponent = (code?: string): React.FC<any> =>\n  tabComponentMap[code || ''] || ProductQueryList;\n\nconst TabsRelationDetailDemo = ({ children }: any) => {\n  const [collapsed] = useState(false);\n  const userName = menusData.userInfo.simpleCname;\n\n  return (\n    <ProLayout\n      title=\"详情标签页关联复用\"\n      logo={\n        <img src=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\" alt=\"logo\" />\n      }\n      iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n      dataSource={menusData}\n      collapsed={collapsed}\n      mode=\"tabs\"\n      tabs={{\n        storage: 'sessionStorage',\n        cacheKey: 'tabs-relation-detail-demo',\n        fixed: ['ProductQuery'],\n        activeComponent: resolveTabComponent,\n      }}\n      rightContentRender={\n        <span>\n          <Avatar>{userName.substring(0, 1)}</Avatar>\n          <span style={{ marginLeft: 8 }}>{userName}</span>\n        </span>\n      }\n    >\n      {children}\n    </ProLayout>\n  );\n};\n\nexport default TabsRelationDetailDemo;\n"
     },
     {
       "component": "ProLayout",
       "file": "tabsSubView.tsx",
       "title": "标签页内子视图（查询 → 详情 → 返回保留状态）",
-      "note": "常见业务场景：一个常驻 tab 的第一层是**查询入口**，点击操作列进入**详情**或继续工作流，返回时希望查询页的状态（查询条件、分页、已选行、滚动位置）**完整保留、且不重新请求接口**。 针对该场景，`ProLayout.useProLayoutTabs()` 暴露了 tab 内子视图栈 API，**默认行为不变**（菜单点击仍新开 tab），业务组件显式调用才进入双视图： - `layoutTabs.pushView(node)`：在**当前激活 tab** 内压入一层子视图（如详情页）。入口页/下层会被隐藏（`display:none`）但**不卸载**，因此其内部状态、滚动位置完整保留。 - `layoutTabs.back()`：销毁当前 tab 的栈顶子视图，露出下一层（栈空时露出入口页）。back 会真正卸载栈顶节点，无内存堆积。 - `layoutTabs.getViewStack()`：获取当前激活 tab 的子视图栈（入口页不在其中）。 支持多层钻取（列表 → 详情 → 二级详情）；关闭 tab 时其子视图栈会被自动清除。详情页头部用 `ProHeader` 的 `showBack` + `onBack={layoutTabs.back}` 实现「返回 + 标题」。 > 说明：子视图只活在内存、不持久化。刷新页面后 tab 仍会由缓存恢复，但会回到入口页初始态。",
-      "source": "/**\n * iframe: 640\n * title: 标签页内子视图（查询→详情→返回保留状态）\n * desc: tab 第一层是查询入口，点击「查看」通过 layoutTabs.pushView 在同一 tab 内钻取详情；详情头部用 ProHeader 的返回按钮调用 layoutTabs.back 返回。入口列表全程不卸载，返回后查询条件/分页/已选行/滚动位置完整保留，且不重新请求接口。\n */\nimport { useState } from 'react';\nimport { Avatar, Button, Form, Space, Tag, Descriptions } from 'antd';\nimport { ProTable, ProForm, ProLayout, ProHeader } from '@zat-design/sisyphus-react';\nimport type {\n  ProTableColumnType,\n  ProFormColumnType,\n  ProTableListResponseType,\n} from '@zat-design/sisyphus-react';\nimport menusData from './data/menusSubViewData';\nimport { getUseAntdTableDemoData } from '../../ProTable/demos/data/useAntdTableDemoData';\n\nconst { useAntdTable } = ProTable;\n\nconst searchColumn: ProFormColumnType[] = [\n  { type: 'Input', label: '产品代码', name: 'productCode' },\n  { type: 'Input', label: '产品名称', name: 'productName' },\n  { type: 'Input', label: '产品公司', name: 'companyName' },\n];\n\n/** 二级详情：验证子视图栈可多层钻取 */\nconst ProductSubDetail = ({ record }: { record: Record<string, any> }) => {\n  const [layoutTabs] = ProLayout.useProLayoutTabs();\n  return (\n    <>\n      <ProHeader title=\"关联条款\" showBack onBack={() => layoutTabs.back()} />\n      <div style={{ padding: 16 }}>\n        <Descriptions bordered column={2}>\n          <Descriptions.Item label=\"产品代码\">{record.productCode}</Descriptions.Item>\n          <Descriptions.Item label=\"条款版本\">V1.0</Descriptions.Item>\n          <Descriptions.Item label=\"条款名称\" span={2}>\n            {record.productName}（重大疾病保险条款）\n          </Descriptions.Item>\n        </Descriptions>\n        <div style={{ height: 600, marginTop: 16, color: '#999' }}>\n          这是二级详情，点击左上角「返回」回到上一层详情——上一层详情的状态同样保留。\n        </div>\n      </div>\n    </>\n  );\n};\n\n/** 详情页：头部保留返回 + 标题，内容随便填充 */\nconst ProductDetail = ({ record }: { record: Record<string, any> }) => {\n  const [layoutTabs] = ProLayout.useProLayoutTabs();\n  const [form] = Form.useForm();\n\n  return (\n    <>\n      {/* 用 breadcrumbColumns 承载标题+标签，避免与 title 同时使用导致标题重复渲染 */}\n      <ProHeader\n        showBack\n        autoBack={0}\n        onBack={() => layoutTabs.back()}\n        breadcrumbColumns={[\n          { type: 'breadcrumb', value: '编辑单证配置' },\n          { type: 'tag', value: record.productCode, tag: record.productStatus },\n        ]}\n      />\n      <div style={{ padding: 16 }}>\n        <ProForm\n          form={form}\n          footer={false}\n          initialValues={{\n            productName: record.productName,\n            companyName: record.companyName,\n            productStatus: record.productStatus,\n            remark: '在此编辑单证配置，返回后查询列表的状态保持不变。',\n          }}\n          columns={[\n            { type: 'Input', label: '产品名称', name: 'productName' },\n            { type: 'Input', label: '产品公司', name: 'companyName' },\n            { type: 'Input', label: '产品状态', name: 'productStatus' },\n            { type: 'TextArea', label: '备注', name: 'remark' },\n          ]}\n        />\n        <Space style={{ marginTop: 8 }}>\n          <Button\n            type=\"primary\"\n            onClick={() => layoutTabs.pushView(<ProductSubDetail record={record} />)}\n          >\n            查看关联条款（再钻一层）\n          </Button>\n        </Space>\n      </div>\n    </>\n  );\n};\n\n/** 入口页：查询列表。点击「查看」在当前 tab 内 pushView 详情 */\nconst ProductQueryList = () => {\n  const [layoutTabs] = ProLayout.useProLayoutTabs();\n  const [form] = Form.useForm();\n\n  const getTableData = (data: any) =>\n    new Promise<ProTableListResponseType<Record<string, any>>>((resolve) => {\n      setTimeout(() => {\n        resolve({\n          status: 200,\n          // @ts-ignore demo 数据\n          data: {\n            list: getUseAntdTableDemoData(data.pageNum),\n            total: 50,\n            pageNum: 1,\n            pageSize: 10,\n          },\n          message: '',\n        });\n      }, 800);\n    });\n\n  const { onSearch, onReset, tableProps } = useAntdTable(getTableData, {\n    form,\n    rowKey: 'productId',\n    rowSelections: true,\n    transformResponse: (res: any) => ({ ...res.data }),\n  });\n\n  const columns: ProTableColumnType[] = [\n    { title: '产品代码', dataIndex: 'productCode', width: 160 },\n    { title: '产品名称', dataIndex: 'productName', width: 220 },\n    { title: '产品公司', dataIndex: 'companyName', width: 160 },\n    {\n      title: '产品状态',\n      dataIndex: 'productStatus',\n      width: 120,\n      render: (text: string) => <Tag color=\"green\">{text}</Tag>,\n    },\n    {\n      title: '操作',\n      dataIndex: 'operate',\n      width: 120,\n      fixed: 'right',\n      render: (_: string, record: Record<string, any>) => (\n        <Button type=\"link\" onClick={() => layoutTabs.pushView(<ProductDetail record={record} />)}>\n          查看\n        </Button>\n      ),\n    },\n  ];\n\n  return (\n    <>\n      <ProHeader title=\"产品查询\" />\n      <ProForm\n        columns={searchColumn}\n        confirmLoading={tableProps.loading}\n        form={form}\n        onCancel={onReset}\n        onFinish={onSearch}\n      />\n      <ProTable\n        tableId=\"tabs-subview-demo\"\n        columns={columns}\n        scroll={{ x: 'max-content' }}\n        {...tableProps}\n      />\n    </>\n  );\n};\n\n// 激活组件解析器：把菜单 code 映射到入口组件\nconst tabComponentMap: Record<string, React.FC> = {\n  ProductQuery: ProductQueryList,\n};\nconst resolveTabComponent = (code?: string): React.FC =>\n  tabComponentMap[code || ''] || ProductQueryList;\n\nconst TabsSubViewDemo = ({ children }: any) => {\n  const [collapsed] = useState(false);\n  const userName = menusData.userInfo.simpleCname;\n\n  return (\n    <ProLayout\n      title=\"标签页内子视图\"\n      logo={\n        <img src=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\" alt=\"logo\" />\n      }\n      iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n      dataSource={menusData}\n      collapsed={collapsed}\n      mode=\"tabs\"\n      tabs={{\n        storage: 'sessionStorage',\n        cacheKey: 'tabs-subview-demo',\n        activeComponent: resolveTabComponent,\n      }}\n      rightContentRender={\n        <span>\n          <Avatar>{userName.substring(0, 1)}</Avatar>\n          <span style={{ marginLeft: 8 }}>{userName}</span>\n        </span>\n      }\n    >\n      {children}\n    </ProLayout>\n  );\n};\n\nexport default TabsSubViewDemo;\n"
+      "note": "",
+      "source": "/**\n * iframe: 640\n * title: 标签页内子视图（查询→详情→返回保留状态）\n * desc: |\n *   常驻 tab 内查询→详情钻取：点击「查看」调用 pushView 压入详情，ProHeader 返回调用 back。\n *   入口页隐藏但不卸载，返回后查询条件/分页/选中行/滚动位置完整保留且不重新请求；支持多层钻取，关闭 tab 自动清栈。\n */\nimport { useState } from 'react';\nimport { Avatar, Button, Form, Space, Tag, Descriptions } from 'antd';\nimport { ProTable, ProForm, ProLayout, ProHeader } from '@zat-design/sisyphus-react';\nimport type {\n  ProTableColumnType,\n  ProFormColumnType,\n  ProTableListResponseType,\n} from '@zat-design/sisyphus-react';\nimport menusData from './data/menusSubViewData';\nimport { getUseAntdTableDemoData } from '../../ProTable/demos/data/useAntdTableDemoData';\n\nconst { useAntdTable } = ProTable;\n\nconst searchColumn: ProFormColumnType[] = [\n  { type: 'Input', label: '产品代码', name: 'productCode' },\n  { type: 'Input', label: '产品名称', name: 'productName' },\n  { type: 'Input', label: '产品公司', name: 'companyName' },\n];\n\n/** 二级详情：验证子视图栈可多层钻取 */\nconst ProductSubDetail = ({ record }: { record: Record<string, any> }) => {\n  const [layoutTabs] = ProLayout.useProLayoutTabs();\n  return (\n    <>\n      <ProHeader title=\"关联条款\" showBack onBack={() => layoutTabs.back()} />\n      <div style={{ padding: 16 }}>\n        <Descriptions bordered column={2}>\n          <Descriptions.Item label=\"产品代码\">{record.productCode}</Descriptions.Item>\n          <Descriptions.Item label=\"条款版本\">V1.0</Descriptions.Item>\n          <Descriptions.Item label=\"条款名称\" span={2}>\n            {record.productName}（重大疾病保险条款）\n          </Descriptions.Item>\n        </Descriptions>\n        <div style={{ height: 600, marginTop: 16, color: '#999' }}>\n          这是二级详情，点击左上角「返回」回到上一层详情——上一层详情的状态同样保留。\n        </div>\n      </div>\n    </>\n  );\n};\n\n/** 详情页：头部保留返回 + 标题，内容随便填充 */\nconst ProductDetail = ({ record }: { record: Record<string, any> }) => {\n  const [layoutTabs] = ProLayout.useProLayoutTabs();\n  const [form] = Form.useForm();\n\n  return (\n    <>\n      {/* 用 breadcrumbColumns 承载标题+标签，避免与 title 同时使用导致标题重复渲染 */}\n      <ProHeader\n        showBack\n        autoBack={0}\n        onBack={() => layoutTabs.back()}\n        breadcrumbColumns={[\n          { type: 'breadcrumb', value: '编辑单证配置' },\n          { type: 'tag', value: record.productCode, tag: record.productStatus },\n        ]}\n      />\n      <ProForm\n        form={form}\n        footer={false}\n        initialValues={{\n          productName: record.productName,\n          companyName: record.companyName,\n          productStatus: record.productStatus,\n          remark: '在此编辑单证配置，返回后查询列表的状态保持不变。',\n        }}\n        columns={[\n          { type: 'Input', label: '产品名称', name: 'productName' },\n          { type: 'Input', label: '产品公司', name: 'companyName' },\n          { type: 'Input', label: '产品状态', name: 'productStatus' },\n          { type: 'TextArea', label: '备注', name: 'remark' },\n        ]}\n      />\n      <Space style={{ marginTop: 8 }}>\n        <Button\n          type=\"primary\"\n          onClick={() => layoutTabs.pushView(<ProductSubDetail record={record} />)}\n        >\n          查看关联条款（再钻一层）\n        </Button>\n      </Space>\n    </>\n  );\n};\n\n/** 入口页：查询列表。点击「查看」在当前 tab 内 pushView 详情 */\nconst ProductQueryList = () => {\n  const [layoutTabs] = ProLayout.useProLayoutTabs();\n  const [form] = Form.useForm();\n\n  const getTableData = (data: any) =>\n    new Promise<ProTableListResponseType<Record<string, any>>>((resolve) => {\n      setTimeout(() => {\n        resolve({\n          status: 200,\n          // @ts-ignore demo 数据\n          data: {\n            list: getUseAntdTableDemoData(data.pageNum),\n            total: 50,\n            pageNum: 1,\n            pageSize: 10,\n          },\n          message: '',\n        });\n      }, 800);\n    });\n\n  const { onSearch, onReset, tableProps } = useAntdTable(getTableData, {\n    form,\n    rowKey: 'productId',\n    rowSelections: true,\n    transformResponse: (res: any) => ({ ...res.data }),\n  });\n\n  const columns: ProTableColumnType[] = [\n    { title: '产品代码', dataIndex: 'productCode', width: 160 },\n    { title: '产品名称', dataIndex: 'productName', width: 220 },\n    { title: '产品公司', dataIndex: 'companyName', width: 160 },\n    {\n      title: '产品状态',\n      dataIndex: 'productStatus',\n      width: 120,\n      render: (text: string) => <Tag color=\"green\">{text}</Tag>,\n    },\n    {\n      title: '操作',\n      dataIndex: 'operate',\n      width: 120,\n      fixed: 'right',\n      render: (_: string, record: Record<string, any>) => (\n        <Button type=\"link\" onClick={() => layoutTabs.pushView(<ProductDetail record={record} />)}>\n          查看\n        </Button>\n      ),\n    },\n  ];\n\n  return (\n    <>\n      <ProHeader title=\"产品查询\" />\n      <ProForm\n        columns={searchColumn}\n        confirmLoading={tableProps.loading}\n        form={form}\n        onCancel={onReset}\n        onFinish={onSearch}\n      />\n      <ProTable\n        tableId=\"tabs-subview-demo\"\n        columns={columns}\n        scroll={{ x: 'max-content' }}\n        {...tableProps}\n      />\n    </>\n  );\n};\n\n// 激活组件解析器：把菜单 code 映射到入口组件\nconst tabComponentMap: Record<string, React.FC> = {\n  ProductQuery: ProductQueryList,\n};\nconst resolveTabComponent = (code?: string): React.FC =>\n  tabComponentMap[code || ''] || ProductQueryList;\n\nconst TabsSubViewDemo = ({ children }: any) => {\n  const [collapsed] = useState(false);\n  const userName = menusData.userInfo.simpleCname;\n\n  return (\n    <ProLayout\n      title=\"标签页内子视图\"\n      logo={\n        <img src=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\" alt=\"logo\" />\n      }\n      iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n      dataSource={menusData}\n      collapsed={collapsed}\n      mode=\"tabs\"\n      tabs={{\n        storage: 'sessionStorage',\n        cacheKey: 'tabs-subview-demo',\n        activeComponent: resolveTabComponent,\n      }}\n      rightContentRender={\n        <span>\n          <Avatar>{userName.substring(0, 1)}</Avatar>\n          <span style={{ marginLeft: 8 }}>{userName}</span>\n        </span>\n      }\n    >\n      {children}\n    </ProLayout>\n  );\n};\n\nexport default TabsSubViewDemo;\n"
     },
     {
       "component": "ProLayout",

package/meta/props.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.6-beta.3",
+  "version": "4.5.6-beta.4",
   "components": {
     "FormsProvider": {
       "source": "ts-interface",
@@ -2653,6 +2653,11 @@
               "required": false,
               "description": "额外扩展数据，通过 addTab 的 extra 参数传入"
             },
+            "relationKey": {
+              "type": "string | number",
+              "required": false,
+              "description": "标签页关联键；相同关联键的业务详情重复打开时复用已有标签页"
+            },
             "menuItem": {
               "type": "MenusType",
               "required": false,
@@ -2660,6 +2665,31 @@
             }
           }
         },
+        {
+          "title": "useProLayoutTabs()",
+          "props": {
+            "code": {
+              "type": "string",
+              "required": false,
+              "description": "组件标识码，对应 activeComponent 解析函数的入参"
+            },
+            "name": {
+              "type": "string",
+              "required": false,
+              "description": "标签页显示名称"
+            },
+            "extra": {
+              "type": "Record<string, any>",
+              "required": false,
+              "description": "额外业务数据，会透传给 activeComponent 返回的组件作为 props"
+            },
+            "relationKey": {
+              "type": "string | number",
+              "required": false,
+              "description": "标签页关联键；相同关联键的详情页重复打开时复用已有 tab，不同关联键即使 code 相同也新开"
+            }
+          }
+        },
         {
           "title": "useProLayoutTabs()",
           "props": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react-mcp",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "MCP server for @zat-design/sisyphus-react — 向 AI 编码助手暴露组件库的清单/API/示例查询能力",
   "type": "module",
   "bin": {