ant design pro V6中添加ProTable作为输入框和分页列表页面

<div className="my-chart-page" style={{ padding: 24, background: '#f5f5f5' }}>
    <div>
        {/* 
          当用户点击搜索按钮触发 一定要把新设置的搜索条件初始化，要把页面切回到第一页;
          如果用户在第二页,输入了一个新的搜索关键词,应该重新展示第一页,而不是还在搜第二页的内容
        */}
        <ProTable
          columns={columns}
          loading={loading}
          request={async (params, sort, filter) => {
            // 搜索条件已经在 params 中
            console.log('搜索参数:', params);

            // const res = await getMyChartsVoUsingPost({
            //   current: params.current,
            //   size: params.pageSize,
            // });

            // return {
            //   data: res?.data?.records || [],
            //   success: true,
            //   total: res?.data?.total || 0,
            // };
            return {}
          }}
          search={{
            labelWidth: 'auto',
            defaultCollapsed: false,
            // 使用 optionRender 自定义按钮文字
            optionRender: (_, __, form) => [
              <Button type="primary" key="submit" onClick={() => fetchData()}>
                查询
              </Button>,
            ],
          }}

        />

      </div>
          <style>{`
    /* 桌面端样式（宽度 > 768px） */
    @media (min-width: 769px) {
      .chart-card-desktop {
        display: flex !important;
      }
      .chart-card-mobile {
        display: none !important;
      }
    }
    
    /* 手机端样式（宽度 ≤ 768px） */
    @media (max-width: 768px) {
      .chart-card-desktop {
        display: none !important;
      }
      .chart-card-mobile {
        display: block !important;
      }
    }
  `}</style>

</div>

效果: