Merge remote-tracking branch 'origin/main' into feat_category_proposal

frontend_nuxt/pages/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="home-page">
-    <div v-if="!isMobile" class="search-container">
+    <!-- <div v-if="!isMobile" class="search-container">
       <div class="search-title">一切可能，从此刻启航，在此遇见灵感与共鸣</div>
       <SearchDropdown />
-    </div>
+    </div> -->
 
     <div class="topic-container">
       <div class="topic-item-container">
@@ -75,8 +75,8 @@
               <star v-if="!article.rssExcluded" class="featured-icon" />
               {{ article.title }}
             </NuxtLink>
-            <NuxtLink class="article-item-description main-item">
-              {{ sanitizeDescription(article.description) }}
+            <NuxtLink class="article-item-description main-item" :to="`/posts/${article.id}`">
+              <div v-html="stripMarkdownWithTiebaMoji(article.description, 500)"></div>
             </NuxtLink>
             <div class="article-info-container main-item">
               <ArticleCategory :category="article.category" />
@@ -143,6 +143,7 @@ import { useIsMobile } from '~/utils/screen'
 import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import TimeManager from '~/utils/time'
 import { selectedCategoryGlobal, selectedTagsGlobal } from '~/composables/postFilter'
+import { stripMarkdownWithTiebaMoji } from '~/utils/markdown'
 useHead({
   title: 'OpenIsle - 全面开源的自由社区',
   meta: [
@@ -378,9 +379,6 @@ onBeforeUnmount(() => {
 /** 供 InfiniteLoadMore 重建用的 key：筛选/Tab 改变即重建内部状态 */
 const ioKey = computed(() => asyncKey.value.join('::'))
 
-/** 其他工具函数 **/
-const sanitizeDescription = (text) => stripMarkdown(text)
-
 // 页面选项同步到全局状态
 watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
   selectedCategoryGlobal.value = newCategory
@@ -537,16 +535,22 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
 .article-comments,
 .header-item.comments {
   width: 5%;
+  justify-content: flex-end;
+  text-align: right;
 }
 
 .article-views,
 .header-item.views {
   width: 5%;
+  justify-content: flex-end;
+  text-align: right;
 }
 
 .article-time,
 .header-item.activity {
   width: 10%;
+  justify-content: flex-end;
+  text-align: left;
 }
 
 .article-item-title {

frontend_nuxt/pages/login.vue

@@ -40,7 +40,7 @@
 
 <script setup>
 import { toast } from '~/main'
-import { setToken, loadCurrentUser } from '~/utils/auth'
+import { setToken } from '~/utils/auth'
 import BaseInput from '~/components/BaseInput.vue'
 import ThirdPartyAuth from '~/components/ThirdPartyAuth.vue'
 import { registerPush } from '~/utils/push'
@@ -61,7 +61,6 @@ const submitLogin = async () => {
     const data = await res.json()
     if (res.ok && data.token) {
       setToken(data.token)
-      await loadCurrentUser()
       toast.success('登录成功')
       registerPush()
       await navigateTo('/', { replace: true })

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 {

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"
                 :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 = null
 }
 
 async function fetchChannels() {

frontend_nuxt/pages/message.vue

@@ -75,7 +75,7 @@
                           @click="markRead(item.id)"
                           :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
                         >
-                          {{ stripMarkdownLength(item.parentComment.content, 100) }}
+                          <span v-html="stripMarkdownWithTiebaMoji(item.parentComment.content, 500)"></span>
                         </NuxtLink>
                       </span>
                       回复了
@@ -85,7 +85,7 @@
                           @click="markRead(item.id)"
                           :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                         >
-                          {{ stripMarkdownLength(item.comment.content, 100) }}
+                        <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
                         </NuxtLink>
                       </span>
                     </NotificationContainer>
@@ -115,7 +115,7 @@
                           @click="markRead(item.id)"
                           :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                         >
-                          {{ stripMarkdownLength(item.comment.content, 100) }}
+                        <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
                         </NuxtLink>
                       </span>
                     </NotificationContainer>
@@ -162,7 +162,7 @@
                           @click="markRead(item.id)"
                           :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                         >
-                          {{ stripMarkdownLength(item.comment.content, 100) }}
+                          <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
                         </NuxtLink>
                       </span>
                       进行了表态
@@ -267,7 +267,7 @@
                         @click="markRead(item.id)"
                         :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                       >
-                        {{ stripMarkdownLength(item.comment.content, 100) }}
+                        <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
                       </NuxtLink>
                     </NotificationContainer>
                   </template>
@@ -287,7 +287,7 @@
                         @click="markRead(item.id)"
                         :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
                       >
-                        {{ stripMarkdownLength(item.parentComment.content, 100) }}
+                        <span v-html="stripMarkdownWithTiebaMoji(item.parentComment.content, 500)"></span>                      
                       </NuxtLink>
                       回复了
                       <NuxtLink
@@ -295,7 +295,7 @@
                         @click="markRead(item.id)"
                         :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                       >
-                        {{ stripMarkdownLength(item.comment.content, 100) }}
+                        <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>                      
                       </NuxtLink>
                     </NotificationContainer>
                   </template>
@@ -323,7 +323,7 @@
                         @click="markRead(item.id)"
                         :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                       >
-                        {{ stripMarkdownLength(item.comment.content, 100) }}
+                        <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
                       </NuxtLink>
                     </NotificationContainer>
                   </template>
@@ -342,7 +342,7 @@
                         @click="markRead(item.id)"
                         :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                       >
-                        {{ stripMarkdownLength(item.comment.content, 100) }}
+                        <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
                       </NuxtLink>
                     </NotificationContainer>
                   </template>
@@ -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">
                       管理员
@@ -556,7 +577,7 @@
                       </template>
                       删除了您的帖子
                       <span class="notif-content-text">
-                        {{ stripMarkdownLength(item.content, 100) }}
+                        <span v-html="stripMarkdownWithTiebaMoji(item.content, 500)"></span>
                       </span>
                     </NotificationContainer>
                   </template>
@@ -586,7 +607,7 @@ import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import BaseTabs from '~/components/BaseTabs.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
-import { stripMarkdownLength } from '~/utils/markdown'
+import { stripMarkdownWithTiebaMoji } from '~/utils/markdown'
 import {
   fetchNotifications,
   fetchUnreadCount,

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',
 }

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="article-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,7 +397,11 @@ const changeLogIcon = (l) => {
       return 'unlock'
     }
   } else if (l.type === 'PINNED') {
-    return 'pin-icon'
+    if (l.newPinnedAt) {
+      return 'pin'
+    } else {
+      return 'clear-icon'
+    }
   } else if (l.type === 'FEATURED') {
     if (l.newFeatured) {
       return 'star'
@@ -377,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'
   }
@@ -401,6 +438,7 @@ const mapChangeLog = (l) => ({
   newCategory: l.newCategory,
   oldTags: l.oldTags,
   newTags: l.newTags,
+  amount: l.amount,
   icon: changeLogIcon(l),
 })
 
@@ -1241,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 {
+.article-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;
 }
 
@@ -1318,6 +1382,7 @@ onMounted(async () => {
 
   .article-footer-container {
     margin-top: 0;
+    margin-bottom: 0px;
   }
 
   .loading-container {

frontend_nuxt/pages/signup-reason.vue

@@ -5,11 +5,18 @@
       <div class="reason-description">
         为了我们社区的良性发展，请填写注册理由，我们将根据你的理由审核你的注册, 谢谢!
       </div>
-      <div class="reason-input-container">
-        <BaseInput textarea rows="4" v-model="reason" placeholder="20个字以上"></BaseInput>
-        <div class="char-count">{{ reason.length }}/20</div>
+      <div class="input-wrapper">
+        <div class="reason-input-container">
+          <BaseInput
+            textarea
+            rows="4"
+            v-model="reason"
+            placeholder="请输入至少20个字符"
+          ></BaseInput>
+          <div class="char-count">{{ reason.length }}/20</div>
+        </div>
+        <div v-if="error" class="error-message">{{ error }}</div>
       </div>
-      <div v-if="error" class="error-message">{{ error }}</div>
       <div v-if="!isWaitingForRegister" class="signup-page-button-primary" @click="submit">
         提交
       </div>
@@ -38,8 +45,9 @@ onMounted(async () => {
 })
 
 const submit = async () => {
-  if (!reason.value || reason.value.trim().length < 20) {
-    error.value = '请至少输入20个字'
+  const trimmedReason = reason.value.trim()
+  if (!trimmedReason || trimmedReason.length < 20) {
+    error.value = '请至少输入20个字符'
     return
   }
 
@@ -98,16 +106,29 @@ const submit = async () => {
   width: 400px;
 }
 
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.reason-input-container {
+  position: relative;
+}
+
 .char-count {
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
   font-size: 12px;
   color: #888;
-  width: 100%;
-  text-align: right;
+  background-color: transparent;
+  pointer-events: none;
 }
 
 .error-message {
   color: red;
   font-size: 14px;
+  margin-top: 8px;
 }
 
 .signup-page-button-primary {

frontend_nuxt/pages/signup.vue

@@ -70,7 +70,7 @@
 <script setup>
 import BaseInput from '~/components/BaseInput.vue'
 import { toast } from '~/main'
-import { loadCurrentUser, setToken } from '~/utils/auth'
+import { setToken } from '~/utils/auth'
 import ThirdPartyAuth from '~/components/ThirdPartyAuth.vue'
 
 const route = useRoute()
@@ -172,7 +172,6 @@ const verifyCode = async () => {
       if (data.reason_code === 'VERIFIED_AND_APPROVED') {
         toast.success('注册成功')
         setToken(data.token)
-        loadCurrentUser()
         navigateTo('/', { replace: true })
       } else if (data.reason_code === 'VERIFIED') {
         if (registerMode.value === 'WHITELIST') {

frontend_nuxt/pages/users/[id].vue

@@ -849,7 +849,8 @@ watch(selectedTab, async (val) => {
   display: flex;
   flex-direction: column;
   padding: 20px;
-  gap: 20px;
+  row-gap: 40px;     /* 行间距 */
+  column-gap: 20px;  /* 列间距 */
 }
 
 .summary-title {
@@ -888,10 +889,10 @@ watch(selectedTab, async (val) => {
 }
 
 .summary-divider {
-  margin-top: 20px;
   display: flex;
   flex-direction: row;
-  gap: 20px;
+  row-gap: 40px;     /* 行间距 */
+  column-gap: 20px;  /* 列间距 */
   width: 100%;
   flex-wrap: wrap;
 }