表单管理页面重置功能修复；搜索和分页样式布局调整

src/components/FormManagement.tsx

@@ -35,11 +35,12 @@ export default function FormManagement() {
   });
 
   /** 查询列表 */
-  const getList = async () => {
+  const getList = async (params?: FormApi.FormPageParams) => {
+    const searchParams = params || queryParams;
     setLoading(true);
     try {
-      console.log('FormManagement: 开始获取表单列表', queryParams);
-      const data = await FormApi.getFormPage(queryParams);
+      console.log('FormManagement: 开始获取表单列表', searchParams);
+      const data = await FormApi.getFormPage(searchParams);
       console.log('FormManagement: 获取到数据', data);
       setList(data.list || []);
       setTotal(data.total || 0);
@@ -61,17 +62,22 @@ export default function FormManagement() {
 
   /** 搜索按钮操作 */
   const handleQuery = () => {
-    setQueryParams({ ...queryParams, pageNo: 1 });
-    getList();
+    const newParams = { ...queryParams, pageNo: 1 };
+    setQueryParams(newParams);
+    // 立即触发数据加载
+    getList(newParams);
   };
 
   /** 重置按钮操作 */
   const resetQuery = () => {
-    setQueryParams({
+    const resetParams = {
       pageNo: 1,
       pageSize: 10,
       name: undefined
-    });
+    };
+    setQueryParams(resetParams);
+    // 立即触发数据加载
+    getList(resetParams);
   };
 
   /** 添加/修改操作 */
@@ -205,70 +211,99 @@ export default function FormManagement() {
     },
   ];
 
+  // 计算分页数据
+  const totalPages = Math.ceil(total / queryParams.pageSize) || 1;
+
   return (
     <div className="space-y-6">
-      {/* 搜索工作栏 */}
-      <div className="bg-white rounded-2xl border border-gray-200/50 shadow-sm p-4 lg:p-5">
-        <div className="flex items-center justify-between gap-3 lg:gap-4 flex-wrap">
-          <div className="flex items-center gap-2 lg:gap-3 flex-wrap flex-1 min-w-0">
-            <div className="flex items-center gap-2 lg:gap-3 flex-shrink-0">
-              <label className="text-sm font-medium text-gray-700 whitespace-nowrap">表单名：</label>
-              <Input
-                value={queryParams.name || ''}
-                onChange={(e) => setQueryParams({ ...queryParams, name: e.target.value || undefined })}
-                onPressEnter={handleQuery}
-                placeholder="请输入表单名"
-                className="min-w-[200px] max-w-[300px]"
-                allowClear
-              />
+      {/* 搜索栏和表格容器 */}
+      <div className="bg-white rounded-2xl border border-gray-200/50 shadow-sm overflow-hidden">
+        {/* 搜索栏 */}
+        <div className="p-4 lg:p-5 border-b border-gray-200/50">
+          <div className="flex items-center justify-between gap-3 lg:gap-4 flex-wrap min-w-0">
+            {/* 搜索输入框 */}
+            <div className="flex items-center gap-2 lg:gap-3 flex-wrap flex-1 min-w-0">
+              <div className="flex items-center gap-2 lg:gap-3 flex-shrink-0">
+                <label className="text-sm font-medium text-gray-700 whitespace-nowrap">表单名：</label>
+                <Input
+                  value={queryParams.name || ''}
+                  onChange={(e) => setQueryParams({ ...queryParams, name: e.target.value || undefined })}
+                  onPressEnter={handleQuery}
+                  placeholder="请输入表单名"
+                  className="min-w-[150px] max-w-[200px]"
+                  allowClear
+                />
+              </div>
             </div>
+
+            {/* 操作按钮组 */}
+            <Space className="flex-shrink-0">
+              <Button
+                type="primary"
+                icon={<Search className="w-4 h-4" />}
+                onClick={handleQuery}
+              >
+                搜索
+              </Button>
+              
+              <Button
+                icon={<RefreshCw className="w-4 h-4" />}
+                onClick={resetQuery}
+              >
+                重置
+              </Button>
+              
+              <Button
+                type="primary"
+                icon={<Plus className="w-4 h-4" />}
+                onClick={() => openForm('create')}
+              >
+                新增
+              </Button>
+            </Space>
           </div>
+        </div>
 
-          <Space className="flex-shrink-0">
-            <Button
-              type="primary"
-              icon={<Search className="w-4 h-4" />}
-              onClick={handleQuery}
-            >
-              搜索
-            </Button>
-            <Button
-              icon={<RefreshCw className="w-4 h-4" />}
-              onClick={resetQuery}
-            >
-              重置
-            </Button>
-            <Button
-              type="primary"
-              icon={<Plus className="w-4 h-4" />}
-              onClick={() => openForm('create')}
-            >
-              新增
-            </Button>
-          </Space>
+        {/* 表格容器 */}
+        <div className="overflow-hidden min-w-0">
+          <AntdTable
+            loading={loading}
+            columns={columns}
+            dataSource={list}
+            rowKey="id"
+            pagination={false}
+            scroll={{ x: 'max-content' }}
+          />
         </div>
       </div>
 
-      {/* 列表 */}
-      <div className="bg-white rounded-2xl border border-gray-200/50 shadow-sm overflow-hidden">
-        <AntdTable
-          loading={loading}
-          columns={columns}
-          dataSource={list}
-          rowKey="id"
-          pagination={{
-            current: queryParams.pageNo,
-            pageSize: queryParams.pageSize,
-            total: total,
-            showSizeChanger: true,
-            showTotal: (total) => `共 ${total} 条记录`,
-            onChange: (page, pageSize) => {
-              setQueryParams({ ...queryParams, pageNo: page, pageSize: pageSize || 10 });
-            },
-          }}
-          scroll={{ x: 'max-content' }}
-        />
-      </div>
+      {/* 分页 */}
+      {total > 0 && (
+        <div className="bg-white rounded-lg border border-gray-200 px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="text-sm text-gray-600">
+              共 <span className="text-blue-600 font-medium">{total}</span> 条记录
+            </div>
+            <div className="flex gap-2">
+              <Button
+                onClick={() => setQueryParams({ ...queryParams, pageNo: queryParams.pageNo - 1 })}
+                disabled={queryParams.pageNo <= 1}
+              >
+                上一页
+              </Button>
+              <span className="px-4 py-2 text-sm text-gray-600 flex items-center">
+                {queryParams.pageNo} / {totalPages}
+              </span>
+              <Button
+                onClick={() => setQueryParams({ ...queryParams, pageNo: queryParams.pageNo + 1 })}
+                disabled={queryParams.pageNo >= totalPages}
+              >
+                下一页
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
 
       {/* 表单详情的弹窗 */}
       <Modal