feat(frontend): P0样板—历史任务页聚宽级重做(计数+类型筛选+状态色chip+搜索+分页+刷新)

frontend/src/views/backtest/History.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { getTasks, type TaskListItem } from '@/api/backtest'
@@ -8,7 +8,62 @@ const router = useRouter()
 const tasks = ref<TaskListItem[]>([])
 const loading = ref(false)
 
-onMounted(async () => {
+// 筛选
+const typeFilter = ref<'all' | 'cta' | 'optimize' | 'factor'>('all')
+const statusFilter = ref<'all' | 'done' | 'failed'>('all')
+const keyword = ref('')
+// 分页
+const page = ref(1)
+const pageSize = 20
+
+const typeOptions = [
+  { key: 'all', label: '全部' },
+  { key: 'cta', label: '回测' },
+  { key: 'optimize', label: '参数优化' },
+  { key: 'factor', label: '因子分析' },
+] as const
+
+const statusOptions = [
+  { key: 'all', label: '全部状态' },
+  { key: 'done', label: '完成' },
+  { key: 'failed', label: '失败' },
+] as const
+
+const filtered = computed(() => {
+  let list = tasks.value
+  if (typeFilter.value !== 'all') list = list.filter((t) => t.type === typeFilter.value)
+  if (statusFilter.value !== 'all') list = list.filter((t) => t.status === statusFilter.value)
+  const kw = keyword.value.trim().toLowerCase()
+  if (kw) {
+    list = list.filter(
+      (t) =>
+        t.task_id.toLowerCase().includes(kw) ||
+        (t.strategy || '').toLowerCase().includes(kw) ||
+        (t.symbol || '').toLowerCase().includes(kw),
+    )
+  }
+  return list
+})
+
+const paged = computed(() => {
+  const start = (page.value - 1) * pageSize
+  return filtered.value.slice(start, start + pageSize)
+})
+
+const counts = computed(() => ({
+  total: tasks.value.length,
+  done: tasks.value.filter((t) => t.status === 'done').length,
+  failed: tasks.value.filter((t) => t.status === 'failed').length,
+}))
+
+// 筛选变化回到第一页
+watch([typeFilter, statusFilter, keyword], () => {
+  page.value = 1
+})
+
+onMounted(load)
+
+async function load(): Promise<void> {
   loading.value = true
   try {
     tasks.value = await getTasks()
@@ -17,14 +72,20 @@ onMounted(async () => {
   } finally {
     loading.value = false
   }
-})
+}
 
 function open(row: TaskListItem): void {
-  if (row.type === 'factor') {
-    router.push(`/factor/result/${row.task_id}`)
-  } else {
-    router.push(`/backtest/result/${row.task_id}`)
-  }
+  if (row.type === 'factor') router.push(`/factor/result/${row.task_id}`)
+  else router.push(`/backtest/result/${row.task_id}`)
+}
+
+const typeLabelMap: Record<string, string> = { cta: '回测', optimize: '优化', factor: '因子' }
+function typeLabel(t: string): string {
+  return typeLabelMap[t] || t
+}
+const statusLabelMap: Record<string, string> = { done: '完成', failed: '失败', running: '运行中', pending: '排队' }
+function statusLabel(s: string): string {
+  return statusLabelMap[s] || s
 }
 </script>
 
@@ -32,25 +93,156 @@ function open(row: TaskListItem): void {
   <div class="page">
     <div class="page-head">
       <div>
-        <h2 class="page-title">历史任务</h2>
-        <p class="page-subtitle">回测 / 因子分析 任务列表</p>
+        <h2 class="page-title">
+          历史任务<span class="count-badge">{{ counts.total }}</span>
+        </h2>
+        <p class="page-subtitle">回测 / 参数优化 / 因子分析 的全部任务 · 完成 {{ counts.done }} · 失败 {{ counts.failed }}</p>
+      </div>
+      <div class="head-actions">
+        <el-button :loading="loading" :icon="'Refresh'" @click="load">刷新</el-button>
       </div>
     </div>
-    <el-card v-loading="loading">
-    <el-table :data="tasks" stripe size="small" empty-text="暂无历史任务">
-      <el-table-column prop="task_id" label="任务 ID" min-width="220" />
-      <el-table-column prop="type" label="类型" width="80" />
-      <el-table-column prop="strategy" label="策略/因子" width="160" />
-      <el-table-column prop="symbol" label="标的" width="100" />
-      <el-table-column prop="status" label="状态" width="80" />
-      <el-table-column prop="start" label="开始" width="110" />
-      <el-table-column prop="end" label="结束" width="110" />
-      <el-table-column label="操作" width="90">
-        <template #default="{ row }">
-          <el-button link type="primary" @click="open(row)">查看</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+
+    <!-- 筛选栏 -->
+    <div class="filter-bar">
+      <el-radio-group v-model="typeFilter" size="small">
+        <el-radio-button v-for="o in typeOptions" :key="o.key" :value="o.key">{{ o.label }}</el-radio-button>
+      </el-radio-group>
+      <el-select v-model="statusFilter" size="small" class="status-sel">
+        <el-option v-for="o in statusOptions" :key="o.key" :label="o.label" :value="o.key" />
+      </el-select>
+      <el-input v-model="keyword" placeholder="搜任务ID / 策略 / 标的" clearable size="small" class="search" />
+    </div>
+
+    <el-card v-loading="loading" class="table-card" shadow="never">
+      <el-table :data="paged" size="small" empty-text="暂无符合条件的任务">
+        <el-table-column label="任务 ID" min-width="190">
+          <template #default="{ row }">
+            <span class="mono">{{ row.task_id }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型" width="84">
+          <template #default="{ row }">
+            <span class="chip" :class="`chip-${row.type}`">{{ typeLabel(row.type) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="strategy" label="策略 / 因子" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="symbol" label="标的" width="92" />
+        <el-table-column label="状态" width="84">
+          <template #default="{ row }">
+            <span class="chip" :class="`st-${row.status}`">{{ statusLabel(row.status) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="时间区间" min-width="180">
+          <template #default="{ row }">
+            <span class="muted">{{ row.start }} ~ {{ row.end }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="76" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" @click="open(row)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pager">
+        <el-pagination
+          v-model:current-page="page"
+          :page-size="pageSize"
+          :total="filtered.length"
+          layout="prev, pager, next, total"
+          background
+          small
+        />
+      </div>
     </el-card>
   </div>
 </template>
+
+<style scoped>
+.count-badge {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 0 8px;
+  min-width: 24px;
+  height: 22px;
+  line-height: 22px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-2);
+  background: var(--bg-hover);
+  border-radius: 11px;
+  vertical-align: middle;
+}
+.head-actions {
+  margin-left: auto;
+}
+.filter-bar {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.status-sel {
+  width: 130px;
+}
+.search {
+  width: 260px;
+  margin-left: auto;
+}
+.table-card {
+  border: 1px solid var(--border-2);
+}
+.mono {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text);
+}
+.muted {
+  color: var(--text-2);
+  font-size: 12px;
+}
+.chip {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+}
+/* 类型 chip */
+.chip-cta {
+  color: var(--brand);
+  background: rgba(24, 144, 255, 0.14);
+}
+.chip-optimize {
+  color: #13c2c2;
+  background: rgba(19, 194, 194, 0.14);
+}
+.chip-factor {
+  color: #b37feb;
+  background: rgba(179, 127, 235, 0.14);
+}
+/* 状态 chip */
+.st-done {
+  color: var(--down);
+  background: rgba(63, 185, 80, 0.14);
+}
+.st-failed {
+  color: var(--danger);
+  background: rgba(248, 81, 73, 0.14);
+}
+.st-running {
+  color: var(--brand);
+  background: rgba(24, 144, 255, 0.14);
+}
+.st-pending {
+  color: var(--warn);
+  background: rgba(210, 153, 34, 0.14);
+}
+.pager {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>