feat(task-logs): 优化任务中心日志前端展示

- 引入 @tanstack/vue-virtual 实现虚拟滚动，仅渲染可见区域日志行
- 添加自动滚动开关，用户可手动控制是否自动滚动
- 实现用户滚动检测，向上滚动时暂停自动滚动，滚到底部时恢复
- 优化日志面板头部布局，添加自动滚动开关 UI

关联 PR: #119

frontend/src/views/task/TaskCenter.vue

@@ -54,11 +54,38 @@
             <span class="selected-name">{{ selectedTaskName }}</span>
             <span v-if="isStreaming" class="streaming-indicator">● 实时更新中</span>
           </h3>
-          <span class="meta">{{ selectedTaskMeta }}</span>
+          <div class="panel-actions">
+            <el-switch
+              v-model="autoScroll"
+              active-text="自动滚动"
+              class="auto-scroll-switch"
+            />
+            <span class="meta">{{ selectedTaskMeta }}</span>
+          </div>
         </div>
-        <div class="panel-body log-stream">
-          <div v-for="(log, index) in logs" :key="index" :class="['task-log-line', log.class]">
-            <span class="t">{{ log.time }}</span>{{ log.message }}
+        <div
+          ref="logContainerRef"
+          class="panel-body log-stream"
+          @scroll="handleScroll"
+        >
+          <!-- 虚拟滚动容器 -->
+          <div
+            :style="{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }"
+          >
+            <div
+              v-for="virtualRow in virtualizer.getVirtualItems()"
+              :key="String(virtualRow.key)"
+              :class="['task-log-line', logs[virtualRow.index].class]"
+              :style="{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                transform: `translateY(${virtualRow.start}px)`,
+              }"
+            >
+              <span class="t">{{ logs[virtualRow.index].time }}</span>{{ logs[virtualRow.index].message }}
+            </div>
           </div>
           <div v-if="loadingLogs" class="task-log-line">
             <span class="t">...</span>加载中
@@ -73,10 +100,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { taskLogApi, createTaskLogStream, type TaskLogLine, type TaskLogSummary } from '@/api/taskLog'
 import { useBusinessLineStore } from '@/stores/businessLine'
 import { useBusinessLineMockProfile } from '@/utils/businessLineMock'
+import { useVirtualizer } from '@tanstack/vue-virtual'
 
 const { currentName } = useBusinessLineMockProfile()
 const businessLineStore = useBusinessLineStore()
@@ -90,6 +118,16 @@ const loadingLogs = ref(false)
 const lastLoadedAt = ref<Date | null>(null)
 const isStreaming = ref(false)
 let eventSource: EventSource | null = null
+const autoScroll = ref(true)
+const logContainerRef = ref<HTMLDivElement | null>(null)
+
+// 虚拟滚动配置
+const virtualizer = useVirtualizer({
+  count: logs.value.length,
+  getScrollElement: () => logContainerRef.value,
+  estimateSize: () => 20,
+  overscan: 5,
+})
 
 const selectedTask = computed(() => tasks.value.find((task) => task.id === selectedTaskId.value))
 const selectedTaskName = computed(() => selectedTask.value?.name || '未选择')
@@ -169,13 +207,28 @@ function stopStream() {
 }
 
 function scrollToBottom() {
-  // 延迟滚动，等待 DOM 更新
-  setTimeout(() => {
-    const logStream = document.querySelector('.log-stream')
-    if (logStream) {
-      logStream.scrollTop = logStream.scrollHeight
+  if (!autoScroll.value) return
+
+  nextTick(() => {
+    if (logContainerRef.value) {
+      logContainerRef.value.scrollTop = logContainerRef.value.scrollHeight
     }
-  }, 50)
+  })
+}
+
+function handleScroll() {
+  if (!logContainerRef.value) return
+
+  const { scrollTop, scrollHeight, clientHeight } = logContainerRef.value
+  const distanceFromBottom = scrollHeight - scrollTop - clientHeight
+
+  // 距离底部小于 50px 时认为在底部，恢复自动滚动
+  if (distanceFromBottom < 50) {
+    autoScroll.value = true
+  } else if (distanceFromBottom > 100) {
+    // 用户向上滚动超过 100px 时暂停自动滚动
+    autoScroll.value = false
+  }
 }
 
 function selectTask(taskId: string) {
@@ -302,6 +355,7 @@ onUnmounted(() => {
 
 .task-log-panel .panel-head {
   gap: 14px;
+  flex-wrap: wrap;
 }
 
 .task-log-panel .panel-head h3 {
@@ -311,6 +365,10 @@ onUnmounted(() => {
   gap: 10px;
 }
 
+.task-log-panel .panel-head .panel-actions {
+  margin-left: auto;
+}
+
 .selected-name {
   color: var(--text-dim);
   font-weight: 500;
@@ -327,6 +385,16 @@ onUnmounted(() => {
   50% { opacity: 0.5; }
 }
 
+.panel-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.auto-scroll-switch {
+  --el-switch-on-color: var(--accent);
+}
+
 .log-stream {
   max-height: calc(100vh - 210px);
   min-height: 520px;