【优化】AI 抽离代码后，代码复制失效问题

src/components/MarkdownView/index.vue

 
 
 <template>
 <template>
-  <div v-html="contentHtml"></div>
+  <div ref="contentRef" v-html="contentHtml"></div>
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
+import {useClipboard} from "@vueuse/core";
+
 import {marked} from 'marked'
 import {marked} from 'marked'
 import 'highlight.js/styles/vs2015.min.css'
 import 'highlight.js/styles/vs2015.min.css'
 import hljs from 'highlight.js'
 import hljs from 'highlight.js'
 import {ref} from "vue";
 import {ref} from "vue";
 
 
+const {copy} = useClipboard() // 初始化 copy 到粘贴板
+const contentRef = ref()
+
 // 代码高亮：https://highlightjs.org/
 // 代码高亮：https://highlightjs.org/
 // 转换 markdown：marked
 // 转换 markdown：marked
 
 
@@ -17,7 +22,7 @@ const renderer = {
   code(code, language, c) {
   code(code, language, c) {
     const highlightHtml = hljs.highlight(code, {language: language, ignoreIllegals: true}).value
     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>`
     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 ()  => {
 onMounted(async ()  => {
   // 解析转换 markdown
   // 解析转换 markdown
   await renderMarkdown(props.content as string);
   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>
 </script>
 
 

src/views/ai/chat/Message.vue

@@ -202,6 +202,7 @@ onMounted(async () => {
     }
     }
 
 
     .left-text-container {
     .left-text-container {
+      position: relative;
       display: flex;
       display: flex;
       flex-direction: column;
       flex-direction: column;
       overflow-wrap: break-word;
       overflow-wrap: break-word;