Skip to content

Commit 08f2949

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
fix: Optimize small screen dialogue style
1 parent 470105f commit 08f2949

File tree

4 files changed

+203
-181
lines changed

4 files changed

+203
-181
lines changed

‎ui/src/components/ai-chat/KnowledgeSource.vue‎

Lines changed: 67 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,71 @@
11
<template>
2-
<div class="flex align-center mt-16" v-if="!isWorkFlow(props.type)">
3-
<span class="mr-4 color-secondary">{{ $t('chat.KnowledgeSource.title') }}</span>
4-
<el-divider direction="vertical" />
5-
<el-button type="primary" class="mr-8" link @click="openParagraph(data)">
6-
<AppIcon iconName="app-reference-outlined" class="mr-4"></AppIcon>
7-
{{ $t('chat.KnowledgeSource.referenceParagraph') }}
8-
{{ data.paragraph_list?.length || 0 }}</el-button
9-
>
10-
</div>
11-
<div class="mt-8" v-if="!isWorkFlow(props.type)">
12-
<el-row :gutter="8" v-if="uniqueParagraphList?.length">
13-
<template v-for="(item, index) in uniqueParagraphList" :key="index">
14-
<el-col :span="12" class="mb-8">
15-
<el-card shadow="never" class="file-List-card" data-width="40">
16-
<div class="flex-between">
17-
<div class="flex">
18-
<img :src="getImgUrl(item && item?.document_name)" alt="" width="20" />
19-
<div class="ml-4 ellipsis-1" :title="item?.document_name" v-if="!item.source_url">
20-
<p>{{ item && item?.document_name }}</p>
21-
</div>
22-
<div class="ml-8" v-else>
23-
<a
24-
:href="getNormalizedUrl(item?.source_url)"
25-
target="_blank"
26-
class="ellipsis"
27-
:title="item?.document_name?.trim()"
28-
>
29-
<span :title="item?.document_name?.trim()">{{ item?.document_name }}</span>
30-
</a>
2+
<div class="chat-knowledge-source">
3+
<div class="flex align-center mt-16" v-if="!isWorkFlow(props.type)">
4+
<span class="mr-4 color-secondary">{{ $t('chat.KnowledgeSource.title') }}</span>
5+
<el-divider direction="vertical" />
6+
<el-button type="primary" class="mr-8" link @click="openParagraph(data)">
7+
<AppIcon iconName="app-reference-outlined" class="mr-4"></AppIcon>
8+
{{ $t('chat.KnowledgeSource.referenceParagraph') }}
9+
{{ data.paragraph_list?.length || 0 }}</el-button
10+
>
11+
</div>
12+
<div class="mt-8" v-if="!isWorkFlow(props.type)">
13+
<el-row :gutter="8" v-if="uniqueParagraphList?.length">
14+
<template v-for="(item, index) in uniqueParagraphList" :key="index">
15+
<el-col :span="12" class="mb-8">
16+
<el-card shadow="never" class="file-List-card" data-width="40">
17+
<div class="flex-between">
18+
<div class="flex">
19+
<img :src="getImgUrl(item && item?.document_name)" alt="" width="20" />
20+
<div class="ml-4 ellipsis-1" :title="item?.document_name" v-if="!item.source_url">
21+
<p>{{ item && item?.document_name }}</p>
22+
</div>
23+
<div class="ml-8" v-else>
24+
<a
25+
:href="getNormalizedUrl(item?.source_url)"
26+
target="_blank"
27+
class="ellipsis"
28+
:title="item?.document_name?.trim()"
29+
>
30+
<span :title="item?.document_name?.trim()">{{ item?.document_name }}</span>
31+
</a>
32+
</div>
3133
</div>
3234
</div>
33-
</div>
34-
</el-card>
35-
</el-col>
36-
</template>
37-
</el-row>
38-
</div>
39-
40-
<div
41-
class="border-t color-secondary flex-between mt-12"
42-
style="padding-top: 12px; padding-bottom: 8px"
43-
>
44-
<div>
45-
<span class="mr-8">
46-
{{ $t('chat.KnowledgeSource.consume') }}: {{ data?.message_tokens + data?.answer_tokens }}
47-
</span>
48-
<span> {{ $t('chat.KnowledgeSource.consumeTime') }}: {{ data?.run_time?.toFixed(2) }} s</span>
35+
</el-card>
36+
</el-col>
37+
</template>
38+
</el-row>
4939
</div>
50-
<el-button
51-
v-if="isWorkFlow(props.type)"
52-
type="primary"
53-
link
54-
@click="openExecutionDetail(data.execution_details)"
55-
>
56-
<el-icon class="mr-4"><Document /></el-icon>
57-
{{ $t('chat.executionDetails.title') }}</el-button
40+
41+
<div
42+
class="execution-details border-t color-secondary flex-between mt-12"
43+
style="padding-top: 12px; padding-bottom: 8px"
5844
>
45+
<div>
46+
<span class="mr-8">
47+
{{ $t('chat.KnowledgeSource.consume') }}: {{ data?.message_tokens + data?.answer_tokens }}
48+
</span>
49+
<span>
50+
{{ $t('chat.KnowledgeSource.consumeTime') }}: {{ data?.run_time?.toFixed(2) }} s</span
51+
>
52+
</div>
53+
<el-button
54+
v-if="isWorkFlow(props.type)"
55+
type="primary"
56+
link
57+
@click="openExecutionDetail(data.execution_details)"
58+
style="padding: 0;"
59+
>
60+
<el-icon class="mr-4"><Document /></el-icon>
61+
{{ $t('chat.executionDetails.title') }}</el-button
62+
>
63+
</div>
64+
<!-- 知识库引用 dialog -->
65+
<ParagraphSourceDialog ref="ParagraphSourceDialogRef" />
66+
<!-- 执行详情 dialog -->
67+
<ExecutionDetailDialog ref="ExecutionDetailDialogRef" />
5968
</div>
60-
<!-- 知识库引用 dialog -->
61-
<ParagraphSourceDialog ref="ParagraphSourceDialogRef" />
62-
<!-- 执行详情 dialog -->
63-
<ExecutionDetailDialog ref="ExecutionDetailDialogRef" />
6469
</template>
6570
<script setup lang="ts">
6671
import { computed, ref } from 'vue'
@@ -107,13 +112,11 @@ const uniqueParagraphList = computed(() => {
107112
})
108113
</script>
109114
<style lang="scss" scoped>
110-
.source_dataset-button {
111-
background: var(--app-text-color-light-1);
112-
border: 1px solid #ffffff;
113-
&:hover {
114-
border: 1px solid var(--el-color-primary);
115-
background: var(--el-color-primary-light-9);
116-
color: var(--el-text-color-primary);
115+
@media only screen and (max-width: 430px) {
116+
.chat-knowledge-source {
117+
.execution-details {
118+
display: block;
119+
}
117120
}
118121
}
119122
</style>

‎ui/src/components/ai-chat/component/answer-content/index.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,11 @@
3434
{{ $t('chat.tip.answerLoading') }} <span class="dotting"></span>
3535
</p>
3636
<!-- 知识来源 -->
37-
<div v-if="showSource(chatRecord) && index === chatRecord.answer_text_list.length - 1">
38-
<KnowledgeSource :data="chatRecord" :type="application.type" />
39-
</div>
37+
<KnowledgeSource
38+
:data="chatRecord"
39+
:type="application.type"
40+
v-if="showSource(chatRecord) && index === chatRecord.answer_text_list.length - 1"
41+
/>
4042
</el-card>
4143
</div>
4244
</template>

0 commit comments

Comments
 (0)