Skip to content

Commit 9d5b8ff

Browse files
YunaiVYunaiV
committed
reactor：【AI 大模型】chat/message 简化成 unocss
1 parent 9a16b2b commit 9d5b8ff

File tree

3 files changed

+34
-216
lines changed

3 files changed

+34
-216
lines changed

‎src/views/ai/chat/index/components/message/MessageList.vue

Lines changed: 25 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,52 @@
11
<template>
22
<div ref="messageContainer" class="h-100% overflow-y-auto relative">
3-
<div class="chat-list" v-for="(item, index) in list" :key="index">
3+
<div class="flex flex-col overflow-y-hidden px-20px" v-for="(item, index) in list" :key="index">
44
<!-- 靠左 message：system、assistant 类型 -->
5-
<div class="left-message message-item" v-if="item.type !== 'user'">
5+
<div class="flex flex-row mt-50px" v-if="item.type !== 'user'">
66
<div class="avatar">
77
<el-avatar :src="roleAvatar" />
88
</div>
9-
<div class="message">
9+
<div class="flex flex-col text-left mx-15px">
1010
<div>
11-
<el-text class="time">{{ formatDate(item.createTime) }}</el-text>
11+
<el-text class="text-left leading-30px">{{ formatDate(item.createTime) }}</el-text>
1212
</div>
13-
<div class="left-text-container" ref="markdownViewRef">
14-
<MarkdownView class="left-text" :content="item.content" />
13+
<div class="relative flex flex-col break-words bg-[var(--el-fill-color-light)] shadow-[0_0_0_1px_var(--el-border-color-light)] rounded-10px pt-10px px-10px pb-5px" ref="markdownViewRef">
14+
<MarkdownView class="text-[var(--el-text-color-primary)] text-[0.95rem]" :content="item.content" />
1515
<MessageKnowledge v-if="item.segments" :segments="item.segments" />
1616
</div>
17-
<div class="left-btns">
18-
<el-button class="btn-cus" link @click="copyContent(item.content)">
19-
<img class="btn-image" src="@/assets/ai/copy.svg" />
17+
<div class="flex flex-row mt-8px">
18+
<el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="copyContent(item.content)">
19+
<img class="h-20px" src="@/assets/ai/copy.svg" />
2020
</el-button>
21-
<el-button v-if="item.id > 0" class="btn-cus" link @click="onDelete(item.id)">
22-
<img class="btn-image h-17px" src="@/assets/ai/delete.svg" />
21+
<el-button v-if="item.id > 0" class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="onDelete(item.id)">
22+
<img class="h-17px" src="@/assets/ai/delete.svg" />
2323
</el-button>
2424
</div>
2525
</div>
2626
</div>
2727
<!-- 靠右 message：user 类型 -->
28-
<div class="right-message message-item" v-if="item.type === 'user'">
28+
<div class="flex flex-row-reverse justify-start mt-50px" v-if="item.type === 'user'">
2929
<div class="avatar">
3030
<el-avatar :src="userAvatar" />
3131
</div>
32-
<div class="message">
32+
<div class="flex flex-col text-left mx-15px">
3333
<div>
34-
<el-text class="time">{{ formatDate(item.createTime) }}</el-text>
34+
<el-text class="text-left leading-30px">{{ formatDate(item.createTime) }}</el-text>
3535
</div>
36-
<div class="right-text-container">
37-
<div class="right-text">{{ item.content }}</div>
36+
<div class="flex flex-row-reverse">
37+
<div class="text-[0.95rem] text-[var(--el-color-white)] inline bg-[var(--el-color-primary)] shadow-[0_0_0_1px_var(--el-color-primary)] rounded-10px p-10px w-auto break-words whitespace-pre-wrap">{{ item.content }}</div>
3838
</div>
39-
<div class="right-btns">
40-
<el-button class="btn-cus" link @click="copyContent(item.content)">
41-
<img class="btn-image" src="@/assets/ai/copy.svg" />
39+
<div class="flex flex-row-reverse mt-8px">
40+
<el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="copyContent(item.content)">
41+
<img class="h-20px" src="@/assets/ai/copy.svg" />
4242
</el-button>
43-
<el-button class="btn-cus" link @click="onDelete(item.id)">
44-
<img class="btn-image h-17px mr-12px" src="@/assets/ai/delete.svg" />
43+
<el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="onDelete(item.id)">
44+
<img class="h-17px mr-12px" src="@/assets/ai/delete.svg" />
4545
</el-button>
46-
<el-button class="btn-cus" link @click="onRefresh(item)">
46+
<el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="onRefresh(item)">
4747
<el-icon size="17"><RefreshRight /></el-icon>
4848
</el-button>
49-
<el-button class="btn-cus" link @click="onEdit(item)">
49+
<el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="onEdit(item)">
5050
<el-icon size="17"><Edit /></el-icon>
5151
</el-button>
5252
</div>
@@ -55,7 +55,7 @@
5555
</div>
5656
</div>
5757
<!-- 回到底部 -->
58-
<div v-if="isScrolling" class="to-bottom" @click="handleGoBottom">
58+
<div v-if="isScrolling" class="absolute z-1000 bottom-0 right-50%" @click="handleGoBottom">
5959
<el-button :icon="ArrowDownBold" circle />
6060
</div>
6161
</template>
@@ -142,7 +142,7 @@ defineExpose({ scrollToBottom, handlerGoTop }) // 提供方法给 parent 调用
142142
// ============ 处理消息操作 ==============
143143
144144
/** 复制 */
145-
const copyContent = async (content) => {
145+
const copyContent = async (content: string) => {
146146
await copy(content)
147147
message.success('复制成功！')
148148
}
@@ -172,113 +172,4 @@ onMounted(async () => {
172172
})
173173
</script>
174174

175-
<style scoped lang="scss">
176-
.message-container {
177-
position: relative;
178-
overflow-y: scroll;
179-
}
180-
181-
// 中间
182-
.chat-list {
183-
display: flex;
184-
flex-direction: column;
185-
overflow-y: hidden;
186-
padding: 0 20px;
187-
.message-item {
188-
margin-top: 50px;
189-
}
190-
191-
.left-message {
192-
display: flex;
193-
flex-direction: row;
194-
}
195-
196-
.right-message {
197-
display: flex;
198-
flex-direction: row-reverse;
199-
justify-content: flex-start;
200-
}
201-
202-
.message {
203-
display: flex;
204-
flex-direction: column;
205-
text-align: left;
206-
margin: 0 15px;
207-
208-
.time {
209-
text-align: left;
210-
line-height: 30px;
211-
}
212-
213-
.left-text-container {
214-
position: relative;
215-
display: flex;
216-
flex-direction: column;
217-
overflow-wrap: break-word;
218-
background-color: var(--el-fill-color-light);
219-
box-shadow: 0 0 0 1px var(--el-border-color-light);
220-
border-radius: 10px;
221-
padding: 10px 10px 5px 10px;
222-
223-
.left-text {
224-
color: var(--el-text-color-primary);
225-
font-size: 0.95rem;
226-
}
227-
}
228-
229-
.right-text-container {
230-
display: flex;
231-
flex-direction: row-reverse;
232175

233-
.right-text {
234-
font-size: 0.95rem;
235-
color: var(--el-color-white);
236-
display: inline;
237-
background-color: var(--el-color-primary);
238-
box-shadow: 0 0 0 1px var(--el-color-primary);
239-
border-radius: 10px;
240-
padding: 10px;
241-
width: auto;
242-
overflow-wrap: break-word;
243-
white-space: pre-wrap;
244-
}
245-
}
246-
247-
.left-btns {
248-
display: flex;
249-
flex-direction: row;
250-
margin-top: 8px;
251-
}
252-
253-
.right-btns {
254-
display: flex;
255-
flex-direction: row-reverse;
256-
margin-top: 8px;
257-
}
258-
}
259-
260-
// 复制、删除按钮
261-
.btn-cus {
262-
display: flex;
263-
background-color: transparent;
264-
align-items: center;
265-
266-
.btn-image {
267-
height: 20px;
268-
}
269-
}
270-
271-
.btn-cus:hover {
272-
cursor: pointer;
273-
background-color: var(--el-fill-color-lighter);
274-
}
275-
}
276-
277-
// 回到底部
278-
.to-bottom {
279-
position: absolute;
280-
z-index: 1000;
281-
bottom: 0;
282-
right: 50%;
283-
}
284-
</style>

‎src/views/ai/chat/index/components/message/MessageListEmpty.vue

Lines changed: 5 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!-- 消息列表为空时，展示 prompt 列表 -->
22
<template>
3-
<div class="chat-empty">
3+
<div class="relative flex flex-row justify-center w-full h-full">
44
<!-- title -->
5-
<div class="center-container">
6-
<div class="title">芋道 AI</div>
7-
<div class="role-list">
5+
<div class="flex flex-col justify-center">
6+
<div class="text-28px font-bold text-center">芋道 AI</div>
7+
<div class="flex flex-row flex-wrap items-center justify-center w-460px mt-20px">
88
<div
9-
class="role-item"
9+
class="flex justify-center w-180px leading-50px border border-solid border-[#e4e4e4] rounded-10px m-10px cursor-pointer hover:bg-[rgba(243,243,243,0.73)]"
1010
v-for="prompt in promptList"
1111
:key="prompt.prompt"
1212
@click="handlerPromptClick(prompt)"
@@ -34,50 +34,3 @@ const handlerPromptClick = async ({ prompt }) => {
3434
emits('onPrompt', prompt)
3535
}
3636
</script>
37-
<style scoped lang="scss">
38-
.chat-empty {
39-
position: relative;
40-
display: flex;
41-
flex-direction: row;
42-
justify-content: center;
43-
width: 100%;
44-
height: 100%;
45-
46-
.center-container {
47-
display: flex;
48-
flex-direction: column;
49-
justify-content: center;
50-
51-
.title {
52-
font-size: 28px;
53-
font-weight: bold;
54-
text-align: center;
55-
}
56-
57-
.role-list {
58-
display: flex;
59-
flex-direction: row;
60-
flex-wrap: wrap;
61-
align-items: center;
62-
justify-content: center;
63-
width: 460px;
64-
margin-top: 20px;
65-
66-
.role-item {
67-
display: flex;
68-
justify-content: center;
69-
width: 180px;
70-
line-height: 50px;
71-
border: 1px solid #e4e4e4;
72-
border-radius: 10px;
73-
margin: 10px;
74-
cursor: pointer;
75-
}
76-
77-
.role-item:hover {
78-
background-color: rgba(243, 243, 243, 0.73);
79-
}
80-
}
81-
}
82-
}
83-
</style>

‎src/views/ai/chat/index/components/message/MessageNewConversation.vue

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!-- 无聊天对话时，在 message 区域，可以新增对话 -->
22
<template>
3-
<div class="new-chat">
4-
<div class="box-center">
5-
<div class="tip">点击下方按钮，开始你的对话吧</div>
6-
<div class="btns">
3+
<div class="flex flex-row justify-center w-100% h-100%">
4+
<div class="flex flex-col justify-center">
5+
<div class="text-14px text-#858585">点击下方按钮，开始你的对话吧</div>
6+
<div class="flex flex-row justify-center mt-20px">
77
<el-button type="primary" round @click="handlerNewChat">新建对话</el-button>
88
</div>
99
</div>
@@ -17,30 +17,4 @@ const handlerNewChat = () => {
1717
emits('onNewConversation')
1818
}
1919
</script>
20-
<style scoped lang="scss">
21-
.new-chat {
22-
display: flex;
23-
flex-direction: row;
24-
justify-content: center;
25-
width: 100%;
26-
height: 100%;
2720

28-
.box-center {
29-
display: flex;
30-
flex-direction: column;
31-
justify-content: center;
32-
33-
.tip {
34-
font-size: 14px;
35-
color: #858585;
36-
}
37-
38-
.btns {
39-
display: flex;
40-
flex-direction: row;
41-
justify-content: center;
42-
margin-top: 20px;
43-
}
44-
}
45-
}
46-
</style>

0 commit comments

Comments
 (0)