添加新的骨架屏，将评查点列表和评查文件列表，文档列表进行数据分类

app/components/layout/Layout.tsx

@@ -6,7 +6,7 @@ import { useMatches, useLocation } from '@remix-run/react';
 import type { UserRole } from '~/root';
 
 // 定义应用模块类型
-type AppModule = 'contract' | 'record' | 'model';
+type AppModule = 'contract' | 'record' | 'model' | '';
 
 // 应用模块与reviewType的映射
 const REVIEW_TYPE_TO_APP: Record<string, AppModule> = {
@@ -34,7 +34,7 @@ interface Match {
 
 export function Layout({ children, userRole = 'developer' }: LayoutProps) {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  const [selectedApp, setSelectedApp] = useState<AppModule>('contract');
+  const [selectedApp, setSelectedApp] = useState<AppModule>('');
   const matches = useMatches() as Match[];
   const location = useLocation();
   
@@ -102,6 +102,7 @@ export function Layout({ children, userRole = 'developer' }: LayoutProps) {
   
   return (
     <div className="layout-container">
+      {/* 侧边栏始终保留，不再使用条件渲染 */}
       <Sidebar 
         collapsed={sidebarCollapsed} 
         onToggle={toggleSidebar} 

app/components/layout/Sidebar.tsx

@@ -40,24 +40,42 @@ const APP_ICON_MAP: Record<string, string> = {
   'model': 'ri-robot-2-fill'
 };
 
-export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract' }: SidebarProps) {
+export function Sidebar({ onToggle, collapsed, userRole, selectedApp = '' }: SidebarProps) {
   const location = useLocation();
   const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({});
-  const [currentApp, setCurrentApp] = useState<string>(selectedApp);
+  const [currentApp, setCurrentApp] = useState<string>('');  // 初始设置为空字符串而不是selectedApp
+  const [isLoading, setIsLoading] = useState<boolean>(true); // 添加加载状态
   const navigate = useNavigate();
 
   // 组件挂载后从 sessionStorage 读取初始 reviewType
   useEffect(() => {
+    let mounted = true;
+    setIsLoading(true); // 设置加载状态
+    
     try {
       const reviewType = sessionStorage.getItem('reviewType');
       // console.log('初始 reviewType:', reviewType);
-      if (reviewType) {
+      if (reviewType && mounted) {
         setCurrentApp(reviewType);
+      } else if (selectedApp && mounted) {
+        // 如果没有reviewType，但有selectedApp，使用selectedApp
+        setCurrentApp(selectedApp);
       }
     } catch (error) {
       console.error('读取 reviewType 失败:', error);
+    } finally {
+      // 使用setTimeout确保状态在DOM更新后再变化，避免闪烁
+      setTimeout(() => {
+        if (mounted) {
+          setIsLoading(false); // 数据加载完成
+        }
+      }, 0);
     }
-  }, []);
+    
+    return () => {
+      mounted = false;
+    };
+  }, [selectedApp]);
 
   // 从 sessionStorage 获取 reviewType 并设置当前应用模块
   useEffect(() => {
@@ -78,23 +96,44 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
 
   // 监听路由变化，重新检查 reviewType
   useEffect(() => {
+    let mounted = true;
+    
     try {
       const reviewType = sessionStorage.getItem('reviewType');
-      // console.log('路由变化, 检查 reviewType:', reviewType, '路径:', location.pathname);
-      if (reviewType) {
+      // 只有当reviewType变化时才设置加载状态和更新currentApp
+      if (reviewType && reviewType !== currentApp && mounted) {
+        setIsLoading(true); // 路由变化时设置加载状态
         setCurrentApp(reviewType);
+        // 使用setTimeout确保状态在DOM更新后再变化，避免闪烁
+        setTimeout(() => {
+          if (mounted) {
+            setIsLoading(false);
+          }
+        }, 0);
       }
     } catch (error) {
       console.error('路由变化时读取 reviewType 失败:', error);
+      if (mounted) {
+        setIsLoading(false);
+      }
     }
-  }, [location.pathname]);
+    
+    return () => {
+      mounted = false;
+    };
+  }, [location.pathname, currentApp]);
 
   // 监听 selectedApp 属性变化
   useEffect(() => {
-    if (selectedApp) {
+    if (selectedApp && selectedApp !== currentApp) {
+      setIsLoading(true); // 设置加载状态
       setCurrentApp(selectedApp);
+      // 使用setTimeout确保状态在DOM更新后再变化，避免闪烁
+      setTimeout(() => {
+        setIsLoading(false); // 数据加载完成
+      }, 0);
     }
-  }, [selectedApp]);
+  }, [selectedApp, currentApp]);
 
   const menuItems: MenuItem[] = [
     {
@@ -270,6 +309,7 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
 
   // 获取当前应用模式下应显示的菜单ID列表
   const visibleMenuIds = APP_MENU_MAP[currentApp as keyof typeof APP_MENU_MAP] || APP_MENU_MAP['contract'];
+  // const visibleMenuIds = APP_MENU_MAP[currentApp as keyof typeof APP_MENU_MAP]
   // console.log('当前应用模式:', currentApp, '可见菜单ID:', visibleMenuIds);
 
   // 根据用户角色和当前应用模式过滤菜单项
@@ -319,80 +359,105 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
       {!collapsed && (
         <div className="px-4 py-3 border-b border-gray-100">
           <div className="flex items-center text-green-700">
-            <i className={`${APP_ICON_MAP[currentApp] || 'ri-file-list-2-fill'} mr-2 text-xl`}></i>
-            <span className="font-medium">{APP_NAME_MAP[currentApp] || '合同管理'}</span>
+            {isLoading ? (
+              // 加载中状态，只显示加载图标，保留布局
+              <div className="flex items-center">
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-green-700 mr-2"></div>
+                <span className="font-medium text-gray-500">加载中...</span>
+              </div>
+            ) : (
+              <>
+                <i className={`${APP_ICON_MAP[currentApp] || ''} mr-2 text-xl`}></i>
+                <span className="font-medium">{APP_NAME_MAP[currentApp] || ''}</span>
+              </>
+            )}
           </div>
         </div>
       )}
 
       <div className="py-4 px-[10px]">
-        {filteredMenuItems.map((item) => (
-          <div key={item.id} className={`${collapsed ? 'px-0' : ''}`}>
-            {!item.children ? (
-              <Link
-                to={item.path}
-                className={`sidebar-menu-item ${isActive(item.path) ? 'active' : ''} flex items-center ${collapsed ? 'justify-center' : ''}`}
-                onClick={(e) => {
-                  // 只阻止冒泡，不阻止默认行为
-                  e.stopPropagation();
-                  // console.log('单级菜单点击:', item.title, '路径:', item.path);
-                }}
-              >
-                <i className={`${item.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
-                {!collapsed && <span>{item.title}</span>}
-              </Link>
-            ) : (
-              <>
-                <div
-                  className={`sidebar-menu-item flex items-center ${collapsed ? 'justify-center' : 'justify-between'} cursor-pointer z-10`}
+        {isLoading ? (
+          // 加载中状态显示，保留菜单布局结构
+          <div className="py-2">
+            {Array(5).fill(0).map((_, index) => (
+              <div key={index} className="sidebar-menu-item-skeleton mb-2">
+                <div className="flex items-center">
+                  <div className="bg-gray-200 rounded-md h-5 w-5 mr-3 animate-pulse"></div>
+                  {!collapsed && <div className="bg-gray-200 rounded-md h-4 w-24 animate-pulse"></div>}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          // 数据加载完成后显示菜单
+          filteredMenuItems.map((item) => (
+            <div key={item.id} className={`${collapsed ? 'px-0' : ''}`}>
+              {!item.children ? (
+                <Link
+                  to={item.path}
+                  className={`sidebar-menu-item ${isActive(item.path) ? 'active' : ''} flex items-center ${collapsed ? 'justify-center' : ''}`}
                   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}
-                  aria-controls={`submenu-${item.id}`}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                      e.preventDefault();
-                      toggleMenu(item.id, e as unknown as React.MouseEvent);
-                    }
+                    // 只阻止冒泡，不阻止默认行为
+                    e.stopPropagation();
+                    // console.log('单级菜单点击:', item.title, '路径:', item.path);
                   }}
                 >
-                  <div className="flex items-center">
-                    <i className={`${item.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
-                    {!collapsed && <span>{item.title}</span>}
-                  </div>
-                  {!collapsed && (
-                    <i className={`ri-arrow-${expandedMenus[item.id] ? 'down' : 'right'}-s-line`}></i>
-                  )}
-                </div>
-
-                {(expandedMenus[item.id] || collapsed) && (
+                  <i className={`${item.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
+                  {!collapsed && <span>{item.title}</span>}
+                </Link>
+              ) : (
+                <>
                   <div
-                    className={`submenu-container ${collapsed ? 'border-l-0 pl-0' : 'border-l border-gray-100 ml-4 pl-3'} z-20`}
-                    id={`submenu-${item.id}`}
+                    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}
+                    aria-controls={`submenu-${item.id}`}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        toggleMenu(item.id, e as unknown as React.MouseEvent);
+                      }
+                    }}
                   >
-                    {item.children
-                      .filter(child => !child.requiredRole || child.requiredRole === userRole)
-                      .map((child) => (
-                        <Link
-                          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>}
-                        </Link>
-                      ))}
+                    <div className="flex items-center">
+                      <i className={`${item.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
+                      {!collapsed && <span>{item.title}</span>}
+                    </div>
+                    {!collapsed && (
+                      <i className={`ri-arrow-${expandedMenus[item.id] ? 'down' : 'right'}-s-line`}></i>
+                    )}
                   </div>
-                )}
-              </>
-            )}
-          </div>
-        ))}
+
+                  {(expandedMenus[item.id] || collapsed) && (
+                    <div
+                      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
+                        .filter(child => !child.requiredRole || child.requiredRole === userRole)
+                        .map((child) => (
+                          <Link
+                            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>}
+                          </Link>
+                        ))}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          ))
+        )}
       </div>
     </div>
   );