更新任务队列详情页工具栏图标
This commit is contained in:
parent
7e6821f807
commit
95a2f2d5a2
@ -1,33 +1,53 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<!-- 二级操作栏 -->
|
||||
<div class="secondary-bar">
|
||||
<div class="left-actions">
|
||||
<button class="btn btn-outline" @click="goBack">
|
||||
<i class="fa fa-arrow-left"></i> {{ t('Back') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="job && (job.status === 'started' || job.status === 'queued')"
|
||||
class="btn btn-warning"
|
||||
@click="stopJob"
|
||||
:disabled="stopping"
|
||||
>
|
||||
<i :class="stopping ? 'fa fa-spinner fa-spin' : 'fa fa-stop'"></i> {{ t('Stop Job') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="job"
|
||||
class="btn btn-danger"
|
||||
@click="deleteJob"
|
||||
:disabled="deleting"
|
||||
>
|
||||
<i :class="deleting ? 'fa fa-spinner fa-spin' : 'fa fa-trash'"></i> {{ t('Delete Job') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="right-actions">
|
||||
<button class="btn btn-primary" @click="refresh" :disabled="loading">
|
||||
<i :class="loading ? 'fa fa-spinner fa-spin' : 'fa fa-refresh'"></i> {{ t('Refresh') }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- 页面头部 - 与pagetype详情页保持一致 -->
|
||||
<div class="page-header">
|
||||
<n-space justify="space-between" align="center">
|
||||
<div>
|
||||
<h1 class="page-title">{{ job ? (job.job_name || job.job_id) : t('Job Details') }}</h1>
|
||||
</div>
|
||||
<n-space align="center">
|
||||
<!-- 刷新按钮 -->
|
||||
<n-button
|
||||
type="default"
|
||||
size="medium"
|
||||
@click="refresh"
|
||||
:disabled="loading || !job"
|
||||
:title="t('Refresh')"
|
||||
class="header-action-btn"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Icon icon="tabler:refresh" />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
|
||||
<!-- 删除按钮 -->
|
||||
<n-button
|
||||
type="default"
|
||||
size="medium"
|
||||
@click="deleteJob"
|
||||
:disabled="loading || !job || deleting"
|
||||
:title="t('Delete')"
|
||||
class="header-action-btn delete-btn"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Icon icon="tabler:trash" />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
|
||||
<!-- 返回按钮 -->
|
||||
<n-button type="default" size="medium" @click="goBack" :disabled="loading">
|
||||
<template #icon>
|
||||
<n-icon><Icon icon="tabler:arrow-left" /></n-icon>
|
||||
</template>
|
||||
{{ t('Back') }}
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</div>
|
||||
|
||||
<div class="main-layout">
|
||||
@ -132,8 +152,9 @@
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { t } from '@/shared/i18n'
|
||||
import { useDialog, useMessage } from 'naive-ui'
|
||||
import { getLocalJobDetail, deleteLocalJob, stopLocalJob } from '@/shared/api/localJobs'
|
||||
import { NSpace, NButton, NIcon, useDialog, useMessage } from 'naive-ui'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { getLocalJobDetail, deleteLocalJob } from '@/shared/api/localJobs'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@ -141,7 +162,6 @@ const dialog = useDialog()
|
||||
const message = useMessage()
|
||||
|
||||
const loading = ref(true)
|
||||
const stopping = ref(false)
|
||||
const deleting = ref(false)
|
||||
const job = ref<any>(null)
|
||||
|
||||
@ -166,35 +186,6 @@ async function fetchJobDetail() {
|
||||
}
|
||||
}
|
||||
|
||||
async function stopJob() {
|
||||
if (!job.value) return
|
||||
|
||||
dialog.warning({
|
||||
title: t('Confirm Stop'),
|
||||
content: t('Are you sure you want to stop this job?'),
|
||||
positiveText: t('Stop'),
|
||||
negativeText: t('Cancel'),
|
||||
onPositiveClick: async () => {
|
||||
stopping.value = true
|
||||
try {
|
||||
const result = await stopLocalJob(job.value.job_id)
|
||||
|
||||
if (result.success) {
|
||||
message.success(t('Job stopped successfully'))
|
||||
await fetchJobDetail()
|
||||
} else {
|
||||
message.error(t('Failed to stop job'))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Stop error:', error)
|
||||
message.error(t('Failed to stop job'))
|
||||
} finally {
|
||||
stopping.value = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function deleteJob() {
|
||||
if (!job.value) return
|
||||
|
||||
@ -270,76 +261,43 @@ onMounted(() => {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.secondary-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 页面头部 - 与pagetype详情页保持一致 */
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
padding: 12px 0;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.left-actions, .right-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
.page-description {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
border: 1px solid #e2e8f0;
|
||||
/* 头部操作按钮统一样式 */
|
||||
.header-action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: #e2e8f0;
|
||||
color: #475569;
|
||||
/* 删除按钮悬浮时使用红色 */
|
||||
.header-action-btn.delete-btn:hover:not(:disabled) {
|
||||
background: #ef4444 !important;
|
||||
border-color: #ef4444 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background: #d97706;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
.header-action-btn.delete-btn:hover:not(:disabled) :deep(.n-button__border),
|
||||
.header-action-btn.delete-btn:hover:not(:disabled) :deep(.n-button__state-border) {
|
||||
border-color: #ef4444 !important;
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user