yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/804/head
YunaiV 2025-07-28 12:27:07 +08:00
parent 2617e56c7b
commit d8daf6f3d4
2 changed files with 49 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/views/ai/chat/index/components/conversation/ConversationList.vue
View File

@ -3,7 +3,7 @@
<el-aside width="260px" class="conversation-container h-100%">
<!-- 左顶部：对话 -->
<div class="h-100%">
<el-button class="w-1/1 btn-new-conversation" type="primary" @click="createConversation">
<el-button class="w-1/1 py-4.5" type="primary" @click="createConversation">
<Icon icon="ep:plus" class="mr-5px" />
新建对话
</el-button>
@ -12,7 +12,7 @@
<el-input
v-model="searchName"
size="large"
class="mt-10px search-input"
class="mt-5"
placeholder="搜索历史记录"
@keyup="searchConversation"
>
@ -27,16 +27,13 @@
<el-empty v-if="loading" description="." :v-loading="loading" />
<!-- 情况二：按照 group 分组，展示聊天会话 list 列表 -->
<div v-for="conversationKey in Object.keys(conversationMap)" :key="conversationKey">
<div
class="conversation-item classify-title"
v-if="conversationMap[conversationKey].length"
>
<div class="mt-1.25 pt-2.5" v-if="conversationMap[conversationKey].length">
<el-text class="mx-1" size="small" tag="b">
{{ conversationKey }}
</el-text>
</div>
<div
class="conversation-item"
class="mt-1.25"
v-for="conversation in conversationMap[conversationKey]"
:key="conversation.id"
@click="handleConversationClick(conversation.id)"
@ -48,21 +45,28 @@
conversation.id === activeConversationId ? 'conversation active' : 'conversation'
"
>
<div class="title-wrapper">
<img class="avatar" :src="conversation.roleAvatar || roleAvatarDefaultImg" />
<div class="flex flex-row items-center">
<img
class="w-6.25 h-6.25 rounded-1.25 flex flex-row justify-center"
:src="conversation.roleAvatar || roleAvatarDefaultImg"
/>
<span class="title">{{ conversation.title }}</span>
</div>
<div class="button-wrapper" v-show="hoverConversationId === conversation.id">
<el-button class="btn" link @click.stop="handleTop(conversation)">
<div
class="right-0.5 flex flex-row justify-center"
style="color: var(--el-text-color-regular)"
v-show="hoverConversationId === conversation.id"
>
<el-button class="m-0" link @click.stop="handleTop(conversation)">
<el-icon title="置顶" v-if="!conversation.pinned"><Top /></el-icon>
<el-icon title="置顶" v-if="conversation.pinned"><Bottom /></el-icon>
</el-button>
<el-button class="btn" link @click.stop="updateConversationTitle(conversation)">
<el-button class="m-0" link @click.stop="updateConversationTitle(conversation)">
<el-icon title="编辑">
<Icon icon="ep:edit" />
</el-icon>
</el-button>
<el-button class="btn" link @click.stop="deleteChatConversation(conversation)">
<el-button class="m-0" link @click.stop="deleteChatConversation(conversation)">
<el-icon title="删除对话">
<Icon icon="ep:delete" />
</el-icon>
@ -77,14 +81,29 @@
</div>
<!-- 左底部：工具栏 -->
<div class="tool-box">
<div @click="handleRoleRepository">
<div
class="absolute bottom-0 left-0 right-0 px-5 leading-8.75 flex justify-between items-center"
style="
background-color: var(--el-fill-color-extra-light);
box-shadow: 0 0 1px 1px var(--el-border-color-lighter);
color: var(--el-text-color);
"
>
<div
class="flex items-center p-0 m-0 cursor-pointer"
style="color: var(--el-text-color-regular)"
@click="handleRoleRepository"
>
<Icon icon="ep:user" />
<el-text size="small">角色仓库</el-text>
<el-text class="ml-1.25" size="small">角色仓库</el-text>
</div>
<div @click="handleClearConversation">
<div
class="flex items-center p-0 m-0 cursor-pointer"
style="color: var(--el-text-color-regular)"
@click="handleClearConversation"
>
<Icon icon="ep:delete" />
<el-text size="small">清空未置顶对话</el-text>
<el-text class="ml-1.25" size="small">清空未置顶对话</el-text>
</div>
</div>
@ -361,26 +380,10 @@ onMounted(async () => {
padding: 10px 10px 0;
overflow: hidden;
.btn-new-conversation {
padding: 18px 0;
}
.search-input {
margin-top: 20px;
}
.conversation-list {
overflow: auto;
height: 100%;
.classify-title {
padding-top: 10px;
}
.conversation-item {
margin-top: 5px;
}
.conversation {
display: flex;
flex-direction: row;
@ -401,12 +404,6 @@ onMounted(async () => {
}
}
.title-wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
.title {
padding: 2px 10px;
max-width: 220px;
@ -417,58 +414,6 @@ onMounted(async () => {
white-space: nowrap;
text-overflow: ellipsis;
}
.avatar {
width: 25px;
height: 25px;
border-radius: 5px;
display: flex;
flex-direction: row;
justify-items: center;
}
// 对话编辑、删除
.button-wrapper {
right: 2px;
display: flex;
flex-direction: row;
justify-items: center;
color: var(--el-text-color-regular);
.btn {
margin: 0;
}
}
}
}
// 角色仓库、清空未设置对话
.tool-box {
position: absolute;
bottom: 0;
left: 0;
right: 0;
//width: 100%;
padding: 0 20px;
background-color: var(--el-fill-color-extra-light);
box-shadow: 0 0 1px 1px var(--el-border-color-lighter);
line-height: 35px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--el-text-color);
> div {
display: flex;
align-items: center;
color: var(--el-text-color-regular);
padding: 0;
margin: 0;
cursor: pointer;
> span {
margin-left: 5px;
}
}
}
}

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

@ -10,36 +10,38 @@
@on-conversation-delete="handlerConversationDelete"
/>
<!-- 右侧：对话详情 -->
<el-container class="detail-container">
<el-header class="header">
<div class="title">
<el-container class="bg-[var(--el-bg-color)]">
<el-header
class="flex flex-row items-center justify-between bg-[var(--el-bg-color-page)] shadow-[0_0_0_0_var(--el-border-color-light)]"
>
<div class="text-18px font-bold">
{{ activeConversation?.title ? activeConversation?.title : '对话' }}
<span v-if="activeMessageList.length">({{ activeMessageList.length }})</span>
</div>
<div class="btns" v-if="activeConversation">
<div class="flex w-300px flex-row justify-end" v-if="activeConversation">
<el-button type="primary" bg plain size="small" @click="openChatConversationUpdateForm">
<span v-html="activeConversation?.modelName"></span>
<Icon icon="ep:setting" class="ml-10px" />
</el-button>
<el-button size="small" class="btn" @click="handlerMessageClear">
<el-button size="small" class="p-10px" @click="handlerMessageClear">
<Icon
icon="heroicons-outline:archive-box-x-mark"
color="var(--el-text-color-placeholder)"
/>
</el-button>
<el-button size="small" class="btn">
<el-button size="small" class="p-10px">
<Icon icon="ep:download" color="var(--el-text-color-placeholder)" />
</el-button>
<el-button size="small" class="btn" @click="handleGoTopMessage">
<el-button size="small" class="p-10px" @click="handleGoTopMessage">
<Icon icon="ep:top" color="var(--el-text-color-placeholder)" />
</el-button>
</div>
</el-header>
<!-- main：消息列表 -->
<el-main class="main-container">
<el-main class="m-0 p-0 relative h-full w-full">
<div>
<div class="message-container">
<div class="absolute top-0 bottom-0 left-0 right-0 overflow-y-hidden p-0 m-0">
<!-- 情况一：消息加载中 -->
<MessageLoading v-if="activeMessageListLoading" />
<!-- 情况二：无聊天对话时 -->
@ -68,6 +70,7 @@
<!-- 底部 -->
<el-footer class="flex flex-col !h-auto !p-0">
<!-- TODO @芋艿：这块要想办法迁移下！ -->
<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)"
@ -577,156 +580,3 @@ onMounted(async () => {
await getMessageList()
})
</script>
<style lang="scss" scoped>
.conversation-container {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 10px 0;
.btn-new-conversation {
padding: 18px 0;
}
.search-input {
margin-top: 20px;
}
.conversation-list {
margin-top: 20px;
.conversation {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1;
padding: 0 5px;
margin-top: 10px;
cursor: pointer;
border-radius: 5px;
align-items: center;
line-height: 30px;
&.active {
background-color: var(--el-color-primary-light-9);
border: 1px solid var(--el-color-primary-light-7);
.button {
display: inline-block;
}
}
.title-wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
.title {
padding: 5px 10px;
max-width: 220px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.avatar {
width: 28px;
height: 28px;
display: flex;
flex-direction: row;
justify-items: center;
}
// 对话编辑、删除
.button-wrapper {
right: 2px;
display: flex;
flex-direction: row;
justify-items: center;
color: var(--el-text-color-regular);
.el-icon {
margin-right: 5px;
}
}
}
}
// 角色仓库、清空未设置对话
.tool-box {
line-height: 35px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--el-text-color);
> div {
display: flex;
align-items: center;
color: var(--el-text-color-regular);
padding: 0;
margin: 0;
cursor: pointer;
> span {
margin-left: 5px;
}
}
}
}
// 头部
.detail-container {
background: var(--el-bg-color);
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: var(--el-bg-color-page);
box-shadow: 0 0 0 0 var(--el-border-color-light);
.title {
font-size: 18px;
font-weight: bold;
}
.btns {
display: flex;
width: 300px;
flex-direction: row;
justify-content: flex-end;
//justify-content: space-between;
.btn {
padding: 10px;
}
}
}
}
// main 容器
.main-container {
margin: 0;
padding: 0;
position: relative;
height: 100%;
width: 100%;
.message-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: hidden;
padding: 0;
margin: 0;
}
}
</style>