feat: add mermaid support to markdown

解决文章和草稿长度不够的问题

README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <BaseImage alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="200">
+  <img alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="200">
   <br>
   高效的开源社区前后端平台
   <br><br><br>
-  <BaseImage alt="Image" src="https://openisle-1307107697.cos.accelerate.myqcloud.com/dynamic_assert/22752cfac5a04a9c90c41995b9f55fed.png" width="1200">
+  <img alt="Image" src="https://openisle-1307107697.cos.accelerate.myqcloud.com/dynamic_assert/22752cfac5a04a9c90c41995b9f55fed.png" width="1200">
 </p>
 
 ## 💡 简介

backend/src/main/java/com/openisle/controller/PointHistoryController.java

@@ -7,9 +7,11 @@ import lombok.RequiredArgsConstructor;
 import org.springframework.security.core.Authentication;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
 import java.util.List;
+import java.util.Map;
 import java.util.stream.Collectors;
 
 @RestController
@@ -25,4 +27,10 @@ public class PointHistoryController {
                 .map(pointHistoryMapper::toDto)
                 .collect(Collectors.toList());
     }
+
+    @GetMapping("/trend")
+    public List<Map<String, Object>> trend(Authentication auth,
+                                          @RequestParam(value = "days", defaultValue = "30") int days) {
+        return pointService.trend(auth.getName(), days);
+    }
 }

backend/src/main/java/com/openisle/controller/ReactionController.java

@@ -36,6 +36,7 @@ public class ReactionController {
                                                    Authentication auth) {
         Reaction reaction = reactionService.reactToPost(auth.getName(), postId, req.getType());
         if (reaction == null) {
+            pointService.deductForReactionOfPost(auth.getName(), postId);
             return ResponseEntity.noContent().build();
         }
         ReactionDto dto = reactionMapper.toDto(reaction);
@@ -50,6 +51,7 @@ public class ReactionController {
                                                       Authentication auth) {
         Reaction reaction = reactionService.reactToComment(auth.getName(), commentId, req.getType());
         if (reaction == null) {
+            pointService.deductForReactionOfComment(auth.getName(), commentId);
             return ResponseEntity.noContent().build();
         }
         ReactionDto dto = reactionMapper.toDto(reaction);

backend/src/main/java/com/openisle/model/Draft.java

@@ -22,7 +22,7 @@ public class Draft {
 
     private String title;
 
-    @Column(columnDefinition = "TEXT")
+    @Column(columnDefinition = "LONGTEXT")
     private String content;
 
     @ManyToOne(fetch = FetchType.LAZY, optional = false)

backend/src/main/java/com/openisle/model/PointHistoryType.java

@@ -5,6 +5,8 @@ public enum PointHistoryType {
     COMMENT,
     POST_LIKED,
     COMMENT_LIKED,
+    POST_LIKE_CANCELLED,
+    COMMENT_LIKE_CANCELLED,
     INVITE,
     FEATURE,
     SYSTEM_ONLINE,

backend/src/main/java/com/openisle/model/Post.java

@@ -31,7 +31,7 @@ public class Post {
     @Column(nullable = false)
     private String title;
 
-    @Column(nullable = false, columnDefinition = "TEXT")
+    @Column(nullable = false, columnDefinition = "LONGTEXT")
     private String content;
 
     @CreationTimestamp

backend/src/main/java/com/openisle/repository/NotificationRepository.java

@@ -5,6 +5,7 @@ import com.openisle.model.User;
 import com.openisle.model.Post;
 import com.openisle.model.Comment;
 import com.openisle.model.NotificationType;
+import com.openisle.model.ReactionType;
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.Pageable;
@@ -29,4 +30,8 @@ public interface NotificationRepository extends JpaRepository<Notification, Long
     List<Notification> findByTypeAndFromUser(NotificationType type, User fromUser);
 
     void deleteByTypeAndFromUserAndPost(NotificationType type, User fromUser, Post post);
+
+    void deleteByTypeAndFromUserAndPostAndReactionType(NotificationType type, User fromUser, Post post, ReactionType reactionType);
+
+    void deleteByTypeAndFromUserAndCommentAndReactionType(NotificationType type, User fromUser, Comment comment, ReactionType reactionType);
 }

backend/src/main/java/com/openisle/repository/PointHistoryRepository.java

@@ -4,9 +4,12 @@ import com.openisle.model.PointHistory;
 import com.openisle.model.User;
 import org.springframework.data.jpa.repository.JpaRepository;
 
+import java.time.LocalDateTime;
 import java.util.List;
 
 public interface PointHistoryRepository extends JpaRepository<PointHistory, Long> {
     List<PointHistory> findByUserOrderByIdDesc(User user);
     long countByUser(User user);
+
+    List<PointHistory> findByUserAndCreatedAtAfterOrderByCreatedAtDesc(User user, LocalDateTime createdAt);
 }

backend/src/main/java/com/openisle/service/NotificationService.java

@@ -114,6 +114,14 @@ public class NotificationService {
         return n;
     }
 
+    public void deleteReactionNotification(User fromUser, Post post, Comment comment, ReactionType reactionType) {
+        if (post != null) {
+            notificationRepository.deleteByTypeAndFromUserAndPostAndReactionType(NotificationType.REACTION, fromUser, post, reactionType);
+        } else if (comment != null) {
+            notificationRepository.deleteByTypeAndFromUserAndCommentAndReactionType(NotificationType.REACTION, fromUser, comment, reactionType);
+        }
+    }
+
     /**
      * Create notifications for all admins when a user submits a register request.
      * Old register request notifications from the same applicant are removed first.

backend/src/main/java/com/openisle/service/PointService.java

@@ -7,6 +7,10 @@ import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
 
 import java.time.LocalDate;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+import java.util.Map;
 
 @Service
 @RequiredArgsConstructor
@@ -146,6 +150,16 @@ public class PointService {
         return addPoint(poster, 10, PointHistoryType.POST_LIKED, post, null, reactioner);
     }
 
+    public int deductForReactionOfPost(String reactionerName, Long postId) {
+        User poster = postRepository.findById(postId).orElseThrow().getAuthor();
+        User reactioner = userRepository.findByUsername(reactionerName).orElseThrow();
+        if (poster.getId().equals(reactioner.getId())) {
+            return 0;
+        }
+        Post post = postRepository.findById(postId).orElseThrow();
+        return addPoint(poster, -10, PointHistoryType.POST_LIKE_CANCELLED, post, null, reactioner);
+    }
+
     // 考虑点赞者和评论者是同一个的情况
     public int awardForReactionOfComment(String reactionerName, Long commentId) {
         // 根据帖子id找到评论者
@@ -165,6 +179,17 @@ public class PointService {
         return addPoint(commenter, 10, PointHistoryType.COMMENT_LIKED, post, comment, reactioner);
     }
 
+    public int deductForReactionOfComment(String reactionerName, Long commentId) {
+        User commenter = commentRepository.findById(commentId).orElseThrow().getAuthor();
+        User reactioner = userRepository.findByUsername(reactionerName).orElseThrow();
+        if (commenter.getId().equals(reactioner.getId())) {
+            return 0;
+        }
+        Comment comment = commentRepository.findById(commentId).orElseThrow();
+        Post post = comment.getPost();
+        return addPoint(commenter, -10, PointHistoryType.COMMENT_LIKE_CANCELLED, post, comment, reactioner);
+    }
+
     public java.util.List<PointHistory> listHistory(String userName) {
         User user = userRepository.findByUsername(userName).orElseThrow();
         if (pointHistoryRepository.countByUser(user) == 0) {
@@ -173,4 +198,25 @@ public class PointService {
         return pointHistoryRepository.findByUserOrderByIdDesc(user);
     }
 
+    public List<Map<String, Object>> trend(String userName, int days) {
+        if (days < 1) days = 1;
+        User user = userRepository.findByUsername(userName).orElseThrow();
+        LocalDate end = LocalDate.now();
+        LocalDate start = end.minusDays(days - 1L);
+        var histories = pointHistoryRepository.findByUserAndCreatedAtAfterOrderByCreatedAtDesc(
+                user, start.atStartOfDay());
+        int idx = 0;
+        int balance = user.getPoint();
+        List<Map<String, Object>> result = new ArrayList<>();
+        for (LocalDate day = end; !day.isBefore(start); day = day.minusDays(1)) {
+            result.add(Map.of("date", day.toString(), "value", balance));
+            while (idx < histories.size() && histories.get(idx).getCreatedAt().toLocalDate().isEqual(day)) {
+                balance -= histories.get(idx).getAmount();
+                idx++;
+            }
+        }
+        Collections.reverse(result);
+        return result;
+    }
+
 }

backend/src/main/java/com/openisle/service/ReactionService.java

@@ -42,6 +42,7 @@ public class ReactionService {
         java.util.Optional<Reaction> existing =
                 reactionRepository.findByUserAndPostAndType(user, post, type);
         if (existing.isPresent()) {
+            notificationService.deleteReactionNotification(user, post, null, type);
             reactionRepository.delete(existing.get());
             return null;
         }
@@ -65,6 +66,7 @@ public class ReactionService {
         java.util.Optional<Reaction> existing =
                 reactionRepository.findByUserAndCommentAndType(user, comment, type);
         if (existing.isPresent()) {
+            notificationService.deleteReactionNotification(user, null, comment, type);
             reactionRepository.delete(existing.get());
             return null;
         }

backend/src/test/java/com/openisle/controller/PointHistoryControllerTest.java

@@ -0,0 +1,65 @@
+package com.openisle.controller;
+
+import com.openisle.config.CustomAccessDeniedHandler;
+import com.openisle.config.SecurityConfig;
+import com.openisle.service.PointService;
+import com.openisle.mapper.PointHistoryMapper;
+import com.openisle.service.JwtService;
+import com.openisle.repository.UserRepository;
+import com.openisle.model.User;
+import com.openisle.model.Role;
+import org.junit.jupiter.api.Test;
+import org.mockito.Mockito;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
+import org.springframework.boot.test.autoconfigure.web.servlet.WebMvcTest;
+import org.springframework.boot.test.mock.mockito.MockBean;
+import org.springframework.context.annotation.Import;
+import org.springframework.test.web.servlet.MockMvc;
+
+import java.util.List;
+import java.util.Map;
+import java.util.Optional;
+
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+@WebMvcTest(PointHistoryController.class)
+@AutoConfigureMockMvc
+@Import({SecurityConfig.class, CustomAccessDeniedHandler.class})
+class PointHistoryControllerTest {
+    @Autowired
+    private MockMvc mockMvc;
+
+    @MockBean
+    private JwtService jwtService;
+    @MockBean
+    private UserRepository userRepository;
+    @MockBean
+    private PointService pointService;
+    @MockBean
+    private PointHistoryMapper pointHistoryMapper;
+
+    @Test
+    void trendReturnsSeries() throws Exception {
+        Mockito.when(jwtService.validateAndGetSubject("token")).thenReturn("user");
+        User user = new User();
+        user.setUsername("user");
+        user.setPassword("p");
+        user.setEmail("u@example.com");
+        user.setRole(Role.USER);
+        Mockito.when(userRepository.findByUsername("user")).thenReturn(Optional.of(user));
+        List<Map<String, Object>> data = List.of(
+                Map.of("date", java.time.LocalDate.now().minusDays(1).toString(), "value", 100),
+                Map.of("date", java.time.LocalDate.now().toString(), "value", 110)
+        );
+        Mockito.when(pointService.trend(Mockito.eq("user"), Mockito.anyInt())).thenReturn(data);
+
+        mockMvc.perform(get("/api/point-histories/trend").param("days", "2")
+                        .header("Authorization", "Bearer token"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$[0].value").value(100))
+                .andExpect(jsonPath("$[1].value").value(110));
+    }
+}

frontend_nuxt/app.vue

@@ -138,7 +138,7 @@ const goToNewPost = () => {
   height: 60px;
   border-radius: 50%;
   position: fixed;
-  bottom: 40px;
+  bottom: 70px;
   right: 20px;
   font-size: 20px;
   cursor: pointer;

frontend_nuxt/assets/global.css

@@ -18,7 +18,7 @@
   --background-color-blur: rgba(255, 255, 255, 0.57);
   --menu-border-color: lightgray;
   --normal-border-color: lightgray;
-  --menu-selected-background-color: rgba(228, 228, 228, 0.884);
+  --menu-selected-background-color: rgba(242, 242, 242, 0.884);
   --menu-text-color: black;
   --scroller-background-color: rgba(130, 175, 180, 0.5);
   /* --normal-background-color: rgb(241, 241, 241); */
@@ -142,6 +142,7 @@ body {
 .info-content-text video {
   max-width: 100%;
 }
+
 .info-content-text {
   word-break: break-word;
   max-width: 100%;
@@ -161,6 +162,7 @@ body {
   border-radius: 4px;
   line-height: 1.5;
   position: relative;
+  white-space: break-spaces;
 }
 
 .info-content-text pre .line-numbers {
@@ -187,7 +189,6 @@ body {
   font-family: 'Maple Mono', monospace;
   font-size: 13px;
   border-radius: 4px;
-  white-space: break-spaces;
   background-color: var(--code-highlight-background-color);
   color: var(--text-color);
 }

frontend_nuxt/components/AvatarCropper.vue

@@ -2,7 +2,7 @@
   <div v-if="show" class="cropper-modal">
     <div class="cropper-body">
       <div class="cropper-wrapper">
-        <BaseImage ref="image" :src="src" alt="to crop" />
+        <img ref="image" :src="src" alt="to crop" />
       </div>
       <div class="cropper-actions">
         <button class="cropper-btn" @click="$emit('close')">取消</button>

frontend_nuxt/components/BaseImage.vue

@@ -46,7 +46,6 @@ function onError() {
 
 <style scoped>
 .base-image {
-  display: block;
   transition:
     filter 0.35s ease,
     transform 0.35s ease,
@@ -55,12 +54,12 @@ function onError() {
 }
 
 .base-image-ph {
-  filter: blur(10px) saturate(0.85);
-  transform: scale(1.02);
+  filter: blur(20px);
+  transform: scale(0.5);
 }
 
 .base-image.is-loaded {
-  filter: none;
+  /* Allow filters from parent classes (e.g. grayscale for unfinished medals) */
   transform: none;
   opacity: 1;
 }

frontend_nuxt/components/BaseTabs.vue

@@ -1,50 +1,92 @@
 <template>
-  <div class="base-tabs" @touchstart="onTouchStart" @touchend="onTouchEnd">
-    <div
-      v-for="tab in tabs"
-      :key="tab.name"
-      :class="[itemClass, { [activeClass]: tab.name === modelValue }]"
-      @click="emit('update:modelValue', tab.name)"
-    >
-      <slot name="tab" :tab="tab">{{ tab.label }}</slot>
+  <div class="base-tabs">
+    <div class="base-tabs-header">
+      <div class="base-tabs-items">
+        <div
+          v-for="tab in tabs"
+          :key="tab.key"
+          :class="['base-tabs-item', { selected: modelValue === tab.key }]"
+          @click="$emit('update:modelValue', tab.key)"
+        >
+          <i v-if="tab.icon" :class="tab.icon"></i>
+          <div class="base-tabs-item-label">{{ tab.label }}</div>
+        </div>
+      </div>
+      <div class="base-tabs-header-right">
+        <slot name="right"></slot>
+      </div>
+    </div>
+    <div class="base-tabs-content" @touchstart="onTouchStart" @touchend="onTouchEnd">
+      <slot></slot>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-
 const props = defineProps({
-  tabs: { type: Array, required: true },
   modelValue: { type: String, required: true },
-  itemClass: { type: String, default: '' },
-  activeClass: { type: String, default: 'active' },
+  tabs: { type: Array, default: () => [] },
 })
 
 const emit = defineEmits(['update:modelValue'])
 
-const startX = ref(0)
+let touchStartX = 0
 
 function onTouchStart(e) {
-  startX.value = e.changedTouches[0].clientX
+  touchStartX = e.touches[0].clientX
 }
 
 function onTouchEnd(e) {
-  const diff = e.changedTouches[0].clientX - startX.value
-  const threshold = 50
-  if (Math.abs(diff) > threshold) {
-    const currentIndex = props.tabs.findIndex((t) => t.name === props.modelValue)
-    if (currentIndex === -1) return
-    const newIndex = currentIndex + (diff < 0 ? 1 : -1)
-    if (newIndex >= 0 && newIndex < props.tabs.length) {
-      emit('update:modelValue', props.tabs[newIndex].name)
+  const diffX = e.changedTouches[0].clientX - touchStartX
+  if (Math.abs(diffX) > 50) {
+    const index = props.tabs.findIndex((t) => t.key === props.modelValue)
+    if (diffX < 0 && index < props.tabs.length - 1) {
+      emit('update:modelValue', props.tabs[index + 1].key)
+    } else if (diffX > 0 && index > 0) {
+      emit('update:modelValue', props.tabs[index - 1].key)
     }
   }
 }
 </script>
 
 <style scoped>
-.base-tabs {
+.base-tabs-header {
   display: flex;
+  border-bottom: 1px solid var(--normal-border-color);
+  align-items: center;
+  flex-direction: row;
+}
+
+.base-tabs-items {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  flex: 1;
+}
+
+.base-tabs-item {
+  padding: 10px 20px;
+  cursor: pointer;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.base-tabs-item i {
+  margin-right: 6px;
+}
+
+.base-tabs-item.selected {
+  color: var(--primary-color);
+  border-bottom: 2px solid var(--primary-color);
+}
+
+.base-tabs-header-right {
+  display: flex;
+  flex-shrink: 0;
+}
+
+.base-tabs-content {
+  width: 100%;
 }
 </style>

frontend_nuxt/components/HeaderComponent.vue

@@ -63,7 +63,7 @@
           <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
             <template #trigger>
               <div class="avatar-container">
-                <BaseImage class="avatar-img" :src="avatar" alt="avatar" />
+                <img class="avatar-img" :src="avatar" alt="avatar" />
                 <i class="fas fa-caret-down dropdown-icon"></i>
               </div>
             </template>

frontend_nuxt/components/MessageFloatWindow.vue

@@ -16,6 +16,7 @@
         @click="reboundToDefault"
       ></i>
       <i class="fas fa-expand" title="在页面中打开" @click="expand"></i>
+      <i class="fas fa-times" title="关闭" @click="close"></i>
     </div>
   </div>
 </template>
@@ -48,6 +49,10 @@ function expand() {
   navigateTo(target)
 }
 
+function close() {
+  floatRoute.value = null
+}
+
 function injectBaseTag() {
   if (!iframeRef.value) return
 

frontend_nuxt/nuxt.config.ts

@@ -88,24 +88,24 @@ export default defineNuxtConfig({
   vite: {
     build: {
       // increase warning limit and split large libraries into separate chunks
-      chunkSizeWarningLimit: 1024,
-      rollupOptions: {
-        output: {
-          manualChunks(id) {
-            if (id.includes('node_modules')) {
-              if (id.includes('vditor')) {
-                return 'vditor'
-              }
-              if (id.includes('echarts')) {
-                return 'echarts'
-              }
-              if (id.includes('highlight.js')) {
-                return 'highlight'
-              }
-            }
-          },
-        },
-      },
+      // chunkSizeWarningLimit: 1024,
+      // rollupOptions: {
+      //   output: {
+      //     manualChunks(id) {
+      //       if (id.includes('node_modules')) {
+      //         if (id.includes('vditor')) {
+      //           return 'vditor'
+      //         }
+      //         if (id.includes('echarts')) {
+      //           return 'echarts'
+      //         }
+      //         if (id.includes('highlight.js')) {
+      //           return 'highlight'
+      //         }
+      //       }
+      //     },
+      //   },
+      // },
     },
   },
 })

frontend_nuxt/package.json

@@ -17,6 +17,7 @@
     "highlight.js": "^11.11.1",
     "ldrs": "^1.0.0",
     "markdown-it": "^14.1.0",
+    "mermaid": "^10.9.4",
     "nprogress": "^0.2.0",
     "nuxt": "latest",
     "sanitize-html": "^2.17.0",

frontend_nuxt/pages/about/index.vue

@@ -1,61 +1,51 @@
 <template>
   <div class="about-page">
-    <BaseTabs
-      v-model="selectedTab"
-      :tabs="tabs"
-      class="about-tabs"
-      item-class="about-tabs-item"
-      active-class="selected"
-    >
-      <template #tab="{ tab }">
-        <div class="about-tabs-item-label">{{ tab.label }}</div>
-      </template>
+    <BaseTabs v-model="selectedTab" :tabs="tabs">
+      <div class="about-loading" v-if="isFetching">
+        <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
+      </div>
+      <div
+        v-else
+        class="about-content"
+        v-html="renderMarkdown(content)"
+        @click="handleContentClick"
+      ></div>
     </BaseTabs>
-    <div class="about-loading" v-if="isFetching">
-      <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
-    </div>
-    <div
-      v-else
-      class="about-content"
-      v-html="renderMarkdown(content)"
-      @click="handleContentClick"
-    ></div>
   </div>
 </template>
 
 <script>
-import { ref, watch } from 'vue'
-import BaseTabs from '~/components/BaseTabs.vue'
+import { onMounted, ref, watch } from 'vue'
 import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
+import BaseTabs from '~/components/BaseTabs.vue'
 
 export default {
   name: 'AboutPageView',
-  components: { BaseTabs },
   setup() {
     const isFetching = ref(false)
     const tabs = [
       {
-        name: 'about',
+        key: 'about',
         label: '关于',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/about.md',
       },
       {
-        name: 'agreement',
+        key: 'agreement',
         label: '用户协议',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/agreement.md',
       },
       {
-        name: 'guideline',
+        key: 'guideline',
         label: '创作准则',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/guideline.md',
       },
       {
-        name: 'privacy',
+        key: 'privacy',
         label: '隐私政策',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/privacy.md',
       },
     ]
-    const selectedTab = ref(tabs[0].name)
+    const selectedTab = ref(tabs[0].key)
     const content = ref('')
 
     const loadContent = async (file) => {
@@ -74,14 +64,14 @@ export default {
       }
     }
 
-    watch(
-      selectedTab,
-      (name) => {
-        const tab = tabs.find((t) => t.name === name)
-        if (tab) loadContent(tab.file)
-      },
-      { immediate: true },
-    )
+    onMounted(() => {
+      loadContent(tabs[0].file)
+    })
+
+    watch(selectedTab, (name) => {
+      const tab = tabs.find((t) => t.key === name)
+      if (tab) loadContent(tab.file)
+    })
 
     const handleContentClick = (e) => {
       handleMarkdownClick(e)
@@ -99,28 +89,6 @@ export default {
   margin: 0 auto;
 }
 
-.about-tabs {
-  top: calc(var(--header-height) + 1px);
-  background-color: var(--background-color-blur);
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid var(--normal-border-color);
-  margin-bottom: 20px;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.about-tabs-item {
-  padding: 10px 20px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.about-tabs-item.selected {
-  color: var(--primary-color);
-  border-bottom: 2px solid var(--primary-color);
-}
-
 .about-content {
   line-height: 1.6;
   padding: 20px;

frontend_nuxt/pages/about/stats.vue

@@ -33,23 +33,11 @@
 </template>
 
 <script setup>
-import { LineChart } from 'echarts/charts'
-import {
-  DataZoomComponent,
-  GridComponent,
-  TitleComponent,
-  TooltipComponent,
-} from 'echarts/components'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
 import { onMounted, ref } from 'vue'
-import VChart from 'vue-echarts'
 import { getToken } from '~/utils/auth'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
-use([LineChart, TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, CanvasRenderer])
-
 const dauOption = ref(null)
 const newUserOption = ref(null)
 const postOption = ref(null)

frontend_nuxt/pages/login.vue

@@ -36,35 +36,19 @@
 
     <div class="other-login-page-content">
       <div class="login-page-button" @click="loginWithGoogle">
-        <BaseImage
-          class="login-page-button-icon"
-          src="../assets/icons/google.svg"
-          alt="Google Logo"
-        />
+        <img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
         <div class="login-page-button-text">Google 登录</div>
       </div>
       <div class="login-page-button" @click="loginWithGithub">
-        <BaseImage
-          class="login-page-button-icon"
-          src="../assets/icons/github.svg"
-          alt="GitHub Logo"
-        />
+        <img class="login-page-button-icon" src="../assets/icons/github.svg" alt="GitHub Logo" />
         <div class="login-page-button-text">GitHub 登录</div>
       </div>
       <div class="login-page-button" @click="loginWithDiscord">
-        <BaseImage
-          class="login-page-button-icon"
-          src="../assets/icons/discord.svg"
-          alt="Discord Logo"
-        />
+        <img class="login-page-button-icon" src="../assets/icons/discord.svg" alt="Discord Logo" />
         <div class="login-page-button-text">Discord 登录</div>
       </div>
       <div class="login-page-button" @click="loginWithTwitter">
-        <BaseImage
-          class="login-page-button-icon"
-          src="../assets/icons/twitter.svg"
-          alt="Twitter Logo"
-        />
+        <img class="login-page-button-icon" src="../assets/icons/twitter.svg" alt="Twitter Logo" />
         <div class="login-page-button-text">Twitter 登录</div>
       </div>
     </div>

frontend_nuxt/pages/message-box/[id].vue

@@ -113,17 +113,23 @@ const error = ref(null)
 const conversationId = route.params.id
 const currentUser = ref(null)
 const messagesListEl = ref(null)
-let lastMessageEl = null
 const currentPage = ref(0)
 const totalPages = ref(0)
 const loadingMore = ref(false)
-let scrollInterval = null
 const conversationName = ref('')
 const isChannel = ref(false)
 const isFloatMode = computed(() => route.query.float !== undefined)
 const floatRoute = useState('messageFloatRoute')
 const replyTo = ref(null)
 
+const isUserNearBottom = ref(true)
+function updateNearBottom() {
+  const el = messagesListEl.value
+  if (!el) return
+  const threshold = 40 // px
+  isUserNearBottom.value = el.scrollHeight - el.scrollTop - el.clientHeight <= threshold
+}
+
 const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
 
 const otherParticipant = computed(() => {
@@ -133,20 +139,37 @@ const otherParticipant = computed(() => {
   return participants.value.find((p) => p.id !== currentUser.value.id)
 })
 
-function isSentByCurrentUser(message) {
-  return message.sender.id === currentUser.value?.id
-}
-
-function handleAvatarError(event) {
-  event.target.src = '/default-avatar.svg'
-}
-
 function setReply(message) {
   replyTo.value = message
 }
 
-// No changes needed here, as renderMarkdown is now imported.
-// The old function is removed.
+/** 改造：滚动函数 —— smooth & instant */
+function scrollToBottomSmooth() {
+  const el = messagesListEl.value
+  if (!el) return
+  // 优先使用原生 smooth，失败则降级
+  try {
+    el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })
+  } catch {
+    // 降级：简易动画
+    const start = el.scrollTop
+    const end = el.scrollHeight
+    const duration = 200
+    const startTs = performance.now()
+    function step(now) {
+      const p = Math.min(1, (now - startTs) / duration)
+      el.scrollTop = start + (end - start) * p
+      if (p < 1) requestAnimationFrame(step)
+    }
+    requestAnimationFrame(step)
+  }
+}
+
+function scrollToBottomInstant() {
+  const el = messagesListEl.value
+  if (!el) return
+  el.scrollTop = el.scrollHeight
+}
 
 async function fetchMessages(page = 0) {
   if (page === 0) {
@@ -181,7 +204,6 @@ async function fetchMessages(page = 0) {
       isChannel.value = conversationData.channel
     }
 
-    // Since the backend sorts by descending, we need to reverse for correct chat order
     const newMessages = pageData.content.reverse().map((item) => ({
       ...item,
       src: item.sender.avatar,
@@ -202,12 +224,16 @@ async function fetchMessages(page = 0) {
     currentPage.value = pageData.number
     totalPages.value = pageData.totalPages
 
-    // Scrolling is now fully handled by the watcher
     await nextTick()
     if (page > 0 && list) {
+      // 加载更多：保持原视口位置
       const newScrollHeight = list.scrollHeight
       list.scrollTop = newScrollHeight - oldScrollHeight
+    } else if (page === 0) {
+      // 首次加载：定位到底部（不用动画，避免“闪动感”）
+      scrollToBottomInstant()
     }
+    updateNearBottom()
   } catch (e) {
     error.value = e.message
     toast.error(e.message)
@@ -272,9 +298,10 @@ async function sendMessage(content, clearInput) {
     })
     clearInput()
     replyTo.value = null
-    setTimeout(() => {
-      scrollToBottom()
-    }, 100)
+
+    await nextTick()
+    // 仅“发送消息成功后”才平滑滚动到底部
+    scrollToBottomSmooth()
   } catch (e) {
     toast.error(e.message)
   } finally {
@@ -290,7 +317,6 @@ async function markConversationAsRead() {
       method: 'POST',
       headers: { Authorization: `Bearer ${token}` },
     })
-    // After marking as read, refresh the global unread count
     refreshGlobalUnreadCount()
     refreshChannelUnread()
   } catch (e) {
@@ -298,37 +324,12 @@ async function markConversationAsRead() {
   }
 }
 
-function scrollToBottom() {
-  if (messagesListEl.value) {
-    const element = messagesListEl.value
-    // 強制滾動到底部，使用 smooth 行為確保視覺效果
-    element.scrollTop = element.scrollHeight
-
-    // 再次確認滾動位置
-    setTimeout(() => {
-      if (element.scrollTop < element.scrollHeight - element.clientHeight) {
-        element.scrollTop = element.scrollHeight
-      }
-    }, 50)
-  }
-}
-
-watch(
-  messages,
-  async (newMessages) => {
-    if (newMessages.length === 0) return
-
-    await nextTick()
-
-    // Simple, reliable scroll to bottom
-    setTimeout(() => {
-      scrollToBottom()
-    }, 100)
-  },
-  { deep: true },
-)
-
 onMounted(async () => {
+  // 监听列表滚动，实时感知是否接近底部
+  if (messagesListEl.value) {
+    messagesListEl.value.addEventListener('scroll', updateNearBottom, { passive: true })
+  }
+
   currentUser.value = await fetchCurrentUser()
   if (currentUser.value) {
     await fetchMessages(0)
@@ -345,9 +346,8 @@ onMounted(async () => {
 
 watch(isConnected, (newValue) => {
   if (newValue) {
-    // 等待一小段时间确保连接稳定
     setTimeout(() => {
-      subscription = subscribe(`/topic/conversation/${conversationId}`, (message) => {
+      subscription = subscribe(`/topic/conversation/${conversationId}`, async (message) => {
         // 避免重复显示当前用户发送的消息
         if (message.sender.id !== currentUser.value.id) {
           messages.value.push({
@@ -357,11 +357,10 @@ watch(isConnected, (newValue) => {
               openUser(message.sender.id)
             },
           })
-          // 实时收到消息时自动标记为已读
+          // 收到消息后只标记已读，不强制滚动（符合“非发送不拉底”）
           markConversationAsRead()
-          setTimeout(() => {
-            scrollToBottom()
-          }, 100)
+          await nextTick()
+          updateNearBottom()
         }
       })
     }, 500)
@@ -369,23 +368,12 @@ watch(isConnected, (newValue) => {
 })
 
 onActivated(async () => {
-  // This will be called every time the component is activated (navigated to)
+  // 返回页面时：刷新数据与已读，不做强制滚动，保持用户当前位置
   if (currentUser.value) {
     await fetchMessages(0)
     await markConversationAsRead()
-
-    // 確保滾動到底部 - 使用多重延遲策略
     await nextTick()
-    setTimeout(() => {
-      scrollToBottom()
-    }, 100)
-    setTimeout(() => {
-      scrollToBottom()
-    }, 300)
-    setTimeout(() => {
-      scrollToBottom()
-    }, 500)
-
+    updateNearBottom()
     if (!isConnected.value) {
       const token = getToken()
       if (token) connect(token)
@@ -406,6 +394,9 @@ onUnmounted(() => {
     subscription.unsubscribe()
     subscription = null
   }
+  if (messagesListEl.value) {
+    messagesListEl.value.removeEventListener('scroll', updateNearBottom)
+  }
   disconnect()
 })
 
@@ -492,6 +483,7 @@ function goBack() {
 
 .messages-list {
   overflow-y: auto;
+  overflow-x: hidden;
   padding: 20px;
   padding-bottom: 100px;
   display: flex;
@@ -597,6 +589,7 @@ function goBack() {
 }
 
 .reply-preview {
+  margin-top: 10px;
   padding: 10px;
   border-left: 5px solid var(--primary-color);
   margin-bottom: 5px;

frontend_nuxt/pages/message-box/index.vue

@@ -7,115 +7,113 @@
     <div v-if="!isFloatMode" class="float-control">
       <i class="fas fa-compress" @click="minimize" title="最小化"></i>
     </div>
-    <BaseTabs
-      v-model="activeTab"
-      :tabs="tabs"
-      class="tabs"
-      item-class="tab"
-      active-class="active"
-    />
-
-    <div v-if="activeTab === 'messages'">
-      <div v-if="loading" class="loading-message">
-        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-      </div>
-
-      <div v-else-if="error" class="error-container">
-        <div class="error-text">{{ error }}</div>
-      </div>
-
-      <div v-if="!loading && !isFloatMode" class="search-container">
-        <SearchPersonDropdown />
-      </div>
-
-      <div v-if="!loading && conversations.length === 0" class="empty-container">
-        <BasePlaceholder v-if="conversations.length === 0" text="暂无会话" icon="fas fa-inbox" />
-      </div>
-
-      <div
-        v-if="!loading"
-        v-for="convo in conversations"
-        :key="convo.id"
-        class="conversation-item"
-        @click="goToConversation(convo.id)"
-      >
-        <div class="conversation-avatar">
-          <BaseImage
-            :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
-            :alt="getOtherParticipant(convo)?.username || '用户'"
-            class="avatar-img"
-            @error="handleAvatarError"
-          />
+    <BaseTabs v-model="activeTab" :tabs="tabs">
+      <div v-if="activeTab === 'messages'">
+        <div v-if="loading" class="loading-message">
+          <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
         </div>
 
-        <div class="conversation-content">
-          <div class="conversation-header">
-            <div class="participant-name">
-              {{ getOtherParticipant(convo)?.username || '未知用户' }}
-            </div>
-            <div class="message-time">
-              {{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
-            </div>
-          </div>
-
-          <div class="last-message-row">
-            <div class="last-message">
-              {{
-                convo.lastMessage ? stripMarkdownLength(convo.lastMessage.content, 100) : '暂无消息'
-              }}
-            </div>
-            <div v-if="convo.unreadCount > 0" class="unread-count-badge">
-              {{ convo.unreadCount }}
-            </div>
-          </div>
+        <div v-else-if="error" class="error-container">
+          <div class="error-text">{{ error }}</div>
         </div>
-      </div>
-    </div>
 
-    <div v-else>
-      <div v-if="loadingChannels" class="loading-message">
-        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-      </div>
-      <div v-else>
-        <div v-if="channels.length === 0" class="empty-container">
-          <BasePlaceholder text="暂无频道" icon="fas fa-inbox" />
+        <div v-if="!loading && !isFloatMode" class="search-container">
+          <SearchPersonDropdown />
         </div>
+
+        <div v-if="!loading && conversations.length === 0" class="empty-container">
+          <BasePlaceholder v-if="conversations.length === 0" text="暂无会话" icon="fas fa-inbox" />
+        </div>
+
         <div
-          v-for="ch in channels"
-          :key="ch.id"
+          v-if="!loading"
+          v-for="convo in conversations"
+          :key="convo.id"
           class="conversation-item"
-          @click="goToChannel(ch.id)"
+          @click="goToConversation(convo.id)"
         >
           <div class="conversation-avatar">
             <BaseImage
-              :src="ch.avatar || '/default-avatar.svg'"
-              :alt="ch.name"
+              :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
+              :alt="getOtherParticipant(convo)?.username || '用户'"
               class="avatar-img"
               @error="handleAvatarError"
             />
           </div>
+
           <div class="conversation-content">
             <div class="conversation-header">
               <div class="participant-name">
-                {{ ch.name }}
-                <span v-if="ch.unreadCount > 0" class="unread-dot"></span>
+                {{ getOtherParticipant(convo)?.username || '未知用户' }}
               </div>
               <div class="message-time">
-                {{ formatTime(ch.lastMessage?.createdAt || ch.createdAt) }}
+                {{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
               </div>
             </div>
+
             <div class="last-message-row">
               <div class="last-message">
                 {{
-                  ch.lastMessage ? stripMarkdownLength(ch.lastMessage.content, 100) : ch.description
+                  convo.lastMessage
+                    ? stripMarkdownLength(convo.lastMessage.content, 100)
+                    : '暂无消息'
                 }}
               </div>
-              <div class="member-count">成员 {{ ch.memberCount }}</div>
+              <div v-if="convo.unreadCount > 0" class="unread-count-badge">
+                {{ convo.unreadCount }}
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+
+      <div v-else>
+        <div v-if="loadingChannels" class="loading-message">
+          <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+        </div>
+        <div v-else>
+          <div v-if="channels.length === 0" class="empty-container">
+            <BasePlaceholder text="暂无频道" icon="fas fa-inbox" />
+          </div>
+          <div
+            v-for="ch in channels"
+            :key="ch.id"
+            class="conversation-item"
+            @click="goToChannel(ch.id)"
+          >
+            <div class="conversation-avatar">
+              <BaseImage
+                :src="ch.avatar || '/default-avatar.svg'"
+                :alt="ch.name"
+                class="avatar-img"
+                @error="handleAvatarError"
+              />
+            </div>
+            <div class="conversation-content">
+              <div class="conversation-header">
+                <div class="participant-name">
+                  {{ ch.name }}
+                  <span v-if="ch.unreadCount > 0" class="unread-dot"></span>
+                </div>
+                <div class="message-time">
+                  {{ formatTime(ch.lastMessage?.createdAt || ch.createdAt) }}
+                </div>
+              </div>
+              <div class="last-message-row">
+                <div class="last-message">
+                  {{
+                    ch.lastMessage
+                      ? stripMarkdownLength(ch.lastMessage.content, 100)
+                      : ch.description
+                  }}
+                </div>
+                <div class="member-count">成员 {{ ch.memberCount }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </BaseTabs>
   </div>
 </template>
 
@@ -146,24 +144,17 @@ const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
 const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadFromList } =
   useChannelsUnreadCount()
 let subscription = null
-const tabs = [
-  { name: 'messages', label: '站内信' },
-  { name: 'channels', label: '频道' },
-]
+
 const activeTab = ref('channels')
+const tabs = [
+  { key: 'messages', label: '站内信' },
+  { key: 'channels', label: '频道' },
+]
 const channels = ref([])
 const loadingChannels = ref(false)
 const isFloatMode = computed(() => route.query.float === '1')
 const floatRoute = useState('messageFloatRoute')
 
-watch(activeTab, (tab) => {
-  if (tab === 'messages') {
-    fetchConversations()
-  } else {
-    fetchChannels()
-  }
-})
-
 async function fetchConversations() {
   const token = getToken()
   if (!token) {
@@ -227,6 +218,14 @@ async function fetchChannels() {
   }
 }
 
+watch(activeTab, (tab) => {
+  if (tab === 'messages') {
+    fetchConversations()
+  } else {
+    fetchChannels()
+  }
+})
+
 async function goToChannel(id) {
   const token = getToken()
   if (!token) {
@@ -324,18 +323,18 @@ function minimize() {
   cursor: pointer;
 }
 
-.tabs {
+:deep(.base-tabs-header) {
   display: flex;
   border-bottom: 1px solid var(--normal-border-color);
   margin-bottom: 16px;
 }
 
-.tab {
+:deep(.base-tabs-item) {
   padding: 10px 20px;
   cursor: pointer;
 }
 
-.tab.active {
+:deep(.base-tabs-item.selected) {
   border-bottom: 2px solid var(--primary-color);
   color: var(--primary-color);
 }
@@ -501,7 +500,7 @@ function minimize() {
     display: block;
   }
 
-  .tabs,
+  :deep(.base-tabs-header),
   .loading-message,
   .error-container,
   .search-container,

frontend_nuxt/pages/points.vue

@@ -1,170 +1,202 @@
 <template>
   <div class="point-mall-page">
-    <BaseTabs
-      v-model="selectedTab"
-      :tabs="pointTabs"
-      class="point-tabs"
-      item-class="point-tab-item"
-      active-class="selected"
-    />
+    <BaseTabs v-model="selectedTab" :tabs="tabs">
+      <template v-if="selectedTab === 'mall'">
+        <div class="point-mall-page-content">
+          <section class="rules">
+            <div class="section-title">🎉 积分规则</div>
+            <div class="section-content">
+              <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">
+                {{ rule }}
+              </div>
+            </div>
+          </section>
 
-    <template v-if="selectedTab === 'mall'">
-      <div class="point-mall-page-content">
-        <section class="rules">
-          <div class="section-title">🎉 积分规则</div>
-          <div class="section-content">
-            <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">{{ rule }}</div>
+          <section class="trend" v-if="trendOption">
+            <div class="section-title">积分走势</div>
+            <ClientOnly>
+              <VChart :option="trendOption" :autoresize="true" style="height: 300px" />
+            </ClientOnly>
+          </section>
+
+          <div class="loading-points-container" v-if="isLoading">
+            <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
           </div>
-        </section>
 
-        <div class="loading-points-container" v-if="isLoading">
+          <div class="point-info">
+            <p v-if="authState.loggedIn && point !== null">
+              <span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
+                class="point-value"
+                >{{ point }}</span
+              >
+            </p>
+          </div>
+
+          <section class="goods">
+            <div class="goods-item" v-for="(good, idx) in goods" :key="idx">
+              <BaseImage class="goods-item-image" :src="good.image" alt="good.name" />
+              <div class="goods-item-name">{{ good.name }}</div>
+              <div class="goods-item-cost">
+                <i class="fas fa-coins"></i>
+                {{ good.cost }} 积分
+              </div>
+              <div
+                class="goods-item-button"
+                :class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
+                @click="openRedeem(good)"
+              >
+                兑换
+              </div>
+            </div>
+          </section>
+          <RedeemPopup
+            :visible="dialogVisible"
+            v-model="contact"
+            :loading="loading"
+            @close="closeRedeem"
+            @submit="submitRedeem"
+          />
+        </div>
+      </template>
+
+      <template v-else>
+        <div class="loading-points-container" v-if="historyLoading">
           <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
         </div>
-
-        <div class="point-info">
-          <p v-if="authState.loggedIn && point !== null">
-            <span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
-              class="point-value"
-              >{{ point }}</span
-            >
-          </p>
-        </div>
-
-        <section class="goods">
-          <div class="goods-item" v-for="(good, idx) in goods" :key="idx">
-            <BaseImage class="goods-item-image" :src="good.image" alt="good.name" />
-            <div class="goods-item-name">{{ good.name }}</div>
-            <div class="goods-item-cost">
-              <i class="fas fa-coins"></i>
-              {{ good.cost }} 积分
-            </div>
-            <div
-              class="goods-item-button"
-              :class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
-              @click="openRedeem(good)"
-            >
-              兑换
-            </div>
-          </div>
-        </section>
-        <RedeemPopup
-          :visible="dialogVisible"
-          v-model="contact"
-          :loading="loading"
-          @close="closeRedeem"
-          @submit="submitRedeem"
+        <BasePlaceholder
+          v-else-if="histories.length === 0"
+          text="暂无积分记录"
+          icon="fas fa-inbox"
         />
-      </div>
-    </template>
-
-    <template v-else>
-      <div class="loading-points-container" v-if="historyLoading">
-        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-      </div>
-      <BasePlaceholder v-else-if="histories.length === 0" text="暂无积分记录" icon="fas fa-inbox" />
-      <div class="timeline-container" v-else>
-        <BaseTimeline :items="histories">
-          <template #item="{ item }">
-            <div class="history-content">
-              <template v-if="item.type === 'POST'">
-                发送帖子
-                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                  item.postTitle
-                }}</NuxtLink>
-                ，获得{{ item.amount }}积分
-              </template>
-              <template v-else-if="item.type === 'COMMENT'">
-                在文章
-                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                  item.postTitle
-                }}</NuxtLink>
-                中
-                <template v-if="!item.fromUserId">
-                  发送评论
+        <div class="timeline-container" v-else>
+          <BaseTimeline :items="histories">
+            <template #item="{ item }">
+              <div class="history-content">
+                <template v-if="item.type === 'POST'">
+                  发送帖子
+                  <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                    item.postTitle
+                  }}</NuxtLink>
+                  ，获得{{ item.amount }}积分
+                </template>
+                <template v-else-if="item.type === 'COMMENT'">
+                  在文章
+                  <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                    item.postTitle
+                  }}</NuxtLink>
+                  中
+                  <template v-if="!item.fromUserId">
+                    发送评论
+                    <NuxtLink
+                      :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                      class="timeline-link"
+                      >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
+                    >
+                    ，获得{{ item.amount }}积分
+                  </template>
+                  <template v-else>
+                    被评论
+                    <NuxtLink
+                      :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                      class="timeline-link"
+                      >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
+                    >
+                    ，获得{{ item.amount }}积分
+                  </template>
+                </template>
+                <template v-else-if="item.type === 'POST_LIKE_CANCELLED' && item.fromUserId">
+                  你的帖子
+                  <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 === 'COMMENT_LIKE_CANCELLED' && item.fromUserId">
+                  你的评论
+                  <NuxtLink
+                    :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                    class="timeline-link"
+                  >
+                    {{ stripMarkdownLength(item.commentContent, 100) }}
+                  </NuxtLink>
+                  被
+                  <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">
+                    {{ item.fromUserName }}
+                  </NuxtLink>
+                  取消点赞，扣除{{ -item.amount }}积分
+                </template>
+                <template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
+                  帖子
+                  <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 === 'COMMENT_LIKED' && item.fromUserId">
+                  评论
                   <NuxtLink
                     :to="`/posts/${item.postId}#comment-${item.commentId}`"
                     class="timeline-link"
                     >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
                   >
-                  ，获得{{ item.amount }}积分
+                  被
+                  <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                    item.fromUserName
+                  }}</NuxtLink>
+                  按赞，获得{{ item.amount }}积分
                 </template>
-                <template v-else>
-                  被评论
-                  <NuxtLink
-                    :to="`/posts/${item.postId}#comment-${item.commentId}`"
-                    class="timeline-link"
-                    >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
-                  >
-                  ，获得{{ item.amount }}积分
+                <template v-else-if="item.type === 'INVITE' && item.fromUserId">
+                  邀请了好友
+                  <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                    item.fromUserName
+                  }}</NuxtLink>
+                  加入社区 🎉，获得 {{ item.amount }} 积分
                 </template>
-              </template>
-              <template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
-                帖子
-                <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 === 'COMMENT_LIKED' && item.fromUserId">
-                评论
-                <NuxtLink
-                  :to="`/posts/${item.postId}#comment-${item.commentId}`"
-                  class="timeline-link"
-                  >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
-                >
-                被
-                <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
-                  item.fromUserName
-                }}</NuxtLink>
-                按赞，获得{{ item.amount }}积分
-              </template>
-              <template v-else-if="item.type === 'INVITE' && item.fromUserId">
-                邀请了好友
-                <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
-                  item.fromUserName
-                }}</NuxtLink>
-                加入社区 🎉，获得 {{ item.amount }} 积分
-              </template>
-              <template v-else-if="item.type === 'FEATURE'">
-                文章
-                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                  item.postTitle
-                }}</NuxtLink>
-                被收录为精选，获得 {{ item.amount }} 积分
-              </template>
-              <template v-else-if="item.type === 'REDEEM'">
-                兑换商品，消耗 {{ -item.amount }} 积分
-              </template>
-              <template v-else-if="item.type === 'LOTTERY_JOIN'">
-                参与抽奖帖
-                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                  item.postTitle
-                }}</NuxtLink>
-                ，消耗 {{ -item.amount }} 积分
-              </template>
-              <template v-else-if="item.type === 'LOTTERY_REWARD'">
-                你的抽奖帖
-                <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 === 'SYSTEM_ONLINE'"> 积分历史系统上线 </template>
-              <i class="fas fa-coins"></i> 你目前的积分是 {{ item.balance }}
-            </div>
-            <div class="history-time">{{ TimeManager.format(item.createdAt) }}</div>
-          </template>
-        </BaseTimeline>
-      </div>
-    </template>
+                <template v-else-if="item.type === 'FEATURE'">
+                  文章
+                  <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                    item.postTitle
+                  }}</NuxtLink>
+                  被收录为精选，获得 {{ item.amount }} 积分
+                </template>
+                <template v-else-if="item.type === 'REDEEM'">
+                  兑换商品，消耗 {{ -item.amount }} 积分
+                </template>
+                <template v-else-if="item.type === 'LOTTERY_JOIN'">
+                  参与抽奖帖
+                  <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                    item.postTitle
+                  }}</NuxtLink>
+                  ，消耗 {{ -item.amount }} 积分
+                </template>
+                <template v-else-if="item.type === 'LOTTERY_REWARD'">
+                  你的抽奖帖
+                  <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 === 'SYSTEM_ONLINE'"> 积分历史系统上线 </template>
+                <i class="fas fa-coins"></i> 你目前的积分是 {{ item.balance }}
+              </div>
+              <div class="history-time">{{ TimeManager.format(item.createdAt) }}</div>
+            </template>
+          </BaseTimeline>
+        </div>
+      </template>
+    </BaseTabs>
   </div>
 </template>
 
@@ -181,16 +213,18 @@ import BaseTabs from '~/components/BaseTabs.vue'
 
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
-const pointTabs = [
-  { name: 'mall', label: '积分兑换' },
-  { name: 'history', label: '积分历史' },
-]
+
 const selectedTab = ref('mall')
+const tabs = [
+  { key: 'mall', label: '积分兑换' },
+  { key: 'history', label: '积分历史' },
+]
 const point = ref(null)
 const isLoading = ref(false)
 const histories = ref([])
 const historyLoading = ref(false)
 const historyLoaded = ref(false)
+const trendOption = ref(null)
 
 const pointRules = [
   '发帖：每天前两次，每次 30 积分',
@@ -218,6 +252,28 @@ const iconMap = {
   FEATURE: 'fas fa-star',
   LOTTERY_JOIN: 'fas fa-ticket-alt',
   LOTTERY_REWARD: 'fas fa-ticket-alt',
+  POST_LIKE_CANCELLED: 'fas fa-thumbs-down',
+  COMMENT_LIKE_CANCELLED: 'fas fa-thumbs-down',
+}
+
+const loadTrend = async () => {
+  if (!authState.loggedIn) return
+  const token = getToken()
+  const res = await fetch(`${API_BASE_URL}/api/point-histories/trend?days=30`, {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    const data = await res.json()
+    const dates = data.map((d) => d.date)
+    const values = data.map((d) => d.value)
+    trendOption.value = {
+      tooltip: { trigger: 'axis' },
+      xAxis: { type: 'category', data: dates, boundaryGap: false },
+      yAxis: { type: 'value' },
+      series: [{ type: 'line', areaStyle: {}, smooth: true, data: values }],
+      dataZoom: [{ type: 'slider', start: 80 }, { type: 'inside' }],
+    }
+  }
 }
 
 onMounted(async () => {
@@ -225,8 +281,10 @@ onMounted(async () => {
   if (authState.loggedIn) {
     const user = await fetchCurrentUser()
     point.value = user ? user.point : null
+    await Promise.all([loadGoods(), loadTrend()])
+  } else {
+    await loadGoods()
   }
-  await loadGoods()
   isLoading.value = false
 })
 
@@ -312,17 +370,17 @@ const submitRedeem = async () => {
   padding: 0 20px;
 }
 
-.point-tabs {
+:deep(.base-tabs-header) {
   display: flex;
   border-bottom: 1px solid var(--normal-border-color);
 }
 
-.point-tab-item {
+:deep(.base-tabs-item) {
   padding: 10px 15px;
   cursor: pointer;
 }
 
-.point-tab-item.selected {
+:deep(.base-tabs-item.selected) {
   border-bottom: 2px solid var(--primary-color);
   color: var(--primary-color);
 }
@@ -362,7 +420,8 @@ const submitRedeem = async () => {
 }
 
 .rules,
-.goods {
+.goods,
+.trend {
   margin-top: 20px;
 }
 

frontend_nuxt/pages/posts/[id]/index.vue

@@ -1225,7 +1225,6 @@ onMounted(async () => {
 .info-content-text {
   font-size: 16px;
   line-height: 1.5;
-  width: 100%;
 }
 
 .article-footer-container {

frontend_nuxt/pages/signup.vue

@@ -70,35 +70,19 @@
 
     <div class="other-signup-page-content">
       <div class="signup-page-button" @click="signupWithGoogle">
-        <BaseImage
-          class="signup-page-button-icon"
-          src="~/assets/icons/google.svg"
-          alt="Google Logo"
-        />
+        <img class="signup-page-button-icon" src="~/assets/icons/google.svg" alt="Google Logo" />
         <div class="signup-page-button-text">Google 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithGithub">
-        <BaseImage
-          class="signup-page-button-icon"
-          src="~/assets/icons/github.svg"
-          alt="GitHub Logo"
-        />
+        <img class="signup-page-button-icon" src="~/assets/icons/github.svg" alt="GitHub Logo" />
         <div class="signup-page-button-text">GitHub 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithDiscord">
-        <BaseImage
-          class="signup-page-button-icon"
-          src="~/assets/icons/discord.svg"
-          alt="Discord Logo"
-        />
+        <img class="signup-page-button-icon" src="~/assets/icons/discord.svg" alt="Discord Logo" />
         <div class="signup-page-button-text">Discord 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithTwitter">
-        <BaseImage
-          class="signup-page-button-icon"
-          src="~/assets/icons/twitter.svg"
-          alt="Twitter Logo"
-        />
+        <img class="signup-page-button-icon" src="~/assets/icons/twitter.svg" alt="Twitter Logo" />
         <div class="signup-page-button-text">Twitter 注册</div>
       </div>
     </div>

frontend_nuxt/pages/users/[id].vue

@@ -72,237 +72,246 @@
         </div>
       </div>
 
-      <BaseTabs
-        v-model="selectedTab"
-        :tabs="profileTabs"
-        class="profile-tabs"
-        item-class="profile-tabs-item"
-        active-class="selected"
-      >
-        <template #tab="{ tab }">
-          <i :class="tab.icon"></i>
-          <div class="profile-tabs-item-label">{{ tab.label }}</div>
-        </template>
-      </BaseTabs>
-
-      <div v-if="tabLoading" class="tab-loading">
-        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)" />
-      </div>
-      <template v-else>
-        <div v-if="selectedTab === 'summary'" class="profile-summary">
-          <div class="total-summary">
-            <div class="summary-title">统计信息</div>
-            <div class="total-summary-content">
-              <div class="total-summary-item">
-                <div class="total-summary-item-label">访问天数</div>
-                <div class="total-summary-item-value">{{ user.visitedDays }}</div>
+      <BaseTabs v-model="selectedTab" :tabs="tabs">
+        <div v-if="tabLoading" class="tab-loading">
+          <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)" />
+        </div>
+        <template v-else>
+          <div v-if="selectedTab === 'summary'" class="profile-summary">
+            <div class="total-summary">
+              <div class="summary-title">统计信息</div>
+              <div class="total-summary-content">
+                <div class="total-summary-item">
+                  <div class="total-summary-item-label">访问天数</div>
+                  <div class="total-summary-item-value">{{ user.visitedDays }}</div>
+                </div>
+                <div class="total-summary-item">
+                  <div class="total-summary-item-label">已读帖子</div>
+                  <div class="total-summary-item-value">{{ user.readPosts }}</div>
+                </div>
+                <div class="total-summary-item">
+                  <div class="total-summary-item-label">已送出的💗</div>
+                  <div class="total-summary-item-value">{{ user.likesSent }}</div>
+                </div>
+                <div class="total-summary-item">
+                  <div class="total-summary-item-label">已收到的💗</div>
+                  <div class="total-summary-item-value">{{ user.likesReceived }}</div>
+                </div>
               </div>
-              <div class="total-summary-item">
-                <div class="total-summary-item-label">已读帖子</div>
-                <div class="total-summary-item-value">{{ user.readPosts }}</div>
+            </div>
+            <div class="summary-divider">
+              <div class="hot-reply">
+                <div class="summary-title">热门回复</div>
+                <div class="summary-content" v-if="hotReplies.length > 0">
+                  <BaseTimeline :items="hotReplies">
+                    <template #item="{ item }">
+                      在
+                      <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
+                        {{ item.comment.post.title }}
+                      </NuxtLink>
+                      <template v-if="item.comment.parentComment">
+                        下对
+                        <NuxtLink
+                          :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
+                          class="timeline-link"
+                        >
+                          {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
+                        </NuxtLink>
+                        回复了
+                      </template>
+                      <template v-else> 下评论了 </template>
+                      <NuxtLink
+                        :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                        class="timeline-link"
+                      >
+                        {{ stripMarkdownLength(item.comment.content, 200) }}
+                      </NuxtLink>
+                      <div class="timeline-date">
+                        {{ formatDate(item.comment.createdAt) }}
+                      </div>
+                    </template>
+                  </BaseTimeline>
+                </div>
+                <div v-else>
+                  <div class="summary-empty">暂无热门回复</div>
+                </div>
               </div>
-              <div class="total-summary-item">
-                <div class="total-summary-item-label">已送出的💗</div>
-                <div class="total-summary-item-value">{{ user.likesSent }}</div>
+              <div class="hot-topic">
+                <div class="summary-title">热门话题</div>
+                <div class="summary-content" v-if="hotPosts.length > 0">
+                  <BaseTimeline :items="hotPosts">
+                    <template #item="{ item }">
+                      <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
+                        {{ item.post.title }}
+                      </NuxtLink>
+                      <div class="timeline-snippet">
+                        {{ stripMarkdown(item.post.snippet) }}
+                      </div>
+                      <div class="timeline-date">
+                        {{ formatDate(item.post.createdAt) }}
+                      </div>
+                    </template>
+                  </BaseTimeline>
+                </div>
+                <div v-else>
+                  <div class="summary-empty">暂无热门话题</div>
+                </div>
               </div>
-              <div class="total-summary-item">
-                <div class="total-summary-item-label">已收到的💗</div>
-                <div class="total-summary-item-value">{{ user.likesReceived }}</div>
+              <div class="hot-tag">
+                <div class="summary-title">TA创建的tag</div>
+                <div class="summary-content" v-if="hotTags.length > 0">
+                  <BaseTimeline :items="hotTags">
+                    <template #item="{ item }">
+                      <span class="timeline-link" @click="gotoTag(item.tag)">
+                        {{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
+                      </span>
+                      <div class="timeline-snippet" v-if="item.tag.description">
+                        {{ item.tag.description }}
+                      </div>
+                      <div class="timeline-date">
+                        {{ formatDate(item.tag.createdAt) }}
+                      </div>
+                    </template>
+                  </BaseTimeline>
+                </div>
+                <div v-else>
+                  <div class="summary-empty">暂无标签</div>
+                </div>
               </div>
             </div>
           </div>
-          <div class="summary-divider">
-            <div class="hot-reply">
-              <div class="summary-title">热门回复</div>
-              <div class="summary-content" v-if="hotReplies.length > 0">
-                <BaseTimeline :items="hotReplies">
-                  <template #item="{ item }">
+
+          <div v-else-if="selectedTab === 'timeline'" class="profile-timeline">
+            <div class="timeline-tabs">
+              <div
+                :class="['timeline-tab-item', { selected: timelineFilter === 'all' }]"
+                @click="timelineFilter = 'all'"
+              >
+                全部
+              </div>
+              <div
+                :class="['timeline-tab-item', { selected: timelineFilter === 'articles' }]"
+                @click="timelineFilter = 'articles'"
+              >
+                文章
+              </div>
+              <div
+                :class="['timeline-tab-item', { selected: timelineFilter === 'comments' }]"
+                @click="timelineFilter = 'comments'"
+              >
+                评论和回复
+              </div>
+            </div>
+            <BasePlaceholder
+              v-if="filteredTimelineItems.length === 0"
+              text="暂无时间线"
+              icon="fas fa-inbox"
+            />
+            <div class="timeline-list">
+              <BaseTimeline :items="filteredTimelineItems">
+                <template #item="{ item }">
+                  <template v-if="item.type === 'post'">
+                    发布了文章
+                    <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
+                      {{ item.post.title }}
+                    </NuxtLink>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                  </template>
+                  <template v-else-if="item.type === 'comment'">
                     在
                     <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
                       {{ item.comment.post.title }}
                     </NuxtLink>
-                    <template v-if="item.comment.parentComment">
-                      下对
-                      <NuxtLink
-                        :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
-                        class="timeline-link"
-                      >
-                        {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
-                      </NuxtLink>
-                      回复了
-                    </template>
-                    <template v-else> 下评论了 </template>
+                    下评论了
                     <NuxtLink
                       :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
                       class="timeline-link"
                     >
                       {{ stripMarkdownLength(item.comment.content, 200) }}
                     </NuxtLink>
-                    <div class="timeline-date">
-                      {{ formatDate(item.comment.createdAt) }}
-                    </div>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
                   </template>
-                </BaseTimeline>
-              </div>
-              <div v-else>
-                <div class="summary-empty">暂无热门回复</div>
-              </div>
-            </div>
-            <div class="hot-topic">
-              <div class="summary-title">热门话题</div>
-              <div class="summary-content" v-if="hotPosts.length > 0">
-                <BaseTimeline :items="hotPosts">
-                  <template #item="{ item }">
-                    <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
-                      {{ item.post.title }}
+                  <template v-else-if="item.type === 'reply'">
+                    在
+                    <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
+                      {{ item.comment.post.title }}
                     </NuxtLink>
-                    <div class="timeline-snippet">
-                      {{ stripMarkdown(item.post.snippet) }}
-                    </div>
-                    <div class="timeline-date">
-                      {{ formatDate(item.post.createdAt) }}
-                    </div>
+                    下对
+                    <NuxtLink
+                      :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
+                      class="timeline-link"
+                    >
+                      {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
+                    </NuxtLink>
+                    回复了
+                    <NuxtLink
+                      :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                      class="timeline-link"
+                    >
+                      {{ stripMarkdownLength(item.comment.content, 200) }}
+                    </NuxtLink>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
                   </template>
-                </BaseTimeline>
-              </div>
-              <div v-else>
-                <div class="summary-empty">暂无热门话题</div>
-              </div>
-            </div>
-            <div class="hot-tag">
-              <div class="summary-title">TA创建的tag</div>
-              <div class="summary-content" v-if="hotTags.length > 0">
-                <BaseTimeline :items="hotTags">
-                  <template #item="{ item }">
+                  <template v-else-if="item.type === 'tag'">
+                    创建了标签
                     <span class="timeline-link" @click="gotoTag(item.tag)">
                       {{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
                     </span>
                     <div class="timeline-snippet" v-if="item.tag.description">
                       {{ item.tag.description }}
                     </div>
-                    <div class="timeline-date">
-                      {{ formatDate(item.tag.createdAt) }}
-                    </div>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
                   </template>
-                </BaseTimeline>
-              </div>
-              <div v-else>
-                <div class="summary-empty">暂无标签</div>
-              </div>
+                </template>
+              </BaseTimeline>
             </div>
           </div>
-        </div>
 
-        <div v-else-if="selectedTab === 'timeline'" class="profile-timeline">
-          <BaseTabs
-            v-model="timelineFilter"
-            :tabs="timelineTabs"
-            class="timeline-tabs"
-            item-class="timeline-tab-item"
-            active-class="selected"
-          />
-          <BasePlaceholder
-            v-if="filteredTimelineItems.length === 0"
-            text="暂无时间线"
-            icon="fas fa-inbox"
-          />
-          <div class="timeline-list">
-            <BaseTimeline :items="filteredTimelineItems">
-              <template #item="{ item }">
-                <template v-if="item.type === 'post'">
-                  发布了文章
+          <div v-else-if="selectedTab === 'following'" class="follow-container">
+            <div class="follow-tabs">
+              <div
+                :class="['follow-tab-item', { selected: followTab === 'followers' }]"
+                @click="followTab = 'followers'"
+              >
+                关注者
+              </div>
+              <div
+                :class="['follow-tab-item', { selected: followTab === 'following' }]"
+                @click="followTab = 'following'"
+              >
+                正在关注
+              </div>
+            </div>
+            <div class="follow-list">
+              <UserList v-if="followTab === 'followers'" :users="followers" />
+              <UserList v-else :users="followings" />
+            </div>
+          </div>
+
+          <div v-else-if="selectedTab === 'favorites'" class="favorites-container">
+            <div v-if="favoritePosts.length > 0">
+              <BaseTimeline :items="favoritePosts">
+                <template #item="{ item }">
                   <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
                     {{ item.post.title }}
                   </NuxtLink>
-                  <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                </template>
-                <template v-else-if="item.type === 'comment'">
-                  在
-                  <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
-                    {{ item.comment.post.title }}
-                  </NuxtLink>
-                  下评论了
-                  <NuxtLink
-                    :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                    class="timeline-link"
-                  >
-                    {{ stripMarkdownLength(item.comment.content, 200) }}
-                  </NuxtLink>
-                  <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                </template>
-                <template v-else-if="item.type === 'reply'">
-                  在
-                  <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
-                    {{ item.comment.post.title }}
-                  </NuxtLink>
-                  下对
-                  <NuxtLink
-                    :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
-                    class="timeline-link"
-                  >
-                    {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
-                  </NuxtLink>
-                  回复了
-                  <NuxtLink
-                    :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                    class="timeline-link"
-                  >
-                    {{ stripMarkdownLength(item.comment.content, 200) }}
-                  </NuxtLink>
-                  <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                </template>
-                <template v-else-if="item.type === 'tag'">
-                  创建了标签
-                  <span class="timeline-link" @click="gotoTag(item.tag)">
-                    {{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
-                  </span>
-                  <div class="timeline-snippet" v-if="item.tag.description">
-                    {{ item.tag.description }}
+                  <div class="timeline-snippet">
+                    {{ stripMarkdown(item.post.snippet) }}
                   </div>
-                  <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                  <div class="timeline-date">{{ formatDate(item.post.createdAt) }}</div>
                 </template>
-              </template>
-            </BaseTimeline>
+              </BaseTimeline>
+            </div>
+            <div v-else>
+              <BasePlaceholder text="暂无收藏文章" icon="fas fa-inbox" />
+            </div>
           </div>
-        </div>
 
-        <div v-else-if="selectedTab === 'following'" class="follow-container">
-          <BaseTabs
-            v-model="followTab"
-            :tabs="followTabs"
-            class="follow-tabs"
-            item-class="follow-tab-item"
-            active-class="selected"
-          />
-          <div class="follow-list">
-            <UserList v-if="followTab === 'followers'" :users="followers" />
-            <UserList v-else :users="followings" />
+          <div v-else-if="selectedTab === 'achievements'" class="achievements-container">
+            <AchievementList :medals="medals" :can-select="isMine" />
           </div>
-        </div>
-
-        <div v-else-if="selectedTab === 'favorites'" class="favorites-container">
-          <div v-if="favoritePosts.length > 0">
-            <BaseTimeline :items="favoritePosts">
-              <template #item="{ item }">
-                <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
-                  {{ item.post.title }}
-                </NuxtLink>
-                <div class="timeline-snippet">
-                  {{ stripMarkdown(item.post.snippet) }}
-                </div>
-                <div class="timeline-date">{{ formatDate(item.post.createdAt) }}</div>
-              </template>
-            </BaseTimeline>
-          </div>
-          <div v-else>
-            <BasePlaceholder text="暂无收藏文章" icon="fas fa-inbox" />
-          </div>
-        </div>
-
-        <div v-else-if="selectedTab === 'achievements'" class="achievements-container">
-          <AchievementList :medals="medals" :can-select="isMine" />
-        </div>
-      </template>
+        </template>
+      </BaseTabs>
     </div>
   </div>
 </template>
@@ -313,6 +322,7 @@ import { useRoute } from 'vue-router'
 import AchievementList from '~/components/AchievementList.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
+import BaseTabs from '~/components/BaseTabs.vue'
 import LevelProgress from '~/components/LevelProgress.vue'
 import UserList from '~/components/UserList.vue'
 import { toast } from '~/main'
@@ -320,7 +330,6 @@ import { authState, getToken } from '~/utils/auth'
 import { prevLevelExp } from '~/utils/level'
 import { stripMarkdown, stripMarkdownLength } from '~/utils/markdown'
 import TimeManager from '~/utils/time'
-import BaseTabs from '~/components/BaseTabs.vue'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
@@ -336,22 +345,6 @@ const hotReplies = ref([])
 const hotTags = ref([])
 const favoritePosts = ref([])
 const timelineItems = ref([])
-const profileTabs = [
-  { name: 'summary', label: '总结', icon: 'fas fa-chart-line' },
-  { name: 'timeline', label: '时间线', icon: 'fas fa-clock' },
-  { name: 'following', label: '关注', icon: 'fas fa-user-plus' },
-  { name: 'favorites', label: '收藏', icon: 'fas fa-bookmark' },
-  { name: 'achievements', label: '勋章', icon: 'fas fa-medal' },
-]
-const timelineTabs = [
-  { name: 'all', label: '全部' },
-  { name: 'articles', label: '文章' },
-  { name: 'comments', label: '评论和回复' },
-]
-const followTabs = [
-  { name: 'followers', label: '关注者' },
-  { name: 'following', label: '正在关注' },
-]
 const timelineFilter = ref('all')
 const filteredTimelineItems = computed(() => {
   if (timelineFilter.value === 'articles') {
@@ -372,6 +365,13 @@ const selectedTab = ref(
     ? route.query.tab
     : 'summary',
 )
+const tabs = [
+  { key: 'summary', label: '总结', icon: 'fas fa-chart-line' },
+  { key: 'timeline', label: '时间线', icon: 'fas fa-clock' },
+  { key: 'following', label: '关注', icon: 'fas fa-user-plus' },
+  { key: 'favorites', label: '收藏', icon: 'fas fa-bookmark' },
+  { key: 'achievements', label: '勋章', icon: 'fas fa-medal' },
+]
 const followTab = ref('followers')
 
 const levelInfo = computed(() => {
@@ -768,7 +768,7 @@ watch(selectedTab, async (val) => {
   font-size: 14px;
 }
 
-.profile-tabs {
+:deep(.base-tabs-header) {
   position: sticky;
   top: calc(var(--header-height) + 1px);
   z-index: 200;
@@ -782,7 +782,7 @@ watch(selectedTab, async (val) => {
   backdrop-filter: var(--blur-10);
 }
 
-.profile-tabs-item {
+:deep(.base-tabs-item) {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
@@ -795,7 +795,7 @@ watch(selectedTab, async (val) => {
   white-space: nowrap;
 }
 
-.profile-tabs-item.selected {
+:deep(.base-tabs-item.selected) {
   color: var(--primary-color);
   border-bottom: 2px solid var(--primary-color);
 }
@@ -954,7 +954,7 @@ watch(selectedTab, async (val) => {
     height: 100px;
   }
 
-  .profile-tabs-item {
+  :deep(.base-tabs-item) {
     width: 100px;
   }
 

frontend_nuxt/plugins/echarts.client.ts

@@ -0,0 +1,18 @@
+// plugins/echarts.client.ts
+import { defineNuxtPlugin } from 'nuxt/app'
+import VueECharts from 'vue-echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import {
+  GridComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  TitleComponent,
+} from 'echarts/components'
+
+use([LineChart, TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, CanvasRenderer])
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('VChart', VueECharts)
+})

frontend_nuxt/utils/markdown.js

@@ -48,7 +48,7 @@ function tiebaEmojiPlugin(md) {
   md.renderer.rules['tieba-emoji'] = (tokens, idx) => {
     const name = tokens[idx].content
     const file = tiebaEmoji[name]
-    return `<BaseImage class="emoji" src="${file}" alt="${name}">`
+    return `<img class="emoji" src="${file}" alt="${name}">`
   }
   md.inline.ruler.before('emphasis', 'tieba-emoji', (state, silent) => {
     const pos = state.pos
@@ -92,10 +92,13 @@ function linkPlugin(md) {
 
 /** @section MarkdownIt 实例：开启 HTML，但配合强净化 */
 const md = new MarkdownIt({
-  html: true, // ⭐ 允许行内 HTML（为 <video> 服务）
+  html: true,
   linkify: true,
   breaks: true,
   highlight: (str, lang) => {
+    if (lang === 'mermaid') {
+      return `<pre class="mermaid">${str}</pre>`
+    }
     let code = ''
     if (lang && hljs.getLanguage(lang)) {
       code = hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
@@ -106,11 +109,16 @@ const md = new MarkdownIt({
       .trim()
       .split('\n')
       .map(() => `<div class="line-number"></div>`)
-    // 保留你原有的 CodeBlock + 复制按钮 + 行号结构
     return `<pre class="code-block"><button class="copy-code-btn">Copy</button><div class="line-numbers">${lineNumbers.join('')}</div><code class="hljs language-${lang || ''}">${code.trim()}</code></pre>`
   },
 })
 
+const md2TextRender = new MarkdownIt({
+  html: true,
+  linkify: true,
+  breaks: true,
+})
+
 md.use(mentionPlugin)
 md.use(tiebaEmojiPlugin)
 md.use(linkPlugin)
@@ -177,7 +185,7 @@ const SANITIZE_CFG = {
   allowedClasses: {
     a: ['mention-link'],
     img: ['emoji'],
-    pre: ['code-block'],
+    pre: ['code-block', 'mermaid'],
     div: ['line-numbers', 'line-number'],
     code: ['hljs', /^language-/],
     button: ['copy-code-btn'],
@@ -203,8 +211,15 @@ const SANITIZE_CFG = {
 /** @section 渲染 & 事件 */
 export function renderMarkdown(text) {
   const raw = md.render(text || '')
-  // ⭐ 核心：对最终 HTML 进行一次净化
-  return sanitizeHtml(raw, SANITIZE_CFG)
+  const html = sanitizeHtml(raw, SANITIZE_CFG)
+  if (typeof window !== 'undefined') {
+    setTimeout(async () => {
+      const mermaid = await import('mermaid')
+      mermaid.default.initialize({ startOnLoad: false })
+      mermaid.default.run({ nodes: document.querySelectorAll('.mermaid') })
+    })
+  }
+  return html
 }
 
 export function handleMarkdownClick(e) {
@@ -221,7 +236,7 @@ export function handleMarkdownClick(e) {
 
 /** @section 纯文本提取（保持你原有“统一正则法”） */
 export function stripMarkdown(text) {
-  const html = md.render(text || '')
+  const html = md2TextRender.render(text || '')
   let plainText = html.replace(/<[^>]+>/g, '')
   plainText = plainText
     .replace(/\r\n/g, '\n')

frontend_nuxt/utils/time.js

@@ -4,6 +4,17 @@ export default class TimeManager {
     if (Number.isNaN(date.getTime())) return ''
 
     const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+
+    if (diffMs >= 0 && diffMs < 60 * 1000) {
+      return '刚刚'
+    }
+
+    if (diffMs >= 0 && diffMs < 60 * 60 * 1000) {
+      const mins = Math.floor(diffMs / 60_000)
+      return `${mins || 1}分钟前`
+    }
+
     const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())
     const startOfDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
     const diffDays = Math.floor((startOfToday - startOfDate) / 86400000)