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

package/meta/components.json

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

package/meta/examples.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.4",
+  "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",
@@ -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",
@@ -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",

package/meta/props.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.4",
+  "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.4",
+  "version": "0.1.5",
   "description": "MCP server for @zat-design/sisyphus-react — 向 AI 编码助手暴露组件库的清单/API/示例查询能力",
   "type": "module",
   "bin": {