From a5ce173b54c9b4583dbcc8f4cb64a71103feb840 Mon Sep 17 00:00:00 2001
From: dailz <dailz@example.com>
Date: Thu, 16 Apr 2026 22:45:59 +0800
Subject: [PATCH] feat(web): add Jobs pages - list, history, submit, detail

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 web/src/views/Jobs/Detail.vue  | 201 +++++++++++++++++++++++++++++++
 web/src/views/Jobs/History.vue | 211 +++++++++++++++++++++++++++++++++
 web/src/views/Jobs/List.vue    | 137 +++++++++++++++++++++
 web/src/views/Jobs/Submit.vue  | 117 ++++++++++++++++++
 4 files changed, 666 insertions(+)
 create mode 100644 web/src/views/Jobs/Detail.vue
 create mode 100644 web/src/views/Jobs/History.vue
 create mode 100644 web/src/views/Jobs/List.vue
 create mode 100644 web/src/views/Jobs/Submit.vue

diff --git a/web/src/views/Jobs/Detail.vue b/web/src/views/Jobs/Detail.vue
new file mode 100644
index 0000000..1679edc
--- /dev/null
+++ b/web/src/views/Jobs/Detail.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { getJob, cancelJob } from '@/api/jobs'
+import type { JobResponse } from '@/types/jobs'
+import { ElMessage } from 'element-plus'
+
+const route = useRoute()
+const router = useRouter()
+
+const loading = ref(false)
+const cancelling = ref(false)
+const job = ref<JobResponse | null>(null)
+const notFound = ref(false)
+
+const jobId = computed(() => route.params.id as string)
+
+const fetchJob = async () => {
+  loading.value = true
+  notFound.value = false
+  try {
+    const resp = await getJob(jobId.value)
+    if (resp.success) {
+      job.value = resp.data || null
+    } else {
+      if (resp.error?.includes('not found') || resp.error?.includes('不存在')) {
+        notFound.value = true
+        ElMessage.error('任务不存在')
+      } else {
+        ElMessage.error(resp.error || '获取任务详情失败')
+      }
+    }
+  } catch (error: unknown) {
+    const axiosError = error as { response?: { status?: number } }
+    if (axiosError.response?.status === 404) {
+      notFound.value = true
+      ElMessage.error('任务不存在')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleCancel = async () => {
+  cancelling.value = true
+  try {
+    const resp = await cancelJob(jobId.value)
+    if (resp.success) {
+      ElMessage.success('任务已取消')
+      fetchJob()
+    } else {
+      ElMessage.error(resp.error || '取消失败')
+    }
+  } catch {
+    // Error handled by interceptor
+  } finally {
+    cancelling.value = false
+  }
+}
+
+const formatTime = (ts: number | null | undefined): string => {
+  if (ts == null) return '-'
+  return new Date(ts * 1000).toLocaleString('zh-CN')
+}
+
+const getStatusType = (state: string | undefined): 'primary' | 'success' | 'warning' | 'info' | 'danger' => {
+  switch (state) {
+    case 'RUNNING': return 'success'
+    case 'PENDING': return 'warning'
+    case 'COMPLETED': return 'info'
+    case 'FAILED': return 'danger'
+    default: return 'info'
+  }
+}
+
+const canCancel = computed(() => {
+  const state = job.value?.job_state?.[0]
+  return state === 'PENDING' || state === 'RUNNING'
+})
+
+const goBack = () => {
+  router.push('/jobs')
+}
+
+onMounted(() => {
+  fetchJob()
+})
+</script>
+
+<template>
+  <div class="job-detail">
+    <!-- Top action bar -->
+    <div class="action-bar">
+      <el-button @click="goBack">返回</el-button>
+      <el-popconfirm
+        v-if="canCancel"
+        title="确定要取消此任务吗？"
+        @confirm="handleCancel"
+      >
+        <template #reference>
+          <el-button type="danger" :loading="cancelling">取消任务</el-button>
+        </template>
+      </el-popconfirm>
+    </div>
+
+    <!-- 404 state -->
+    <template v-if="notFound">
+      <el-empty description="任务不存在">
+        <el-button type="primary" @click="goBack">返回列表</el-button>
+      </el-empty>
+    </template>
+
+    <!-- Loading + content -->
+    <div v-else v-loading="loading">
+      <template v-if="job">
+        <!-- state_reason alert -->
+        <el-alert
+          v-if="job.state_reason"
+          type="warning"
+          :closable="false"
+          class="state-reason-alert"
+        >
+          {{ job.state_reason }}
+        </el-alert>
+
+        <!-- 基本信息 -->
+        <el-descriptions title="基本信息" border :column="2" class="detail-section">
+          <el-descriptions-item label="Job ID">{{ job.job_id ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="任务名称">{{ job.name ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="getStatusType(job.job_state?.[0])">
+              {{ job.job_state?.[0] || '-' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="分区">{{ job.partition ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="QOS">{{ job.qos ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="优先级">{{ job.priority ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="账户">{{ job.account ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="用户">{{ job.user ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="集群">{{ job.cluster ?? '-' }}</el-descriptions-item>
+        </el-descriptions>
+
+        <!-- 资源信息 -->
+        <el-descriptions title="资源信息" border :column="2" class="detail-section">
+          <el-descriptions-item label="CPU数">{{ job.cpus ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="任务数">{{ job.tasks ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="节点数">{{ job.node_count ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="分配节点">{{ job.nodes ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="Batch Host">{{ job.batch_host ?? '-' }}</el-descriptions-item>
+        </el-descriptions>
+
+        <!-- 时间信息 -->
+        <el-descriptions title="时间信息" border :column="2" class="detail-section">
+          <el-descriptions-item label="提交时间">{{ formatTime(job.submit_time) }}</el-descriptions-item>
+          <el-descriptions-item label="开始时间">{{ formatTime(job.start_time) }}</el-descriptions-item>
+          <el-descriptions-item label="结束时间">{{ formatTime(job.end_time) }}</el-descriptions-item>
+          <el-descriptions-item label="时间限制">{{ job.time_limit ?? '-' }}</el-descriptions-item>
+        </el-descriptions>
+
+        <!-- 执行信息 -->
+        <el-descriptions title="执行信息" border :column="2" class="detail-section">
+          <el-descriptions-item label="退出码">{{ job.exit_code ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="工作目录">{{ job.working_directory ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="命令">{{ job.command ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="标准输出">{{ job.standard_output ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="标准错误">{{ job.standard_error ?? '-' }}</el-descriptions-item>
+        </el-descriptions>
+
+        <!-- 数组任务 -->
+        <el-descriptions
+          v-if="job.array_job_id != null || job.array_task_id != null"
+          title="数组任务"
+          border
+          :column="2"
+          class="detail-section"
+        >
+          <el-descriptions-item label="Array Job ID">{{ job.array_job_id ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="Array Task ID">{{ job.array_task_id ?? '-' }}</el-descriptions-item>
+        </el-descriptions>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.job-detail {
+  padding: 20px;
+}
+
+.action-bar {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.state-reason-alert {
+  margin-bottom: 20px;
+}
+
+.detail-section {
+  margin-bottom: 24px;
+}
+</style>
diff --git a/web/src/views/Jobs/History.vue b/web/src/views/Jobs/History.vue
new file mode 100644
index 0000000..ca68439
--- /dev/null
+++ b/web/src/views/Jobs/History.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="jobs-history">
+    <div class="jobs-history__header">
+      <h2>任务历史</h2>
+    </div>
+
+    <el-form :inline="true" class="jobs-history__filters">
+      <el-form-item label="用户名">
+        <el-input v-model="filters.users" placeholder="请输入用户名" clearable />
+      </el-form-item>
+      <el-form-item label="分区">
+        <el-input v-model="filters.partition" placeholder="请输入分区" clearable />
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-select v-model="filters.state" clearable placeholder="请选择状态">
+          <el-option label="RUNNING" value="RUNNING" />
+          <el-option label="PENDING" value="PENDING" />
+          <el-option label="COMPLETED" value="COMPLETED" />
+          <el-option label="FAILED" value="FAILED" />
+          <el-option label="CANCELLED" value="CANCELLED" />
+          <el-option label="TIMEOUT" value="TIMEOUT" />
+          <el-option label="NODE_FAIL" value="NODE_FAIL" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="任务名称">
+        <el-input v-model="filters.job_name" placeholder="请输入任务名称" clearable />
+      </el-form-item>
+      <el-form-item label="时间范围">
+        <el-date-picker
+          v-model="filters.dateRange"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSearch">查询</el-button>
+        <el-button @click="handleReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table
+      :data="jobs"
+      v-loading="loading"
+      @row-click="handleRowClick"
+      style="cursor: pointer"
+      stripe
+      border
+    >
+      <el-table-column prop="job_id" label="Job ID" width="100" />
+      <el-table-column prop="name" label="任务名称" min-width="160" />
+      <el-table-column label="状态" width="120">
+        <template #default="{ row }">
+          <el-tag :type="getStatusType(row.job_state?.[0])">
+            {{ row.job_state?.[0] || '-' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="partition" label="分区" width="120" />
+      <el-table-column prop="user" label="用户" width="120" />
+      <el-table-column prop="exit_code" label="退出码" width="90" />
+      <el-table-column label="开始时间" width="180">
+        <template #default="{ row }">
+          {{ formatTime(row.start_time) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="结束时间" width="180">
+        <template #default="{ row }">
+          {{ formatTime(row.end_time) }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="jobs-history__pagination">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="handlePageChange"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getJobHistory } from '@/api/jobs'
+import type { JobResponse } from '@/types/jobs'
+
+const router = useRouter()
+const loading = ref(false)
+const jobs = ref<JobResponse[]>([])
+const total = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(20)
+
+const filters = reactive({
+  users: '',
+  partition: '',
+  state: '',
+  job_name: '',
+  dateRange: null as [Date, Date] | null,
+})
+
+const buildParams = () => {
+  const params: Record<string, string | number> = {}
+  if (filters.users) params.users = filters.users
+  if (filters.partition) params.partition = filters.partition
+  if (filters.state) params.state = filters.state
+  if (filters.job_name) params.job_name = filters.job_name
+  if (filters.dateRange) {
+    params.start_time = String(Math.floor(filters.dateRange[0].getTime() / 1000))
+    params.end_time = String(Math.floor(filters.dateRange[1].getTime() / 1000))
+  }
+  params.page = currentPage.value
+  params.page_size = pageSize.value
+  return params
+}
+
+const fetchHistory = async () => {
+  loading.value = true
+  try {
+    const resp = await getJobHistory(buildParams())
+    jobs.value = resp.data?.jobs || []
+    total.value = resp.data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSearch = () => {
+  currentPage.value = 1
+  fetchHistory()
+}
+
+const handleReset = () => {
+  filters.users = ''
+  filters.partition = ''
+  filters.state = ''
+  filters.job_name = ''
+  filters.dateRange = null
+  currentPage.value = 1
+  fetchHistory()
+}
+
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+  fetchHistory()
+}
+
+const handleSizeChange = (size: number) => {
+  pageSize.value = size
+  currentPage.value = 1
+  fetchHistory()
+}
+
+const handleRowClick = (row: JobResponse) => {
+  router.push(`/jobs/${row.job_id}`)
+}
+
+const formatTime = (ts: number | null | undefined): string => {
+  if (ts == null) return '-'
+  return new Date(ts * 1000).toLocaleString('zh-CN')
+}
+
+const getStatusType = (state: string | undefined): 'success' | 'warning' | 'info' | 'danger' => {
+  switch (state) {
+    case 'RUNNING': return 'success'
+    case 'PENDING': return 'warning'
+    case 'COMPLETED': return 'info'
+    case 'FAILED': return 'danger'
+    default: return 'info'
+  }
+}
+
+onMounted(() => {
+  fetchHistory()
+})
+</script>
+
+<style scoped>
+.jobs-history {
+  padding: 20px;
+}
+
+.jobs-history__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.jobs-history__header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.jobs-history__filters {
+  margin-bottom: 20px;
+}
+
+.jobs-history__pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+</style>
diff --git a/web/src/views/Jobs/List.vue b/web/src/views/Jobs/List.vue
new file mode 100644
index 0000000..0466fc8
--- /dev/null
+++ b/web/src/views/Jobs/List.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="jobs-list">
+    <div class="jobs-list__header">
+      <h2>任务列表</h2>
+      <el-button type="primary" :icon="Refresh" @click="fetchJobs" :loading="loading">
+        刷新
+      </el-button>
+    </div>
+
+    <el-table
+      :data="jobs"
+      v-loading="loading"
+      @row-click="handleRowClick"
+      style="cursor: pointer"
+      stripe
+      border
+    >
+      <el-table-column prop="job_id" label="Job ID" width="100" />
+      <el-table-column prop="name" label="任务名称" min-width="160" />
+      <el-table-column label="状态" width="120">
+        <template #default="{ row }">
+          <el-tag :type="getStatusType(row.job_state?.[0])">
+            {{ row.job_state?.[0] || '-' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="partition" label="分区" width="120" />
+      <el-table-column prop="user" label="用户" width="120" />
+      <el-table-column prop="cpus" label="CPU数" width="80" />
+      <el-table-column label="提交时间" width="180">
+        <template #default="{ row }">
+          {{ formatTime(row.submit_time) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="开始时间" width="180">
+        <template #default="{ row }">
+          {{ formatTime(row.start_time) }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="jobs-list__pagination">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="handlePageChange"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getJobs } from '@/api/jobs'
+import type { JobResponse } from '@/types/jobs'
+import { Refresh } from '@element-plus/icons-vue'
+
+const router = useRouter()
+const loading = ref(false)
+const jobs = ref<JobResponse[]>([])
+const total = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(20)
+
+const fetchJobs = async () => {
+  loading.value = true
+  try {
+    const resp = await getJobs({ page: currentPage.value, page_size: pageSize.value })
+    jobs.value = resp.data?.jobs || []
+    total.value = resp.data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+  fetchJobs()
+}
+
+const handleSizeChange = (size: number) => {
+  pageSize.value = size
+  currentPage.value = 1
+  fetchJobs()
+}
+
+const handleRowClick = (row: JobResponse) => {
+  router.push(`/jobs/${row.job_id}`)
+}
+
+const formatTime = (ts: number | null | undefined): string => {
+  if (ts == null) return '-'
+  return new Date(ts * 1000).toLocaleString('zh-CN')
+}
+
+const getStatusType = (state: string | undefined): 'success' | 'warning' | 'info' | 'danger' => {
+  switch (state) {
+    case 'RUNNING': return 'success'
+    case 'PENDING': return 'warning'
+    case 'COMPLETED': return 'info'
+    case 'FAILED': return 'danger'
+    default: return 'info'
+  }
+}
+
+onMounted(() => {
+  fetchJobs()
+})
+</script>
+
+<style scoped>
+.jobs-list {
+  padding: 20px;
+}
+
+.jobs-list__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.jobs-list__header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.jobs-list__pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+</style>
diff --git a/web/src/views/Jobs/Submit.vue b/web/src/views/Jobs/Submit.vue
new file mode 100644
index 0000000..f479dbe
--- /dev/null
+++ b/web/src/views/Jobs/Submit.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="submit-container">
+    <div class="page-header">
+      <h2>提交任务</h2>
+    </div>
+
+    <el-card>
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="脚本内容" prop="script">
+          <el-input
+            v-model="form.script"
+            type="textarea"
+            :rows="10"
+            placeholder="请输入脚本内容"
+          />
+        </el-form-item>
+
+        <el-form-item label="任务名称" prop="job_name">
+          <el-input v-model="form.job_name" placeholder="请输入任务名称" />
+        </el-form-item>
+
+        <el-form-item label="分区" prop="partition">
+          <el-input v-model="form.partition" placeholder="请输入分区" />
+        </el-form-item>
+
+        <el-form-item label="QOS" prop="qos">
+          <el-input v-model="form.qos" placeholder="请输入 QOS" />
+        </el-form-item>
+
+        <el-form-item label="CPU数量" prop="cpus">
+          <el-input-number v-model="form.cpus" :min="1" />
+        </el-form-item>
+
+        <el-form-item label="时间限制" prop="time_limit">
+          <el-input v-model="form.time_limit" placeholder="如: 1:00:00" />
+        </el-form-item>
+
+        <el-form-item label="工作目录" prop="work_dir">
+          <el-input v-model="form.work_dir" placeholder="请输入工作目录" />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" :loading="submitting" @click="handleSubmit">
+            提交
+          </el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { submitJob } from '@/api/jobs'
+import type { SubmitJobRequest } from '@/types/jobs'
+import { ElMessage } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+
+const router = useRouter()
+const formRef = ref<FormInstance>()
+const submitting = ref(false)
+
+const form = reactive<SubmitJobRequest>({
+  script: '',
+  job_name: '',
+  partition: '',
+  qos: '',
+  cpus: undefined,
+  time_limit: '',
+  work_dir: '',
+})
+
+const rules: FormRules = {
+  script: [
+    { required: true, message: '请输入脚本内容', trigger: 'blur' },
+  ],
+}
+
+const handleSubmit = async () => {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitting.value = true
+    try {
+      const resp = await submitJob({ ...form })
+      if (resp.success) {
+        ElMessage.success(`任务提交成功，Job ID: ${resp.data?.job_id}`)
+        setTimeout(() => {
+          router.push('/jobs')
+        }, 1000)
+      } else {
+        ElMessage.error(resp.error || '提交失败')
+      }
+    } catch {
+      // Error already handled by Axios interceptor
+    } finally {
+      submitting.value = false
+    }
+  })
+}
+
+const handleReset = () => {
+  form.script = ''
+  form.job_name = ''
+  form.partition = ''
+  form.qos = ''
+  form.cpus = undefined
+  form.time_limit = ''
+  form.work_dir = ''
+  formRef.value?.clearValidate()
+}
+</script>