From 942126699bf77bf7195a3bc7b34e2723bba21f55 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 29 Oct 2026 19:29:37 +0800
Subject: [PATCH] feat: detail

---
 .../ai-chat-node/details/application.vue      | 27 ++++++---
 .../nodes/ai-chat-node/details/knowledge.vue  | 27 ++++++---
 .../image-to-video-node/details/index.vue     | 59 ++++++++++++-------
 .../details/application.vue                   | 30 ++++++----
 .../details/knowledge.vue                     | 12 ++--
 .../nodes/reranker-node/details/index.vue     |  1 +
 .../search-knowledge-node/details/index.vue   |  1 +
 .../speech-to-text-node/details/index.vue     | 14 ++++-
 .../details/application.vue                   | 32 +++++++---
 .../details/knowledge.vue                     | 14 ++++-
 10 files changed, 157 insertions(+), 60 deletions(-)

diff --git a/ui/src/workflow-canvas/nodes/ai-chat-node/details/application.vue b/ui/src/workflow-canvas/nodes/ai-chat-node/details/application.vue
index 913f5cac73f..3f2aad6db63 100644
--- a/ui/src/workflow-canvas/nodes/ai-chat-node/details/application.vue
+++ b/ui/src/workflow-canvas/nodes/ai-chat-node/details/application.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import ImageUploadCard from '@/components/mk-drag-upload/ImageUploadCard.vue'
+import MkVideo from '@/components/global/mk-media-preview/MkVideo.vue'
+import { getFileIconUrl } from '@/utils/icon'
 import DetailContainer from '@/workflow-canvas/execution-details/DetailContainer.vue'
 import BaseHeader from '@/workflow-canvas/execution-details/BaseHeader.vue'
 import type { ExecutionNodeDetail } from '@/workflow-canvas/execution-details/types'
@@ -42,14 +45,24 @@ defineProps<{
       <div class="whitespace-pre-wrap space-y-2">
         <template v-if="Array.isArray(data.question)">
           <div v-for="(item, qIndex) in data.question" :key="qIndex">
-            <el-image class="size-8" v-if="item.type === 'image_url'" :src="item.image_url?.url || item.image_url" fit="cover" />
-            <video
-              v-else-if="item.type === 'video_url'"
-              :src="item.video_url?.url || item.video_url"
-              class="block w-14 rounded-md"
-              autoplay
-              controls
+            <!-- 查看本次对话图片 -->
+            <ImageUploadCard
+              v-if="item.type === 'image_url'"
+              :file="{ name: '图片', status: 'success' }"
+              :src="item.image_url?.url || item.image_url"
+              :size="32"
+              :show-remove="false"
+              :preview-src-list="[item.image_url?.url || item.image_url]"
             />
+            <!-- 点击卡片播放本次对话视频 -->
+            <MkVideo v-else-if="item.type === 'video_url'" :src="item.video_url?.url || item.video_url" name="视频" class="w-60 max-w-full">
+              <el-card shadow="never" class="small cursor-pointer">
+                <div class="flex-align-center gap-2">
+                  <img :src="getFileIconUrl('video.mp4')" alt="" width="24" class="shrink-0" />
+                  <span class="min-w-0 truncate">视频</span>
+                </div>
+              </el-card>
+            </MkVideo>
             <div v-else-if="item.type === 'text'">{{ item.text }}</div>
             <div v-else>{{ item }}</div>
           </div>
diff --git a/ui/src/workflow-canvas/nodes/ai-chat-node/details/knowledge.vue b/ui/src/workflow-canvas/nodes/ai-chat-node/details/knowledge.vue
index b2af938c2f0..7c43a262b08 100644
--- a/ui/src/workflow-canvas/nodes/ai-chat-node/details/knowledge.vue
+++ b/ui/src/workflow-canvas/nodes/ai-chat-node/details/knowledge.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import ImageUploadCard from '@/components/mk-drag-upload/ImageUploadCard.vue'
+import MkVideo from '@/components/global/mk-media-preview/MkVideo.vue'
+import { getFileIconUrl } from '@/utils/icon'
 import DetailContainer from '@/workflow-canvas/execution-details/DetailContainer.vue'
 import BaseHeader from '@/workflow-canvas/execution-details/BaseHeader.vue'
 import type { ExecutionNodeDetail } from '@/workflow-canvas/execution-details/types'
@@ -28,14 +31,24 @@ defineProps<{
       <div class="whitespace-pre-wrap space-y-2">
         <template v-if="Array.isArray(data.question)">
           <div v-for="(item, qIndex) in data.question" :key="qIndex">
-            <el-image class="size-8" v-if="item.type === 'image_url'" :src="item.image_url?.url || item.image_url" fit="cover" />
-            <video
-              v-else-if="item.type === 'video_url'"
-              :src="item.video_url?.url || item.video_url"
-              class="block w-14 rounded-md"
-              autoplay
-              controls
+            <!-- 查看本次对话图片 -->
+            <ImageUploadCard
+              v-if="item.type === 'image_url'"
+              :file="{ name: '图片', status: 'success' }"
+              :src="item.image_url?.url || item.image_url"
+              :size="32"
+              :show-remove="false"
+              :preview-src-list="[item.image_url?.url || item.image_url]"
             />
+            <!-- 点击卡片播放本次对话视频 -->
+            <MkVideo v-else-if="item.type === 'video_url'" :src="item.video_url?.url || item.video_url" name="视频" class="w-full">
+              <el-card shadow="never" class="small cursor-pointer">
+                <div class="flex-align-center gap-2">
+                  <img :src="getFileIconUrl('video.mp4')" alt="" width="24" class="shrink-0" />
+                  <span class="min-w-0 truncate">视频</span>
+                </div>
+              </el-card>
+            </MkVideo>
             <div v-else-if="item.type === 'text'">{{ item.text }}</div>
             <div v-else>{{ item }}</div>
           </div>
diff --git a/ui/src/workflow-canvas/nodes/image-to-video-node/details/index.vue b/ui/src/workflow-canvas/nodes/image-to-video-node/details/index.vue
index b68ef8336ca..615087b986b 100644
--- a/ui/src/workflow-canvas/nodes/image-to-video-node/details/index.vue
+++ b/ui/src/workflow-canvas/nodes/image-to-video-node/details/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ImageUploadCard from '@/components/mk-drag-upload/ImageUploadCard.vue'
 import DetailContainer from '@/workflow-canvas/execution-details/DetailContainer.vue'
 import BaseHeader from '@/workflow-canvas/execution-details/BaseHeader.vue'
 import type { ExecutionNodeDetail } from '@/workflow-canvas/execution-details/types'
@@ -33,17 +34,26 @@ defineProps<{
     <div class="mk-gray-card-sm">
       <h6 class="mb-2">首帧</h6>
       <div class="whitespace-pre-wrap space-y-2">
-        <el-image class="size-8" v-if="typeof data.first_frame_url === 'string'" :src="data.first_frame_url" fit="cover" />
+        <!-- 查看首帧图片 -->
+        <ImageUploadCard
+          v-if="typeof data.first_frame_url === 'string'"
+          :file="{ name: '首帧', status: 'success' }"
+          :src="data.first_frame_url"
+          :size="32"
+          :show-remove="false"
+          :preview-src-list="[data.first_frame_url]"
+        />
         <div v-else-if="Array.isArray(data.first_frame_url)" class="flex flex-wrap gap-2">
-          <el-image
-            class="size-8"
-            v-for="(f, i) in data.first_frame_url"
-            :key="i"
-            :src="f.url"
-            fit="cover"
-            :preview-src-list="data.first_frame_url.map((img: any) => img.url)"
-            :scale="0.8"
-            :initial-index="i"
+          <!-- 查看首帧图片列表 -->
+          <ImageUploadCard
+            v-for="(file, index) in data.first_frame_url"
+            :key="index"
+            :file="{ ...file, name: file.name || '首帧', status: 'success' }"
+            :src="file.url"
+            :size="32"
+            :show-remove="false"
+            :preview-src-list="data.first_frame_url.map((image: { url: string }) => image.url)"
+            :initial-index="index"
           />
         </div>
         <template v-else>-</template>
@@ -53,17 +63,26 @@ defineProps<{
     <div class="mk-gray-card-sm">
       <h6 class="mb-2">末帧</h6>
       <div class="whitespace-pre-wrap space-y-2">
-        <el-image class="size-8" v-if="typeof data.last_frame_url === 'string'" :src="data.last_frame_url" fit="cover" />
+        <!-- 查看末帧图片 -->
+        <ImageUploadCard
+          v-if="typeof data.last_frame_url === 'string'"
+          :file="{ name: '末帧', status: 'success' }"
+          :src="data.last_frame_url"
+          :size="32"
+          :show-remove="false"
+          :preview-src-list="[data.last_frame_url]"
+        />
         <div v-else-if="Array.isArray(data.last_frame_url)" class="flex flex-wrap gap-2">
-          <el-image
-            class="size-8"
-            v-for="(f, i) in data.last_frame_url"
-            :key="i"
-            :src="f.url"
-            fit="cover"
-            :preview-src-list="data.last_frame_url.map((img: any) => img.url)"
-            :scale="0.8"
-            :initial-index="i"
+          <!-- 查看末帧图片列表 -->
+          <ImageUploadCard
+            v-for="(file, index) in data.last_frame_url"
+            :key="index"
+            :file="{ ...file, name: file.name || '末帧', status: 'success' }"
+            :src="file.url"
+            :size="32"
+            :show-remove="false"
+            :preview-src-list="data.last_frame_url.map((image: { url: string }) => image.url)"
+            :initial-index="index"
           />
         </div>
         <template v-else>-</template>
diff --git a/ui/src/workflow-canvas/nodes/image-understand-node/details/application.vue b/ui/src/workflow-canvas/nodes/image-understand-node/details/application.vue
index 65462f0a744..9ae7f9534e9 100644
--- a/ui/src/workflow-canvas/nodes/image-understand-node/details/application.vue
+++ b/ui/src/workflow-canvas/nodes/image-understand-node/details/application.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ImageUploadCard from '@/components/mk-drag-upload/ImageUploadCard.vue'
 import DetailContainer from '@/workflow-canvas/execution-details/DetailContainer.vue'
 import BaseHeader from '@/workflow-canvas/execution-details/BaseHeader.vue'
 import type { ExecutionNodeDetail } from '@/workflow-canvas/execution-details/types'
@@ -25,19 +26,27 @@ defineProps<{
       <h6 class="mb-2">历史记录</h6>
       <div class="space-y-2">
         <template v-if="data.history_message?.length > 0">
-          <p v-for="(history, historyIndex) in data.history_message" :key="historyIndex" class="mb-2 last:mb-0">
+          <div v-for="(history, historyIndex) in data.history_message" :key="historyIndex" class="mb-2 last:mb-0">
             <span class="mr-1 text-N600">{{ history.role }}：</span>
             <template v-if="Array.isArray(history.content)">
-              <span v-for="(h, i) in history.content" :key="i">
-                <el-image class="size-8" v-if="h.type === 'image_url'" :src="h.image_url.url" fit="cover" />
+              <div v-for="(h, i) in history.content" :key="i">
+                <!-- 查看历史对话图片 -->
+                <ImageUploadCard
+                  v-if="h.type === 'image_url'"
+                  :file="{ name: '图片', status: 'success' }"
+                  :src="h.image_url.url"
+                  :size="104"
+                  :show-remove="false"
+                  :preview-src-list="[h.image_url.url]"
+                />
                 <span v-else>
                   {{ h.text }}
                   <br />
                 </span>
-              </span>
+              </div>
             </template>
             <span v-else>{{ history.content }}</span>
-          </p>
+          </div>
         </template>
         <template v-else>-</template>
       </div>
@@ -47,15 +56,16 @@ defineProps<{
       <h6 class="mb-2">本次对话</h6>
       <div class="whitespace-pre-wrap space-y-2">
         <div v-if="data.image_list?.length > 0" class="flex flex-wrap gap-2">
-          <el-image
-            class="size-8"
+          <!-- 查看本次对话图片 -->
+          <ImageUploadCard
             v-for="(f, i) in data.image_list"
             :key="i"
+            :file="{ ...f, name: f.name || '图片', status: 'success' }"
             :src="f.url || (f.file_id ? `./oss/file/${f.file_id}` : '')"
-            fit="cover"
+            :size="104"
+            :show-remove="false"
             :preview-src-list="data.image_list.map((img: any) => img.url || (img.file_id ? `./oss/file/${img.file_id}` : ''))"
-            :scale="0.8"
-            :initial-index="i"
+            :initial-index="Number(i)"
           />
         </div>
         <div>{{ data.question || '-' }}</div>
diff --git a/ui/src/workflow-canvas/nodes/image-understand-node/details/knowledge.vue b/ui/src/workflow-canvas/nodes/image-understand-node/details/knowledge.vue
index 88f82df537c..14d38a1b7e5 100644
--- a/ui/src/workflow-canvas/nodes/image-understand-node/details/knowledge.vue
+++ b/ui/src/workflow-canvas/nodes/image-understand-node/details/knowledge.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ImageUploadCard from '@/components/mk-drag-upload/ImageUploadCard.vue'
 import DetailContainer from '@/workflow-canvas/execution-details/DetailContainer.vue'
 import BaseHeader from '@/workflow-canvas/execution-details/BaseHeader.vue'
 import type { ExecutionNodeDetail } from '@/workflow-canvas/execution-details/types'
@@ -25,15 +26,16 @@ defineProps<{
       <h6 class="mb-2">用户提示词</h6>
       <div class="whitespace-pre-wrap space-y-2">
         <div v-if="data.image_list?.length > 0" class="flex flex-wrap gap-2">
-          <el-image
-            class="size-8"
+          <!-- 查看本次对话图片 -->
+          <ImageUploadCard
             v-for="(f, i) in data.image_list"
             :key="i"
+            :file="{ ...f, name: f.name || '图片', status: 'success' }"
             :src="f.url || (f.file_id ? `./oss/file/${f.file_id}` : '')"
-            fit="cover"
+            :size="104"
+            :show-remove="false"
             :preview-src-list="data.image_list.map((img: any) => img.url || (img.file_id ? `./oss/file/${img.file_id}` : ''))"
-            :scale="0.8"
-            :initial-index="i"
+            :initial-index="Number(i)"
           />
         </div>
         <div>{{ data.question || '-' }}</div>
diff --git a/ui/src/workflow-canvas/nodes/reranker-node/details/index.vue b/ui/src/workflow-canvas/nodes/reranker-node/details/index.vue
index 2433a95ed15..9ef0de7ef71 100644
--- a/ui/src/workflow-canvas/nodes/reranker-node/details/index.vue
+++ b/ui/src/workflow-canvas/nodes/reranker-node/details/index.vue
@@ -25,6 +25,7 @@ defineProps<{
 
     <div class="mk-gray-card-sm">
       <h6 class="mb-2">重排内容</h6>
+      <!-- TODO -->
       <div class="space-y-2">
         <template v-if="data.document_list?.length > 0">
           <template v-for="(paragraph, paragraphIndex) in data.document_list" :key="paragraphIndex">
diff --git a/ui/src/workflow-canvas/nodes/search-knowledge-node/details/index.vue b/ui/src/workflow-canvas/nodes/search-knowledge-node/details/index.vue
index e39aee6b0b1..b903e5de094 100644
--- a/ui/src/workflow-canvas/nodes/search-knowledge-node/details/index.vue
+++ b/ui/src/workflow-canvas/nodes/search-knowledge-node/details/index.vue
@@ -56,6 +56,7 @@ function getParagraphImageUrl(paragraph: SearchParagraph) {
 
     <div class="mk-gray-card-sm">
       <h6 class="mb-2">检索结果</h6>
+      <!-- TODO -->
       <div class="space-y-2">
         <template v-if="sortedParagraphs.length > 0">
           <div v-for="(paragraph, paragraphIndex) in sortedParagraphs" :key="paragraphIndex" class="overflow-hidden rounded-md bg-white p-2 mb-2">
diff --git a/ui/src/workflow-canvas/nodes/speech-to-text-node/details/index.vue b/ui/src/workflow-canvas/nodes/speech-to-text-node/details/index.vue
index 9a5fc7883d4..163e5395aab 100644
--- a/ui/src/workflow-canvas/nodes/speech-to-text-node/details/index.vue
+++ b/ui/src/workflow-canvas/nodes/speech-to-text-node/details/index.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import MkAudio from '@/components/global/mk-media-preview/MkAudio.vue'
+import { getFileIconUrl } from '@/utils/icon'
 import DetailContainer from '@/workflow-canvas/execution-details/DetailContainer.vue'
 import BaseHeader from '@/workflow-canvas/execution-details/BaseHeader.vue'
 import type { ExecutionNodeDetail } from '@/workflow-canvas/execution-details/types'
@@ -21,8 +23,16 @@ defineProps<{
       <div>
         <div v-if="data.audio_list?.length > 0">
           <p class="mb-2 text-N600">音频文件：</p>
-          <div class="flex flex-wrap gap-2">
-            <audio v-for="(f, i) in data.audio_list" :key="i" :src="f.url" controls class="rounded-md" style="width: 300px; height: 43px" />
+          <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            <!-- 点击卡片播放输入音频 -->
+            <MkAudio v-for="(file, index) in data.audio_list" :key="index" :src="file.url" :name="file.name || '音频'" class="min-w-0">
+              <el-card shadow="never" class="small cursor-pointer">
+                <div class="flex-align-center gap-2">
+                  <img :src="getFileIconUrl(file.name || 'audio.mp3')" alt="" width="24" class="shrink-0" />
+                  <span class="min-w-0 truncate" :title="file.name || '音频'">{{ file.name || '音频' }}</span>
+                </div>
+              </el-card>
+            </MkAudio>
           </div>
         </div>
       </div>
diff --git a/ui/src/workflow-canvas/nodes/video-understand-node/details/application.vue b/ui/src/workflow-canvas/nodes/video-understand-node/details/application.vue
index 2fc268cfb1d..6a1da5970ce 100644
--- a/ui/src/workflow-canvas/nodes/video-understand-node/details/application.vue
+++ b/ui/src/workflow-canvas/nodes/video-understand-node/details/application.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import MkVideo from '@/components/global/mk-media-preview/MkVideo.vue'
+import { getFileIconUrl } from '@/utils/icon'
 import DetailContainer from '@/workflow-canvas/execution-details/DetailContainer.vue'
 import BaseHeader from '@/workflow-canvas/execution-details/BaseHeader.vue'
 import type { ExecutionNodeDetail } from '@/workflow-canvas/execution-details/types'
@@ -25,19 +27,27 @@ defineProps<{
       <h6 class="mb-2">历史记录</h6>
       <div class="space-y-2">
         <template v-if="data.history_message?.length > 0">
-          <p v-for="(history, historyIndex) in data.history_message" :key="historyIndex" class="mb-2 last:mb-0">
+          <div v-for="(history, historyIndex) in data.history_message" :key="historyIndex" class="mb-2 last:mb-0">
             <span class="text-N600">{{ history.role }}：</span>
             <template v-if="Array.isArray(history.content)">
-              <span v-for="(h, i) in history.content" :key="i">
-                <video v-if="h.type === 'video_url'" :src="h.video_url.url" class="mr-2 inline-block rounded-md" style="width: 40px; height: 40px" />
+              <div v-for="(h, i) in history.content" :key="i">
+                <!-- 点击卡片播放历史对话视频 -->
+                <MkVideo v-if="h.type === 'video_url'" :src="h.video_url.url" name="视频" class="w-full">
+                  <el-card shadow="never" class="small cursor-pointer">
+                    <div class="flex-align-center gap-2">
+                      <img :src="getFileIconUrl('video.mp4')" alt="" width="24" class="shrink-0" />
+                      <span class="min-w-0 truncate">视频</span>
+                    </div>
+                  </el-card>
+                </MkVideo>
                 <span v-else>
                   {{ h.text }}
                   <br />
                 </span>
-              </span>
+              </div>
             </template>
             <span v-else>{{ history.content }}</span>
-          </p>
+          </div>
         </template>
         <template v-else>-</template>
       </div>
@@ -46,8 +56,16 @@ defineProps<{
     <div class="mk-gray-card-sm">
       <h6 class="mb-2">本次对话</h6>
       <div class="whitespace-pre-wrap space-y-2">
-        <div v-if="data.video_list?.length > 0" class="flex flex-wrap gap-2">
-          <video v-for="(f, i) in data.video_list" :key="i" :src="f.url" controls autoplay class="block rounded-md" style="width: 100px" />
+        <div v-if="data.video_list?.length > 0">
+          <!-- 点击卡片播放本次对话视频 -->
+          <MkVideo v-for="(file, index) in data.video_list" :key="index" :src="file.url" :name="file.name || '视频'" class="w-full">
+            <el-card shadow="never" class="small cursor-pointer">
+              <div class="flex-align-center gap-2">
+                <img :src="getFileIconUrl(file.name || 'video.mp4')" alt="" width="24" class="shrink-0" />
+                <span class="min-w-0 truncate" :title="file.name || '视频'">{{ file.name || '视频' }}</span>
+              </div>
+            </el-card>
+          </MkVideo>
         </div>
         <div>{{ data.question || '-' }}</div>
       </div>
diff --git a/ui/src/workflow-canvas/nodes/video-understand-node/details/knowledge.vue b/ui/src/workflow-canvas/nodes/video-understand-node/details/knowledge.vue
index f06087d91db..f13fc3d7870 100644
--- a/ui/src/workflow-canvas/nodes/video-understand-node/details/knowledge.vue
+++ b/ui/src/workflow-canvas/nodes/video-understand-node/details/knowledge.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import MkVideo from '@/components/global/mk-media-preview/MkVideo.vue'
+import { getFileIconUrl } from '@/utils/icon'
 import DetailContainer from '@/workflow-canvas/execution-details/DetailContainer.vue'
 import BaseHeader from '@/workflow-canvas/execution-details/BaseHeader.vue'
 import type { ExecutionNodeDetail } from '@/workflow-canvas/execution-details/types'
@@ -24,8 +26,16 @@ defineProps<{
     <div class="mk-gray-card-sm">
       <h6 class="mb-2">用户提示词</h6>
       <div class="whitespace-pre-wrap space-y-2">
-        <div v-if="data.video_list?.length > 0" class="flex flex-wrap gap-2">
-          <video v-for="(f, i) in data.video_list" :key="i" :src="f.url" controls autoplay class="block rounded-md" style="width: 100px" />
+        <div v-if="data.video_list?.length > 0">
+          <!-- 点击卡片播放本次对话视频 -->
+          <MkVideo v-for="(file, index) in data.video_list" :key="index" :src="file.url" :name="file.name || '视频'" class="w-full">
+            <el-card shadow="never" class="small cursor-pointer">
+              <div class="flex-align-center gap-2">
+                <img :src="getFileIconUrl(file.name || 'video.mp4')" alt="" width="24" class="shrink-0" />
+                <span class="min-w-0 truncate" :title="file.name || '视频'">{{ file.name || '视频' }}</span>
+              </div>
+            </el-card>
+          </MkVideo>
         </div>
         <div>{{ data.question || '-' }}</div>
       </div>