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

package/meta/components.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.4",
+  "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.4",
+  "version": "4.5.6-beta.2",
   "examples": [
     {
       "component": "ProAction",
@@ -71,6 +71,13 @@
       "note": "",
       "source": "import { Button, Space } from 'antd';\nimport { ProTable, ProAction } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType, ProTableListResponseType } from '@zat-design/sisyphus-react';\nimport { getUseAntdTableDemoData } from '../../ProTable/demos/data/useAntdTableDemoData';\nimport respData from './data';\n\nconst { useAntdTable } = ProTable;\n\nconst getTableData = ({ pageNum }) => {\n  return new Promise<ProTableListResponseType<Record<string, any>>>((resolve) => {\n    setTimeout(() => {\n      resolve({\n        status: 200,\n        // @ts-ignore\n        data: {\n          list: getUseAntdTableDemoData(pageNum),\n          total: 50,\n          pageNum: 1,\n          pageSize: 10,\n        },\n        message: '',\n      });\n    }, 2000);\n  });\n};\n\nconst delService = (data) => {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({\n        data: '',\n        status: 200,\n        message: '',\n      });\n    }, 2000);\n  });\n};\n\nconst asyncService = (data) => {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({\n        data: respData,\n        status: 200,\n        message: '',\n      });\n    }, 2000);\n  });\n};\n\nconst asyncService1 = (data) => {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({\n        data: {\n          errorTitle: null,\n          list: null,\n        },\n        status: 200,\n        message: '',\n      });\n    }, 2000);\n  });\n};\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst BaseDemo = () => {\n  const { refresh, tableProps } = useAntdTable(getTableData, {\n    rowKey: 'productId',\n  });\n\n  // 列表列定义\n  const columns: ProTableColumnType[] = [\n    {\n      title: '产品代码',\n      dataIndex: 'productCode',\n      width: 200,\n    },\n    {\n      title: '产品名称',\n      dataIndex: 'productName',\n      width: 200,\n    },\n    {\n      title: '产品公司',\n      dataIndex: 'companyName',\n      width: 200,\n    },\n    {\n      title: '产品状态',\n      dataIndex: 'productStatus',\n      width: 200,\n    },\n    {\n      title: '操作',\n      dataIndex: 'operate',\n      width: 100,\n      render: () => (\n        <Space>\n          <ProAction\n            config={[\n              {\n                onAction: () => {\n                  window.open('https://procomponents.zhongan.tech/', '_blank');\n                },\n              },\n            ]}\n          >\n            <Button type=\"link\">查看</Button>\n          </ProAction>\n          <ProAction\n            config={[\n              {\n                mode: 'confirm',\n                useRequest(previousData, args) {\n                  return {\n                    service: delService,\n                    options: {\n                      onSuccess: () => {\n                        refresh();\n                      },\n                    },\n                  };\n                },\n              },\n            ]}\n          >\n            <Button type=\"link\">删除</Button>\n          </ProAction>\n\n          <ProAction\n            config={[\n              {\n                mode: 'confirm',\n              },\n              {\n                mode: 'check',\n                title: '返回列表多条时',\n                useRequest(previousData, args) {\n                  return {\n                    service: asyncService,\n                  };\n                },\n              },\n            ]}\n          >\n            <Button type=\"link\">校验不通过</Button>\n          </ProAction>\n\n          <ProAction\n            config={[\n              {\n                mode: 'confirm',\n              },\n              {\n                mode: 'check',\n                title: '返回列表多条时',\n                useRequest(previousData, args) {\n                  return {\n                    service: asyncService1,\n                  };\n                },\n              },\n              {\n                useRequest(previousData, args) {\n                  return {\n                    service: delService,\n                    options: {\n                      onSuccess() {\n                        refresh();\n                      },\n                    },\n                  };\n                },\n              },\n            ]}\n          >\n            <Button type=\"link\">校验通过继续删除</Button>\n          </ProAction>\n        </Space>\n      ),\n    },\n  ];\n\n  return (\n    <ProTable\n      tableId=\"base-demo\"\n      rowKey=\"productId\"\n      columns={columns}\n      scroll={{ x: 'max-content' }}\n      {...tableProps}\n    />\n  );\n};\n\nexport default BaseDemo;\n"
     },
+    {
+      "component": "ProConfigProvider",
+      "file": "themeSegmented.tsx",
+      "title": "主题定制",
+      "note": "`theme` 用法与 antd 的 [ConfigProvider](https://ant-design.antgroup.com/components/config-provider-cn) 完全一致，支持全局 `token` 与组件级 `components` 主题变量。传入的 `theme` 会与内部主题上下文深度合并后透传给 antd 的 ConfigProvider，因此可以保留 antd 原生的定制习惯： 下面的示例通过 ColorPicker 选色，联动整体主题色与 Segmented 组件的主题变量：",
+      "source": "/**\n * iframe: 320\n */\n\nimport { useState } from 'react';\nimport { ColorPicker, Segmented, Space } from 'antd';\nimport type { Color } from 'antd/es/color-picker';\nimport { ProConfigProvider } from '@zat-design/sisyphus-react';\n\n/**\n * ColorPicker 选色后，通过 ProConfigProvider 的 theme 全局配置，\n * 同时联动整体主题色（token.colorPrimary）与 Segmented 组件级主题变量。\n */\nconst ThemeSegmentedDemo = () => {\n  const [color, setColor] = useState<string>('#006AFF');\n\n  return (\n    <Space direction=\"vertical\" size={16}>\n      <Space align=\"center\">\n        <span>主题色：</span>\n        <ColorPicker\n          value={color}\n          showText\n          onChangeComplete={(value: Color) => setColor(value.toHexString())}\n        />\n      </Space>\n\n      <ProConfigProvider\n        theme={{\n          token: { colorPrimary: color },\n          components: {\n            Segmented: {\n              itemSelectedBg: color,\n              itemSelectedColor: '#ffffff',\n            },\n          },\n        }}\n      >\n        <Segmented options={['日', '周', '月', '季', '年']} defaultValue=\"周\" />\n      </ProConfigProvider>\n    </Space>\n  );\n};\n\nexport default ThemeSegmentedDemo;\n"
+    },
     {
       "component": "ProDownload",
       "file": "beforeDownload.tsx",
@@ -561,6 +568,13 @@
       "note": "",
       "source": "// @ts-nocheck\n/**\n * 文档复现：IndexedDB 缓存场景下是否仍会调用枚举接口。\n * 控制台过滤：[ProEnum repro] — 核心在 mockQueryEnumList 内一条日志。\n * 表单结构参考 proForm.tsx：ProForm + columns 里 type: ProEnum。\n */\nimport React, { useEffect } from 'react';\nimport { Form } from 'antd';\nimport { ProConfigProvider, ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport ProEnum from '..';\n\nconst CACHE_KEY = 'pro-enum-doc-repro-indexeddb-transform';\n\nlet mockRequestSeq = 0;\n\n/** 模拟 queryEnumList：每次进入此函数即表示发起了一次「接口」调用 */\nconst mockQueryEnumList = () => {\n  mockRequestSeq += 1;\n  console.log('[ProEnum repro] mockQueryEnumList 调用', mockRequestSeq);\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({\n        status: 200,\n        data: {\n          CD000049: [\n            { name: '选项1', code: 'a1' },\n            { name: '选项2', code: 'a2' },\n          ],\n        },\n      });\n    }, 400);\n  });\n};\n\nconst ReproContent: React.FC<{ form: any }> = ({ form }) => {\n  const { CD000049 } = ProEnum.useEnum(['CD000049']);\n  console.log('CD000049', CD000049);\n\n  const columns: ProFormColumnType[] = [\n    {\n      type: 'ProEnum',\n      name: 'proEnum',\n      label: '基本模式',\n      fieldProps: {\n        code: 'CD000049',\n        fieldNames: { label: 'name', value: 'code' },\n      },\n    },\n    {\n      type: 'ProEnum',\n      name: 'tag',\n      label: 'Tag模式',\n      fieldProps: {\n        code: 'CD000049',\n        type: 'Tag',\n        fieldNames: { label: 'name', value: 'code' },\n      },\n    },\n  ];\n\n  useEffect(() => {\n    form.setFieldsValue({\n      proEnum: 'a1',\n      tag: 'a1',\n    });\n  }, [form]);\n\n  return (\n    <div style={{ padding: 16 }}>\n      <p style={{ marginBottom: 8 }}>\n        ProForm + ProEnum；关注控制台是否在「已有 IndexedDB 缓存」时仍打印 mockQueryEnumList\n      </p>\n      <ProForm form={form} columns={columns} footer={false} />\n    </div>\n  );\n};\n\nconst ReproIndexedDBAsyncTransform: React.FC = () => {\n  const [form] = Form.useForm();\n\n  return (\n    <ProConfigProvider\n      value={{\n        ProEnum: {\n          storage: 'indexedDB',\n          cacheKey: CACHE_KEY,\n          fieldNames: {\n            label: 'name',\n            value: 'code',\n            innerCode: 'innerCode',\n            children: 'children',\n            businessScene: 'businessScene',\n            extraInfo: 'extraInfo',\n            parentCode: 'parentCode',\n          },\n          useRequest: {\n            service: () => mockQueryEnumList(),\n          },\n          transformResponse: async (raw) => ({\n            ...(raw?.data ?? raw),\n          }),\n        },\n      }}\n    >\n      <ReproContent form={form} />\n    </ProConfigProvider>\n  );\n};\n\nexport default ReproIndexedDBAsyncTransform;\n"
     },
+    {
+      "component": "ProEnum",
+      "file": "segmented.tsx",
+      "title": "Segmented 分段控制器展示",
+      "note": "使用 `type:Segmented` 展示分段控制器（Segmented）模式，接口与 `ProSelect`/`Radio` 一致，适合在少量互斥选项间快速切换",
+      "source": "// @ts-nocheck\nimport { FC, useState } from 'react';\nimport { ProEnum } from '@zat-design/sisyphus-react';\n\nimport ProvideComp from './provide1';\n\nconst dataSource = [\n  { label: '待处理', value: 'pending' },\n  { label: '处理中', value: 'processing' },\n  { label: '已处理', value: 'processed' },\n];\n\nconst Demo: FC = () => {\n  const [value, setValue] = useState('pending');\n\n  // 注意：ProEnum 直接内联渲染，不要包在渲染函数内定义的子组件里，\n  // 否则每次 setValue 会让子组件重新挂载，Segmented 的滑块（thumb）过渡动画会丢失\n  return (\n    <ProvideComp>\n      <div>\n        <ProEnum\n          type=\"Segmented\"\n          dataSource={dataSource}\n          value={value}\n          onChange={(v) => setValue(v)}\n        />\n      </div>\n    </ProvideComp>\n  );\n};\n\nexport default Demo;\n"
+    },
     {
       "component": "ProEnum",
       "file": "tag.tsx",
@@ -671,7 +685,7 @@
       "file": "desensitizationBiz.tsx",
       "title": "证件类型联动示例",
       "note": "切换证件类型自动清空证件号码；选择身份证后输入号码可自动回填性别和年龄（性别/年龄此时禁用）。",
-      "source": "import { Form } from 'antd';\nimport React from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { tools, validate } from '@zat-design/utils';\n\nconst CERT_TYPE_OPTIONS = [\n  { label: '身份证', value: '0' },\n  { label: '护照', value: '1' },\n  { label: '军官证', value: '2' },\n];\n\nconst GENDER_OPTIONS = [\n  { label: '男', value: '0' },\n  { label: '女', value: '1' },\n];\n\n// 证件类型对应的校验规则，value 与 @zat-design/utils validate 规则名对应\nconst CERT_RULES = [\n  { label: '身份证', value: 'isIdCard', certType: '0' },\n  { label: '护照', value: 'isPassportCard', certType: '1' },\n  { label: '军官证', value: 'isOfficerCard', certType: '2' },\n];\n\nconst IS_ID_CARD = '0';\n\nconst BaseModule: React.FC = () => {\n  const [form] = Form.useForm();\n\n  const columns: ProFormColumnType[] = [\n    {\n      type: 'Select',\n      label: '证件类型',\n      name: 'certType',\n      fieldProps: {\n        dataSource: CERT_TYPE_OPTIONS,\n        onFieldChange: (value, _record, { form: f }) => {\n          // 切换证件类型时清空证件号码\n          f.setFieldValue('certNo', undefined);\n        },\n      },\n    },\n    {\n      type: 'Input',\n      label: '证件号码',\n      name: 'certNo',\n      rules: (values) => {\n        const rule = CERT_RULES.find((r) => r.certType === values.certType);\n        return rule ? [{ type: rule.value, message: `请输入正确的${rule.label}号码` }] : [];\n      },\n      fieldProps: {\n        onFieldChange: (value, record, { form: f }) => {\n          if (validate.isIdCard(record?.certNo)) {\n            const info = tools.getDataByIdCard(record.certNo, {\n              fieldNames: { male: '0', female: '1' },\n            }) as { gender: string; age: number };\n            f.setFieldsValue({ gender: String(info.gender), age: info.age });\n          }\n        },\n      },\n    },\n    {\n      type: 'Select',\n      label: '性别',\n      name: 'gender',\n      disabled: (values) => values.certType === IS_ID_CARD,\n      fieldProps: {\n        dataSource: GENDER_OPTIONS,\n      },\n    },\n    {\n      type: 'InputNumber',\n      label: '年龄',\n      name: 'age',\n      disabled: (values) => values.certType === IS_ID_CARD,\n    },\n  ];\n\n  return (\n    <ProForm\n      form={form}\n      columns={columns}\n      initialValues={{ certType: IS_ID_CARD }}\n      footer={false}\n    />\n  );\n};\n\nexport default BaseModule;\n"
+      "source": "import { Form } from 'antd';\nimport dayjs from 'dayjs';\nimport React from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { tools, validate } from '@zat-design/utils';\n\nconst CERT_TYPE_OPTIONS = [\n  { label: '身份证', value: '0' },\n  { label: '护照', value: '1' },\n  { label: '军官证', value: '2' },\n];\n\nconst GENDER_OPTIONS = [\n  { label: '男', value: '0' },\n  { label: '女', value: '1' },\n];\n\n// 证件类型对应的校验规则，value 与 @zat-design/utils validate 规则名对应\nconst CERT_RULES = [\n  { label: '身份证', value: 'isIdCard', certType: '0' },\n  { label: '护照', value: 'isPassportCard', certType: '1' },\n  { label: '军官证', value: 'isOfficerCard', certType: '2' },\n];\n\nconst IS_ID_CARD = '0';\n\nconst BaseModule: React.FC = () => {\n  const [form] = Form.useForm();\n\n  const columns: ProFormColumnType[] = [\n    {\n      type: 'Select',\n      label: '证件类型',\n      name: 'certType',\n      fieldProps: {\n        dataSource: CERT_TYPE_OPTIONS,\n        onFieldChange: (value, _record, { form: f }) => {\n          // 切换证件类型时清空证件号码\n          f.setFieldValue('certNo', undefined);\n        },\n      },\n    },\n    {\n      type: 'Input',\n      label: '证件号码',\n      name: 'certNo',\n      rules: (values) => {\n        const rule = CERT_RULES.find((r) => r.certType === values.certType);\n        return rule ? [{ type: rule.value, message: `请输入正确的${rule.label}号码` }] : [];\n      },\n      fieldProps: {\n        onFieldChange: (value, record, { form: f }) => {\n          if (record?.certType === IS_ID_CARD && validate.isIdCard(record?.certNo)) {\n            const info = tools.getDataByIdCard(record.certNo, {\n              fieldNames: { male: '0', female: '1' },\n            }) as { gender: string; age: number; birthday: string };\n            f.setFieldsValue({\n              gender: String(info.gender),\n              age: info.age,\n              birthday: info.birthday ? dayjs(info.birthday) : undefined,\n            });\n          }\n        },\n      },\n    },\n    {\n      type: 'Select',\n      label: '性别',\n      name: 'gender',\n      disabled: (values) => values.certType === IS_ID_CARD,\n      fieldProps: {\n        dataSource: GENDER_OPTIONS,\n      },\n    },\n    {\n      type: 'InputNumber',\n      label: '年龄',\n      name: 'age',\n      disabled: (values) => values.certType === IS_ID_CARD,\n    },\n    {\n      type: 'DatePicker',\n      label: '出生日期',\n      name: 'birthday',\n      disabled: (values) => values.certType === IS_ID_CARD,\n    },\n  ];\n\n  return (\n    <ProForm\n      form={form}\n      columns={columns}\n      initialValues={{ certType: IS_ID_CARD }}\n      footer={false}\n    />\n  );\n};\n\nexport default BaseModule;\n"
     },
     {
       "component": "ProForm",
@@ -869,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",
@@ -1023,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",
@@ -1184,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",
@@ -1301,7 +1399,7 @@
       "file": "tabsSearch.tsx",
       "title": "单元格编辑",
       "note": "`tabs 表格查询标签配置`",
-      "source": "import { useState } from 'react';\nimport { Button, Form, message, Space } from 'antd';\nimport {\n  ProConfigProvider,\n  ProTable,\n  ProForm,\n  ProLayout,\n  ProHeader,\n} from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { getUseAntdTableDemoData } from './data/useAntdTableDemoData';\nimport type { ProTableListResponseType } from '@zat-design/sisyphus-react';\n\nconst { useAntdTable } = ProTable;\n\nconst searchColumn: ProFormColumnType[] = [\n  {\n    type: 'Input',\n    label: '产品代码',\n    name: 'productCode',\n  },\n  {\n    type: 'Input',\n    label: '产品名称',\n    name: 'productName',\n  },\n  {\n    type: 'Input',\n    label: '产品公司',\n    name: 'companyName',\n  },\n  {\n    type: 'Group',\n    label: '紧凑表单带分隔',\n    names: ['separator1', 'separator2'],\n    fieldProps: {\n      space: {\n        compact: true,\n        separator: '~',\n      },\n      children: [\n        {\n          type: 'Input',\n        },\n        {\n          type: 'Input',\n        },\n      ],\n    },\n  },\n];\n\n// 列表列定义\nconst columns: ProTableColumnType[] = [\n  {\n    title: '产品代码',\n    dataIndex: 'productCode',\n    width: 200,\n    tooltip: '产品代码提示',\n  },\n  {\n    title: '产品名称',\n    dataIndex: 'productName',\n    width: 300,\n    tooltip: {\n      title: '产品名称提示',\n    },\n  },\n  {\n    title: '产品公司',\n    dataIndex: 'companyName',\n    width: 300,\n  },\n  {\n    title: '产品状态',\n    dataIndex: 'productStatus',\n    width: 300,\n  },\n  {\n    title: '操作',\n    dataIndex: 'operate',\n    render: (text: string, record: any) => (\n      <Space size={8}>\n        <Button type=\"link\" onClick={() => message.info(`查看${JSON.stringify(record)}`)}>\n          查看\n        </Button>\n        <Button type=\"link\" onClick={() => message.info(`编辑${JSON.stringify(record)}`)}>\n          编辑\n        </Button>\n      </Space>\n    ),\n  },\n];\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst UseAntdTableDemo = () => {\n  const [form] = Form.useForm();\n  const [extraParams, setExtraParams] = useState('TASK111');\n\n  const getTableData = (data) => {\n    console.log('data', data);\n\n    return new Promise<ProTableListResponseType<Record<string, any>>>((resolve) => {\n      setTimeout(() => {\n        resolve({\n          status: 200,\n          // @ts-ignore\n          data: {\n            list: getUseAntdTableDemoData(data.pageNum),\n            total: 50,\n            pageNum: 1,\n            pageSize: 10,\n          },\n          message: '',\n        });\n      }, 1000);\n    });\n  };\n\n  const { params, selectedRowKeys, selectedRecords, onSearch, onReset, tableProps } = useAntdTable(\n    getTableData,\n    {\n      form,\n      rowKey: 'productId',\n      rowSelections: true, // 开启选择下拉-选择当前页、选择全部、取消选择\n      extraParams: {\n        // 表单之外的额外参数，此值变更时也会重新发起请求,重置表单不会被清空\n        taskNo: extraParams,\n      },\n      transformResponse: (res: any) => {\n        const { data } = res;\n        return {\n          ...data,\n        };\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=\"use-antd-table-demo\"\n        columns={columns}\n        tabs={{\n          name: 'status',\n          // code: 'tabs', // 可取码表值，也可以直接传入数据源\n          dataSource: [\n            {\n              label: '待处理',\n              value: 'pending',\n            },\n            {\n              label: '处理中',\n              value: 'processing',\n            },\n            {\n              label: '已处理',\n              value: 'processed',\n            },\n          ],\n          transformResponse: (res) => {\n            const result = res;\n            result.unshift({\n              label: '全部',\n              value: '',\n            });\n            return result;\n          },\n        }}\n        scroll={{ x: 'max-content' }}\n        {...tableProps}\n        footerRender={() => <Button type=\"link\">删除</Button>}\n      />\n      <div style={{ background: '#f5f5f5', padding: 8 }}>\n        <p>请求参数: {JSON.stringify(params)}</p>\n        <p>勾选数据: {JSON.stringify(selectedRecords)}</p>\n        <p>勾选keys: {JSON.stringify(selectedRowKeys)}</p>\n      </div>\n    </>\n  );\n};\n\nexport default UseAntdTableDemo;\n"
+      "source": "import { useState } from 'react';\nimport { Button, Form, message, Space } from 'antd';\nimport {\n  ProConfigProvider,\n  ProTable,\n  ProForm,\n  ProLayout,\n  ProHeader,\n} from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { getUseAntdTableDemoData } from './data/useAntdTableDemoData';\nimport type { ProTableListResponseType } from '@zat-design/sisyphus-react';\n\nconst { useAntdTable } = ProTable;\n\nconst searchColumn: ProFormColumnType[] = [\n  {\n    type: 'Input',\n    label: '产品代码',\n    name: 'productCode',\n  },\n  {\n    type: 'Input',\n    label: '产品名称',\n    name: 'productName',\n  },\n  {\n    type: 'Input',\n    label: '产品公司',\n    name: 'companyName',\n  },\n  {\n    type: 'Group',\n    label: '紧凑表单带分隔',\n    names: ['separator1', 'separator2'],\n    fieldProps: {\n      space: {\n        compact: true,\n        separator: '~',\n      },\n      children: [\n        {\n          type: 'Input',\n        },\n        {\n          type: 'Input',\n        },\n      ],\n    },\n  },\n];\n\n// 列表列定义\nconst columns: ProTableColumnType[] = [\n  {\n    title: '产品代码',\n    dataIndex: 'productCode',\n    width: 200,\n    tooltip: '产品代码提示',\n  },\n  {\n    title: '产品名称',\n    dataIndex: 'productName',\n    width: 300,\n    tooltip: {\n      title: '产品名称提示',\n    },\n  },\n  {\n    title: '产品公司',\n    dataIndex: 'companyName',\n    width: 300,\n  },\n  {\n    title: '产品状态',\n    dataIndex: 'productStatus',\n    width: 300,\n  },\n  {\n    title: '操作',\n    dataIndex: 'operate',\n    render: (text: string, record: any) => (\n      <Space size={8}>\n        <Button type=\"link\" onClick={() => message.info(`查看${JSON.stringify(record)}`)}>\n          查看\n        </Button>\n        <Button type=\"link\" onClick={() => message.info(`编辑${JSON.stringify(record)}`)}>\n          编辑\n        </Button>\n      </Space>\n    ),\n  },\n];\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst UseAntdTableDemo = () => {\n  const [form] = Form.useForm();\n  const [extraParams, setExtraParams] = useState('TASK111');\n\n  const getTableData = (data) => {\n    console.log('data', data);\n\n    return new Promise<ProTableListResponseType<Record<string, any>>>((resolve) => {\n      setTimeout(() => {\n        resolve({\n          status: 200,\n          // @ts-ignore\n          data: {\n            list: getUseAntdTableDemoData(data.pageNum),\n            total: 50,\n            pageNum: 1,\n            pageSize: 10,\n          },\n          message: '',\n        });\n      }, 1000);\n    });\n  };\n\n  const { params, selectedRowKeys, selectedRecords, onSearch, onReset, tableProps } = useAntdTable(\n    getTableData,\n    {\n      form,\n      rowKey: 'productId',\n      rowSelections: true, // 开启选择下拉-选择当前页、选择全部、取消选择\n      extraParams: {\n        // 表单之外的额外参数，此值变更时也会重新发起请求,重置表单不会被清空\n        taskNo: extraParams,\n      },\n      transformResponse: (res: any) => {\n        const { data } = res;\n        return {\n          ...data,\n        };\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=\"use-antd-table-demo\"\n        columns={columns}\n        tabs={{\n          name: 'status',\n          // mode: 'Segmented', // 展示模式：'Tab' 卡片页签 / 'Segmented' 分段控制器，默认 'Segmented'\n          // code: 'tabs', // 可取码表值，也可以直接传入数据源\n          dataSource: [\n            {\n              label: '待处理',\n              value: 'pending',\n            },\n            {\n              label: '处理中',\n              value: 'processing',\n            },\n            {\n              label: '已处理',\n              value: 'processed',\n            },\n          ],\n          transformResponse: (res) => {\n            const result = res;\n            result.unshift({\n              label: '全部',\n              value: '',\n            });\n            return result;\n          },\n        }}\n        scroll={{ x: 'max-content' }}\n        {...tableProps}\n        footerRender={() => <Button type=\"link\">删除</Button>}\n      />\n      <div style={{ background: '#f5f5f5', padding: 8 }}>\n        <p>请求参数: {JSON.stringify(params)}</p>\n        <p>勾选数据: {JSON.stringify(selectedRecords)}</p>\n        <p>勾选keys: {JSON.stringify(selectedRowKeys)}</p>\n      </div>\n    </>\n  );\n};\n\nexport default UseAntdTableDemo;\n"
     },
     {
       "component": "ProTable",

package/meta/props.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.4",
+  "version": "4.5.6-beta.2",
   "components": {
     "FormsProvider": {
       "source": "ts-interface",
@@ -64,6 +64,11 @@
               "required": false,
               "description": "全局配置项，见下面详细的配置描述"
             },
+            "theme": {
+              "type": "ThemeConfig",
+              "required": false,
+              "description": "antd 原生主题配置，用法同 antd ConfigProvider 的 theme，支持全局 token 与 components 组件级主题变量，会与内部主题上下文深度合并后透传"
+            },
             "onSuccess": {
               "type": "(data: TData, params: TParams) => void",
               "required": false,
@@ -1081,7 +1086,7 @@
               "type": "string",
               "required": false,
               "defaultValue": "ProSelect",
-              "description": "ProSelect/Radio/Checkbox/Tag/Group"
+              "description": "ProSelect/Radio/Checkbox/Tag/Group/Segmented"
             },
             "allowClear": {
               "type": "boolean",
@@ -2044,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": [
@@ -2926,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.4",
+  "version": "0.1.6",
   "description": "MCP server for @zat-design/sisyphus-react — 向 AI 编码助手暴露组件库的清单/API/示例查询能力",
   "type": "module",
   "bin": {