@zat-design/sisyphus-react-mcp 0.1.5 → 0.1.6

package/meta/components.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.5-beta.1",
+  "version": "4.5.6-beta.2",
   "components": [
     {
       "name": "FormsProvider",
@@ -70,6 +70,13 @@
       ],
       "importPath": "@zat-design/sisyphus-react"
     },
+    {
+      "name": "ProHeader",
+      "category": "布局",
+      "description": "ProHeader 头部",
+      "whenToUse": [],
+      "importPath": "@zat-design/sisyphus-react"
+    },
     {
       "name": "ProIcon",
       "category": "通用",
@@ -98,6 +105,17 @@
       "whenToUse": [],
       "importPath": "@zat-design/sisyphus-react"
     },
+    {
+      "name": "ProStepTab",
+      "category": "数据录入",
+      "description": "ProStepTab 分步表单 Tab",
+      "whenToUse": [
+        "需要分步表单时",
+        "需要表单刷新保持激活状态时",
+        "需要表单分步激活时"
+      ],
+      "importPath": "@zat-design/sisyphus-react"
+    },
     {
       "name": "ProTable",
       "category": "数据展示",

package/meta/examples.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.5-beta.1",
+  "version": "4.5.6-beta.2",
   "examples": [
     {
       "component": "ProAction",
@@ -883,6 +883,41 @@
       "note": "",
       "source": "import { Form, Input } from 'antd';\nimport dayjs from 'dayjs';\nimport { useEffect } from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst CustomComponent = (props) => {\n  return <Input {...props} />;\n};\n\nconst ProFormViewDemo = () => {\n  const [form] = Form.useForm();\n\n  const columns: ProFormColumnType[] = [\n    {\n      type: 'Input',\n      label: '姓名',\n      name: 'name',\n    },\n    {\n      type: 'DatePicker',\n      label: '出生日期',\n      name: 'birthday',\n    },\n    {\n      component: <CustomComponent />, // 自定义组件,viewRender实现视图模式\n      viewRender: (value) => {\n        return value;\n      },\n      label: '自定义组件',\n      name: 'customComponent',\n    },\n    {\n      type: 'InputNumber',\n      label: '金额千分位',\n      name: 'amount',\n      viewType: 'thousandth',\n    },\n    {\n      type: 'InputNumber',\n      label: '数字百分比(%)',\n      name: 'percent',\n      viewType: 'percent',\n    },\n    {\n      type: 'InputNumber',\n      label: '数字千分比(‰)',\n      name: 'perMill',\n      viewType: 'permillage',\n    },\n  ];\n\n  useEffect(() => {\n    form.setFieldsValue({\n      name: '柳智敏',\n      birthday: dayjs('2000-04-12'),\n      customAntdComponent: '自定义表单组件',\n      customComponent: '自定义组件',\n      amount: 1000000,\n      percent: 0.8,\n      perMill: 0.08,\n    });\n  }, []);\n\n  return (\n    <>\n      <ProForm form={form} columns={columns} isView footer={false} />\n    </>\n  );\n};\n\nexport default ProFormViewDemo;\n"
     },
+    {
+      "component": "ProHeader",
+      "file": "base.tsx",
+      "title": "基本使用",
+      "note": "",
+      "source": "/**\n * iframe: 600\n */\n/* eslint-disable no-alert */\nimport { Button } from 'antd';\nimport { ProLayout, ProConfigProvider, ProHeader } from '@zat-design/sisyphus-react';\nimport { provideConfig } from '../../../../ProTable/demos/provide';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n  return (\n    <ProConfigProvider value={provideConfig}>\n      <ProLayout\n        iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n        dataSource={menusData}\n        collapsed={false}\n      >\n        {children}\n        <ProHeader\n          breadcrumbColumns={[\n            {\n              type: 'breadcrumb',\n              value: '比例调整',\n              tag: '版本号2.0',\n            },\n          ]}\n          actionRender={[\n            <Button type=\"link\">分保意见</Button>,\n            <Button type=\"link\">操作日志</Button>,\n          ]}\n          describeColumns={[\n            {\n              label: '报案号',\n              value: 'T1306C01202200000211034',\n              copyable: true,\n            },\n            {\n              label: '链接号',\n              value: 'PPT06C01202200000211034',\n              link: 'https://procomponents.zhongan.tech/',\n            },\n            {\n              label: '产品名称',\n              value: '产品 06C3-综合意外New产品名称',\n              tag: '版本号2.0',\n            },\n          ]}\n          subDescribeColumns={[\n            {\n              label: '起保日期',\n              value: '2022-08-30 00:00:00',\n            },\n            {\n              label: '枚举name',\n              valueType: 'enumName',\n              code: 'serviceType',\n              value: 23,\n            },\n            {\n              label: '枚举code-name',\n              valueType: 'enumCodeName',\n              code: 'serviceType',\n              value: 23,\n            },\n            {\n              label: '年月日',\n              valueType: 'date',\n              value: new Date(),\n            },\n            {\n              label: '年月日时分秒',\n              valueType: 'dateTime',\n              value: new Date(),\n            },\n            {\n              label: '总保额',\n              valueType: 'thousandth',\n              value: 123,\n            },\n            {\n              label: '总签单保费（含税）',\n              valueType: 'thousandth',\n              value: 943.4,\n            },\n            {\n              label: '总签单保费',\n              valueType: 'thousandth',\n              precision: 4,\n              value: '56123.1234',\n            },\n          ]}\n          onBack={() => {\n            alert('返回上一步');\n          }}\n        />\n      </ProLayout>\n    </ProConfigProvider>\n  );\n};\n\nexport default Layout;\n"
+    },
+    {
+      "component": "ProHeader",
+      "file": "check.tsx",
+      "title": "返回再确认",
+      "note": "用于编辑页面，未保存误操作返回的场景，通过 isConfirmBack 进行开关控制",
+      "source": "/**\n * iframe: 600\n */\n/* eslint-disable no-alert */\nimport { ProLayout, ProHeader } from '@zat-design/sisyphus-react';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n  return (\n    <>\n      <ProLayout\n        iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n        dataSource={menusData}\n        collapsed={false}\n      >\n        <ProHeader\n          breadcrumbColumns={[\n            {\n              type: 'breadcrumb',\n              value: '我是标题二',\n            },\n          ]}\n          isConfirmBack\n          onBack={() => {\n            alert('返回上一步');\n          }}\n        />\n        {children}\n      </ProLayout>\n    </>\n  );\n};\n\nexport default Layout;\n"
+    },
+    {
+      "component": "ProHeader",
+      "file": "omit.tsx",
+      "title": "多描述不换行展示",
+      "note": "",
+      "source": "/**\n * iframe: 600\n */\n/* eslint-disable no-alert */\nimport { Button } from 'antd';\nimport { ProLayout, ProConfigProvider, ProHeader } from '@zat-design/sisyphus-react';\nimport { provideConfig } from '../../../../ProTable/demos/provide';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n  return (\n    <ProConfigProvider value={provideConfig}>\n      <ProLayout\n        iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n        dataSource={menusData}\n        collapsed={false}\n      >\n        {children}\n        <ProHeader\n          breadcrumbColumns={[\n            {\n              type: 'breadcrumb',\n              value: '比例调整',\n              tag: '版本号2.0',\n            },\n          ]}\n          actionRender={[\n            <Button type=\"link\">分保意见</Button>,\n            <Button type=\"link\">操作日志</Button>,\n          ]}\n          describeColumns={[\n            {\n              label: '报案号',\n              value: 'T1306C01202200000211034',\n              copyable: true,\n              width: 285,\n            },\n            {\n              label: '产品名称',\n              width: 'calc(100% - 333px)',\n              items: [\n                {\n                  value: '产品 06C3-综合意外New产品名称',\n                  tag: '版本号2.0',\n                },\n                {\n                  value: '产品 06C3-综合意外New产品名称1',\n                  tag: '版本号2.0',\n                },\n                {\n                  value: '产品 06C3-综合意外New产品名称2',\n                  tag: '版本号2.0',\n                },\n                {\n                  value: '产品 06C3-综合意外New产品名称3',\n                  tag: '版本号2.0',\n                },\n              ],\n            },\n          ]}\n          subDescribeColumns={[\n            {\n              label: '起保日期',\n              value: '2022-08-30 00:00:00',\n            },\n            {\n              label: '枚举name',\n              valueType: 'enumName',\n              code: 'serviceType',\n              value: 23,\n            },\n            {\n              label: '枚举code-name',\n              valueType: 'enumCodeName',\n              code: 'serviceType',\n              value: 23,\n            },\n            {\n              label: '年月日',\n              valueType: 'date',\n              value: new Date(),\n            },\n            {\n              label: '年月日时分秒',\n              valueType: 'dateTime',\n              value: new Date(),\n            },\n            {\n              label: '总保额',\n              valueType: 'thousandth',\n              value: 123,\n            },\n            {\n              label: '总签单保费（含税）',\n              valueType: 'thousandth',\n              value: 943.4,\n            },\n            {\n              label: '总签单保费',\n              valueType: 'thousandth',\n              precision: 4,\n              value: '56123.1234',\n            },\n          ]}\n          onBack={() => {\n            alert('返回上一步');\n          }}\n        />\n      </ProLayout>\n    </ProConfigProvider>\n  );\n};\n\nexport default Layout;\n"
+    },
+    {
+      "component": "ProHeader",
+      "file": "scroll.tsx",
+      "title": "滑动置顶",
+      "note": "通过 fixedTop 启用固定头部功能",
+      "source": "/**\n * iframe: 600\n */\n/* eslint-disable no-alert */\nimport { useToggle } from 'ahooks';\nimport { Button } from 'antd';\nimport { ProHeader, ProLayout } from '@zat-design/sisyphus-react';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n  const [state, { toggle }] = useToggle(false);\n\n  return (\n    <>\n      <ProLayout\n        iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n        dataSource={menusData}\n        collapsed={state}\n      >\n        {children}\n        <ProHeader\n          fixedTop={64}\n          autoBack={1}\n          breadcrumbColumns={[\n            {\n              type: 'breadcrumb',\n              value: '比例调整',\n              tag: '版本号2.0',\n            },\n          ]}\n          actionRender={[\n            <Button type=\"link\">分保意见</Button>,\n            <Button type=\"link\">操作日志</Button>,\n          ]}\n          describeColumns={[\n            {\n              label: '投保单号',\n              value: 'T1306C01202200000211034',\n              copyable: true,\n              link: 'https://procomponents.zhongan.tech/',\n            },\n            {\n              label: '产品名称',\n              value: '产品 06C3-综合意外New产品名称',\n              tag: '版本号2.0',\n            },\n          ]}\n          subDescribeColumns={[\n            {\n              label: '起保日期',\n              value: '2022-08-30 00:00:00',\n            },\n            {\n              label: '终保日期',\n              value: '2022-08-30 00:00:00',\n            },\n            {\n              label: '总保额',\n              value: '1,000,799,999.00',\n            },\n            {\n              label: '总签单保费(含税)',\n              value: '200,300.00',\n            },\n            {\n              label: '总签单保费(不含税)',\n              value: '200,300.00',\n            },\n            {\n              label: '保单币种',\n              value: 'CNY',\n            },\n            {\n              label: '总投保人数',\n              value: '1000',\n            },\n          ]}\n          onBack={() => {\n            alert('返回上一步');\n          }}\n        />\n        <div>\n          古巴比伦王颁布了汉谟拉比法典\n          <br />\n          刻在黑色的玄武岩\n          <br />\n          距今已经三千七百多年\n          <br />\n          你在橱窗前 凝视碑文的字眼\n          <br />\n          我却在旁静静欣赏你那张我深爱的脸\n          <br />\n          祭司 神殿 征战 弓箭 是谁的从前\n          <br />\n          喜欢在人潮中你只属于我的那画面\n          <br />\n          经过苏美女神身边 我以女神之名许愿\n          <br />\n          思念像底格里斯河般的蔓延\n          <br />\n          当古文明只剩下难解的语言\n          <br />\n          传说就成了永垂不朽的诗篇\n          <br />\n          我给你的爱写在西元前\n          <br />\n          深埋在美索不达米亚平原\n          <br />\n          几十个世纪后出土发现\n          <br />\n          泥板上的字迹依然清晰可见\n          <br />\n          我给你的爱写在西元前\n          <br />\n          深埋在美索不达米亚平原\n          <br />\n          用楔形文字刻下了永远\n          <br />\n          那已风化千年的誓言\n          <br />\n          《爱在西元前》简谱\n          <br />\n          《爱在西元前》简谱 [1] <br />\n          一切又重演\n          <br />\n          祭司 神殿 征战 弓箭 是谁的从前\n          <br />\n          喜欢在人潮中你只属于我的那画面\n          <br />\n          经过苏美女神身边 我以女神之名许愿\n          <br />\n          思念像底格里斯河般的蔓延\n          <br />\n          当古文明只剩下难解的语言\n          <br />\n          传说就成了永垂不朽的诗篇\n          <br />\n          我给你的爱写在西元前\n          <br />\n          深埋在美索不达米亚平原\n          <br />\n          几十个世纪后出土发现\n          <br />\n          泥板上的字迹依然清晰可见\n          <br />\n          <h2>我是底部啦~~~</h2>\n        </div>\n      </ProLayout>\n    </>\n  );\n};\n\nexport default Layout;\n"
+    },
+    {
+      "component": "ProHeader",
+      "file": "title.tsx",
+      "title": "常规 title",
+      "note": "",
+      "source": "/**\n * iframe: 600\n */\n\nimport { ProLayout, ProHeader } from '@zat-design/sisyphus-react';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n  return (\n    <>\n      <ProLayout\n        iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n        dataSource={menusData}\n        collapsed={false}\n      >\n        <ProHeader title=\"我是标题一\" />\n        <ProHeader\n          breadcrumbColumns={[\n            {\n              type: 'breadcrumb',\n              value: '我是标题二',\n            },\n          ]}\n        />\n        {children}\n      </ProLayout>\n    </>\n  );\n};\n\nexport default Layout;\n"
+    },
     {
       "component": "ProIcon",
       "file": "base.tsx",
@@ -1037,6 +1072,13 @@
       "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"
     },
+    {
+      "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"
+    },
     {
       "component": "ProLayout",
       "file": "waterMark.tsx",
@@ -1198,6 +1240,48 @@
       "note": "**需要在`ProStep.Item`自定义`validator`方法，该方法校验结束后，必须返回一个 rejected 状态的 Promise，抛出异常的数据**",
       "source": "/**\n * iframe: 600\n */\nimport { Button, Form, message } from 'antd';\nimport { useSetState } from 'ahooks';\nimport {\n  ProStep,\n  ProForm,\n  ProLayout,\n  ProFormColumnType,\n  ProEditTableColumnType,\n  ProCollapse,\n  ProHeader,\n  ProFooter,\n} from '@zat-design/sisyphus-react';\nimport menusData from './menusData';\n\nconst dataSource = [\n  {\n    name: '人员+投保人信息',\n    code: 'holder',\n  },\n  {\n    name: '被保人信息',\n    code: 'insured',\n  },\n  {\n    name: '受益人信息',\n    code: 'beneficiary',\n  },\n];\n\nconst baseColumns = [];\n\nfor (let index = 1; index <= 20; index++) {\n  baseColumns.push({\n    type: 'Input',\n    label: `fieldKey${index}`,\n    name: `fieldKey${index}`,\n    rules: [{ required: true, message: '请输入' }],\n  });\n}\n\nconst Holder = () => {\n  const [holderForm] = Form.useForm();\n  const [peopleForm] = Form.useForm();\n\n  const tableColumns: ProEditTableColumnType[] = [\n    {\n      title: '姓名',\n      dataIndex: 'name',\n      width: '30%',\n      required: true,\n    },\n    {\n      title: '性别',\n      dataIndex: 'sex',\n      type: 'Select',\n      width: '30%',\n      required: true,\n      fieldProps: {\n        dataSource: [\n          {\n            label: '男',\n            value: '1',\n          },\n          {\n            label: '女',\n            value: '2',\n          },\n        ],\n      },\n    },\n    {\n      title: '出生日期',\n      dataIndex: 'birthday',\n      type: 'DatePicker',\n      width: '20%',\n      required: true,\n    },\n  ];\n\n  const formColumns: ProFormColumnType[] = [\n    {\n      span: 24,\n      type: 'ProEditTable',\n      name: 'dataSource',\n      fieldProps: {\n        columns: tableColumns,\n      },\n    },\n  ];\n\n  const validator = async () => {\n    const values = await peopleForm.validateFields();\n    if (!values?.dataSource?.length) {\n      const errorFields = [\n        {\n          name: 'dataSource',\n          errors: '请添加人员',\n        },\n      ];\n      message.error('请添加人员');\n      // eslint-disable-next-line prefer-promise-reject-errors\n      return Promise.reject({ errorFields }); // 自定义错误时必须手动抛出错误条数给proStep\n    }\n    await holderForm.validateFields();\n  };\n\n  return (\n    <ProStep.Item id=\"holder\" validator={validator}>\n      <ProCollapse icon title=\"人员信息\">\n        <ProForm form={peopleForm} columns={formColumns} footer={false} />\n      </ProCollapse>\n      <ProCollapse icon title=\"投保人信息\">\n        <ProForm form={holderForm} columns={baseColumns} footer={false} />\n      </ProCollapse>\n    </ProStep.Item>\n  );\n};\n\nconst Insured = ({ form }) => {\n  return (\n    <ProStep.Item id=\"insured\" form={form}>\n      <ProCollapse icon title=\"被保人信息\">\n        <ProForm form={form} columns={baseColumns} footer={false} />\n      </ProCollapse>\n    </ProStep.Item>\n  );\n};\n\nconst Beneficiary = ({ form }) => {\n  return (\n    <ProStep.Item id=\"beneficiary\" form={form}>\n      <ProCollapse icon title=\"受益人信息\">\n        <ProForm form={form} columns={baseColumns} footer={false} />\n      </ProCollapse>\n    </ProStep.Item>\n  );\n};\n\nconst Demo = () => {\n  const [insuredForm] = Form.useForm();\n  const [beneficiaryForm] = Form.useForm();\n  const [{ step, activeKey }, setState] = useSetState({\n    step: 1,\n    activeKey: 'holder',\n  });\n\n  const handleSave = async () => {\n    try {\n      const nextStep = step + 1;\n      const nextActiveKey = dataSource[nextStep - 1].code;\n      setState({\n        step: nextStep,\n        activeKey: nextActiveKey,\n      });\n    } catch (error) {\n      console.log('error', error);\n    }\n  };\n\n  return (\n    <ProLayout iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\" dataSource={menusData}>\n      <ProStep dataSource={dataSource} fixedTop={64} targetOffset={138} activeKey={activeKey}>\n        <ProHeader\n          fixedTop={0}\n          autoBack={1}\n          breadcrumbColumns={[\n            {\n              type: 'breadcrumb',\n              value: '比例调整',\n              tag: '版本号2.0',\n            },\n          ]}\n        />\n        {step >= 1 && <Holder />}\n        {step >= 2 && <Insured form={insuredForm} />}\n        {step >= 3 && <Beneficiary form={beneficiaryForm} />}\n        <ProFooter>\n          <ProStep.Listener>\n            <Button type=\"primary\" onClick={handleSave}>\n              保存并下一步\n            </Button>\n          </ProStep.Listener>\n        </ProFooter>\n      </ProStep>\n    </ProLayout>\n  );\n};\n\nexport default Demo;\n"
     },
+    {
+      "component": "ProStepTab",
+      "file": "StepDisable.tsx",
+      "title": "禁用模式",
+      "note": "`场景：查看或者审核模式下tab需要直接切换查看，不走校验保存时`",
+      "source": "import React, { useEffect } from 'react';\nimport { Tabs } from 'antd';\nimport { ProStepTab } from '@zat-design/sisyphus-react';\nimport { Step1, Step2, Step3 } from './steps';\n\n// 定义Tab列表\nconst tabList: { key: string; name: string }[] = [\n  { key: '1', name: '步骤1' },\n  { key: '2', name: '步骤2' },\n  { key: '3', name: '步骤3' },\n];\n\n/**\n * 实际内容组件\n */\nconst StepDisable: React.FC = () => {\n  return (\n    <ProStepTab validate={false}>\n      <StepTabContent />\n    </ProStepTab>\n  );\n};\n\n/**\n * 内容组件，使用StepTabInstance获取实例\n */\nconst StepTabContent: React.FC = () => {\n  // 使用 useStepTabInstance 获取StepTab实例\n  const { activeKey, setCheckActiveKey, resetHandles } = ProStepTab.useStepTabInstance();\n\n  // 组件卸载时重置handles\n  useEffect(() => {\n    return () => {\n      resetHandles();\n    };\n  }, [resetHandles]);\n\n  // 处理Tab切换\n  const handleTabChange = (key: string) => {\n    setCheckActiveKey(key);\n  };\n\n  // 根据key渲染对应的步骤组件\n  const renderTabContent = (key: string) => {\n    switch (key) {\n      case '1':\n        return <Step1 namePath=\"stepDisable\" disabled={true} />;\n      case '2':\n        return <Step2 namePath=\"stepDisable\" disabled={true} />;\n      case '3':\n        return <Step3 namePath=\"stepDisable\" disabled={true} />;\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <Tabs\n      activeKey={activeKey}\n      onChange={handleTabChange}\n      items={tabList.map((tab) => ({\n        key: tab.key,\n        label: tab.name,\n        children: renderTabContent(tab.key),\n      }))}\n    />\n  );\n};\n\nexport default StepDisable;\n"
+    },
+    {
+      "component": "ProStepTab",
+      "file": "StepGlobal.tsx",
+      "title": "全局模式",
+      "note": "",
+      "source": "import React, { useEffect } from 'react';\nimport { Tabs, Button, message } from 'antd';\nimport { ProStepTab } from '@zat-design/sisyphus-react';\nimport { Step1, Step2, Step3 } from './steps';\n\n// 定义Tab列表\nconst tabList: { key: string; name: string }[] = [\n  { key: '1', name: '步骤1' },\n  { key: '2', name: '步骤2' },\n  { key: '3', name: '步骤3' },\n];\n\n/**\n * 实际内容组件\n */\nconst StepGlobal: React.FC = () => {\n  return (\n    <ProStepTab>\n      <StepTabContent />\n    </ProStepTab>\n  );\n};\n\n/**\n * 内容组件，使用StepTabInstance获取实例\n */\nconst StepTabContent: React.FC = () => {\n  // 使用 ProStepTab.useStepTabInstance 获取StepTab实例\n  const { activeKey, setCheckActiveKey, resetHandles, saveHandle } =\n    ProStepTab.useStepTabInstance();\n\n  // 组件卸载时重置handles\n  useEffect(() => {\n    return () => {\n      resetHandles();\n    };\n  }, [resetHandles]);\n\n  // 处理Tab切换\n  const handleTabChange = (key: string) => {\n    setCheckActiveKey(key);\n  };\n\n  // 根据key渲染对应的步骤组件\n  const renderTabContent = (key: string) => {\n    switch (key) {\n      case '1':\n        return <Step1 namePath=\"global\" />;\n      case '2':\n        return <Step2 namePath=\"global\" />;\n      case '3':\n        return <Step3 namePath=\"global\" />;\n      default:\n        return null;\n    }\n  };\n\n  // 全局保存\n  const handleGlobalSave = async () => {\n    // 保存当前tab\n    await saveHandle();\n    // 模拟异步1s保存\n    await new Promise((resolve) => setTimeout(resolve, 1000));\n    message.success('全局保存成功');\n    return true;\n  };\n\n  return (\n    <Tabs\n      tabBarExtraContent={{\n        right: (\n          <Button type=\"primary\" onClick={handleGlobalSave}>\n            全局保存\n          </Button>\n        ),\n      }}\n      activeKey={activeKey}\n      onChange={handleTabChange}\n      items={tabList.map((tab) => ({\n        key: tab.key,\n        label: tab.name,\n        children: renderTabContent(tab.key),\n      }))}\n    />\n  );\n};\n\nexport default StepGlobal;\n"
+    },
+    {
+      "component": "ProStepTab",
+      "file": "StepNext.tsx",
+      "title": "自动跳转模式",
+      "note": "",
+      "source": "import React, { useEffect } from 'react';\nimport { Tabs } from 'antd';\nimport { ProStepTab } from '@zat-design/sisyphus-react';\nimport { Step1, Step2, Step3 } from './steps';\n\n// 定义Tab列表\nconst tabList: { key: string; name: string }[] = [\n  { key: '1', name: '步骤1' },\n  { key: '2', name: '步骤2' },\n  { key: '3', name: '步骤3' },\n];\n\n/**\n * 自动跳转Tab示例组件\n */\nconst StepNextDemo: React.FC = () => {\n  // queueSteps 需要按顺序完成的步骤数量\n  return (\n    <ProStepTab autoNext={true} queueSteps={3}>\n      <StepNextContent />\n    </ProStepTab>\n  );\n};\n\n/**\n * 内容组件，使用StepTabInstance获取实例\n */\nconst StepNextContent: React.FC = () => {\n  // 使用 useStepTabInstance 获取StepTab实例\n  const { activeKey, setCheckActiveKey, resetHandles } = ProStepTab.useStepTabInstance();\n\n  // 组件卸载时重置handles\n  useEffect(() => {\n    return () => {\n      resetHandles();\n    };\n  }, [resetHandles]);\n\n  // 处理Tab切换\n  const handleTabChange = (key: string) => {\n    setCheckActiveKey(key);\n  };\n\n  // 根据key渲染对应的步骤组件\n  const renderTabContent = (key: string) => {\n    switch (key) {\n      case '1':\n        return <Step1 namePath=\"stepNext\" />;\n      case '2':\n        return <Step2 namePath=\"stepNext\" />;\n      case '3':\n        return <Step3 namePath=\"stepNext\" />;\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <Tabs\n      activeKey={activeKey}\n      onChange={handleTabChange}\n      items={tabList.map((tab) => ({\n        key: tab.key,\n        label: tab.name,\n        children: renderTabContent(tab.key),\n      }))}\n    />\n  );\n};\n\nexport default StepNextDemo;\n"
+    },
+    {
+      "component": "ProStepTab",
+      "file": "StepQueue.tsx",
+      "title": "有序 tab 模式",
+      "note": "`场景：当需要按顺序完成前N步骤后，其余tab再放开，可以使用有序tab模式`",
+      "source": "import React, { useEffect } from 'react';\nimport { Tabs, Button, message, Form } from 'antd';\nimport { ProForm, ProStepTab } from '@zat-design/sisyphus-react';\n\n// 定义Tab列表\nconst tabList: { key: string; name: string }[] = [\n  { key: '1', name: '步骤1' },\n  { key: '2', name: '步骤2' },\n  { key: '3', name: '步骤3' },\n  { key: '4', name: '步骤4' },\n  { key: '5', name: '步骤5' },\n];\n\n/**\n * 步骤1\n */\nconst Step1: React.FC = () => {\n  const { saveHandle, step, setStep, registerHandle, loading } = ProStepTab.useStepTabInstance();\n  const [form] = Form.useForm();\n  const handleSave = async () => {\n    // 执行表单校验或者异步请求\n    await form.validateFields();\n    // 模拟异步1s保存\n    await new Promise((resolve) => setTimeout(resolve, 1000));\n    if (step <= 1) {\n      setStep(step + 1);\n    }\n    message.success(`保存步骤1成功`);\n    return true;\n  };\n  useEffect(() => {\n    registerHandle('1', handleSave);\n  }, [registerHandle]);\n  return (\n    <div>\n      <ProForm\n        form={form}\n        columns={[\n          {\n            type: 'Input',\n            label: '步骤1-1',\n            name: `queue_step1_1`,\n            required: true,\n          },\n          {\n            type: 'Input',\n            label: '步骤1-2',\n            name: `queue_step1_2`,\n            required: true,\n          },\n        ]}\n        span={24}\n        footer={false}\n      />\n      <Button type=\"primary\" onClick={saveHandle} loading={loading} disabled={loading}>\n        保存并下一步\n      </Button>\n    </div>\n  );\n};\n\n/**\n * 步骤2\n */\nconst Step2: React.FC = () => {\n  const [form] = Form.useForm();\n  const { saveHandle, step, setStep, registerHandle, loading } = ProStepTab.useStepTabInstance();\n  const handleSave = async () => {\n    // 执行表单校验或者异步请求\n    await form.validateFields();\n    // 模拟异步1s保存\n    await new Promise((resolve) => setTimeout(resolve, 1000));\n    if (step <= 2) {\n      setStep(step + 1);\n    }\n    message.success(`保存步骤2成功`);\n    return true;\n  };\n  useEffect(() => {\n    registerHandle('2', handleSave);\n  }, [registerHandle]);\n  return (\n    <div>\n      <ProForm\n        form={form}\n        columns={[\n          {\n            type: 'Input',\n            label: '步骤2-1',\n            name: `queue_step2_1`,\n            required: true,\n          },\n          {\n            type: 'Input',\n            label: '步骤2-2',\n            name: `queue_step2_2`,\n            required: true,\n          },\n        ]}\n        span={24}\n        footer={false}\n      />\n      <Button type=\"primary\" onClick={saveHandle} loading={loading} disabled={loading}>\n        保存并下一步\n      </Button>\n    </div>\n  );\n};\n\n/**\n * 步骤3\n */\nconst Step3: React.FC = () => {\n  const { saveHandle, registerHandle, loading } = ProStepTab.useStepTabInstance();\n  const [form] = Form.useForm();\n  const handleSave = async () => {\n    // 执行表单校验或者异步请求\n    await form.validateFields();\n    // 模拟异步1s保存\n    await new Promise((resolve) => setTimeout(resolve, 1000));\n    message.success('保存步骤3成功');\n    return true;\n  };\n  useEffect(() => {\n    registerHandle('3', handleSave);\n  }, [registerHandle]);\n  return (\n    <div>\n      <ProForm\n        form={form}\n        columns={[\n          {\n            type: 'Input',\n            label: '步骤3-1',\n            name: `queue_step3_1`,\n            required: true,\n          },\n          {\n            type: 'Input',\n            label: '步骤3-2',\n            name: `queue_step3_2`,\n            required: true,\n          },\n        ]}\n        span={24}\n        footer={false}\n      />\n      <Button type=\"primary\" onClick={saveHandle} loading={loading} disabled={loading}>\n        保存并下一步\n      </Button>\n    </div>\n  );\n};\n/**\n * 实际内容组件\n */\nconst StepQueueDemo: React.FC = () => {\n  // defaultStep需要根据接口读取默认值，默认1\n  return (\n    <ProStepTab autoNext={true} queueSteps={3} defaultStep={1}>\n      <StepTabContent />\n    </ProStepTab>\n  );\n};\n\n/**\n * 内容组件，使用StepTabInstance获取实例\n */\nconst StepTabContent: React.FC = () => {\n  // 使用 useStepTabInstance 获取StepTab实例\n  const { activeKey, setCheckActiveKey, step, queueSteps, resetHandles } =\n    ProStepTab.useStepTabInstance();\n\n  // 组件卸载时重置handles\n  useEffect(() => {\n    return () => {\n      resetHandles();\n    };\n  }, [resetHandles]);\n\n  // 处理Tab切换\n  const handleTabChange = (key: string) => {\n    setCheckActiveKey(key);\n  };\n\n  // 根据key渲染对应的步骤组件\n  const renderTabContent = (key: string) => {\n    switch (key) {\n      case '1':\n        return <Step1 />;\n      case '2':\n        return <Step2 />;\n      case '3':\n        return <Step3 />;\n      case '4':\n        return <div>步骤4内容</div>;\n      case '5':\n        return <div>步骤5内容</div>;\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <Tabs\n      activeKey={activeKey}\n      onChange={handleTabChange}\n      items={tabList.map((tab) => ({\n        key: tab.key,\n        label: tab.name,\n        // 当step >= queueSteps时全部开启，否则只有小于等于当前step的tab可用\n        disabled: step < Number(tab.key) && step < queueSteps,\n        children: renderTabContent(tab.key),\n      }))}\n    />\n  );\n};\n\nexport default StepQueueDemo;\n"
+    },
+    {
+      "component": "ProStepTab",
+      "file": "StepRouterTab.tsx",
+      "title": "路由保持模式",
+      "note": "",
+      "source": "import React, { useEffect } from 'react';\nimport { Tabs } from 'antd';\nimport { ProStepTab } from '@zat-design/sisyphus-react';\nimport { Step1, Step2, Step3 } from './steps';\n\n// 定义Tab列表\nconst tabList: { key: string; name: string }[] = [\n  { key: '1', name: '步骤1' },\n  { key: '2', name: '步骤2' },\n  { key: '3', name: '步骤3' },\n];\n\n/**\n * 实际内容组件\n */\nconst StepRouterTab: React.FC = () => {\n  return (\n    <ProStepTab routerKeep={true}>\n      <StepTabContent />\n    </ProStepTab>\n  );\n};\n\n/**\n * 内容组件，使用StepTabInstance获取实例\n */\nconst StepTabContent: React.FC = () => {\n  // 使用 useStepTabInstance 获取StepTab实例\n  const { activeKey, setCheckActiveKey, resetHandles } = ProStepTab.useStepTabInstance();\n\n  // 组件卸载时重置handles\n  useEffect(() => {\n    return () => {\n      resetHandles();\n    };\n  }, [resetHandles]);\n\n  // 处理Tab切换\n  const handleTabChange = (key: string) => {\n    setCheckActiveKey(key);\n  };\n\n  // 根据key渲染对应的步骤组件\n  const renderTabContent = (key: string) => {\n    switch (key) {\n      case '1':\n        return <Step1 namePath=\"router\" />;\n      case '2':\n        return <Step2 namePath=\"router\" />;\n      case '3':\n        return <Step3 namePath=\"router\" />;\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <Tabs\n      activeKey={activeKey}\n      onChange={handleTabChange}\n      items={tabList.map((tab) => ({\n        key: tab.key,\n        label: tab.name,\n        children: renderTabContent(tab.key),\n      }))}\n    />\n  );\n};\n\nexport default StepRouterTab;\n"
+    },
+    {
+      "component": "ProStepTab",
+      "file": "StepTab.tsx",
+      "title": "基本使用",
+      "note": "",
+      "source": "import React, { useEffect } from 'react';\nimport { Tabs } from 'antd';\nimport { ProStepTab } from '@zat-design/sisyphus-react';\nimport { Step1, Step2, Step3 } from './steps';\n\n// 定义Tab列表\nconst tabList: { key: string; name: string }[] = [\n  { key: '1', name: '步骤1' },\n  { key: '2', name: '步骤2' },\n  { key: '3', name: '步骤3' },\n];\n\n/**\n * 实际内容组件\n */\nconst StepTabDemo: React.FC = () => {\n  return (\n    <ProStepTab>\n      <StepTabContent />\n    </ProStepTab>\n  );\n};\n\n/**\n * 内容组件，使用StepTabInstance获取实例\n */\nconst StepTabContent: React.FC = () => {\n  // 使用 useStepTabInstance 获取StepTab实例\n  const { activeKey, setCheckActiveKey, resetHandles } = ProStepTab.useStepTabInstance();\n\n  // 组件卸载时重置handles\n  useEffect(() => {\n    return () => {\n      resetHandles();\n    };\n  }, [resetHandles]);\n\n  // 处理Tab切换\n  const handleTabChange = (key: string) => {\n    setCheckActiveKey(key);\n  };\n\n  // 根据key渲染对应的步骤组件\n  const renderTabContent = (key: string) => {\n    switch (key) {\n      case '1':\n        return <Step1 namePath=\"step\" />;\n      case '2':\n        return <Step2 namePath=\"step\" />;\n      case '3':\n        return <Step3 namePath=\"step\" />;\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <Tabs\n      activeKey={activeKey}\n      onChange={handleTabChange}\n      items={tabList.map((tab) => ({\n        key: tab.key,\n        label: tab.name,\n        children: renderTabContent(tab.key),\n      }))}\n    />\n  );\n};\n\nexport default StepTabDemo;\n"
+    },
     {
       "component": "ProTable",
       "file": "baseDemo.tsx",

package/meta/props.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.5-beta.1",
+  "version": "4.5.6-beta.2",
   "components": {
     "FormsProvider": {
       "source": "ts-interface",
@@ -2049,6 +2049,191 @@
         }
       }
     },
+    "ProHeader": {
+      "source": "docs-api",
+      "groups": [
+        {
+          "title": "API",
+          "props": {
+            "fixedTop": {
+              "type": "string | number",
+              "required": false,
+              "description": "设置距离顶部的距离，用于固定悬浮"
+            },
+            "title": {
+              "type": "string | ReactNode",
+              "required": false,
+              "description": "标题描述"
+            },
+            "breadcrumbColumns": {
+              "type": "BreadcrumbColumnType[]",
+              "required": false,
+              "description": "左上区域面包屑配置"
+            },
+            "actionRender": {
+              "type": "array",
+              "required": false,
+              "description": "右上右边区域 action 配置"
+            },
+            "describeColumns": {
+              "type": "DescribeColumnType[]",
+              "required": false,
+              "description": "主描述配置"
+            },
+            "subDescribeColumns": {
+              "type": "SubDescribeColumnType[]",
+              "required": false,
+              "description": "副级描述配置"
+            },
+            "showBack": {
+              "type": "boolean",
+              "required": false,
+              "description": "是否显示返回按钮。显式传值优先；不传时若有 onBack 则显示，否则由 autoBack 按浏览器历史长度判断（设置 title 后需显式设为 true 才会显示返回并将 title 转为面包屑）"
+            },
+            "collapsed": {
+              "type": "boolean",
+              "required": false,
+              "defaultValue": "true",
+              "description": "副级描述是否展开"
+            },
+            "autoBack": {
+              "type": "number",
+              "required": false,
+              "defaultValue": "2",
+              "description": "未显式传 showBack/onBack 时，window.history.length 不大于该值则自动隐藏返回按钮"
+            },
+            "onBack": {
+              "type": "()=> void",
+              "required": false,
+              "description": "返回按钮点击回调；不传时默认执行 window.history.back()"
+            },
+            "bodyOverFlowHidden": {
+              "type": "boolean",
+              "required": false,
+              "defaultValue": "false",
+              "description": "内部滚动时，设置 body 为 overflow: hidden"
+            },
+            "isConfirmBack": {
+              "type": "boolean",
+              "required": false,
+              "defaultValue": "false",
+              "description": "是否开启返回二次确认弹框"
+            },
+            "isConfirmBackModalProps": {
+              "type": "ModalProps【Modal 的 props，使用方式与 antd 相同】",
+              "required": false,
+              "description": "返回时二次确认弹框的属性"
+            }
+          }
+        },
+        {
+          "title": "BreadcrumbColumnType",
+          "props": {
+            "type": {
+              "type": "breadcrumb",
+              "required": false,
+              "defaultValue": "info",
+              "description": "breadcrumb 面包屑带>带间隔"
+            },
+            "value": {
+              "type": "ReactNode | string",
+              "required": false,
+              "description": "内容"
+            },
+            "tag": {
+              "type": "ReactNode | string | (string | React.ReactNode)[]",
+              "required": false,
+              "description": "标签内容"
+            },
+            "show": {
+              "type": "boolean",
+              "required": false,
+              "defaultValue": "true",
+              "description": "是否显示 （value 没有值时自动不显示）"
+            }
+          }
+        },
+        {
+          "title": "DescribeColumnType",
+          "props": {
+            "label": {
+              "type": "string",
+              "required": false,
+              "description": "label 内容"
+            },
+            "value": {
+              "type": "ReactNode | string",
+              "required": false,
+              "description": "内容"
+            },
+            "tag": {
+              "type": "ReactNode | string | (string | React.ReactNode)[]",
+              "required": false,
+              "description": "标签内容"
+            },
+            "show": {
+              "type": "boolean",
+              "required": false,
+              "defaultValue": "true",
+              "description": "是否显示"
+            },
+            "copyable": {
+              "type": "boolean",
+              "required": false,
+              "defaultValue": "false",
+              "description": "是否可复制"
+            },
+            "link": {
+              "type": "string",
+              "required": false,
+              "description": "跳转链接"
+            },
+            "items": {
+              "type": "DescribeColumnType[]",
+              "required": false,
+              "description": "配置多个值 （demo 见多描述不换行展示）"
+            }
+          }
+        },
+        {
+          "title": "SubDescribeColumnType",
+          "props": {
+            "label": {
+              "type": "string",
+              "required": false,
+              "description": "label 内容"
+            },
+            "valueType": {
+              "type": "enumName | enumCodeName | thousandth | date | dateTime",
+              "required": false,
+              "description": "值显示类型"
+            },
+            "value": {
+              "type": "ReactNode | string",
+              "required": false,
+              "description": "内容"
+            },
+            "code": {
+              "type": "string",
+              "required": false,
+              "description": "枚举源标识"
+            },
+            "precision": {
+              "type": "number",
+              "required": false,
+              "description": "数字类显示精度"
+            },
+            "show": {
+              "type": "boolean",
+              "required": false,
+              "defaultValue": "true",
+              "description": "是否显示"
+            }
+          }
+        }
+      ],
+      "conventions": {}
+    },
     "ProIcon": {
       "source": "docs-api",
       "groups": [
@@ -2931,6 +3116,122 @@
       ],
       "conventions": {}
     },
+    "ProStepTab": {
+      "source": "docs-api",
+      "groups": [
+        {
+          "title": "ProStepTab",
+          "props": {
+            "routerKeep": {
+              "type": "boolean",
+              "required": false,
+              "defaultValue": "false",
+              "description": "是否将当前 tab 状态保存在 URL 中"
+            },
+            "routerSearchKey": {
+              "type": "string",
+              "required": false,
+              "defaultValue": "tab",
+              "description": "URL 参数名称"
+            },
+            "validate": {
+              "type": "boolean",
+              "required": false,
+              "defaultValue": "true",
+              "description": "切换 tab 前是否需要验证"
+            },
+            "onBeforeChange": {
+              "type": "(current: string, target: string) => Promise<boolean>",
+              "required": false,
+              "description": "切换 tab 前的回调"
+            },
+            "onAfterChange": {
+              "type": "(key: string) => void",
+              "required": false,
+              "description": "切换 tab 后的回调"
+            },
+            "queueSteps": {
+              "type": "number",
+              "required": false,
+              "description": "需要按顺序完成的步骤数量"
+            },
+            "defaultStep": {
+              "type": "number",
+              "required": false,
+              "defaultValue": "1",
+              "description": "当前初始激活步骤"
+            },
+            "autoNext": {
+              "type": "boolean",
+              "required": false,
+              "defaultValue": "false",
+              "description": "是否自动跳转下一步"
+            }
+          }
+        },
+        {
+          "title": "useStepTabInstance 返回值",
+          "props": {
+            "activeKey": {
+              "type": "string",
+              "required": false,
+              "description": "当前激活的 tabKey"
+            },
+            "setCheckActiveKey": {
+              "type": "(key: string, validate?: boolean) => Promise<boolean>",
+              "required": false,
+              "description": "设置激活的 tabKey"
+            },
+            "loading": {
+              "type": "boolean",
+              "required": false,
+              "description": "加载状态"
+            },
+            "registerHandle": {
+              "type": "(key: string, handler: HandleFunctionType) => void",
+              "required": false,
+              "description": "注册步骤处理函数"
+            },
+            "getHandle": {
+              "type": "(key: string) => HandleFunctionType | undefined",
+              "required": false,
+              "description": "获取步骤处理函数"
+            },
+            "saveHandle": {
+              "type": "() => Promise<boolean>",
+              "required": false,
+              "description": "执行当前步骤处理函数"
+            },
+            "handles": {
+              "type": "Record<string, HandleFunctionType>",
+              "required": false,
+              "description": "所有步骤处理函数映射"
+            },
+            "resetHandles": {
+              "type": "() => void",
+              "required": false,
+              "description": "重置所有步骤处理函数"
+            },
+            "queueSteps": {
+              "type": "number | undefined",
+              "required": false,
+              "description": "需要按顺序完成的步骤数量"
+            },
+            "step": {
+              "type": "number | undefined",
+              "required": false,
+              "description": "当前已激活步骤，最大值为 queueSteps"
+            },
+            "setStep": {
+              "type": "(step: number) => void | undefined",
+              "required": false,
+              "description": "设置当前顺序步骤"
+            }
+          }
+        }
+      ],
+      "conventions": {}
+    },
     "ProTable": {
       "source": "docs-api",
       "groups": [

package/package.json

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