Skip to content

Commit ee5c8a4

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
feat: Setting avatar show or hide
1 parent b01172b commit ee5c8a4

File tree

7 files changed

+115
-66
lines changed

7 files changed

+115
-66
lines changed

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
<template>
22
<div class="item-content mb-16 lighter">
33
<template v-for="(answer_text, index) in answer_text_list" :key="index">
4-
<div class="avatar">
4+
<div class="avatar mr-8" v-if="application.show_avatar">
55
<img v-if="application.avatar" :src="application.avatar" height="28px" width="28px" />
66
<LogoIcon v-else height="28px" width="28px" />
77
</div>
8-
<div class="content" @mouseup="openControl">
8+
<div
9+
class="content"
10+
@mouseup="openControl"
11+
:style="{
12+
'padding-right': application.show_user_avatar ? 'var(--padding-left)' : '0'
13+
}"
14+
>
915
<el-card shadow="always" class="mb-8 border-r-8" style="--el-card-padding: 6px 16px">
1016
<MdRenderer
1117
v-if="
@@ -42,7 +48,13 @@
4248
</el-card>
4349
</div>
4450
</template>
45-
<div class="content">
51+
<div
52+
class="content"
53+
:style="{
54+
'padding-left': application.show_avatar ? 'var(--padding-left)' : '0',
55+
'padding-right': application.show_user_avatar ? 'var(--padding-left)' : '0'
56+
}"
57+
>
4658
<OperationButton
4759
:type="type"
4860
:application="application"

‎ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<div>
88
<!-- 语音播放 -->
9-
<span v-if="tts">
9+
<span>
1010
<el-tooltip
1111
v-if="audioManage?.isPlaying()"
1212
effect="dark"
@@ -40,18 +40,18 @@
4040
<el-divider direction="vertical" />
4141
</span>
4242
<span v-if="type == 'ai-chat' || type == 'log'">
43-
<el-tooltip effect="dark" :content="$t('chat.operation.regeneration')" placement="top">
44-
<el-button :disabled="chat_loading" text @click="regeneration">
45-
<el-icon><RefreshRight /></el-icon>
46-
</el-button>
47-
</el-tooltip>
48-
<el-divider direction="vertical" />
4943
<el-tooltip effect="dark" :content="$t('common.copy')" placement="top">
5044
<el-button text @click="copyClick(data?.answer_text.trim())">
5145
<AppIcon iconName="app-copy"></AppIcon>
5246
</el-button>
5347
</el-tooltip>
5448
<el-divider direction="vertical" />
49+
<el-tooltip effect="dark" :content="$t('chat.operation.regeneration')" placement="top">
50+
<el-button :disabled="chat_loading" text @click="regeneration">
51+
<el-icon><RefreshRight /></el-icon>
52+
</el-button>
53+
</el-tooltip>
54+
<el-divider direction="vertical" />
5555
<el-tooltip
5656
effect="dark"
5757
:content="$t('chat.operation.like')"
@@ -94,10 +94,17 @@
9494
</el-button>
9595
</el-tooltip>
9696
</span>
97+
98+
<!-- 先渲染，不然不能播放 -->
99+
<audio
100+
ref="audioPlayer"
101+
v-for="item in audioList"
102+
:key="item"
103+
controls
104+
hidden="hidden"
105+
></audio>
106+
<div ref="audioCiontainer"></div>
97107
</div>
98-
<!-- 先渲染，不然不能播放 -->
99-
<audio ref="audioPlayer" v-for="item in audioList" :key="item" controls hidden="hidden"></audio>
100-
<div ref="audioCiontainer"></div>
101108
</div>
102109
</template>
103110
<script setup lang="ts">
@@ -520,9 +527,10 @@ onMounted(() => {
520527
})
521528
</script>
522529
<style lang="scss" scoped>
523-
@media only screen and (max-width: 420px) {
530+
@media only screen and (max-width: 430px) {
524531
.chat-operation-button {
525532
display: block;
533+
text-align: right;
526534
}
527535
}
528536
</style>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
<template>
22
<!-- 开场白组件 -->
33
<div class="item-content mb-16">
4-
<div class="avatar" v-if="prologue">
4+
<div class="avatar mr-8" v-if="prologue && application.show_avatar">
55
<img v-if="application.avatar" :src="application.avatar" height="28px" width="28px" />
66
<LogoIcon v-else height="28px" width="28px" />
77
</div>
8-
<div class="content" v-if="prologue">
8+
<div
9+
class="content"
10+
v-if="prologue"
11+
:style="{
12+
'padding-right': application.show_user_avatar ? 'var(--padding-left)' : '0'
13+
}"
14+
>
915
<el-card shadow="always" class="border-r-8" style="--el-card-padding: 10px 16px 12px">
1016
<MdRenderer
1117
:source="prologue"

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<!-- 问题内容 -->
33
<div class="question-content item-content mb-16 lighter">
44
<div
5-
class="content mr-12 p-12-16 border-r-8"
5+
class="content p-12-16 border-r-8"
66
:class="document_list.length >= 2 ? 'media_2' : `media_${document_list.length}`"
77
>
88
<div class="text break-all pre-wrap">
@@ -63,7 +63,7 @@
6363
<span> {{ chatRecord.problem_text }}</span>
6464
</div>
6565
</div>
66-
<div class="avatar">
66+
<div class="avatar ml-8" v-if="application.show_user_avatar">
6767
<el-image
6868
v-if="application.user_avatar"
6969
:src="application.user_avatar"
@@ -133,7 +133,6 @@ onMounted(() => {})
133133
background: #d6e2ff;
134134
padding-left: 16px;
135135
padding-right: 16px;
136-
137136
}
138137
139138
.download-file {

‎ui/src/components/ai-chat/component/user-form/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
{{ inputFieldConfig.title }}
1717
</span>
1818
</div>
19-
<el-scrollbar max-height="160">
19+
<el-scrollbar :max-height="!props.first ? 160 : 0">
2020
<el-collapse-transition>
2121
<div v-show="showUserInput" class="mt-16" style="padding: 0 8px">
2222
<DynamicsForm

‎ui/src/components/ai-chat/index.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
}
1717

1818
.content {
19-
padding-left: var(--padding-left);
20-
padding-right: var(--padding-left);
19+
// padding-left: var(--padding-left);
20+
// padding-right: var(--padding-left);
2121

2222
:deep(ol) {
2323
margin-left: 16px !important;

‎ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue‎

Lines changed: 68 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -87,26 +87,44 @@
8787
:src="imgUrl.avatar"
8888
alt=""
8989
fit="cover"
90-
style="width: 35px; height: 35px; display: block"
90+
style="width: 28px; height: 28px; display: block"
9191
/>
9292
<LogoIcon
9393
v-else
94-
height="35px"
95-
style="width: 35px; height: 35px; display: block"
94+
height="28px"
95+
style="width: 28px; height: 28px; display: block"
9696
/>
9797
</div>
9898

99-
<img src="@/assets/display-bg2.png" alt="" width="270" />
99+
<img
100+
src="@/assets/display-bg2.png"
101+
alt=""
102+
:width="
103+
xpackForm.show_avatar
104+
? xpackForm.show_user_avatar
105+
? '240px'
106+
: '270px'
107+
: xpackForm.show_user_avatar
108+
? '270px'
109+
: '300px'
110+
"
111+
/>
100112
</div>
101-
<div class="flex-between">
102-
<img src="@/assets/display-bg3.png" alt="" width="270" class="ml-8" />
113+
<div class="flex" style="justify-content: flex-end">
114+
<img
115+
src="@/assets/display-bg3.png"
116+
alt=""
117+
:width="xpackForm.show_user_avatar ? '240px' : '270px'"
118+
class="mr-8"
119+
style="object-fit: contain"
120+
/>
103121
<div class="avatar" v-if="xpackForm.show_user_avatar">
104122
<el-image
105123
v-if="imgUrl.user_avatar"
106124
:src="imgUrl.user_avatar"
107125
alt=""
108126
fit="cover"
109-
style="width: 35px; height: 35px; display: block"
127+
style="width: 28px; height: 28px; display: block"
110128
/>
111129
<AppAvatar v-else>
112130
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
@@ -185,53 +203,59 @@
185203
<el-card shadow="never" class="mb-8">
186204
<div class="flex-between mb-8">
187205
<span class="lighter">{{
188-
$t('views.applicationOverview.appInfo.SettingDisplayDialog.askUserAvatar')
206+
$t('views.applicationOverview.appInfo.SettingDisplayDialog.AIAvatar')
189207
}}</span>
190-
<el-checkbox v-model="xpackForm.show_user_avatar" style="margin-left: 200px">
191-
{{
208+
<span class="flex align-center">
209+
<el-checkbox v-model="xpackForm.show_avatar">{{
192210
$t('views.applicationOverview.appInfo.SettingDisplayDialog.display')
193-
}}</el-checkbox
194-
>
195-
<el-upload
196-
ref="uploadRef"
197-
action="#"
198-
:auto-upload="false"
199-
:show-file-list="false"
200-
accept="image/jpeg, image/png, image/gif"
201-
:on-change="(file: any, fileList: any) => onChange(file, fileList, 'user_avatar')"
202-
>
203-
<el-button size="small">
204-
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
205-
</el-button>
206-
</el-upload>
211+
}}</el-checkbox>
212+
<el-upload
213+
class="ml-8"
214+
ref="uploadRef"
215+
action="#"
216+
:auto-upload="false"
217+
:show-file-list="false"
218+
accept="image/jpeg, image/png, image/gif"
219+
:on-change="(file: any, fileList: any) => onChange(file, fileList, 'avatar')"
220+
>
221+
<el-button size="small">
222+
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
223+
</el-button>
224+
</el-upload>
225+
</span>
207226
</div>
208-
<el-text type="info" size="small"
209-
>{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
227+
<el-text type="info" size="small">
228+
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
210229
</el-text>
211230
</el-card>
212231
<el-card shadow="never" class="mb-8">
213232
<div class="flex-between mb-8">
214233
<span class="lighter">{{
215-
$t('views.applicationOverview.appInfo.SettingDisplayDialog.AIAvatar')
234+
$t('views.applicationOverview.appInfo.SettingDisplayDialog.askUserAvatar')
216235
}}</span>
217-
<el-checkbox v-model="xpackForm.show_avatar" style="margin-left: 200px">{{
218-
$t('views.applicationOverview.appInfo.SettingDisplayDialog.display')
219-
}}</el-checkbox>
220-
<el-upload
221-
ref="uploadRef"
222-
action="#"
223-
:auto-upload="false"
224-
:show-file-list="false"
225-
accept="image/jpeg, image/png, image/gif"
226-
:on-change="(file: any, fileList: any) => onChange(file, fileList, 'avatar')"
227-
>
228-
<el-button size="small">
229-
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
230-
</el-button>
231-
</el-upload>
236+
<span class="flex align-center">
237+
<el-checkbox v-model="xpackForm.show_user_avatar">
238+
{{
239+
$t('views.applicationOverview.appInfo.SettingDisplayDialog.display')
240+
}}</el-checkbox
241+
>
242+
<el-upload
243+
class="ml-8"
244+
ref="uploadRef"
245+
action="#"
246+
:auto-upload="false"
247+
:show-file-list="false"
248+
accept="image/jpeg, image/png, image/gif"
249+
:on-change="(file: any, fileList: any) => onChange(file, fileList, 'user_avatar')"
250+
>
251+
<el-button size="small">
252+
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
253+
</el-button>
254+
</el-upload>
255+
</span>
232256
</div>
233-
<el-text type="info" size="small">
234-
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
257+
<el-text type="info" size="small"
258+
>{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
235259
</el-text>
236260
</el-card>
237261
<el-card shadow="never" class="mb-8">

0 commit comments

Comments
 (0)