Merge pull request #65 from nagisa77/codex/add-article-and-comment-link-copy-features

Add link copy and comment anchor support

open-isle-cli/src/components/CommentItem.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="info-content-container"
+    :id="'comment-' + comment.id"
     :style="{
       ...(level > 0 ? { /*borderLeft: '1px solid #e0e0e0', */borderBottom: 'none' } : {})
     }"
@@ -33,7 +34,7 @@
             <div class="make-reaction-item like-reaction">
               <i class="far fa-heart"></i>
             </div>
-            <div class="make-reaction-item copy-link">
+            <div class="make-reaction-item copy-link" @click="copyCommentLink">
               <i class="fas fa-link"></i>
             </div>
           </div>
@@ -93,7 +94,11 @@ const CommentItem = {
       })
       showEditor.value = false
     }
-    return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, renderMarkdown }
+    const copyCommentLink = () => {
+      const link = `${location.origin}${location.pathname}#comment-${props.comment.id}`
+      navigator.clipboard.writeText(link)
+    }
+    return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown }
   }
 }
 CommentItem.components = { CommentItem, CommentEditor }
@@ -118,4 +123,13 @@ export default CommentItem
   background-color: lightgray;
 }
 
+.comment-highlight {
+  animation: highlight 2s;
+}
+
+@keyframes highlight {
+  from { background-color: yellow; }
+  to { background-color: transparent; }
+}
+
 </style>

open-isle-cli/src/views/PostPageView.vue

@@ -53,7 +53,7 @@
                 <div class="make-reaction-item like-reaction">
                   <i class="far fa-heart"></i>
                 </div>
-                <div class="make-reaction-item copy-link">
+                <div class="make-reaction-item copy-link" @click="copyPostLink">
                   <i class="fas fa-link"></i>
                 </div>
               </div>
@@ -236,8 +236,21 @@ L 站的愿景是成为新的**理想型社区**，让每一个一身疲惫的
         reply: []
       })
     }
+    const copyPostLink = () => {
+      navigator.clipboard.writeText(location.href.split('#')[0])
+    }
     onMounted(() => {
       updateCurrentIndex()
+      const hash = location.hash
+      if (hash.startsWith('#comment-')) {
+        const id = hash.substring('#comment-'.length)
+        const el = document.getElementById('comment-' + id)
+        if (el && mainContainer.value) {
+          mainContainer.value.scrollTo({ top: el.offsetTop, behavior: 'instant' })
+          el.classList.add('comment-highlight')
+          setTimeout(() => el.classList.remove('comment-highlight'), 2000)
+        }
+      }
     })
 
     return {
@@ -253,6 +266,7 @@ L 站的愿景是成为新的**理想型社区**，让每一个一身疲惫的
       postComment,
       onSliderInput,
       onScroll: updateCurrentIndex,
+      copyPostLink,
       renderMarkdown
     }
   }