xuemingqiang/yudao-ui-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reactor：【AI 大模型】chat/message 简化成 unocss

Browse Source
This commit is contained in:
YunaiV
2025-07-28 08:44:34 +08:00
parent 9d5b8ff76a
commit 2617e56c7b
3 changed files with 51 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/views/ai/chat/index/components/message/MessageList.vue
View File

@ -10,15 +10,30 @@
<div>
<el-text class="text-left leading-30px">{{ formatDate(item.createTime) }}</el-text>
</div>
<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">
<MarkdownView class="text-[var(--el-text-color-primary)] text-[0.95rem]" :content="item.content" />
<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"
>
<MarkdownView
class="text-[var(--el-text-color-primary)] text-[0.95rem]"
:content="item.content"
/>
<MessageKnowledge v-if="item.segments" :segments="item.segments" />
</div>
<div class="flex flex-row mt-8px">
<el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="copyContent(item.content)">
<el-button
class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]"
link
@click="copyContent(item.content)"
>
<img class="h-20px" src="@/assets/ai/copy.svg" />
</el-button>
<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)">
<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)"
>
<img class="h-17px" src="@/assets/ai/delete.svg" />
</el-button>
</div>
@ -34,19 +49,38 @@
<el-text class="text-left leading-30px">{{ formatDate(item.createTime) }}</el-text>
</div>
<div class="flex flex-row-reverse">
<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>
<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
>
</div>
<div class="flex flex-row-reverse mt-8px">
<el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="copyContent(item.content)">
<el-button
class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]"
link
@click="copyContent(item.content)"
>
<img class="h-20px" src="@/assets/ai/copy.svg" />
</el-button>
<el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="onDelete(item.id)">
<el-button
class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]"
link
@click="onDelete(item.id)"
>
<img class="h-17px mr-12px" src="@/assets/ai/delete.svg" />
</el-button>
<el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="onRefresh(item)">
<el-button
class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]"
link
@click="onRefresh(item)"
>
<el-icon size="17"><RefreshRight /></el-icon>
</el-button>
<el-button class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]" link @click="onEdit(item)">
<el-button
class="flex bg-transparent items-center hover:cursor-pointer hover:bg-[var(--el-fill-color-lighter)]"
link
@click="onEdit(item)"
>
<el-icon size="17"><Edit /></el-icon>
</el-button>
</div>
@ -171,5 +205,3 @@ onMounted(async () => {
messageContainer.value.addEventListener('scroll', handleScroll)
})
</script>

1
src/views/ai/chat/index/components/message/MessageNewConversation.vue
View File

@ -17,4 +17,3 @@ const handlerNewChat = () => {
emits('onNewConversation')
}
</script>

62
src/views/ai/chat/index/index.vue
View File

@ -1,5 +1,5 @@
<template>
<el-container class="ai-layout">
<el-container class="absolute flex-1 top-0 left-0 h-full w-full">
<!-- 左侧：对话列表 -->
<ConversationList
:active-id="activeConversationId"
@ -67,10 +67,13 @@
</el-main>
<!-- 底部 -->
<el-footer class="footer-container">
<form class="prompt-from">
<el-footer class="flex flex-col !h-auto !p-0">
<form
class="mt-10px mx-20px mb-20px py-9px px-10px flex flex-col h-auto rounded-10px"
style="border: 1px solid var(--el-border-color)"
>
<textarea
class="prompt-input"
class="h-80px border-none box-border resize-none py-0 px-2px overflow-auto focus:outline-none"
v-model="prompt"
@keydown="handleSendByKeydown"
@input="handlePromptInput"
@ -78,7 +81,7 @@
@compositionend="onCompositionend"
placeholder="问我任何问题...（Shift+Enter 换行，按下 Enter 发送）"
></textarea>
<div class="prompt-btns">
<div class="flex justify-between pb-0 pt-5px">
<div>
<el-switch v-model="enableContext" />
<span class="ml-5px text-14px text-#8f8f8f">上下文</span>
@ -576,15 +579,6 @@ onMounted(async () => {
</script>
<style lang="scss" scoped>
.ai-layout {
position: absolute;
flex: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.conversation-container {
position: relative;
display: flex;
@ -735,44 +729,4 @@ onMounted(async () => {
margin: 0;
}
}
// 底部
.footer-container {
display: flex;
flex-direction: column;
height: auto;
margin: 0;
padding: 0;
.prompt-from {
display: flex;
flex-direction: column;
height: auto;
border: 1px solid var(--el-border-color);
border-radius: 10px;
margin: 10px 20px 20px 20px;
padding: 9px 10px;
}
.prompt-input {
height: 80px;
//box-shadow: none;
border: none;
box-sizing: border-box;
resize: none;
padding: 0 2px;
overflow: auto;
}
.prompt-input:focus {
outline: none;
}
.prompt-btns {
display: flex;
justify-content: space-between;
padding-bottom: 0;
padding-top: 5px;
}
}
</style>