From e7f0f3a30c161a9d019b8a00a2c95761f55a549f Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 1 Nov 2025 22:24:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9A=E6=97=B6=E4=BB=BB=E5=8A=A1=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5=E5=92=8C=E8=AF=A6=E6=83=85=E9=A1=B5=E7=9A=84?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=A4=8D=E9=80=89=E6=A1=86=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E6=97=B6=E6=94=B9=E4=B8=BA=E6=98=BE=E7=A4=BA=E7=BA=A2=E8=89=B2?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scheduledJobs/ScheduledJobDetail.vue      | 32 ++++++++++++++++---
 .../views/scheduledJobs/ScheduledJobList.vue  | 30 ++++++++++++++---
 2 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobDetail.vue b/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobDetail.vue
index 1621533..da698e1 100644
--- a/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobDetail.vue
+++ b/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobDetail.vue
@@ -53,8 +53,10 @@
               <label>{{ t('Status') }}</label>
               <div class="status-display">
                 <n-checkbox v-model:checked="job.stopped" @update:checked="handleStatusChange">
-                  {{ job.stopped ? t('Stopped') : t('Running') }}
                 </n-checkbox>
+                <span :class="['status-badge', job.stopped ? 'stopped' : 'running']">
+                  {{ job.stopped ? t('Stopped') : t('Running') }}
+                </span>
               </div>
             </div>
             <div class="property-item">
@@ -352,23 +354,45 @@ onMounted(() => {
 
 .status-display {
   padding: 8px 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 将checkbox选中状态（已停止）的背景改为红色 */
+.status-display :deep(.n-checkbox--checked .n-checkbox-box) {
+  background-color: #ef4444 !important;
+  border-color: #ef4444 !important;
+}
+
+.status-display :deep(.n-checkbox--checked .n-checkbox-box:hover) {
+  background-color: #dc2626 !important;
+  border-color: #dc2626 !important;
+}
+
+.status-display :deep(.n-checkbox--checked .n-checkbox-box__border) {
+  border-color: #ef4444 !important;
 }
 
 .status-badge {
-  padding: 4px 8px;
+  padding: 4px 10px;
   border-radius: 6px;
   font-size: 12px;
   font-weight: 500;
+  display: inline-block;
+  white-space: nowrap;
 }
 
 .status-badge.running {
-  background: #d1fae5;
-  color: #065f46;
+  background: #dcfce7;
+  color: #166534;
+  border: 1px solid rgba(34, 197, 94, 0.2);
 }
 
 .status-badge.stopped {
   background: #fee2e2;
   color: #dc2626;
+  border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
 .status-badge.enabled {
diff --git a/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobList.vue b/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobList.vue
index 6afa2c3..a7b081e 100644
--- a/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobList.vue
+++ b/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobList.vue
@@ -67,8 +67,10 @@
               </div>
               <div class="col-status">
                 <n-checkbox v-model:checked="job.stopped" @update:checked="() => handleStatusChange(job)">
-                  {{ job.stopped ? t('Stopped') : t('Running') }}
                 </n-checkbox>
+                <span :class="['status-badge', job.stopped ? 'stopped' : 'running']">
+                  {{ job.stopped ? t('Stopped') : t('Running') }}
+                </span>
               </div>
               <div class="col-last-execution">
                 <span v-if="job.last_execution" class="datetime-text">{{ formatDateTime(job.last_execution) }}</span>
@@ -475,6 +477,22 @@ onMounted(() => {
 .col-status {
   display: flex;
   align-items: center;
+  gap: 8px;
+}
+
+/* 将checkbox选中状态（已停止）的背景改为红色 */
+.col-status :deep(.n-checkbox--checked .n-checkbox-box) {
+  background-color: #ef4444 !important;
+  border-color: #ef4444 !important;
+}
+
+.col-status :deep(.n-checkbox--checked .n-checkbox-box:hover) {
+  background-color: #dc2626 !important;
+  border-color: #dc2626 !important;
+}
+
+.col-status :deep(.n-checkbox--checked .n-checkbox-box__border) {
+  border-color: #ef4444 !important;
 }
 
 .col-last-execution {
@@ -553,20 +571,24 @@ onMounted(() => {
 }
 
 .status-badge {
-  padding: 4px 8px;
+  padding: 4px 10px;
   border-radius: 6px;
   font-size: 12px;
   font-weight: 500;
+  display: inline-block;
+  white-space: nowrap;
 }
 
 .status-badge.running {
-  background: #d1fae5;
-  color: #065f46;
+  background: #dcfce7;
+  color: #166534;
+  border: 1px solid rgba(34, 197, 94, 0.2);
 }
 
 .status-badge.stopped {
   background: #fee2e2;
   color: #dc2626;
+  border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
 .list-pagination {