From cfdceca9f354e29c9c4d8fdd2d3ebd0c1cafb07e Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Fri, 17 May 2024 16:12:32 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91AI=20?=
 =?UTF-8?q?=E6=8A=BD=E7=A6=BB=E4=BB=A3=E7=A0=81=E5=90=8E=EF=BC=8C=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E5=A4=8D=E5=88=B6=E5=A4=B1=E6=95=88=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MarkdownView/index.vue | 21 +++++++++++++++++++--
 src/views/ai/chat/Message.vue         |  1 +
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/MarkdownView/index.vue b/src/components/MarkdownView/index.vue
index 6ecb2ea5..6d84301a 100644
--- a/src/components/MarkdownView/index.vue
+++ b/src/components/MarkdownView/index.vue
@@ -1,14 +1,19 @@
 
 <template>
-  <div v-html="contentHtml"></div>
+  <div ref="contentRef" v-html="contentHtml"></div>
 </template>
 
 <script setup lang="ts">
+import {useClipboard} from "@vueuse/core";
+
 import {marked} from 'marked'
 import 'highlight.js/styles/vs2015.min.css'
 import hljs from 'highlight.js'
 import {ref} from "vue";
 
+const {copy} = useClipboard() // 初始化 copy 到粘贴板
+const contentRef = ref()
+
 // 代码高亮：https://highlightjs.org/
 // 转换 markdown：marked
 
@@ -17,7 +22,7 @@ const renderer = {
   code(code, language, c) {
     const highlightHtml = hljs.highlight(code, {language: language, ignoreIllegals: true}).value
     const copyHtml = `<div id="copy" data-copy='${code}' style="position: absolute; right: 10px; top: 5px; color: #fff;cursor: pointer;">复制</div>`
-    return `<pre>${copyHtml}<code class="hljs">${highlightHtml}</code></pre>`
+    return `<pre style="position: relative;">${copyHtml}<code class="hljs">${highlightHtml}</code></pre>`
   }
 }
 
@@ -54,6 +59,18 @@ const renderMarkdown = async (content: string) => {
 onMounted(async ()  => {
   // 解析转换 markdown
   await renderMarkdown(props.content as string);
+  //
+  // 添加 copy 监听
+  contentRef.value.addEventListener('click', (e: any) => {
+    console.log(e)
+    if (e.target.id === 'copy') {
+      copy(e.target?.dataset?.copy)
+      ElMessage({
+        message: '复制成功!',
+        type: 'success'
+      })
+    }
+  })
 })
 </script>
 
diff --git a/src/views/ai/chat/Message.vue b/src/views/ai/chat/Message.vue
index 79ba7f2a..539b0d7a 100644
--- a/src/views/ai/chat/Message.vue
+++ b/src/views/ai/chat/Message.vue
@@ -202,6 +202,7 @@ onMounted(async () => {
     }
 
     .left-text-container {
+      position: relative;
       display: flex;
       flex-direction: column;
       overflow-wrap: break-word;