【优化】优化 ai chat 主框架布局
This commit is contained in:
cherishsince
parent
760bab7d29
commit
5525bc2257
@ -1,67 +1,92 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-container class="ai-layout">
|
||||
<!-- 左侧：会话列表 -->
|
||||
<el-aside width="260px" class="conversation-container">
|
||||
<!-- 左顶部：新建对话 -->
|
||||
<el-button class="w-1/1" type="primary">
|
||||
<Icon icon="ep:plus" class="mr-5px" />
|
||||
新建对话
|
||||
</el-button>
|
||||
<!-- 左顶部：搜索对话 -->
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
class="mt-10px"
|
||||
placeholder="搜索历史记录"
|
||||
@keyup="searchConversation"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon icon="ep:search" />
|
||||
</template>
|
||||
</el-input>
|
||||
<!-- 左中间：对话列表 -->
|
||||
<div class="conversation-list" :style="{ height: leftHeight + 'px' }">
|
||||
<el-row v-for="conversation in conversationList" :key="conversation.id">
|
||||
<div
|
||||
:class="conversation.id === conversationId ? 'conversation active' : 'conversation'"
|
||||
@click="changeConversation(conversation)"
|
||||
>
|
||||
<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>
|
||||
<!-- 左顶部：新建对话 -->
|
||||
<el-button class="w-1/1 btn-new-conversation" type="primary">
|
||||
<Icon icon="ep:plus" class="mr-5px" />
|
||||
新建对话
|
||||
</el-button>
|
||||
<!-- 左顶部：搜索对话 -->
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
size="large"
|
||||
class="mt-10px search-input"
|
||||
placeholder="搜索历史记录"
|
||||
@keyup="searchConversation"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon icon="ep:search" />
|
||||
</template>
|
||||
</el-input>
|
||||
<!-- 左中间：对话列表 -->
|
||||
<div class="conversation-list" >
|
||||
<!-- TODO @芋艿，置顶、聊天记录、一星期钱、30天前，前端对数据重新做一下分组，或者后端接口改一下 -->
|
||||
<div>
|
||||
<el-text class="mx-1" size="small" tag="b">置顶</el-text>
|
||||
</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>
|
||||
<!-- 左底部：工具栏 TODO 芋艿：50% 不太对 -->
|
||||
<!-- 左底部：工具栏 -->
|
||||
<div class="tool-box">
|
||||
<sapn class="w-1/2"> <Icon icon="ep:user" /> 角色仓库 </sapn>
|
||||
<sapn class="w-1/2"> <Icon icon="ep:delete" />清空未置顶对话</sapn>
|
||||
<div>
|
||||
<Icon icon="ep:user" />
|
||||
<el-text size="small">角色仓库</el-text>
|
||||
</div>
|
||||
<div>
|
||||
<Icon icon="ep:delete" />
|
||||
<el-text size="small" >清空未置顶对话</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</el-aside>
|
||||
<!-- 右侧：会话详情 -->
|
||||
<el-container class="detail-container">
|
||||
<!-- 右顶部 TODO 芋艿：右对齐 -->
|
||||
<el-header class="header">
|
||||
<el-button>3.5-turbo-0125 <Icon icon="ep:setting" /></el-button>
|
||||
<el-button>
|
||||
<Icon icon="ep:user" />
|
||||
</el-button>
|
||||
<el-button>
|
||||
<Icon icon="ep:download" />
|
||||
</el-button>
|
||||
<el-button>
|
||||
<Icon icon="ep:arrow-up" />
|
||||
</el-button>
|
||||
<div class="title">
|
||||
标题......
|
||||
</div>
|
||||
<div>
|
||||
<el-button>3.5-turbo-0125 <Icon icon="ep:setting" /></el-button>
|
||||
<el-button>
|
||||
<Icon icon="ep:user" />
|
||||
</el-button>
|
||||
<el-button>
|
||||
<Icon icon="ep:download" />
|
||||
</el-button>
|
||||
<el-button>
|
||||
<Icon icon="ep:arrow-up" />
|
||||
</el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>对话列表</el-main>
|
||||
<el-footer>发送消息框</el-footer>
|
||||
<el-footer>
|
||||
<el-input
|
||||
class="prompt-input"
|
||||
type="textarea"
|
||||
placeholder="请输入提示词..."
|
||||
/>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
@ -105,21 +130,60 @@ const searchConversation = () => {
|
||||
}
|
||||
</script>
|
||||
<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 {
|
||||
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 {
|
||||
margin-top: 20px;
|
||||
|
||||
.conversation {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 5px 5px 0 0;
|
||||
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 {
|
||||
// TODO 芋艿：这里不太对
|
||||
background-color: #343540;
|
||||
background-color: #e6e6e6;
|
||||
.button {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
padding: 5px 10px;
|
||||
max-width: 220px;
|
||||
@ -131,36 +195,64 @@ const searchConversation = () => {
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-items: center;
|
||||
}
|
||||
.button {
|
||||
position: absolute;
|
||||
// 对话编辑、删除
|
||||
.button-wrapper {
|
||||
right: 2px;
|
||||
top: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-items: center;
|
||||
color: #606266;
|
||||
.el-icon {
|
||||
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;
|
||||
justify-content: flex-start;
|
||||
padding: 0 20px 10px 20px;
|
||||
border-top: 1px solid black;
|
||||
align-items: center;
|
||||
color: #606266;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
> span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
background: #ffffff;
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
justify-content: space-between;
|
||||
background: #fbfbfb;
|
||||
|
||||
.title {
|
||||
font-size: 23px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.prompt-input {
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user