From 59b719376264aa7dad370e780ee6245a1023a138 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Wed, 14 Jan 2026 18:00:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=8A=B6=E6=80=81=E6=8C=87=E7=A4=BA=E5=99=A8?=
 =?UTF-8?q?=E5=92=8C=E8=BF=9B=E5=BA=A6=E4=BF=A1=E6=81=AF=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/TaskCenterDrawer.vue | 243 ++++++++++--------------
 1 file changed, 104 insertions(+), 139 deletions(-)

diff --git a/web/src/components/TaskCenterDrawer.vue b/web/src/components/TaskCenterDrawer.vue
index ce447f91..55110619 100644
--- a/web/src/components/TaskCenterDrawer.vue
+++ b/web/src/components/TaskCenterDrawer.vue
@@ -41,30 +41,33 @@
           :class="taskCardClasses(task)"
           @click="handleTaskCardClick(task)"
         >
+          <!-- 状态指示器 -->
+          <div class="task-card-status-indicator" :class="`status-${task.status}`">
+            <span class="status-dot"></span>
+            <span class="status-text">{{ statusLabel(task.status) }}</span>
+          </div>
+
           <div class="task-card-header">
             <div class="task-card-info">
               <div class="task-card-title">{{ task.name }}</div>
-              <div class="task-card-subtitle">
+              <div class="task-card-meta">
                 <span class="task-card-id">#{{ formatTaskId(task.id) }}</span>
                 <span class="task-card-type">{{ taskTypeLabel(task.type) }}</span>
-                <span class="task-card-id" v-if="getTaskDuration(task)">{{ getTaskDuration(task) }}</span>
+                <span v-if="getTaskDuration(task)" class="task-card-duration">{{ getTaskDuration(task) }}</span>
               </div>
             </div>
-            <a-tag :color="statusColor(task.status)" class="task-card-status">
-              {{ statusLabel(task.status) }}
-
-            </a-tag>
           </div>
 
+          <!-- 进度信息 -->
           <div v-if="!isTaskCompleted(task)" class="task-card-progress">
             <a-progress
               :percent="Math.round(task.progress || 0)"
               :status="progressStatus(task.status)"
-              :stroke-width="6"
-              />
-            <!-- <span class="task-card-progress-value">{{ Math.round(task.progress || 0) }}%</span> -->
+              :stroke-width="4"
+              :show-info="false"
+            />
+            <span class="progress-text">{{ Math.round(task.progress || 0) }}%</span>
           </div>
-
           <div v-if="task.message && !isTaskCompleted(task)" class="task-card-message">
             {{ task.message }}
           </div>
@@ -72,23 +75,23 @@
             {{ task.error }}
           </div>
 
+          <!-- 底部信息 -->
           <div class="task-card-footer">
-            <div class="task-card-timestamps">
-              <span v-if="task.started_at">开始: {{ formatTime(task.started_at) }}</span>
-              <span v-if="task.completed_at">完成: {{ formatTime(task.completed_at) }}</span>
-              <span v-if="!task.started_at">创建: {{ formatTime(task.created_at, 'short') }}</span>
+            <div class="task-card-times">
+              <span v-if="task.started_at">开始 {{ formatTime(task.started_at, 'short') }}</span>
+              <span v-if="task.completed_at">· 完成 {{ formatTime(task.completed_at, 'short') }}</span>
+              <span v-if="!task.started_at">创建 {{ formatTime(task.created_at, 'short') }}</span>
             </div>
             <div class="task-card-actions">
-              <a-button type="link" size="small" @click="handleDetail(task.id)" style="color: var(--gray-500);">
+              <a-button type="text" size="small" @click.stop="handleDetail(task.id)">
                 详情
               </a-button>
               <a-button
-                type="link"
+                type="text"
                 size="small"
                 danger
                 v-if="canCancel(task)"
-                :disabled="!canCancel(task)"
-                @click="handleCancel(task.id)"
+                @click.stop="handleCancel(task.id)"
               >
                 取消
               </a-button>
@@ -305,15 +308,6 @@ function isTaskCompleted(task) {
   return ['success', 'failed', 'cancelled'].includes(task.status)
 }
 
-function getCompletionIcon(status) {
-  const icons = {
-    success: '✓',
-    failed: '✗',
-    cancelled: '○'
-  }
-  return icons[status] || '?'
-}
-
 function statusLabel(status) {
   const map = {
     pending: '等待中',
@@ -400,85 +394,126 @@ function canCancel(task) {
 }
 
 .task-card {
-  background: var(--gray-25);
-  border: 1px solid var(--gray-100);
-  border-radius: 12px;
-  padding: 16px 18px;
+  background: #fff;
+  border: 1px solid var(--gray-200);
+  border-radius: 10px;
+  padding: 14px 16px;
   transition: all 0.2s ease;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  // box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  gap: 10px;
+  position: relative;
 }
 
 .task-card:hover {
-  border-color: var(--gray-200);;
+  border-color: var(--gray-300);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+/* 状态指示器 */
+.task-card-status-indicator {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-pending .status-dot { background: #3b82f6; }
+.status-pending .status-text { color: #3b82f6; }
+
+.status-queued .status-dot { background: #3b82f6; }
+.status-queued .status-text { color: #3b82f6; }
+
+.status-running .status-dot {
+  background: #10b981;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+.status-running .status-text { color: #10b981; }
+
+.status-success .status-dot { background: #10b981; }
+.status-success .status-text { color: #10b981; }
+
+.status-failed .status-dot { background: #ef4444; }
+.status-failed .status-text { color: #ef4444; }
+
+.status-cancelled .status-dot { background: #9ca3af; }
+.status-cancelled .status-text { color: #6b7280; }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(0.9); }
 }
 
 .task-card-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
+  padding-right: 80px; /* 为状态指示器留出空间 */
 }
 
 .task-card-info {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  min-width: 0;
+  gap: 5px;
 }
 
 .task-card-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--gray-900);
-  line-height: 1.3;
-  // word-break: break-word;
+  line-height: 1.4;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 
-.task-card-subtitle {
+.task-card-meta {
   display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
   font-size: 12px;
-  color: var(--gray-600);
+  color: var(--gray-500);
 }
 
 .task-card-id {
-  letter-spacing: 0.04em;
+  font-family: 'SF Mono', 'Monaco', monospace;
+  letter-spacing: 0.03em;
 }
 
 .task-card-type {
-  padding: 0 8px;
-  border-radius: 999px;
-  background-color: var(--gray-100);
-  color: var(--gray-500);
-  line-height: 20px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--gray-100);
+  font-size: 11px;
 }
 
-.task-card-status {
-  margin-top: 2px;
+.task-card-duration {
+  color: var(--gray-400);
 }
 
 .task-card-progress {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
 }
 
 .task-card-progress :deep(.ant-progress) {
   flex: 1;
 }
 
-.task-card-progress-value {
+.progress-text {
   font-size: 12px;
   font-weight: 500;
   color: var(--gray-500);
-  width: 48px;
+  min-width: 36px;
   text-align: right;
 }
 
@@ -501,105 +536,35 @@ function canCancel(task) {
 }
 
 .task-card-footer {
-  margin-top: 2px;
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
-  gap: 16px;
+  align-items: center;
+  padding-top: 4px;
+  border-top: 1px solid var(--gray-100);
 }
 
-.task-card-timestamps {
+.task-card-times {
   display: flex;
-  flex-direction: row;
-  gap: 10px;
+  gap: 6px;
   font-size: 12px;
   color: var(--gray-400);
 }
 
 .task-card-actions {
   display: flex;
-  gap: 6px;
+  gap: 2px;
 }
 
-.task-card-completion {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 14px;
-  border-radius: 8px;
-  background: var(--gray-25);
-  border: 1px solid var(--gray-100);
-}
-
-.completion-badge {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.completion-badge--success {
-  color: var(--color-success-500);
-}
-
-.completion-badge--success .completion-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  background: var(--color-success-50);
-  font-size: 14px;
-}
-
-.completion-badge--failed {
-  color: var(--color-error-500);
-}
-
-.completion-badge--failed .completion-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  background: var(--color-error-50);
-  font-size: 14px;
-}
-
-.completion-badge--cancelled {
-  color: var(--gray-500);
-}
-
-.completion-badge--cancelled .completion-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  background: var(--gray-50);
-  font-size: 14px;
-}
-
-.task-duration {
-  display: flex;
-  align-items: center;
-  gap: 6px;
+.task-card-actions :deep(.ant-btn) {
+  height: 28px;
+  padding: 0 10px;
   font-size: 12px;
   color: var(--gray-500);
 }
 
-.duration-label {
-  font-weight: 500;
-}
-
-.duration-value {
-  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
-  font-weight: 600;
-  color: var(--gray-600);
+.task-card-actions :deep(.ant-btn:hover) {
+  color: var(--gray-700);
+  background: var(--gray-50);
 }
 
 .task-empty {