fix(frontend): 性能测试监控/报告面板增加任务选择器，侧边栏直达可查看数据

- 监控面板和报告面板空状态增加任务下拉选择器
- 无 taskId 参数时自动加载可选任务列表供选择
- 选中任务后通过路由跳转携带 taskId 加载数据
Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/views/performance/MonitorPanel.vue

@@ -8,10 +8,34 @@
 
 <template>
   <div class="monitor-panel">
-    <!-- 无任务时提示 -->
+    <!-- 无任务时提示 → 提供任务选择器 -->
     <div v-if="!taskId" class="empty-state">
       <el-icon :size="48"><Monitor /></el-icon>
-      <p>请从任务列表选择任务查看实时监控</p>
+      <p style="margin-bottom: 16px;">请选择要查看实时监控的任务</p>
+      <el-select
+        v-model="selectedTaskId"
+        placeholder="选择任务 ID"
+        filterable
+        clearable
+        style="width: 360px"
+        @change="onTaskSelected"
+      >
+        <el-option
+          v-for="t in availableTasks"
+          :key="t.id"
+          :label="`${t.name} (${t.id.slice(0, 8)}...)`"
+          :value="t.id"
+        />
+      </el-select>
+      <el-button
+        v-if="selectedTaskId"
+        type="primary"
+        style="margin-left: 12px;"
+        @click="onTaskSelected(selectedTaskId)"
+      >查看监控</el-button>
+      <p v-if="tasksLoading" style="margin-top: 12px; color: #909399; font-size: 13px;">
+        加载中...
+      </p>
     </div>
 
     <template v-else>
@@ -92,17 +116,44 @@
  */
 
 import { ref, watch, onMounted, onUnmounted, nextTick, computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Monitor } from '@element-plus/icons-vue'
 import * as echarts from 'echarts'
-import { createPerfMonitorStream } from '@/api/performance'
+import { createPerfMonitorStream, listTasks } from '@/api/performance'
 import type { EChartsOption } from 'echarts'
+import type { PerformanceTaskListItem } from '@/types/performance'
 
 const route = useRoute()
+const router = useRouter()
 /** 从路由 query 读取任务 ID（由任务列表监控按钮跳转携带） */
 const taskId = computed(() => (route.query.taskId as string) || '')
 
+/** 任务选择器状态 */
+const selectedTaskId = ref('')
+const availableTasks = ref<PerformanceTaskListItem[]>([])
+const tasksLoading = ref(false)
+
+/** 加载可选任务列表（已完成/运行中的任务） */
+async function loadAvailableTasks() {
+  tasksLoading.value = true
+  try {
+    const res = await listTasks({ page: 1, pageSize: 100 })
+    availableTasks.value = (res.items || []).filter(
+      t => t.status === 'running' || t.status === 'completed' || t.status === 'failed'
+    )
+  } catch { /* ignore */ } finally {
+    tasksLoading.value = false
+  }
+}
+
+/** 选中任务后跳转 */
+function onTaskSelected(id: string) {
+  if (id) {
+    router.push({ path: '/performance/monitor', query: { taskId: id } })
+  }
+}
+
 // 连接状态
 const connectionStatus = ref<'disconnected' | 'connecting' | 'connected'>('disconnected')
 const connectionStatusText = computed(() => {
@@ -349,6 +400,9 @@ onMounted(() => {
       initCharts()
       connectWs()
     })
+  } else {
+    // 无任务时加载可选项，方便从侧边栏直接进入
+    loadAvailableTasks()
   }
 })
 

frontend/src/views/performance/ReportPanel.vue

@@ -8,10 +8,34 @@
 
 <template>
   <div class="report-panel">
-    <!-- 无任务时提示 -->
+    <!-- 无任务时提示 → 提供任务选择器 -->
     <div v-if="!taskId" class="empty-state">
       <el-icon :size="48"><Document /></el-icon>
-      <p>请从任务列表选择任务查看报告</p>
+      <p style="margin-bottom: 16px;">请选择要查看报告的任务</p>
+      <el-select
+        v-model="selectedTaskId"
+        placeholder="选择任务"
+        filterable
+        clearable
+        style="width: 360px"
+        @change="onTaskSelected"
+      >
+        <el-option
+          v-for="t in availableTasks"
+          :key="t.id"
+          :label="`${t.name} (${t.id.slice(0, 8)}...)`"
+          :value="t.id"
+        />
+      </el-select>
+      <el-button
+        v-if="selectedTaskId"
+        type="primary"
+        style="margin-left: 12px;"
+        @click="onTaskSelected(selectedTaskId)"
+      >查看报告</el-button>
+      <p v-if="tasksLoading" style="margin-top: 12px; color: #909399; font-size: 13px;">
+        加载中...
+      </p>
     </div>
 
     <template v-else>
@@ -147,18 +171,45 @@
  */
 
 import { ref, watch, onMounted, onUnmounted, nextTick, computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Document, Refresh, Download } from '@element-plus/icons-vue'
 import * as echarts from 'echarts'
-import { getReport } from '@/api/performance'
+import { getReport, listTasks } from '@/api/performance'
 import type { PerformanceReportResponse } from '@/types/performance'
 import type { EChartsOption } from 'echarts'
+import type { PerformanceTaskListItem } from '@/types/performance'
 
 const route = useRoute()
+const router = useRouter()
 /** 从路由 query 读取任务 ID（由任务列表报告按钮跳转携带） */
 const taskId = computed(() => (route.query.taskId as string) || '')
 
+/** 任务选择器状态 */
+const selectedTaskId = ref('')
+const availableTasks = ref<PerformanceTaskListItem[]>([])
+const tasksLoading = ref(false)
+
+/** 加载可选任务列表（已完成/失败的任务才能查看报告） */
+async function loadAvailableTasks() {
+  tasksLoading.value = true
+  try {
+    const res = await listTasks({ page: 1, pageSize: 100 })
+    availableTasks.value = (res.items || []).filter(
+      t => t.status === 'completed' || t.status === 'failed'
+    )
+  } catch { /* ignore */ } finally {
+    tasksLoading.value = false
+  }
+}
+
+/** 选中任务后跳转 */
+function onTaskSelected(id: string) {
+  if (id) {
+    router.push({ path: '/performance/report', query: { taskId: id } })
+  }
+}
+
 const loading = ref(false)
 const report = ref<PerformanceReportResponse | null>(null)
 
@@ -304,6 +355,8 @@ watch(() => route.query.taskId, (newId) => {
 onMounted(() => {
   if (taskId.value) {
     loadReport()
+  } else {
+    loadAvailableTasks()
   }
 })