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

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",

src/assets/ai/copy.svg

@@ -0,0 +1 @@
+<?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>

src/assets/ai/delete.svg

@@ -0,0 +1 @@
+<?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>

src/views/ai/chat/index.vue

@@ -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>3.5-turbo-0125
+            <Icon icon="ep:setting"/>
+          </el-button>
           <el-button>
-            <Icon icon="ep:user" />
+            <Icon icon="ep:user"/>
           </el-button>
           <el-button>
-            <Icon icon="ep:download" />
+            <Icon icon="ep:download"/>
           </el-button>
           <el-button>
-            <Icon icon="ep:arrow-up" />
+            <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>