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:07:33 +08:00
parent 70d75c73dc
commit 3aa951a79f
1 changed files with 60 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,22 +4,25 @@
<n-space justify="space-between" align="center">
<div>
<h1 class="page-title">{{ job?.method || t('Scheduled Job Detail') }}</h1>
<p class="page-description">{{ t('View and manage scheduled job settings') }}</p>
</div>
<n-space>
<n-space :size="8">
<n-button
v-if="job"
:type="job.stopped ? 'success' : 'warning'"
type="default"
size="medium"
:disabled="loading"
@click="toggleJobStatus"
class="toolbar-btn execute-btn"
>
<template #icon>
<Icon icon="tabler:play" v-if="job.stopped" />
<Icon icon="tabler:pause" v-else />
<n-icon>
<Icon icon="tabler:play" v-if="job.stopped" />
<Icon icon="tabler:pause" v-else />
</n-icon>
</template>
{{ job.stopped ? t('Start Job') : t('Stop Job') }}
</n-button>
<n-button type="primary" @click="goBack">
<n-button type="default" size="medium" @click="goBack">
<template #icon>
<n-icon><Icon icon="tabler:arrow-left" /></n-icon>
</template>
@ -280,11 +283,6 @@ onMounted(() => {
margin: 0 0 8px 0;
}
.page-description {
font-size: 16px;
color: #6b7280;
margin: 0;
}
.loading {
display: flex;
@ -468,6 +466,57 @@ onMounted(() => {
font-size: 14px;
}
/* 工具栏按钮基础样式 - 与Local Ai Agent工具栏一致 */
.toolbar-btn {
background: #f3f4f6 !important;
color: #374151 !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 清除 Naive UI 按钮内部的边框元素，避免双重边框 */
.toolbar-btn :deep(.n-button__border),
.toolbar-btn :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
.toolbar-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.toolbar-btn:hover:not(:disabled) :deep(.n-button__border),
.toolbar-btn:hover:not(:disabled) :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
/* 执行按钮 - 绿色系（与Local Ai Agent执行按钮配色一致） */
.execute-btn {
background: #dcfce7 !important;
color: #166534 !important;
border-color: rgba(34, 197, 94, 0.2) !important;
}
.execute-btn:hover:not(:disabled) {
background: #bbf7d0 !important;
color: #15803d !important;
border-color: rgba(34, 197, 94, 0.3) !important;
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}
.toolbar-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.toolbar-btn:disabled :deep(.n-button__border),
.toolbar-btn:disabled :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
/* 响应式设计 */
@media (max-width: 768px) {
.properties-grid {