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

package/meta/components.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.2",
+  "version": "4.5.5-beta.1",
   "components": [
     {
       "name": "FormsProvider",

package/meta/examples.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.2",
+  "version": "4.5.5-beta.1",
   "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",
@@ -391,7 +398,7 @@
       "file": "virtualList.tsx",
       "title": "虚拟表格",
       "note": "解决大表单渲染卡顿问题，开启虚拟列表，配置 scroll,x,y 必须为固定值",
-      "source": "import { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport {\n  ProForm,\n  ProConfigProvider,\n  ProEditTableColumnType,\n  ProFormColumnType,\n} from '@zat-design/sisyphus-react';\nimport { validate } from '@zat-design/utils';\nimport { enumCodeConfig, formData } from './data/data';\n\nconst KEYS_WITH_INSURED = [\n  'name',\n  'certType',\n  'certNo',\n  'birthday',\n  'gender',\n  'certStartDate',\n  'certEndDate',\n  'nativeplace',\n  'occupationCode',\n  'mobile',\n  'province',\n  'city',\n  'county',\n  'address',\n];\n\nexport const checkCert = (_, value) => {\n  const [certType, certNo] = value || [];\n  if (certType === '01' && !validate.isIdCard(certNo)) {\n    return Promise.reject(new Error('请输入正确的身份证号码'));\n  }\n  if (!certType) {\n    return Promise.reject(new Error('请选择证件类型'));\n  }\n  if (!certNo) {\n    return Promise.reject(new Error('请输入的证件号码'));\n  }\n  return Promise.resolve();\n};\n\nexport const checkAddress = (_rule, value) => {\n  const [province, city, county, address] = value || [];\n  if (value) {\n    if (!province || !city || !county) {\n      return Promise.reject(new Error('请选择省/市/区或直辖市'));\n    }\n  }\n  if (!address) {\n    return Promise.reject(new Error('请输入详细地址'));\n  }\n  return Promise.resolve();\n};\n\nconst Demo = () => {\n  const [jsonData, setJsonData] = useState({});\n\n  const [form] = Form.useForm();\n\n  const onFinish = async () => {\n    const values = await form.validateFields();\n    setJsonData(values);\n  };\n\n  const columns: ProEditTableColumnType[] = [\n    {\n      type: 'InputNumber',\n      label: '受益比例(%)',\n      name: 'percentOfBenefit',\n      width: 120,\n      required: true,\n      fixed: 'left',\n      fieldProps: {\n        min: 1,\n        max: 100,\n        precision: 0,\n      },\n    },\n    {\n      type: 'ProEnum',\n      label: '受益顺序',\n      name: 'benefitSerialNo',\n      width: '140px',\n      required: true,\n      fieldProps: {\n        code: 'CD000867',\n        showCodeName: true,\n      },\n    },\n    {\n      type: 'ProEnum',\n      label: '与被保险人关系',\n      name: 'relationToInsured',\n      required: true,\n      fieldProps: {\n        code: 'CD000806',\n        showCodeName: true,\n        onFieldChange(val: string, record: any) {\n          // 联动其他值\n          if (val === '1') {\n            const values = formData;\n            record.disabled = true;\n            KEYS_WITH_INSURED.forEach((key) => {\n              record[key] = values[key];\n            });\n          } else {\n            record.disabled = false;\n            KEYS_WITH_INSURED.forEach((key) => {\n              record[key] = undefined;\n            });\n          }\n        },\n      },\n    },\n    {\n      label: '受益人姓名',\n      name: 'name',\n      required: true,\n      fieldProps: {\n        maxLength: 50,\n      },\n    },\n    {\n      type: 'Group',\n      label: '证件号码',\n      required: true,\n      rules: [{ validator: checkCert }],\n      names: ['certType', 'certNo'],\n      width: '360px',\n      fieldProps: {\n        space: {\n          compact: true,\n        },\n        children: [\n          {\n            type: 'ProEnum',\n            fieldProps: {\n              style: {\n                width: '150px',\n              },\n              code: 'CD000879',\n              showCodeName: true,\n            },\n          },\n          {\n            type: 'Input',\n          },\n        ],\n      },\n    },\n    {\n      type: 'DatePicker',\n      label: '出生日期',\n      name: 'birthday',\n      required: true,\n      fieldProps: {\n        format: 'YYYY-MM-DD',\n      },\n    },\n    {\n      type: 'ProEnum',\n      label: '性别',\n      name: 'gender',\n      required: true,\n      fieldProps: {\n        code: 'CD000060',\n        showCodeName: true,\n      },\n    },\n    {\n      type: 'DatePicker',\n      label: '证件有效起期',\n      name: 'certStartDate',\n      rules: (text: string, record: any) => {\n        return [{ required: record.isIdCard, message: '请选择证件有效起期' }];\n      },\n      valueType: 'date',\n      toCSTString: true,\n      fieldProps: (text: string, record: any) => {\n        const { certEndDate } = record;\n        return {\n          disabledDate: (current: any) => current && certEndDate && current.isAfter(certEndDate),\n          onFieldChange(val: string, record: any) {\n            if (record) {\n              record.certStartDate = val;\n            }\n          },\n        };\n      },\n    },\n    {\n      type: 'ProTimeLimit',\n      label: '证件有效止期',\n      name: 'certEndDate',\n      required: true,\n      fieldProps: (text: string, record: any) => {\n        const { certStartDate } = record;\n        return {\n          disabledDate: (current: any) =>\n            current && certStartDate && current.isBefore(certStartDate),\n        };\n      },\n    },\n    {\n      type: 'ProEnum',\n      label: '国籍',\n      name: 'nativeplace',\n      required: true,\n      fieldProps: {\n        code: 'CD000832',\n        showCodeName: true,\n      },\n    },\n    {\n      type: 'ProEnum',\n      label: '职业小类',\n      name: 'occupationCode',\n      required: true,\n      fieldProps: {\n        code: 'CD000862',\n        showCodeName: true,\n      },\n    },\n    {\n      label: '联系方式',\n      name: 'mobile',\n      required: true,\n      fieldProps: {\n        maxLength: 11,\n      },\n    },\n    {\n      type: 'ProCascader',\n      label: '联系地址',\n      required: true,\n      rules: [{ required: true, message: '请输入联系地址' }],\n      names: ['province', 'city', 'county', 'address'],\n      width: '360px',\n      fieldProps: {\n        mode: 'address',\n      },\n    },\n  ];\n\n  const data = [];\n  for (let index = 1; index < 1000; index++) {\n    data.push({\n      ...formData,\n      name: `杨杰${index}`,\n      percentOfBenefit: index,\n      id: index,\n    });\n  }\n\n  const formColumns: ProFormColumnType[] = [\n    {\n      type: 'ProEditTable',\n      span: 24,\n      name: 'cyList',\n      fieldProps: {\n        columns,\n        virtual: true,\n        scroll: { x: 3000, y: 400 },\n      },\n    },\n  ];\n\n  useEffect(() => {\n    form.setFieldsValue({\n      cyList: data,\n    });\n  }, []);\n\n  // ProConfigProvider 真实场景注册在应用入口处即可全局使用，此处只做示例展示\n  return (\n    <ProConfigProvider value={enumCodeConfig}>\n      <ProForm form={form} columns={formColumns} footer={false} />\n      <Button type=\"primary\" onClick={onFinish}>\n        保存\n      </Button>\n      <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n      <ReactJson src={jsonData} collapsed />\n    </ProConfigProvider>\n  );\n};\n\nexport default Demo;\n"
+      "source": "import { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport {\n  ProForm,\n  ProConfigProvider,\n  ProEditTableColumnType,\n  ProFormColumnType,\n} from '@zat-design/sisyphus-react';\nimport { validate } from '@zat-design/utils';\nimport { enumCodeConfig, formData } from './data/data';\n\nconst KEYS_WITH_INSURED = [\n  'name',\n  'certType',\n  'certNo',\n  'birthday',\n  'gender',\n  'certStartDate',\n  'certEndDate',\n  'nativeplace',\n  'occupationCode',\n  'mobile',\n  'province',\n  'city',\n  'county',\n  'address',\n];\n\nexport const checkCert = (_, value) => {\n  const [certType, certNo] = value || [];\n  if (certType === '01' && !validate.isIdCard(certNo)) {\n    return Promise.reject(new Error('请输入正确的身份证号码'));\n  }\n  if (!certType) {\n    return Promise.reject(new Error('请选择证件类型'));\n  }\n  if (!certNo) {\n    return Promise.reject(new Error('请输入的证件号码'));\n  }\n  return Promise.resolve();\n};\n\nexport const checkAddress = (_rule, value) => {\n  const [province, city, county, address] = value || [];\n  if (value) {\n    if (!province || !city || !county) {\n      return Promise.reject(new Error('请选择省/市/区或直辖市'));\n    }\n  }\n  if (!address) {\n    return Promise.reject(new Error('请输入详细地址'));\n  }\n  return Promise.resolve();\n};\n\nconst Demo = () => {\n  const [jsonData, setJsonData] = useState({});\n\n  const [form] = Form.useForm();\n\n  const onFinish = async () => {\n    const values = await form.validateFields();\n    setJsonData(values);\n  };\n\n  const columns: ProEditTableColumnType[] = [\n    {\n      type: 'InputNumber',\n      label: '受益比例(%)',\n      name: 'percentOfBenefit',\n      width: 120,\n      required: true,\n      fixed: 'left',\n      fieldProps: {\n        min: 1,\n        max: 100,\n        precision: 0,\n      },\n    },\n    {\n      type: 'ProEnum',\n      label: '受益顺序',\n      name: 'benefitSerialNo',\n      width: '140px',\n      required: true,\n      fieldProps: {\n        code: 'CD000867',\n        showCodeName: true,\n      },\n    },\n    {\n      type: 'ProEnum',\n      label: '与被保险人关系',\n      name: 'relationToInsured',\n      required: true,\n      fieldProps: {\n        code: 'CD000806',\n        showCodeName: true,\n        onFieldChange(val: string, record: any) {\n          // 联动其他值\n          if (val === '1') {\n            const values = formData;\n            record.disabled = true;\n            KEYS_WITH_INSURED.forEach((key) => {\n              record[key] = values[key];\n            });\n          } else {\n            record.disabled = false;\n            KEYS_WITH_INSURED.forEach((key) => {\n              record[key] = undefined;\n            });\n          }\n        },\n      },\n    },\n    {\n      label: '受益人姓名',\n      name: 'name',\n      required: true,\n      fieldProps: {\n        maxLength: 50,\n      },\n    },\n    {\n      type: 'Group',\n      label: '证件号码',\n      required: true,\n      rules: [{ validator: checkCert }],\n      names: ['certType', 'certNo'],\n      width: '360px',\n      fieldProps: {\n        space: {\n          compact: true,\n        },\n        children: [\n          {\n            type: 'ProEnum',\n            fieldProps: {\n              style: {\n                width: '150px',\n              },\n              code: 'CD000879',\n              showCodeName: true,\n            },\n          },\n          {\n            type: 'Input',\n          },\n        ],\n      },\n    },\n    {\n      type: 'DatePicker',\n      label: '出生日期',\n      name: 'birthday',\n      required: true,\n      fieldProps: {\n        format: 'YYYY-MM-DD',\n      },\n    },\n    {\n      type: 'ProEnum',\n      label: '性别',\n      name: 'gender',\n      required: true,\n      fieldProps: {\n        code: 'CD000060',\n        showCodeName: true,\n      },\n    },\n    {\n      type: 'DatePicker',\n      label: '证件有效起期',\n      name: 'certStartDate',\n      // 性能提示：函数型 fieldProps/rules 会触发整行 shouldCellUpdate，仅在确有跨字段联动时使用\n      rules: (text: string, record: any) => {\n        return [{ required: record.isIdCard, message: '请选择证件有效起期' }];\n      },\n      valueType: 'date',\n      toCSTString: true,\n      fieldProps: (text: string, record: any) => {\n        const { certEndDate } = record;\n        return {\n          disabledDate: (current: any) => current && certEndDate && current.isAfter(certEndDate),\n          onFieldChange(val: string, record: any) {\n            if (record) {\n              record.certStartDate = val;\n            }\n          },\n        };\n      },\n    },\n    {\n      type: 'ProTimeLimit',\n      label: '证件有效止期',\n      name: 'certEndDate',\n      required: true,\n      fieldProps: (text: string, record: any) => {\n        const { certStartDate } = record;\n        return {\n          disabledDate: (current: any) =>\n            current && certStartDate && current.isBefore(certStartDate),\n        };\n      },\n    },\n    {\n      type: 'ProEnum',\n      label: '国籍',\n      name: 'nativeplace',\n      required: true,\n      fieldProps: {\n        code: 'CD000832',\n        showCodeName: true,\n      },\n    },\n    {\n      type: 'ProEnum',\n      label: '职业小类',\n      name: 'occupationCode',\n      required: true,\n      fieldProps: {\n        code: 'CD000862',\n        showCodeName: true,\n      },\n    },\n    {\n      label: '联系方式',\n      name: 'mobile',\n      required: true,\n      fieldProps: {\n        maxLength: 11,\n      },\n    },\n    {\n      type: 'ProCascader',\n      label: '联系地址',\n      required: true,\n      rules: [{ required: true, message: '请输入联系地址' }],\n      names: ['province', 'city', 'county', 'address'],\n      width: '360px',\n      fieldProps: {\n        mode: 'address',\n      },\n    },\n  ];\n\n  const data = [];\n  for (let index = 1; index < 1000; index++) {\n    // 虚拟滚动性能：行对象仅保留列实际用到的字段，避免整行比较/克隆携带无用数据\n    data.push({\n      id: index,\n      percentOfBenefit: index,\n      benefitSerialNo: formData.benefitSerialNo,\n      relationToInsured: formData.relationToInsured,\n      name: `杨杰${index}`,\n      certType: formData.certType,\n      certNo: formData.certNo,\n      birthday: formData.birthday,\n      gender: formData.gender,\n      certStartDate: formData.certStartDate,\n      certEndDate: formData.certEndDate,\n      nativeplace: formData.nativeplace,\n      occupationCode: formData.occupationCode,\n      mobile: formData.mobile,\n      province: formData.province,\n      city: formData.city,\n      county: formData.county,\n      address: formData.address,\n    });\n  }\n\n  const formColumns: ProFormColumnType[] = [\n    {\n      type: 'ProEditTable',\n      span: 24,\n      name: 'cyList',\n      fieldProps: {\n        columns,\n        virtual: true,\n        // 控制可见行数，减少滚动时每帧挂载的表单控件数量\n        scroll: { x: 3000, y: 400 },\n      },\n    },\n  ];\n\n  useEffect(() => {\n    form.setFieldsValue({\n      cyList: data,\n    });\n  }, []);\n\n  // ProConfigProvider 真实场景注册在应用入口处即可全局使用，此处只做示例展示\n  return (\n    <ProConfigProvider value={enumCodeConfig}>\n      <ProForm form={form} columns={formColumns} footer={false} />\n      <Button type=\"primary\" onClick={onFinish}>\n        保存\n      </Button>\n      <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n      <ReactJson src={jsonData} collapsed />\n    </ProConfigProvider>\n  );\n};\n\nexport default Demo;\n"
     },
     {
       "component": "ProEnum",
@@ -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",
@@ -587,7 +601,7 @@
       "file": "base.tsx",
       "title": "基本使用",
       "note": "",
-      "source": "import { Form, Radio } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { addressDataSource } from './data/enum';\n\nconst BaseModule: React.FC = () => {\n  const [state, setState] = useState('primary');\n  const [data, setData] = useState({});\n  const [form] = Form.useForm();\n\n  const columns: ProFormColumnType[] = [\n    // {\n    //   type: 'Input',\n    //   label: '输入框',\n    //   name: 'typeName',\n    //   required: true,\n    //   tooltip: '提示信息',\n    // },\n    // {\n    //   type: 'ProCascader',\n    //   label: '地址',\n    //   names: ['p', 'c', 'a', 'address'],\n    //   required: true,\n    //   span: 16,\n    //   fieldProps: {\n    //     mode: 'address',\n    //     dataSource: addressDataSource,\n    //   },\n    // },\n    // {\n    //   type: 'InputNumber',\n    //   label: '算千分数字输入框',\n    //   name: 'InputNumber',\n    //   valueType: 'thousandth', // 输入可千分\n    // },\n    // {\n    //   type: 'InputNumber',\n    //   label: '正整数',\n    //   name: 'Number',\n    //   fieldProps: {\n    //     precision: 0,\n    //     min: 1,\n    //   },\n    // },\n    // {\n    //   type: 'ProNumberRange',\n    //   label: '范围输入框',\n    //   names: ['min', 'max'],\n    //   valueType: 'thousandth', // 输入可千分\n    // },\n    // {\n    //   type: 'Radio',\n    //   label: '单选框',\n    //   name: 'Radio',\n    //   fieldProps: {\n    //     dataSource: [\n    //       { value: '1', label: '类型1' },\n    //       { value: '2', label: '类型3' },\n    //     ],\n    //   },\n    // },\n    // {\n    //   type: 'Checkbox',\n    //   label: '多选框',\n    //   name: 'Checkbox',\n    //   fieldProps: {\n    //     dataSource: [\n    //       { value: '1', label: '类型1' },\n    //       { value: '2', label: '类型3' },\n    //     ],\n    //   },\n    // },\n    // { type: 'Switch', label: '开关', name: 'switch' },\n    // {\n    //   type: 'DatePicker',\n    //   label: '日期选择',\n    //   name: 'DatePicker',\n    //   valueType: 'date',\n    // },\n    // {\n    //   type: 'RangePicker',\n    //   label: '时间范围选择',\n    //   names: ['start', 'end'],\n    //   valueType: 'dateStartEndTime',\n    // },\n    {\n      type: 'ProSelect',\n      label: '证件类型',\n      name: 'certType',\n      fieldProps: {\n        dataSource: [\n          { label: '身份证', value: 'I' },\n          { label: '军官证', value: 'J' },\n          { label: '户口本', value: 'K' },\n          { label: '医保卡', value: 'O' },\n        ],\n      },\n    },\n  ];\n\n  const handleStateChange = (val) => {\n    setState(val);\n  };\n\n  return (\n    <>\n      <Form.Item label=\"查看状态\">\n        <Radio.Group onChange={(e) => handleStateChange(e.target.value)} value={state}>\n          <Radio value=\"primary\">正常</Radio>\n          <Radio value=\"disabled\">禁用</Radio>\n          <Radio value=\"view\">查看</Radio>\n        </Radio.Group>\n      </Form.Item>\n      <ProForm\n        form={form}\n        submitOnEnter\n        columns={columns}\n        disabled={state === 'disabled'}\n        isView={state === 'view'}\n        initialValues={{\n          switch: true,\n        }}\n        onFinish={(values) => {\n          setData(values);\n        }}\n      />\n      <h4>数据源</h4>\n      <ReactJson src={data} />\n    </>\n  );\n};\n\nexport default BaseModule;\n"
+      "source": "import { Form, Radio } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { addressDataSource } from './data/enum';\n\nconst BaseModule: React.FC = () => {\n  const [state, setState] = useState('primary');\n  const [data, setData] = useState({});\n  const [form] = Form.useForm();\n\n  const columns: ProFormColumnType[] = [\n    {\n      type: 'Input',\n      label: '输入框',\n      name: 'typeName',\n      required: true,\n      tooltip: '提示信息',\n    },\n    {\n      type: 'ProCascader',\n      label: '地址',\n      names: ['p', 'c', 'a', 'address'],\n      required: true,\n      span: 16,\n      fieldProps: {\n        mode: 'address',\n        dataSource: addressDataSource,\n      },\n    },\n    {\n      type: 'InputNumber',\n      label: '算千分数字输入框',\n      name: 'InputNumber',\n      valueType: 'thousandth', // 输入可千分\n    },\n    {\n      type: 'InputNumber',\n      label: '正整数',\n      name: 'Number',\n      fieldProps: {\n        precision: 0,\n        min: 1,\n      },\n    },\n    {\n      type: 'ProNumberRange',\n      label: '范围输入框',\n      names: ['min', 'max'],\n      valueType: 'thousandth', // 输入可千分\n    },\n    {\n      type: 'Radio',\n      label: '单选框',\n      name: 'Radio',\n      fieldProps: {\n        dataSource: [\n          { value: '1', label: '类型1' },\n          { value: '2', label: '类型3' },\n        ],\n      },\n    },\n    {\n      type: 'Checkbox',\n      label: '多选框',\n      name: 'Checkbox',\n      fieldProps: {\n        dataSource: [\n          { value: '1', label: '类型1' },\n          { value: '2', label: '类型3' },\n        ],\n      },\n    },\n    { type: 'Switch', label: '开关', name: 'switch' },\n    {\n      type: 'DatePicker',\n      label: '日期选择',\n      name: 'DatePicker',\n      valueType: 'date',\n    },\n    {\n      type: 'RangePicker',\n      label: '时间范围选择',\n      names: ['start', 'end'],\n      valueType: 'dateStartEndTime',\n    },\n    {\n      type: 'ProSelect',\n      label: '证件类型',\n      name: 'certType',\n      fieldProps: {\n        dataSource: [\n          { label: '身份证', value: 'I' },\n          { label: '军官证', value: 'J' },\n          { label: '户口本', value: 'K' },\n          { label: '医保卡', value: 'O' },\n        ],\n      },\n    },\n  ];\n\n  const handleStateChange = (val) => {\n    setState(val);\n  };\n\n  return (\n    <>\n      <Form.Item label=\"查看状态\">\n        <Radio.Group onChange={(e) => handleStateChange(e.target.value)} value={state}>\n          <Radio value=\"primary\">正常</Radio>\n          <Radio value=\"disabled\">禁用</Radio>\n          <Radio value=\"view\">查看</Radio>\n        </Radio.Group>\n      </Form.Item>\n      <ProForm\n        form={form}\n        submitOnEnter\n        columns={columns}\n        disabled={state === 'disabled'}\n        isView={state === 'view'}\n        initialValues={{\n          switch: true,\n        }}\n        onFinish={(values) => {\n          setData(values);\n        }}\n      />\n      <h4>数据源</h4>\n      <ReactJson src={data} />\n    </>\n  );\n};\n\nexport default BaseModule;\n"
     },
     {
       "component": "ProForm",
@@ -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",
@@ -1301,7 +1315,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",
@@ -1448,7 +1462,7 @@
       "file": "init.tsx",
       "title": "基本使用",
       "note": "默认支持 `dataSource`、`ProEnum` 的 `code` 数据源消费消费、支持字段搜索、支持 `tree` 和 `treeSelect` 2种展现模式、默认展现形式为 Tree。",
-      "source": "import { SmileOutlined } from '@ant-design/icons';\nimport { useSetState } from 'ahooks';\nimport { ProTree } from '@zat-design/sisyphus-react';\n\nconst dataSourceTree = [\n  {\n    label: '中意财产保险有限公司黑龙江分公司',\n    value: 1,\n    checkable: false,\n    disableCheckbox: true,\n    disabled: true,\n  },\n  {\n    label: '中意财产保险有限公司黑龙江分公司市场部',\n    value: 2,\n    icon: <SmileOutlined />,\n  },\n  {\n    label: '中意财产保险有限公司黑龙江分公司市场营销部黑分专代海洋望奎吉龙',\n    value: 'C',\n    // isLeaf: true,\n    // selectable: true,\n    title: '自定义title',\n    key: 'selft key',\n    icon: <SmileOutlined />,\n    children: [\n      {\n        label: '中意财产-erji',\n        value: 'ccA-A',\n        children: [\n          {\n            label: '中意财产-erji',\n            value: 11,\n          },\n          {\n            label: '中意财产-sanjii',\n            value: 12,\n            children: [\n              {\n                label: '中意财产-erji',\n                value: 13,\n              },\n              {\n                label: '中意财产-sanjii',\n                value: 14,\n              },\n            ],\n          },\n        ],\n      },\n      {\n        label: '中意财产-sanjii',\n        value: 'ccA-B',\n        children: [\n          {\n            label: '中意财产-erji',\n            value: 'ddA-A',\n          },\n          {\n            label: '中意财产-sanjii',\n            value: 'ddA-B',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    label: '选项四',\n    value: 'D',\n  },\n  {\n    label: '中意财产保险有限公司成都分公司市场部',\n    value: 'E',\n  },\n];\n\nconst InitDemo = () => {\n  const [{ dataTree }, setState] = useSetState({\n    checkedKeys: [],\n    dataTree: dataSourceTree,\n  });\n\n  const addLeaf = (key: any, e?: any) => {\n    e.stopPropagation();\n    const arr = JSON.parse(JSON.stringify(dataTree));\n    let flag;\n    let index;\n    const loop = (items: any) => {\n      if (!items) {\n        return items;\n      }\n      items.map((item: any, i: number) => {\n        if (item?.value === key) {\n          index = i;\n          flag = items;\n          index = i + 1;\n        }\n        loop(item?.children);\n        return item;\n      });\n    };\n    loop(arr);\n    if (flag) {\n      flag.splice(index, 0, { label: `新增${index}`, value: Math.random() });\n    }\n    setState({\n      dataTree: arr,\n    });\n  };\n  const onSelectCheck = (val?: any, info?: any) => {\n    console.info('复选点击事件 ', val, info);\n    return Promise.resolve();\n  };\n\n  return (\n    <>\n      <p style={{ margin: '16px 0' }}>\n        配置多个操作按钮组件内部会将其收入一个icon里(必须手动传入dataSource )\n      </p>\n      <ProTree\n        placeholder=\"请输入搜索字符\"\n        expandedKeys={['ccA-A']}\n        value=\"ccA-A\"\n        dataSource={dataTree}\n        isRadioSelect={true}\n        showLine={true}\n        checkable={false}\n        showIcon={true}\n        // value={checkedKeys}\n        onSelect={onSelectCheck}\n        menu={(key: any) => [\n          <div key=\"add\" className=\"icon-item icon-add\" onClick={(e) => addLeaf(key, e)}>\n            新增\n          </div>,\n          <div key=\"delete\" className=\"icon-item\" style={{ color: '#FF005F' }}>\n            删除\n          </div>,\n        ]}\n      />\n    </>\n  );\n};\nexport default InitDemo;\n"
+      "source": "import { SmileOutlined } from '@ant-design/icons';\nimport { useSetState } from 'ahooks';\nimport { ProTree } from '@zat-design/sisyphus-react';\n\nconst dataSourceTree = [\n  {\n    label: '中意财产保险有限公司黑龙江分公司',\n    value: 1,\n    checkable: false,\n    disableCheckbox: true,\n    disabled: true,\n  },\n  {\n    label: '中意财产保险有限公司黑龙江分公司市场部',\n    value: 2,\n    icon: <SmileOutlined />,\n  },\n  {\n    label: '中意财产保险有限公司黑龙江分公司市场营销部黑分专代海洋望奎吉龙',\n    value: 'C',\n    // isLeaf: true,\n    // selectable: true,\n    title: '自定义title',\n    key: 'selft key',\n    icon: <SmileOutlined />,\n    children: [\n      {\n        label: '中意财产-erji',\n        value: 'ccA-A',\n        children: [\n          {\n            label: '中意财产-erji',\n            value: 11,\n          },\n          {\n            label: '中意财产-sanjii',\n            value: 12,\n            children: [\n              {\n                label: '中意财产-erji',\n                value: 13,\n              },\n              {\n                label: '中意财产-sanjii',\n                value: 14,\n              },\n            ],\n          },\n        ],\n      },\n      {\n        label: '中意财产-sanjii',\n        value: 'ccA-B',\n        children: [\n          {\n            label: '中意财产-erji',\n            value: 'ddA-A',\n          },\n          {\n            label: '中意财产-sanjii',\n            value: 'ddA-B',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    label: '选项四',\n    value: 'D',\n  },\n  {\n    label: '中意财产保险有限公司成都分公司市场部',\n    value: 'E',\n  },\n];\n\nconst InitDemo = () => {\n  const [{ dataTree }, setState] = useSetState({\n    checkedKeys: [],\n    dataTree: dataSourceTree,\n  });\n\n  const addLeaf = (key: any, e?: any) => {\n    e.stopPropagation();\n    const arr = JSON.parse(JSON.stringify(dataTree));\n    let flag;\n    let index;\n    const loop = (items: any) => {\n      if (!items) {\n        return items;\n      }\n      items.map((item: any, i: number) => {\n        if (item?.value === key) {\n          index = i;\n          flag = items;\n          index = i + 1;\n        }\n        loop(item?.children);\n        return item;\n      });\n    };\n    loop(arr);\n    if (flag) {\n      flag.splice(index, 0, { label: `新增${index}`, value: Math.random() });\n    }\n    setState({\n      dataTree: arr,\n    });\n  };\n  const deleteLeaf = (key: any, e?: any) => {\n    e.stopPropagation();\n    const remove = (items: any[]): any[] =>\n      items\n        .filter((item) => item?.value !== key)\n        .map((item) => (item?.children ? { ...item, children: remove(item.children) } : item));\n    setState({\n      dataTree: remove(dataTree),\n    });\n  };\n  const onSelectCheck = (val?: any, info?: any) => {\n    console.info('复选点击事件 ', val, info);\n    return Promise.resolve();\n  };\n\n  return (\n    <>\n      <p style={{ margin: '16px 0' }}>\n        配置多个操作按钮组件内部会将其收入一个icon里(必须手动传入dataSource )\n      </p>\n      <ProTree\n        placeholder=\"请输入搜索字符\"\n        expandedKeys={['ccA-A']}\n        value=\"ccA-A\"\n        dataSource={dataTree}\n        isRadioSelect={true}\n        showLine={true}\n        checkable={false}\n        showIcon={true}\n        // value={checkedKeys}\n        onSelect={onSelectCheck}\n        menu={(key: any) => [\n          <div key=\"add\" className=\"icon-item icon-add\" onClick={(e) => addLeaf(key, e)}>\n            新增\n          </div>,\n          <div\n            key=\"delete\"\n            className=\"icon-item\"\n            style={{ color: '#FF005F' }}\n            onClick={(e) => deleteLeaf(key, e)}\n          >\n            删除\n          </div>,\n        ]}\n      />\n    </>\n  );\n};\nexport default InitDemo;\n"
     },
     {
       "component": "ProTree",

package/meta/props.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.2",
+  "version": "4.5.5-beta.1",
   "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",

package/package.json

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