diff --git a/frontend/src/pages/approval/detail.module.css b/frontend/src/pages/approval/detail.module.css index 8887cd9..1f2013a 100644 --- a/frontend/src/pages/approval/detail.module.css +++ b/frontend/src/pages/approval/detail.module.css @@ -81,12 +81,16 @@ .approverType { font-size: 13px; color: #fff; - background: #666; + background: #1890ff; padding: 2px 8px; border-radius: 4px; flex-shrink: 0; } +.approverType.typeNotify { + background: #faad14; +} + .formData { display: flex; flex-direction: column; @@ -194,6 +198,18 @@ font-weight: 600; } +.timelineDot.waiting { + background: #f0f0f0; + color: #ccc; +} + +.timelineDot.pending { + background: #1890ff; + color: #fff; + box-shadow: 0 0 0 4px rgba(24, 144, 255, 0.2); + animation: pulse 1.5s ease-in-out infinite; +} + .timelineDot.done { background: #52c41a; color: #fff; @@ -205,6 +221,15 @@ box-shadow: 0 0 0 4px rgba(24, 144, 255, 0.2); } +@keyframes pulse { + 0%, 100% { + box-shadow: 0 0 0 4px rgba(24, 144, 255, 0.2); + } + 50% { + box-shadow: 0 0 0 8px rgba(24, 144, 255, 0.1); + } +} + .timelineDotIcon { font-size: 14px; } @@ -231,6 +256,14 @@ flex-shrink: 0; } +.timelineType.typeApprover { + background: #1890ff; +} + +.timelineType.typeNotify { + background: #faad14; +} + .timelineName { color: #666; font-size: 14px; diff --git a/frontend/src/pages/approval/detail.tsx b/frontend/src/pages/approval/detail.tsx index bffef9c..9a58cce 100644 --- a/frontend/src/pages/approval/detail.tsx +++ b/frontend/src/pages/approval/detail.tsx @@ -333,9 +333,10 @@ export default function ApprovalDetail() { {currentApprovers.map((item, index) => { const typeLabel = item.nodeType === 'notify' ? '抄送人' : '审批人' + const typeClass = item.nodeType === 'notify' ? styles.typeNotify : '' return (
- {typeLabel} + {typeLabel} {getNodeApproversNames(item.nodeId, item.nodeType)}
) @@ -375,17 +376,16 @@ export default function ApprovalDetail() { const hasApproved = records.length > 0 // 判断节点状态 - let nodeStatus: 'pending' | 'done' = 'pending' + let nodeStatus: 'pending' | 'waiting' | 'done' = 'waiting' if (hasApproved) { nodeStatus = 'done' - } else if (!isCurrent && index > 0) { - const prevNode = detail.flow.nodes[index - 1] - const prevRecord = detail.records.find((r) => r.node_id === prevNode.id) - if (prevRecord) nodeStatus = 'done' + } else if (isCurrent) { + nodeStatus = 'pending' } // 获取节点类型标签 const typeLabel = node.type === 'notify' ? '抄送人' : '审批人' + const typeClass = node.type === 'notify' ? styles.typeNotify : styles.typeApprover // 获取显示名称和审批时间 let displayName = node.name || '待定' @@ -398,12 +398,12 @@ export default function ApprovalDetail() { return (
-
- {nodeStatus === 'done' ? '✓' : index + 1} +
+ {nodeStatus === 'done' ? '✓' : nodeStatus === 'pending' ? '⏱' : index + 1}
- {typeLabel} + {typeLabel} {displayName}
{approvalTime && (