feat: 新增代码复制

frontend/components/ArticlesContent/End/TagList.vue

@@ -25,7 +25,7 @@ defineProps({
       </div>
       <div class="tag-list-container">
         <!-- :href="`/tag/${item.alias}`" -->
-        <NuxtLink v-for="(item, index) in tag" :key="index" href="" rel="" class="item tag-item">
+        <NuxtLink v-for="(item, index) in tag" :key="index" href="/" rel="" class="item tag-item">
           <span class="tag-title">{{ item.alias }}</span>
         </NuxtLink>
       </div>

frontend/components/ArticlesContent/GlobalComponent/AlertList.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="alert-list alert-list">
+    <div class="alert">代码复制成功</div>
+  </div>
+</template>
+
+<style scoped>
+.alert-list {
+  @apply flex flex-col fixed top-2rem right-2rem z-2000;
+}
+.alert{
+  @apply inline-block py-1rem px-2rem max-w-15rem text-size-1.167rem c-#007bff bg-#e6f3ff rd-2px cursor-pointer;
+}
+</style>

frontend/components/ArticlesContent/index.vue

@@ -18,7 +18,7 @@ defineProps<{ article: IArticle }>()
 const plugins = [breaks(), frontmatter(), highlightStyle(), themeStyle(), gemoji(), gfm(), highlight(), math(), medium({ background: 'rgba(0, 0, 0, 0.7)' }), mermaid()]
 
 // 赋值属性唯一ID
-function transformToId() {
+const transformToId = () => {
   const articleDom = document.getElementById('markdown-body')
   if (articleDom?.children) {
     const children = Array.from(articleDom.children)
@@ -35,7 +35,66 @@ function transformToId() {
   }
 }
 
-onMounted(transformToId)
+// 代码复制
+const alertShow = ref(false)
+const copyBtn = () => {
+  const markdownBody = document.getElementById('markdown-body')
+  const codeTags = markdownBody!.getElementsByTagName('code')
+  const copyBtnStyle = {
+    position: 'absolute',
+    top: '6px',
+    right: '15px',
+    fontSize: '12px',
+    lineHeight: '1',
+    cursor: 'pointer',
+    color: 'hsla(0,0%,54.9%,.8)',
+    transition: 'color .1s',
+  }
+
+  const btnInit = () => {
+    const copybtn = document.createElement('span')
+    copybtn.innerHTML = '复制代码'
+    copybtn.className = 'copyBtn'
+    copybtn.onmouseover = function () {
+      copybtn.style.color = '#8c8c8c'
+    }
+    copybtn.onmouseout = function () {
+      copybtn.style.color = 'hsla(0,0%,54.9%,.8)'
+    }
+    Object.assign(copybtn.style, copyBtnStyle)
+    return copybtn
+  }
+  const copyClick = (copybtn: HTMLSpanElement, codeTag: HTMLElement) => {
+    copybtn.onclick = function () {
+      const range = document.createRange()
+      range.selectNode(codeTag)
+      const selection = window.getSelection()
+      if (selection) {
+        selection.removeAllRanges()
+        selection.addRange(range)
+        document.execCommand('copy')
+        selection.removeAllRanges()
+      }
+      alertShow.value = true
+      setTimeout(() => {
+        alertShow.value = false
+      }, 2000)
+    }
+  }
+
+  for (let i = 0; i < codeTags.length; i++) {
+    const codeTag = codeTags[i]
+    const copybtn = btnInit()
+    copyClick(copybtn, codeTag)
+    // 创建按钮元素
+    codeTag.parentNode?.insertBefore(copybtn, codeTag.nextSibling)
+  }
+}
+
+onMounted(() => {
+  transformToId()
+  copyBtn()
+})
 const { immerseState } = useImmerse()
 </script>
 
@@ -74,23 +133,27 @@ const { immerseState } = useImmerse()
 
     <div itemprop="articleBody" class="article-content">
       <div class="break-all lh-1.75em; fw-400 text-15px ; overflow-x-hidden cache">
-        <Viewer id="markdown-body" :value="article.content" :plugins="plugins" />
+        <Viewer id="markdown-body" class="markdown-body" :value="article.content" :plugins="plugins" />
       </div>
     </div>
   </article>
+  <ArticlesContentGlobalComponentAlertList v-show="alertShow" />
 </template>
 
 <style scoped>
 #markdown-body {
-  @apply text-jj-font-normal
+  @apply text-jj-font-normal;
 }
 .authorAvatar {
-  @apply bg-center w-3.333rem h-3.333rem mr-1rem bg-cover rd-50% bg-repeat inline-block relative
+  @apply bg-center w-3.333rem h-3.333rem mr-1rem bg-cover rd-50% bg-repeat inline-block relative;
+}
+.rank {
+  @apply w-35px h-16px;
 }
-.rank{
-  @apply w-35px h-16px
+.cover {
+  @apply object-cover relative w-100%;
 }
-.cover{
- @apply object-cover relative w-100%
+.copyBtn:hover {
+  color: #8c8c8c;
 }
 </style>