Skip to content

phsl / admin

Go to a project
Commit 5525bc22 by cherishsince
Options

【优化】优化 ai chat 主框架布局

parent 760bab7d
Showing with 160 additions and 68 deletions
src/views/ai/chat/index.vue
<template> <template>
<el-container> <el-container class="ai-layout">
<!-- 左侧：会话列表 --> <!-- 左侧：会话列表 -->
<el-aside width="260px" class="conversation-container"> <el-aside width="260px" class="conversation-container">
<!-- 左顶部：新建对话 --> <div>
<el-button class="w-1/1" type="primary"> <!-- 左顶部：新建对话 -->
<Icon icon="ep:plus" class="mr-5px" /> <el-button class="w-1/1 btn-new-conversation" type="primary">
新建对话 <Icon icon="ep:plus" class="mr-5px" />
</el-button> 新建对话
<!-- 左顶部：搜索对话 --> </el-button>
<el-input <!-- 左顶部：搜索对话 -->
v-model="searchName" <el-input
class="mt-10px" v-model="searchName"
placeholder="搜索历史记录" size="large"
@keyup="searchConversation" class="mt-10px search-input"
> placeholder="搜索历史记录"
<template #prefix> @keyup="searchConversation"
<Icon icon="ep:search" /> >
</template> <template #prefix>
</el-input> <Icon icon="ep:search" />
<!-- 左中间：对话列表 --> </template>
<div class="conversation-list" :style="{ height: leftHeight + 'px' }"> </el-input>
<el-row v-for="conversation in conversationList" :key="conversation.id"> <!-- 左中间：对话列表 -->
<div <div class="conversation-list" >
:class="conversation.id === conversationId ? 'conversation active' : 'conversation'" <!-- TODO @芋艿，置顶、聊天记录、一星期钱、30天前，前端对数据重新做一下分组，或者后端接口改一下 -->
@click="changeConversation(conversation)" <div>
> <el-text class="mx-1" size="small" tag="b">置顶</el-text>
<el-image :src="conversation.avatar" class="avatar" />
<span class="title">{{ conversation.title }}</span>
<span class="button">
<!-- TODO 芋艿：缺置顶按钮 -->
<el-icon title="编辑" @click="updateConversationTitle(conversation)">
<Icon icon="ep:edit" />
</el-icon>
<el-icon title="删除会话" @click="deleteConversationTitle(conversation)">
<Icon icon="ep:delete" />
</el-icon>
</span>
</div> </div>
</el-row> <el-row v-for="conversation in conversationList" :key="conversation.id">
<div
:class="conversation.id === conversationId ? 'conversation active' : 'conversation'"
@click="changeConversation(conversation)"
>
<div class="title-wrapper">
<img class="avatar" :src="conversation.avatar" />
<span class="title">{{ conversation.title }}</span>
</div>
<div class="button-wrapper">
<el-icon title="编辑" @click="updateConversationTitle(conversation)">
<Icon icon="ep:edit" />
</el-icon>
<el-icon title="删除会话" @click="deleteConversationTitle(conversation)">
<Icon icon="ep:delete" />
</el-icon>
</div>
</div>
</el-row>
</div>
</div> </div>
<!-- 左底部：工具栏 TODO 芋艿：50% 不太对 --> <!-- 左底部：工具栏 -->
<div class="tool-box"> <div class="tool-box">
<sapn class="w-1/2"> <Icon icon="ep:user" /> 角色仓库 </sapn> <div>
<sapn class="w-1/2"> <Icon icon="ep:delete" />清空未置顶对话</sapn> <Icon icon="ep:user" />
<el-text size="small">角色仓库</el-text>
</div>
<div>
<Icon icon="ep:delete" />
<el-text size="small" >清空未置顶对话</el-text>
</div>
</div> </div>
</el-aside> </el-aside>
<!-- 右侧：会话详情 --> <!-- 右侧：会话详情 -->
<el-container class="detail-container"> <el-container class="detail-container">
<!-- 右顶部 TODO 芋艿：右对齐 --> <!-- 右顶部 TODO 芋艿：右对齐 -->
<el-header class="header"> <el-header class="header">
<el-button>3.5-turbo-0125 <Icon icon="ep:setting" /></el-button> <div class="title">
<el-button> 标题......
<Icon icon="ep:user" /> </div>
</el-button> <div>
<el-button> <el-button>3.5-turbo-0125 <Icon icon="ep:setting" /></el-button>
<Icon icon="ep:download" /> <el-button>
</el-button> <Icon icon="ep:user" />
<el-button> </el-button>
<Icon icon="ep:arrow-up" /> <el-button>
</el-button> <Icon icon="ep:download" />
</el-button>
<el-button>
<Icon icon="ep:arrow-up" />
</el-button>
</div>
</el-header> </el-header>
<el-main>对话列表</el-main> <el-main>对话列表</el-main>
<el-footer>发送消息框</el-footer> <el-footer>
<el-input
class="prompt-input"
type="textarea"
placeholder="请输入提示词..."
/>
</el-footer>
</el-container> </el-container>
</el-container> </el-container>
</template> </template>
...@@ -105,21 +130,60 @@ const searchConversation = () => { ...@@ -105,21 +130,60 @@ const searchConversation = () => {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ai-layout {
// TODO @范 这里height不能 100% 先这样临时处理
position: absolute;
flex: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
//padding: 15px 15px;
}
.conversation-container { .conversation-container {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 10px;
padding-top: 10px;
.btn-new-conversation {
padding: 18px 0;
}
.search-input {
margin-top: 20px;
}
.conversation-list { .conversation-list {
margin-top: 20px;
.conversation { .conversation {
display: flex; display: flex;
justify-content: flex-start; flex-direction: row;
width: 100%; justify-content: space-between;
padding: 5px 5px 0 0; flex: 1;
padding: 0 5px;
margin-top: 10px;
cursor: pointer; cursor: pointer;
border-radius: 5px;
align-items: center;
line-height: 30px;
&.active { &.active {
// TODO 芋艿：这里不太对 background-color: #e6e6e6;
background-color: #343540;
.button { .button {
display: inline; display: inline-block;
} }
} }
.title-wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
.title { .title {
padding: 5px 10px; padding: 5px 10px;
max-width: 220px; max-width: 220px;
...@@ -131,36 +195,64 @@ const searchConversation = () => { ...@@ -131,36 +195,64 @@ const searchConversation = () => {
.avatar { .avatar {
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; display: flex;
flex-direction: row;
justify-items: center;
} }
.button { // 对话编辑、删除
position: absolute; .button-wrapper {
right: 2px; right: 2px;
top: 16px; display: flex;
flex-direction: row;
justify-items: center;
color: #606266;
.el-icon { .el-icon {
margin-right: 5px; margin-right: 5px;
} }
} }
} }
}
.tool-box { // 角色仓库、清空未设置对话
.tool-box {
line-height: 35px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--el-text-color);
> div {
display: flex; display: flex;
justify-content: flex-start; align-items: center;
padding: 0 20px 10px 20px; color: #606266;
border-top: 1px solid black; padding: 0;
margin: 0;
> span {
margin-left: 5px;
}
} }
} }
} }
.detail-container { .detail-container {
background: #ffffff;
.header { .header {
width: 100%;
height: 30px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
padding-top: 10px; background: #fbfbfb;
.title {
font-size: 23px;
font-weight: bold;
}
}
.prompt-input {
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment