初始提交

2026-02-12 15:40:10 +08:00
commit 1035446d4d
52 changed files with 11397 additions and 0 deletions
@@ -0,0 +1,211 @@
+<template>
+  <div class="task-list-container">
+    <a-card class="glass-card">
+      <template #title>
+        <span>任务列表</span>
+      </template>
+
+      <div class="search-bar">
+        <a-input-search
+          v-model:value="searchTaskId"
+          placeholder="输入任务ID"
+          style="width: 260px"
+          @search="handleSearch"
+          allow-clear
+        />
+        <a-button @click="handleRefresh">
+          <reload-outlined />
+          刷新
+        </a-button>
+      </div>
+
+      <a-table
+        :columns="columns"
+        :data-source="taskRows"
+        :loading="loading"
+        :pagination="pagination"
+        row-key="task_id"
+        @change="handleTableChange"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'status'">
+            <a-tag :color="getStatusColor(record.status)">
+              {{ record.status }}
+            </a-tag>
+          </template>
+          <template v-if="column.key === 'actions'">
+            <a-space>
+              <a-button type="link" size="small" @click="handleView(record)">
+                查看日志
+              </a-button>
+              <a-button
+                v-if="record.status === 'pending' || record.status === 'running'"
+                type="link"
+                size="small"
+                danger
+                @click="handleCancel(record)"
+              >
+                取消任务
+              </a-button>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+
+      <a-drawer
+        v-model:open="logDrawerVisible"
+        title="任务日志"
+        placement="right"
+        width="480"
+      >
+        <a-skeleton v-if="logLoading" active :paragraph="{ rows: 8 }" />
+        <div v-else class="log-content">
+          <pre v-if="logs.length" class="log-text">
+{{ logs.join('\n') }}
+          </pre>
+          <a-empty v-else description="暂无日志" />
+        </div>
+      </a-drawer>
+    </a-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ReloadOutlined } from '@ant-design/icons-vue'
+import { Modal, message } from 'ant-design-vue'
+import * as taskApi from '@/api/taskApi'
+
+const searchTaskId = ref('')
+const taskRows = ref([])
+const loading = ref(false)
+const pagination = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showTotal: (total) => `共 ${total} 条`
+})
+
+const logDrawerVisible = ref(false)
+const logLoading = ref(false)
+const logs = ref([])
+const currentTaskId = ref('')
+
+const columns = [
+  { title: '任务ID', dataIndex: 'task_id', key: 'task_id' },
+  { title: '状态', dataIndex: 'status', key: 'status', width: 120 },
+  { title: '进度(%)', dataIndex: 'progress', key: 'progress', width: 120 },
+  { title: '操作', key: 'actions', width: 200, fixed: 'right' }
+]
+
+const getStatusColor = (status) => {
+  const map = {
+    pending: 'default',
+    running: 'blue',
+    success: 'green',
+    failed: 'red'
+  }
+  return map[status] || 'default'
+}
+
+const fetchTask = async () => {
+  if (!searchTaskId.value) {
+    taskRows.value = []
+    pagination.value.total = 0
+    return
+  }
+
+  loading.value = true
+  try {
+    const data = await taskApi.getTaskStatus(searchTaskId.value)
+    // 接口返回单个任务对象，包装成表格用的数组
+    if (data) {
+      taskRows.value = [data]
+      pagination.value.total = 1
+    } else {
+      taskRows.value = []
+      pagination.value.total = 0
+    }
+  } catch (error) {
+    console.error('获取任务状态失败:', error)
+    taskRows.value = []
+    pagination.value.total = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSearch = () => {
+  pagination.value.current = 1
+  fetchTask()
+}
+
+const handleRefresh = () => {
+  fetchTask()
+}
+
+const handleTableChange = (pag) => {
+  pagination.value.current = pag.current
+  pagination.value.pageSize = pag.pageSize
+}
+
+const handleView = async (record) => {
+  currentTaskId.value = record.task_id
+  logDrawerVisible.value = true
+  logLoading.value = true
+  logs.value = []
+
+  try {
+    const data = await taskApi.getTaskLogs(record.task_id)
+    const logArray = Array.isArray(data.logs) ? data.logs : []
+    logs.value = logArray
+  } catch (error) {
+    console.error('获取任务日志失败:', error)
+  } finally {
+    logLoading.value = false
+  }
+}
+
+const handleCancel = (record) => {
+  Modal.confirm({
+    title: '确认取消任务',
+    content: `确定要取消任务 ${record.task_id} 吗？`,
+    okType: 'danger',
+    onOk: async () => {
+      try {
+        await taskApi.cancelTask(record.task_id, false)
+        message.success('已提交取消请求')
+        fetchTask()
+      } catch (error) {
+        console.error('取消任务失败:', error)
+      }
+    }
+  })
+}
+</script>
+
+<style scoped>
+.task-list-container {
+  padding: 0;
+}
+
+.search-bar {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.log-content {
+  max-height: 70vh;
+  overflow: auto;
+}
+
+.log-text {
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: transparent;
+  color: #e5e7eb;
+}
+</style>
+