封装公共组件，调整样式文件的布局，修改路由页面样式

app/routes/rule-groups._index.tsx

@@ -1,11 +1,13 @@
 import { json, type MetaFunction } from "@remix-run/node";
-import { useLoaderData, Link, useNavigate } from "@remix-run/react";
+import { useLoaderData, Link, useNavigate, useSearchParams } from "@remix-run/react";
 import { useState } from "react";
 import indexStyles from "~/styles/pages/rule-groups_index.css?url";
 import { Card } from "~/components/ui/Card";
 import { Button } from "~/components/ui/Button";
-import { SearchBox } from "~/components/ui/SearchBox";
 import { StatusDot } from "~/components/ui/StatusDot";
+import { Table } from "~/components/ui/Table";
+import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
+import { Pagination } from "~/components/ui/Pagination";
 
 // 定义数据类型
 interface RuleGroup {
@@ -103,8 +105,7 @@ export async function loader() {
 export default function RuleGroupsIndex() {
   const { groups } = useLoaderData<typeof loader>();
   const navigate = useNavigate();
-  const [searchText, setSearchText] = useState("");
-  const [groupCode, setGroupCode] = useState("");
+  const [searchParams, setSearchParams] = useSearchParams();
   const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
   
   // 处理展开/收起
@@ -131,14 +132,44 @@ export default function RuleGroupsIndex() {
 
   // 处理搜索名称
   const handleNameSearch = (value: string) => {
-    setSearchText(value);
-    // 实际项目中这里可能需要调用API或过滤本地数据
+    const newParams = new URLSearchParams(searchParams);
+    if (value) {
+      newParams.set('name', value);
+    } else {
+      newParams.delete('name');
+    }
+    newParams.set('page', '1');
+    setSearchParams(newParams);
   };
 
   // 处理搜索编码
   const handleCodeSearch = (value: string) => {
-    setGroupCode(value);
-    // 实际项目中这里可能需要调用API或过滤本地数据
+    const newParams = new URLSearchParams(searchParams);
+    if (value) {
+      newParams.set('code', value);
+    } else {
+      newParams.delete('code');
+    }
+    newParams.set('page', '1');
+    setSearchParams(newParams);
+  };
+
+  // 处理状态筛选变更
+  const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const { value } = e.target;
+    const newParams = new URLSearchParams(searchParams);
+    if (value) {
+      newParams.set('status', value);
+    } else {
+      newParams.delete('status');
+    }
+    newParams.set('page', '1');
+    setSearchParams(newParams);
+  };
+
+  // 处理重置筛选
+  const handleReset = () => {
+    setSearchParams(new URLSearchParams());
   };
 
   // 处理表格数据，包括父子级关系
@@ -158,6 +189,98 @@ export default function RuleGroupsIndex() {
     return result;
   });
 
+  // 定义表格列配置
+  const columns = [
+    {
+      title: "分组名称",
+      key: "name",
+      width: "400px",
+      render: (_: unknown, record: (RuleGroup & { isParent?: boolean, parentId?: string })) => (
+        <div className={`flex items-center ${!record.isParent ? 'ml-8' : ''}`}>
+          {record.isParent && (
+            <span 
+              className="expand-icon" 
+              onClick={() => toggleGroup(record.id)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  toggleGroup(record.id);
+                }
+              }}
+            >
+              <i className={`ri-arrow-${expandedGroups.includes(record.id) ? 'down' : 'right'}-s-line`}></i>
+            </span>
+          )}
+          <Link 
+            to={`/rule-groups/${record.id}/rules`}
+            className="group-name-link flex items-center ml-1 text-green-800"
+          >
+            <i className={`${record.isParent ? 'ri-folder-line' : 'ri-file-list-line'} mr-1 text-green-800`}></i> {record.name}
+          </Link>
+          <span className={`group-badge ${record.isParent ? 'parent-badge' : 'child-badge'}`}>
+            {record.isParent ? '一级分组' : '二级分组'}
+          </span>
+        </div>
+      )
+    },
+    {
+      title: "分组编码",
+      key: "code",
+      render: (_: unknown, record: RuleGroup) => record.code
+    },
+    {
+      title: "评查点数量",
+      key: "ruleCount",
+      render: (_: unknown, record: RuleGroup) => (
+        <>
+          <Link to={`/rule-groups/${record.id}/rules`} className="badge bg-primary text-white">
+            {record.ruleCount}
+          </Link>
+          {record.subGroupCount > 0 && (
+            <span className="text-secondary text-sm ml-1">
+              | 子分组: {record.subGroupCount}
+            </span>
+          )}
+        </>
+      )
+    },
+    {
+      title: "状态",
+      key: "status",
+      render: (_: unknown, record: RuleGroup) => (
+        <StatusDot status={record.status === 'active' ? 'success' : 'error'} text={record.status === 'active' ? '启用' : '禁用'} />
+      )
+    },
+    {
+      title: "创建时间",
+      key: "createdAt",
+      render: (_: unknown, record: RuleGroup) => record.createdAt
+    },
+    {
+      title: "操作",
+      key: "operation",
+      width: "180px",
+      render: (_: unknown, record: RuleGroup) => (
+        <>
+          <button 
+            className="ant-btn ant-btn-text ant-btn-sm text-primary"
+            onClick={() => navigate(`/rule-groups/${record.id}`)}
+          >
+            <i className="ri-edit-line"></i> 编辑
+          </button>
+          <button 
+            className="ant-btn ant-btn-text ant-btn-sm text-error"
+            onClick={() => handleDeleteGroup(record.id)}
+          >
+            <i className="ri-delete-bin-line"></i> 删除
+          </button>
+        </>
+      )
+    }
+  ];
+
   return (
     <div className="content-container rule-groups-page">
       {/* 页面头部 */}
@@ -190,146 +313,70 @@ export default function RuleGroupsIndex() {
         </div>
       </div>
       
-      {/* 搜索栏 */}
-      <Card className="mb-4" bodyClassName="px-4 py-4">
-        <div className="flex flex-wrap items-end gap-4">
-          <div className="flex-1 min-w-[200px]">
-            <label htmlFor="groupName" className="form-label">分组名称</label>
-            <SearchBox
-              placeholder="请输入分组名称"
-              defaultValue={searchText}
-              onSearch={handleNameSearch}
-              name="groupName"
-              buttonText=""
-              className="form-input-only"
-            />
-          </div>
-          <div className="flex-1 min-w-[200px]">
-            <label htmlFor="groupCode" className="form-label">分组编码</label>
-            <SearchBox
-              placeholder="请输入分组编码"
-              defaultValue={groupCode}
-              onSearch={handleCodeSearch}
-              name="groupCode"
-              buttonText=""
-              className="form-input-only"
-            />
-          </div>
-          <div className="flex-1 min-w-[200px]">
-            <label htmlFor="status" className="form-label">状态</label>
-            <select id="status" className="form-select">
-              <option value="">全部</option>
-              <option value="true">启用</option>
-              <option value="false">禁用</option>
-            </select>
-          </div>
-          <div className="flex items-center">
-            <Button type="default" icon="ri-refresh-line" className="mr-2">
+      {/* 搜索栏 - 使用FilterPanel */}
+      <FilterPanel 
+        className="mb-4" 
+        actions={
+          <>
+            <Button type="default" icon="ri-refresh-line" onClick={handleReset} className="mr-2">
               重置
             </Button>
             <Button type="primary" icon="ri-search-line">
               搜索
             </Button>
-          </div>
-        </div>
-      </Card>
-      
-      {/* 数据表格 */}
-      <Card bodyClassName="px-4 py-4">
-        <div className="overflow-x-auto">
-          <table className="ant-table tree-table w-full">
-            <thead>
-              <tr>
-                <th style={{ width: "400px" }}>分组名称</th>
-                <th>分组编码</th>
-                <th>评查点数量</th>
-                <th>状态</th>
-                <th>创建时间</th>
-                <th style={{ width: "180px" }}>操作</th>
-              </tr>
-            </thead>
-            <tbody>
-              {processedData.map((item) => (
-                <tr key={item.id} className={`group-row ${item.isParent ? 'parent-row' : 'child-row child-of-' + item.parentId}`}>
-                  <td>
-                    <div className={`flex items-center ${!item.isParent ? 'ml-8' : ''}`}>
-                      {item.isParent && (
-                        <span 
-                          className="expand-icon" 
-                          onClick={() => toggleGroup(item.id)}
-                          role="button"
-                          tabIndex={0}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              e.preventDefault();
-                              toggleGroup(item.id);
-                            }
-                          }}
-                        >
-                          <i className={`ri-arrow-${expandedGroups.includes(item.id) ? 'down' : 'right'}-s-line`}></i>
-                        </span>
-                      )}
-                      <Link 
-                        to={`/rule-groups/${item.id}/rules`}
-                        className="group-name-link flex items-center ml-1"
-                      >
-                        <i className={`${item.isParent ? 'ri-folder-line' : 'ri-file-list-line'} mr-1`}></i> {item.name}
-                      </Link>
-                      <span className={`group-badge ${item.isParent ? 'parent-badge' : 'child-badge'}`}>
-                        {item.isParent ? '一级分组' : '二级分组'}
-                      </span>
-                    </div>
-                  </td>
-                  <td>{item.code}</td>
-                  <td>
-                    <Link to={`/rule-groups/${item.id}/rules`} className="badge bg-primary text-white">
-                      {item.ruleCount}
-                    </Link>
-                    {item.subGroupCount > 0 && (
-                      <span className="text-secondary text-sm ml-1">
-                        | 子分组: {item.subGroupCount}
-                      </span>
-                    )}
-                  </td>
-                  <td>
-                    <StatusDot status={item.status === 'active' ? 'success' : 'error'} text={item.status === 'active' ? '启用' : '禁用'} />
-                  </td>
-                  <td>{item.createdAt}</td>
-                  <td>
-                    <button 
-                      className="ant-btn ant-btn-text ant-btn-sm text-primary"
-                      onClick={() => navigate(`/rule-groups/${item.id}`)}
-                    >
-                      <i className="ri-edit-line"></i> 编辑
-                    </button>
-                    <button 
-                      className="ant-btn ant-btn-text ant-btn-sm text-error"
-                      onClick={() => handleDeleteGroup(item.id)}
-                    >
-                      <i className="ri-delete-bin-line"></i> 删除
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+          </>
+        }
+        noActionDivider={true}
+      >
+        <SearchFilter
+          label="分组名称"
+          placeholder="请输入分组名称"
+          value={searchParams.get('name') || ''}
+          onSearch={handleNameSearch}
+          className="flex-1 min-w-[200px]"
+          instantSearch={true}
+        />
         
-        {/* 分页 */}
-        <div className="flex justify-between items-center mt-4">
-          <div className="text-sm text-secondary">
-            共 {groups.length} 条记录，每页显示 10 条
-          </div>
-          <div className="ant-pagination">
-            <button className="ant-pagination-item ant-pagination-prev" disabled>
-              <i className="ri-arrow-left-s-line"></i>
-            </button>
-            <button className="ant-pagination-item ant-pagination-item-active">1</button>
-            <button className="ant-pagination-item ant-pagination-next" disabled>
-              <i className="ri-arrow-right-s-line"></i>
-            </button>
-          </div>
-        </div>
+        <SearchFilter
+          label="分组编码"
+          placeholder="请输入分组编码"
+          value={searchParams.get('code') || ''}
+          onSearch={handleCodeSearch}
+          className="flex-1 min-w-[200px]"
+          instantSearch={true}
+        />
+        
+        <FilterSelect
+          label="状态"
+          name="status"
+          value={searchParams.get('status') || ''}
+          options={[
+            { value: "active", label: "启用" },
+            { value: "inactive", label: "禁用" }
+          ]}
+          onChange={handleStatusChange}
+          className="flex-1 min-w-[200px]"
+        />
+      </FilterPanel>
+      
+      {/* 数据表格 - 使用Table组件 */}
+      <Card bodyClassName="px-4 py-4">
+        <Table
+          columns={columns}
+          dataSource={processedData}
+          rowKey="id"
+          emptyText="暂无分组数据"
+          className="tree-table"
+        />
+        
+        {/* 分页 - 使用Pagination组件 */}
+        <Pagination
+          currentPage={1}
+          total={groups.length}
+          pageSize={10}
+          onChange={() => {}}
+          showTotal={true}
+        />
       </Card>
     </div>
   );