From 4b2f79bd2833ef99aa0c3825b03074be3f2f7196 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 28 三月 2025 10:39:46 +0800
Subject: [PATCH] 首页左侧完善

---
 src/components/AiChat.vue |   86 ++++++++++++++++++++++++++++++++++++++----
 1 files changed, 77 insertions(+), 9 deletions(-)

diff --git a/src/components/AiChat.vue b/src/components/AiChat.vue
index 2e01898..a2cca50 100644
--- a/src/components/AiChat.vue
+++ b/src/components/AiChat.vue
@@ -1,18 +1,36 @@
 <template>
-  <div>
+  <div style="position: relative;height:calc(100vh - 20px);width: 100%;display: flex;justify-content: center">
     <!-- 鑱婂ぉ娑堟伅鍒楄〃 -->
     <div class="chat-messages">
       <div
           v-for="(message, index) in messages"
-          :key="index"
+          :key="message + index"
           :class="['message', message.role]"
+          @mouseover="handleMouseEnter(message)"
       >
         <div class="avatar">
           <img :src="getAvatar(message.role)" alt="avatar" />
         </div>
         <div class="content">
-<!--          <div class="name">{{ getRoleName(message.role) }}</div>-->
-          <div class="text">{{ message.content }}</div>
+          <div class="text" :ref="'msg' + index">{{ message.content }}</div>
+          <div v-if="message.role === 'assistant'">
+            <div v-show="msgIndex === message" class="msg-op-list">
+              <el-button class="copy" v-show="false"/>
+              <el-tooltip class="item" effect="dark" content="澶嶅埗" placement="top">
+                <i class="el-icon-copy-document msg-op msg-copy" @click="copyText(message.content)"/>
+              </el-tooltip>
+              <el-tooltip class="item" effect="dark" content="閲嶆柊鐢熸垚" placement="top">
+                <i class="el-icon-refresh msg-op msg-re" @click="reAnswer"/>
+              </el-tooltip>
+            </div>
+          </div>
+        </div>
+        <div v-if="message.role === 'user'">
+          <div v-show="msgIndex === message" style="display: flex">
+            <el-tooltip class="item" effect="dark" content="澶嶅埗" placement="top">
+              <i class="el-icon-copy-document msg-op msg-copy" @click="copyText(message.content)"/>
+            </el-tooltip>
+          </div>
         </div>
       </div>
     </div>
@@ -36,7 +54,9 @@
 </template>
 
 <script>
+import ClipboardJS from 'clipboard';
 import {sendKbMsg} from "@/api/chat";
+import {Message} from "element-ui";
 
 export default {
   name: 'AiChat',
@@ -45,6 +65,10 @@
       messages: [
         {
           role: 'assistant',
+          content: '浣犲ソ锛佹垜鏄綘鐨� AI 鍔╂墜锛屾湁浠�涔堝彲浠ュ府浣犵殑鍚楋紵',
+        },
+        {
+          role: 'user',
           content: '浣犲ソ锛佹垜鏄綘鐨� AI 鍔╂墜锛屾湁浠�涔堝彲浠ュ府浣犵殑鍚楋紵',
         },
       ],
@@ -71,10 +95,33 @@
         max_tokens: 0,
         prompt_name: "default",
         return_direct: false
-      }
+      },
+      msgIndex: null,
+      msgRole: null
     };
   },
   methods: {
+    handleMouseEnter(msgIndex) {
+      console.log("榧犳爣绉诲叆", msgIndex)
+      this.msgIndex = msgIndex
+    },
+    handleMouseLeave() {
+      console.log("榧犳爣绉婚櫎")
+      this.msgIndex = null
+    },
+    // 閲嶆柊鐢熸垚
+    reAnswer() {
+    },
+    // 澶嶅埗鍐呭
+    copyText(content) {
+      const clipboard = new ClipboardJS('.copy', {
+        text: () => content
+      });
+      // 瑙﹀彂澶嶅埗锛堥渶瑕佷竴涓殣钘忕殑鎸夐挳锛�
+      document.querySelector('.copy').click();
+      clipboard.destroy();
+      Message.success("澶嶅埗鎴愬姛")
+    },
     // 鑾峰彇瑙掕壊澶村儚
     getAvatar(role) {
       const avatars = {
@@ -139,17 +186,21 @@
 }
 
 .chat-messages {
-  flex: 1;
   padding: 16px;
+  margin-top: 14px;
   overflow-y: auto;
+  width: 800px;
+  height: 680px;
 }
 
 .message {
   display: flex;
-  margin-bottom: 16px;
+  margin-bottom: 18px;
+  min-height: 75px;
 }
 
 .message.user {
+  align-items: center;
   flex-direction: row-reverse;
 }
 
@@ -165,7 +216,7 @@
   padding: 8px 12px;
   border-radius: 8px;
   background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
 }
 
 .message.user .content {
@@ -196,8 +247,25 @@
   justify-content: center;
   align-items: center;
   position: absolute;
-  bottom: 70px;
+  bottom: 50px;
   left: 50%; /* 灏� div 鐨勫乏杈圭Щ鍔ㄥ埌鐖跺鍣ㄧ殑 50% 浣嶇疆 */
   transform: translateX(-50%); /* 灏� div 鍚戝乏绉诲姩鑷韩瀹藉害鐨� 50% */
 }
+
+.msg-op-list {
+  margin-top: 15px;
+}
+.msg-copy {
+  font-size: 18px;
+}
+.msg-re {
+  font-size: 20px;
+}
+.msg-op {
+  color: gray;
+  margin-right: 5px;
+}
+.msg-op:hover {
+  cursor: pointer;
+}
 </style>

--
Gitblit v1.8.0