From 9d322c3a94616d00bd1511828f3f581dd33c938e Mon Sep 17 00:00:00 2001 From: cherishsince Date: Fri, 10 May 2024 23:35:47 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=B7=BB=E5=8A=A0=E3=80=91=E8=B0=83?= =?UTF-8?q?=E6=95=B4ui=20=E5=A2=9E=E5=8A=A0=20chat=E5=AF=B9=E8=AF=9D?= =?UTF-8?q?=E5=92=8C=E5=8F=91=E9=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/assets/ai/copy.svg | 1 + src/assets/ai/delete.svg | 1 + src/views/ai/chat/index.vue | 254 ++++++++++++++++++++++++++++++++---- 4 files changed, 235 insertions(+), 23 deletions(-) create mode 100644 src/assets/ai/copy.svg create mode 100644 src/assets/ai/delete.svg diff --git a/package.json b/package.json index b450bf69..db819026 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "private": false, "scripts": { "i": "pnpm install", - "dev": "vite", + "dev": "vite --mode env.local", "dev-server": "vite --mode dev", "ts:check": "vue-tsc --noEmit", "build:local": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build", diff --git a/src/assets/ai/copy.svg b/src/assets/ai/copy.svg new file mode 100644 index 00000000..f51f8d81 --- /dev/null +++ b/src/assets/ai/copy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/ai/delete.svg b/src/assets/ai/delete.svg new file mode 100644 index 00000000..d2ee18ed --- /dev/null +++ b/src/assets/ai/delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/ai/chat/index.vue b/src/views/ai/chat/index.vue index ec49b774..116f0e34 100644 --- a/src/views/ai/chat/index.vue +++ b/src/views/ai/chat/index.vue @@ -5,7 +5,7 @@
- + 新建对话 @@ -17,11 +17,11 @@ @keyup="searchConversation" > -
+
置顶 @@ -32,15 +32,15 @@ @click="changeConversation(conversation)" >
- + {{ conversation.title }}
- + - +
@@ -50,12 +50,12 @@
- + 角色仓库
- - 清空未置顶对话 + + 清空未置顶对话
@@ -67,25 +67,96 @@ 标题......
- 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 +
+
+ + 今天天气 + +
+
+
+ + 复制 +
+
+ + 删除 +
+
+
+ +
+
+ + + + + +
+ + 发送 +
@@ -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; } }