jingrowlocal/jingrow-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

定时任务列表页和详情页的状态复选框选中时改为显示红色背景

Browse Source
This commit is contained in:
jingrow 2025-11-01 22:24:39 +08:00
parent b7656d4f77
commit e7f0f3a30c
2 changed files with 54 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobDetail.vue
View File

@ -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 {

30
apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobList.vue
View File

@ -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 {