root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

【解决todo】 ai 对话列表间距

Browse Source
This commit is contained in:
cherishsince 2024-05-21 10:33:21 +08:00
parent 61fa0f65ab
commit f164225bbe
1 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/ai/chat/Conversation.vue
View File

@ -26,13 +26,15 @@
<div class="conversation-list"> <div class="conversation-list">
<!-- TODO @fain：置顶、聊天记录、一星期钱、30天前，前端对数据重新做一下分组，或者后端接口改一下 --> <!-- TODO @fain：置顶、聊天记录、一星期钱、30天前，前端对数据重新做一下分组，或者后端接口改一下 -->
<div v-for="conversationKey in Object.keys(conversationMap)" :key="conversationKey"> <div v-for="conversationKey in Object.keys(conversationMap)" :key="conversationKey">
<div v-if="conversationMap[conversationKey].length"> <div class="conversation-item classify-title" v-if="conversationMap[conversationKey].length">
<el-text class="mx-1" size="small" tag="b">{{ conversationKey }}</el-text> <el-text class="mx-1" size="small" tag="b">{{ conversationKey }}</el-text>
</div> </div>
<el-row <div
class="conversation-item"
v-for="conversation in conversationMap[conversationKey]" v-for="conversation in conversationMap[conversationKey]"
:key="conversation.id" :key="conversation.id"
@click="handleConversationClick(conversation.id)"> @click="handleConversationClick(conversation.id)"
>
<div <div
:class="conversation.id === activeConversationId ? 'conversation active' : 'conversation'" :class="conversation.id === activeConversationId ? 'conversation active' : 'conversation'"
> >
@ -58,7 +60,7 @@
</el-button> </el-button>
</div> </div>
</div> </div>
</el-row> </div>
</div> </div>
</div> </div>
@ -351,7 +353,15 @@ onMounted(async () => {
} }
.conversation-list { .conversation-list {
margin-top: 20px; //margin-top: 20px;
.classify-title {
padding-top: 10px;
}
.conversation-item {
margin-top: 5px;
}
.conversation { .conversation {
display: flex; display: flex;
@ -359,7 +369,6 @@ onMounted(async () => {
justify-content: space-between; justify-content: space-between;
flex: 1; flex: 1;
padding: 0 5px; padding: 0 5px;
margin-top: 10px;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
align-items: center; align-items: center;
@ -380,17 +389,20 @@ onMounted(async () => {
} }
.title { .title {
padding: 5px 10px; padding: 2px 10px;
max-width: 220px; max-width: 220px;
font-size: 14px; font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.77);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.avatar { .avatar {
width: 28px; width: 25px;
height: 28px; height: 25px;
border-radius: 5px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-items: center; justify-items: center;