Merge branch 'main' into feat/base-service-delivery

2026-07-28 18:03:04 +08:00
parent 93981b9aad 408aa3af0d
commit f28bc99401
8 changed files with 443 additions and 55 deletions
@@ -22,6 +22,7 @@ declare module 'vue' {
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    RouterLink: typeof import('vue-router')['RouterLink']
@@ -9,6 +9,7 @@
      "version": "0.1.0",
      "dependencies": {
        "@element-plus/icons-vue": "^2.1.0",
+        "@tanstack/vue-virtual": "^3.13.34",
        "axios": "^1.5.0",
        "element-plus": "^2.3.12",
        "pinia": "^2.1.4",
@@ -735,9 +736,6 @@
        "arm"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -752,9 +750,6 @@
        "arm"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -769,9 +764,6 @@
        "arm64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -786,9 +778,6 @@
        "arm64"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -803,9 +792,6 @@
        "loong64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -820,9 +806,6 @@
        "loong64"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -837,9 +820,6 @@
        "ppc64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -854,9 +834,6 @@
        "ppc64"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -871,9 +848,6 @@
        "riscv64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -888,9 +862,6 @@
        "riscv64"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -905,9 +876,6 @@
        "s390x"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -922,9 +890,6 @@
        "x64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -939,9 +904,6 @@
        "x64"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1032,6 +994,32 @@
        "win32"
      ]
    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.17.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.17.6.tgz",
+      "integrity": "sha512-h0/Ebo18CkOrChlQIhNtQkM5ySUnh/GumQ/D1st3hG2HWUPEF+ILUc2k29UtivCi/9G7w7G3/f7Xyd5cCFbKBw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-virtual": {
+      "version": "3.13.34",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.34.tgz",
+      "integrity": "sha512-CBqbCcnVsKpl9IJ7frPnbBmAqmc7JttSySg04kgLYJ4yYuC8JsAbtUHP0yLtWGLyByjihN3SwaDCgHQ+Z4iPoA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.17.6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
    "node_modules/@types/estree": {
      "version": "1.0.9",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -9,19 +9,20 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.4",
-    "pinia": "^2.1.4",
-    "element-plus": "^2.3.12",
    "@element-plus/icons-vue": "^2.1.0",
-    "axios": "^1.5.0"
+    "@tanstack/vue-virtual": "^3.13.34",
+    "axios": "^1.5.0",
+    "element-plus": "^2.3.12",
+    "pinia": "^2.1.4",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.4",
    "typescript": "^5.2.2",
-    "vite": "^6.4.3",
-    "vue-tsc": "^2.2.12",
    "unplugin-auto-import": "^0.16.6",
-    "unplugin-vue-components": "^0.25.2"
+    "unplugin-vue-components": "^0.25.2",
+    "vite": "^6.4.3",
+    "vue-tsc": "^2.2.12"
  }
 }
@@ -79,3 +79,49 @@ function parseResponseBody(text: string) {
    return { error: text }
  }
 }
+
+export interface TaskLogStreamCallbacks {
+  onInit?: (lines: TaskLogLine[]) => void
+  onUpdate?: (lines: TaskLogLine[]) => void
+  onFinished?: () => void
+  onError?: (error: string) => void
+}
+
+export function createTaskLogStream(taskId: string, callbacks: TaskLogStreamCallbacks): EventSource {
+  const token = getToken()
+  const url = `/auth/api/v1/task-logs/stream?task_id=${encodeURIComponent(taskId)}&access_token=${encodeURIComponent(token || '')}`
+
+  const es = new EventSource(url)
+
+  es.onmessage = (event) => {
+    try {
+      const data = JSON.parse(event.data)
+      switch (data.type) {
+        case 'init':
+          callbacks.onInit?.(Array.isArray(data.lines) ? data.lines : [])
+          break
+        case 'update':
+          callbacks.onUpdate?.(Array.isArray(data.lines) ? data.lines : [])
+          break
+        case 'finished':
+          callbacks.onFinished?.()
+          es.close()
+          break
+        case 'error':
+          callbacks.onError?.(data.error || 'Unknown error')
+          break
+      }
+    } catch {
+      // ignore parse errors for heartbeat etc.
+    }
+  }
+
+  es.onerror = () => {
+    // EventSource will auto-reconnect, but we report connection errors
+    if (es.readyState === EventSource.CLOSED) {
+      callbacks.onError?.('Connection closed')
+    }
+  }
+
+  return es
+}
@@ -52,12 +52,40 @@
          <h3>
            <span>任务日志</span>
            <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>加载中
@@ -72,10 +100,11 @@
 </template>

 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
-import { taskLogApi, type TaskLogLine, type TaskLogSummary } from '@/api/taskLog'
+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()
@@ -87,6 +116,18 @@ const logs = ref<TaskLogLine[]>([])
 const loadingTasks = ref(false)
 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 || '未选择')
@@ -122,6 +163,8 @@ async function loadLogs(taskId: string) {
    const data = await taskLogApi.get(taskId)
    logs.value = data.lines
    lastLoadedAt.value = new Date()
+    // 启动 SSE 流式更新
+    startStream(taskId)
  } catch (error) {
    logs.value = [{ time: formatTime(new Date()), message: error instanceof Error ? error.message : '任务日志加载失败', class: 'err' }]
  } finally {
@@ -129,14 +172,99 @@ async function loadLogs(taskId: string) {
  }
 }

+function startStream(taskId: string) {
+  stopStream() // 关闭之前的连接
+
+  eventSource = createTaskLogStream(taskId, {
+    onInit: (lines) => {
+      logs.value = lines
+      lastLoadedAt.value = new Date()
+      scrollToBottom()
+    },
+    onUpdate: (newLines) => {
+      logs.value = [...logs.value, ...newLines]
+      lastLoadedAt.value = new Date()
+      scrollToBottom()
+    },
+    onFinished: () => {
+      isStreaming.value = false
+    },
+    onError: (error) => {
+      console.error('SSE error:', error)
+      isStreaming.value = false
+    },
+  })
+
+  isStreaming.value = true
+}
+
+function stopStream() {
+  if (eventSource) {
+    eventSource.close()
+    eventSource = null
+    isStreaming.value = false
+  }
+}
+
+function scrollToBottom() {
+  if (!autoScroll.value) return
+
+  nextTick(() => {
+    if (logContainerRef.value) {
+      logContainerRef.value.scrollTop = logContainerRef.value.scrollHeight
+    }
+  })
+}
+
+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) {
  if (selectedTaskId.value === taskId) {
    return
  }
+  stopStream() // 停止之前的流
  selectedTaskId.value = taskId
  void loadLogs(taskId)
 }

+function scrollToBottom() {
+  if (!autoScroll.value) return
+
+  nextTick(() => {
+    if (logContainerRef.value) {
+      logContainerRef.value.scrollTop = logContainerRef.value.scrollHeight
+    }
+  })
+}
+
+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 refreshCurrent() {
  void loadTasks()
 }
@@ -155,6 +283,10 @@ watch(
 onMounted(() => {
  void loadTasks()
 })
+
+onUnmounted(() => {
+  stopStream()
+})
 </script>

 <style scoped>
@@ -248,6 +380,7 @@ onMounted(() => {

 .task-log-panel .panel-head {
  gap: 14px;
+  flex-wrap: wrap;
 }

 .task-log-panel .panel-head h3 {
@@ -257,11 +390,36 @@ onMounted(() => {
  gap: 10px;
 }

+.task-log-panel .panel-head .panel-actions {
+  margin-left: auto;
+}
+
 .selected-name {
  color: var(--text-dim);
  font-weight: 500;
 }

+.streaming-indicator {
+  font-size: 11px;
+  color: var(--accent);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  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;