+
置顶
@@ -32,15 +32,15 @@
@click="changeConversation(conversation)"
>
@@ -50,12 +50,12 @@
@@ -67,25 +67,96 @@
标题......
对话列表
-
-
+
+
+
+
+
@@ -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;
}
}
- ![]()
+ ![]()
{{ conversation.title }}
- 角色仓库
- 清空未置顶对话
+ 清空未置顶对话
- 3.5-turbo-0125
-
- 3.5-turbo-0125
+
-
-
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+ 2024-05-10 22:38
+
+
+
+ 如果您想获取某个网页或程序的截图，可以使用浏览器自带的截图功能，或者使用第三方截图工具，如Snipping
+ Tool、FastStone Capture等。如果您想将屏幕上的某个区域截取下来，可以使用键盘上的“Prt
+ Sc”键（或“Print Screen”键）来获取整个屏幕的截图，并将其粘贴到图像编辑软件中进行编辑和保存。
+ 如果您需要更具体的帮助，例如如何使用特定的截图工具或如何编辑截图，请提供更多详细信息，我将尽力为您提供帮助。
+
+
+
+
+
+
+ 
+ 复制
+
+
+
+ 
+ 删除
+
+
+
+
+
+
+
+
+
+
+ 2024-05-10 22:38
+
+
+
+ 今天天气
+
+
+
+
+
+
+ 复制
+
+
+
+
+ 删除
+
+
+
+ 发送
+