feat: add base item group component

Refactor ReactionsGroup layout responsibilities

.github/workflows/deploy-docs.yml

@@ -11,12 +11,17 @@ on:
 permissions:
   contents: write
 
+# 文档发布自己的排队锁，不影响服务器部署
+concurrency:
+  group: openisle-docs
+  cancel-in-progress: false
+
 jobs:
   build-docs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 1
 

.github/workflows/deploy-staging.yml

@@ -2,22 +2,27 @@ name: Staging CI & CD
 
 on:
   push:
-    branches: [main]
+    branches: [ "main" ]
   workflow_dispatch:
 
 permissions:
   contents: write
 
+# 与生产部署共用同一把锁，确保服务器上始终串行（跨工作流也互斥）
+concurrency:
+  group: openisle-server
+  cancel-in-progress: false
+
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
     environment: Deploy
-    if: ${{ !github.event.repository.fork }} # 只有非 fork 才执行
+    if: ${{ !github.event.repository.fork }}
 
     steps:
       - uses: actions/checkout@v4
 
-      - name: Deploy to Server
+      - name: Deploy to Server (staging)
         uses: appleboy/ssh-action@v1.0.3
         with:
           host: ${{ secrets.SSH_HOST }}

.github/workflows/deploy.yml

@@ -2,8 +2,13 @@ name: CI & CD
 
 on:
   workflow_dispatch:
-  # schedule:
+  schedule:
-  #   - cron: "0 19 * * *" # 每天 UTC 19:00，相当于北京时间凌晨3点
+    - cron: "0 19 * * *" # 每天 UTC 19:00（北京 03:00）
+
+# 与 Staging 共用同一把锁，避免两边同时在 8G 服务器上跑
+concurrency:
+  group: openisle-server
+  cancel-in-progress: false
 
 jobs:
   build-and-deploy:
@@ -13,7 +18,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Deploy to Server
+      - name: Deploy to Server (prod)
         uses: appleboy/ssh-action@v1.0.3
         with:
           host: ${{ secrets.SSH_HOST }}

frontend_nuxt/assets/global.css

@@ -179,7 +179,9 @@ body {
 
 .info-content-text pre .line-numbers {
   counter-reset: line-number 0;
-  width: 2em;
+  white-space: nowrap;        /* 禁止数字换行 */
+  font-variant-numeric: tabular-nums; /* 数字等宽 */
+  /* width: 2em; */
   font-size: 13px;
   position: sticky;
   flex-shrink: 0;
@@ -203,6 +205,7 @@ body {
   border-radius: 4px;
   background-color: var(--code-highlight-background-color);
   color: var(--text-color);
+  white-space: pre; /* 禁止自动换行 */
 }
 
 .copy-code-btn {

frontend_nuxt/components/BaseItemGroup.vue

@@ -0,0 +1,157 @@
+<template>
+  <div
+    class="base-item-group"
+    :style="{
+      width: `${containerWidth}px`,
+      height: `${itemSize}px`,
+      '--base-item-group-duration': `${animationDuration}ms`,
+    }"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <div
+      v-for="(item, index) in items"
+      :key="itemKey(item, index)"
+      class="base-item-group__item"
+      :style="{
+        width: `${itemSize}px`,
+        height: `${itemSize}px`,
+        transform: `translateX(${index * activeGap}px)`,
+        zIndex: items.length - index,
+      }"
+    >
+      <slot :item="item" :index="index">
+        <BaseImage
+          v-if="item && (item.src || typeof item === 'string')"
+          class="base-item-group__image"
+          :src="typeof item === 'string' ? item : item.src"
+          :alt="itemAlt(item, index)"
+        />
+        <div v-else class="base-item-group__placeholder">{{ placeholderText(item) }}</div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watchEffect } from 'vue'
+import BaseImage from './BaseImage.vue'
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  itemSize: {
+    type: Number,
+    default: 40,
+  },
+  collapsedGap: {
+    type: Number,
+    default: 12,
+  },
+  expandedGap: {
+    type: Number,
+    default: null,
+  },
+  animationDuration: {
+    type: Number,
+    default: 200,
+  },
+  itemKeyField: {
+    type: String,
+    default: 'id',
+  },
+})
+
+const isHovered = ref(false)
+
+const onMouseEnter = () => {
+  isHovered.value = true
+}
+
+const onMouseLeave = () => {
+  isHovered.value = false
+}
+
+const effectiveExpandedGap = computed(() =>
+  props.expandedGap == null ? props.itemSize : props.expandedGap,
+)
+
+const activeGap = computed(() =>
+  isHovered.value ? effectiveExpandedGap.value : props.collapsedGap,
+)
+
+const containerWidth = computed(() =>
+  props.items.length ? props.itemSize + (props.items.length - 1) * activeGap.value : props.itemSize,
+)
+
+watchEffect(() => {
+  if (effectiveExpandedGap.value < props.collapsedGap) {
+    console.warn('[BaseItemGroup] `expandedGap` should be greater than or equal to `collapsedGap`.')
+  }
+})
+
+const itemKey = (item, index) => {
+  if (item && typeof item === 'object' && props.itemKeyField in item) {
+    return item[props.itemKeyField]
+  }
+  return index
+}
+
+const itemAlt = (item, index) => {
+  if (item && typeof item === 'object') {
+    return item.alt || `item-${index}`
+  }
+  if (typeof item === 'string') {
+    return `item-${index}`
+  }
+  return 'item'
+}
+
+const placeholderText = (item) => {
+  if (item == null) return ''
+  if (typeof item === 'object' && 'text' in item) return item.text
+  return String(item)
+}
+</script>
+
+<style scoped>
+.base-item-group {
+  display: flex;
+  position: relative;
+  transition: width var(--base-item-group-duration) ease;
+}
+
+.base-item-group__item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  overflow: hidden;
+  background-color: var(--color-neutral-100, #f0f2f5);
+  transition: transform var(--base-item-group-duration) ease;
+  box-shadow: 0 0 0 2px var(--color-surface, #fff);
+}
+
+.base-item-group__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.base-item-group__placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-neutral-500, #666);
+  background-color: var(--color-neutral-200, #e5e7eb);
+}
+</style>

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">
+        <ReactionsGroup
-          <div class="make-reaction-item comment-reaction" @click="toggleEditor">
+          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,47 @@ const handleContentClick = (e) => {
 </script>
 
 <style scoped>
+.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 +446,6 @@ const handleContentClick = (e) => {
   color: var(--primary-color);
 }
 
-.comment-reaction:hover {
-  background-color: lightgray;
-}
-
 .comment-highlight {
   animation: highlight 2s;
 }

frontend_nuxt/components/HeaderComponent.vue

@@ -26,43 +26,59 @@
 
       <ClientOnly>
         <div class="header-content-right">
-          <div v-if="isMobile" class="search-icon" @click="search">
+          <!-- 搜索 -->
-            <search-icon />
+          <ToolTip v-if="isMobile" content="搜索" placement="bottom">
-          </div>
+            <div class="header-icon-item" @click="search">
-
+              <search-icon class="header-icon" />
-          <div v-if="isMobile" class="theme-icon" @click="cycleTheme">
+              <span class="header-label">搜索</span>
-            <component :is="iconClass" />
+            </div>
-          </div>
+          </ToolTip>
-
+          <!-- 主题切换 -->
-          <div v-if="!isMobile" class="invite_text" @click="copyInviteLink">
+          <ToolTip v-if="isMobile" content="切换主题" placement="bottom">
-            <copy />
+            <div class="header-icon-item" @click="cycleTheme">
-            邀请
+              <component :is="iconClass" class="header-icon" />
-            <loading v-if="isCopying" />
+              <span class="header-label">主题</span>
-          </div>
+            </div>
+          </ToolTip>
+          <!-- 邀请 -->
+          <ToolTip v-if="!isMobile" content="邀请好友" placement="bottom">
+            <div class="header-icon-item" @click="copyInviteLink">
+              <template v-if="!isCopying">
+                <copy-link class="header-icon" />
+                <span class="header-label">邀请</span>
+              </template>
+              <loading v-else />
+            </div>
+          </ToolTip>
+          <!-- 在线人数 -->
           <ToolTip v-if="!isMobile" content="当前在线人数" placement="bottom">
-            <div class="online-count">
+            <div class="header-icon-item">
-              <peoples-two />
+              <peoples-two class="header-icon" />
-              <span>{{ onlineCount }}</span>
+              <span class="header-label">在线</span>
+              <span class="header-badge">{{ onlineCount }}</span>
             </div>
           </ToolTip>
+          <!-- RSS -->
           <ToolTip content="复制RSS链接" placement="bottom">
-            <div class="rss-icon" @click="copyRssLink">
+            <div class="header-icon-item" @click="copyRssLink">
-              <rss />
+              <rss class="header-icon" />
+              <span class="header-label">RSS</span>
             </div>
           </ToolTip>
-
+          <!-- 发帖 -->
           <ToolTip v-if="!isMobile && isLogin" content="发帖" placement="bottom">
-            <div class="new-post-icon" @click="goToNewPost">
+            <div class="header-icon-item" @click="goToNewPost">
-              <edit />
+              <edit class="header-icon" />
+              <span class="header-label">发帖</span>
             </div>
           </ToolTip>
 
+          <!-- 消息 -->
           <ToolTip v-if="isLogin" content="站内信和频道" placement="bottom">
-            <div class="messages-icon" @click="goToMessages">
+            <div class="header-icon-item" @click="goToMessages">
-              <message-emoji />
+              <message-emoji class="header-icon" />
-              <span v-if="unreadMessageCount > 0" class="unread-badge">{{
+              <span class="header-label">消息</span>
-                unreadMessageCount
+              <span v-if="unreadMessageCount > 0" class="unread-badge">{{ unreadMessageCount }}</span>
-              }}</span>
               <span v-else-if="hasChannelUnread" class="unread-dot"></span>
             </div>
           </ToolTip>
@@ -192,6 +208,7 @@ const copyInviteLink = async () => {
   const token = getToken()
   if (!token) {
     toast.error('请先登录')
+    isCopying.value = false   // 🔥 修复：未登录时立即复原状态
     return
   }
   try {
@@ -333,7 +350,7 @@ onMounted(async () => {
   height: var(--header-height);
   background-color: var(--background-color-blur);
   backdrop-filter: var(--blur-10);
-  color: var(--header-text-color);
+  color: var(--primary-color);
   border-bottom: 1px solid var(--header-border-color);
 }
 
@@ -376,6 +393,7 @@ onMounted(async () => {
   flex-direction: row;
   align-items: center;
   gap: 20px;
+  padding-right: 15px;
 }
 
 .micon {
@@ -464,16 +482,14 @@ onMounted(async () => {
   cursor: pointer;
 }
 
-.invite_text {
-  font-size: 12px;
-  cursor: pointer;
-  color: var(--primary-color);
-}
 
 .invite_text:hover {
+  opacity: 0.8;
   text-decoration: underline;
 }
 
+.invite_text,
+.online-count,
 .rss-icon,
 .new-post-icon,
 .messages-icon {
@@ -484,8 +500,8 @@ onMounted(async () => {
 
 .unread-badge {
   position: absolute;
-  top: -5px;
+  top: -4px;
-  right: -10px;
+  right: -6px;
   background-color: #ff4d4f;
   color: white;
   border-radius: 50%;
@@ -500,8 +516,8 @@ onMounted(async () => {
 
 .unread-dot {
   position: absolute;
-  top: -2px;
+  top: 0;
-  right: -4px;
+  right: -1px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
@@ -513,14 +529,58 @@ onMounted(async () => {
 }
 
 .online-count {
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  color: var(--primary-color);
   cursor: default;
 }
 
+/* === 统一图标按钮风格 === */
+.header-icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 14px;
+  color: var(--primary-color);
+  cursor: pointer;
+  position: relative;
+  transition: color 0.25s ease, transform 0.15s ease, opacity 0.2s ease;
+}
+
+.header-icon-item:hover {
+  opacity: 0.8;
+  transform: translateY(-1px);
+}
+
+/* 点击时瞬间高亮 + 轻微缩放 */
+.header-icon-item:active {
+  color: var(--primary-color-hover);
+  transform: scale(0.92);
+}
+
+.header-icon {
+  font-size: 20px;
+  line-height: 1;
+}
+
+.header-label {
+  font-size: 12px;
+  line-height: 1;
+}
+
+/* 在线人数的数字文字样式（无背景） */
+.header-badge {
+  position: absolute;
+  top: -4px;
+  right: -6px;
+  color: var(--primary-color);  /* 🔹 使用主题主色 */
+  background: none;             /* 🔹 去掉背景 */
+  font-size: 11px;              /* 字体稍微大一点以便清晰 */
+  font-weight: 600;             /* 加一点权重让数字更醒目 */
+  line-height: 1;
+  padding: 0;                   /* 去掉内边距 */
+}
+
+
 @keyframes rss-glow {
   0% {
     text-shadow: 0 0 0px var(--primary-color);
@@ -556,5 +616,12 @@ onMounted(async () => {
   .header-content-right {
     gap: 15px;
   }
+  /* 手机不显示文字 */
+  .header-label {
+    display: none;
+  }
+  .header-badge {
+    display: none;
+  }
 }
 </style>

frontend_nuxt/components/ReactionsGroup.vue

@@ -35,21 +35,11 @@
         </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"
+      ref="reactionsPanelRef"
+      :style="panelInlineStyle"
       @mouseenter="cancelHide"
       @mouseleave="scheduleHide"
     >
@@ -69,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'
@@ -102,8 +92,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,9 +140,11 @@ const displayedReactions = computed(() => {
     .map((type) => ({ type }))
 })
 
-const panelTypes = computed(() => sortedReactionTypes.value.filter((t) => t !== 'LIKE'))
+const panelTypes = computed(() => sortedReactionTypes.value)
 
 const panelVisible = ref(false)
+const reactionsPanelRef = ref(null)
+const panelInlineStyle = ref({})
 let hideTimer = null
 const openPanel = () => {
   clearTimeout(hideTimer)
@@ -170,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) {
@@ -245,6 +262,15 @@ const toggleReaction = async (type) => {
 
 onMounted(async () => {
   await initialize()
+  window.addEventListener('resize', updatePanelInlineStyle)
+})
+
+defineExpose({
+  toggleReaction,
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePanelInlineStyle)
 })
 </script>
 
@@ -253,11 +279,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 +317,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;
@@ -328,7 +324,7 @@ onMounted(async () => {
 
 .reactions-panel {
   position: absolute;
-  bottom: 50px;
+  bottom: 40px;
   background-color: var(--background-color);
   border: 1px solid var(--normal-border-color);
   border-radius: 20px;

frontend_nuxt/components/SearchDropdown.vue

@@ -202,6 +202,7 @@ defineExpose({
 }
 
 .result-body {
+  line-height: 1;  
   display: flex;
   flex-direction: column;
 }

frontend_nuxt/pages/index.vue

@@ -75,8 +75,8 @@
               <star v-if="!article.rssExcluded" class="featured-icon" />
               {{ article.title }}
             </NuxtLink>
-            <NuxtLink class="article-item-description main-item">
+            <NuxtLink class="article-item-description main-item" :to="`/posts/${article.id}`">
-              {{ sanitizeDescription(article.description) }}
+              <div v-html="sanitizeDescription(article.description)"></div>
             </NuxtLink>
             <div class="article-info-container main-item">
               <ArticleCategory :category="article.category" />
@@ -378,8 +378,27 @@ onBeforeUnmount(() => {
 /** 供 InfiniteLoadMore 重建用的 key：筛选/Tab 改变即重建内部状态 */
 const ioKey = computed(() => asyncKey.value.join('::'))
 
-/** 其他工具函数 **/
+// 在首页摘要加载贴吧表情包
-const sanitizeDescription = (text) => stripMarkdown(text)
+const sanitizeDescription = (text) => {
+  if (!text) return ''
+
+  // 1️⃣ 先把 Markdown 转成纯文本
+  const plain = stripMarkdown(text)
+
+  // 2️⃣ 替换 :tieba123: 为 <img>
+  const withEmoji = plain.replace(/:tieba(\d+):/g, (match, num) => {
+    const key = `tieba${num}`
+    const file = tiebaEmoji[key]
+    return file
+      ? `<img loading="lazy" class="emoji" src="${file}" alt="${key}">`
+      : match // 没有匹配到图片则保留原样
+  })
+
+  // 3️⃣ 可选：截断纯文本长度（防止撑太长）
+  const truncated = withEmoji.length > 500 ? withEmoji.slice(0, 500) + '…' : withEmoji
+
+  return truncated
+}
 
 // 页面选项同步到全局状态
 watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
@@ -537,16 +556,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/message-box/[id].vue

@@ -61,14 +61,31 @@
                 @click="handleContentClick"
               ></div>
             </div>
-            <ReactionsGroup
+            <div class="message-reaction-row">
-              :model-value="item.reactions"
+              <ReactionsGroup
-              content-type="message"
+                :ref="(el) => setMessageReactionRef(item.id, el)"
-              :content-id="item.id"
+                :model-value="item.reactions"
-              @update:modelValue="(v) => (item.reactions = v)"
+                content-type="message"
-            >
+                :content-id="item.id"
-              <div @click="setReply(item)" class="reply-btn"><next /> 写个回复...</div>
+                @update:modelValue="(v) => (item.reactions = v)"
-            </ReactionsGroup>
+              />
+              <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;
-}
+  color: var(--primary-color);
-
-.reply-btn:hover {
-  opacity: 1;
 }
 
 .active-reply {

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">
+            <ReactionsGroup
-              <div class="make-reaction-item copy-link" @click="copyPostLink">
+              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;
+  justify-content: space-between;
   gap: 10px;
   margin-top: 0px;
+  flex-wrap: wrap;
 }
 
-.reactions-viewer {
+.article-footer-actions {
-  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 {
   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;
 }
 

frontend_nuxt/pages/signup-reason.vue

@@ -5,11 +5,18 @@
       <div class="reason-description">
         为了我们社区的良性发展，请填写注册理由，我们将根据你的理由审核你的注册, 谢谢!
       </div>
-      <div class="reason-input-container">
+      <div class="input-wrapper">
-        <BaseInput textarea rows="4" v-model="reason" placeholder="20个字以上"></BaseInput>
+        <div class="reason-input-container">
-        <div class="char-count">{{ reason.length }}/20</div>
+          <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) {
+  const trimmedReason = reason.value.trim()
-    error.value = '请至少输入20个字'
+  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%;
+  background-color: transparent;
-  text-align: right;
+  pointer-events: none;
 }
 
 .error-message {
   color: red;
   font-size: 14px;
+  margin-top: 8px;
 }
 
 .signup-page-button-primary {

frontend_nuxt/plugins/iconpark.client.ts

@@ -29,6 +29,7 @@ import {
   ApplicationMenu,
   Search,
   Copy,
+  CopyLink,
   Loading,
   Rss,
   MessageEmoji,
@@ -111,6 +112,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('ApplicationMenu', ApplicationMenu)
   nuxtApp.vueApp.component('SearchIcon', Search)
   nuxtApp.vueApp.component('Copy', Copy)
+  nuxtApp.vueApp.component('CopyLink', CopyLink)
   nuxtApp.vueApp.component('Loading', Loading)
   nuxtApp.vueApp.component('Rss', Rss)
   nuxtApp.vueApp.component('MessageEmoji', MessageEmoji)

frontend_nuxt/utils/theme.js

@@ -93,9 +93,8 @@ function getCircle(event) {
 
 function withViewTransition(event, applyFn, direction = true) {
   if (typeof document !== 'undefined' && document.startViewTransition) {
-    const transition = document.startViewTransition(async () => {
+    const transition = document.startViewTransition(() => {
       applyFn()
-      await nextTick()
     })
 
     transition.ready
@@ -111,6 +110,7 @@ function withViewTransition(event, applyFn, direction = true) {
           {
             duration: 400,
             easing: 'ease-in-out',
+            fill: 'both',
             pseudoElement: direction
               ? '::view-transition-new(root)'
               : '::view-transition-old(root)',