hhyykk/ipms-sjy-ui
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy-ui.git synced 2025-07-15 19:35:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

【添加】调整ui 增加 chat对话和发送

Browse Source
This commit is contained in:
cherishsince
2024-05-10 23:35:47 +08:00
parent be13eb1d0d
commit 9d322c3a94
4 changed files with 235 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@
<div>
<!-- 左顶部：新建对话 -->
<el-button class="w-1/1 btn-new-conversation" type="primary">
<Icon icon="ep:plus" class="mr-5px" />
<Icon icon="ep:plus" class="mr-5px"/>
新建对话
</el-button>
<!-- 左顶部：搜索对话 -->
@ -17,11 +17,11 @@
@keyup="searchConversation"
>
<template #prefix>
<Icon icon="ep:search" />
<Icon icon="ep:search"/>
</template>
</el-input>
<!-- 左中间：对话列表 -->
<div class="conversation-list" >
<div class="conversation-list">
<!-- TODO @芋艿，置顶、聊天记录、一星期钱、30天前，前端对数据重新做一下分组，或者后端接口改一下 -->
<div>
<el-text class="mx-1" size="small" tag="b">置顶</el-text>
@ -32,15 +32,15 @@
@click="changeConversation(conversation)"
>
<div class="title-wrapper">
<img class="avatar" :src="conversation.avatar" />
<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" />
<Icon icon="ep:edit"/>
</el-icon>
<el-icon title="删除会话" @click="deleteConversationTitle(conversation)">
<Icon icon="ep:delete" />
<Icon icon="ep:delete"/>
</el-icon>
</div>
</div>
@ -50,12 +50,12 @@
<!-- 左底部：工具栏 -->
<div class="tool-box">
<div>
<Icon icon="ep:user" />
<Icon icon="ep:user"/>
<el-text size="small">角色仓库</el-text>
</div>
<div>
<Icon icon="ep:delete" />
<el-text size="small" >清空未置顶对话</el-text>
<Icon icon="ep:delete"/>
<el-text size="small">清空未置顶对话</el-text>
</div>
</div>
</el-aside>
@ -67,25 +67,96 @@
标题......
</div>
<div>
<el-button>3.5-turbo-0125 <Icon icon="ep:setting" /></el-button>
<el-button>
<Icon icon="ep:user" />
<el-button>3.5-turbo-0125
<Icon icon="ep:setting"/>
</el-button>
<el-button>
<Icon icon="ep:download" />
<Icon icon="ep:user"/>
</el-button>
<el-button>
<Icon icon="ep:arrow-up" />
<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-input
class="prompt-input"
type="textarea"
placeholder="请输入提示词..."
/>
<el-main>
<div class="chat-list">
<!-- 靠左 message -->
<div class="left-message message-item">
<div class="avatar">
<el-avatar
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
/>
</div>
<div class="message">
<div>
<el-text class="time">2024-05-10 22:38</el-text>
</div>
<div class="left-text-container">
<el-text class="left-text">
如果您想获取某个网页或程序的截图，可以使用浏览器自带的截图功能，或者使用第三方截图工具，如Snipping
Tool、FastStone Capture等。如果您想将屏幕上的某个区域截取下来，可以使用键盘上的“Prt
Sc”键（或“Print Screen”键）来获取整个屏幕的截图，并将其粘贴到图像编辑软件中进行编辑和保存。
如果您需要更具体的帮助，例如如何使用特定的截图工具或如何编辑截图，请提供更多详细信息，我将尽力为您提供帮助。
</el-text>
</div>
<div class="left-btns">
<div class="btn-cus">
<img class="btn-image" src="@/assets/ai/copy.svg"/>
<el-text class="btn-cus-text">复制</el-text>
</div>
<div class="btn-cus" style="margin-left: 20px;">
<img class="btn-image" src="@/assets/ai/delete.svg" style="height: 17px;"/>
<el-text class="btn-cus-text">删除</el-text>
</div>
</div>
</div>
</div>
<!-- 靠右 message -->
<div class="right-message message-item">
<div class="avatar">
<el-avatar
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
/>
</div>
<div class="message">
<div>
<el-text class="time">2024-05-10 22:38</el-text>
</div>
<div class="right-text-container">
<el-text class="right-text">
今天天气
</el-text>
</div>
<div class="right-btns">
<div class="btn-cus">
<img class="btn-image" src="@/assets/ai/copy.svg"/>
<el-text class="btn-cus-text">复制</el-text>
</div>
<div class="btn-cus" style="margin-left: 20px;">
<img class="btn-image" src="@/assets/ai/delete.svg" style="height: 17px;"/>
<el-text class="btn-cus-text">删除</el-text>
</div>
</div>
</div>
</div>
</div>
</el-main>
<el-footer class="footer-container">
<textarea placeholder="问我任何问题...（Shift+Enter 换行，按下 Enter 发送）"
class="prompt-input">
</textarea>
<div class="prompt-btns">
<el-switch/>
<el-button type="primary" size="default">发送</el-button>
</div>
</el-footer>
</el-container>
</el-container>
@ -172,8 +243,10 @@ const searchConversation = () => {
border-radius: 5px;
align-items: center;
line-height: 30px;
&.active {
background-color: #e6e6e6;
.button {
display: inline-block;
}
@ -184,6 +257,7 @@ const searchConversation = () => {
flex-direction: row;
align-items: center;
}
.title {
padding: 5px 10px;
max-width: 220px;
@ -192,6 +266,7 @@ const searchConversation = () => {
white-space: nowrap;
text-overflow: ellipsis;
}
.avatar {
width: 28px;
height: 28px;
@ -199,6 +274,7 @@ const searchConversation = () => {
flex-direction: row;
justify-items: center;
}
// 对话编辑、删除
.button-wrapper {
right: 2px;
@ -206,6 +282,7 @@ const searchConversation = () => {
flex-direction: row;
justify-items: center;
color: #606266;
.el-icon {
margin-right: 5px;
}
@ -227,6 +304,7 @@ const searchConversation = () => {
color: #606266;
padding: 0;
margin: 0;
> span {
margin-left: 5px;
}
@ -234,6 +312,7 @@ const searchConversation = () => {
}
}
// 头部
.detail-container {
background: #ffffff;
@ -243,16 +322,147 @@ const searchConversation = () => {
align-items: center;
justify-content: space-between;
background: #fbfbfb;
box-shadow: 0 0 0 0 #dcdfe6;
.title {
font-size: 23px;
font-size: 18px;
font-weight: bold;
}
}
}
// 中间
.chat-list {
display: flex;
flex-direction: column;
.message-item {
margin-top: 50px;
}
.left-message {
display: flex;
flex-direction: row;
}
.right-message {
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
}
.avatar {
//height: 170px;
//width: 170px;
}
.message {
display: flex;
flex-direction: column;
text-align: left;
margin-left: 15px;
.time {
text-align: left;
line-height: 30px;
}
.left-text-container {
display: flex;
flex-direction: column;
overflow-wrap: break-word;
background-color: #e4e4e4;
box-shadow: 0 0 0 1px #e4e4e4;
border-radius: 10px;
padding: 10px 10px 5px 10px;
.left-text {
color: #393939;
}
}
.right-text-container {
display: flex;
flex-direction: column;
overflow-wrap: break-word;
background-color: #267fff;
color: #FFF;
box-shadow: 0 0 0 1px #267fff;
border-radius: 10px;
padding: 10px;
.right-text {
color: #FFF;
}
}
.left-btns, .right-btns {
display: flex;
flex-direction: row;
margin-top: 8px;
}
}
// 复制、删除按钮
.btn-cus {
display: flex;
background-color: transparent;
align-items: center;
.btn-image {
height: 20px;
margin-right: 5px;
}
.btn-cus-text {
color: #757575;
}
}
.btn-cus:hover {
cursor: pointer;
}
.btn-cus:focus {
background-color: #8c939d;
}
}
// 底部
.footer-container {
display: flex;
flex-direction: column;
height: auto;
border: 1px solid #e3e3e3;
border-radius: 10px;
margin: 20px 20px;
padding: 9px 10px;
.prompt-input {
height: 80px;
//box-shadow: none;
border: none;
box-sizing: border-box;
resize: none;
padding: 0px 2px;
//padding: 5px 5px;
overflow: hidden;
}
.prompt-input:focus {
outline: none;
}
.prompt-btns {
display: flex;
justify-content: space-between;
padding-bottom: 0px;
padding-top: 5px;
}
}
</style>