style: 优化当事人信息卡片样式，改进布局与间距

chengmw

2026-04-03 d1034fc30e99091220ec867785e29e80be5c66b4

 web-app/src/contexts/CaseDataContext.jsx

@@ -143,9 +143,10 @@
              personId: item.personId,
              mediationId: item.mediationId,
              caseId: String(caseId), // 添加 caseId 字段用于轮询
              perTypeName: item.perTypeName || '', // 当事人类型名称（申请方当事人/被申请方当事人）
              perClassName: item.perClassName || '', // 添加人员类型名称
              trueName: item.trueName || '', // 添加真实姓名
              startTime: item.createdTime || item.start_time,
              startTime: item.createTime || item.createdTime || item.start_time, // 兼容 createTime 和 createdTime
              pollStartTime: Date.now(),
              retryCount: 0
            });
@@ -153,6 +154,7 @@
            failedJobs.push({
              personId: item.personId,
              message: item.message || '未知错误',
              perTypeName: item.perTypeName || '', // 当事人类型名称（申请方当事人/被申请方当事人）
              perClassName: item.perClassName || '', // 添加人员类型名称
              trueName: item.trueName || '', // 添加真实姓名
              errorCode: item.errorCode, // 添加错误码
@@ -163,19 +165,18 @@

        // 存储成功的任务到 localStorage
        if (successJobs.length > 0) {
          // 新任务发起时，先清除所有旧的成功任务（替换而不是追加）
          localStorage.setItem(OUTBOUND_JOBS_KEY, JSON.stringify(successJobs));
          console.log('存储外呼任务成功，数量:', successJobs.length);
          
          // 外呼成功后，清除对应的失败记录
          const storedFailedJobs = JSON.parse(localStorage.getItem(`${OUTBOUND_JOBS_KEY}_failed`) || '[]');
          if (storedFailedJobs.length > 0) {
            // 获取成功任务的 personId 列表
            const successPersonIds = successJobs.map(job => job.personId);
            // 过滤掉已成功的 personId 对应的失败记录
            const remainingFailedJobs = storedFailedJobs.filter(job => !successPersonIds.includes(job.personId));
            localStorage.setItem(`${OUTBOUND_JOBS_KEY}_failed`, JSON.stringify(remainingFailedJobs));
            console.log('外呼成功后清除失败记录，清除数量:', storedFailedJobs.length - remainingFailedJobs.length);
          }
          // 外呼成功后，清除所有失败记录（新任务开始时应清空旧记录）
          localStorage.removeItem(`${OUTBOUND_JOBS_KEY}_failed`);
          console.log('外呼成功后清除所有失败记录');
          
          // 触发自定义事件，通知 OutboundCallWidget 组件立即刷新
          setTimeout(() => {
            window.dispatchEvent(new CustomEvent('outbound-jobs-updated'));
          }, 300);
        }

        // 存储失败的任务到 localStorage（用于气泡显示）
@@ -368,32 +369,28 @@
        return;
      }

      EvidenceAPIService.processCaseFilesOcr(params.caseId).catch((ocrError) => {
        console.error('触发案件文件OCR失败:', ocrError);
      });

      try {
        await OutboundBotAPIService.syncStatusByCase({ caseId: params.caseId });
      } catch (syncError) {
        console.error('同步外呼状态失败:', syncError);
      }
      try {
        await OutboundBotAPIService.backfillConversationByCase({ caseId: params.caseId });
      } catch (backfillError) {
        console.error('回补通话记录失败:', backfillError);
      }

      // 调用API获取数据
      // 将URL中的auth_token转换为authorization传入API
      const response = await ProcessAPIService.getCaseProcessInfo(
        params.caseId,
        {
          caseTypeFirst: params.caseTypeFirst,
          platform_code: params.platform_code
          platform_code: params.platform_code,
          authorization: params.auth_token || params.authorization || ''
        }
      );

      // 提取timeline数据
      const timelineData = response.timeline || response.data?.timeline || response;
      
      // 调试日志：输出提取的timeline数据
      console.log('===== API数据提取 =====');
      console.log('原始response:', response);
      console.log('提取的timelineData:', timelineData);
      console.log('timelineData.mediation:', timelineData.mediation);
      console.log('timelineData.mediation?.state:', timelineData.mediation?.state);
      console.log('========================');
      
      // 提取nodes数据（确保为数组），兼容 nodeList 和 nodes 两种字段名
      const nodesData = response.data?.nodeList || response.data?.nodes || response.nodes || [];
@@ -419,7 +416,7 @@
      
      // 检查终态状态（调解成功/失败/人工接管），终态不执行外呼和存储
      const mediationState = timelineData.mediation?.state;
      const isTerminalState = [2, 3, 4].includes(mediationState);
      const isTerminalState = [2, 3, 4, 5].includes(mediationState);
      
      if (isTerminalState) {
        console.log('案件已处于终态状态:', mediationState, '，跳过外呼和存储');
@@ -436,15 +433,34 @@
      // 加载任务时间数据
      await loadTaskTime(timelineData);

       EvidenceAPIService.processCaseFilesOcr(params.caseId).catch((ocrError) => {
        console.error('触发案件文件OCR失败:', ocrError);
      });

      try {
        await OutboundBotAPIService.syncStatusByCase({ caseId: params.caseId });
      } catch (syncError) {
        console.error('同步外呼状态失败:', syncError);
      }
      try {
        await OutboundBotAPIService.backfillConversationByCase({ caseId: params.caseId });
      } catch (backfillError) {
        console.error('回补通话记录失败:', backfillError);
      }
      
      console.log('Case data loaded successfully:', timelineData);
    } catch (err) {
      console.error('Failed to load case data:', err);
      setError(err.message || '加载案件数据失败');
      
      // 显示错误提示
      message.error('加载案件数据失败，请稍后重试');
      message.error('加载案件数据失败，使用模拟数据');
      
      // 使用Mock数据（缓存数据不包含nodes，所以统一使用Mock）
      // 使用Mock数据作为降级方案
      const mockTimeline = mockTimelineData.data?.timeline || mockTimelineData;
      console.log('使用Mock数据降级:', mockTimeline);
      setCaseData(mockTimeline);
      setProcessNodes(mockTimelineData.data?.nodes || []);
      setHasLoaded(true);
      
    } finally {