Skip to content

phsl / admin

Go to a project
Commit 9d322c3a by cherishsince
Options

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

parent be13eb1d
Showing with 236 additions and 22 deletions
package.json
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
"private": false, "private": false,
"scripts": { "scripts": {
"i": "pnpm install", "i": "pnpm install",
"dev": "vite", "dev": "vite --mode env.local",
"dev-server": "vite --mode dev", "dev-server": "vite --mode dev",
"ts:check": "vue-tsc --noEmit", "ts:check": "vue-tsc --noEmit",
"build:local": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build", "build:local": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build",
......
src/assets/ai/copy.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715352878351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1499" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M624.5 786.3c92.9 0 168.2-75.3 168.2-168.2V309c0-92.4-75.3-168.2-168.2-168.2H303.6c-92.4 0-168.2 75.3-168.2 168.2v309.1c0 92.4 75.3 168.2 168.2 168.2h320.9zM178.2 618.1V309c0-69.4 56.1-125.5 125.5-125.5h320.9c69.4 0 125.5 56.1 125.5 125.5v309.1c0 69.4-56.1 125.5-125.5 125.5h-321c-69.4 0-125.4-56.1-125.4-125.5z" p-id="1500" fill="#8a8a8a"></path><path d="M849.8 295.1v361.5c0 102.7-83.6 186.3-186.3 186.3H279.1v42.7h384.4c126.3 0 229.1-102.8 229.1-229.1V295.1h-42.8zM307.9 361.8h312.3c11.8 0 21.4-9.6 21.4-21.4 0-11.8-9.6-21.4-21.4-21.4H307.9c-11.8 0-21.4 9.6-21.4 21.4 0 11.9 9.6 21.4 21.4 21.4zM307.9 484.6h312.3c11.8 0 21.4-9.6 21.4-21.4 0-11.8-9.6-21.4-21.4-21.4H307.9c-11.8 0-21.4 9.6-21.4 21.4 0 11.9 9.6 21.4 21.4 21.4z" p-id="1501" fill="#8a8a8a"></path><path d="M620.2 607.4c11.8 0 21.4-9.6 21.4-21.4 0-11.8-9.6-21.4-21.4-21.4H307.9c-11.8 0-21.4 9.6-21.4 21.4 0 11.8 9.6 21.4 21.4 21.4h312.3z" p-id="1502" fill="#8a8a8a"></path></svg>
\ No newline at end of file
src/assets/ai/delete.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715354120346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3256" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M907.1 263.7H118.9c-9.1 0-16.4-7.3-16.4-16.4s7.3-16.4 16.4-16.4H907c9.1 0 16.4 7.3 16.4 16.4s-7.3 16.4-16.3 16.4z" fill="#8a8a8a" p-id="3257"></path><path d="M772.5 928.3H257.4c-27.7 0-50.2-22.5-50.2-50.2V247.2c0-9.1 7.3-16.4 16.4-16.4H801c12.1 0 21.9 9.8 21.9 21.9v625.2c0 27.8-22.6 50.4-50.4 50.4zM240 263.7v614.4c0 9.6 7.8 17.4 17.4 17.4h515.2c9.7 0 17.5-7.9 17.5-17.5V263.7H240zM657.4 131.1H368.6c-9.1 0-16.4-7.3-16.4-16.4s7.3-16.4 16.4-16.4h288.7c9.1 0 16.4 7.3 16.4 16.4s-7.3 16.4-16.3 16.4z" fill="#8a8a8a" p-id="3258"></path><path d="M416 754.5c-9.1 0-16.4-7.3-16.4-16.4V517.8c0-9.1 7.3-16.4 16.4-16.4s16.4 7.3 16.4 16.4V738c0.1 9.1-7.3 16.5-16.4 16.5z" fill="#8a8a8a" p-id="3259"></path><path d="M416 465.2c-9.1 0-16.4-7.3-16.4-16.4v-59.4c0-9.1 7.3-16.4 16.4-16.4s16.4 7.3 16.4 16.4v59.4c0.1 9.1-7.3 16.4-16.4 16.4zM604.9 754.5c-9.1 0-16.4-7.3-16.4-16.4v-67.2c0-9.1 7.3-16.4 16.4-16.4s16.4 7.3 16.4 16.4V738c0 9.1-7.3 16.5-16.4 16.5z" fill="#8a8a8a" opacity=".4" p-id="3260"></path><path d="M604.9 619.1c-9.1 0-16.4-7.3-16.4-16.4V389.4c0-9.1 7.3-16.4 16.4-16.4s16.4 7.3 16.4 16.4v213.3c0 9.1-7.3 16.4-16.4 16.4z" fill="#8a8a8a" p-id="3261"></path></svg>
\ No newline at end of file
src/views/ai/chat/index.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div> <div>
<!-- 左顶部：新建对话 --> <!-- 左顶部：新建对话 -->
<el-button class="w-1/1 btn-new-conversation" type="primary"> <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> </el-button>
<!-- 左顶部：搜索对话 --> <!-- 左顶部：搜索对话 -->
...@@ -17,11 +17,11 @@ ...@@ -17,11 +17,11 @@
@keyup="searchConversation" @keyup="searchConversation"
> >
<template #prefix> <template #prefix>
<Icon icon="ep:search" /> <Icon icon="ep:search"/>
</template> </template>
</el-input> </el-input>
<!-- 左中间：对话列表 --> <!-- 左中间：对话列表 -->
<div class="conversation-list" > <div class="conversation-list">
<!-- TODO @芋艿，置顶、聊天记录、一星期钱、30天前，前端对数据重新做一下分组，或者后端接口改一下 --> <!-- TODO @芋艿，置顶、聊天记录、一星期钱、30天前，前端对数据重新做一下分组，或者后端接口改一下 -->
<div> <div>
<el-text class="mx-1" size="small" tag="b">置顶</el-text> <el-text class="mx-1" size="small" tag="b">置顶</el-text>
...@@ -32,15 +32,15 @@ ...@@ -32,15 +32,15 @@
@click="changeConversation(conversation)" @click="changeConversation(conversation)"
> >
<div class="title-wrapper"> <div class="title-wrapper">
<img class="avatar" :src="conversation.avatar" /> <img class="avatar" :src="conversation.avatar"/>
<span class="title">{{ conversation.title }}</span> <span class="title">{{ conversation.title }}</span>
</div> </div>
<div class="button-wrapper"> <div class="button-wrapper">
<el-icon title="编辑" @click="updateConversationTitle(conversation)"> <el-icon title="编辑" @click="updateConversationTitle(conversation)">
<Icon icon="ep:edit" /> <Icon icon="ep:edit"/>
</el-icon> </el-icon>
<el-icon title="删除会话" @click="deleteConversationTitle(conversation)"> <el-icon title="删除会话" @click="deleteConversationTitle(conversation)">
<Icon icon="ep:delete" /> <Icon icon="ep:delete"/>
</el-icon> </el-icon>
</div> </div>
</div> </div>
...@@ -50,12 +50,12 @@ ...@@ -50,12 +50,12 @@
<!-- 左底部：工具栏 --> <!-- 左底部：工具栏 -->
<div class="tool-box"> <div class="tool-box">
<div> <div>
<Icon icon="ep:user" /> <Icon icon="ep:user"/>
<el-text size="small">角色仓库</el-text> <el-text size="small">角色仓库</el-text>
</div> </div>
<div> <div>
<Icon icon="ep:delete" /> <Icon icon="ep:delete"/>
<el-text size="small" >清空未置顶对话</el-text> <el-text size="small">清空未置顶对话</el-text>
</div> </div>
</div> </div>
</el-aside> </el-aside>
...@@ -67,25 +67,96 @@ ...@@ -67,25 +67,96 @@
标题...... 标题......
</div> </div>
<div> <div>
<el-button>3.5-turbo-0125 <Icon icon="ep:setting" /></el-button> <el-button>3.5-turbo-0125
<Icon icon="ep:setting"/>
</el-button>
<el-button> <el-button>
<Icon icon="ep:user" /> <Icon icon="ep:user"/>
</el-button> </el-button>
<el-button> <el-button>
<Icon icon="ep:download" /> <Icon icon="ep:download"/>
</el-button> </el-button>
<el-button> <el-button>
<Icon icon="ep:arrow-up" /> <Icon icon="ep:arrow-up"/>
</el-button> </el-button>
</div> </div>
</el-header> </el-header>
<el-main>对话列表</el-main> <el-main>
<el-footer>
<el-input <div class="chat-list">
class="prompt-input" <!-- 靠左 message -->
type="textarea" <div class="left-message message-item">
placeholder="请输入提示词..." <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-footer>
</el-container> </el-container>
</el-container> </el-container>
...@@ -172,8 +243,10 @@ const searchConversation = () => { ...@@ -172,8 +243,10 @@ const searchConversation = () => {
border-radius: 5px; border-radius: 5px;
align-items: center; align-items: center;
line-height: 30px; line-height: 30px;
&.active { &.active {
background-color: #e6e6e6; background-color: #e6e6e6;
.button { .button {
display: inline-block; display: inline-block;
} }
...@@ -184,6 +257,7 @@ const searchConversation = () => { ...@@ -184,6 +257,7 @@ const searchConversation = () => {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.title { .title {
padding: 5px 10px; padding: 5px 10px;
max-width: 220px; max-width: 220px;
...@@ -192,6 +266,7 @@ const searchConversation = () => { ...@@ -192,6 +266,7 @@ const searchConversation = () => {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.avatar { .avatar {
width: 28px; width: 28px;
height: 28px; height: 28px;
...@@ -199,6 +274,7 @@ const searchConversation = () => { ...@@ -199,6 +274,7 @@ const searchConversation = () => {
flex-direction: row; flex-direction: row;
justify-items: center; justify-items: center;
} }
// 对话编辑、删除 // 对话编辑、删除
.button-wrapper { .button-wrapper {
right: 2px; right: 2px;
...@@ -206,6 +282,7 @@ const searchConversation = () => { ...@@ -206,6 +282,7 @@ const searchConversation = () => {
flex-direction: row; flex-direction: row;
justify-items: center; justify-items: center;
color: #606266; color: #606266;
.el-icon { .el-icon {
margin-right: 5px; margin-right: 5px;
} }
...@@ -227,6 +304,7 @@ const searchConversation = () => { ...@@ -227,6 +304,7 @@ const searchConversation = () => {
color: #606266; color: #606266;
padding: 0; padding: 0;
margin: 0; margin: 0;
> span { > span {
margin-left: 5px; margin-left: 5px;
} }
...@@ -234,6 +312,7 @@ const searchConversation = () => { ...@@ -234,6 +312,7 @@ const searchConversation = () => {
} }
} }
// 头部
.detail-container { .detail-container {
background: #ffffff; background: #ffffff;
...@@ -243,16 +322,147 @@ const searchConversation = () => { ...@@ -243,16 +322,147 @@ const searchConversation = () => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: #fbfbfb; background: #fbfbfb;
box-shadow: 0 0 0 0 #dcdfe6;
.title { .title {
font-size: 23px; font-size: 18px;
font-weight: bold; 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 { .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> </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