Merge pull request #1065 from nagisa77/feature/give_some_money

打赏功能实现
2026-04-20 02:47:28 +08:00 · 2025-10-17 11:36:34 +08:00
parent b2d70b9bde d914579d64
commit 0d2e6a9505
30 changed files with 1103 additions and 104 deletions
--- 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;
+  justify-content: space-between;
+  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 {
--- 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() {
--- 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">
                      管理员
--- 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',
 }
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -92,11 +92,29 @@
          ></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">
+            <div class="option-container">
+              <ReactionsGroup
+                ref="postReactionsGroupRef"
+                v-model="postReactions"
+                content-type="post"
+                :content-id="postId"
+              />
+              <DonateGroup :post-id="postId" :author-id="author.id" :is-author="isAuthor" />
+            </div>
+            <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>
@@ -196,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'
@@ -223,6 +242,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 +397,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') {
@@ -381,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'
  }
@@ -405,6 +438,7 @@ const mapChangeLog = (l) => ({
  newCategory: l.newCategory,
  oldTags: l.oldTags,
  newTags: l.newTags,
+  amount: l.amount,
  icon: changeLogIcon(l),
 })

@@ -1245,35 +1279,61 @@ onMounted(async () => {
 .article-footer-container {
  display: flex;
  flex-direction: row;
+  justify-content: space-between;
  gap: 10px;
  margin-top: 0px;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
 }

-.reactions-viewer {
+.option-container {
  display: flex;
  flex-direction: row;
-  gap: 20px;
  align-items: center;
+  flex-wrap: wrap;
 }

-.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;
 }