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:18:32 +08:00
parent 7c02b6d09c
commit b7656d4f77
2 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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