Merge remote-tracking branch 'origin/main' into feature/env

frontend_nuxt/components/CommentItem.vue

@@ -22,6 +22,7 @@
             :to="`/users/${comment.userId}?tab=achievements`"
             >{{ getMedalTitle(comment.medal) }}</router-link
           >
+          <i v-if="comment.pinned" class="fas fa-thumbtack pin-icon"></i>
           <span v-if="level >= 2">
             <i class="fas fa-reply reply-icon"></i>
             <span class="user-name reply-user-name">{{ comment.parentUserName }}</span>
@@ -74,6 +75,7 @@
               :comment="item"
               :level="level + 1"
               :default-show-replies="item.openReplies"
+              :post-author-id="postAuthorId"
             />
           </template>
         </BaseTimeline>
@@ -116,6 +118,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  postAuthorId: {
+    type: [Number, String],
+    required: true,
+  },
 })
 
 const emit = defineEmits(['deleted'])
@@ -170,12 +176,22 @@ const replyList = computed(() => {
 })
 
 const isAuthor = computed(() => authState.username === props.comment.userName)
+const isPostAuthor = computed(() => Number(authState.userId) === Number(props.postAuthorId))
 const isAdmin = computed(() => authState.role === 'ADMIN')
-const commentMenuItems = computed(() =>
-  isAuthor.value || isAdmin.value
-    ? [{ text: '删除评论', color: 'red', onClick: () => deleteComment() }]
-    : [],
-)
+const commentMenuItems = computed(() => {
+  const items = []
+  if (isAuthor.value || isAdmin.value) {
+    items.push({ text: '删除评论', color: 'red', onClick: () => deleteComment() })
+  }
+  if (isAdmin.value || isPostAuthor.value) {
+    if (props.comment.pinned) {
+      items.push({ text: '取消置顶', onClick: () => unpinComment() })
+    } else {
+      items.push({ text: '置顶', onClick: () => pinComment() })
+    }
+  }
+  return items
+})
 const deleteComment = async () => {
   const token = getToken()
   if (!token) {
@@ -257,6 +273,47 @@ const submitReply = async (parentUserName, text, clear) => {
   }
 }
 
+const pinComment = async () => {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  const url = isAdmin.value
+    ? `${API_BASE_URL}/api/admin/comments/${props.comment.id}/pin`
+    : `${API_BASE_URL}/api/comments/${props.comment.id}/pin`
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    props.comment.pinned = true
+    toast.success('已置顶')
+  } else {
+    toast.error('操作失败')
+  }
+}
+const unpinComment = async () => {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  const url = isAdmin.value
+    ? `${API_BASE_URL}/api/admin/comments/${props.comment.id}/unpin`
+    : `${API_BASE_URL}/api/comments/${props.comment.id}/unpin`
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    props.comment.pinned = false
+    toast.success('已取消置顶')
+  } else {
+    toast.error('操作失败')
+  }
+}
+
 const copyCommentLink = () => {
   const link = `${location.origin}${location.pathname}#comment-${props.comment.id}`
   navigator.clipboard.writeText(link).then(() => {
@@ -336,6 +393,12 @@ const handleContentClick = (e) => {
   margin-left: 10px;
 }
 
+.pin-icon {
+  font-size: 12px;
+  margin-left: 10px;
+  opacity: 0.6;
+}
+
 @keyframes highlight {
   from {
     background-color: yellow;