From b7656d4f77f32442ab986c82395707af5ec8ab01 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 1 Nov 2025 22:18:32 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96=E5=AE=9A=E6=97=B6=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E5=88=97=E8=A1=A8=E9=A1=B5=E5=92=8C=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E5=90=AF=E5=8A=A8=E5=81=9C=E6=AD=A2=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E7=9A=84=E7=8A=B6=E6=80=81=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scheduledJobs/ScheduledJobDetail.vue      | 28 ++++++++++++++++++-
 .../views/scheduledJobs/ScheduledJobList.vue  | 14 +++++++++-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobDetail.vue b/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobDetail.vue
index 9e16782..1621533 100644
--- a/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobDetail.vue
+++ b/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobDetail.vue
@@ -12,7 +12,7 @@
             size="medium"
             :disabled="loading" 
             @click="toggleJobStatus"
-            class="toolbar-btn execute-btn"
+            :class="['toolbar-btn', job.stopped ? 'execute-btn' : 'stop-btn']"
           >
             <template #icon>
               <n-icon>
@@ -506,6 +506,32 @@ onMounted(() => {
   box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
 }
 
+/* 停止按钮 - 红色系 */
+.toolbar-btn.stop-btn {
+  background: #fee2e2 !important;
+  color: #dc2626 !important;
+  border-color: rgba(239, 68, 68, 0.2) !important;
+}
+
+.toolbar-btn.stop-btn :deep(.n-button__border),
+.toolbar-btn.stop-btn :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+.toolbar-btn.stop-btn:hover:not(:disabled) {
+  background: #fecaca !important;
+  color: #b91c1c !important;
+  border-color: rgba(239, 68, 68, 0.3) !important;
+  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
+}
+
+.toolbar-btn.stop-btn:hover:not(:disabled) :deep(.n-button__border),
+.toolbar-btn.stop-btn:hover:not(:disabled) :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
 .toolbar-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
diff --git a/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobList.vue b/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobList.vue
index 32af924..6afa2c3 100644
--- a/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobList.vue
+++ b/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobList.vue
@@ -76,7 +76,7 @@
               </div>
               <div class="col-actions">
                 <button 
-                  class="action-btn start-btn" 
+                  :class="['action-btn', job.stopped ? 'start-btn' : 'stop-btn']" 
                   @click.stop="toggleJobStatus(job.name)" 
                   :title="job.stopped ? t('Start') : t('Stop')"
                 >
@@ -531,6 +531,18 @@ onMounted(() => {
   box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
 }
 
+/* 停止按钮 - 红色系 */
+.action-btn.stop-btn {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.action-btn.stop-btn:hover {
+  background: #fecaca;
+  color: #b91c1c;
+  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
+}
+
 .badge {
   background: #f3f4f6;
   color: #374151;