Skip to content

Commit 10c6a09

Browse files
wangliang181230wangliang181230
committed
perf: 1) 执行详情 里的 图片 可点击放大查看，文档 和 其他文件 可点击下载了; 2) 文档内容提取 节点的执行详情中，会显示 输入文档 了。
1 parent 7e66dba commit 10c6a09

2 files changed

Lines changed: 135 additions & 20 deletions

File tree

‎apps/application/flow/step_node/document_extract_node/impl/base_document_extract_node.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@
1717
class BaseDocumentExtractNode(IDocumentExtractNode):
1818
def save_context(self, details, workflow_manage):
1919
self.context['content'] = details.get('content')
20+
self.context['document_list'] = details.get('document_list')
2021
self.context['exception_message'] = details.get('err_message')
2122

2223
def execute(self, document, chat_id=None, **kwargs):
2324
get_buffer = FileBufferHandle().get_buffer
2425

25-
self.context['document_list'] = document
2626
content = []
2727
if document is None or not isinstance(document, list):
2828
return NodeResult({'content': '', 'document_list': []}, {})

‎ui/src/components/execution-detail-card/index.vue‎

Lines changed: 134 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,15 @@
6868

6969
<el-space wrap>
7070
<template v-for="(f, i) in data.document_list" :key="i">
71-
<el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
71+
<el-card
72+
shadow="never"
73+
style="--el-card-padding: 8px"
74+
class="file cursor"
75+
@click="downloadFile(f)"
76+
>
7277
<div class="flex align-center">
7378
<img :src="getImgUrl(f && f?.name)" alt="" width="24" />
74-
<div class="ml-4 ellipsis" :title="f && f?.name">
79+
<div class="ml-4 ellipsis" :title="getFileName(f)">
7580
{{ f && f?.name }}
7681
</div>
7782
</div>
@@ -86,10 +91,16 @@
8691
<template v-for="(f, i) in data.image_list" :key="i">
8792
<el-image
8893
:src="f.url"
89-
alt=""
94+
:alt="getFileName(f)"
95+
:title="getFileName(f)"
9096
fit="cover"
9197
style="width: 40px; height: 40px; display: block"
9298
class="border-r-6"
99+
:preview-src-list="data.image_list.map((img: any) => img.url)"
100+
:initial-index="i"
101+
:zoom-rate="1.2"
102+
:max-scale="7"
103+
:min-scale="0.2"
93104
/>
94105
</template>
95106
</el-space>
@@ -109,7 +120,7 @@
109120
</el-space>
110121
</div>
111122
<div v-if="data.video_list?.length > 0">
112-
<p class="mb-8 color-secondary">{{ $t('common.fileUpload.image') }}:</p>
123+
<p class="mb-8 color-secondary">{{ $t('common.fileUpload.video') }}:</p>
113124

114125
<el-space wrap>
115126
<template v-for="(f, i) in data.video_list" :key="i">
@@ -124,14 +135,19 @@
124135
</el-space>
125136
</div>
126137
<div v-if="data.other_list?.length > 0">
127-
<p class="mb-8 color-secondary">{{ $t('common.fileUpload.document') }}:</p>
138+
<p class="mb-8 color-secondary">{{ $t('common.fileUpload.other') }}:</p>
128139

129140
<el-space wrap>
130141
<template v-for="(f, i) in data.other_list" :key="i">
131-
<el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
142+
<el-card
143+
shadow="never"
144+
style="--el-card-padding: 8px"
145+
class="file cursor"
146+
@click="downloadFile(f)"
147+
>
132148
<div class="flex align-center">
133149
<img :src="getImgUrl(f && f?.name)" alt="" width="24" />
134-
<div class="ml-4 ellipsis" :title="f && f?.name">
150+
<div class="ml-4 ellipsis" :title="getFileName(f)">
135151
{{ f && f?.name }}
136152
</div>
137153
</div>
@@ -222,14 +238,27 @@
222238
</h5>
223239
<div class="p-8-12 border-t-dashed lighter pre-wrap">
224240
<template v-if="Array.isArray(data.question)">
225-
<div v-for="(item, qIndex) in data.question" :key="qIndex">
241+
<!-- 先显示图片列表 -->
242+
<template v-for="(item, qIndex) in getImageList(data.question)" :key="qIndex">
226243
<el-image
227-
v-if="item.type === 'image_url'"
228244
:src="item.image_url?.url || item.image_url"
229-
alt=""
245+
:alt="getFileName(item)"
246+
:title="getFileName(item)"
230247
fit="cover"
231-
style="width: 40px; height: 40px; display: block"
232-
class="border-r-6 mb-8"
248+
style="width: 40px; height: 40px"
249+
class="border-r-6 mb-8 mr-8"
250+
:preview-src-list="getImageList(data.question).map((img: any) => img.image_url?.url || img.image_url)"
251+
:initial-index="qIndex"
252+
:zoom-rate="1.2"
253+
:max-scale="7"
254+
:min-scale="0.2"
255+
/>
256+
</template>
257+
<!-- 再显示视频和文本 -->
258+
<div v-for="(item, qIndex) in data.question" :key="qIndex">
259+
<span
260+
style="display:none"
261+
v-if="item.type === 'image_url'"
233262
/>
234263
<video
235264
v-else-if="item.type === 'video_url'"
@@ -354,6 +383,34 @@
354383
<!-- 文档内容提取 -->
355384
<template v-if="data.type === WorkflowType.DocumentExtractNode">
356385
<div class="card-never border-r-6">
386+
<h5 class="p-8-12">
387+
{{ $t('common.fileUpload.document') }}
388+
</h5>
389+
<div class="p-8-12 border-t-dashed lighter">
390+
<div v-if="data.document_list?.length > 0">
391+
<el-space wrap>
392+
<template v-for="(doc, i) in data.document_list" :key="i">
393+
<el-card
394+
shadow="never"
395+
style="--el-card-padding: 8px"
396+
class="file cursor"
397+
:title="getFileName(doc)"
398+
@click="downloadFile(doc)"
399+
>
400+
<div class="flex align-center">
401+
<img :src="getImgUrl(doc && doc?.name)" alt="" width="24" />
402+
<div class="ml-4 ellipsis" :title="getFileName(doc)">
403+
{{ doc && doc?.name }}
404+
</div>
405+
</div>
406+
</el-card>
407+
</template>
408+
</el-space>
409+
</div>
410+
<div v-else>-</div>
411+
</div>
412+
</div>
413+
<div class="card-never border-r-6 mt-8">
357414
<h5 class="p-8-12 flex align-center">
358415
<span class="mr-4"> {{ $t('common.param.outputParam') }}</span>
359416

@@ -592,10 +649,14 @@
592649
<el-image
593650
v-if="h.type === 'image_url'"
594651
:src="h.image_url.url"
595-
alt=""
652+
:alt="getFileName(h)"
653+
:title="getFileName(h)"
596654
fit="cover"
597655
style="width: 40px; height: 40px; display: inline-block"
598656
class="border-r-6 mr-8"
657+
:zoom-rate="1.2"
658+
:max-scale="7"
659+
:min-scale="0.2"
599660
/>
600661

601662
<span v-else>{{ h.text }}<br /></span>
@@ -622,10 +683,16 @@
622683
<template v-for="(f, i) in data.image_list" :key="i">
623684
<el-image
624685
:src="f.url || (f.file_id ? `./oss/file/${f.file_id}` : '')"
625-
alt=""
686+
:alt="getFileName(f)"
687+
:title="getFileName(f)"
626688
fit="cover"
627689
style="width: 40px; height: 40px; display: block"
628690
class="border-r-6"
691+
:preview-src-list="data.image_list.map((img: any) => img.url || (img.file_id ? `./oss/file/${img.file_id}` : ''))"
692+
:initial-index="i"
693+
:zoom-rate="1.2"
694+
:max-scale="7"
695+
:min-scale="0.2"
629696
/>
630697
</template>
631698
</el-space>
@@ -803,6 +870,7 @@
803870
</div>
804871
</div>
805872
</template>
873+
<!-- 文生视频 -->
806874
<template v-if="data.type == WorkflowType.TextToVideoGenerateNode">
807875
<div class="card-never border-r-6 mt-8">
808876
<h5 class="p-8-12">
@@ -837,7 +905,7 @@
837905
</div>
838906
</div>
839907
</template>
840-
908+
<!-- 图生视频 -->
841909
<template v-if="data.type == WorkflowType.ImageToVideoGenerateNode">
842910
<div class="card-never border-r-6 mt-8">
843911
<h5 class="p-8-12">
@@ -863,21 +931,31 @@
863931
<div v-if="typeof data.first_frame_url === 'string'">
864932
<el-image
865933
:src="data.first_frame_url"
866-
alt=""
934+
:alt="getFileName(data)"
935+
:title="getFileName(data)"
867936
fit="cover"
868937
style="width: 40px; height: 40px; display: block"
869938
class="border-r-6"
939+
:zoom-rate="1.2"
940+
:max-scale="7"
941+
:min-scale="0.2"
870942
/>
871943
</div>
872944
<div v-else-if="Array.isArray(data.first_frame_url)">
873945
<el-space wrap>
874946
<template v-for="(f, i) in data.first_frame_url" :key="i">
875947
<el-image
876948
:src="f.url"
877-
alt=""
949+
:alt="getFileName(f)"
950+
:title="getFileName(f)"
878951
fit="cover"
879952
style="width: 40px; height: 40px; display: block"
880953
class="border-r-6"
954+
:preview-src-list="data.first_frame_url.map((img: any) => img.url)"
955+
:initial-index="i"
956+
:zoom-rate="1.2"
957+
:max-scale="7"
958+
:min-scale="0.2"
881959
/>
882960
</template>
883961
</el-space>
@@ -892,21 +970,31 @@
892970
<div v-if="typeof data.last_frame_url === 'string'">
893971
<el-image
894972
:src="data.last_frame_url"
895-
alt=""
973+
:alt="getFileName(data)"
974+
:title="getFileName(data)"
896975
fit="cover"
897976
style="width: 40px; height: 40px; display: block"
898977
class="border-r-6"
978+
:zoom-rate="1.2"
979+
:max-scale="7"
980+
:min-scale="0.2"
899981
/>
900982
</div>
901983
<div v-else-if="Array.isArray(data.last_frame_url)">
902984
<el-space wrap>
903985
<template v-for="(f, i) in data.last_frame_url" :key="i">
904986
<el-image
905987
:src="f.url"
906-
alt=""
988+
:alt="getFileName(f)"
989+
:title="getFileName(f)"
907990
fit="cover"
908991
style="width: 40px; height: 40px; display: block"
909992
class="border-r-6"
993+
:preview-src-list="data.last_frame_url.map((img: any) => img.url)"
994+
:initial-index="i"
995+
:zoom-rate="1.2"
996+
:max-scale="7"
997+
:min-scale="0.2"
910998
/>
911999
</template>
9121000
</el-space>
@@ -1422,6 +1510,33 @@ const isKnowLedge = computed(() => props.type === 'knowledge')
14221510
const currentLoopNode = ref(0)
14231511
const currentParagraph = ref(0)
14241512
const currentWriteContent = ref(0)
1513+
1514+
const getImageList = (questions: any) => {
1515+
const imageList: any[] = []
1516+
questions.forEach((question: any) => {
1517+
if (question.type === 'image_url') {
1518+
imageList.push(question)
1519+
}
1520+
})
1521+
return imageList
1522+
}
1523+
1524+
const getFileName = (file: any) => {
1525+
if (file) {
1526+
return file?.file_name || file?.name || file?.image_url?.details || JSON.stringify(file)
1527+
} else {
1528+
return ''
1529+
}
1530+
}
1531+
1532+
// 下载文件
1533+
const downloadFile = (file: any) => {
1534+
if (file) {
1535+
window.open(file.url || `./oss/file/${file.file_id || file.id}`, '_blank')
1536+
} else {
1537+
console.error('下载文件失败，原因：链接未知，file =', file)
1538+
}
1539+
}
14251540
</script>
14261541
<style lang="scss" scoped>
14271542
.execution-detail-card {

0 commit comments

Comments
 (0)