From 95a2f2d5a20c8bd4898b2a37a3fd3bd994a20ec8 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 1 Nov 2025 21:57:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BB=BB=E5=8A=A1=E9=98=9F?=
 =?UTF-8?q?=E5=88=97=E8=AF=A6=E6=83=85=E9=A1=B5=E5=B7=A5=E5=85=B7=E6=A0=8F?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/localJobs/LocalJobDetail.vue    | 192 +++++++-----------
 1 file changed, 75 insertions(+), 117 deletions(-)

diff --git a/apps/jingrow/frontend/src/views/localJobs/LocalJobDetail.vue b/apps/jingrow/frontend/src/views/localJobs/LocalJobDetail.vue
index 3a6c81b..06bbcdf 100644
--- a/apps/jingrow/frontend/src/views/localJobs/LocalJobDetail.vue
+++ b/apps/jingrow/frontend/src/views/localJobs/LocalJobDetail.vue
@@ -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 {