From 8451e7df22a58af5c9063dad3c9919c3b899edf5 Mon Sep 17 00:00:00 2001
From: shimai <shimai@example.com>
Date: Tue, 21 Apr 2026 09:30:42 +0800
Subject: [PATCH] feat:增加节点推进倒计时弹窗
---
web-app/src/components/common/OutboundCallWidget.jsx | 243 ++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 214 insertions(+), 29 deletions(-)
diff --git a/web-app/src/components/common/OutboundCallWidget.jsx b/web-app/src/components/common/OutboundCallWidget.jsx
index 7e18d32..8342991 100644
--- a/web-app/src/components/common/OutboundCallWidget.jsx
+++ b/web-app/src/components/common/OutboundCallWidget.jsx
@@ -34,13 +34,18 @@
const [calls, setCalls] = useState([]);
const [mediationRecords, setMediationRecords] = useState([]); // AI调解记录
const [aiProcessingTasks, setAiProcessingTasks] = useState([]); // AI处理中任务
+ const [countdownInfo, setCountdownInfo] = useState(null); // 下一节点外呼倒计时
const isMountedRef = useRef(true);
+ // 使用 ref 跟踪 isVisible，避免 useCallback 依赖 isVisible 导致轮询 useEffect 级联重建
+ const isVisibleRef = useRef(isVisible);
+ useEffect(() => { isVisibleRef.current = isVisible; }, [isVisible]);
+
// 轮询间隔（毫秒）
- const POLL_INTERVAL = 2000; // 2秒
+ const POLL_INTERVAL = 2000;
// 节点数据轻量刷新间隔（毫秒）—— 与主轮询对齐，避免节点进度延迟
- const NODE_REFRESH_INTERVAL = 2000; // 2秒
+ const NODE_REFRESH_INTERVAL = 2000;
// 最大重试次数
const MAX_RETRY_COUNT = 10;
@@ -50,6 +55,26 @@
// 获取 mediationId
const mediationId = caseData?.mediation?.id;
+
+ // 本地倒计时定时器：每秒递减 remaining_seconds，避免仅依赖轮询导致的跳动
+ useEffect(() => {
+ if (!countdownInfo || countdownInfo.remaining_seconds <= 0) return;
+ const timer = setInterval(() => {
+ setCountdownInfo(prev => {
+ if (!prev) return null;
+ const next = prev.remaining_seconds - 1;
+ if (next <= 0) return null; // 倒计时结束，清除
+ return { ...prev, remaining_seconds: next };
+ });
+ }, 1000);
+ return () => clearInterval(timer);
+ }, [countdownInfo?.remaining_seconds > 0]); // 仅在倒计时存在时启动
+
+ // 组件挂载/卸载生命周期（独立管理，不受轮询依赖变化影响）
+ useEffect(() => {
+ isMountedRef.current = true;
+ return () => { isMountedRef.current = false; };
+ }, []);
// 加载AI调解记录（无Loading效果）
const loadMediationRecords = useCallback(async () => {
@@ -213,6 +238,36 @@
};
/**
+ * 查询下一节点外呼倒计时
+ */
+ const fetchCountdownInfo = useCallback(async () => {
+ if (!mediationId) return;
+ try {
+ const response = await OutboundBotAPIService.getNextNodeCountdown({ mediation_id: mediationId });
+ const data = response?.data;
+ if (data && data.countdown && data.remaining_seconds > 0) {
+ if (isMountedRef.current) {
+ setCountdownInfo({
+ remaining_seconds: data.remaining_seconds,
+ next_node_name: data.next_node_name || '',
+ delay_seconds: data.delay_seconds || 0,
+ });
+ // 倒计时存在时显示悬浮窗
+ if (!isVisibleRef.current) {
+ setIsVisible(true);
+ }
+ }
+ } else {
+ if (isMountedRef.current) {
+ setCountdownInfo(null);
+ }
+ }
+ } catch (e) {
+ console.warn('[Widget] 查询倒计时失败:', e);
+ }
+ }, [mediationId]);
+
+ /**
* 查询通话状态
*/
const fetchCallStatus = useCallback(async () => {
@@ -259,7 +314,7 @@
// 没有活跃任务，更新状态并返回
if (isMountedRef.current) {
setCalls([...failedJobs]);
- if (failedJobs.length > 0 && !isVisible) {
+ if (failedJobs.length > 0 && !isVisibleRef.current) {
setIsVisible(true);
}
}
@@ -361,11 +416,11 @@
if (isMountedRef.current) {
setCalls(allJobs);
// 如果有任务，显示气泡
- if (allJobs.length > 0 && !isVisible) {
+ if (allJobs.length > 0 && !isVisibleRef.current) {
setIsVisible(true);
}
}
- }, [isVisible, triggerPageUpdate, mediationId]);
+ }, [triggerPageUpdate, mediationId]);
// 记录上一次 AI 处理任务数，用于检测 "处理中→完成" 变化
const prevAiTaskCountRef = useRef(0);
@@ -388,7 +443,7 @@
}
// 如果有 AI 处理中任务，确保悬浮窗可见
- if (tasks.length > 0 && !isVisible) {
+ if (tasks.length > 0 && !isVisibleRef.current) {
setIsVisible(true);
}
}
@@ -396,31 +451,46 @@
// 不影响主流程，静默失败
console.warn('[Widget] 查询AI处理状态失败:', e);
}
- }, [mediationId, isVisible, refreshNodeData]);
+ }, [mediationId, refreshNodeData]);
- // 定时轮询通话状态
+ // 使用 ref 持有最新回调，供轮询定时器调用，避免 setInterval 闭包捕获过期函数
+ const fetchCallStatusRef = useRef(fetchCallStatus);
+ const loadMediationRecordsRef = useRef(loadMediationRecords);
+ const fetchAiProcessingStatusRef = useRef(fetchAiProcessingStatus);
+ const fetchCountdownInfoRef = useRef(fetchCountdownInfo);
+ useEffect(() => { fetchCallStatusRef.current = fetchCallStatus; }, [fetchCallStatus]);
+ useEffect(() => { loadMediationRecordsRef.current = loadMediationRecords; }, [loadMediationRecords]);
+ useEffect(() => { fetchAiProcessingStatusRef.current = fetchAiProcessingStatus; }, [fetchAiProcessingStatus]);
+ useEffect(() => { fetchCountdownInfoRef.current = fetchCountdownInfo; }, [fetchCountdownInfo]);
+
+ // 定时轮询通话状态（仅依赖 mediationId，避免回调引用变化导致定时器反复重建）
useEffect(() => {
- // 组件挂载时设置为 true
- isMountedRef.current = true;
+ // mediationId 尚未就绪时不启动轮询，等待 caseData 加载完毕
+ if (!mediationId) {
+ console.log('[Widget] mediationId 未就绪，延迟启动轮询');
+ return;
+ }
+
+ console.log('[Widget] 启动轮询, mediationId:', mediationId);
// 初始加载
- fetchCallStatus();
- loadMediationRecords(); // 初始加载调解记录
-
- // AI 处理状态初始加载
- fetchAiProcessingStatus();
+ fetchCallStatusRef.current();
+ loadMediationRecordsRef.current();
+ fetchAiProcessingStatusRef.current();
+ fetchCountdownInfoRef.current();
- // 设置轮询定时器（10秒间隔）
+ // 设置轮询定时器（通过 ref 调用最新回调，避免闭包过期）
const interval = setInterval(() => {
- fetchCallStatus();
- loadMediationRecords(); // 每10秒加载一次AI调解记录
- fetchAiProcessingStatus(); // 每10秒查询AI处理状态
+ fetchCallStatusRef.current();
+ loadMediationRecordsRef.current();
+ fetchAiProcessingStatusRef.current();
+ fetchCountdownInfoRef.current();
}, POLL_INTERVAL);
// 监听外呼任务更新事件（立即刷新）
const handleOutboundJobsUpdated = () => {
console.log('收到外呼任务更新事件，立即刷新');
- fetchCallStatus();
+ fetchCallStatusRef.current();
};
window.addEventListener('outbound-jobs-updated', handleOutboundJobsUpdated);
@@ -437,12 +507,12 @@
// 清理函数
return () => {
+ console.log('[Widget] 清理轮询定时器');
clearInterval(interval);
window.removeEventListener('outbound-jobs-updated', handleOutboundJobsUpdated);
window.removeEventListener('mediation-terminated', handleMediationTerminated);
- isMountedRef.current = false;
};
- }, [fetchCallStatus, loadMediationRecords, fetchAiProcessingStatus]);
+ }, [mediationId]); // 仅在 mediationId 变化时重建轮询
// 独立定时器：周期性轻量刷新 timeline + processNodes（不依赖闭包变量，避免过期状态问题）
useEffect(() => {
@@ -498,8 +568,8 @@
return true;
});
- // 如果没有活跃任务且没有AI处理中任务且不可见，不渲染任何内容
- if (activeCalls.length === 0 && aiProcessingTasks.length === 0 && !isVisible) {
+ // 如果没有活跃任务且没有AI处理中任务且没有倒计时且不可见，不渲染任何内容
+ if (activeCalls.length === 0 && aiProcessingTasks.length === 0 && !countdownInfo && !isVisible) {
return null;
}
@@ -538,8 +608,8 @@
color: 'white',
}}
/>
- {/* 红点提示有通话或AI处理中 */}
- {(activeCalls.length + aiProcessingTasks.length) > 0 && (
+ {/* 红点提示有通话、AI处理中或倒计时 */}
+ {(activeCalls.length + aiProcessingTasks.length + (countdownInfo ? 1 : 0)) > 0 && (
<div
style={{
position: 'absolute',
@@ -548,7 +618,7 @@
width: 16,
height: 16,
borderRadius: '50%',
- background: aiProcessingTasks.length > 0 ? '#722ED1' : '#ff4d4f',
+ background: countdownInfo ? '#FA8C16' : aiProcessingTasks.length > 0 ? '#722ED1' : '#ff4d4f',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -557,7 +627,7 @@
fontWeight: 'bold',
}}
>
- {activeCalls.length + aiProcessingTasks.length}
+ {activeCalls.length + aiProcessingTasks.length + (countdownInfo ? 1 : 0)}
</div>
)}
</div>
@@ -704,6 +774,121 @@
</div>
))}
+ {/* 下一节点外呼倒计时卡片 */}
+ {countdownInfo && countdownInfo.remaining_seconds > 0 && (
+ <div
+ style={{
+ background: 'linear-gradient(135deg, #FA8C16 0%, #D46B08 100%)',
+ borderRadius: 12,
+ padding: '16px 20px',
+ color: 'white',
+ boxShadow: '0 4px 16px rgba(250, 140, 22, 0.3)',
+ position: 'relative',
+ minWidth: 280,
+ }}
+ >
+ {/* 关闭按钮 */}
+ <button
+ onClick={handleClose}
+ style={{
+ position: 'absolute',
+ top: 8,
+ right: 8,
+ width: 24,
+ height: 24,
+ borderRadius: '50%',
+ border: 'none',
+ background: 'rgba(255,255,255,0.2)',
+ color: 'white',
+ cursor: 'pointer',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ fontSize: 14,
+ transition: 'all 0.2s ease',
+ }}
+ onMouseEnter={(e) => {
+ e.currentTarget.style.background = 'rgba(255,255,255,0.3)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.background = 'rgba(255,255,255,0.2)';
+ }}
+ >
+ <i className="fas fa-times" />
+ </button>
+
+ {/* 头部 */}
+ <div
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ gap: 10,
+ marginBottom: 12,
+ }}
+ >
+ <div
+ style={{
+ width: 36,
+ height: 36,
+ borderRadius: '50%',
+ background: 'rgba(255,255,255,0.2)',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }}
+ >
+ <i className="fas fa-hourglass-half" style={{ fontSize: 18, animation: 'pulse 2s infinite' }} />
+ </div>
+ <div style={{ flex: 1 }}>
+ <div
+ style={{
+ fontSize: 16,
+ fontWeight: 600,
+ display: 'flex',
+ alignItems: 'center',
+ gap: 8,
+ }}
+ >
+ 下一节点外呼准备中
+ <span
+ style={{
+ width: 8,
+ height: 8,
+ borderRadius: '50%',
+ background: '#FFC069',
+ animation: 'pulse 2s infinite',
+ }}
+ />
+ </div>
+ </div>
+ </div>
+
+ {/* 倒计时信息 */}
+ <div style={{ marginBottom: 10 }}>
+ <div style={{ fontSize: 14, opacity: 0.95, lineHeight: 1.6 }}>
+ <span>即将进入：{countdownInfo.next_node_name || '下一节点'}</span>
+ </div>
+ </div>
+
+ {/* 倒计时显示 */}
+ <div
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ gap: 6,
+ fontSize: 13,
+ opacity: 0.9,
+ }}
+ >
+ <i className="far fa-clock" />
+ <span>
+ {Math.floor(countdownInfo.remaining_seconds / 60)}分
+ {String(countdownInfo.remaining_seconds % 60).padStart(2, '0')}秒后发起外呼
+ </span>
+ </div>
+ </div>
+ )}
+
{/* AI 处理中加载态卡片 */}
{aiProcessingTasks.map((task, index) => (
<div
@@ -794,7 +979,7 @@
))}
{/* 无通话时的占位提示 */}
- {activeCalls.length === 0 && aiProcessingTasks.length === 0 && isVisible && (
+ {activeCalls.length === 0 && aiProcessingTasks.length === 0 && !countdownInfo && isVisible && (
<div
style={{
background: 'linear-gradient(135deg, #1A6FB8 0%, #0d4a8a 100%)',
--
Gitblit v1.8.0