From 82642db70ffe599bf1682e642fdca0b13bfac4ce Mon Sep 17 00:00:00 2001
From: lixiaolong <702156524@qq.com>
Date: Wed, 12 Aug 2026 14:39:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor(log):=20=E6=9B=BF=E6=8D=A2=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E6=97=A5=E5=BF=97=E7=BB=84=E4=BB=B6=E4=B8=BA=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E6=89=A7=E8=A1=8C=E6=97=A5=E5=BF=97=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 inspection 和 intelligenceTest 模块中的重复日志显示代码
- 引入统一的 TaskExecutionLog 组件处理日志渲染逻辑
- 新组件支持多媒体内容展示包括图片、视频和音频
- 实现媒体资源自动解析和预览功能
- 优化滚动到底部逻辑确保日志实时显示
- 采用响应式布局适配不同屏幕尺寸
---
 .../flow/components/TaskExecutionLog.vue      | 162 ++++++++++++++++++
 src/views/inspection/runTask/task-log.vue     |  75 +-------
 .../intelligenceTest/runningTask/task-log.vue |  73 +-------
 3 files changed, 176 insertions(+), 134 deletions(-)
 create mode 100644 src/views/flow/components/TaskExecutionLog.vue

diff --git a/src/views/flow/components/TaskExecutionLog.vue b/src/views/flow/components/TaskExecutionLog.vue
new file mode 100644
index 0000000..f48ead2
--- /dev/null
+++ b/src/views/flow/components/TaskExecutionLog.vue
@@ -0,0 +1,162 @@
+<template>
+  <div ref="messageContainer" class="task-log" :style="{ height: `${height}px` }">
+    <div v-for="(log, index) in list" :key="log.id || index" class="task-log__item">
+      <div class="task-log__time">{{ formatDate(log.logTime) }}</div>
+      <div class="task-log__body">
+        <div class="task-log__content">{{ log.logContent }}</div>
+        <div v-if="mediaOf(log).length" class="task-log__media">
+          <template v-for="media in mediaOf(log)" :key="`${media.type}:${media.url}`">
+            <el-image
+              v-if="media.type === 'image'"
+              class="task-log__image"
+              :src="media.url"
+              :preview-src-list="imageUrlsOf(log)"
+              preview-teleported
+              fit="cover"
+            />
+            <video v-else-if="media.type === 'video'" class="task-log__video" :src="media.url" controls preload="metadata" />
+            <audio v-else class="task-log__audio" :src="media.url" controls preload="metadata" />
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { formatDate } from '@/utils/index'
+
+const props = defineProps({
+  list: { type: Array, default: () => [] },
+  height: { type: Number, default: 150 },
+})
+
+const messageContainer = ref(null)
+const mediaCache = new WeakMap()
+
+const parseObject = (value) => {
+  if (!value) return {}
+  if (typeof value === 'object') return value
+  try {
+    const parsed = JSON.parse(value)
+    return parsed && typeof parsed === 'object' ? parsed : {}
+  } catch {
+    return {}
+  }
+}
+
+const addMedia = (result, seen, type, value) => {
+  const values = Array.isArray(value) ? value : [value]
+  values.forEach((item) => {
+    const url = typeof item === 'string' ? item.trim() : ''
+    const key = `${type}:${url}`
+    if (url && !seen.has(key)) {
+      seen.add(key)
+      result.push({ type, url })
+    }
+  })
+}
+
+const mediaOf = (log) => {
+  if (!log || typeof log !== 'object') return []
+  if (mediaCache.has(log)) return mediaCache.get(log)
+  const result = []
+  const seen = new Set()
+  const output = {
+    ...parseObject(log.actualResult),
+    ...parseObject(log.extraInfo),
+  }
+  addMedia(result, seen, 'image', output.imageUrl)
+  addMedia(result, seen, 'video', output.videoUrl)
+  addMedia(result, seen, 'audio', output.audioUrl)
+  addMedia(result, seen, 'image', log.screenshotUrl)
+  addMedia(result, seen, 'video', log.videoUrl)
+  const legacyType = Number(log.logType) === 2 ? 'image'
+    : Number(log.logType) === 3 ? 'video'
+      : Number(log.logType) === 4 ? 'audio' : ''
+  if (legacyType) addMedia(result, seen, legacyType, log.mediaUrl)
+  mediaCache.set(log, result)
+  return result
+}
+
+const imageUrlsOf = (log) => mediaOf(log)
+  .filter((item) => item.type === 'image')
+  .map((item) => item.url)
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (messageContainer.value) messageContainer.value.scrollTop = messageContainer.value.scrollHeight
+  })
+}
+
+watch(() => props.list, scrollToBottom, { deep: true })
+onMounted(scrollToBottom)
+</script>
+
+<style scoped lang="scss">
+.task-log {
+  margin-top: 12px;
+  padding: 12px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 8px;
+}
+
+.task-log__item {
+  display: grid;
+  grid-template-columns: 145px minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+  margin-bottom: 10px;
+}
+
+.task-log__time {
+  color: #999;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.task-log__body {
+  min-width: 0;
+}
+
+.task-log__content {
+  color: #333;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.task-log__media {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.task-log__image {
+  width: 96px;
+  height: 72px;
+  border-radius: 4px;
+}
+
+.task-log__video {
+  width: min(320px, 100%);
+  max-height: 220px;
+  background: #111;
+  border-radius: 4px;
+}
+
+.task-log__audio {
+  width: min(340px, 100%);
+  height: 40px;
+}
+
+@media (max-width: 640px) {
+  .task-log__item {
+    grid-template-columns: 1fr;
+    gap: 3px;
+  }
+}
+</style>
diff --git a/src/views/inspection/runTask/task-log.vue b/src/views/inspection/runTask/task-log.vue
index 97553d1..9156739 100644
--- a/src/views/inspection/runTask/task-log.vue
+++ b/src/views/inspection/runTask/task-log.vue
@@ -1,73 +1,12 @@
 <template>
-    <div class="log-container" :style="{ 'height': height + 'px' }" ref="messageContainer">
-        <div class="log" v-for="log, index in list">
-            <div class="time">{{ formatDate(log.logTime) }}</div>
-            <div class="context">{{ log.logContent }}</div>
-        </div>
-    </div>
+  <TaskExecutionLog :list="list" :height="height" />
 </template>
+
 <script setup>
-import { formatDate } from "@/utils/index";
-import { watch } from "vue";
-const props = defineProps({
-    list: {
-        type: Array,
-        default: () => []
-    },
-    height: {
-        type: Number,
-        default: 150
-    }
+import TaskExecutionLog from '@/views/flow/components/TaskExecutionLog.vue'
+
+defineProps({
+  list: { type: Array, default: () => [] },
+  height: { type: Number, default: 150 },
 })
-
-const messageContainer = ref(null)
-
-const SCROLL_DELAY = 100
-const scrollToBottom = () => {
-    console.log(123, messageContainer.value)
-    nextTick(() => {
-        setTimeout(() => {
-            if (messageContainer.value) {
-                console.log('messageContainer.value.scrollHeight', messageContainer.value.scrollHeight)
-                messageContainer.value.scrollTop = messageContainer.value.scrollHeight
-            }
-        }, SCROLL_DELAY)
-    })
-}
-
-watch(() => props.list, () => {
-    scrollToBottom()
-}, { deep: true })
-
-onMounted(() => {
-    scrollToBottom()
-})
-
 </script>
-<style lang="scss" scoped>
-.log-container {
-    margin-top: 12px;
-    overflow-y: auto;
-    background: #fff;
-    border: 1px solid #eee;
-    border-radius: 8px;
-    padding: 12px;
-
-    .log {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        margin-bottom: 8px;
-
-        .time {
-            color: #999;
-            font-size: 14px;
-        }
-
-        .context {
-            color: #333;
-            font-size: 14px;
-        }
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/intelligenceTest/runningTask/task-log.vue b/src/views/intelligenceTest/runningTask/task-log.vue
index 28b562b..9156739 100644
--- a/src/views/intelligenceTest/runningTask/task-log.vue
+++ b/src/views/intelligenceTest/runningTask/task-log.vue
@@ -1,71 +1,12 @@
 <template>
-    <div class="log-container" :style="{ 'height': height + 'px' }" ref="messageContainer">
-        <div class="log" v-for="log, index in list">
-            <div class="time">{{ formatDate(log.logTime) }}</div>
-            <div class="context">{{ log.logContent }}</div>
-        </div>
-    </div>
+  <TaskExecutionLog :list="list" :height="height" />
 </template>
+
 <script setup>
-import { formatDate } from "@/utils/index";
-import { watch } from "vue";
-const props = defineProps({
-    list: {
-        type: Array,
-        default: () => []
-    },
-    height: {
-        type: Number,
-        default: 150
-    }
+import TaskExecutionLog from '@/views/flow/components/TaskExecutionLog.vue'
+
+defineProps({
+  list: { type: Array, default: () => [] },
+  height: { type: Number, default: 150 },
 })
-
-const messageContainer = ref(null)
-
-const SCROLL_DELAY = 100
-const scrollToBottom = () => {
-    nextTick(() => {
-        setTimeout(() => {
-            if (messageContainer.value) {
-                messageContainer.value.scrollTop = messageContainer.value.scrollHeight
-            }
-        }, SCROLL_DELAY)
-    })
-}
-
-watch(() => props.list, () => {
-    scrollToBottom()
-}, { deep: true })
-
-onMounted(() => {
-    scrollToBottom()
-})
-
 </script>
-<style lang="scss" scoped>
-.log-container {
-    margin-top: 12px;
-    overflow-y: auto;
-    background: #fff;
-    border: 1px solid #eee;
-    border-radius: 8px;
-    padding: 12px;
-
-    .log {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        margin-bottom: 8px;
-
-        .time {
-            color: #999;
-            font-size: 14px;
-        }
-
-        .context {
-            color: #333;
-            font-size: 14px;
-        }
-    }
-}
-</style>
\ No newline at end of file