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

app/components/layout/Layout.tsx

@@ -34,7 +34,7 @@ export function Layout({ children }: LayoutProps) {
       <div className={`main-content ${sidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
         {/* <Header username="系统管理员" /> */}
         <div className="content-container">
-          <Breadcrumb className="px-6 pt-4" />
+          <Breadcrumb />
           {children}
         </div>
       </div>

app/components/layout/Sidebar.tsx

@@ -58,17 +58,23 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
           icon: 'ri-folder-open-line'
         },
         {
-          id: 'rule-list',
+          id: 'rules-list',
           title: '评查点列表',
           path: '/rules',
           icon: 'ri-list-check-3'
         },
-        // {
-        //   id: 'rule-new',
-        //   title: '新增评查点',
-        //   path: '/rules/new',
-        //   icon: 'ri-add-circle-line'
-        // }
+        {
+          id: 'rules-file',
+          title: '评查文件列表',
+          path: '/rules/files',
+          icon: 'ri-list-check-2'
+        },
+        {
+          id: 'rule-new',
+          title: '新增评查点',
+          path: '/rules/new',
+          icon: 'ri-add-circle-line'
+        }
       ]
     },
     {
@@ -125,9 +131,12 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
   }, []);
   
   const toggleMenu = (id: string, e: React.MouseEvent) => {
+    // 防止事件冒泡和默认行为
     e.preventDefault();
     e.stopPropagation();
     
+    // console.log('%c父菜单展开/折叠 ===> ', 'background: #f5222d; color: white; padding: 2px 4px; border-radius: 2px;', id);
+    
     setExpandedMenus(prev => ({
       ...prev,
       [id]: !prev[id]
@@ -140,11 +149,19 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
   
   // 处理侧边栏切换事件
   const handleToggleSidebar = (e: React.MouseEvent) => {
+    // console.log('%c侧边栏折叠/展开 ===> ', 'background: #1890ff; color: white; padding: 2px 4px; border-radius: 2px;');
     e.preventDefault();
     e.stopPropagation();
     onToggle();
   };
   
+  // 处理子菜单项点击事件
+  const handleSubMenuClick = (child: MenuItem, e: React.MouseEvent) => {
+    // 需要阻止冒泡，否则会触发父级菜单的展开/折叠事件
+    e.stopPropagation();
+    // console.log('%c子菜单点击 ===> ', 'background: #00684a; color: white; padding: 2px 4px; border-radius: 2px;', child.title, '路径:', child.path);
+  };
+  
   return (
     <div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
       <div className="py-6 px-4 border-b border-gray-100 flex justify-between items-center">
@@ -181,6 +198,10 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
               <Link
                 to={item.path}
                 className={`sidebar-menu-item ${isActive(item.path) ? 'active' : ''} flex items-center ${collapsed ? 'justify-center' : ''}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  // console.log('%c单级菜单点击 ===> ', 'background: #52c41a; color: white; padding: 2px 4px; border-radius: 2px;', item.title, '路径:', item.path);
+                }}
               >
                 <i className={`${item.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
                 {!collapsed && <span>{item.title}</span>}
@@ -188,8 +209,11 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
             ) : (
               <>
                 <div 
-                  className={`sidebar-menu-item flex items-center ${collapsed ? 'justify-center' : 'justify-between'} cursor-pointer`}
-                  onClick={(e) => toggleMenu(item.id, e)}
+                  className={`sidebar-menu-item flex items-center ${collapsed ? 'justify-center' : 'justify-between'} cursor-pointer z-10`}
+                  onClick={(e) => {
+                    // console.log('%c父菜单点击 ===> ', 'background: #722ed1; color: white; padding: 2px 4px; border-radius: 2px;', item.title);
+                    toggleMenu(item.id, e);
+                  }}
                   role="button"
                   tabIndex={0}
                   aria-expanded={expandedMenus[item.id] || false}
@@ -212,7 +236,7 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
                 
                 {(expandedMenus[item.id] || collapsed) && (
                   <div 
-                    className={`${collapsed ? 'border-l-0 pl-0' : 'border-l border-gray-100 ml-4 pl-3'}`}
+                    className={`submenu-container ${collapsed ? 'border-l-0 pl-0' : 'border-l border-gray-100 ml-4 pl-3'} z-20`}
                     id={`submenu-${item.id}`}
                   >
                     {item.children.map((child) => (
@@ -220,6 +244,7 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
                         key={child.id}
                         to={child.path}
                         className={`sidebar-menu-item ${isActive(child.path) ? 'active' : ''} flex items-center ${collapsed ? 'justify-center' : ''}`}
+                        onClick={(e) => handleSubMenuClick(child, e)}
                       >
                         <i className={`${child.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
                         {!collapsed && <span>{child.title}</span>}