From e9e996f291f37c842469da3dc126ba754123c54d Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Wed, 15 Oct 2025 17:47:45 +0800
Subject: [PATCH 1/8] refactor: simplify reactions group usage

---
 frontend_nuxt/components/CommentItem.vue    |  89 +++++++++++++--
 frontend_nuxt/components/ReactionsGroup.vue |  50 +--------
 frontend_nuxt/pages/message-box/[id].vue    | 116 +++++++++++++++++---
 frontend_nuxt/pages/posts/[id]/index.vue    |  95 +++++++++++-----
 4 files changed, 257 insertions(+), 93 deletions(-)

diff --git a/frontend_nuxt/components/CommentItem.vue b/frontend_nuxt/components/CommentItem.vue
index b47456dda..4c260fd5a 100644
--- a/frontend_nuxt/components/CommentItem.vue
+++ b/frontend_nuxt/components/CommentItem.vue
@@ -53,14 +53,29 @@
         @click="handleContentClick"
       ></div>
       <div class="article-footer-container">
-        <ReactionsGroup v-model="comment.reactions" content-type="comment" :content-id="comment.id">
-          <div class="make-reaction-item comment-reaction" @click="toggleEditor">
+        <ReactionsGroup
+          ref="commentReactionsGroupRef"
+          v-model="comment.reactions"
+          content-type="comment"
+          :content-id="comment.id"
+        />
+        <div class="comment-reaction-actions">
+          <div
+            class="reaction-action like-action"
+            :class="{ selected: commentLikedByMe }"
+            @click="toggleCommentLike"
+          >
+            <like v-if="!commentLikedByMe" />
+            <like v-else theme="filled" />
+            <span v-if="commentLikeCount" class="reaction-count">{{ commentLikeCount }}</span>
+          </div>
+          <div class="reaction-action comment-reaction" @click="toggleEditor">
             <comment-icon />
           </div>
-          <div class="make-reaction-item copy-link" @click="copyCommentLink">
+          <div class="reaction-action copy-link" @click="copyCommentLink">
             <link-icon />
           </div>
-        </ReactionsGroup>
+        </div>
       </div>
       <div class="comment-editor-wrapper" ref="editorWrapper">
         <CommentEditor
@@ -156,6 +171,18 @@ const lightboxVisible = ref(false)
 const lightboxIndex = ref(0)
 const lightboxImgs = ref([])
 const loggedIn = computed(() => authState.loggedIn)
+const commentReactionsGroupRef = ref(null)
+const commentLikeCount = computed(
+  () => (props.comment.reactions || []).filter((reaction) => reaction.type === 'LIKE').length,
+)
+const commentLikedByMe = computed(() =>
+  (props.comment.reactions || []).some(
+    (reaction) => reaction.type === 'LIKE' && reaction.user === authState.username,
+  ),
+)
+const toggleCommentLike = () => {
+  commentReactionsGroupRef.value?.toggleReaction('LIKE')
+}
 const countReplies = (list) => list.reduce((sum, r) => sum + 1 + countReplies(r.reply || []), 0)
 const replyCount = computed(() => countReplies(props.comment.reply || []))
 const isCommentFromPostAuthor = computed(() => {
@@ -365,6 +392,56 @@ const handleContentClick = (e) => {
 </script>
 
 <style scoped>
+.article-footer-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 6px;
+}
+
+.comment-reaction-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.reaction-action {
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  opacity: 0.6;
+  font-size: 18px;
+  transition:
+    background-color 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.reaction-action:hover {
+  opacity: 1;
+  background-color: var(--normal-light-background-color);
+}
+
+.reaction-action.like-action {
+  color: #ff0000;
+}
+
+.reaction-action.selected {
+  opacity: 1;
+  background-color: var(--normal-light-background-color);
+}
+
+.reaction-count {
+  font-size: 14px;
+  font-weight: bold;
+}
+
 .reply-toggle {
   cursor: pointer;
   color: var(--primary-color);
@@ -378,10 +455,6 @@ const handleContentClick = (e) => {
   color: var(--primary-color);
 }
 
-.comment-reaction:hover {
-  background-color: lightgray;
-}
-
 .comment-highlight {
   animation: highlight 2s;
 }
diff --git a/frontend_nuxt/components/ReactionsGroup.vue b/frontend_nuxt/components/ReactionsGroup.vue
index b90ff41a1..89c3450f8 100644
--- a/frontend_nuxt/components/ReactionsGroup.vue
+++ b/frontend_nuxt/components/ReactionsGroup.vue
@@ -35,18 +35,6 @@
         </template>
       </div>
     </div>
-    <div class="make-reaction-container">
-      <div
-        v-if="props.contentType !== 'message'"
-        class="make-reaction-item like-reaction"
-        @click="toggleReaction('LIKE')"
-      >
-        <like v-if="!userReacted('LIKE')" />
-        <like v-else theme="filled" />
-        <span class="reactions-count" v-if="likeCount">{{ likeCount }}</span>
-      </div>
-      <slot></slot>
-    </div>
     <div
       v-if="panelVisible"
       class="reactions-panel"
@@ -102,8 +90,6 @@ const counts = computed(() => {
 })
 
 const totalCount = computed(() => Object.values(counts.value).reduce((a, b) => a + b, 0))
-const likeCount = computed(() => counts.value['LIKE'] || 0)
-
 const userReacted = (type) =>
   reactions.value.some((r) => r.type === type && r.user === authState.username)
 
@@ -152,7 +138,7 @@ const displayedReactions = computed(() => {
     .map((type) => ({ type }))
 })
 
-const panelTypes = computed(() => sortedReactionTypes.value.filter((t) => t !== 'LIKE'))
+const panelTypes = computed(() => sortedReactionTypes.value)
 
 const panelVisible = ref(false)
 let hideTimer = null
@@ -246,6 +232,10 @@ const toggleReaction = async (type) => {
 onMounted(async () => {
   await initialize()
 })
+
+defineExpose({
+  toggleReaction,
+})
 </script>
 
 <style>
@@ -253,11 +243,7 @@ onMounted(async () => {
   position: relative;
   display: flex;
   flex-direction: row;
-  gap: 10px;
   align-items: center;
-  width: 100%;
-  justify-content: space-between;
-  flex-wrap: wrap;
 }
 
 .reactions-viewer {
@@ -295,32 +281,6 @@ onMounted(async () => {
   padding-left: 5px;
 }
 
-.make-reaction-container {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-}
-
-.make-reaction-item {
-  cursor: pointer;
-  padding: 4px;
-  opacity: 0.5;
-  border-radius: 8px;
-  font-size: 20px;
-}
-
-.like-reaction {
-  color: #ff0000;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 5px;
-}
-
-.make-reaction-item:hover {
-  background-color: #ffe2e2;
-}
-
 .reactions-count {
   font-size: 16px;
   font-weight: bold;
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index 54ef8ee75..cf1c6df97 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -61,14 +61,31 @@
                 @click="handleContentClick"
               ></div>
             </div>
-            <ReactionsGroup
-              :model-value="item.reactions"
-              content-type="message"
-              :content-id="item.id"
-              @update:modelValue="(v) => (item.reactions = v)"
-            >
-              <div @click="setReply(item)" class="reply-btn"><next /> 写个回复...</div>
-            </ReactionsGroup>
+            <div class="message-reaction-row">
+              <ReactionsGroup
+                :ref="(el) => setMessageReactionRef(item.id, el)"
+                :model-value="item.reactions"
+                content-type="message"
+                :content-id="item.id"
+                @update:modelValue="(v) => (item.reactions = v)"
+              />
+              <div class="message-reaction-actions">
+                <div
+                  class="reaction-action like-action"
+                  :class="{ selected: isMessageLiked(item) }"
+                  @click="toggleMessageLike(item)"
+                >
+                  <like v-if="!isMessageLiked(item)" />
+                  <like v-else theme="filled" />
+                  <span v-if="getMessageLikeCount(item)" class="reaction-count">{{
+                    getMessageLikeCount(item)
+                  }}</span>
+                </div>
+                <div @click="setReply(item)" class="reaction-action reply-btn">
+                  <next /> 写个回复...
+                </div>
+              </div>
+            </div>
           </template>
         </BaseTimeline>
         <div class="empty-container">
@@ -180,6 +197,32 @@ function setReply(message) {
   replyTo.value = message
 }
 
+const messageReactionRefs = new Map()
+function setMessageReactionRef(id, el) {
+  if (el) {
+    messageReactionRefs.set(id, el)
+  } else {
+    messageReactionRefs.delete(id)
+  }
+}
+
+function getMessageLikeCount(message) {
+  return (message.reactions || []).filter((reaction) => reaction.type === 'LIKE').length
+}
+
+function isMessageLiked(message) {
+  const username = currentUser.value?.username
+  if (!username) return false
+  return (message.reactions || []).some(
+    (reaction) => reaction.type === 'LIKE' && reaction.user === username,
+  )
+}
+
+function toggleMessageLike(message) {
+  const group = messageReactionRefs.get(message.id)
+  group?.toggleReaction('LIKE')
+}
+
 /** 改造：滚动函数 —— smooth & instant */
 function scrollToBottomSmooth() {
   const el = messagesListEl.value
@@ -710,6 +753,55 @@ function goBack() {
   background-color: var(--normal-light-background-color);
 }
 
+.message-reaction-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 6px;
+}
+
+.message-reaction-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.reaction-action {
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  opacity: 0.6;
+  font-size: 16px;
+  transition:
+    background-color 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.reaction-action:hover {
+  opacity: 1;
+  background-color: var(--normal-light-background-color);
+}
+
+.reaction-action.like-action {
+  color: #ff0000;
+}
+
+.reaction-action.selected {
+  opacity: 1;
+  background-color: var(--normal-light-background-color);
+}
+
+.reaction-count {
+  font-size: 14px;
+  font-weight: bold;
+}
+
 .reply-header {
   display: flex;
   flex-direction: row;
@@ -723,14 +815,8 @@ function goBack() {
 }
 
 .reply-btn {
-  cursor: pointer;
-  padding: 4px;
-  opacity: 0.6;
   font-size: 12px;
-}
-
-.reply-btn:hover {
-  opacity: 1;
+  color: var(--primary-color);
 }
 
 .active-reply {
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index 8fd467b82..fd1159e8c 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -92,11 +92,26 @@
           ></div>
 
           <div class="article-footer-container">
-            <ReactionsGroup v-model="postReactions" content-type="post" :content-id="postId">
-              <div class="make-reaction-item copy-link" @click="copyPostLink">
+            <ReactionsGroup
+              ref="postReactionsGroupRef"
+              v-model="postReactions"
+              content-type="post"
+              :content-id="postId"
+            />
+            <div class="article-footer-actions">
+              <div
+                class="reaction-action like-action"
+                :class="{ selected: postLikedByMe }"
+                @click="togglePostLike"
+              >
+                <like v-if="!postLikedByMe" />
+                <like v-else theme="filled" />
+                <span v-if="postLikeCount" class="reaction-count">{{ postLikeCount }}</span>
+              </div>
+              <div class="reaction-action copy-link" @click="copyPostLink">
                 <link-icon />
               </div>
-            </ReactionsGroup>
+            </div>
           </div>
         </div>
       </div>
@@ -223,6 +238,18 @@ const postContent = ref('')
 const category = ref('')
 const tags = ref([])
 const postReactions = ref([])
+const postReactionsGroupRef = ref(null)
+const postLikeCount = computed(
+  () => postReactions.value.filter((reaction) => reaction.type === 'LIKE').length,
+)
+const postLikedByMe = computed(() =>
+  postReactions.value.some(
+    (reaction) => reaction.type === 'LIKE' && reaction.user === authState.username,
+  ),
+)
+const togglePostLike = () => {
+  postReactionsGroupRef.value?.toggleReaction('LIKE')
+}
 const comments = ref([])
 const changeLogs = ref([])
 const status = ref('PUBLISHED')
@@ -366,9 +393,9 @@ const changeLogIcon = (l) => {
       return 'unlock'
     }
   } else if (l.type === 'PINNED') {
-    if(l.newPinnedAt){
+    if (l.newPinnedAt) {
       return 'pin'
-    }else{
+    } else {
       return 'clear-icon'
     }
   } else if (l.type === 'FEATURED') {
@@ -1245,35 +1272,53 @@ onMounted(async () => {
 .article-footer-container {
   display: flex;
   flex-direction: row;
+  align-items: center;
   gap: 10px;
   margin-top: 0px;
+  flex-wrap: wrap;
 }
 
-.reactions-viewer {
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-  align-items: center;
-}
-
-.reactions-viewer-item-container {
-  display: flex;
-  flex-direction: row;
-  gap: 2px;
-  align-items: center;
-}
-
-.reactions-viewer-item {
-  font-size: 16px;
-}
-
-.make-reaction-container {
+.article-footer-actions {
   display: flex;
   flex-direction: row;
   gap: 10px;
+  align-items: center;
 }
 
-.copy-link:hover {
+.reaction-action {
+  cursor: pointer;
+  padding: 4px 10px;
+  opacity: 0.6;
+  border-radius: 10px;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  transition:
+    background-color 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.reaction-action:hover {
+  opacity: 1;
+  background-color: var(--normal-light-background-color);
+}
+
+.reaction-action.like-action {
+  color: #ff0000;
+}
+
+.reaction-action.selected {
+  opacity: 1;
+  background-color: var(--normal-light-background-color);
+}
+
+.reaction-count {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.reaction-action.copy-link:hover {
   background-color: #e2e2e2;
 }
 

From 4f248e8a71baef6dd00a8b158fb15dcb67422f01 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Wed, 15 Oct 2025 18:08:16 +0800
Subject: [PATCH 2/8] =?UTF-8?q?fix:=20=E5=B8=83=E5=B1=80=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/CommentItem.vue | 9 ---------
 frontend_nuxt/pages/message-box/[id].vue | 2 +-
 frontend_nuxt/pages/posts/[id]/index.vue | 2 +-
 3 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/frontend_nuxt/components/CommentItem.vue b/frontend_nuxt/components/CommentItem.vue
index 4c260fd5a..03a610df8 100644
--- a/frontend_nuxt/components/CommentItem.vue
+++ b/frontend_nuxt/components/CommentItem.vue
@@ -392,15 +392,6 @@ const handleContentClick = (e) => {
 </script>
 
 <style scoped>
-.article-footer-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-  margin-top: 6px;
-}
-
 .comment-reaction-actions {
   display: flex;
   flex-direction: row;
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index cf1c6df97..5b2412d6d 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -756,7 +756,7 @@ function goBack() {
 .message-reaction-row {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 6px;
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index fd1159e8c..ba0c7207f 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -1272,7 +1272,7 @@ onMounted(async () => {
 .article-footer-container {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  justify-content: space-between;
   gap: 10px;
   margin-top: 0px;
   flex-wrap: wrap;

From a68c925c68f3fc1e9752d7c41f478f25ff1ddc43 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Wed, 15 Oct 2025 19:52:30 +0800
Subject: [PATCH 3/8] =?UTF-8?q?fix:=20=E9=9B=86=E6=88=90=E4=B8=80=E4=B8=8B?=
 =?UTF-8?q?=E7=88=B6=E4=BA=B2=E5=AE=B9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/ReactionsGroup.vue | 40 +++++++++++++++++++--
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/frontend_nuxt/components/ReactionsGroup.vue b/frontend_nuxt/components/ReactionsGroup.vue
index 89c3450f8..122e6557a 100644
--- a/frontend_nuxt/components/ReactionsGroup.vue
+++ b/frontend_nuxt/components/ReactionsGroup.vue
@@ -38,6 +38,8 @@
     <div
       v-if="panelVisible"
       class="reactions-panel"
+      ref="reactionsPanelRef"
+      :style="panelInlineStyle"
       @mouseenter="cancelHide"
       @mouseleave="scheduleHide"
     >
@@ -57,7 +59,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { reactionEmojiMap } from '~/utils/reactions'
@@ -141,6 +143,8 @@ const displayedReactions = computed(() => {
 const panelTypes = computed(() => sortedReactionTypes.value)
 
 const panelVisible = ref(false)
+const reactionsPanelRef = ref(null)
+const panelInlineStyle = ref({})
 let hideTimer = null
 const openPanel = () => {
   clearTimeout(hideTimer)
@@ -156,6 +160,33 @@ const cancelHide = () => {
   clearTimeout(hideTimer)
 }
 
+const updatePanelInlineStyle = () => {
+  if (!panelVisible.value) return
+  const panelEl = reactionsPanelRef.value
+  if (!panelEl) return
+  const parentEl = panelEl.closest('.reactions-container')?.parentElement
+  if (!parentEl) return
+  const parentWidth = parentEl.clientWidth - 20
+  panelInlineStyle.value = {
+    width: 'max-content',
+    maxWidth: `${parentWidth}px`,
+  }
+}
+
+watch(panelVisible, async (visible) => {
+  if (visible) {
+    await nextTick()
+    updatePanelInlineStyle()
+  }
+})
+
+watch(panelTypes, async () => {
+  if (panelVisible.value) {
+    await nextTick()
+    updatePanelInlineStyle()
+  }
+})
+
 const toggleReaction = async (type) => {
   const token = getToken()
   if (!token) {
@@ -231,11 +262,16 @@ const toggleReaction = async (type) => {
 
 onMounted(async () => {
   await initialize()
+  window.addEventListener('resize', updatePanelInlineStyle)
 })
 
 defineExpose({
   toggleReaction,
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePanelInlineStyle)
+})
 </script>
 
 <style>
@@ -288,7 +324,7 @@ defineExpose({
 
 .reactions-panel {
   position: absolute;
-  bottom: 50px;
+  bottom: 40px;
   background-color: var(--background-color);
   border: 1px solid var(--normal-border-color);
   border-radius: 20px;

From ce04570efb7eccaf63ccf100d448d912c415dbb3 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Thu, 16 Oct 2025 09:58:57 +0800
Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9EitemGroup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/BaseItemGroup.vue  | 187 ++++++++++++++++++++
 frontend_nuxt/components/DonateGroup.vue    | 126 +++++++++++++
 frontend_nuxt/components/ReactionsGroup.vue |   3 +-
 frontend_nuxt/pages/posts/[id]/index.vue    |  24 ++-
 frontend_nuxt/plugins/iconpark.client.ts    |   2 +
 5 files changed, 334 insertions(+), 8 deletions(-)
 create mode 100644 frontend_nuxt/components/BaseItemGroup.vue
 create mode 100644 frontend_nuxt/components/DonateGroup.vue

diff --git a/frontend_nuxt/components/BaseItemGroup.vue b/frontend_nuxt/components/BaseItemGroup.vue
new file mode 100644
index 000000000..af6e127da
--- /dev/null
+++ b/frontend_nuxt/components/BaseItemGroup.vue
@@ -0,0 +1,187 @@
+<template>
+  <div
+    ref="groupRef"
+    class="base-item-group"
+    :class="groupClass"
+    :style="groupStyle"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+    @focusin="onFocusIn"
+    @focusout="onFocusOut"
+  >
+    <div
+      v-for="(item, index) in normalizedItems"
+      :key="resolveKey(item, index)"
+      class="base-item-group-item"
+      :style="{ zIndex: getZIndex(index) }"
+    >
+      <slot name="item" :item="item" :index="index"></slot>
+    </div>
+    <slot name="after"></slot>
+  </div>
+</template>
+
+<script setup>
+import { computed, reactive, ref } from 'vue'
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  itemKey: {
+    type: [String, Function],
+    default: null,
+  },
+  overlap: {
+    type: [Number, String],
+    default: 12,
+  },
+  expandedGap: {
+    type: [Number, String],
+    default: 8,
+  },
+  direction: {
+    type: String,
+    default: 'horizontal',
+    validator: (value) => ['horizontal', 'vertical'].includes(value),
+  },
+  reverse: {
+    type: Boolean,
+    default: false,
+  },
+  animationDuration: {
+    type: [Number, String],
+    default: 200,
+  },
+})
+
+const groupRef = ref(null)
+const state = reactive({
+  hovering: false,
+  focused: false,
+})
+
+const normalizedItems = computed(() => props.items || [])
+
+const sanitizedOverlap = computed(() => Math.max(0, Number(props.overlap) || 0))
+const sanitizedExpandedGap = computed(() => Math.max(0, Number(props.expandedGap) || 0))
+const sanitizedAnimationDuration = computed(() => Math.max(0, Number(props.animationDuration) || 0))
+
+const groupClass = computed(() => [
+  `base-item-group--${props.direction}`,
+  {
+    'is-expanded': isExpanded.value,
+    'is-reversed': props.reverse,
+  },
+])
+
+const groupStyle = computed(() => ({
+  '--base-item-group-overlap': `${sanitizedOverlap.value}px`,
+  '--base-item-group-expanded-gap': `${sanitizedExpandedGap.value}px`,
+  '--base-item-group-transition-duration': `${sanitizedAnimationDuration.value}ms`,
+}))
+
+const isExpanded = computed(() => state.hovering || state.focused)
+
+function onMouseEnter() {
+  state.hovering = true
+}
+
+function onMouseLeave() {
+  state.hovering = false
+}
+
+function onFocusIn() {
+  state.focused = true
+}
+
+function onFocusOut(event) {
+  const nextTarget = event.relatedTarget
+  if (!groupRef.value) {
+    state.focused = false
+    return
+  }
+  if (!nextTarget || !groupRef.value.contains(nextTarget)) {
+    state.focused = false
+  }
+}
+
+function resolveKey(item, index) {
+  if (typeof props.itemKey === 'function') {
+    return props.itemKey(item, index)
+  }
+  if (props.itemKey && item && Object.prototype.hasOwnProperty.call(item, props.itemKey)) {
+    return item[props.itemKey]
+  }
+  return index
+}
+
+function getZIndex(index) {
+  if (props.reverse) {
+    return index + 1
+  }
+  return normalizedItems.value.length - index
+}
+</script>
+
+<style scoped>
+.base-item-group {
+  --base-item-group-overlap: 12px;
+  --base-item-group-expanded-gap: 8px;
+  --base-item-group-transition-duration: 200ms;
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+}
+
+.base-item-group:focus-within {
+  outline: none;
+}
+
+.base-item-group--horizontal {
+  flex-direction: row;
+}
+
+.base-item-group--horizontal.is-reversed {
+  flex-direction: row-reverse;
+}
+
+.base-item-group--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.base-item-group--vertical.is-reversed {
+  flex-direction: column-reverse;
+}
+
+.base-item-group-item {
+  transition:
+    margin var(--base-item-group-transition-duration) ease,
+    transform var(--base-item-group-transition-duration) ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.base-item-group--horizontal:not(.is-expanded) .base-item-group-item:not(:first-child) {
+  margin-left: calc(var(--base-item-group-overlap) * -1);
+}
+
+.base-item-group--horizontal.is-expanded .base-item-group-item:not(:first-child) {
+  margin-left: var(--base-item-group-expanded-gap);
+}
+
+.base-item-group--vertical:not(.is-expanded) .base-item-group-item:not(:first-child) {
+  margin-top: calc(var(--base-item-group-overlap) * -1);
+}
+
+.base-item-group--vertical.is-expanded .base-item-group-item:not(:first-child) {
+  margin-top: var(--base-item-group-expanded-gap);
+}
+
+.base-item-group.is-expanded .base-item-group-item {
+  transform: translateZ(0);
+}
+</style>
diff --git a/frontend_nuxt/components/DonateGroup.vue b/frontend_nuxt/components/DonateGroup.vue
new file mode 100644
index 000000000..00543f72c
--- /dev/null
+++ b/frontend_nuxt/components/DonateGroup.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="donate-container">
+    <div class="donate-viewer">
+      <div class="donate-viewer-item-container" @mouseenter="cancelHide" @mouseleave="scheduleHide">
+        <BaseItemGroup :items="donateItems" :overlap="10" :expanded-gap="2" :direction="vertical">
+          <template #item="{ item }">
+            <BaseUserAvatar
+              :user-id="1"
+              :src="avatar"
+              alt="avatar"
+              :width="25"
+              :disable-link="true"
+            />
+          </template>
+        </BaseItemGroup>
+        <div class="donate-counts-text">100</div>
+      </div>
+    </div>
+  </div>
+  <div
+    v-if="panelVisible"
+    class="donate-panel"
+    ref="reactionsPanelRef"
+    :style="panelInlineStyle"
+    @mouseenter="cancelHide"
+    @mouseleave="scheduleHide"
+  >
+    <div class="donate-option">
+      <financing />
+      <div class="donate-counts-text">100</div>
+    </div>
+    <div class="donate-option">
+      <financing />
+      <div class="donate-counts-text">300</div>
+    </div>
+    <div class="donate-option">
+      <financing />
+      <div class="donate-counts-text">500</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const emit = defineEmits(['update:modelValue'])
+
+const props = defineProps({})
+
+const avatar = ref('')
+const panelVisible = ref(false)
+const reactionsPanelRef = ref(null)
+const panelInlineStyle = ref({})
+const donateItems = ref([
+  {
+    id: 1,
+    count: 100,
+  },
+  {
+    id: 2,
+    count: 300,
+  },
+  {
+    id: 3,
+    count: 500,
+  },
+])
+let hideTimer = null
+
+const scheduleHide = () => {
+  clearTimeout(hideTimer)
+  hideTimer = setTimeout(() => {
+    panelVisible.value = false
+  }, 500)
+}
+const cancelHide = () => {
+  clearTimeout(hideTimer)
+}
+
+const updatePanelInlineStyle = () => {
+  if (!panelVisible.value) return
+  const panelEl = reactionsPanelRef.value
+  if (!panelEl) return
+  const parentEl = panelEl.closest('.reactions-container')?.parentElement
+  if (!parentEl) return
+  const parentWidth = parentEl.clientWidth - 20
+  panelInlineStyle.value = {
+    width: 'max-content',
+    maxWidth: `${parentWidth}px`,
+  }
+}
+
+watch(panelVisible, async (visible) => {
+  if (visible) {
+    await nextTick()
+    updatePanelInlineStyle()
+  }
+})
+
+onMounted(async () => {
+  window.addEventListener('resize', updatePanelInlineStyle)
+
+  const updateAvatar = async () => {
+    if (authState.loggedIn) {
+      const user = await loadCurrentUser()
+      if (user && user.avatar) {
+        avatar.value = user.avatar
+      }
+    }
+  }
+  await updateAvatar()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePanelInlineStyle)
+})
+</script>
+
+<style scoped>
+.donate-viewer-item-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+}
+</style>
diff --git a/frontend_nuxt/components/ReactionsGroup.vue b/frontend_nuxt/components/ReactionsGroup.vue
index 122e6557a..e78a99049 100644
--- a/frontend_nuxt/components/ReactionsGroup.vue
+++ b/frontend_nuxt/components/ReactionsGroup.vue
@@ -164,7 +164,7 @@ const updatePanelInlineStyle = () => {
   if (!panelVisible.value) return
   const panelEl = reactionsPanelRef.value
   if (!panelEl) return
-  const parentEl = panelEl.closest('.reactions-container')?.parentElement
+  const parentEl = panelEl.closest('.reactions-container')?.parentElement?.parentElement
   if (!parentEl) return
   const parentWidth = parentEl.clientWidth - 20
   panelInlineStyle.value = {
@@ -357,7 +357,6 @@ onBeforeUnmount(() => {
   border: 1px solid var(--normal-border-color);
   border-radius: 10px;
   margin-right: 5px;
-  margin-bottom: 5px;
   font-size: 14px;
   color: var(--text-color);
   align-items: center;
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index ba0c7207f..e0dea1d71 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -92,12 +92,15 @@
           ></div>
 
           <div class="article-footer-container">
-            <ReactionsGroup
-              ref="postReactionsGroupRef"
-              v-model="postReactions"
-              content-type="post"
-              :content-id="postId"
-            />
+            <div class="option-container">
+              <ReactionsGroup
+                ref="postReactionsGroupRef"
+                v-model="postReactions"
+                content-type="post"
+                :content-id="postId"
+              />
+              <DonateGroup />
+            </div>
             <div class="article-footer-actions">
               <div
                 class="reaction-action like-action"
@@ -211,6 +214,7 @@ import PostChangeLogItem from '~/components/PostChangeLogItem.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ReactionsGroup from '~/components/ReactionsGroup.vue'
+import DonateGroup from '~/components/DonateGroup.vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import PostLottery from '~/components/PostLottery.vue'
 import PostPoll from '~/components/PostPoll.vue'
@@ -1278,6 +1282,14 @@ onMounted(async () => {
   flex-wrap: wrap;
 }
 
+.option-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 .article-footer-actions {
   display: flex;
   flex-direction: row;
diff --git a/frontend_nuxt/plugins/iconpark.client.ts b/frontend_nuxt/plugins/iconpark.client.ts
index d0ab502d9..58338d98a 100644
--- a/frontend_nuxt/plugins/iconpark.client.ts
+++ b/frontend_nuxt/plugins/iconpark.client.ts
@@ -80,6 +80,7 @@ import {
   Dislike,
   CheckOne,
   Share,
+  Financing,
 } from '@icon-park/vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -163,4 +164,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('Dislike', Dislike)
   nuxtApp.vueApp.component('CheckOne', CheckOne)
   nuxtApp.vueApp.component('Share', Share)
+  nuxtApp.vueApp.component('Financing', Financing)
 })

From 39d954d98a96062441dffc724f4a34b82097fa20 Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Thu, 16 Oct 2025 18:11:27 +0800
Subject: [PATCH 5/8] =?UTF-8?q?fix:=20=E7=BB=A7=E7=BB=AD=E5=81=9AUI?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CONTRIBUTING.md                             |   4 +-
 frontend_nuxt/assets/global.css             |   7 +-
 frontend_nuxt/components/BaseUserAvatar.vue |   2 +-
 frontend_nuxt/components/CommentItem.vue    |  10 ++
 frontend_nuxt/components/DonateGroup.vue    | 142 +++++++++++++++-----
 frontend_nuxt/components/ReactionsGroup.vue |  10 +-
 frontend_nuxt/pages/posts/[id]/index.vue    |   2 +-
 7 files changed, 129 insertions(+), 48 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f003d5708..599d56fa0 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -53,8 +53,8 @@ cd OpenIsle
      --profile dev up -d
    ```
    该命令会创建名为 `frontend_dev` 的容器并运行 `npm run dev`，浏览器访问 http://127.0.0.1:3000 即可查看页面。
-
-   修改代码后，可以强制重新创建所有容器，执行：
+   修改前端代码，页面会热更新。
+   如果修改后端代码，可以重启后端容器, 或是环境变量中指向IDEA，采用IDEA编译运行也可以哦。
 
    ```shell
    docker compose \
diff --git a/frontend_nuxt/assets/global.css b/frontend_nuxt/assets/global.css
index 42d4118be..c9d31fbc0 100644
--- a/frontend_nuxt/assets/global.css
+++ b/frontend_nuxt/assets/global.css
@@ -3,7 +3,7 @@
   --primary-color: rgb(10, 110, 120);
   --primary-color-disabled: rgba(93, 152, 156, 0.5);
   --secondary-color: rgb(255, 255, 255);
-  --secondary-color-hover: rgba(10, 111, 120, 0.184);
+  --secondary-color-hover: rgba(10, 111, 120, 0.079);
   --new-post-icon-color: rgba(10, 111, 120, 0.598);
   --header-height: 60px;
   --header-background-color: white;
@@ -54,6 +54,7 @@
   --header-border-color: #555;
   --primary-color: rgb(17, 182, 197);
   --primary-color-hover: rgb(13, 137, 151);
+  --secondary-color-hover: rgba(17, 182, 197, 0.238);
   --new-post-icon-color: rgba(10, 111, 120, 0.598);
   --header-text-color: white;
   --app-menu-background-color: #333;
@@ -179,7 +180,7 @@ body {
 
 .info-content-text pre .line-numbers {
   counter-reset: line-number 0;
-  white-space: nowrap;        /* 禁止数字换行 */
+  white-space: nowrap; /* 禁止数字换行 */
   font-variant-numeric: tabular-nums; /* 数字等宽 */
   /* width: 2em; */
   font-size: 13px;
@@ -344,7 +345,7 @@ body {
   .info-content-text pre {
     line-height: 1.5;
   }
-  
+
   /*处理iframe视频标签*/
   .info-content-text iframe {
     width: 100%;
diff --git a/frontend_nuxt/components/BaseUserAvatar.vue b/frontend_nuxt/components/BaseUserAvatar.vue
index 6e0b62ab5..8d4443250 100644
--- a/frontend_nuxt/components/BaseUserAvatar.vue
+++ b/frontend_nuxt/components/BaseUserAvatar.vue
@@ -109,7 +109,7 @@ function onError() {
 }
 
 .base-user-avatar:hover {
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 24px rgba(251, 138, 138, 0.1);
   transform: scale(1.05);
 }
 
diff --git a/frontend_nuxt/components/CommentItem.vue b/frontend_nuxt/components/CommentItem.vue
index 03a610df8..34a7e703d 100644
--- a/frontend_nuxt/components/CommentItem.vue
+++ b/frontend_nuxt/components/CommentItem.vue
@@ -488,6 +488,16 @@ const handleContentClick = (e) => {
   font-weight: bold;
 }
 
+.article-footer-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 0px;
+  flex-wrap: wrap;
+  margin-bottom: 0px;
+}
+
 .medal-name {
   font-size: 12px;
   margin-left: 1px;
diff --git a/frontend_nuxt/components/DonateGroup.vue b/frontend_nuxt/components/DonateGroup.vue
index 00543f72c..9ea90f140 100644
--- a/frontend_nuxt/components/DonateGroup.vue
+++ b/frontend_nuxt/components/DonateGroup.vue
@@ -1,43 +1,49 @@
 <template>
   <div class="donate-container">
-    <div class="donate-viewer">
-      <div class="donate-viewer-item-container" @mouseenter="cancelHide" @mouseleave="scheduleHide">
-        <BaseItemGroup :items="donateItems" :overlap="10" :expanded-gap="2" :direction="vertical">
-          <template #item="{ item }">
-            <BaseUserAvatar
-              :user-id="1"
-              :src="avatar"
-              alt="avatar"
-              :width="25"
-              :disable-link="true"
-            />
-          </template>
-        </BaseItemGroup>
+    <ToolTip content="打赏作者" placement="bottom">
+      <div class="donate-viewer" @click="openPanel">
+        <div
+          class="donate-viewer-item-container"
+          @mouseenter="cancelHide"
+          @mouseleave="scheduleHide"
+        >
+          <BaseItemGroup :items="donateItems" :overlap="10" :expanded-gap="2" :direction="vertical">
+            <template #item="{ item }">
+              <BaseUserAvatar
+                :user-id="1"
+                :src="avatar"
+                alt="avatar"
+                :width="20"
+                :disable-link="true"
+              />
+            </template>
+          </BaseItemGroup>
+          <div class="donate-counts-text">100</div>
+        </div>
+      </div>
+    </ToolTip>
+    <div
+      v-if="panelVisible"
+      class="donate-panel"
+      ref="donatePanelRef"
+      :style="panelInlineStyle"
+      @mouseenter="cancelHide"
+      @mouseleave="scheduleHide"
+    >
+      <div class="donate-option">
+        <financing class="donate-option-icon" />
+        <div class="donate-counts-text">10</div>
+      </div>
+      <div class="donate-option">
+        <financing class="donate-option-icon" />
+        <div class="donate-counts-text">30</div>
+      </div>
+      <div class="donate-option selected">
+        <financing class="donate-option-icon" />
         <div class="donate-counts-text">100</div>
       </div>
     </div>
   </div>
-  <div
-    v-if="panelVisible"
-    class="donate-panel"
-    ref="reactionsPanelRef"
-    :style="panelInlineStyle"
-    @mouseenter="cancelHide"
-    @mouseleave="scheduleHide"
-  >
-    <div class="donate-option">
-      <financing />
-      <div class="donate-counts-text">100</div>
-    </div>
-    <div class="donate-option">
-      <financing />
-      <div class="donate-counts-text">300</div>
-    </div>
-    <div class="donate-option">
-      <financing />
-      <div class="donate-counts-text">500</div>
-    </div>
-  </div>
 </template>
 
 <script setup>
@@ -49,7 +55,7 @@ const props = defineProps({})
 
 const avatar = ref('')
 const panelVisible = ref(false)
-const reactionsPanelRef = ref(null)
+const donatePanelRef = ref(null)
 const panelInlineStyle = ref({})
 const donateItems = ref([
   {
@@ -67,6 +73,11 @@ const donateItems = ref([
 ])
 let hideTimer = null
 
+const openPanel = () => {
+  clearTimeout(hideTimer)
+  panelVisible.value = true
+}
+
 const scheduleHide = () => {
   clearTimeout(hideTimer)
   hideTimer = setTimeout(() => {
@@ -79,9 +90,9 @@ const cancelHide = () => {
 
 const updatePanelInlineStyle = () => {
   if (!panelVisible.value) return
-  const panelEl = reactionsPanelRef.value
+  const panelEl = donatePanelRef.value
   if (!panelEl) return
-  const parentEl = panelEl.closest('.reactions-container')?.parentElement
+  const parentEl = panelEl.closest('.donate-container')?.parentElement.parentElement
   if (!parentEl) return
   const parentWidth = parentEl.clientWidth - 20
   panelInlineStyle.value = {
@@ -117,10 +128,67 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
+.donate-container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .donate-viewer-item-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 2px;
 }
+
+.donate-viewer {
+  border-radius: 13px;
+  padding: 3px;
+  padding-right: 6px;
+  cursor: pointer;
+  transition: background-color 0.5s ease;
+}
+
+.donate-viewer:hover {
+  background-color: var(--secondary-color-hover);
+}
+
+.donate-counts-text {
+  color: var(--primary-color);
+  font-size: 14px;
+}
+
+.donate-panel {
+  position: absolute;
+  bottom: 35px;
+  background-color: var(--background-color);
+  border: 1px solid var(--normal-border-color);
+  border-radius: 20px;
+  padding: 5px 10px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  z-index: 10;
+  gap: 5px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+}
+
+.donate-option {
+  cursor: pointer;
+  padding: 3px 6px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+}
+
+.donate-option:hover {
+  background-color: var(--normal-light-background-color);
+}
+
+.donate-option-icon {
+  color: var(--primary-color);
+}
 </style>
diff --git a/frontend_nuxt/components/ReactionsGroup.vue b/frontend_nuxt/components/ReactionsGroup.vue
index e78a99049..7d4aaff80 100644
--- a/frontend_nuxt/components/ReactionsGroup.vue
+++ b/frontend_nuxt/components/ReactionsGroup.vue
@@ -18,9 +18,11 @@
             <div>{{ counts[r.type] }}</div>
           </div>
 
-          <div class="reactions-viewer-item placeholder" @click="openPanel">
-            <sly-face-whit-smile class="reactions-viewer-item-placeholder-icon" />
-          </div>
+          <ToolTip content="发表心情" placement="bottom">
+            <div class="reactions-viewer-item placeholder" @click="openPanel">
+              <sly-face-whit-smile class="reactions-viewer-item-placeholder-icon" />
+            </div>
+          </ToolTip>
         </template>
         <template v-else-if="displayedReactions.length">
           <div
@@ -324,7 +326,7 @@ onBeforeUnmount(() => {
 
 .reactions-panel {
   position: absolute;
-  bottom: 40px;
+  bottom: 35px;
   background-color: var(--background-color);
   border: 1px solid var(--normal-border-color);
   border-radius: 20px;
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index e0dea1d71..7c0944c32 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -1280,12 +1280,12 @@ onMounted(async () => {
   gap: 10px;
   margin-top: 0px;
   flex-wrap: wrap;
+  margin-bottom: 10px;
 }
 
 .option-container {
   display: flex;
   flex-direction: row;
-  gap: 10px;
   align-items: center;
   flex-wrap: wrap;
 }

From 2db958f8c900e441f837fe917de8319db613923c Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Fri, 17 Oct 2025 10:52:05 +0800
Subject: [PATCH 6/8] =?UTF-8?q?fix:=20=E8=B5=9E=E8=B5=8Fui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/BaseUserAvatar.vue |   2 +-
 frontend_nuxt/components/DonateGroup.vue    |  57 +++++++++++++++-----
 frontend_nuxt/pages/message-box/index.vue   |   4 +-
 frontend_nuxt/public/default-avatar.jpg     | Bin 0 -> 3672 bytes
 frontend_nuxt/public/default-avatar.svg     |   1 -
 5 files changed, 46 insertions(+), 18 deletions(-)
 create mode 100644 frontend_nuxt/public/default-avatar.jpg
 delete mode 100644 frontend_nuxt/public/default-avatar.svg

diff --git a/frontend_nuxt/components/BaseUserAvatar.vue b/frontend_nuxt/components/BaseUserAvatar.vue
index 8d4443250..cb7c61617 100644
--- a/frontend_nuxt/components/BaseUserAvatar.vue
+++ b/frontend_nuxt/components/BaseUserAvatar.vue
@@ -15,7 +15,7 @@ import { computed, ref, watch } from 'vue'
 import { useAttrs } from 'vue'
 import BaseImage from './BaseImage.vue'
 
-const DEFAULT_AVATAR = '/default-avatar.svg'
+const DEFAULT_AVATAR = '/default-avatar.jpg'
 
 const props = defineProps({
   userId: {
diff --git a/frontend_nuxt/components/DonateGroup.vue b/frontend_nuxt/components/DonateGroup.vue
index 9ea90f140..720236269 100644
--- a/frontend_nuxt/components/DonateGroup.vue
+++ b/frontend_nuxt/components/DonateGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="donate-container">
-    <ToolTip content="打赏作者" placement="bottom">
+    <ToolTip content="打赏作者" placement="bottom" v-if="donateItems.length > 0">
       <div class="donate-viewer" @click="openPanel">
         <div
           class="donate-viewer-item-container"
@@ -22,6 +22,11 @@
         </div>
       </div>
     </ToolTip>
+    <ToolTip content="赞赏作者" placement="bottom" v-else>
+      <div class="donate-viewer-item placeholder" @click="openPanel">
+        <financing class="donate-viewer-item-placeholder-icon" />
+      </div>
+    </ToolTip>
     <div
       v-if="panelVisible"
       class="donate-panel"
@@ -38,7 +43,7 @@
         <financing class="donate-option-icon" />
         <div class="donate-counts-text">30</div>
       </div>
-      <div class="donate-option selected">
+      <div class="donate-option">
         <financing class="donate-option-icon" />
         <div class="donate-counts-text">100</div>
       </div>
@@ -47,6 +52,7 @@
 </template>
 
 <script setup>
+import { Finance } from '@icon-park/vue-next'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const emit = defineEmits(['update:modelValue'])
@@ -58,18 +64,18 @@ const panelVisible = ref(false)
 const donatePanelRef = ref(null)
 const panelInlineStyle = ref({})
 const donateItems = ref([
-  {
-    id: 1,
-    count: 100,
-  },
-  {
-    id: 2,
-    count: 300,
-  },
-  {
-    id: 3,
-    count: 500,
-  },
+  // {
+  //   id: 1,
+  //   count: 100,
+  // },
+  // {
+  //   id: 2,
+  //   count: 300,
+  // },
+  // {
+  //   id: 3,
+  //   count: 500,
+  // },
 ])
 let hideTimer = null
 
@@ -174,6 +180,29 @@ onBeforeUnmount(() => {
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 
+.donate-viewer-item.placeholder {
+  display: flex;
+  cursor: pointer;
+  flex-direction: row;
+  padding: 2px 10px;
+  gap: 5px;
+  border: 1px solid var(--normal-border-color);
+  border-radius: 10px;
+  margin-right: 5px;
+  font-size: 14px;
+  color: var(--text-color);
+  align-items: center;
+  background-color: var(--normal-light-background-color);
+}
+
+.donate-viewer-item {
+  font-size: 16px;
+}
+
+.donate-viewer-item-placeholder-icon {
+  opacity: 0.5;
+}
+
 .donate-option {
   cursor: pointer;
   padding: 3px 6px;
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index 75b30406d..8b384352e 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -84,7 +84,7 @@
           >
             <div class="conversation-avatar">
               <BaseImage
-                :src="ch.avatar || '/default-avatar.svg'"
+                :src="ch.avatar || '/default-avatar.jpg'"
                 :alt="ch.name"
                 class="avatar-img"
                 @error="handleAvatarError"
@@ -194,7 +194,7 @@ function formatTime(timeString) {
 
 // 头像加载失败处理
 function handleAvatarError(event) {
-  event.target.src = '/default-avatar.svg'
+  event.target.src = '/default-avatar.jpg'
 }
 
 async function fetchChannels() {
diff --git a/frontend_nuxt/public/default-avatar.jpg b/frontend_nuxt/public/default-avatar.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..402804fcedd6ec0b90343256dba2544eea06ac54
GIT binary patch
literal 3672
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
SwfMEg9lK7(f4)_Jr~d=t_}|q4

literal 0
HcmV?d00001

diff --git a/frontend_nuxt/public/default-avatar.svg b/frontend_nuxt/public/default-avatar.svg
deleted file mode 100644
index 5b773a4ca..000000000
--- a/frontend_nuxt/public/default-avatar.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1755789348718" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13787" width="400" height="400"><path d="M152.773168 306.474932h45.030559c37.525466 0 56.288199 18.762733 56.288198 56.288198v45.024199c0 37.525466-18.762733 56.288199-56.288198 56.288199h-45.030559c-37.525466 0-56.281839-18.762733-56.281839-56.288199v-45.030559c0-37.525466 18.762733-56.288199 56.288199-56.288199z" fill="#4D4132" p-id="13788"></path><path d="M409.294708 763.229814h228.968944v146.285714c0 63.22723-51.263602 114.484472-114.484472 114.484472-63.23359 0-114.484472-51.257242-114.484472-114.484472v-146.285714z" fill="#C5AC95" p-id="13789"></path><path d="M73.97605 520.357366c0 55.957466 45.361292 101.318758 101.318757 101.318758 55.951106 0 101.312398-45.361292 101.312398-101.318758 0-55.951106-45.361292-101.312398-101.318758-101.312397-55.951106 0-101.312398 45.361292-101.312397 101.318758z" fill="#C9AB90" p-id="13790"></path><path d="M490.48964 2.531379c186.520646 0 337.710112 151.195826 337.710112 337.716472v382.740671c0 99.474286-80.63523 180.109516-180.109516 180.109515H287.858484c-74.599354 0-135.078957-60.485963-135.078956-135.085317V340.247851C152.773168 153.727205 303.968994 2.531379 490.48964 2.531379z" fill="#EBD3BD" p-id="13791"></path><path d="M400.434882 509.099727c124.342857 0 225.140075 93.241242 225.140075 208.259975 0 5.679702-0.25441 11.308522-0.731429 16.880099H176.019876a195.278708 195.278708 0 0 1-0.731429-16.880099c0-115.018733 100.797217-208.259975 225.146435-208.259975zM805.684472 306.474932h45.030559c37.525466 0 56.288199 18.762733 56.288199 56.288198v45.024199c0 37.525466-18.762733 56.288199-56.288199 56.288199h-45.030559c-37.525466 0-56.288199-18.762733-56.288199-56.288199v-45.030559c0-37.525466 18.762733-56.288199 56.288199-56.288199z" fill="#4D4132" p-id="13792"></path><path d="M749.402634 520.357366c0 55.957466 45.361292 101.318758 101.312397 101.318758s101.318758-45.361292 101.318758-101.318758c0-55.951106-45.367652-101.312398-101.318758-101.312397s-101.318758 45.361292-101.318758 101.318758z" fill="#EBD3BD" p-id="13793"></path><path d="M805.684472 509.099727a45.030559 45.030559 0 1 0 90.061118 0.01908 45.030559 45.030559 0 0 0-90.061118-0.01908z" fill="#E89E80" p-id="13794"></path><path d="M175.288447 374.01441a90.061118 90.061118 0 1 0 180.115876 0c0-49.737143-40.323975-90.054758-90.061118-90.054758s-90.054758 40.323975-90.054758 90.061118z" fill="#FFFFFF" p-id="13795"></path><path d="M220.319006 379.64323a39.401739 39.401739 0 1 0 78.803478 0 39.401739 39.401739 0 0 0-78.803478 0z" fill="#514141" p-id="13796"></path><path d="M490.48964 374.01441c0 49.737143 40.323975 90.061118 90.061118 90.061118s90.048398-40.323975 90.048397-90.061118-40.317615-90.054758-90.054757-90.054758-90.061118 40.323975-90.061118 90.061118z" fill="#FFFFFF" p-id="13797"></path><path d="M535.520199 379.64323a39.401739 39.401739 0 1 0 78.797118 0 39.401739 39.401739 0 0 0-78.803478 0z" fill="#514141" p-id="13798"></path><path d="M394.806062 362.75677a40.18405 40.18405 0 0 1 37.754435 26.458634l41.99036 115.47031A78.803478 78.803478 0 0 1 400.504845 610.412124h-17.789615a78.803478 78.803478 0 0 1-72.920249-108.633043l46.207205-112.970733a41.920398 41.920398 0 0 1 38.797516-26.051578z" fill="#E89E80" p-id="13799"></path><path d="M165.36646 190.807453m38.16149 0l101.763975 0q38.161491 0 38.161491 38.161491l0 0q0 38.161491-38.161491 38.161491l-101.763975 0q-38.161491 0-38.16149-38.161491l0 0q0-38.161491 38.16149-38.161491Z" fill="#4D4132" p-id="13800"></path><path d="M483.378882 190.807453m38.161491 0l127.204969 0q38.161491 0 38.16149 38.161491l0 0q0 38.161491-38.16149 38.161491l-127.204969 0q-38.161491 0-38.161491-38.161491l0 0q0-38.161491 38.161491-38.161491Z" fill="#4D4132" p-id="13801"></path></svg>
\ No newline at end of file

From 8643446d8b885f3e8be0796daddc623bdd53583b Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Fri, 17 Oct 2025 11:24:19 +0800
Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=E8=B5=9E=E8=B5=8F=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controller/PostDonationController.java    |  43 +++++
 .../java/com/openisle/dto/DonationDto.java    |  16 ++
 .../com/openisle/dto/DonationRequest.java     |  11 ++
 .../com/openisle/dto/DonationResponse.java    |  15 ++
 .../com/openisle/model/NotificationType.java  |   2 +
 .../com/openisle/model/PointHistoryType.java  |   2 +
 .../repository/PointHistoryRepository.java    |  10 ++
 .../com/openisle/service/PointService.java    |  76 ++++++++
 frontend_nuxt/components/DonateGroup.vue      | 170 +++++++++++++-----
 frontend_nuxt/pages/message.vue               |  21 +++
 frontend_nuxt/pages/points.vue                |  23 +++
 frontend_nuxt/pages/posts/[id]/index.vue      |   2 +-
 frontend_nuxt/utils/notification.js           |  13 ++
 13 files changed, 359 insertions(+), 45 deletions(-)
 create mode 100644 backend/src/main/java/com/openisle/controller/PostDonationController.java
 create mode 100644 backend/src/main/java/com/openisle/dto/DonationDto.java
 create mode 100644 backend/src/main/java/com/openisle/dto/DonationRequest.java
 create mode 100644 backend/src/main/java/com/openisle/dto/DonationResponse.java

diff --git a/backend/src/main/java/com/openisle/controller/PostDonationController.java b/backend/src/main/java/com/openisle/controller/PostDonationController.java
new file mode 100644
index 000000000..b74239416
--- /dev/null
+++ b/backend/src/main/java/com/openisle/controller/PostDonationController.java
@@ -0,0 +1,43 @@
+package com.openisle.controller;
+
+import com.openisle.dto.DonationRequest;
+import com.openisle.dto.DonationResponse;
+import com.openisle.service.PointService;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.responses.ApiResponse;
+import io.swagger.v3.oas.annotations.security.SecurityRequirement;
+import lombok.RequiredArgsConstructor;
+import org.springframework.security.core.Authentication;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+@RequestMapping("/api/posts/{postId}/donations")
+@RequiredArgsConstructor
+public class PostDonationController {
+
+  private final PointService pointService;
+
+  @GetMapping
+  @Operation(summary = "List donations", description = "Get recent donations for a post")
+  @ApiResponse(responseCode = "200", description = "Donation summary")
+  public DonationResponse list(@PathVariable Long postId) {
+    return pointService.getPostDonations(postId);
+  }
+
+  @PostMapping
+  @SecurityRequirement(name = "JWT")
+  @Operation(summary = "Donate", description = "Donate points to the post author")
+  @ApiResponse(responseCode = "200", description = "Donation result")
+  public DonationResponse donate(
+    @PathVariable Long postId,
+    @RequestBody DonationRequest req,
+    Authentication auth
+  ) {
+    return pointService.donateToPost(auth.getName(), postId, req.getAmount());
+  }
+}
diff --git a/backend/src/main/java/com/openisle/dto/DonationDto.java b/backend/src/main/java/com/openisle/dto/DonationDto.java
new file mode 100644
index 000000000..460cec56b
--- /dev/null
+++ b/backend/src/main/java/com/openisle/dto/DonationDto.java
@@ -0,0 +1,16 @@
+package com.openisle.dto;
+
+import java.time.LocalDateTime;
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter
+@Setter
+public class DonationDto {
+
+  private Long userId;
+  private String username;
+  private String avatar;
+  private int amount;
+  private LocalDateTime createdAt;
+}
diff --git a/backend/src/main/java/com/openisle/dto/DonationRequest.java b/backend/src/main/java/com/openisle/dto/DonationRequest.java
new file mode 100644
index 000000000..14421e1e5
--- /dev/null
+++ b/backend/src/main/java/com/openisle/dto/DonationRequest.java
@@ -0,0 +1,11 @@
+package com.openisle.dto;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter
+@Setter
+public class DonationRequest {
+
+  private int amount;
+}
diff --git a/backend/src/main/java/com/openisle/dto/DonationResponse.java b/backend/src/main/java/com/openisle/dto/DonationResponse.java
new file mode 100644
index 000000000..1a83be807
--- /dev/null
+++ b/backend/src/main/java/com/openisle/dto/DonationResponse.java
@@ -0,0 +1,15 @@
+package com.openisle.dto;
+
+import java.util.ArrayList;
+import java.util.List;
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter
+@Setter
+public class DonationResponse {
+
+  private int totalAmount;
+  private List<DonationDto> donations = new ArrayList<>();
+  private Integer balance;
+}
diff --git a/backend/src/main/java/com/openisle/model/NotificationType.java b/backend/src/main/java/com/openisle/model/NotificationType.java
index 0e96cfc20..74262c9b2 100644
--- a/backend/src/main/java/com/openisle/model/NotificationType.java
+++ b/backend/src/main/java/com/openisle/model/NotificationType.java
@@ -48,6 +48,8 @@ public enum NotificationType {
   POLL_RESULT_PARTICIPANT,
   /** Your post was featured */
   POST_FEATURED,
+  /** Someone donated to your post */
+  DONATION,
   /** You were mentioned in a post or comment */
   MENTION,
 }
diff --git a/backend/src/main/java/com/openisle/model/PointHistoryType.java b/backend/src/main/java/com/openisle/model/PointHistoryType.java
index 689f73c9c..776827f0a 100644
--- a/backend/src/main/java/com/openisle/model/PointHistoryType.java
+++ b/backend/src/main/java/com/openisle/model/PointHistoryType.java
@@ -13,4 +13,6 @@ public enum PointHistoryType {
   REDEEM,
   LOTTERY_JOIN,
   LOTTERY_REWARD,
+  DONATE_SENT,
+  DONATE_RECEIVED,
 }
diff --git a/backend/src/main/java/com/openisle/repository/PointHistoryRepository.java b/backend/src/main/java/com/openisle/repository/PointHistoryRepository.java
index 197ac1a45..3436466a3 100644
--- a/backend/src/main/java/com/openisle/repository/PointHistoryRepository.java
+++ b/backend/src/main/java/com/openisle/repository/PointHistoryRepository.java
@@ -2,11 +2,14 @@ package com.openisle.repository;
 
 import com.openisle.model.Comment;
 import com.openisle.model.PointHistory;
+import com.openisle.model.PointHistoryType;
 import com.openisle.model.Post;
 import com.openisle.model.User;
 import java.time.LocalDateTime;
 import java.util.List;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
 
 public interface PointHistoryRepository extends JpaRepository<PointHistory, Long> {
   List<PointHistory> findByUserOrderByIdDesc(User user);
@@ -21,4 +24,11 @@ public interface PointHistoryRepository extends JpaRepository<PointHistory, Long
   List<PointHistory> findByComment(Comment comment);
 
   List<PointHistory> findByPost(Post post);
+
+  List<PointHistory> findTop10ByPostAndTypeOrderByCreatedAtDesc(Post post, PointHistoryType type);
+
+  @Query(
+    "SELECT COALESCE(SUM(ph.amount), 0) FROM PointHistory ph WHERE ph.post = :post AND ph.type = :type"
+  )
+  Long sumAmountByPostAndType(@Param("post") Post post, @Param("type") PointHistoryType type);
 }
diff --git a/backend/src/main/java/com/openisle/service/PointService.java b/backend/src/main/java/com/openisle/service/PointService.java
index 0a8349a53..52a732512 100644
--- a/backend/src/main/java/com/openisle/service/PointService.java
+++ b/backend/src/main/java/com/openisle/service/PointService.java
@@ -1,5 +1,7 @@
 package com.openisle.service;
 
+import com.openisle.dto.DonationDto;
+import com.openisle.dto.DonationResponse;
 import com.openisle.exception.FieldException;
 import com.openisle.model.*;
 import com.openisle.repository.*;
@@ -8,8 +10,10 @@ import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List;
 import java.util.Map;
+import java.util.stream.Collectors;
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
 @Service
 @RequiredArgsConstructor
@@ -20,6 +24,7 @@ public class PointService {
   private final PostRepository postRepository;
   private final CommentRepository commentRepository;
   private final PointHistoryRepository pointHistoryRepository;
+  private final NotificationService notificationService;
 
   public int awardForPost(String userName, Long postId) {
     User user = userRepository.findByUsername(userName).orElseThrow();
@@ -272,4 +277,75 @@ public class PointService {
     User user = userRepository.findByUsername(userName).orElseThrow();
     return recalculateUserPoints(user);
   }
+
+  @Transactional
+  public DonationResponse donateToPost(String donorName, Long postId, int amount) {
+    if (amount <= 0) {
+      throw new FieldException("amount", "打赏积分必须大于0");
+    }
+    User donor = userRepository.findByUsername(donorName).orElseThrow();
+    Post post = postRepository.findById(postId).orElseThrow();
+    User author = post.getAuthor();
+    if (author.getId().equals(donor.getId())) {
+      throw new FieldException("post", "不能给自己打赏");
+    }
+    if (donor.getPoint() < amount) {
+      throw new FieldException("point", "积分不足");
+    }
+    addPoint(donor, -amount, PointHistoryType.DONATE_SENT, post, null, author);
+    addPoint(author, amount, PointHistoryType.DONATE_RECEIVED, post, null, donor);
+    notificationService.createNotification(
+      author,
+      NotificationType.DONATION,
+      post,
+      null,
+      null,
+      donor,
+      null,
+      String.valueOf(amount)
+    );
+    DonationResponse response = buildDonationResponse(post);
+    response.setBalance(donor.getPoint());
+    return response;
+  }
+
+  public DonationResponse getPostDonations(Long postId) {
+    Post post = postRepository.findById(postId).orElseThrow();
+    return buildDonationResponse(post);
+  }
+
+  private DonationResponse buildDonationResponse(Post post) {
+    List<PointHistory> histories =
+      pointHistoryRepository.findTop10ByPostAndTypeOrderByCreatedAtDesc(
+        post,
+        PointHistoryType.DONATE_RECEIVED
+      );
+    List<DonationDto> donations = histories
+      .stream()
+      .map(history -> {
+        DonationDto dto = new DonationDto();
+        User donor = history.getFromUser();
+        if (donor != null) {
+          dto.setUserId(donor.getId());
+          dto.setUsername(donor.getUsername());
+          dto.setAvatar(donor.getAvatar());
+        }
+        dto.setAmount(history.getAmount());
+        dto.setCreatedAt(history.getCreatedAt());
+        return dto;
+      })
+      .collect(Collectors.toList());
+    Long total = pointHistoryRepository.sumAmountByPostAndType(
+      post,
+      PointHistoryType.DONATE_RECEIVED
+    );
+    int safeTotal = 0;
+    if (total != null) {
+      safeTotal = total > Integer.MAX_VALUE ? Integer.MAX_VALUE : total.intValue();
+    }
+    DonationResponse response = new DonationResponse();
+    response.setDonations(donations);
+    response.setTotalAmount(safeTotal);
+    return response;
+  }
 }
diff --git a/frontend_nuxt/components/DonateGroup.vue b/frontend_nuxt/components/DonateGroup.vue
index 720236269..0a093774f 100644
--- a/frontend_nuxt/components/DonateGroup.vue
+++ b/frontend_nuxt/components/DonateGroup.vue
@@ -1,24 +1,29 @@
 <template>
   <div class="donate-container">
-    <ToolTip content="打赏作者" placement="bottom" v-if="donateItems.length > 0">
+    <ToolTip content="打赏作者" placement="bottom" v-if="donationList.length > 0">
       <div class="donate-viewer" @click="openPanel">
         <div
           class="donate-viewer-item-container"
           @mouseenter="cancelHide"
           @mouseleave="scheduleHide"
         >
-          <BaseItemGroup :items="donateItems" :overlap="10" :expanded-gap="2" :direction="vertical">
+          <BaseItemGroup
+            :items="donationList"
+            :overlap="10"
+            :expanded-gap="2"
+            :direction="vertical"
+          >
             <template #item="{ item }">
               <BaseUserAvatar
-                :user-id="1"
-                :src="avatar"
-                alt="avatar"
+                :user-id="item.userId"
+                :src="item.avatar"
+                :alt="item.username"
                 :width="20"
                 :disable-link="true"
               />
             </template>
           </BaseItemGroup>
-          <div class="donate-counts-text">100</div>
+          <div class="donate-counts-text">{{ totalAmount }}</div>
         </div>
       </div>
     </ToolTip>
@@ -35,17 +40,15 @@
       @mouseenter="cancelHide"
       @mouseleave="scheduleHide"
     >
-      <div class="donate-option">
+      <div
+        v-for="option in donateOptions"
+        :key="option"
+        class="donate-option"
+        :class="{ disabled: donating || isAuthorUser || !authState.loggedIn }"
+        @click="handleDonate(option)"
+      >
         <financing class="donate-option-icon" />
-        <div class="donate-counts-text">10</div>
-      </div>
-      <div class="donate-option">
-        <financing class="donate-option-icon" />
-        <div class="donate-counts-text">30</div>
-      </div>
-      <div class="donate-option">
-        <financing class="donate-option-icon" />
-        <div class="donate-counts-text">100</div>
+        <div class="donate-counts-text">{{ option }}</div>
       </div>
     </div>
   </div>
@@ -53,32 +56,46 @@
 
 <script setup>
 import { Finance } from '@icon-park/vue-next'
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { toast } from '~/main'
+import { authState, getToken } from '~/utils/auth'
 
-const emit = defineEmits(['update:modelValue'])
+const financing = Finance
 
-const props = defineProps({})
+const props = defineProps({
+  postId: {
+    type: [Number, String],
+    required: true,
+  },
+  authorId: {
+    type: [Number, String],
+    required: true,
+  },
+  isAuthor: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 
-const avatar = ref('')
 const panelVisible = ref(false)
 const donatePanelRef = ref(null)
 const panelInlineStyle = ref({})
-const donateItems = ref([
-  // {
-  //   id: 1,
-  //   count: 100,
-  // },
-  // {
-  //   id: 2,
-  //   count: 300,
-  // },
-  // {
-  //   id: 3,
-  //   count: 500,
-  // },
-])
+const donationSummary = ref({ totalAmount: 0, donations: [] })
+const donating = ref(false)
 let hideTimer = null
 
+const donateOptions = [10, 30, 100]
+const donationList = computed(() => donationSummary.value?.donations ?? [])
+const totalAmount = computed(() => donationSummary.value?.totalAmount ?? 0)
+const isAuthorUser = computed(() => {
+  if (props.isAuthor) return true
+  if (!authState.userId || !props.authorId) return false
+  return Number(authState.userId) === Number(props.authorId)
+})
+
 const openPanel = () => {
   clearTimeout(hideTimer)
   panelVisible.value = true
@@ -114,23 +131,79 @@ watch(panelVisible, async (visible) => {
   }
 })
 
+const normalizeSummary = (data) => ({
+  totalAmount: data?.totalAmount ?? 0,
+  donations: Array.isArray(data?.donations) ? data.donations : [],
+})
+
+const loadDonations = async () => {
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/posts/${props.postId}/donations`)
+    if (!res.ok) return
+    const data = await res.json()
+    donationSummary.value = normalizeSummary(data)
+  } catch (e) {
+    // ignore network errors for donation summary
+  }
+}
+
+const handleDonate = async (amount) => {
+  if (!amount || donating.value) return
+  if (!authState.loggedIn) {
+    toast.error('请先登录后再打赏')
+    panelVisible.value = false
+    return
+  }
+  if (isAuthorUser.value) {
+    toast.warning('不能给自己打赏')
+    return
+  }
+  try {
+    donating.value = true
+    const token = getToken()
+    const res = await fetch(`${API_BASE_URL}/api/posts/${props.postId}/donations`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: token ? `Bearer ${token}` : '',
+      },
+      body: JSON.stringify({ amount }),
+    })
+    const data = await res.json().catch(() => null)
+    if (!res.ok) {
+      if (res.status === 401) {
+        toast.error('请先登录后再打赏')
+      } else {
+        toast.error(data?.error || '打赏失败')
+      }
+      return
+    }
+    donationSummary.value = normalizeSummary(data)
+    toast.success('打赏成功，感谢你的支持！')
+    panelVisible.value = false
+  } catch (e) {
+    toast.error('打赏失败，请稍后再试')
+  } finally {
+    donating.value = false
+  }
+}
+
 onMounted(async () => {
   window.addEventListener('resize', updatePanelInlineStyle)
-
-  const updateAvatar = async () => {
-    if (authState.loggedIn) {
-      const user = await loadCurrentUser()
-      if (user && user.avatar) {
-        avatar.value = user.avatar
-      }
-    }
-  }
-  await updateAvatar()
+  await loadDonations()
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('resize', updatePanelInlineStyle)
 })
+
+watch(
+  () => props.postId,
+  async () => {
+    donationSummary.value = { totalAmount: 0, donations: [] }
+    await loadDonations()
+  },
+)
 </script>
 
 <style scoped>
@@ -217,6 +290,15 @@ onBeforeUnmount(() => {
   background-color: var(--normal-light-background-color);
 }
 
+.donate-option.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.donate-option.disabled:hover {
+  background-color: transparent;
+}
+
 .donate-option-icon {
   color: var(--primary-color);
 }
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 9e0b45a8b..bbe888909 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -542,6 +542,27 @@
                       被收录为精选
                     </NotificationContainer>
                   </template>
+                  <template v-else-if="item.type === 'DONATION'">
+                    <NotificationContainer :item="item" :markRead="markRead">
+                      <NuxtLink
+                        class="notif-content-text"
+                        @click="markRead(item.id)"
+                        :to="`/users/${item.fromUser.id}`"
+                      >
+                        {{ item.fromUser.username }}
+                      </NuxtLink>
+                      在帖子
+                      <NuxtLink
+                        class="notif-content-text"
+                        @click="markRead(item.id)"
+                        :to="`/posts/${item.post.id}`"
+                      >
+                        {{ stripMarkdownLength(item.post.title, 100) }}
+                      </NuxtLink>
+                      打赏了你
+                      <template v-if="item.content"> ，获得 {{ item.content }} 积分 </template>
+                    </NotificationContainer>
+                  </template>
                   <template v-else-if="item.type === 'POST_DELETED'">
                     <NotificationContainer :item="item" :markRead="markRead">
                       管理员
diff --git a/frontend_nuxt/pages/points.vue b/frontend_nuxt/pages/points.vue
index 1aace6a27..38e15e6d0 100644
--- a/frontend_nuxt/pages/points.vue
+++ b/frontend_nuxt/pages/points.vue
@@ -184,6 +184,27 @@
                   }}</NuxtLink>
                   参与，获得 {{ item.amount }} 积分
                 </template>
+                <template v-else-if="item.type === 'DONATE_SENT'">
+                  你在文章
+                  <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                    item.postTitle
+                  }}</NuxtLink>
+                  中打赏了
+                  <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                    item.fromUserName
+                  }}</NuxtLink>
+                  ，消耗 {{ -item.amount }} 积分
+                </template>
+                <template v-else-if="item.type === 'DONATE_RECEIVED'">
+                  <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                    item.fromUserName
+                  }}</NuxtLink>
+                  在文章
+                  <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                    item.postTitle
+                  }}</NuxtLink>
+                  中打赏了你，获得 {{ item.amount }} 积分
+                </template>
                 <template v-else-if="item.type === 'SYSTEM_ONLINE'"> 积分历史系统上线 </template>
                 <paper-money-two /> 你目前的积分是 {{ item.balance }}
               </div>
@@ -248,6 +269,8 @@ const iconMap = {
   FEATURE: 'star',
   LOTTERY_JOIN: 'medal-one',
   LOTTERY_REWARD: 'fireworks',
+  DONATE_SENT: 'paper-money-two',
+  DONATE_RECEIVED: 'paper-money-two',
   POST_LIKE_CANCELLED: 'clear-icon',
   COMMENT_LIKE_CANCELLED: 'clear-icon',
 }
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index 7c0944c32..8ff99a52a 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -99,7 +99,7 @@
                 content-type="post"
                 :content-id="postId"
               />
-              <DonateGroup />
+              <DonateGroup :post-id="postId" :author-id="author.id" :is-author="isAuthor" />
             </div>
             <div class="article-footer-actions">
               <div
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index d05875cb9..9d71e2a54 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -31,6 +31,7 @@ const iconMap = {
   MENTION: 'HashtagKey',
   POST_DELETED: 'ClearIcon',
   POST_FEATURED: 'Star',
+  DONATION: 'PaperMoneyTwo',
 }
 
 export async function fetchUnreadCount() {
@@ -334,6 +335,18 @@ function createFetchNotifications() {
               }
             },
           })
+        } else if (n.type === 'DONATION') {
+          arr.push({
+            ...n,
+            src: n.fromUser ? n.fromUser.avatar : null,
+            icon: n.fromUser ? undefined : iconMap[n.type],
+            iconClick: () => {
+              if (n.post) {
+                markNotificationRead(n.id)
+                navigateTo(`/posts/${n.post.id}`, { replace: true })
+              }
+            },
+          })
         } else if (n.type === 'REGISTER_REQUEST') {
           arr.push({
             ...n,

From d914579d64e202aab1aba380a18efd765bf3365b Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Fri, 17 Oct 2025 11:35:29 +0800
Subject: [PATCH 8/8] =?UTF-8?q?fix:=20Donate=E5=8E=86=E5=8F=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/openisle/dto/PostChangeLogDto.java    |  1 +
 .../openisle/mapper/PostChangeLogMapper.java  |  2 +
 .../com/openisle/model/PostChangeType.java    |  1 +
 .../openisle/model/PostDonateChangeLog.java   | 19 ++++++++
 .../com/openisle/service/PointService.java    | 47 ++++++++++++++-----
 .../service/PostChangeLogService.java         |  9 ++++
 .../components/PostChangeLogItem.vue          |  3 ++
 frontend_nuxt/pages/posts/[id]/index.vue      |  3 ++
 8 files changed, 72 insertions(+), 13 deletions(-)
 create mode 100644 backend/src/main/java/com/openisle/model/PostDonateChangeLog.java

diff --git a/backend/src/main/java/com/openisle/dto/PostChangeLogDto.java b/backend/src/main/java/com/openisle/dto/PostChangeLogDto.java
index ce5d55201..296287f0a 100644
--- a/backend/src/main/java/com/openisle/dto/PostChangeLogDto.java
+++ b/backend/src/main/java/com/openisle/dto/PostChangeLogDto.java
@@ -29,4 +29,5 @@ public class PostChangeLogDto {
   private LocalDateTime newPinnedAt;
   private Boolean oldFeatured;
   private Boolean newFeatured;
+  private Integer amount;
 }
diff --git a/backend/src/main/java/com/openisle/mapper/PostChangeLogMapper.java b/backend/src/main/java/com/openisle/mapper/PostChangeLogMapper.java
index 52611c5d7..cb0d1a9f1 100644
--- a/backend/src/main/java/com/openisle/mapper/PostChangeLogMapper.java
+++ b/backend/src/main/java/com/openisle/mapper/PostChangeLogMapper.java
@@ -52,6 +52,8 @@ public class PostChangeLogMapper {
     } else if (log instanceof PostFeaturedChangeLog f) {
       dto.setOldFeatured(f.isOldFeatured());
       dto.setNewFeatured(f.isNewFeatured());
+    } else if (log instanceof PostDonateChangeLog d) {
+      dto.setAmount(d.getAmount());
     }
     return dto;
   }
diff --git a/backend/src/main/java/com/openisle/model/PostChangeType.java b/backend/src/main/java/com/openisle/model/PostChangeType.java
index c09a5555a..eeee99cbb 100644
--- a/backend/src/main/java/com/openisle/model/PostChangeType.java
+++ b/backend/src/main/java/com/openisle/model/PostChangeType.java
@@ -10,4 +10,5 @@ public enum PostChangeType {
   FEATURED,
   VOTE_RESULT,
   LOTTERY_RESULT,
+  DONATE,
 }
diff --git a/backend/src/main/java/com/openisle/model/PostDonateChangeLog.java b/backend/src/main/java/com/openisle/model/PostDonateChangeLog.java
new file mode 100644
index 000000000..50eed96eb
--- /dev/null
+++ b/backend/src/main/java/com/openisle/model/PostDonateChangeLog.java
@@ -0,0 +1,19 @@
+package com.openisle.model;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.Table;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@Entity
+@Table(name = "post_donate_change_logs")
+public class PostDonateChangeLog extends PostChangeLog {
+
+  @Column(nullable = false)
+  private int amount;
+}
diff --git a/backend/src/main/java/com/openisle/service/PointService.java b/backend/src/main/java/com/openisle/service/PointService.java
index 52a732512..7b4af0f96 100644
--- a/backend/src/main/java/com/openisle/service/PointService.java
+++ b/backend/src/main/java/com/openisle/service/PointService.java
@@ -25,6 +25,7 @@ public class PointService {
   private final CommentRepository commentRepository;
   private final PointHistoryRepository pointHistoryRepository;
   private final NotificationService notificationService;
+  private final PostChangeLogService postChangeLogService;
 
   public int awardForPost(String userName, Long postId) {
     User user = userRepository.findByUsername(userName).orElseThrow();
@@ -304,6 +305,7 @@ public class PointService {
       null,
       String.valueOf(amount)
     );
+    postChangeLogService.recordDonation(post, donor, amount);
     DonationResponse response = buildDonationResponse(post);
     response.setBalance(donor.getPoint());
     return response;
@@ -322,19 +324,38 @@ public class PointService {
       );
     List<DonationDto> donations = histories
       .stream()
-      .map(history -> {
-        DonationDto dto = new DonationDto();
-        User donor = history.getFromUser();
-        if (donor != null) {
-          dto.setUserId(donor.getId());
-          dto.setUsername(donor.getUsername());
-          dto.setAvatar(donor.getAvatar());
-        }
-        dto.setAmount(history.getAmount());
-        dto.setCreatedAt(history.getCreatedAt());
-        return dto;
-      })
-      .collect(Collectors.toList());
+      .collect(Collectors.collectingAndThen(Collectors.toMap(
+          history -> {
+            User donor = history.getFromUser();
+            if (donor != null && donor.getId() != null) {
+              return "user:" + donor.getId();
+            }
+            return "history:" + history.getId();
+          },
+          history -> {
+            DonationDto dto = new DonationDto();
+            User donor = history.getFromUser();
+            if (donor != null) {
+              dto.setUserId(donor.getId());
+              dto.setUsername(donor.getUsername());
+              dto.setAvatar(donor.getAvatar());
+            }
+            dto.setAmount(history.getAmount());
+            dto.setCreatedAt(history.getCreatedAt());
+            return dto;
+          },
+          (left, right) -> {
+            left.setAmount(left.getAmount() + right.getAmount());
+            if (
+              left.getCreatedAt() == null ||
+              (right.getCreatedAt() != null && right.getCreatedAt().isAfter(left.getCreatedAt()))
+            ) {
+              left.setCreatedAt(right.getCreatedAt());
+            }
+            return left;
+          },
+          java.util.LinkedHashMap::new
+        ), map -> new java.util.ArrayList<>(map.values())));
     Long total = pointHistoryRepository.sumAmountByPostAndType(
       post,
       PointHistoryType.DONATE_RECEIVED
diff --git a/backend/src/main/java/com/openisle/service/PostChangeLogService.java b/backend/src/main/java/com/openisle/service/PostChangeLogService.java
index df78a266d..0d3fd28ad 100644
--- a/backend/src/main/java/com/openisle/service/PostChangeLogService.java
+++ b/backend/src/main/java/com/openisle/service/PostChangeLogService.java
@@ -115,6 +115,15 @@ public class PostChangeLogService {
     logRepository.save(log);
   }
 
+  public void recordDonation(Post post, User donor, int amount) {
+    PostDonateChangeLog log = new PostDonateChangeLog();
+    log.setPost(post);
+    log.setUser(donor);
+    log.setType(PostChangeType.DONATE);
+    log.setAmount(amount);
+    logRepository.save(log);
+  }
+
   public void deleteLogsForPost(Post post) {
     logRepository.deleteByPost(post);
   }
diff --git a/frontend_nuxt/components/PostChangeLogItem.vue b/frontend_nuxt/components/PostChangeLogItem.vue
index b9ead1887..c55d15763 100644
--- a/frontend_nuxt/components/PostChangeLogItem.vue
+++ b/frontend_nuxt/components/PostChangeLogItem.vue
@@ -42,6 +42,9 @@
       <span v-else-if="log.type === 'LOTTERY_RESULT'" class="change-log-content"
         >系统已「精密计算」抽奖结果 (=ﾟωﾟ)ﾉ</span
       >
+      <span v-else-if="log.type === 'DONATE'" class="change-log-content"
+        >为文章打赏了 {{ log.amount ?? 0 }} 积分</span
+      >
     </div>
     <div class="change-log-time">{{ log.time }}</div>
     <div
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index 8ff99a52a..5ed2eae94 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -412,6 +412,8 @@ const changeLogIcon = (l) => {
     return 'check-one'
   } else if (l.type === 'LOTTERY_RESULT') {
     return 'gift'
+  } else if (l.type === 'DONATE') {
+    return 'financing'
   } else {
     return 'info'
   }
@@ -436,6 +438,7 @@ const mapChangeLog = (l) => ({
   newCategory: l.newCategory,
   oldTags: l.oldTags,
   newTags: l.newTags,
+  amount: l.amount,
   icon: changeLogIcon(l),
 })