style: 审批流程样式优化

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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;

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 && (