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

2025-06-04 17:31:10 +08:00
parent bbc074eeec
commit 8fbf915656
17 changed files with 537 additions and 275 deletions
@@ -114,7 +114,7 @@ export default function ChatMessage({
                            className="question-button text-left"
                            onClick={() => {
                                // 这里可以添加点击建议问题的处理逻辑
-                                console.log('Suggested question clicked:', question);
+                                // console.log('Suggested question clicked:', question);
                            }}
                        >
                            {question}
@@ -59,7 +59,7 @@ export default function Chat() {
    } = useChatMessage({
        onUpdateConversationList: updateConversationInList,
        onConversationIdChange: async (conversationId: string) => {
-            console.log('🔄 收到会话ID变更通知:', conversationId);
+            // console.log('🔄 收到会话ID变更通知:', conversationId);

            // 设置当前会话ID（这会触发localStorage更新）
            setCurrConversationId(conversationId, CHAT_CONFIG.APP_ID);
@@ -67,7 +67,7 @@ export default function Chat() {
            // 如果是新会话，添加到会话列表
            const existingConversation = conversationList.find(item => item.id === conversationId);
            if (!existingConversation) {
-                console.log('🆕 添加新会话到列表:', conversationId);
+                // console.log('🆕 添加新会话到列表:', conversationId);
                const newConversation = {
                    id: conversationId,
                    name: '新对话',
@@ -78,7 +78,7 @@ export default function Chat() {

                // 检查是否需要自动重命名（新对话的第一条消息）
                if (!newConversationFirstMessageSent.has(conversationId)) {
-                    console.log('🏷️ 新对话第一条消息，准备自动重命名:', conversationId);
+                    // console.log('🏷️ 新对话第一条消息，准备自动重命名:', conversationId);

                    // 标记该对话已发送第一条消息
                    setNewConversationFirstMessageSent(prev => new Set(prev).add(conversationId));
@@ -88,7 +88,7 @@ export default function Chat() {
                        try {
                            if (sidebarRef.current) {
                                await sidebarRef.current.autoRename(conversationId);
-                                console.log('✅ 新对话自动重命名完成:', conversationId);
+                                // console.log('✅ 新对话自动重命名完成:', conversationId);
                            } else {
                                console.warn('⚠️ 侧边栏引用不可用，无法自动重命名');
                            }
@@ -170,7 +170,7 @@ export default function Chat() {
            return;
        }

-        console.log('🔄 处理会话切换:', { currConversationId, isNewConversation });
+        // console.log('🔄 处理会话切换:', { currConversationId, isNewConversation });

        // 更新当前会话的输入
        let notSyncToStateIntroduction = '';
@@ -193,11 +193,11 @@ export default function Chat() {
        // 更新当前会话的聊天列表
        if (!isNewConversation && !conversationIdChangeBecauseOfNew && !isResponding) {
            try {
-                console.log('📨 获取会话历史消息:', currConversationId);
+                // console.log('📨 获取会话历史消息:', currConversationId);

                // 调用API获取历史消息
                const response = await fetchChatList(currConversationId);
-                console.log('📋 历史消息响应:', response);
+                // console.log('📋 历史消息响应:', response);

                if (response && (response as any).data) {
                    const { data: historyMessages } = response as any;
@@ -226,7 +226,7 @@ export default function Chat() {
                        });
                    });

-                    console.log('✅ 设置历史聊天列表:', newChatList.length, '条消息');
+                    // console.log('✅ 设置历史聊天列表:', newChatList.length, '条消息');
                    setChatList(newChatList);
                } else {
                    console.warn('⚠️ 获取历史消息失败或无数据');
@@ -251,7 +251,7 @@ export default function Chat() {
     * 处理会话ID变化
     */
    const handleConversationIdChange = (id: string) => {
-        console.log('🔄 会话ID变化:', { id, currentId: currConversationId });
+        // console.log('🔄 会话ID变化:', { id, currentId: currConversationId });

        if (id === '-1') {
            createNewChat();
@@ -352,7 +352,7 @@ export default function Chat() {
     * 处理会话删除后的状态更新
     */
    const handleConversationDeleted = (conversationId: string) => {
-        console.log('🗑️ 处理会话删除后的状态更新:', conversationId);
+        // console.log('🗑️ 处理会话删除后的状态更新:', conversationId);

        // 如果删除的是当前会话，切换到新会话
        if (conversationId === currConversationId) {
@@ -362,19 +362,19 @@ export default function Chat() {
        // 从列表中移除会话
        removeConversationFromList(conversationId);

-        console.log('✅ 会话删除状态更新完成:', conversationId);
+        // console.log('✅ 会话删除状态更新完成:', conversationId);
    };

    /**
     * 处理会话重命名后的状态更新
     */
    const handleConversationRenamed = (conversationId: string, newName: string) => {
-        console.log('✏️ 处理会话重命名后的状态更新:', { conversationId, newName });
+        // console.log('✏️ 处理会话重命名后的状态更新:', { conversationId, newName });

        // 更新本地会话列表中的名称
        updateConversationInList(conversationId, { name: newName });

-        console.log('✅ 会话重命名状态更新完成:', conversationId, '->', newName);
+        // console.log('✅ 会话重命名状态更新完成:', conversationId, '->', newName);
    };

    /**
@@ -397,7 +397,7 @@ export default function Chat() {
                    fetchAppParams()
                ]);

-                console.log('📋 获取到的数据:', { conversationData, appParams });
+                // console.log('📋 获取到的数据:', { conversationData, appParams });

                // 处理会话数据
                const conversations = (conversationData as any).data || [];
@@ -410,8 +410,8 @@ export default function Chat() {
                const _conversationId = getConversationIdFromStorage(CHAT_CONFIG.APP_ID);
                const isNotNewConversation = conversations.some((item: ConversationItem) => item.id === _conversationId);

-                console.log('💾 本地存储的会话ID:', _conversationId);
-                console.log('🔍 是否为已存在的会话:', isNotNewConversation);
+                // console.log('💾 本地存储的会话ID:', _conversationId);
+                // console.log('🔍 是否为已存在的会话:', isNotNewConversation);

                // 获取新会话信息
                const { user_input_form, opening_statement: introduction } = (appParams as any).data || {};
@@ -432,7 +432,7 @@ export default function Chat() {

                // 如果存在有效的会话ID，则设置为当前会话
                if (isNotNewConversation) {
-                    console.log('🎯 设置当前会话ID:', _conversationId);
+                    // console.log('🎯 设置当前会话ID:', _conversationId);
                    setCurrConversationId(_conversationId, CHAT_CONFIG.APP_ID, false);
                } else {
                    // 如果localStorage为空或会话不存在，自动创建新会话
@@ -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} 
@@ -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>
  );
@@ -1564,8 +1564,8 @@ export function ReviewSettings({
                  }}
                >
                  <option value="deepseek">DeepSeek</option>
-                  <option value="qwen72b">Qwen72B-VL</option>
-                  <option value="qwen14b">Qwen14B</option>
+                  {/* <option value="qwen72b">Qwen72B-VL</option> */}
+                  {/* <option value="qwen14b">Qwen14B</option> */}
                </select>
              </div>
              <div>
@@ -0,0 +1,128 @@
+// import React from 'react';
+
+interface SkeletonBarProps {
+  width?: string;
+  height?: string;
+  className?: string;
+}
+
+// 基础骨架条
+export function SkeletonBar({ width = 'w-full', height = 'h-5', className = '' }: SkeletonBarProps) {
+  return (
+    <div className={`${width} ${height} bg-gray-200 rounded-md animate-pulse ${className}`}></div>
+  );
+}
+
+// 通用骨架屏
+export function SkeletonScreen() {
+  return (
+    <div className="flex flex-col gap-4">
+      <SkeletonBar height="h-10" />
+      <SkeletonBar height="h-10" />
+      <SkeletonBar height="h-10" />
+    </div>
+  );
+}
+
+// 数字统计骨架
+export function NumberSkeleton({ className = '' }: { className?: string }) {
+  return (
+    <SkeletonBar width="w-12" height="h-5" className={className} />
+  );
+}
+
+// 表格行骨架屏
+interface TableRowSkeletonProps {
+  count?: number;
+  className?: string;
+}
+
+export function TableRowSkeleton({ count = 5, className = '' }: TableRowSkeletonProps) {
+  return (
+    <div className={`py-2 ${className}`}>
+      {Array(count).fill(0).map((_, index) => (
+        <div key={index} className="flex items-center p-4 border-b border-gray-100">
+          <div className="w-[30%] flex">
+            <SkeletonBar width="w-10" height="h-10" />
+            <div className="ml-2">
+              <SkeletonBar width="w-48" className="mb-2" />
+              <SkeletonBar width="w-32" height="h-3" />
+            </div>
+          </div>
+          <div className="w-[12%]">
+            <SkeletonBar width="w-20" height="h-6" />
+          </div>
+          <div className="w-[12%]">
+            <SkeletonBar width="w-24" className="mb-1" />
+            <SkeletonBar width="w-16" height="h-3" />
+          </div>
+          <div className="w-[12%]">
+            <SkeletonBar width="w-16" height="h-5" className="mb-1" />
+            <SkeletonBar width="w-16" height="h-5" />
+          </div>
+          <div className="w-[20%]">
+            <SkeletonBar width="w-32" className="mb-1" />
+            <SkeletonBar width="w-24" />
+          </div>
+          <div className="w-[14%]">
+            <SkeletonBar width="w-16" height="h-8" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// 自定义列宽的表格行骨架屏
+interface CustomTableRowSkeletonProps {
+  count?: number;
+  columns: Array<{
+    width: string;
+    rows?: Array<{
+      width: string;
+      height?: string;
+      className?: string;
+    }>;
+  }>;
+  className?: string;
+}
+
+export function CustomTableRowSkeleton({ count = 5, columns, className = '' }: CustomTableRowSkeletonProps) {
+  return (
+    <div className={`py-2 ${className}`}>
+      {Array(count).fill(0).map((_, rowIndex) => (
+        <div key={rowIndex} className="flex items-center p-4 border-b border-gray-100">
+          {columns.map((column, colIndex) => (
+            <div key={colIndex} className={`${column.width}`}>
+              {column.rows ? (
+                column.rows.map((row, rowIdx) => (
+                  <SkeletonBar 
+                    key={rowIdx} 
+                    width={row.width} 
+                    height={row.height || 'h-4'} 
+                    className={`${rowIdx < column.rows!.length - 1 ? 'mb-1' : ''} ${row.className || ''}`} 
+                  />
+                ))
+              ) : (
+                <SkeletonBar width="w-full" />
+              )}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// 加载指示器
+export function LoadingIndicator({ text = '正在加载数据...' }: { text?: string }) {
+  return (
+    <div className="py-4 flex justify-center items-center">
+      <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-green-700 mr-2"></div>
+      <span className="text-sm text-gray-500">{text}</span>
+    </div>
+  );
+}
+
+
+