From d1034fc30e99091220ec867785e29e80be5c66b4 Mon Sep 17 00:00:00 2001
From: chengmw <chengmingwei_1984122@126.com>
Date: Fri, 03 Apr 2026 10:40:00 +0800
Subject: [PATCH] style: 优化当事人信息卡片样式，改进布局与间距
---
web-app/src/components/dashboard/FloatingControlPanel.jsx | 47 +++++++++++++++++++++++++++++------------------
1 files changed, 29 insertions(+), 18 deletions(-)
diff --git a/web-app/src/components/dashboard/FloatingControlPanel.jsx b/web-app/src/components/dashboard/FloatingControlPanel.jsx
index 093ba6d..c3f5001 100644
--- a/web-app/src/components/dashboard/FloatingControlPanel.jsx
+++ b/web-app/src/components/dashboard/FloatingControlPanel.jsx
@@ -107,9 +107,15 @@
const { formattedTime } = useTaskTimer(taskStartTime, isTaskTimeFallback);
// 生成状态文本
- const statusText = state === 1
- ? `调解进行中-阶段${orderNo}：${nodeName}`
- : (translateMediationState(state) || '调解进行中');
+ const getStatusText = () => {
+ const stateNum = Number(state);
+ if (stateNum === 1) {
+ return `调解进行中-阶段${orderNo}：${nodeName}`;
+ }
+ return translateMediationState(state) || '调解进行中';
+ };
+
+ const statusText = getStatusText();
// ==================== 状态控制按钮逻辑 ====================
@@ -182,6 +188,12 @@
setControlConfirmVisible(false);
setRemark('');
setControlAction(null);
+
+ // 如果是终止操作，触发事件关闭外呼气泡
+ if (controlAction === 'terminate') {
+ window.dispatchEvent(new CustomEvent('mediation-terminated'));
+ console.log('调解终止，触发外呼气泡关闭事件');
+ }
refreshData();
} catch (error) {
@@ -291,17 +303,9 @@
return (
<button
- className="floating-control-btn"
+ className={`state-control-btn ${isTerminate ? 'state-control-btn--terminate' : 'state-control-btn--resume'}`}
onClick={handleControlButtonClick}
disabled={controlLoading}
- style={{
- ...(isTerminate ? {
- background: '#1A6FB8',
- } : {
- background: '#52c41a',
- }),
- ...(controlLoading ? { opacity: 0.6, cursor: 'not-allowed' } : {})
- }}
>
{controlLoading ? (
<><i className="fas fa-spinner fa-spin"></i>处理中...</>
@@ -316,14 +320,21 @@
* 渲染控制区域（按钮或印章）
*/
const renderControlAction = () => {
+ const stateNum = Number(state);
+
// 终态状态（调解成功/失败/人工接管）：显示印章
- if (TERMINAL_STATES.includes(state) || state === TAKEOVER_STATE) {
- return <TakeoverStamp state={state} />;
+ if (TERMINAL_STATES.includes(stateNum) || stateNum === TAKEOVER_STATE) {
+ return <TakeoverStamp state={stateNum} />;
}
- // 已终止状态(5)：只显示恢复按钮
- if (Number(state) === PAUSED_STATE) {
- return renderStateControlButton();
+ // 已终止/暂停状态(5)：显示恢复按钮和人工接管按钮
+ if (stateNum === PAUSED_STATE) {
+ return (
+ <>
+ {renderStateControlButton()}
+ <TakeoverButton loading={takeoverLoading} onClick={handleTakeover} />
+ </>
+ );
}
// 调解中(1)：显示终止按钮和人工接管按钮
@@ -340,7 +351,7 @@
<div className="floating-control-panel">
<div className="control-status">
<div className="status-indicator">
- <span className="status-dot"></span>
+ <span className="status-dot" style={Number(state) === 5 ? { background: '#e63946' } : {}}></span>
<span className="status-text">
{statusText}{' '}
<span style={{ color: 'gray' }}>
--
Gitblit v1.8.0