Skip to content

Commit d1002f4

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
fix: AI回复头像调整(#1592)
1 parent 1a1e932 commit d1002f4

File tree

8 files changed

+154
-189
lines changed

8 files changed

+154
-189
lines changed

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

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div class="item-content mb-16 lighter">
3-
<div v-for="(answer_text, index) in chatRecord.answer_text_list">
3+
<div v-for="(answer_text, index) in chatRecord.answer_text_list" :key="index">
44
<div class="avatar">
5-
<img v-if="application.avatar" :src="application.avatar" height="30px" />
6-
<LogoIcon v-else height="30px" />
5+
<img v-if="application.avatar" :src="application.avatar" height="32px" width="32px" />
6+
<LogoIcon v-else height="32px" width="32px" />
77
</div>
88
<div class="content">
99
<el-card shadow="always" class="dialog-card">
@@ -23,17 +23,17 @@
2323
<KnowledgeSource :data="chatRecord" :type="application.type" />
2424
</div>
2525
</el-card>
26+
<OperationButton
27+
:type="type"
28+
:application="application"
29+
:chat-record="chatRecord"
30+
:loading="loading"
31+
:start-chat="startChat"
32+
:stop-chat="stopChat"
33+
:regenerationChart="regenerationChart"
34+
></OperationButton>
2635
</div>
2736
</div>
28-
<OperationButton
29-
:type="type"
30-
:application="application"
31-
:chat-record="chatRecord"
32-
:loading="loading"
33-
:start-chat="startChat"
34-
:stop-chat="stopChat"
35-
:regenerationChart="regenerationChart"
36-
></OperationButton>
3737
</div>
3838
</template>
3939
<script setup lang="ts">
@@ -80,15 +80,4 @@ const startChat = (chat: chatType) => {
8080
props.chatManagement.write(chat.id)
8181
}
8282
</script>
83-
<style lang="scss" scoped>
84-
.avatar {
85-
float: left;
86-
}
87-
.content {
88-
padding-left: var(--padding-left);
89-
90-
:deep(ol) {
91-
margin-left: 16px !important;
92-
}
93-
}
94-
</style>
83+
<style lang="scss" scoped></style>

‎ui/src/components/ai-chat/component/chat-input-operate/index.vue

Lines changed: 1 addition & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<template>
2-
<div></div>
32
<div class="ai-chat__operate p-16-24">
43
<slot name="operateBefore" />
54
<div class="operate-textarea flex chat-width">
@@ -316,77 +315,5 @@ onMounted(() => {
316315
})
317316
</script>
318317
<style lang="scss" scope>
319-
.ai-chat {
320-
&__operate {
321-
background: #f3f7f9;
322-
position: relative;
323-
width: 100%;
324-
box-sizing: border-box;
325-
z-index: 10;
326-
327-
&:before {
328-
background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
329-
content: '';
330-
position: absolute;
331-
width: 100%;
332-
top: -16px;
333-
left: 0;
334-
height: 16px;
335-
}
336-
337-
.operate-textarea {
338-
box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
339-
background-color: #ffffff;
340-
border-radius: 8px;
341-
border: 1px solid #ffffff;
342-
box-sizing: border-box;
343-
344-
&:has(.el-textarea__inner:focus) {
345-
border: 1px solid var(--el-color-primary);
346-
}
347-
348-
.el-textarea__inner {
349-
border-radius: 8px !important;
350-
box-shadow: none;
351-
resize: none;
352-
padding: 12px 16px;
353-
box-sizing: border-box;
354-
}
355-
356-
.operate {
357-
padding: 6px 10px;
358-
.el-icon {
359-
font-size: 20px;
360-
}
361-
362-
.sent-button {
363-
max-height: none;
364-
.el-icon {
365-
font-size: 24px;
366-
}
367-
}
368-
369-
.el-loading-spinner {
370-
margin-top: -15px;
371-
372-
.circular {
373-
width: 31px;
374-
height: 31px;
375-
}
376-
}
377-
}
378-
}
379-
}
380-
}
381-
382-
.chat-width {
383-
max-width: 80%;
384-
margin: 0 auto;
385-
}
386-
@media only screen and (max-width: 1000px) {
387-
.chat-width {
388-
max-width: 100% !important;
389-
margin: 0 auto;
390-
}
391-
}
318+
@import '../../index.scss';
392319
</style>

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<!-- 开场白组件 -->
33
<div class="item-content mb-16">
44
<div class="avatar">
5-
<img v-if="application.avatar" :src="application.avatar" height="30px" />
6-
<LogoIcon v-else height="30px" />
5+
<img v-if="application.avatar" :src="application.avatar" height="32px" width="32px" />
6+
<LogoIcon v-else height="32px" width="32px" />
77
</div>
88
<div class="content">
99
<el-card shadow="always" class="dialog-card">
@@ -32,4 +32,5 @@ const prologue = computed(() => {
3232
return temp.replace(/-\s.+/g, toQuickQuestion)
3333
})
3434
</script>
35-
<style lang="scss" scoped></style>
35+
<style lang="scss" scoped>
36+
</style>

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

Lines changed: 2 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
:src="application.user_avatar"
88
alt=""
99
fit="cover"
10-
style="width: 30px; height: 30px; display: block"
10+
style="width: 32px; height: 32px; display: block"
1111
/>
1212
<AppAvatar v-else>
13-
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
13+
<img src="@/assets/user-icon.svg" style="width: 50%" alt="" />
1414
</AppAvatar>
1515
</div>
1616
<div class="content">
@@ -28,54 +28,4 @@ defineProps<{
2828
}>()
2929
</script>
3030
<style lang="scss" scoped>
31-
.ai-chat {
32-
&__content {
33-
padding-top: 0;
34-
box-sizing: border-box;
35-
36-
.avatar {
37-
float: left;
38-
}
39-
40-
.content {
41-
padding-left: var(--padding-left);
42-
43-
:deep(ol) {
44-
margin-left: 16px !important;
45-
}
46-
}
47-
48-
.text {
49-
padding: 6px 0;
50-
}
51-
52-
.problem-button {
53-
width: 100%;
54-
border: none;
55-
border-radius: 8px;
56-
background: var(--app-layout-bg-color);
57-
height: 46px;
58-
padding: 0 12px;
59-
line-height: 46px;
60-
box-sizing: border-box;
61-
color: var(--el-text-color-regular);
62-
-webkit-line-clamp: 1;
63-
word-break: break-all;
64-
65-
&:hover {
66-
background: var(--el-color-primary-light-9);
67-
}
68-
69-
&.disabled {
70-
&:hover {
71-
background: var(--app-layout-bg-color);
72-
}
73-
}
74-
75-
.el-icon {
76-
color: var(--el-color-primary);
77-
}
78-
}
79-
}
80-
}
8131
</style>

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

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -290,15 +290,4 @@ onMounted(() => {
290290
handleInputFieldList()
291291
})
292292
</script>
293-
<style lang="scss" scoped>
294-
.chat-width {
295-
max-width: 80%;
296-
margin: 0 auto;
297-
}
298-
@media only screen and (max-width: 1000px) {
299-
.chat-width {
300-
max-width: 100% !important;
301-
margin: 0 auto;
302-
}
303-
}
304-
</style>
293+
<style lang="scss" scoped></style>

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

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
.ai-chat {
2+
--padding-left: 40px;
3+
height: 100%;
4+
display: flex;
5+
flex-direction: column;
6+
box-sizing: border-box;
7+
position: relative;
8+
color: var(--app-text-color);
9+
box-sizing: border-box;
10+
&__content {
11+
padding-top: 0;
12+
box-sizing: border-box;
13+
14+
.avatar {
15+
float: left;
16+
}
17+
18+
.content {
19+
padding-left: var(--padding-left);
20+
21+
:deep(ol) {
22+
margin-left: 16px !important;
23+
}
24+
}
25+
26+
.text {
27+
padding: 6px 0;
28+
}
29+
30+
.problem-button {
31+
width: 100%;
32+
border: none;
33+
border-radius: 8px;
34+
background: var(--app-layout-bg-color);
35+
height: 46px;
36+
padding: 0 12px;
37+
line-height: 46px;
38+
box-sizing: border-box;
39+
color: var(--el-text-color-regular);
40+
-webkit-line-clamp: 1;
41+
word-break: break-all;
42+
43+
&:hover {
44+
background: var(--el-color-primary-light-9);
45+
}
46+
47+
&.disabled {
48+
&:hover {
49+
background: var(--app-layout-bg-color);
50+
}
51+
}
52+
53+
.el-icon {
54+
color: var(--el-color-primary);
55+
}
56+
}
57+
}
58+
&__operate {
59+
background: #f3f7f9;
60+
position: relative;
61+
width: 100%;
62+
box-sizing: border-box;
63+
z-index: 10;
64+
65+
&:before {
66+
background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
67+
content: '';
68+
position: absolute;
69+
width: 100%;
70+
top: -16px;
71+
left: 0;
72+
height: 16px;
73+
}
74+
75+
.operate-textarea {
76+
box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
77+
background-color: #ffffff;
78+
border-radius: 8px;
79+
border: 1px solid #ffffff;
80+
box-sizing: border-box;
81+
82+
&:has(.el-textarea__inner:focus) {
83+
border: 1px solid var(--el-color-primary);
84+
}
85+
86+
.el-textarea__inner {
87+
border-radius: 8px !important;
88+
box-shadow: none;
89+
resize: none;
90+
padding: 12px 16px;
91+
box-sizing: border-box;
92+
}
93+
94+
.operate {
95+
padding: 6px 10px;
96+
.el-icon {
97+
font-size: 20px;
98+
}
99+
100+
.sent-button {
101+
max-height: none;
102+
.el-icon {
103+
font-size: 24px;
104+
}
105+
}
106+
107+
.el-loading-spinner {
108+
margin-top: -15px;
109+
110+
.circular {
111+
width: 31px;
112+
height: 31px;
113+
}
114+
}
115+
}
116+
}
117+
}
118+
}
119+
120+
.chat-width {
121+
max-width: 80%;
122+
margin: 0 auto;
123+
}
124+
@media only screen and (max-width: 1000px) {
125+
.chat-width {
126+
max-width: 100% !important;
127+
margin: 0 auto;
128+
}
129+
}

0 commit comments

Comments
 (0)