feat: switch base delivery to awx task logs

frontend/src/views/task/TaskCenter.vue

@@ -3,52 +3,67 @@
     <div class="page-head">
       <div>
         <h1>任务中心</h1>
-        <p>所有 ansible-playbook / Wayne 发布任务的执行记录与实时日志</p>
+        <p>AWX 交付任务与 Wayne 部署服务的执行记录</p>
+      </div>
+      <div class="task-filters">
+        <el-select v-model="sourceFilter" size="small" class="filter-select" @change="loadTasks">
+          <el-option label="全部来源" value="all" />
+          <el-option label="AWX" value="awx" />
+          <el-option label="Wayne" value="wayne" />
+        </el-select>
+        <el-button size="small" :loading="loadingTasks || loadingLogs" @click="refreshCurrent">刷新</el-button>
       </div>
     </div>
 
-    <div class="cols-2-equal">
-      <div class="panel">
+    <div class="task-layout">
+      <div class="panel task-list-panel">
         <div class="panel-head">
           <h3>任务列表</h3>
+          <span class="meta">{{ lastLoadedText }}</span>
         </div>
         <div class="panel-body">
-          <table>
-            <tbody>
-              <tr v-for="task in visibleTasks" :key="task.id" class="tr-hover" :class="{ active: task.id === selectedTask }" @click="selectedTask = task.id">
-                <td :class="['status-text', task.statusClass]">● {{ task.status }}</td>
-                <td class="strong">{{ task.name }}</td>
-                <td class="mono text-xs text-dim">{{ task.playbook }}</td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="task-list">
+            <button
+              v-for="task in tasks"
+              :key="task.id"
+              type="button"
+              class="task-row"
+              :class="{ active: task.id === selectedTaskId }"
+              @click="selectTask(task.id)"
+            >
+              <span :class="['task-status', task.status_class]">● {{ task.status_text }}</span>
+              <span class="task-main">
+                <span class="task-name">{{ task.name }}</span>
+                <span class="task-runner mono">{{ task.runner }}</span>
+              </span>
+            </button>
+          </div>
+          <div v-if="!loadingTasks && !tasks.length" class="empty-state">
+            暂无任务记录
+          </div>
           <div class="pagination">
-            <span>共 {{ visibleTasks.length }} 条 · 当前业务线：{{ currentName }}</span>
-            <div class="pg-btns">
-              <span class="pg-btn disabled">‹</span>
-              <span class="pg-btn active">1</span>
-              <span class="pg-btn">2</span>
-              <span class="pg-btn">3</span>
-              <span class="pg-sep">…</span>
-              <span class="pg-btn">15</span>
-              <span class="pg-btn">›</span>
-            </div>
+            <span>共 {{ tasks.length }} 条 · 当前业务线：{{ currentName }}</span>
           </div>
         </div>
       </div>
 
-      <div class="panel">
+      <div class="panel task-log-panel">
         <div class="panel-head">
-          <h3>实时日志 · {{ currentName }} RKE2 节点加入</h3>
-          <span class="meta">WebSocket 流式输出</span>
+          <h3>
+            <span>任务日志</span>
+            <span class="selected-name">{{ selectedTaskName }}</span>
+          </h3>
+          <span class="meta">{{ selectedTaskMeta }}</span>
         </div>
         <div class="panel-body log-stream">
-          <div v-for="(log, index) in visibleLogs" :key="index" :class="['task-log-line', log.class]">
+          <div v-for="(log, index) in logs" :key="index" :class="['task-log-line', log.class]">
             <span class="t">{{ log.time }}</span>{{ log.message }}
           </div>
-          <div class="task-log-line">
-            <span class="t">10:42:33</span>
-            <span class="blink">▌</span> 等待节点 Ready...
+          <div v-if="loadingLogs" class="task-log-line">
+            <span class="t">...</span>加载中
+          </div>
+          <div v-if="!loadingLogs && !logs.length" class="empty-state">
+            请选择任务查看日志
           </div>
         </div>
       </div>
@@ -57,58 +72,253 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { taskLogApi, type TaskLogLine, type TaskLogSummary } from '@/api/taskLog'
+import { useBusinessLineStore } from '@/stores/businessLine'
 import { useBusinessLineMockProfile } from '@/utils/businessLineMock'
 
 const { currentName } = useBusinessLineMockProfile()
+const businessLineStore = useBusinessLineStore()
 
-const selectedTask = ref(1)
+const sourceFilter = ref('all')
+const selectedTaskId = ref('')
+const tasks = ref<TaskLogSummary[]>([])
+const logs = ref<TaskLogLine[]>([])
+const loadingTasks = ref(false)
+const loadingLogs = ref(false)
+const lastLoadedAt = ref<Date | null>(null)
 
-const tasks = ref([
-  { id: 1, name: 'RKE2 节点加入 · bj-node-061', playbook: 'roles/rke2-node-join', status: '执行中', statusClass: 'warn' },
-  { id: 2, name: 'MySQL 主从部署 · kodo', playbook: 'roles/mysql-deploy', status: '成功', statusClass: 'ok' },
-  { id: 3, name: 'Redis Cluster 部署 · linxi', playbook: 'roles/redis-deploy', status: '成功', statusClass: 'ok' },
-  { id: 4, name: 'openresty 网关部署', playbook: 'roles/openresty-deploy', status: '失败', statusClass: 'err' },
-  { id: 5, name: '业务线标签同步 · LDAP', playbook: 'internal/label-sync', status: '成功', statusClass: 'ok' },
-  { id: 6, name: 'MySQL 主从部署 · xinfra', playbook: 'roles/mysql-deploy', status: '成功', statusClass: 'ok' },
-])
+const selectedTask = computed(() => tasks.value.find((task) => task.id === selectedTaskId.value))
+const selectedTaskName = computed(() => selectedTask.value?.name || '未选择')
+const selectedTaskMeta = computed(() => selectedTask.value ? `${selectedTask.value.source.toUpperCase()} · ${selectedTask.value.runner}` : '接口日志')
+const lastLoadedText = computed(() => lastLoadedAt.value ? `更新于 ${formatTime(lastLoadedAt.value)}` : '')
 
-const logs = ref([
-  { time: '10:42:01', message: 'PLAY [rke2-node-join] **********************', class: '' },
-  { time: '10:42:02', message: 'TASK [初始化内核参数] ...', class: '' },
-  { time: '10:42:04', message: 'ok: [bj-node-061]', class: 'ok' },
-  { time: '10:42:05', message: 'TASK [安装 containerd] ...', class: '' },
-  { time: '10:42:18', message: 'ok: [bj-node-061]', class: 'ok' },
-  { time: '10:42:19', message: 'TASK [写入 RKE2 node-labels: business-line=kodo] ...', class: '' },
-  { time: '10:42:20', message: 'changed: [bj-node-061] => labels applied', class: 'tag-ok' },
-  { time: '10:42:21', message: 'TASK [加入集群 rke2-bj-prod-01] ...', class: '' },
-])
+async function loadTasks() {
+  loadingTasks.value = true
+  try {
+    tasks.value = await taskLogApi.list({
+      source: sourceFilter.value,
+      businessLineId: businessLineStore.current?.id,
+    })
+    lastLoadedAt.value = new Date()
+    if (!tasks.value.some((task) => task.id === selectedTaskId.value)) {
+      selectedTaskId.value = tasks.value[0]?.id || ''
+    }
+    if (selectedTaskId.value) {
+      await loadLogs(selectedTaskId.value)
+    } else {
+      logs.value = []
+    }
+  } catch (error) {
+    logs.value = [{ time: formatTime(new Date()), message: error instanceof Error ? error.message : '任务日志加载失败', class: 'err' }]
+  } finally {
+    loadingTasks.value = false
+  }
+}
 
-const visibleTasks = computed(() => tasks.value.map((task) => ({
-  ...task,
-  name: task.name.replace(/ · (kodo|linxi|xinfra|las)|$/, ` · ${currentName.value}`),
-})))
+async function loadLogs(taskId: string) {
+  loadingLogs.value = true
+  try {
+    const data = await taskLogApi.get(taskId)
+    logs.value = data.lines
+    lastLoadedAt.value = new Date()
+  } catch (error) {
+    logs.value = [{ time: formatTime(new Date()), message: error instanceof Error ? error.message : '任务日志加载失败', class: 'err' }]
+  } finally {
+    loadingLogs.value = false
+  }
+}
 
-const visibleLogs = computed(() => logs.value.map((log) => ({
-  ...log,
-  message: log.message.replace(/business-line=(kodo|linxi|xinfra|las)/, `business-line=${currentName.value}`),
-})))
+function selectTask(taskId: string) {
+  if (selectedTaskId.value === taskId) {
+    return
+  }
+  selectedTaskId.value = taskId
+  void loadLogs(taskId)
+}
+
+function refreshCurrent() {
+  void loadTasks()
+}
+
+function formatTime(date: Date) {
+  return date.toLocaleTimeString('zh-CN', { hour12: false })
+}
+
+watch(
+  () => businessLineStore.current?.id,
+  () => {
+    void loadTasks()
+  },
+)
+
+onMounted(() => {
+  void loadTasks()
+})
 </script>
 
 <style scoped>
 /* 公共样式已在 global.css 中定义 */
 
-.log-stream {
-  max-height: 340px;
+.task-layout {
+  display: grid;
+  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.task-list-panel,
+.task-log-panel {
+  min-width: 0;
+}
+
+.task-list-panel .panel-body {
+  padding-top: 0;
+}
+
+.task-list {
+  max-height: calc(100vh - 245px);
+  min-height: 360px;
   overflow-y: auto;
 }
 
-.blink {
-  animation: blink 1s step-start infinite;
+.task-row {
+  width: 100%;
+  min-height: 62px;
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+  padding: 10px 16px;
+  border: 0;
+  border-bottom: 1px solid var(--line-soft);
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.task-row:hover,
+.task-row.active {
+  background: var(--bg-panel-2);
+}
+
+.task-status {
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.task-status.ok {
   color: var(--accent);
 }
 
-@keyframes blink {
-  50% { opacity: 0; }
+.task-status.warn {
+  color: var(--warn);
+}
+
+.task-status.err {
+  color: var(--err);
+}
+
+.task-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.task-name,
+.task-runner,
+.selected-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-name {
+  color: var(--text-hi);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.task-runner {
+  color: var(--text-dim);
+  font-size: 11px;
+}
+
+.task-log-panel .panel-head {
+  gap: 14px;
+}
+
+.task-log-panel .panel-head h3 {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.selected-name {
+  color: var(--text-dim);
+  font-weight: 500;
+}
+
+.log-stream {
+  max-height: calc(100vh - 210px);
+  min-height: 520px;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+.task-filters {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.filter-select {
+  width: 160px;
+}
+
+.empty-state {
+  padding: 18px 0;
+  color: var(--text-dim);
+  font-size: 13px;
+}
+
+@media (max-width: 1180px) {
+  .task-layout {
+    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 1024px) {
+  .task-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .task-list,
+  .log-stream {
+    max-height: none;
+  }
+
+  .log-stream {
+    min-height: 420px;
+  }
+}
+
+@media (max-width: 640px) {
+  .filter-select {
+    width: 100%;
+  }
+
+  .task-filters {
+    width: 100%;
+  }
+
+  .task-row {
+    grid-template-columns: 64px minmax(0, 1fr);
+    padding: 10px 12px;
+  }
 }
 </style>