From a5a148d57efeb7ae9aad184faedb9c64c06f33ff Mon Sep 17 00:00:00 2001
From: root <root@DESKTOP-J0QK89R.localdomain>
Date: Thu, 26 Feb 2026 00:21:45 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=AE=A1=E6=89=B9=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 审批人标签：蓝色 (#1890ff)
- 抄送人标签：橙色 (#faad14)
- 已审批：绿色对号 ✓
- 待审批：蓝色时钟图标 ⏱ + 脉动动画
- 未开始：灰色序号

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/approval/detail.module.css | 35 ++++++++++++++++++-
 frontend/src/pages/approval/detail.tsx        | 18 +++++-----
 2 files changed, 43 insertions(+), 10 deletions(-)

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() {
           <Card title="当前审批" className={styles.section}>
             {currentApprovers.map((item, index) => {
               const typeLabel = item.nodeType === 'notify' ? '抄送人' : '审批人'
+              const typeClass = item.nodeType === 'notify' ? styles.typeNotify : ''
               return (
                 <div key={index} className={styles.approverItem}>
-                  <span className={styles.approverType}>{typeLabel}</span>
+                  <span className={`${styles.approverType} ${typeClass}`}>{typeLabel}</span>
                   <span className={styles.approverName}>{getNodeApproversNames(item.nodeId, item.nodeType)}</span>
                 </div>
               )
@@ -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 (
                   <div key={node.id} className={styles.timelineItem}>
-                    <div className={`${styles.timelineDot} ${nodeStatus === 'done' ? styles.done : ''} ${isCurrent ? styles.current : ''}`}>
-                      {nodeStatus === 'done' ? '✓' : index + 1}
+                    <div className={`${styles.timelineDot} ${styles[nodeStatus]} ${isCurrent ? styles.current : ''}`}>
+                      {nodeStatus === 'done' ? '✓' : nodeStatus === 'pending' ? '⏱' : index + 1}
                     </div>
                     <div className={styles.timelineContent}>
                       <div className={styles.timelineTitle}>
-                        <span className={styles.timelineType}>{typeLabel}</span>
+                        <span className={`${styles.timelineType} ${typeClass}`}>{typeLabel}</span>
                         <span className={styles.timelineName}>{displayName}</span>
                       </div>
                       {approvalTime && (