diff --git a/crop-x/next-env.d.ts b/crop-x/next-env.d.ts
index c4b7818..9edff1c 100644
--- a/crop-x/next-env.d.ts
+++ b/crop-x/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/crop-x/src/app/(app)/central-config/tenant/enterprise-management/page.tsx b/crop-x/src/app/(app)/central-config/tenant/enterprise-management/page.tsx
index f917b41..96abca3 100644
--- a/crop-x/src/app/(app)/central-config/tenant/enterprise-management/page.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant/enterprise-management/page.tsx
@@ -6,137 +6,334 @@
  */
 'use client';
 
-import { useReducer, useEffect, useMemo } from 'react';
-import { Card } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
+import { useEffect, useMemo, useState, useCallback } from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Building2, Eye, Power, PowerOff, Search, FileText, CreditCard, User, RefreshCw, AlertCircle, ChevronLeft, ChevronRight, Plus } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Building2, Eye, Power, PowerOff, Plus, FileText, CreditCard, User, Search } from 'lucide-react';
 import { toast } from 'sonner';
 
-import { enterpriseReducer, initialState, EnterpriseState, EnterpriseAction } from './components/enterpriseReducer';
+import SearchFormPagination, {
+  type SearchFieldConfig,
+  type TableColumnConfig
+} from '@/components/common/searchFormPagination';
+
 import { fetchTenants, transformTenantData, enableTenant, disableTenant, createEnterprise, TenantsQueryParams, Enterprise } from './components/enterpriseApi';
 import { CreateEnterpriseDialog } from './components/CreateEnterpriseDialog';
 
 // Utility functions
 const getStatusBadge = (status: 'active' | 'inactive') => {
   if (status === 'active') {
-    return <Badge className="bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800 font-light">启用</Badge>;
+    return (
+      <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400 border border-green-200 dark:border-green-800">
+        启用
+      </div>
+    );
   }
-  return <Badge className="bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-800 font-light">禁用</Badge>;
+  return (
+    <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-800">
+      禁用
+    </div>
+  );
 };
 
 const getAuditStatusBadge = (auditStatus: Enterprise['auditStatus']) => {
   switch (auditStatus) {
     case 'draft':
-      return <Badge className="bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-800 font-light">草稿</Badge>;
+      return (
+        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-800">
+          草稿
+        </div>
+      );
     case 'pending':
-      return <Badge className="bg-yellow-50 dark:bg-yellow-950 text-yellow-600 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800 font-light">待审核</Badge>;
+      return (
+        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-yellow-50 dark:bg-yellow-950 text-yellow-600 dark:text-yellow-400 border border-yellow-200 dark:border-yellow-800">
+          待审核
+        </div>
+      );
     case 'approved':
-      return <Badge className="bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800 font-light">审核通过</Badge>;
+      return (
+        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400 border border-green-200 dark:border-green-800">
+          审核通过
+        </div>
+      );
     case 'rejected':
-      return <Badge className="bg-red-50 dark:bg-red-950 text-red-600 dark:text-red-400 border-red-200 dark:border-red-800 font-light">已拒绝</Badge>;
+      return (
+        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-red-50 dark:bg-red-950 text-red-600 dark:text-red-400 border border-red-200 dark:border-red-800">
+          已拒绝
+        </div>
+      );
     default:
-      return <Badge className="bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-800 font-light">草稿</Badge>;
+      return (
+        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-800">
+          草稿
+        </div>
+      );
   }
 };
 
 export default function EnterpriseManagement() {
-  const [state, dispatch] = useReducer(enterpriseReducer, initialState);
+  // 对话框状态管理
+  const [dialogs, setDialogs] = useState({
+    showViewDialog: false,
+    showAddDialog: false,
+    showStatusDialog: false,
+    selectedEnterprise: null as Enterprise | null,
+    statusAction: 'enable' as 'enable' | 'disable'
+  });
 
-  // 加载企业数据
-  const loadEnterprises = async (resetPage = false) => {
-    try {
-      dispatch({ type: 'SET_LOADING', payload: true });
-
-      const params: TenantsQueryParams = {
-        search: state.filters.search || undefined,
-        audit_status: state.filters.audit_status || undefined,
-        page: resetPage ? 1 : state.pagination.page,
-        size: state.pagination.size,
-        order_by: state.sortBy,
-        sort_order: state.sortOrder,
-      };
-
-      const response = await fetchTenants(params);
-      const transformedData = response.data.map(transformTenantData);
-
-      console.log('API Response:', response);
-      console.log('Transformed Data:', transformedData);
-
-      dispatch({
-        type: 'SET_ENTERPRISES',
-        payload: {
-          data: transformedData,
-          pagination: {
-            page: response.page,
-            size: response.size,
-            total: response.total,
-            totalPages: response.total_pages,
-            hasNext: response.has_next,
-            hasPrev: response.has_prev,
-          }
-        }
-      });
-    } catch (error) {
-      console.error('Failed to load enterprises:', error);
-      const errorMessage = error instanceof Error ? error.message : '加载企业数据失败';
-      dispatch({ type: 'SET_ERROR', payload: errorMessage });
-      toast.error(errorMessage);
+  const dispatch = (action: any) => {
+    switch (action.type) {
+      case 'SET_SELECTED_ENTERPRISE':
+        setDialogs(prev => ({ ...prev, selectedEnterprise: action.payload }));
+        break;
+      case 'TOGGLE_VIEW_DIALOG':
+        setDialogs(prev => ({ ...prev, showViewDialog: action.payload }));
+        break;
+      case 'TOGGLE_ADD_DIALOG':
+        setDialogs(prev => ({ ...prev, showAddDialog: action.payload }));
+        break;
+      case 'TOGGLE_STATUS_DIALOG':
+        setDialogs(prev => ({ ...prev, showStatusDialog: action.payload }));
+        break;
+      case 'SET_STATUS_ACTION':
+        setDialogs(prev => ({ ...prev, statusAction: action.payload }));
+        break;
+      case 'RESET_FORM_DATA':
+        setDialogs(prev => ({ ...prev, selectedEnterprise: null }));
+        break;
     }
   };
 
-  // 初始加载
-  useEffect(() => {
-    loadEnterprises(true);
-  }, [state.filters.search, state.filters.audit_status, state.sortBy, state.sortOrder]);
+  // 搜索字段配置
+  const searchFields: SearchFieldConfig[] = [
+    {
+      key: 'search',
+      label: '搜索',
+      type: 'text',
+      placeholder: '搜索企业名称、编码...',
+    },
+    {
+      key: 'audit_status',
+      label: '审核状态',
+      type: 'select',
+      placeholder: '审核状态',
+      defaultValue: 'all',
+      options: [
+        { value: 'all', label: '全部状态' },
+        { value: '草稿', label: '草稿' },
+        { value: '待审核', label: '待审核' },
+        { value: '已通过', label: '审核通过' },
+        { value: '已拒绝', label: '已拒绝' },
+      ],
+    },
+  ];
 
-  // 分页加载
-  useEffect(() => {
-    if (state.pagination.page > 1) {
-      loadEnterprises(false);
-    }
-  }, [state.pagination.page]);
-
-  // 计算统计数据
-  const stats = useMemo(() => ({
-    total: state.enterprises.length,
-    active: state.enterprises.filter(e => e.status === 'active').length,
-    inactive: state.enterprises.filter(e => e.status === 'inactive').length,
-  }), [state.enterprises]);
-
-  // 事件处理器
-  const handleSearch = (value: string) => {
-    dispatch({ type: 'SET_FILTERS', payload: { search: value } });
-  };
-
-  const handleAuditStatusFilter = (value: string) => {
-    dispatch({ type: 'SET_FILTERS', payload: { audit_status: value === 'all' ? '' : value } });
-  };
-
-  const handleSort = (sortBy?: string) => {
-    const newSortOrder = state.sortBy === sortBy && state.sortOrder === 'desc' ? 'asc' : 'desc';
-    dispatch({ type: 'SET_SORT', payload: { sortBy, sortOrder: newSortOrder } });
-  };
-
-  const handlePageChange = (page: number) => {
-    // 边界检查，确保页码在有效范围内
-    if (page < 1) {
-      page = 1;
-    } else if (page > state.pagination.totalPages && state.pagination.totalPages > 0) {
-      page = state.pagination.totalPages;
-    }
-    dispatch({ type: 'SET_PAGINATION', payload: { page } });
-  };
+  // 表格列配置
+  const columns: TableColumnConfig[] = [
+    {
+      key: 'code',
+      label: '企业编码',
+      width: '120px',
+    },
+    {
+      key: 'name',
+      label: '企业名称',
+      render: (value: string) => (
+        <div className="flex items-center gap-2">
+          <Building2 className="w-4 h-4 text-blue-500" />
+          <span className="font-medium">{value}</span>
+        </div>
+      ),
+    },
+    {
+      key: 'type',
+      label: '企业类型',
+      render: (value: string) => (
+        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium border border-gray-200 dark:border-gray-800">
+          {value}
+        </div>
+      ),
+    },
+    {
+      key: 'registrant',
+      label: '登记人',
+      render: (value?: string) => value || '-',
+    },
+    {
+      key: 'contactPhone',
+      label: '联系电话',
+      render: (value?: string) => value || '-',
+    },
+    {
+      key: 'createdAt',
+      label: '创建时间',
+      width: '160px',
+    },
+    {
+      key: 'auditStatus',
+      label: '审核状态',
+      render: (value: Enterprise['auditStatus']) => getAuditStatusBadge(value),
+    },
+    {
+      key: 'status',
+      label: '状态',
+      render: (value: Enterprise['status']) => getStatusBadge(value),
+    },
+    {
+      key: 'actions',
+      label: '操作',
+      render: (_: any, row: Enterprise) => (
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => handleView(row)}
+          >
+            <Eye className="w-3 h-3 mr-1" />
+            查看
+          </Button>
+          {row.status === 'active' ? (
+            <Button
+              size="sm"
+              variant="outline"
+              className="text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600"
+              onClick={() => handleStatusChange(row, 'disable')}
+            >
+              <PowerOff className="w-3 h-3 mr-1" />
+              禁用
+            </Button>
+          ) : (
+            <Button
+              size="sm"
+              variant="outline"
+              className="text-green-600 dark:text-green-400 border-green-300 dark:border-green-600"
+              onClick={() => handleStatusChange(row, 'enable')}
+            >
+              <Power className="w-3 h-3 mr-1" />
+              启用
+            </Button>
+          )}
+        </div>
+      ),
+    },
+  ];
 
   
+  // 简化的状态管理 - 只需要存储数据和加载状态
+  const [enterprises, setEnterprises] = useState<Enterprise[]>([]);
+  const [pagination, setPagination] = useState({
+    page: 1,
+    size: 10,
+    total: 0,
+    totalPages: 0,
+    hasNext: false,
+    hasPrev: false,
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchFilters, setSearchFilters] = useState<Record<string, string>>({
+    search: '',
+    audit_status: 'all'
+  });
+
+  // 数据加载函数 - 移除不必要的依赖避免重复调用
+  const loadEnterprises = useCallback(async (params?: {
+    filters?: Record<string, string>;
+    pagination?: { page: number; size: number };
+    sort?: { sortBy?: string; sortOrder?: 'asc' | 'desc' };
+  }) => {
+    try {
+      console.log('调用了loadEnterprises')
+      setLoading(true);
+      setError(null);
+
+      const finalParams: TenantsQueryParams = {
+        search: (params?.filters?.search ?? searchFilters.search) || undefined,
+        audit_status: params?.filters?.audit_status ?? searchFilters.audit_status,
+        page: params?.pagination?.page || pagination.page,
+        size: params?.pagination?.size || pagination.size,
+        order_by: params?.sort?.sortBy,
+        sort_order: params?.sort?.sortOrder,
+      };
+
+      // 处理audit_status，如果为'all'则不传该参数
+      if (finalParams.audit_status === 'all') {
+        finalParams.audit_status = undefined;
+      }
+      const response = await fetchTenants(finalParams);
+      const transformedData = response.data.map(transformTenantData);
+
+      setEnterprises(transformedData);
+      setPagination({
+        page: response.page,
+        size: response.size,
+        total: response.total,
+        totalPages: response.total_pages,
+        hasNext: response.has_next,
+        hasPrev: response.has_prev,
+      });
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : '加载企业数据失败';
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  }, []); // 移除所有依赖，使用参数传递状态变化
+
+  // 事件处理器
+  const handleSearch = useCallback((filters: Record<string, string>) => {
+    setSearchFilters(filters);
+    // 搜索时重置到第一页
+    loadEnterprises({
+      filters,
+      pagination: { page: 1, size: pagination.size }
+    });
+  }, [loadEnterprises, pagination.size]);
+
+  const handleSort = useCallback((sortBy: string, sortOrder: 'asc' | 'desc') => {
+    // 排序时重置到第一页
+    loadEnterprises({
+      pagination: { page: 1, size: pagination.size },
+      sort: { sortBy, sortOrder }
+    });
+  }, [loadEnterprises, pagination.size]);
+
+  const handlePageChange = useCallback((page: number) => {
+    setPagination(prev => ({ ...prev, page }));
+    loadEnterprises({
+      pagination: { page, size: pagination.size }
+    });
+  }, [loadEnterprises, pagination.size]);
+
+  const handleSizeChange = useCallback((size: number) => {
+    setPagination(prev => ({ ...prev, size, page: 1 }));
+    loadEnterprises({
+      pagination: { page: 1, size }
+    });
+  }, [loadEnterprises]);
+
+  // 初始化数据加载
+  // useEffect(() => {
+  //   loadEnterprises();
+  // }, []);
+
+  // 计算统计数据
+  const stats = useMemo(() => {
+    if (enterprises.length === 0) {
+      return { total: pagination.total, active: 0, inactive: 0 };
+    }
+    const active = enterprises.filter(e => e.status === 'active').length;
+    const inactive = enterprises.filter(e => e.status === 'inactive').length;
+    return { total: pagination.total, active, inactive };
+  }, [enterprises, pagination.total]);
+
+  // 业务事件处理器
   const handleView = (enterprise: Enterprise) => {
     dispatch({ type: 'SET_SELECTED_ENTERPRISE', payload: enterprise });
     dispatch({ type: 'TOGGLE_VIEW_DIALOG', payload: true });
@@ -148,26 +345,16 @@ export default function EnterpriseManagement() {
     dispatch({ type: 'TOGGLE_STATUS_DIALOG', payload: true });
   };
 
-  const handleCreateNew = () => {
-    dispatch({ type: 'RESET_FORM_DATA' });
-    dispatch({ type: 'TOGGLE_ADD_DIALOG', payload: true });
-  };
-
-  const handleCreateSuccess = () => {
-    // 创建成功后刷新数据
-    loadEnterprises(true);
-  };
-
   const confirmStatusChange = async () => {
-    if (!state.selectedEnterprise) return;
+    if (!dialogs.selectedEnterprise) return;
 
     try {
-      dispatch({ type: 'SET_LOADING', payload: true });
+      setLoading(true);
 
-      const tenantId = state.selectedEnterprise.id;
+      const tenantId = dialogs.selectedEnterprise.id;
       let updatedTenant;
 
-      if (state.statusAction === 'enable') {
+      if (dialogs.statusAction === 'enable') {
         updatedTenant = await enableTenant(tenantId);
         toast.success('企业已启用');
       } else {
@@ -175,37 +362,49 @@ export default function EnterpriseManagement() {
         toast.success('企业已禁用');
       }
 
-      // 验证返回的数据是否正确更新了状态
-      console.log('API返回的更新数据:', updatedTenant);
-
-      // 更新本地状态
-      const updatedEnterprise = transformTenantData(updatedTenant);
-      dispatch({
-        type: 'SET_ENTERPRISES',
-        payload: {
-          data: state.enterprises.map(ent =>
-            ent.id === tenantId ? updatedEnterprise : ent
-          ),
-          pagination: state.pagination
-        }
-      });
-
+      // 状态更新成功后关闭对话框
       dispatch({ type: 'TOGGLE_STATUS_DIALOG', payload: false });
 
-      // 不需要立即刷新，因为本地状态已经更新
-      // 如果用户需要看到最新数据，可以手动点击刷新按钮
+      // 重新加载数据来反映状态变化
+      const reloadParams: any = {
+        filters: searchFilters,
+        pagination: {
+          page: pagination.page,
+          size: pagination.size
+        }
+      };
+
+      loadEnterprises(reloadParams);
     } catch (error) {
       console.error('Status change failed:', error);
       const errorMessage = error instanceof Error ? error.message : '状态更新失败';
       toast.error(errorMessage);
     } finally {
-      dispatch({ type: 'SET_LOADING', payload: false });
+      setLoading(false);
     }
   };
 
+  const handleCreateNew = () => {
+    dispatch({ type: 'RESET_FORM_DATA' });
+    dispatch({ type: 'TOGGLE_ADD_DIALOG', payload: true });
+  };
+
+  const handleCreateSuccess = () => {
+    // 创建成功后需要手动刷新页面数据
+    window.location.reload();
+  };
+
+  // 操作按钮配置
+  const actionButtons = (
+    <Button onClick={handleCreateNew} disabled={loading}>
+      <Plus className="w-4 h-4 mr-2" />
+      新建企业
+    </Button>
+  );
+
   return (
     <div className="space-y-6">
-      {/* Page Header */}
+      {/* Page Header - 自定义页面头部 */}
       <Card className="p-6 bg-gradient-to-r from-blue-50 dark:from-blue-950 to-indigo-50 dark:to-indigo-950 border-blue-200 dark:border-blue-800">
         <div className="flex items-start justify-between">
           <div className="flex items-start gap-3">
@@ -216,44 +415,38 @@ export default function EnterpriseManagement() {
                 管理平台所有企业信息，支持查询、查看详情、启用/禁用企业
               </p>
               <div className="flex flex-wrap gap-2">
-                <Badge variant="outline" className="bg-white dark:bg-gray-800 font-light">
+                <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800">
                   <Search className="w-3 h-3 mr-1" />
                   智能查询
-                </Badge>
-                <Badge variant="outline" className="bg-white dark:bg-gray-800 font-light">
+                </div>
+                <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800">
                   <Power className="w-3 h-3 mr-1" />
                   状态管理
-                </Badge>
-                <Badge variant="outline" className="bg-white dark:bg-gray-800 font-light">
+                </div>
+                <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800">
                   <Eye className="w-3 h-3 mr-1" />
                   详情查看
-                </Badge>
+                </div>
               </div>
             </div>
           </div>
-          <div className="flex items-center gap-2">
-            <Button onClick={handleCreateNew} disabled={state.loading}>
-              <Plus className="w-4 h-4 mr-2" />
-              新建企业
-            </Button>
-          </div>
         </div>
       </Card>
 
-      {/* Statistics Cards */}
+      {/* Statistics Cards - 保持原有统计功能 */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <Card className="p-6 bg-card hover:bg-muted transition-colors">
+        <div className="p-6 bg-card hover:bg-muted transition-colors border rounded-lg">
           <div className="flex items-center justify-between mb-2">
             <div className="text-sm text-muted-foreground">企业总数</div>
             <Building2 className="w-5 h-5 text-blue-500" />
           </div>
-          <div className="text-3xl font-bold mb-1">{state.pagination.total}</div>
+          <div className="text-3xl font-bold mb-1">{pagination.total}</div>
           <div className="text-xs text-muted-foreground">
             全部企业数量
           </div>
-        </Card>
+        </div>
 
-        <Card className="p-6 bg-card hover:bg-muted transition-colors">
+        <div className="p-6 bg-card hover:bg-muted transition-colors border rounded-lg">
           <div className="flex items-center justify-between mb-2">
             <div className="text-sm text-muted-foreground">启用企业</div>
             <Power className="w-5 h-5 text-green-500" />
@@ -262,9 +455,9 @@ export default function EnterpriseManagement() {
           <div className="text-xs text-green-600 dark:text-green-400">
             正常运营中
           </div>
-        </Card>
+        </div>
 
-        <Card className="p-6 bg-card hover:bg-muted transition-colors">
+        <div className="p-6 bg-card hover:bg-muted transition-colors border rounded-lg">
           <div className="flex items-center justify-between mb-2">
             <div className="text-sm text-muted-foreground">禁用企业</div>
             <PowerOff className="w-5 h-5 text-gray-500" />
@@ -273,208 +466,37 @@ export default function EnterpriseManagement() {
           <div className="text-xs text-muted-foreground">
             已暂停使用
           </div>
-        </Card>
+        </div>
       </div>
 
-      {/* Enterprise List */}
-      <Card className="p-6 bg-card">
-        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
-          <h3>企业列表</h3>
-          <div className="flex flex-col sm:flex-row gap-2">
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-              <Input
-                placeholder="搜索企业名称、编码..."
-                value={state.filters.search}
-                onChange={(e) => handleSearch(e.target.value)}
-                className="pl-10 w-64"
-              />
-            </div>
-            <Select value={state.filters.audit_status || 'all'} onValueChange={handleAuditStatusFilter}>
-              <SelectTrigger className="w-40">
-                <SelectValue placeholder="审核状态" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">全部状态</SelectItem>
-                <SelectItem value="草稿">草稿</SelectItem>
-                <SelectItem value="待审核">待审核</SelectItem>
-                <SelectItem value="已通过">审核通过</SelectItem>
-                <SelectItem value="已拒绝">已拒绝</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-
-        {/* Error Display */}
-        {state.error && (
-          <div className="mb-4 p-4 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 rounded-lg">
-            <div className="flex items-center gap-2 text-red-600 dark:text-red-400">
-              <AlertCircle className="w-4 h-4" />
-              <span>{state.error}</span>
-            </div>
-          </div>
-        )}
-
-        {/* Loading State */}
-        {state.loading && (
-          <div className="text-center py-12 text-muted-foreground">
-            <RefreshCw className="w-8 h-8 mx-auto mb-2 animate-spin" />
-            <p>加载中...</p>
-          </div>
-        )}
-
-        {/* Data Table */}
-        {!state.loading && !state.error && (
-          <>
-            <div className="border rounded-lg overflow-hidden">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead
-                      className="cursor-pointer hover:bg-muted"
-                      onClick={() => handleSort('tenant_code')}
-                    >
-                      企业编码
-                      {state.sortBy === 'tenant_code' && (
-                        <span className="ml-1">{state.sortOrder === 'asc' ? '↑' : '↓'}</span>
-                      )}
-                    </TableHead>
-                    <TableHead
-                      className="cursor-pointer hover:bg-muted"
-                      onClick={() => handleSort('company_name')}
-                    >
-                      企业名称
-                      {state.sortBy === 'company_name' && (
-                        <span className="ml-1">{state.sortOrder === 'asc' ? '↑' : '↓'}</span>
-                      )}
-                    </TableHead>
-                    <TableHead>企业类型</TableHead>
-                    <TableHead>登记人</TableHead>
-                    <TableHead>联系电话</TableHead>
-                    <TableHead
-                      className="cursor-pointer hover:bg-muted"
-                      onClick={() => handleSort('created_at')}
-                    >
-                      创建时间
-                      {state.sortBy === 'created_at' && (
-                        <span className="ml-1">{state.sortOrder === 'asc' ? '↑' : '↓'}</span>
-                      )}
-                    </TableHead>
-                    <TableHead>审核状态</TableHead>
-                    <TableHead>状态</TableHead>
-                    <TableHead>操作</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {state.enterprises.map((enterprise) => (
-                    <TableRow key={enterprise.id}>
-                      <TableCell className="font-medium">{enterprise.code}</TableCell>
-                      <TableCell>
-                        <div className="flex items-center gap-2">
-                          <Building2 className="w-4 h-4 text-blue-500" />
-                          <span className="font-medium">{enterprise.name}</span>
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <Badge variant="outline" className="font-light">{enterprise.type}</Badge>
-                      </TableCell>
-                      <TableCell>{enterprise.registrant || '-'}</TableCell>
-                      <TableCell>{enterprise.contactPhone || '-'}</TableCell>
-                      <TableCell className="text-sm">{enterprise.createdAt}</TableCell>
-                      <TableCell>{getAuditStatusBadge(enterprise.auditStatus)}</TableCell>
-                      <TableCell>{getStatusBadge(enterprise.status)}</TableCell>
-                      <TableCell>
-                        <div className="flex gap-2">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            onClick={() => handleView(enterprise)}
-                          >
-                            <Eye className="w-3 h-3 mr-1" />
-                            查看
-                          </Button>
-                          {enterprise.status === 'active' ? (
-                            <Button
-                              size="sm"
-                              variant="outline"
-                              className="text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600"
-                              onClick={() => handleStatusChange(enterprise, 'disable')}
-                            >
-                              <PowerOff className="w-3 h-3 mr-1" />
-                              禁用
-                            </Button>
-                          ) : (
-                            <Button
-                              size="sm"
-                              variant="outline"
-                              className="text-green-600 dark:text-green-400 border-green-300 dark:border-green-600"
-                              onClick={() => handleStatusChange(enterprise, 'enable')}
-                            >
-                              <Power className="w-3 h-3 mr-1" />
-                              启用
-                            </Button>
-                          )}
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-
-            {state.enterprises.length === 0 && (
-              <div className="text-center py-12 text-muted-foreground">
-                <Building2 className="w-12 h-12 mx-auto mb-4 opacity-20" />
-                <p>暂无企业数据</p>
-              </div>
-            )}
-
-            {/* Pagination */}
-            {state.pagination.totalPages > 1 && (
-              <div className="flex items-center justify-between mt-4">
-                <div className="text-sm text-muted-foreground">
-                  显示第 {state.pagination.page} 页，共 {state.pagination.totalPages} 页
-                  <span className="ml-2">总计 {state.pagination.total} 条记录</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handlePageChange(state.pagination.page - 1)}
-                    disabled={!state.pagination.hasPrev || state.loading}
-                  >
-                    <ChevronLeft className="w-4 h-4" />
-                    上一页
-                  </Button>
-                  <span className="text-sm font-medium px-2">
-                    {state.pagination.page} / {state.pagination.totalPages}
-                  </span>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handlePageChange(state.pagination.page + 1)}
-                    disabled={!state.pagination.hasNext || state.loading}
-                  >
-                    下一页
-                    <ChevronRight className="w-4 h-4" />
-                  </Button>
-                </div>
-              </div>
-            )}
-          </>
-        )}
-      </Card>
+      {/* 使用SearchFormPagination组件替换原有的企业列表 */}
+      <SearchFormPagination
+        formTitle="企业列表"
+        formRightContent={actionButtons}
+        searchFields={searchFields}
+        columns={columns}
+        data={enterprises}
+        loading={loading}
+        error={error}
+        pagination={pagination}
+        onPageChange={handlePageChange}
+        onSizeChange={handleSizeChange}
+        onSearch={handleSearch}
+        onSort={handleSort}
+        emptyIcon={<Building2 className="w-12 h-12 mx-auto mb-4 opacity-20" />}
+        emptyText="暂无企业数据"
+      />
 
       {/* View Enterprise Details Dialog */}
-      <Dialog open={state.showViewDialog} onOpenChange={(open) => dispatch({ type: 'TOGGLE_VIEW_DIALOG', payload: open })}>
+      <Dialog open={dialogs.showViewDialog} onOpenChange={(open) => dispatch({ type: 'TOGGLE_VIEW_DIALOG', payload: open })}>
         <DialogContent className="w-[80vw] max-w-6xl max-h-[90vh]">
           <DialogHeader>
             <div className="flex items-center justify-between pr-8">
               <DialogTitle>企业详情</DialogTitle>
-              {state.selectedEnterprise && (
+              {dialogs.selectedEnterprise && (
                 <div className="flex gap-2">
-                  {getAuditStatusBadge(state.selectedEnterprise.auditStatus)}
-                  {getStatusBadge(state.selectedEnterprise.status)}
+                  {getAuditStatusBadge(dialogs.selectedEnterprise.auditStatus)}
+                  {getStatusBadge(dialogs.selectedEnterprise.status)}
                 </div>
               )}
             </div>
@@ -482,7 +504,7 @@ export default function EnterpriseManagement() {
               查看企业的详细信息
             </DialogDescription>
           </DialogHeader>
-          {state.selectedEnterprise && (
+          {dialogs.selectedEnterprise && (
             <ScrollArea className="max-h-[calc(90vh-200px)]">
               <Tabs defaultValue="basic" className="space-y-4">
                 <TabsList className="grid grid-cols-4 w-full">
@@ -509,33 +531,33 @@ export default function EnterpriseManagement() {
                   <div className="grid grid-cols-2 gap-6">
                     <div>
                       <Label>企业名称</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.name}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.name}</div>
                     </div>
                     <div>
                       <Label>企业编码</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.code}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.code}</div>
                     </div>
                     <div>
                       <Label>企业类型</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.type}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.type}</div>
                     </div>
                     <div>
                       <Label>所在地区</Label>
                       <div className="field-value p-2 bg-muted rounded">
-                        {state.selectedEnterprise.province || '-'} {state.selectedEnterprise.city || ''} {state.selectedEnterprise.district || ''}
+                        {dialogs.selectedEnterprise.province || '-'} {dialogs.selectedEnterprise.city || ''} {dialogs.selectedEnterprise.district || ''}
                       </div>
                     </div>
                     <div className="col-span-2">
                       <Label>详细地址</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.address || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.address || '-'}</div>
                     </div>
                     <div>
                       <Label>登记人</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.registrant || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.registrant || '-'}</div>
                     </div>
                     <div>
                       <Label>联系电话</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.contactPhone || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.contactPhone || '-'}</div>
                     </div>
                   </div>
                 </TabsContent>
@@ -545,41 +567,41 @@ export default function EnterpriseManagement() {
                   <div className="grid grid-cols-2 gap-6">
                     <div>
                       <Label>公司规模</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.companySize || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.companySize || '-'}</div>
                     </div>
                     <div>
                       <Label>注册资本</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.registeredCapital || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.registeredCapital || '-'}</div>
                     </div>
                     <div>
                       <Label>成立时间</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.establishmentDate || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.establishmentDate || '-'}</div>
                     </div>
                     <div>
                       <Label>发票类型</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.invoiceType || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.invoiceType || '-'}</div>
                     </div>
                     <div className="col-span-2">
                       <Label>社会信用代码</Label>
                       <div className="field-value p-2 bg-muted rounded">
-                        {state.selectedEnterprise.socialCreditCode ? (
+                        {dialogs.selectedEnterprise.socialCreditCode ? (
                           <code className="text-sm font-mono">
-                            {state.selectedEnterprise.socialCreditCode}
+                            {dialogs.selectedEnterprise.socialCreditCode}
                           </code>
                         ) : '-'}
                       </div>
                     </div>
                     <div className="col-span-2">
                       <Label>经营范围</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.businessScope || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.businessScope || '-'}</div>
                     </div>
                     <div>
                       <Label>提交时间</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.submitTime || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.submitTime || '-'}</div>
                     </div>
                     <div>
                       <Label>审核时间</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.auditTime || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.auditTime || '-'}</div>
                     </div>
                   </div>
                 </TabsContent>
@@ -590,24 +612,24 @@ export default function EnterpriseManagement() {
                     <div>
                       <Label>银行账号</Label>
                       <div className="field-value p-2 bg-muted rounded">
-                        {state.selectedEnterprise.bankAccount ? (
+                        {dialogs.selectedEnterprise.bankAccount ? (
                           <code className="text-sm font-mono">
-                            {state.selectedEnterprise.bankAccount}
+                            {dialogs.selectedEnterprise.bankAccount}
                           </code>
                         ) : '-'}
                       </div>
                     </div>
                     <div>
                       <Label>开户行</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.bankName || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.bankName || '-'}</div>
                     </div>
                     <div className="col-span-2">
                       <Label>开户行全称</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.bankFullName || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.bankFullName || '-'}</div>
                     </div>
                     <div className="col-span-2">
                       <Label>开户行地址</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.bankAddress || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.bankAddress || '-'}</div>
                     </div>
                   </div>
                 </TabsContent>
@@ -617,19 +639,19 @@ export default function EnterpriseManagement() {
                   <div className="grid grid-cols-2 gap-6">
                     <div>
                       <Label>法人姓名</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.legalPerson || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.legalPerson || '-'}</div>
                     </div>
                     <div>
                       <Label>联系人</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.registrant || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.registrant || '-'}</div>
                     </div>
                     <div>
                       <Label>审核人</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.auditor || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.auditor || '-'}</div>
                     </div>
                     <div>
                       <Label>审核意见</Label>
-                      <div className="field-value p-2 bg-muted rounded">{state.selectedEnterprise.auditComment || '-'}</div>
+                      <div className="field-value p-2 bg-muted rounded">{dialogs.selectedEnterprise.auditComment || '-'}</div>
                     </div>
                   </div>
                 </TabsContent>
@@ -645,20 +667,20 @@ export default function EnterpriseManagement() {
       </Dialog>
 
       {/* Status Change Confirmation Dialog */}
-      <AlertDialog open={state.showStatusDialog} onOpenChange={(open) => dispatch({ type: 'TOGGLE_STATUS_DIALOG', payload: open })}>
+      <AlertDialog open={dialogs.showStatusDialog} onOpenChange={(open) => dispatch({ type: 'TOGGLE_STATUS_DIALOG', payload: open })}>
         <AlertDialogContent className="w-[80vw] max-w-md">
           <AlertDialogHeader>
             <AlertDialogTitle>
-              确认{state.statusAction === 'enable' ? '启用' : '禁用'}企业
+              确认{dialogs.statusAction === 'enable' ? '启用' : '禁用'}企业
             </AlertDialogTitle>
             <AlertDialogDescription>
-              {state.statusAction === 'enable' ? (
+              {dialogs.statusAction === 'enable' ? (
                 <>
-                  启用企业 <strong>{state.selectedEnterprise?.name}</strong> 后，该企业用户将恢复正常登录和使用权限。
+                  启用企业 <strong>{dialogs.selectedEnterprise?.name}</strong> 后，该企业用户将恢复正常登录和使用权限。
                 </>
               ) : (
                 <>
-                  禁用企业 <strong>{state.selectedEnterprise?.name}</strong> 后，该企业所有用户将无法登录系统。此操作不会删除企业数据，可随时重新启用。
+                  禁用企业 <strong>{dialogs.selectedEnterprise?.name}</strong> 后，该企业所有用户将无法登录系统。此操作不会删除企业数据，可随时重新启用。
                 </>
               )}
             </AlertDialogDescription>
@@ -667,9 +689,9 @@ export default function EnterpriseManagement() {
             <AlertDialogCancel>取消</AlertDialogCancel>
             <AlertDialogAction
               onClick={confirmStatusChange}
-              className={state.statusAction === 'enable' ? 'bg-green-600 hover:bg-green-700' : 'bg-gray-600 hover:bg-gray-700'}
+              className={dialogs.statusAction === 'enable' ? 'bg-green-600 hover:bg-green-700' : 'bg-gray-600 hover:bg-gray-700'}
             >
-              确认{state.statusAction === 'enable' ? '启用' : '禁用'}
+              确认{dialogs.statusAction === 'enable' ? '启用' : '禁用'}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -677,7 +699,7 @@ export default function EnterpriseManagement() {
 
       {/* Create Enterprise Dialog */}
       <CreateEnterpriseDialog
-        open={state.showAddDialog}
+        open={dialogs.showAddDialog}
         onOpenChange={(open) => dispatch({ type: 'TOGGLE_ADD_DIALOG', payload: open })}
         onSuccess={handleCreateSuccess}
       />
diff --git a/crop-x/src/components/common/searchFormPagination/components/PaginationComponent.tsx b/crop-x/src/components/common/searchFormPagination/components/PaginationComponent.tsx
new file mode 100644
index 0000000..d6a0a39
--- /dev/null
+++ b/crop-x/src/components/common/searchFormPagination/components/PaginationComponent.tsx
@@ -0,0 +1,221 @@
+/**
+ * filekorolheader: 分页组件 - 可配置的分页导航组件
+ * 功能：分页导航、页码跳转、每页条数设置、分页信息显示
+ * 路径：/components/common/searchFormPagination/components/PaginationComponent
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn语义化样式，支持完全自定义配置
+ */
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+// 分页配置接口
+export interface PaginationConfig {
+  page: number;
+  size: number;
+  total: number;
+  totalPages: number;
+  hasNext: boolean;
+  hasPrev: boolean;
+}
+
+// 组件Props接口
+export interface PaginationComponentProps {
+  pagination: PaginationConfig;
+  onPageChange: (page: number) => void;
+  onSizeChange?: (size: number) => void;
+  loading?: boolean;
+  showSizeSelector?: boolean;
+  showPageInfo?: boolean;
+  showQuickJumper?: boolean;
+  sizeOptions?: number[];
+  maxVisiblePages?: number;
+  className?: string;
+}
+
+export function PaginationComponent({
+  pagination,
+  onPageChange,
+  onSizeChange,
+  loading = false,
+  showSizeSelector = true,
+  showPageInfo = true,
+  showQuickJumper = false,
+  sizeOptions = [10, 30, 50, 100],
+  maxVisiblePages = 7,
+  className = '',
+}: PaginationComponentProps) {
+  const [jumpPage, setJumpPage] = useState('');
+
+  // 处理页码变化
+  const handlePageChange = (page: number) => {
+    // 边界检查
+    if (page < 1) page = 1;
+    if (page > pagination.totalPages && pagination.totalPages > 0) {
+      page = pagination.totalPages;
+    }
+    onPageChange(page);
+  };
+
+  // 处理每页条数变化
+  const handleSizeChange = (size: string) => {
+    const newSize = parseInt(size, 10);
+    onSizeChange?.(newSize);
+  };
+
+  // 处理快速跳转
+  const handleJumpPage = () => {
+    const page = parseInt(jumpPage, 10);
+    if (!isNaN(page) && page >= 1 && page <= pagination.totalPages) {
+      handlePageChange(page);
+      setJumpPage('');
+    }
+  };
+
+  // 处理跳转输入框回车
+  const handleJumpKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleJumpPage();
+    }
+  };
+
+  // 生成可见页码数组
+  const generateVisiblePages = () => {
+    const { page, totalPages } = pagination;
+    const visiblePages: number[] = [];
+
+    if (totalPages <= maxVisiblePages) {
+      // 如果总页数少于最大可见页数，显示所有页码
+      for (let i = 1; i <= totalPages; i++) {
+        visiblePages.push(i);
+      }
+    } else {
+      // 否则生成智能的页码显示范围
+      const half = Math.floor(maxVisiblePages / 2);
+      let start = Math.max(1, page - half);
+      let end = Math.min(totalPages, start + maxVisiblePages - 1);
+
+      // 调整开始位置，确保显示足够数量的页码
+      if (end - start < maxVisiblePages - 1) {
+        start = Math.max(1, end - maxVisiblePages + 1);
+      }
+
+      for (let i = start; i <= end; i++) {
+        visiblePages.push(i);
+      }
+    }
+
+    return visiblePages;
+  };
+
+  const visiblePages = generateVisiblePages();
+  const { page, total, totalPages, hasPrev, hasNext } = pagination;
+
+  return (
+    <div className={`flex items-center justify-between mt-4 ${className}`}>
+      {/* 左侧信息 */}
+      <div className="flex items-center gap-4">
+        {showPageInfo && (
+          <div className="text-sm text-muted-foreground">
+            显示第 {page} 页，共 {totalPages} 页
+            <span className="ml-2">总计 {total} 条记录</span>
+          </div>
+        )}
+
+        {showSizeSelector && onSizeChange && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">每页显示</span>
+            <Select value={String(pagination.size)} onValueChange={handleSizeChange}>
+              <SelectTrigger className="w-20">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {sizeOptions.map((size) => (
+                  <SelectItem key={size} value={String(size)}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <span className="text-sm text-muted-foreground">条</span>
+          </div>
+        )}
+      </div>
+
+      {/* 右侧分页导航 - 只有超过一页时才显示分页按钮 */}
+      {totalPages > 1 && (
+        <div className="flex items-center gap-2">
+          {/* 上一页按钮 */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handlePageChange(page - 1)}
+            disabled={!hasPrev || loading}
+          >
+            <ChevronLeft className="w-4 h-4" />
+            上一页
+          </Button>
+
+          {/* 页码按钮 */}
+          <div className="flex items-center gap-1">
+            {visiblePages.map((pageNum) => (
+              <Button
+                key={pageNum}
+                variant={pageNum === page ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => handlePageChange(pageNum)}
+                disabled={loading}
+                className="min-w-[2.5rem]"
+              >
+                {pageNum}
+              </Button>
+            ))}
+          </div>
+
+          {/* 下一页按钮 */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handlePageChange(page + 1)}
+            disabled={!hasNext || loading}
+          >
+            下一页
+            <ChevronRight className="w-4 h-4" />
+          </Button>
+
+          {/* 快速跳转 */}
+          {showQuickJumper && totalPages > 5 && (
+            <div className="flex items-center gap-2 ml-4">
+              <span className="text-sm text-muted-foreground">跳至</span>
+              <Input
+                type="number"
+                min={1}
+                max={totalPages}
+                value={jumpPage}
+                onChange={(e) => setJumpPage(e.target.value)}
+                onKeyPress={handleJumpKeyPress}
+                placeholder="页码"
+                className="w-16 h-8"
+                disabled={loading}
+              />
+              <span className="text-sm text-muted-foreground">页</span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleJumpPage}
+                disabled={loading || !jumpPage}
+              >
+                确定
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default PaginationComponent;
\ No newline at end of file
diff --git a/crop-x/src/components/common/searchFormPagination/components/SearchFormComponent.tsx b/crop-x/src/components/common/searchFormPagination/components/SearchFormComponent.tsx
new file mode 100644
index 0000000..fcd66db
--- /dev/null
+++ b/crop-x/src/components/common/searchFormPagination/components/SearchFormComponent.tsx
@@ -0,0 +1,166 @@
+/**
+ * filekorolheader: 搜索表单组件 - 可配置的搜索条件表单
+ * 功能：搜索条件输入、下拉选择、实时搜索、重置功能
+ * 路径：/components/common/searchFormPagination/components/SearchFormComponent
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn语义化样式，支持完全自定义
+ */
+'use client';
+
+import { useState, useEffect, useRef, memo } from 'react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Search } from 'lucide-react';
+
+// 搜索字段配置接口
+export interface SearchFieldConfig {
+  key: string;
+  type: 'text' | 'select';
+  placeholder?: string;
+  options?: Array<{ value: string; label: string }>;
+  defaultValue?: string;
+}
+
+// 组件Props接口
+export interface SearchFormComponentProps {
+  fields: SearchFieldConfig[];
+  filters: Record<string, string>;
+  onFiltersChange: (filters: Record<string, string>) => void;
+  placeholder?: string;
+  loading?: boolean;
+  layout?: 'horizontal' | 'vertical';
+  maxVisibleFields?: number;
+}
+
+export function SearchFormComponent({
+  fields,
+  filters,
+  onFiltersChange,
+  placeholder = '请输入搜索关键词...',
+  loading = false,
+  layout = 'horizontal',
+  maxVisibleFields = 3,
+}: SearchFormComponentProps) {
+  const [localFilters, setLocalFilters] = useState<Record<string, string>>(filters);
+  const [showAllFields, setShowAllFields] = useState(false);
+
+  // 使用ref保持最新的onFiltersChange引用，避免useEffect重复触发
+  const onFiltersChangeRef = useRef(onFiltersChange);
+  onFiltersChangeRef.current = onFiltersChange;
+
+  // 同步外部filters到本地state
+  useEffect(() => {
+    setLocalFilters(filters);
+  }, [filters]);
+
+  // 处理输入变化 - 防抖搜索避免频繁刷新导致失焦
+  const handleInputChange = (key: string, value: string) => {
+    const newFilters = {
+      ...localFilters,
+      [key]: value,
+    };
+    setLocalFilters(newFilters);
+  };
+
+  // 使用防抖来减少搜索频率，避免频繁刷新导致失焦
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // 使用ref引用最新的onFiltersChange函数，避免依赖变化导致重复触发
+      onFiltersChangeRef.current(localFilters);
+    }, 300); // 300ms 防抖延迟
+
+    return () => clearTimeout(timer);
+  }, [localFilters]); // 只依赖localFilters，使用ref避免函数依赖问题
+
+  // 计算显示的字段
+  const visibleFields = showAllFields
+    ? fields
+    : fields.slice(0, maxVisibleFields);
+
+  const hasMoreFields = fields.length > maxVisibleFields;
+
+  // 渲染单个搜索字段
+  const renderSearchField = (field: SearchFieldConfig) => {
+    const value = localFilters[field.key] || field.defaultValue || '';
+
+    switch (field.type) {
+      case 'select':
+        return (
+          <div key={field.key}>
+            <Select
+              value={value}
+              onValueChange={(newValue) => handleInputChange(field.key, newValue)}
+              disabled={false} // 始终允许选择，不因加载而禁用
+            >
+              <SelectTrigger className="w-40">
+                <SelectValue placeholder={field.placeholder || '请选择'} />
+              </SelectTrigger>
+              <SelectContent>
+                {field.options?.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        );
+
+      case 'text':
+      default:
+        return (
+          <div key={field.key} className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              placeholder={field.placeholder || placeholder}
+              value={value}
+              onChange={(e) => handleInputChange(field.key, e.target.value)}
+              disabled={false} // 始终允许输入，不因加载而禁用
+              className="pl-10 w-64"
+            />
+          </div>
+        );
+    }
+  };
+
+  // 主搜索框（当没有配置字段时使用默认搜索）
+  const renderMainSearch = () => (
+    <div className="relative flex-1 max-w-md">
+      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+      <Input
+        placeholder={placeholder}
+        value={localFilters.search || ''}
+        onChange={(e) => handleInputChange('search', e.target.value)}
+        disabled={false} // 始终允许输入，不因加载而禁用
+        className="pl-10"
+      />
+    </div>
+  );
+
+  // 如果没有配置字段，使用简单搜索
+  if (fields.length === 0) {
+    return renderMainSearch();
+  }
+
+  return (
+    <div className={`flex ${layout === 'horizontal' ? 'flex-row items-end' : 'flex-col items-start'} gap-4 flex-wrap`}>
+      {/* 渲染搜索字段 */}
+      {visibleFields.map(renderSearchField)}
+
+      {/* 展开/收起按钮 */}
+      {hasMoreFields && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setShowAllFields(!showAllFields)}
+          className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
+        >
+          {showAllFields ? '收起' : `展开更多 (${fields.length - maxVisibleFields})`}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+const MemoizedSearchFormComponent = memo(SearchFormComponent);
+export default MemoizedSearchFormComponent;
\ No newline at end of file
diff --git a/crop-x/src/components/common/searchFormPagination/components/example.tsx b/crop-x/src/components/common/searchFormPagination/components/example.tsx
new file mode 100644
index 0000000..1e852b9
--- /dev/null
+++ b/crop-x/src/components/common/searchFormPagination/components/example.tsx
@@ -0,0 +1,248 @@
+/**
+ * filekorolheader: 搜索表单分页组件使用示例 - 展示如何使用该组件
+ * 功能：使用示例、配置示例、最佳实践展示
+ * 路径：/components/common/searchFormPagination/components/example
+ * 规范：遵循crop-x/docs/开发项目规范.md，提供完整的使用示例
+ */
+'use client';
+
+import { SearchFormPagination, SearchFieldConfig, TableColumnConfig } from '../index';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Building2, Eye, Power, PowerOff, Plus } from 'lucide-react';
+import { toast } from 'sonner';
+
+// 模拟数据类型
+interface MockEnterprise {
+  id: string;
+  code: string;
+  name: string;
+  type: string;
+  registrant?: string;
+  contactPhone?: string;
+  createdAt: string;
+  auditStatus: 'draft' | 'pending' | 'approved' | 'rejected';
+  status: 'active' | 'inactive';
+}
+
+// 示例使用
+export function EnterpriseManagementExample() {
+  // 搜索字段配置
+  const searchFields: SearchFieldConfig[] = [
+    {
+      key: 'search',
+      label: '企业搜索',
+      type: 'text',
+      placeholder: '搜索企业名称、编码...',
+    },
+    {
+      key: 'audit_status',
+      label: '审核状态',
+      type: 'select',
+      placeholder: '选择审核状态',
+      options: [
+        { value: '', label: '全部状态' },
+        { value: '草稿', label: '草稿' },
+        { value: '待审核', label: '待审核' },
+        { value: '已通过', label: '审核通过' },
+        { value: '已拒绝', label: '已拒绝' },
+      ],
+    },
+  ];
+
+  // 表格列配置
+  const columns: TableColumnConfig[] = [
+    {
+      key: 'code',
+      label: '企业编码',
+      sortable: true,
+      width: '120px',
+    },
+    {
+      key: 'name',
+      label: '企业名称',
+      sortable: true,
+      render: (value: string, row: MockEnterprise) => (
+        <div className="flex items-center gap-2">
+          <Building2 className="w-4 h-4 text-blue-500" />
+          <span className="font-medium">{value}</span>
+        </div>
+      ),
+    },
+    {
+      key: 'type',
+      label: '企业类型',
+      render: (value: string) => (
+        <Badge variant="outline" className="font-light">{value}</Badge>
+      ),
+    },
+    {
+      key: 'registrant',
+      label: '登记人',
+      render: (value?: string) => value || '-',
+    },
+    {
+      key: 'contactPhone',
+      label: '联系电话',
+      render: (value?: string) => value || '-',
+    },
+    {
+      key: 'createdAt',
+      label: '创建时间',
+      sortable: true,
+      width: '160px',
+    },
+    {
+      key: 'auditStatus',
+      label: '审核状态',
+      render: (value: MockEnterprise['auditStatus']) => {
+        const getAuditStatusBadge = (status: MockEnterprise['auditStatus']) => {
+          switch (status) {
+            case 'draft':
+              return <Badge className="bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-800 font-light">草稿</Badge>;
+            case 'pending':
+              return <Badge className="bg-yellow-50 dark:bg-yellow-950 text-yellow-600 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800 font-light">待审核</Badge>;
+            case 'approved':
+              return <Badge className="bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800 font-light">审核通过</Badge>;
+            case 'rejected':
+              return <Badge className="bg-red-50 dark:bg-red-950 text-red-600 dark:text-red-400 border-red-200 dark:border-red-800 font-light">已拒绝</Badge>;
+            default:
+              return <Badge className="bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-800 font-light">草稿</Badge>;
+          }
+        };
+        return getAuditStatusBadge(value);
+      },
+    },
+    {
+      key: 'status',
+      label: '状态',
+      render: (value: MockEnterprise['status']) => {
+        const getStatusBadge = (status: MockEnterprise['status']) => {
+          if (status === 'active') {
+            return <Badge className="bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800 font-light">启用</Badge>;
+          }
+          return <Badge className="bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-800 font-light">禁用</Badge>;
+        };
+        return getStatusBadge(value);
+      },
+    },
+    {
+      key: 'actions',
+      label: '操作',
+      render: (_: any, row: MockEnterprise) => (
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => toast.success(`查看企业: ${row.name}`)}
+          >
+            <Eye className="w-3 h-3 mr-1" />
+            查看
+          </Button>
+          {row.status === 'active' ? (
+            <Button
+              size="sm"
+              variant="outline"
+              className="text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600"
+              onClick={() => toast.success(`禁用企业: ${row.name}`)}
+            >
+              <PowerOff className="w-3 h-3 mr-1" />
+              禁用
+            </Button>
+          ) : (
+            <Button
+              size="sm"
+              variant="outline"
+              className="text-green-600 dark:text-green-400 border-green-300 dark:border-green-600"
+              onClick={() => toast.success(`启用企业: ${row.name}`)}
+            >
+              <Power className="w-3 h-3 mr-1" />
+              启用
+            </Button>
+          )}
+        </div>
+      ),
+    },
+  ];
+
+  // 模拟数据
+  const mockData: MockEnterprise[] = [
+    {
+      id: '1',
+      code: 'ENT001',
+      name: '示例科技有限公司',
+      type: '科技有限公司',
+      registrant: '张三',
+      contactPhone: '13800138000',
+      createdAt: '2024-01-15 10:30:00',
+      auditStatus: 'approved',
+      status: 'active',
+    },
+    {
+      id: '2',
+      code: 'ENT002',
+      name: '测试农业发展有限公司',
+      type: '农业发展有限公司',
+      registrant: '李四',
+      contactPhone: '13900139000',
+      createdAt: '2024-01-16 14:20:00',
+      auditStatus: 'pending',
+      status: 'active',
+    },
+  ];
+
+  // 模拟分页配置
+  const mockPagination = {
+    page: 1,
+    size: 10,
+    total: 2,
+    totalPages: 1,
+    hasNext: false,
+    hasPrev: false,
+  };
+
+  // 处理搜索
+  const handleSearch = (filters: Record<string, string>) => {
+    console.log('搜索条件:', filters);
+    toast.success('搜索条件已更新');
+  };
+
+  // 处理排序
+  const handleSort = (sortBy: string, sortOrder: 'asc' | 'desc') => {
+    console.log('排序:', { sortBy, sortOrder });
+    toast.success(`排序: ${sortBy} ${sortOrder}`);
+  };
+
+  // 处理分页
+  const handlePageChange = (page: number) => {
+    console.log('切换到页面:', page);
+    toast.success(`切换到第 ${page} 页`);
+  };
+
+  // 操作按钮
+  const actionButtons = (
+    <Button onClick={() => toast.success('新建企业')}>
+      <Plus className="w-4 h-4 mr-2" />
+      新建企业
+    </Button>
+  );
+
+  return (
+    <SearchFormPagination
+      title="企业管理"
+      description="管理平台所有企业信息，支持查询、查看详情、启用/禁用企业"
+      searchFields={searchFields}
+      onSearch={handleSearch}
+      columns={columns}
+      data={mockData}
+      pagination={mockPagination}
+      onPageChange={handlePageChange}
+      onSort={handleSort}
+      actionButtons={actionButtons}
+      emptyIcon={<Building2 className="w-12 h-12 mx-auto mb-4 opacity-20" />}
+      emptyText="暂无企业数据"
+    />
+  );
+}
+
+export default EnterpriseManagementExample;
\ No newline at end of file
diff --git a/crop-x/src/components/common/searchFormPagination/components/searchFormPaginationReducer.tsx b/crop-x/src/components/common/searchFormPagination/components/searchFormPaginationReducer.tsx
new file mode 100644
index 0000000..0f93f3e
--- /dev/null
+++ b/crop-x/src/components/common/searchFormPagination/components/searchFormPaginationReducer.tsx
@@ -0,0 +1,196 @@
+/**
+ * filekorolheader: 搜索表单分页状态管理 - 管理组件的状态和actions
+ * 功能：状态管理、数据更新、分页控制、搜索过滤
+ * 路径：/components/common/searchFormPagination/components/searchFormPaginationReducer
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用useReducer模式管理复杂状态
+ */
+'use client';
+
+// 状态接口定义
+export interface SearchFormPaginationState {
+  // 数据相关
+  data: any[];
+  loading: boolean;
+  error: string | null;
+
+  // 搜索过滤
+  filters: Record<string, string>;
+
+  // 分页相关
+  pagination: {
+    page: number;
+    size: number;
+    total: number;
+    totalPages: number;
+    hasNext: boolean;
+    hasPrev: boolean;
+  };
+
+  // 排序相关
+  sortBy?: string;
+  sortOrder: 'asc' | 'desc';
+}
+
+// Action类型定义
+export type SearchFormPaginationAction =
+  | { type: 'SET_DATA'; payload: any[] }
+  | { type: 'SET_LOADING'; payload: boolean }
+  | { type: 'SET_ERROR'; payload: string | null }
+  | { type: 'SET_FILTERS'; payload: Record<string, string> }
+  | { type: 'UPDATE_FILTER'; payload: { key: string; value: string } }
+  | { type: 'CLEAR_FILTERS' }
+  | { type: 'SET_PAGINATION'; payload: SearchFormPaginationState['pagination'] }
+  | { type: 'SET_PAGINATION_PAGE'; payload: number }
+  | { type: 'SET_PAGINATION_SIZE'; payload: number }
+  | { type: 'SET_SORT_BY'; payload: string }
+  | { type: 'SET_SORT_ORDER'; payload: 'asc' | 'desc' }
+  | { type: 'SET_SORT'; payload: { sortBy?: string; sortOrder: 'asc' | 'desc' } }
+  | { type: 'TOGGLE_SORT'; payload: string }
+  | { type: 'SET_DATA_AND_PAGINATION'; payload: { data: any[]; pagination: SearchFormPaginationState['pagination'] } }
+  | { type: 'RESET_STATE' };
+
+// 初始状态
+export const initialState: SearchFormPaginationState = {
+  data: [],
+  loading: false,
+  error: null,
+  filters: {},
+  pagination: {
+    page: 1,
+    size: 10,
+    total: 0,
+    totalPages: 0,
+    hasNext: false,
+    hasPrev: false,
+  },
+  sortBy: undefined,
+  sortOrder: 'asc',
+};
+
+// Reducer函数
+export function SearchFormPaginationReducer(
+  state: SearchFormPaginationState,
+  action: SearchFormPaginationAction
+): SearchFormPaginationState {
+  switch (action.type) {
+    case 'SET_DATA':
+      return {
+        ...state,
+        data: action.payload,
+      };
+
+    case 'SET_LOADING':
+      return {
+        ...state,
+        loading: action.payload,
+      };
+
+    case 'SET_ERROR':
+      return {
+        ...state,
+        error: action.payload,
+        loading: false,
+      };
+
+    case 'SET_FILTERS':
+      return {
+        ...state,
+        filters: action.payload,
+      };
+
+    case 'UPDATE_FILTER':
+      return {
+        ...state,
+        filters: {
+          ...state.filters,
+          [action.payload.key]: action.payload.value,
+        },
+      };
+
+    case 'CLEAR_FILTERS':
+      return {
+        ...state,
+        filters: {},
+      };
+
+    case 'SET_PAGINATION':
+      return {
+        ...state,
+        pagination: action.payload,
+      };
+
+    case 'SET_PAGINATION_PAGE':
+      return {
+        ...state,
+        pagination: {
+          ...state.pagination,
+          page: action.payload,
+        },
+      };
+
+    case 'SET_PAGINATION_SIZE':
+      return {
+        ...state,
+        pagination: {
+          ...state.pagination,
+          size: action.payload,
+        },
+      };
+
+    case 'SET_SORT_BY':
+      return {
+        ...state,
+        sortBy: action.payload,
+      };
+
+    case 'SET_SORT_ORDER':
+      return {
+        ...state,
+        sortOrder: action.payload,
+      };
+
+    case 'SET_SORT':
+      return {
+        ...state,
+        sortBy: action.payload.sortBy,
+        sortOrder: action.payload.sortOrder,
+      };
+
+    case 'TOGGLE_SORT':
+      const columnKey = action.payload;
+      let newSortOrder: 'asc' | 'desc';
+
+      if (state.sortBy === columnKey) {
+        // 如果点击的是当前排序列，切换排序方向
+        newSortOrder = state.sortOrder === 'desc' ? 'asc' : 'desc';
+      } else {
+        // 如果点击的是新列，设置为升序
+        newSortOrder = 'asc';
+      }
+
+      return {
+        ...state,
+        sortBy: columnKey,
+        sortOrder: newSortOrder,
+      };
+
+    case 'SET_DATA_AND_PAGINATION':
+      return {
+        ...state,
+        data: action.payload.data,
+        pagination: action.payload.pagination,
+        loading: false,
+        error: null,
+      };
+
+    case 'RESET_STATE':
+      return {
+        ...initialState,
+        filters: state.filters, // 保留搜索过滤条件
+      };
+
+    default:
+      console.warn('Unknown action type:', (action as any).type);
+      return state;
+  }
+}
\ No newline at end of file
diff --git a/crop-x/src/components/common/searchFormPagination/index.ts b/crop-x/src/components/common/searchFormPagination/index.ts
new file mode 100644
index 0000000..625600f
--- /dev/null
+++ b/crop-x/src/components/common/searchFormPagination/index.ts
@@ -0,0 +1,38 @@
+/**
+ * filekorolheader: 搜索表单分页组件导出 - 统一导出所有相关组件和类型
+ * 功能：组件导出、类型导出、便捷导入
+ * 路径：/components/common/searchFormPagination
+ * 规范：遵循crop-x/docs/开发项目规范.md，提供统一的导出入口
+ */
+
+// 主组件
+export { SearchFormPagination } from './page';
+export { default } from './page';
+
+// 子组件
+export { default as SearchFormComponent } from './components/SearchFormComponent';
+export { default as PaginationComponent } from './components/PaginationComponent';
+
+// 状态管理
+export { SearchFormPaginationReducer, initialState } from './components/searchFormPaginationReducer';
+
+// 类型定义
+export type {
+  SearchFieldConfig,
+  TableColumnConfig,
+  PaginationConfig,
+  SearchFormPaginationProps,
+} from './page';
+
+export type {
+  SearchFormPaginationState,
+  SearchFormPaginationAction,
+} from './components/searchFormPaginationReducer';
+
+export type {
+  SearchFormComponentProps,
+} from './components/SearchFormComponent';
+
+export type {
+  PaginationComponentProps,
+} from './components/PaginationComponent';
\ No newline at end of file
diff --git a/crop-x/src/components/common/searchFormPagination/page.tsx b/crop-x/src/components/common/searchFormPagination/page.tsx
new file mode 100644
index 0000000..43b7c40
--- /dev/null
+++ b/crop-x/src/components/common/searchFormPagination/page.tsx
@@ -0,0 +1,364 @@
+/**
+ * filekorolheader: 搜索表单分页公共组件 - 提供可复用的搜索、表单和分页功能
+ * 功能：搜索条件管理、表头渲染、分页控制、加载状态处理
+ * 路径：/components/common/searchFormPagination
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn语义化样式，支持完全自定义配置
+ */
+'use client';
+
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { AlertCircle, ChevronLeft, ChevronRight, RefreshCw } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { SearchFormComponent } from './components/SearchFormComponent';
+import { PaginationComponent } from './components/PaginationComponent';
+
+// 搜索条件配置接口
+export interface SearchFieldConfig {
+  key: string;
+  label: string;
+  type: 'text' | 'select';
+  placeholder?: string;
+  options?: Array<{ value: string; label: string }>;
+  defaultValue?: string;
+}
+
+// 表头配置接口
+export interface TableColumnConfig {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  width?: string;
+  render?: (value: any, row: any, index: number) => React.ReactNode;
+}
+
+// 分页配置接口
+export interface PaginationConfig {
+  page: number;
+  size: number;
+  total: number;
+  totalPages: number;
+  hasNext: boolean;
+  hasPrev: boolean;
+}
+
+// 组件Props接口 - 简化版本
+export interface SearchFormPaginationProps<T = any> {
+  // 搜索表单配置
+  formTitle?: string;
+  formRightContent?: React.ReactNode;
+  searchFields: SearchFieldConfig[];
+  searchPlaceholder?: string;
+  onSearch?: (filters: Record<string, string>) => void;
+
+  // 表格配置
+  columns: TableColumnConfig[];
+  data?: T[];
+  loading?: boolean;
+  error?: string | null;
+
+  // 分页配置
+  pagination?: PaginationConfig;
+  onPageChange?: (page: number) => void;
+  onSizeChange?: (size: number) => void;
+
+  // 排序配置
+  sortBy?: string;
+  sortOrder?: 'asc' | 'desc';
+  onSort?: (sortBy: string, sortOrder: 'asc' | 'desc') => void;
+
+  // 空状态配置
+  emptyIcon?: React.ReactNode;
+  emptyText?: string;
+
+  // 分页器配置
+  showSizeSelector?: boolean;
+  showPageInfo?: boolean;
+  showQuickJumper?: boolean;
+  sizeOptions?: number[];
+  maxVisiblePages?: number;
+
+  // 自定义样式
+  className?: string;
+
+  // 数据更新回调 - 用于父组件获取搜索条件变化
+  onDataUpdate?: (data: {
+    items: T[];
+    pagination: PaginationConfig;
+    loading: boolean;
+    error: string | null;
+  }) => void;
+}
+
+export function SearchFormPagination<T = any>({
+  formTitle,
+  formRightContent,
+  searchFields,
+  searchPlaceholder = '请输入搜索关键词...',
+  onSearch,
+  columns,
+  data = [],
+  loading = false,
+  error = null,
+  pagination,
+  onPageChange,
+  onSizeChange,
+  sortBy,
+  sortOrder,
+  onSort,
+  emptyIcon,
+  emptyText = '暂无数据',
+  showSizeSelector = true,
+  showPageInfo = true,
+  showQuickJumper = false,
+  sizeOptions = [10, 30, 50, 100],
+  maxVisiblePages = 7,
+  className = '',
+  onDataUpdate,
+}: SearchFormPaginationProps<T>) {
+  // 简化的内部状态 - 只管理搜索条件
+  const [filters, setFilters] = useState<Record<string, string>>(
+    searchFields.reduce((acc, field) => {
+      acc[field.key] = field.defaultValue || '';
+      return acc;
+    }, {} as Record<string, string>)
+  );
+
+  // 同步外部排序状态
+  const [currentSort, setCurrentSort] = useState<{ sortBy?: string; sortOrder: 'asc' | 'desc' }>({
+    sortBy,
+    sortOrder: sortOrder || 'asc'
+  });
+
+  // 数据更新回调 - 通知父组件数据变化
+  useEffect(() => {
+    onDataUpdate?.({
+      items: data,
+      pagination: pagination || {
+        page: 1,
+        size: 10,
+        total: 0,
+        totalPages: 0,
+        hasNext: false,
+        hasPrev: false,
+      },
+      loading,
+      error,
+    });
+  }, [data, pagination, loading, error, onDataUpdate]);
+
+  // 简化的事件处理器 - 纯粹的状态通知
+  const handleSearch = useCallback((newFilters: Record<string, string>) => {
+    setFilters(newFilters);
+    onSearch?.(newFilters);
+  }, [onSearch]);
+
+  const handleSort = useCallback((columnKey: string) => {
+    const column = columns.find(col => col.key === columnKey);
+    if (!column?.sortable) return;
+
+    // 计算新的排序状态
+    let newSortOrder: 'asc' | 'desc';
+    if (currentSort.sortBy === columnKey) {
+      newSortOrder = currentSort.sortOrder === 'desc' ? 'asc' : 'desc';
+    } else {
+      newSortOrder = 'asc';
+    }
+
+    const newSort = { sortBy: columnKey, sortOrder: newSortOrder };
+    setCurrentSort(newSort);
+    onSort?.(columnKey, newSortOrder);
+  }, [columns, currentSort, onSort]);
+
+  const handlePageChange = useCallback((page: number) => {
+    onPageChange?.(page);
+  }, [onPageChange]);
+
+  const handleSizeChange = useCallback((size: number) => {
+    onSizeChange?.(size);
+  }, [onSizeChange]);
+
+  // 稳定的filters引用
+  const stableFilters = useMemo(() => filters, [filters]);
+
+  // 渲染表头
+  const renderTableHeader = () => {
+    // 计算列宽：对于自定义渲染的列，使用最小宽度；对于简单列，根据内容计算宽度
+    const getColumnWidth = (column: TableColumnConfig) => {
+      if (column.width) {
+        return column.width; // 如果明确指定了宽度，使用指定宽度
+      }
+
+      // 对于简单文本列，计算内容长度并设置合理的最小宽度
+      if (!column.render) {
+        return 'min-w-[100px] max-w-[200px]'; // 普通文本列的宽度范围
+      }
+
+      // 对于自定义渲染的列，给一个合理的最小宽度
+      return 'min-w-[120px] max-w-[300px]'; // 自定义列的宽度范围
+    };
+
+    return (
+      <TableHeader>
+        <TableRow>
+          {columns.map((column) => (
+            <TableHead
+              key={column.key}
+              className={column.sortable ? 'cursor-pointer hover:bg-muted' : ''}
+              style={{
+                width: getColumnWidth(column),
+                minWidth: column.render ? '120px' : '100px',
+                maxWidth: column.render ? '300px' : '200px',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap'
+              }}
+              onClick={() => column.sortable && handleSort(column.key)}
+            >
+              <div className="truncate" title={column.label}>
+                {column.label}
+              </div>
+              {column.sortable && currentSort.sortBy === column.key && (
+                <span className="ml-1 flex-shrink-0">{currentSort.sortOrder === 'asc' ? '↑' : '↓'}</span>
+              )}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+    );
+  };
+
+  // 渲染表格行
+  const renderTableRow = (row: T, index: number) => (
+    <TableRow key={index}>
+      {columns.map((column) => (
+        <TableCell
+          key={column.key}
+          style={{
+            maxWidth: column.render ? '300px' : '200px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+          }}
+        >
+          <div className="truncate" title={
+            column.render
+              ? (column.render(row[column.key as keyof T], row, index) as any)?.toString() || ''
+              : String(row[column.key as keyof T] ?? '-')
+          }>
+            {column.render
+              ? column.render(row[column.key as keyof T], row, index)
+              : String(row[column.key as keyof T] ?? '-')}
+          </div>
+        </TableCell>
+      ))}
+    </TableRow>
+  );
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      {/* 搜索表单和数据表格在同一个Card里面 */}
+      <Card className="p-6 bg-card">
+        {/* 搜索表单 - 左右两部分布局 */}
+        {(formTitle || formRightContent || searchFields.length > 0) && (
+          <div className="flex items-center justify-between mb-4">
+            {/* 左侧 - 表单名称 */}
+            {formTitle && (
+              <h3 className="text-lg font-semibold text-foreground">{formTitle}</h3>
+            )}
+
+            {/* 右侧 - 搜索控件和自定义内容 */}
+            <div className="flex items-center gap-3">
+              <SearchFormComponent
+                key="search-form"
+                fields={searchFields}
+                filters={stableFilters}
+                onFiltersChange={handleSearch}
+                placeholder={searchPlaceholder}
+                loading={loading}
+              />
+              {formRightContent}
+            </div>
+          </div>
+        )}
+
+        {/* 错误状态 */}
+        {error && (
+          <div className="mb-4 p-4 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 rounded-lg">
+            <div className="flex items-center gap-2 text-red-600 dark:text-red-400">
+              <AlertCircle className="w-4 h-4" />
+              <span>{error}</span>
+            </div>
+          </div>
+        )}
+
+        {/* 数据表格 */}
+        {!error && (
+          <>
+            {/* 初始加载状态 */}
+            {loading && data.length === 0 ? (
+              <div className="text-center py-12 text-muted-foreground">
+                <RefreshCw className="w-8 h-8 mx-auto mb-2 animate-spin" />
+                <p>加载中...</p>
+              </div>
+            ) : (
+              <>
+                {/* 表格加载遮罩 */}
+                <div className="relative">
+                  {loading && (
+                    <div className="absolute inset-0 bg-white/50 dark:bg-black/50 backdrop-blur-sm z-10 flex items-center justify-center rounded-lg">
+                      <div className="flex flex-col items-center text-muted-foreground">
+                        <RefreshCw className="w-6 h-6 animate-spin mb-2" />
+                        <p className="text-sm">加载中...</p>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="border rounded-lg overflow-hidden">
+                    <Table>
+                      {renderTableHeader()}
+                      <TableBody>
+                        {data.map((row, index) => renderTableRow(row, index))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+
+                {/* 空状态 */}
+                {data.length === 0 && !loading && (
+                  <div className="text-center py-12 text-muted-foreground">
+                    {emptyIcon || <div className="w-12 h-12 mx-auto mb-4 opacity-20" />}
+                    <p>{emptyText}</p>
+                  </div>
+                )}
+
+                {/* 分页组件 */}
+                {pagination && (
+                  <PaginationComponent
+                    pagination={pagination}
+                    onPageChange={handlePageChange}
+                    onSizeChange={handleSizeChange}
+                    loading={loading}
+                    showSizeSelector={showSizeSelector}
+                    showPageInfo={showPageInfo}
+                    showQuickJumper={showQuickJumper}
+                    sizeOptions={sizeOptions}
+                    maxVisiblePages={maxVisiblePages}
+                  />
+                )}
+              </>
+            )}
+          </>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+export default SearchFormPagination;
\ No newline at end of file