【优化】优化 ai chat 主框架布局
This commit is contained in:
cherishsince
parent
760bab7d29
commit
5525bc2257
@ -1,67 +1,92 @@
|
|||||||
<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 = () => {
|
|||||||
}
|
}
|
||||||
</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 = () => {
|
|||||||
.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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user