完成评查点分组列表和评查点列表的页面，封装部分组件，重新构造样式文件结构

app/routes/rule-groups._index.tsx

@@ -1,384 +1,336 @@
-import React from 'react';
-import { Link } from "@remix-run/react";
 import { json, type MetaFunction } from "@remix-run/node";
-import { useLoaderData, useNavigate } from "@remix-run/react";
+import { useLoaderData, Link, useNavigate } 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 stylesUrl from "~/styles/pages/rule-groups.css";
-// 引入CSS
-// export function links() {
-//   return [
-//     { rel: "stylesheet", href: stylesUrl }
-//   ];
-// }
-export const meta: MetaFunction = () => {
-  return [
-    { title: "中国烟草AI合同及卷宗审核系统 - 评查点分组列表" },
-    { name: "description", content: "评查点分组管理" }
-  ];
-};
-
-
-// 分组接口定义
+// 定义数据类型
 interface RuleGroup {
   id: string;
   name: string;
   code: string;
   ruleCount: number;
-  childGroupCount: number;
-  isActive: boolean;
-  parentId: string | null;
+  subGroupCount: number;
+  status: 'active' | 'inactive';
   createdAt: string;
-  level: 1 | 2; // 1-一级分组，2-二级分组
+  children?: RuleGroup[];
 }
 
-interface LoaderData {
-  groups: RuleGroup[];
+export const handle = {
+  breadcrumb: "评查点分组"
+};
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "评查点分组 - 中国烟草AI合同及卷宗审核系统" },
+    { name: "description", content: "管理评查点分组，包括创建、编辑和删除分组" },
+  ];
+};
+
+export function links() {
+  return [{ rel: "stylesheet", href: indexStyles }];
 }
 
+// 模拟数据
+const MOCK_GROUPS: RuleGroup[] = [
+  {
+    id: "1",
+    name: "合同基本要素检查",
+    code: "contract-base",
+    ruleCount: 18,
+    subGroupCount: 12,
+    status: "active",
+    createdAt: "2023-10-01 14:30",
+    children: [
+      {
+        id: "2",
+        name: "必备要素检查",
+        code: "essential-elements",
+        ruleCount: 7,
+        subGroupCount: 0,
+        status: "active",
+        createdAt: "2023-10-02 10:15",
+      },
+      {
+        id: "3",
+        name: "合同主体检查",
+        code: "contract-parties",
+        ruleCount: 5,
+        subGroupCount: 0,
+        status: "active",
+        createdAt: "2023-10-03 16:20",
+      }
+    ]
+  },
+  {
+    id: "4",
+    name: "销售合同专项检查",
+    code: "contract-sales",
+    ruleCount: 12,
+    subGroupCount: 5,
+    status: "active",
+    createdAt: "2023-10-05 09:30",
+    children: [
+      {
+        id: "6",
+        name: "付款条件检查",
+        code: "payment-terms",
+        ruleCount: 5,
+        subGroupCount: 0,
+        status: "active",
+        createdAt: "2023-10-05 14:45",
+      }
+    ]
+  },
+  {
+    id: "5",
+    name: "行政处罚规范性检查",
+    code: "punishment",
+    ruleCount: 8,
+    subGroupCount: 0,
+    status: "inactive",
+    createdAt: "2023-10-08 11:45",
+  }
+];
+
 export async function loader() {
-  // 模拟数据，实际项目中应该从API获取
-  const groups: RuleGroup[] = [
-    {
-      id: "1",
-      name: "合同基本要素检查",
-      code: "contract-base",
-      ruleCount: 18,
-      childGroupCount: 2,
-      isActive: true,
-      parentId: null,
-      createdAt: "2023-10-01 14:30",
-      level: 1
-    },
-    {
-      id: "2",
-      name: "必备要素检查",
-      code: "essential-elements",
-      ruleCount: 7,
-      childGroupCount: 0,
-      isActive: true,
-      parentId: "1",
-      createdAt: "2023-10-02 10:15",
-      level: 2
-    },
-    {
-      id: "3",
-      name: "合同主体检查",
-      code: "contract-parties",
-      ruleCount: 5,
-      childGroupCount: 0,
-      isActive: true,
-      parentId: "1",
-      createdAt: "2023-10-02 11:40",
-      level: 2
-    },
-    {
-      id: "4",
-      name: "销售合同专项检查",
-      code: "sales-contract",
-      ruleCount: 10,
-      childGroupCount: 2,
-      isActive: true,
-      parentId: null,
-      createdAt: "2023-10-03 09:20",
-      level: 1
-    },
-    {
-      id: "5",
-      name: "交付条款检查",
-      code: "delivery-terms",
-      ruleCount: 4,
-      childGroupCount: 0,
-      isActive: true,
-      parentId: "4",
-      createdAt: "2023-10-03 14:30",
-      level: 2
-    },
-    {
-      id: "6",
-      name: "付款条款检查",
-      code: "payment-terms",
-      ruleCount: 6,
-      childGroupCount: 0,
-      isActive: true,
-      parentId: "4",
-      createdAt: "2023-10-03 15:45",
-      level: 2
-    },
-    {
-      id: "7",
-      name: "采购合同专项检查",
-      code: "purchase-contract",
-      ruleCount: 8,
-      childGroupCount: 0,
-      isActive: true,
-      parentId: null,
-      createdAt: "2023-10-04 10:15",
-      level: 1
-    },
-    {
-      id: "8",
-      name: "行政处罚规范性检查",
-      code: "admin-punishment",
-      ruleCount: 12,
-      childGroupCount: 0,
-      isActive: false,
-      parentId: null,
-      createdAt: "2023-10-05 16:30",
-      level: 1
-    }
-  ];
-
-  return json<LoaderData>({ groups });
+  return json({ groups: MOCK_GROUPS });
 }
 
-export default function RuleGroupsPage() {
+export default function RuleGroupsIndex() {
   const { groups } = useLoaderData<typeof loader>();
   const navigate = useNavigate();
+  const [searchText, setSearchText] = useState("");
+  const [groupCode, setGroupCode] = useState("");
+  const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
   
-  // 过滤出父级分组和子级分组
-  const parentGroups = groups.filter(group => group.parentId === null);
-  
-  // 根据父级ID获取子分组
-  const getChildGroups = (parentId: string) => {
-    return groups.filter(group => group.parentId === parentId);
+  // 处理展开/收起
+  const toggleGroup = (groupId: string) => {
+    setExpandedGroups(prev => 
+      prev.includes(groupId) 
+        ? prev.filter(id => id !== groupId)
+        : [...prev, groupId]
+    );
   };
   
-  // 模拟删除操作
-  const handleDelete = (id: string) => {
-    if (window.confirm("确定要删除该分组吗？删除后无法恢复，且会删除该分组下的所有评查点。")) {
-      alert(`删除分组: ${id}`);
-    }
+  // 展开/收起全部
+  const toggleAll = (expand: boolean) => {
+    setExpandedGroups(expand ? groups.map(g => g.id) : []);
   };
   
-  // 创建新分组
-  const handleCreate = () => {
-    navigate("/rule-groups/new");
-  };
-  
-  // 展开/收起状态（实际项目中可以使用useState管理）
-  const toggleExpand = (groupId: string) => {
-    const childRows = document.querySelectorAll(`.child-of-${groupId}`);
-    childRows.forEach(row => {
-      (row as HTMLElement).style.display = 
-        (row as HTMLElement).style.display === "none" ? "table-row" : "none";
-    });
-    
-    // 切换图标
-    const icon = document.querySelector(`span.expand-icon[data-group-id="${groupId}"] i`);
-    if (icon) {
-      icon.classList.toggle("ri-arrow-down-s-line");
-      icon.classList.toggle("ri-arrow-right-s-line");
+  // 处理删除分组
+  const handleDeleteGroup = (groupId: string) => {
+    if (confirm("确定要删除该分组吗？此操作将同时删除该分组下的所有评查点，且不可恢复。")) {
+      console.log('删除分组ID:', groupId);
+      // 实际应用中，这里会调用API删除数据
     }
   };
 
-  // 键盘处理器
-  const handleKeyDown = (e: React.KeyboardEvent, groupId: string) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      toggleExpand(groupId);
-    }
+  // 处理搜索名称
+  const handleNameSearch = (value: string) => {
+    setSearchText(value);
+    // 实际项目中这里可能需要调用API或过滤本地数据
   };
-  
+
+  // 处理搜索编码
+  const handleCodeSearch = (value: string) => {
+    setGroupCode(value);
+    // 实际项目中这里可能需要调用API或过滤本地数据
+  };
+
+  // 处理表格数据，包括父子级关系
+  const processedData = groups.flatMap(group => {
+    // 先添加父级分组
+    const result: (RuleGroup & { isParent?: boolean, parentId?: string })[] = [
+      { ...group, isParent: true }
+    ];
+    
+    // 如果有子级分组并且当前已展开，则添加子级分组
+    if (group.children && expandedGroups.includes(group.id)) {
+      group.children.forEach(child => {
+        result.push({ ...child, parentId: group.id });
+      });
+    }
+    
+    return result;
+  });
+
   return (
-    <div className="p-6">
-      {/* 页面标识 */}
-      <div className="mb-4 p-3 bg-blue-100 border border-blue-300 rounded text-blue-800">
-        <h3 className="font-bold text-lg">当前页面: 评查点分组列表 (rule-groups._index.tsx)</h3>
-        <p>如果你看到这个提示，说明你已成功到达评查点分组列表页面。</p>
-        <div className="mt-2">
-          <a href="/debug" className="text-blue-600 hover:underline">查看路由诊断页面</a> | 
-          <a href="/" className="ml-2 text-blue-600 hover:underline">返回首页</a>
-        </div>
-      </div>
-      
+    <div className="content-container rule-groups-page">
       {/* 页面头部 */}
       <div className="flex justify-between items-center mb-4">
         <h2 className="text-xl font-medium">评查点分组管理</h2>
         <div className="flex">
-          <Button type="default" className="mr-2" icon="ri-arrow-down-s-line"
-                  onClick={() => document.querySelectorAll(".child-row").forEach(row => (row as HTMLElement).style.display = "table-row")}>
+          <Button
+            type="default"
+            icon="ri-arrow-down-s-line"
+            onClick={() => toggleAll(true)}
+            className="mr-2"
+          >
             展开全部
           </Button>
-          <Button type="default" className="mr-2" icon="ri-arrow-up-s-line"
-                  onClick={() => document.querySelectorAll(".child-row").forEach(row => (row as HTMLElement).style.display = "none")}>
+          <Button
+            type="default"
+            icon="ri-arrow-up-s-line"
+            onClick={() => toggleAll(false)}
+            className="mr-2"
+          >
             收起全部
           </Button>
-          <Button type="primary" icon="ri-add-line" onClick={handleCreate}>
+          <Button
+            type="primary"
+            icon="ri-add-line"
+            onClick={() => navigate("/rule-groups/new")}
+          >
             新增分组
           </Button>
         </div>
       </div>
       
       {/* 搜索栏 */}
-      <div className="card mb-4">
-        <div className="card-body">
-          <div className="flex flex-wrap items-end gap-4">
-            <div className="flex-1 min-w-[200px]">
-              <label htmlFor="groupName" className="form-label">分组名称</label>
-              <input type="text" id="groupName" className="form-input" placeholder="请输入分组名称" />
-            </div>
-            <div className="flex-1 min-w-[200px]">
-              <label htmlFor="groupCode" className="form-label">分组编码</label>
-              <input type="text" id="groupCode" className="form-input" placeholder="请输入分组编码" />
-            </div>
-            <div className="flex-1 min-w-[200px]">
-              <label htmlFor="groupStatus" className="form-label">状态</label>
-              <select id="groupStatus" className="form-select">
-                <option value="">全部</option>
-                <option value="true">启用</option>
-                <option value="false">禁用</option>
-              </select>
-            </div>
-            <div className="flex items-center">
-              <Button type="default" className="mr-2" icon="ri-refresh-line">
-                重置
-              </Button>
-              <Button type="primary" icon="ri-search-line">
-                搜索
-              </Button>
-            </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">
+              重置
+            </Button>
+            <Button type="primary" icon="ri-search-line">
+              搜索
+            </Button>
           </div>
         </div>
-      </div>
+      </Card>
       
       {/* 数据表格 */}
-      <div className="card">
-        <div className="card-body">
-          <div className="overflow-x-auto">
-            <table className="table tree-table">
-              <thead>
-                <tr>
-                  <th style={{ width: "400px" }}>分组名称</th>
-                  <th>分组编码</th>
-                  <th>评查点数量</th>
-                  <th>状态</th>
-                  <th>创建时间</th>
-                  <th style={{ width: "180px" }}>操作</th>
-                </tr>
-              </thead>
-              <tbody>
-                {parentGroups.map(parent => (
-                  <React.Fragment key={parent.id}>
-                    {/* 一级分组 */}
-                    <tr className="group-row parent-row" data-group-id={parent.id}>
-                      <td>
-                        <div className="flex items-center">
-                          <span 
-                            className="expand-icon" 
-                            data-group-id={parent.id}
-                            onClick={() => toggleExpand(parent.id)}
-                            onKeyDown={(e) => handleKeyDown(e, parent.id)}
-                            role="button"
-                            tabIndex={0}
-                            aria-label="展开/收起"
-                          >
-                            <i className="ri-arrow-down-s-line text-primary"></i>
-                          </span>
-                          <Link 
-                            to={`/rules?groupId=${parent.id}`} 
-                            className="text-primary hover:underline flex items-center ml-1"
-                          >
-                            <i className="ri-folder-line mr-1"></i> {parent.name}
-                          </Link>
-                          <span className="group-badge parent-badge">一级分组</span>
-                        </div>
-                      </td>
-                      <td>{parent.code}</td>
-                      <td>
-                        <Link to={`/rules?groupId=${parent.id}`} className="badge bg-primary text-white">
-                          {parent.ruleCount}
-                        </Link>
-                        {parent.childGroupCount > 0 && (
-                          <span className="text-secondary text-sm ml-1">
-                            | 子分组: {parent.childGroupCount}
-                          </span>
-                        )}
-                      </td>
-                      <td>
-                        <span className={`status-dot ${parent.isActive ? 'status-success' : 'status-error'}`}></span>
-                        {parent.isActive ? '启用' : '禁用'}
-                      </td>
-                      <td>{parent.createdAt}</td>
-                      <td className="py-3 px-2 text-center">
-                        <Button 
-                          type="default"
-                          size="small"
-                          className="text-primary mr-2"
-                          icon="ri-edit-line"
-                          onClick={() => navigate(`/rule-groups/${parent.id}/edit`)}
+      <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);
+                            }
+                          }}
                         >
-                          编辑
-                        </Button>
-                        <Button 
-                          type="danger"
-                          size="small"
-                          icon="ri-delete-bin-line"
-                          onClick={() => handleDelete(parent.id)}
-                        >
-                          删除
-                        </Button>
-                      </td>
-                    </tr>
-                    
-                    {/* 二级分组 */}
-                    {getChildGroups(parent.id).map(child => (
-                      <tr 
-                        key={child.id} 
-                        className={`group-row child-row child-of-${parent.id}`} 
-                        data-parent-id={parent.id} 
-                        data-group-id={child.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"
                       >
-                        <td>
-                          <div className="flex items-center ml-8">
-                            <Link 
-                              to={`/rules?groupId=${child.id}`} 
-                              className="text-primary hover:underline flex items-center"
-                            >
-                              <i className="ri-file-list-line mr-1"></i> {child.name}
-                            </Link>
-                            <span className="group-badge child-badge">二级分组</span>
-                          </div>
-                        </td>
-                        <td>{child.code}</td>
-                        <td>
-                          <Link to={`/rules?groupId=${child.id}`} className="badge bg-primary text-white">
-                            {child.ruleCount}
-                          </Link>
-                        </td>
-                        <td>
-                          <span className={`status-dot ${child.isActive ? 'status-success' : 'status-error'}`}></span>
-                          {child.isActive ? '启用' : '禁用'}
-                        </td>
-                        <td>{child.createdAt}</td>
-                        <td className="py-3 px-2 text-center">
-                          <Button 
-                            type="default"
-                            size="small"
-                            className="text-primary mr-2"
-                            icon="ri-edit-line"
-                            onClick={() => navigate(`/rule-groups/${child.id}/edit`)}
-                          >
-                            编辑
-                          </Button>
-                          <Button 
-                            type="danger"
-                            size="small"
-                            icon="ri-delete-bin-line"
-                            onClick={() => handleDelete(child.id)}
-                          >
-                            删除
-                          </Button>
-                        </td>
-                      </tr>
-                    ))}
-                  </React.Fragment>
-                ))}
-              </tbody>
-            </table>
+                        <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>
+        
+        {/* 分页 */}
+        <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>
-      </div>
+      </Card>
     </div>
   );
 }