fix: gray out unearned medals

fix:  回复表情通知为空的问题 #735

README.md

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

@@ -41,7 +41,7 @@ public class RssController {
 
     // 兼容 Markdown/HTML 两类图片写法（用于 enclosure）
     private static final Pattern MD_IMAGE = Pattern.compile("!\\[[^\\]]*\\]\\(([^)]+)\\)");
-    private static final Pattern HTML_IMAGE = Pattern.compile("<img[^>]+src=[\"']?([^\"'>]+)[\"']?[^>]*>");
+    private static final Pattern HTML_IMAGE = Pattern.compile("<BaseImage[^>]+src=[\"']?([^\"'>]+)[\"']?[^>]*>");
 
     private static final DateTimeFormatter RFC1123 = DateTimeFormatter.RFC_1123_DATE_TIME;
 

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/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
@@ -173,4 +177,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/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/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%;

frontend_nuxt/components/AchievementList.vue

@@ -9,7 +9,7 @@
       ]"
       @click="selectMedal(medal)"
     >
-      <img
+      <BaseImage
         :src="medal.icon"
         :alt="medal.title"
         :class="['achievements-list-item-icon', { not_completed: !medal.completed }]"

frontend_nuxt/components/ActivityPopup.vue

@@ -1,7 +1,7 @@
 <template>
   <BasePopup :visible="visible" @close="close">
     <div class="activity-popup">
-      <img v-if="icon" :src="icon" class="activity-popup-icon" alt="activity icon" />
+      <BaseImage v-if="icon" :src="icon" class="activity-popup-icon" alt="activity icon" />
       <div class="activity-popup-text">{{ text }}</div>
       <div class="activity-popup-actions">
         <div class="activity-popup-button" @click="gotoActivity">立即前往</div>

frontend_nuxt/components/ArticleCategory.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="article-category-container" v-if="category">
     <div class="article-info-item" @click="gotoCategory">
-      <img
+      <BaseImage
         v-if="category.smallIcon"
         class="article-info-item-img"
         :src="category.smallIcon"

frontend_nuxt/components/ArticleTags.vue

@@ -6,7 +6,7 @@
       :key="tag.id || tag.name"
       @click="gotoTag(tag)"
     >
-      <img
+      <BaseImage
         v-if="tag.smallIcon"
         class="article-info-item-img"
         :src="tag.smallIcon"

frontend_nuxt/components/AvatarCropper.vue

@@ -2,7 +2,7 @@
   <div v-if="show" class="cropper-modal">
     <div class="cropper-body">
       <div class="cropper-wrapper">
-        <img ref="image" :src="src" alt="to crop" />
+        <BaseImage 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

@@ -0,0 +1,66 @@
+<template>
+  <NuxtImg
+    v-bind="passAttrs"
+    :src="src"
+    :alt="alt"
+    loading="lazy"
+    :placeholder="placeholder"
+    placeholder-class="base-image-ph"
+    @load="onLoad"
+    @error="onError"
+    :class="['base-image', passAttrs.class, { 'is-loaded': loaded }]"
+  />
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useAttrs } from 'vue'
+
+const props = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, default: '' },
+})
+
+const attrs = useAttrs()
+
+const passAttrs = computed(() => {
+  const { placeholder, ...rest } = attrs
+  return rest
+})
+
+const loaded = ref(false)
+const img = useImage()
+
+const placeholder = computed(() => {
+  if (!props.src) return undefined
+  return img(props.src, { w: 16, h: 16, f: 'webp', q: 20, blur: 1 })
+})
+
+function onLoad() {
+  loaded.value = true
+}
+function onError() {
+  loaded.value = true
+}
+</script>
+
+<style scoped>
+.base-image {
+  transition:
+    filter 0.35s ease,
+    transform 0.35s ease,
+    opacity 0.35s ease;
+  opacity: 0.92;
+}
+
+.base-image-ph {
+  filter: blur(20px);
+  transform: scale(0.5);
+}
+
+.base-image.is-loaded {
+  /* Allow filters from parent classes (e.g. grayscale for unfinished medals) */
+  transform: none;
+  opacity: 1;
+}
+</style>

frontend_nuxt/components/BaseTabs.vue

@@ -1,110 +1,92 @@
 <template>
-  <div class="base-tabs-wrapper" @touchstart="onTouchStart" @touchend="onTouchEnd">
+  <div class="base-tabs">
     <div class="base-tabs-header">
       <div class="base-tabs-items">
         <div
           v-for="tab in tabs"
-          :key="tab.name"
-          :class="['base-tab-item', { selected: tab.name === current }]"
-          @click="select(tab.name)"
+          :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>
-          <span>{{ tab.label }}</span>
+          <div class="base-tabs-item-label">{{ tab.label }}</div>
         </div>
       </div>
-      <div class="base-tabs-right">
+      <div class="base-tabs-header-right">
         <slot name="right"></slot>
       </div>
     </div>
-    <div class="base-tabs-content">
-      <slot :current="current"></slot>
+    <div class="base-tabs-content" @touchstart="onTouchStart" @touchend="onTouchEnd">
+      <slot></slot>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
-
 const props = defineProps({
-  modelValue: { type: String, default: undefined },
-  tabs: { type: Array, required: true },
-  swipe: { type: Boolean, default: true },
+  modelValue: { type: String, required: true },
+  tabs: { type: Array, default: () => [] },
 })
 
 const emit = defineEmits(['update:modelValue'])
 
-const current = ref(props.modelValue ?? (props.tabs[0] && props.tabs[0].name))
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (val !== undefined) current.value = val
-  },
-)
-
-function select(name) {
-  emit('update:modelValue', name)
-}
-
-let startX = 0
+let touchStartX = 0
 
 function onTouchStart(e) {
-  if (!props.swipe) return
-  startX = e.changedTouches[0].clientX
+  touchStartX = e.touches[0].clientX
 }
 
 function onTouchEnd(e) {
-  if (!props.swipe) return
-  const endX = e.changedTouches[0].clientX
-  const diff = endX - startX
-  if (Math.abs(diff) > 50) {
-    const index = props.tabs.findIndex((t) => t.name === current.value)
-    if (diff < 0 && index < props.tabs.length - 1) {
-      emit('update:modelValue', props.tabs[index + 1].name)
-    } else if (diff > 0 && index > 0) {
-      emit('update:modelValue', props.tabs[index - 1].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-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
 .base-tabs-header {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
   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-tab-item {
+.base-tabs-item {
   padding: 10px 20px;
   cursor: pointer;
   white-space: nowrap;
+  display: flex;
+  align-items: center;
 }
 
-.base-tab-item.selected {
+.base-tabs-item i {
+  margin-right: 6px;
+}
+
+.base-tabs-item.selected {
   color: var(--primary-color);
   border-bottom: 2px solid var(--primary-color);
 }
 
-.base-tab-item i {
-  margin-right: 6px;
+.base-tabs-header-right {
+  display: flex;
+  flex-shrink: 0;
 }
 
-.base-tabs-right {
-  display: flex;
-  align-items: center;
-  flex: 0 0 auto;
+.base-tabs-content {
+  width: 100%;
 }
 </style>

frontend_nuxt/components/BaseTimeline.vue

@@ -6,9 +6,9 @@
         :class="{ clickable: !!item.iconClick }"
         @click="item.iconClick && item.iconClick()"
       >
-        <img v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
+        <BaseImage v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
         <i v-else-if="item.icon" :class="item.icon"></i>
-        <img v-else-if="item.emoji" :src="item.emoji" class="timeline-emoji" alt="emoji" />
+        <BaseImage v-else-if="item.emoji" :src="item.emoji" class="timeline-emoji" alt="emoji" />
       </div>
       <div class="timeline-content">
         <slot name="item" :item="item">{{ item.content }}</slot>

frontend_nuxt/components/CategorySelect.vue

@@ -9,7 +9,7 @@
       <div class="option-container">
         <div class="option-main">
           <template v-if="option.icon">
-            <img
+            <BaseImage
               v-if="isImageIcon(option.icon)"
               :src="option.icon"
               class="option-icon"

frontend_nuxt/components/CommentItem.vue

@@ -8,7 +8,7 @@
   >
     <!-- <div class="user-avatar-container">
       <div class="user-avatar-item">
-        <img class="user-avatar-item-img" :src="comment.avatar" alt="avatar" />
+        <BaseImage class="user-avatar-item-img" :src="comment.avatar" alt="avatar" />
       </div>
     </div>   -->
     <div class="info-content">

frontend_nuxt/components/Dropdown.vue

@@ -13,7 +13,7 @@
             <template v-for="(label, idx) in selectedLabels" :key="label.id">
               <div class="selected-label">
                 <template v-if="label.icon">
-                  <img
+                  <BaseImage
                     v-if="isImageIcon(label.icon)"
                     :src="label.icon"
                     class="option-icon"
@@ -32,7 +32,7 @@
           <span v-if="selectedLabels.length">
             <div class="selected-label">
               <template v-if="selectedLabels[0].icon">
-                <img
+                <BaseImage
                   v-if="isImageIcon(selectedLabels[0].icon)"
                   :src="selectedLabels[0].icon"
                   class="option-icon"
@@ -69,7 +69,12 @@
         >
           <slot name="option" :option="o" :isSelected="isSelected(o.id)">
             <template v-if="o.icon">
-              <img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" :alt="o.name" />
+              <BaseImage
+                v-if="isImageIcon(o.icon)"
+                :src="o.icon"
+                class="option-icon"
+                :alt="o.name"
+              />
               <i v-else :class="['option-icon', o.icon]"></i>
             </template>
             <span>{{ o.name }}</span>
@@ -100,7 +105,12 @@
             >
               <slot name="option" :option="o" :isSelected="isSelected(o.id)">
                 <template v-if="o.icon">
-                  <img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" :alt="o.name" />
+                  <BaseImage
+                    v-if="isImageIcon(o.icon)"
+                    :src="o.icon"
+                    class="option-icon"
+                    :alt="o.name"
+                  />
                   <i v-else :class="['option-icon', o.icon]"></i>
                 </template>
                 <span>{{ o.name }}</span>

frontend_nuxt/components/HeaderComponent.vue

@@ -12,7 +12,7 @@
           ></span>
         </div>
         <NuxtLink class="logo-container" :to="`/`" @click="refrechData">
-          <img
+          <BaseImage
             alt="OpenIsle"
             src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png"
             width="60"
@@ -63,7 +63,7 @@
           <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
             <template #trigger>
               <div class="avatar-container">
-                <img class="avatar-img" :src="avatar" alt="avatar" />
+                <BaseImage class="avatar-img" :src="avatar" alt="avatar" />
                 <i class="fas fa-caret-down dropdown-icon"></i>
               </div>
             </template>
@@ -75,7 +75,6 @@
           </div>
         </div>
       </ClientOnly>
-
       <SearchDropdown ref="searchDropdown" v-if="isMobile && showSearch" @close="closeSearch" />
     </div>
   </header>
@@ -149,13 +148,14 @@ const copyInviteLink = async () => {
     if (res.ok) {
       const data = await res.json()
       const inviteLink = data.token ? `${WEBSITE_BASE_URL}/signup?invite_token=${data.token}` : ''
-      /** 
+      /**
        * navigator.clipboard在webkit中有点奇怪的行为
        * https://stackoverflow.com/questions/62327358/javascript-clipboard-api-safari-ios-notallowederror-message
        * https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/
-      */
+       */
       setTimeout(() => {
-        navigator.clipboard.writeText(inviteLink)
+        navigator.clipboard
+          .writeText(inviteLink)
           .then(() => {
             toast.success('邀请链接已复制')
           })

frontend_nuxt/components/MedalPopup.vue

@@ -4,7 +4,7 @@
       <div class="medal-popup-title">恭喜你获得以下勋章</div>
       <div class="medal-popup-list">
         <div v-for="medal in medals" :key="medal.type" class="medal-popup-item">
-          <img :src="medal.icon" :alt="medal.title" class="medal-popup-item-icon" />
+          <BaseImage :src="medal.icon" :alt="medal.title" class="medal-popup-item-icon" />
           <div class="medal-popup-item-title">{{ medal.title }}</div>
         </div>
       </div>

frontend_nuxt/components/MenuComponent.vue

@@ -88,7 +88,7 @@
               @click="gotoCategory(c)"
             >
               <template v-if="c.smallIcon || c.icon">
-                <img
+                <BaseImage
                   v-if="isImageIcon(c.smallIcon || c.icon)"
                   :src="c.smallIcon || c.icon"
                   class="section-item-icon"
@@ -114,7 +114,7 @@
               <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
             </div>
             <div v-else v-for="t in tagData" :key="t.id" class="section-item" @click="gotoTag(t)">
-              <img
+              <BaseImage
                 v-if="isImageIcon(t.smallIcon || t.icon)"
                 :src="t.smallIcon || t.icon"
                 class="section-item-icon"

frontend_nuxt/components/ReactionsGroup.vue

@@ -14,7 +14,7 @@
             :class="{ selected: userReacted(r.type) }"
             @click="toggleReaction(r.type)"
           >
-            <img :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
+            <BaseImage :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
             <div>{{ counts[r.type] }}</div>
           </div>
 
@@ -30,7 +30,7 @@
             class="reactions-viewer-item"
             @click="openPanel"
           >
-            <img :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
+            <BaseImage :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
           </div>
           <div class="reactions-count">{{ totalCount }}</div>
         </template>
@@ -61,7 +61,7 @@
         @click="toggleReaction(t)"
         :class="{ selected: userReacted(t) }"
       >
-        <img :src="reactionEmojiMap[t]" class="emoji" alt="emoji" /><span v-if="counts[t]">{{
+        <BaseImage :src="reactionEmojiMap[t]" class="emoji" alt="emoji" /><span v-if="counts[t]">{{
           counts[t]
         }}</span>
       </div>

frontend_nuxt/components/SearchPersonDropdown.vue

@@ -24,7 +24,7 @@
       </template>
       <template #option="{ option }">
         <div class="search-option-item">
-          <img
+          <BaseImage
             :src="option.avatar || '/default-avatar.svg'"
             class="avatar"
             @error="handleAvatarError"

frontend_nuxt/components/TagSelect.vue

@@ -11,7 +11,7 @@
       <div class="option-container">
         <div class="option-main">
           <template v-if="option.icon">
-            <img
+            <BaseImage
               v-if="isImageIcon(option.icon)"
               :src="option.icon"
               class="option-icon"

frontend_nuxt/components/UserList.vue

@@ -2,7 +2,7 @@
   <div class="user-list">
     <BasePlaceholder v-if="users.length === 0" text="暂无用户" icon="fas fa-inbox" />
     <div v-for="u in users" :key="u.id" class="user-item" @click="handleUserClick(u)">
-      <img :src="u.avatar" alt="avatar" class="user-avatar" />
+      <BaseImage :src="u.avatar" alt="avatar" class="user-avatar" />
       <div class="user-info">
         <div class="user-name">{{ u.username }}</div>
         <div v-if="u.introduction" class="user-intro">{{ u.introduction }}</div>

frontend_nuxt/nuxt.config.ts

@@ -2,6 +2,7 @@ import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
   ssr: true,
+  modules: ['@nuxt/image'],
   runtimeConfig: {
     public: {
       apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || '',
@@ -87,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-lock.json

@@ -6,6 +6,7 @@
     "": {
       "name": "frontend_nuxt",
       "dependencies": {
+        "@nuxt/image": "^1.11.0",
         "@stomp/stompjs": "^7.0.0",
         "cropperjs": "^1.6.2",
         "echarts": "^5.6.0",
@@ -959,6 +960,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fastify/accept-negotiator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@fastify/accept-negotiator/-/accept-negotiator-1.1.0.tgz",
+      "integrity": "sha512-OIHZrb2ImZ7XG85HXOONLcJWGosv7sIvM2ifAPQVhg9Lv7qdmMBNVaai4QTdyuaqbKM5eO6sLSQOYI7wEQeCJQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@fastify/busboy": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-3.2.0.tgz",
@@ -1952,6 +1963,63 @@
         "node": ">=18.12.0"
       }
     },
+    "node_modules/@nuxt/image": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/image/-/image-1.11.0.tgz",
+      "integrity": "sha512-4kzhvb2tJfxMsa/JZeYn1sMiGbx2J/S6BQrQSdXNsHgSvywGVkFhTiQGjoP6O49EsXyAouJrer47hMeBcTcfXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.18.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "h3": "^1.15.3",
+        "image-meta": "^0.2.1",
+        "knitwork": "^1.2.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "std-env": "^3.9.0",
+        "ufo": "^1.6.1"
+      },
+      "engines": {
+        "node": ">=18.20.6"
+      },
+      "optionalDependencies": {
+        "ipx": "^2.1.1"
+      }
+    },
+    "node_modules/@nuxt/image/node_modules/@nuxt/kit": {
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.18.1.tgz",
+      "integrity": "sha512-z6w1Fzv27CIKFlhct05rndkJSfoslplWH5fJ9dtusEvpYScLXp5cATWIbWkte9e9zFSmQTgDQJjNs3geQHE7og==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.2.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.5.1",
+        "klona": "^2.0.6",
+        "knitwork": "^1.2.0",
+        "mlly": "^1.7.4",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.2.0",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.14",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "unimport": "^5.2.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
     "node_modules/@nuxt/kit": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.0.3.tgz",
@@ -3718,6 +3786,16 @@
       "integrity": "sha512-chcDs6YkAnKp1FqzwhGvh3i7v0+/ytzqWdKYw6XzINEKAzke/iD00dNgFPWSZEqktHOK+C1gSzXhLkLbARIaZw==",
       "license": "Apache-2.0"
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "license": "ISC",
+      "optional": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.0.tgz",
@@ -4624,6 +4702,71 @@
       "license": "Apache-2.0",
       "optional": true
     },
+    "node_modules/bare-fs": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.2.1.tgz",
+      "integrity": "sha512-mELROzV0IhqilFgsl1gyp48pnZsaV9xhQapHLDsvn4d4ZTfbFhcghQezl7FTEDNBcGqLUnNI3lUlm6ecrLWdFA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "bare-events": "^2.5.4",
+        "bare-path": "^3.0.0",
+        "bare-stream": "^2.6.4"
+      },
+      "engines": {
+        "bare": ">=1.16.0"
+      },
+      "peerDependencies": {
+        "bare-buffer": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-buffer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/bare-os": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.6.2.tgz",
+      "integrity": "sha512-T+V1+1srU2qYNBmJCXZkUY5vQ0B4FSlL3QDROnKQYOqeiQR8UbjNHlPa+TIbM4cuidiN9GaTaOZgSEgsvPbh5A==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "bare": ">=1.14.0"
+      }
+    },
+    "node_modules/bare-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-3.0.0.tgz",
+      "integrity": "sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "bare-os": "^3.0.1"
+      }
+    },
+    "node_modules/bare-stream": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.7.0.tgz",
+      "integrity": "sha512-oyXQNicV1y8nc2aKffH+BUHFRXmx6VrPzlnaEvMhram0nPBrKcEdcyBg5r08D0i8VxngHFAiVyn1QKXpSG0B8A==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "streamx": "^2.21.0"
+      },
+      "peerDependencies": {
+        "bare-buffer": "*",
+        "bare-events": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-buffer": {
+          "optional": true
+        },
+        "bare-events": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -4662,6 +4805,58 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/bl/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/bl/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -5409,6 +5604,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/cssnano": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.1.0.tgz",
@@ -5599,6 +5801,32 @@
         "callsite": "^1.0.0"
       }
     },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -6285,6 +6513,16 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "license": "(MIT OR WTFPL)",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/exsolve": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
@@ -6554,6 +6792,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -6708,6 +6953,13 @@
         "git-up": "^8.1.0"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/glob": {
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -7120,6 +7372,98 @@
         "url": "https://opencollective.com/ioredis"
       }
     },
+    "node_modules/ipx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ipx/-/ipx-2.1.1.tgz",
+      "integrity": "sha512-XuM9FEGOT+/45mfAWZ5ykwkZ/oE7vWpd1iWjRffMWlwAYIRzb/xD6wZhQ4BzmPMX6Ov5dqK0wUyD0OEN9oWT6g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@fastify/accept-negotiator": "^1.1.0",
+        "citty": "^0.1.5",
+        "consola": "^3.2.3",
+        "defu": "^6.1.4",
+        "destr": "^2.0.2",
+        "etag": "^1.8.1",
+        "h3": "^1.10.0",
+        "image-meta": "^0.2.0",
+        "listhen": "^1.5.6",
+        "ofetch": "^1.3.3",
+        "pathe": "^1.1.2",
+        "sharp": "^0.32.6",
+        "svgo": "^3.2.0",
+        "ufo": "^1.3.2",
+        "unstorage": "^1.10.1",
+        "xss": "^1.0.14"
+      },
+      "bin": {
+        "ipx": "bin/ipx.mjs"
+      }
+    },
+    "node_modules/ipx/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/ipx/node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/ipx/node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "license": "CC0-1.0",
+      "optional": true
+    },
+    "node_modules/ipx/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/ipx/node_modules/svgo": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
     "node_modules/iron-webcrypto": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz",
@@ -7934,6 +8278,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -8000,6 +8357,13 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/mlly": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
@@ -8096,6 +8460,13 @@
       "integrity": "sha512-9ca1h0Xjvo9bEkE4UOxgAzLV0jHKe6LMaxo37ND2DAhhAtd0j8pR1Wxz+/goMrZO8AEZTWCmyaOsFI/W5AdpCQ==",
       "license": "MIT"
     },
+    "node_modules/napi-build-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
+      "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/netlify": {
       "version": "13.3.5",
       "resolved": "https://registry.npmjs.org/netlify/-/netlify-13.3.5.tgz",
@@ -8241,6 +8612,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/node-abi": {
+      "version": "3.75.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.75.0.tgz",
+      "integrity": "sha512-OhYaY5sDsIka7H7AtijtI9jwGYLyl29eQn/W623DiN/MIv5sUqc4g7BIDThX+gb7di9f6xK02nkp8sdfFWZLTg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
@@ -9535,6 +9919,95 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
+      "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^2.0.0",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/prebuild-install/node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/tar-fs": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.3.tgz",
+      "integrity": "sha512-090nwYJDmlhwFwEW3QQl+vaNnxsO2yVsd45eTKRBzSzu+hlb1w2K9inVq5b0ngXuLVqQ4ApvsUHHnu/zQNkWAg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/precinct": {
       "version": "12.2.0",
       "resolved": "https://registry.npmjs.org/precinct/-/precinct-12.2.0.tgz",
@@ -9725,6 +10198,29 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "optional": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/rc9": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
@@ -10164,6 +10660,74 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "license": "ISC"
     },
+    "node_modules/sharp": {
+      "version": "0.32.6",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
+      "integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.2",
+        "node-addon-api": "^6.1.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.5.4",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^3.0.4",
+        "tunnel-agent": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/sharp/node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/sharp/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/sharp/node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sharp/node_modules/node-addon-api": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
+      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -10281,6 +10845,53 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/simple-git": {
       "version": "3.28.0",
       "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.28.0.tgz",
@@ -10609,6 +11220,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/strip-literal": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.0.0.tgz",
@@ -10748,6 +11369,21 @@
         "node": ">=18"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.1.0.tgz",
+      "integrity": "sha512-5Mty5y/sOF1YWj1J6GiBodjlDc05CUR8PKXrsnFAiSG0xA+GHeWLovaZPYUDXkH/1iKRf2+M5+OrRgzC7O9b7w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
+      },
+      "optionalDependencies": {
+        "bare-fs": "^4.0.1",
+        "bare-path": "^3.0.0"
+      }
+    },
     "node_modules/tar-stream": {
       "version": "3.1.7",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
@@ -10922,6 +11558,19 @@
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
       "license": "0BSD"
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/type-fest": {
       "version": "4.41.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
@@ -12134,6 +12783,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/xss": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.15.tgz",
+      "integrity": "sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "bin": {
+        "xss": "bin/xss"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/xss/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

frontend_nuxt/package.json

@@ -9,6 +9,7 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
+    "@nuxt/image": "^1.11.0",
     "@stomp/stompjs": "^7.0.0",
     "cropperjs": "^1.6.2",
     "echarts": "^5.6.0",

frontend_nuxt/pages/about/index.vue

@@ -1,54 +1,51 @@
 <template>
   <div class="about-page">
-    <BaseTabs v-model="selectedTab" :tabs="tabs" class="about-tabs">
-      <template #default>
-        <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>
-      </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>
 </template>
 
 <script>
-import { ref, watch } from '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) => {
@@ -67,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)
@@ -92,14 +89,6 @@ export default {
   margin: 0 auto;
 }
 
-.about-tabs {
-  top: calc(var(--header-height) + 1px);
-  background-color: var(--background-color-blur);
-  margin-bottom: 20px;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
 .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/activities.vue

@@ -7,7 +7,7 @@
     <div class="activity-list-page-card" v-for="a in activities" :key="a.id">
       <div class="activity-list-page-card-normal">
         <div v-if="a.icon" class="activity-card-normal-left">
-          <img :src="a.icon" alt="avatar" class="activity-card-left-avatar-img" />
+          <BaseImage :src="a.icon" alt="avatar" class="activity-card-left-avatar-img" />
         </div>
         <div class="activity-card-normal-right">
           <div class="activity-card-normal-right-header">

frontend_nuxt/pages/index.vue

@@ -88,7 +88,7 @@
               class="article-member-avatar-item"
               :to="`/users/${member.id}`"
             >
-              <img class="article-member-avatar-item-img" :src="member.avatar" alt="avatar" />
+              <BaseImage class="article-member-avatar-item-img" :src="member.avatar" alt="avatar" />
             </NuxtLink>
           </div>
 

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

@@ -25,7 +25,7 @@
             {{ loadingMore ? '加载中...' : '查看更多消息' }}
           </div>
         </div>
-        <BaseTimeline :items="messages" hover>
+        <BaseTimeline :items="messages">
           <template #item="{ item }">
             <div class="message-header">
               <div class="user-name">
@@ -35,7 +35,7 @@
                 {{ TimeManager.format(item.createdAt) }}
               </div>
             </div>
-            <div v-if="item.replyTo" class="reply-preview">
+            <div v-if="item.replyTo" class="reply-preview info-content-text">
               <div class="reply-author">{{ item.replyTo.sender.username }}</div>
               <div class="reply-content" v-html="renderMarkdown(item.replyTo.content)"></div>
             </div>
@@ -492,6 +492,7 @@ function goBack() {
 
 .messages-list {
   overflow-y: auto;
+  overflow-x: hidden;
   padding: 20px;
   padding-bottom: 100px;
   display: flex;
@@ -597,10 +598,12 @@ function goBack() {
 }
 
 .reply-preview {
-  padding: 5px 10px;
+  margin-top: 10px;
+  padding: 10px;
   border-left: 5px solid var(--primary-color);
   margin-bottom: 5px;
   font-size: 13px;
+  background-color: var(--menu-selected-background-color);
 }
 
 .reply-author {

frontend_nuxt/pages/message-box/index.vue

@@ -8,117 +8,111 @@
       <i class="fas fa-compress" @click="minimize" title="最小化"></i>
     </div>
     <BaseTabs v-model="activeTab" :tabs="tabs">
-      <template #default>
-        <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-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-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 && !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 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"
             />
           </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>
+        </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-if="!loading"
-            v-for="convo in conversations"
-            :key="convo.id"
+            v-for="ch in channels"
+            :key="ch.id"
             class="conversation-item"
-            @click="goToConversation(convo.id)"
+            @click="goToChannel(ch.id)"
           >
             <div class="conversation-avatar">
-              <img
-                :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
-                :alt="getOtherParticipant(convo)?.username || '用户'"
+              <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">
-                  {{ getOtherParticipant(convo)?.username || '未知用户' }}
+                  {{ ch.name }}
+                  <span v-if="ch.unreadCount > 0" class="unread-dot"></span>
                 </div>
                 <div class="message-time">
-                  {{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
+                  {{ formatTime(ch.lastMessage?.createdAt || ch.createdAt) }}
                 </div>
               </div>
-
               <div class="last-message-row">
                 <div class="last-message">
                   {{
-                    convo.lastMessage
-                      ? stripMarkdownLength(convo.lastMessage.content, 100)
-                      : '暂无消息'
+                    ch.lastMessage
+                      ? stripMarkdownLength(ch.lastMessage.content, 100)
+                      : ch.description
                   }}
                 </div>
-                <div v-if="convo.unreadCount > 0" class="unread-count-badge">
-                  {{ convo.unreadCount }}
-                </div>
+                <div class="member-count">成员 {{ ch.memberCount }}</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">
-                <img
-                  :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>
-      </template>
+      </div>
     </BaseTabs>
   </div>
 </template>
@@ -152,14 +146,14 @@ const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadF
 let subscription = null
 
 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')
-const tabs = [
-  { name: 'messages', label: '站内信' },
-  { name: 'channels', label: '频道' },
-]
 
 async function fetchConversations() {
   const token = getToken()
@@ -224,6 +218,14 @@ async function fetchChannels() {
   }
 }
 
+watch(activeTab, (tab) => {
+  if (tab === 'messages') {
+    fetchConversations()
+  } else {
+    fetchChannels()
+  }
+})
+
 async function goToChannel(id) {
   const token = getToken()
   if (!token) {
@@ -283,14 +285,6 @@ watch(isConnected, (newValue) => {
   }
 })
 
-watch(activeTab, (val) => {
-  if (val === 'messages') {
-    fetchConversations()
-  } else {
-    fetchChannels()
-  }
-})
-
 onUnmounted(() => {
   if (subscription) {
     subscription.unsubscribe()
@@ -329,10 +323,22 @@ function minimize() {
   cursor: pointer;
 }
 
-.messages-container :deep(.base-tabs-header) {
+:deep(.base-tabs-header) {
+  display: flex;
+  border-bottom: 1px solid var(--normal-border-color);
   margin-bottom: 16px;
 }
 
+:deep(.base-tabs-item) {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+:deep(.base-tabs-item.selected) {
+  border-bottom: 2px solid var(--primary-color);
+  color: var(--primary-color);
+}
+
 .loading-message {
   display: flex;
   justify-content: center;
@@ -494,7 +500,7 @@ function minimize() {
     display: block;
   }
 
-  .base-tabs-wrapper,
+  :deep(.base-tabs-header),
   .loading-message,
   .error-container,
   .search-container,

frontend_nuxt/pages/new-post.vue

@@ -45,7 +45,7 @@
         <div class="prize-row">
           <span class="prize-row-title">奖品图片</span>
           <label class="prize-container">
-            <img v-if="prizeIcon" :src="prizeIcon" class="prize-preview" alt="prize" />
+            <BaseImage v-if="prizeIcon" :src="prizeIcon" class="prize-preview" alt="prize" />
             <i v-else class="fa-solid fa-image default-prize-icon"></i>
             <div class="prize-overlay">上传奖品图片</div>
             <input type="file" class="prize-input" accept="image/*" @change="onPrizeIconChange" />

frontend_nuxt/pages/points.vue

@@ -1,170 +1,175 @@
 <template>
   <div class="point-mall-page">
     <BaseTabs v-model="selectedTab" :tabs="tabs">
-      <template #default>
-        <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>
+      <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>
-
-            <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="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="trend" v-if="trendOption">
+            <div class="section-title">积分走势</div>
+            <ClientOnly>
+              <VChart :option="trendOption" :autoresize="true" style="height: 300px" />
+            </ClientOnly>
+          </section>
 
-            <section class="goods">
-              <div class="goods-item" v-for="(good, idx) in goods" :key="idx">
-                <img 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">
+          <div class="loading-points-container" v-if="isLoading">
             <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="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 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_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">
-                    评论
+        </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">
+                    发送评论
                     <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 }}积分
+                    ，获得{{ 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 v-else>
+                    被评论
+                    <NuxtLink
+                      :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                      class="timeline-link"
+                      >{{ stripMarkdownLength(item.commentContent, 100) }}</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>
+                <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>
     </BaseTabs>
   </div>
@@ -177,23 +182,24 @@ import { toast } from '~/main'
 import RedeemPopup from '~/components/RedeemPopup.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
-import BaseTabs from '~/components/BaseTabs.vue'
 import { 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
 
 const selectedTab = ref('mall')
 const tabs = [
-  { name: 'mall', label: '积分兑换' },
-  { name: 'history', label: '积分历史' },
+  { 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 积分',
@@ -223,13 +229,35 @@ const iconMap = {
   LOTTERY_REWARD: 'fas fa-ticket-alt',
 }
 
+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 () => {
   isLoading.value = true
   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
 })
 
@@ -315,6 +343,21 @@ const submitRedeem = async () => {
   padding: 0 20px;
 }
 
+:deep(.base-tabs-header) {
+  display: flex;
+  border-bottom: 1px solid var(--normal-border-color);
+}
+
+:deep(.base-tabs-item) {
+  padding: 10px 15px;
+  cursor: pointer;
+}
+
+:deep(.base-tabs-item.selected) {
+  border-bottom: 2px solid var(--primary-color);
+  color: var(--primary-color);
+}
+
 .timeline-container {
   padding: 10px 20px;
 }
@@ -350,7 +393,8 @@ const submitRedeem = async () => {
 }
 
 .rules,
-.goods {
+.goods,
+.trend {
   margin-top: 20px;
 }
 

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

@@ -47,7 +47,7 @@
       <div class="info-content-container author-info-container">
         <div class="user-avatar-container" @click="gotoProfile">
           <div class="user-avatar-item">
-            <img class="user-avatar-item-img" :src="author.avatar" alt="avatar" />
+            <BaseImage class="user-avatar-item-img" :src="author.avatar" alt="avatar" />
           </div>
           <div v-if="isMobile" class="info-content-header">
             <div class="user-name">
@@ -99,7 +99,7 @@
           <div class="prize-info">
             <div class="prize-info-left">
               <div class="prize-icon">
-                <img
+                <BaseImage
                   class="prize-icon-img"
                   v-if="lottery.prizeIcon"
                   :src="lottery.prizeIcon"
@@ -146,7 +146,7 @@
           </div>
         </div>
         <div class="prize-member-container">
-          <img
+          <BaseImage
             v-for="p in lotteryParticipants"
             :key="p.id"
             class="prize-member-avatar"
@@ -157,7 +157,7 @@
           <div v-if="lotteryEnded && lotteryWinners.length" class="prize-member-winner">
             <i class="fas fa-medal medal-icon"></i>
             <span class="prize-member-winner-name">获奖者: </span>
-            <img
+            <BaseImage
               v-for="w in lotteryWinners"
               :key="w.id"
               class="prize-member-avatar"
@@ -1225,7 +1225,6 @@ onMounted(async () => {
 .info-content-text {
   font-size: 16px;
   line-height: 1.5;
-  width: 100%;
 }
 
 .article-footer-container {

frontend_nuxt/pages/settings.vue

@@ -15,7 +15,7 @@
         <div class="avatar-row">
           <!-- label 充当点击区域，内部隐藏 input -->
           <label class="avatar-container">
-            <img :src="avatar" class="avatar-preview" alt="avatar" />
+            <BaseImage :src="avatar" class="avatar-preview" alt="avatar" />
             <!-- 半透明蒙层：hover 时出现 -->
             <div class="avatar-overlay">更换头像</div>
             <input type="file" class="avatar-input" accept="image/*" @change="onAvatarChange" />

frontend_nuxt/pages/users/[id].vue

@@ -7,7 +7,7 @@
     <div v-else>
       <div class="profile-page-header">
         <div class="profile-page-header-avatar">
-          <img :src="user.avatar" alt="avatar" class="profile-page-header-avatar-img" />
+          <BaseImage :src="user.avatar" alt="avatar" class="profile-page-header-avatar-img" />
         </div>
         <div class="profile-page-header-user-info">
           <div class="profile-page-header-user-info-name">{{ user.username }}</div>
@@ -72,247 +72,244 @@
         </div>
       </div>
 
-      <BaseTabs v-model="selectedTab" :tabs="tabs" class="profile-tabs">
-        <template #default>
-          <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>
+      <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>
-              <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 class="total-summary-item">
+                  <div class="total-summary-item-label">已读帖子</div>
+                  <div class="total-summary-item-value">{{ user.readPosts }}</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 }}
-                        </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 class="total-summary-item">
+                  <div class="total-summary-item-label">已送出的💗</div>
+                  <div class="total-summary-item-value">{{ user.likesSent }}</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 }">
-                        <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 class="total-summary-item">
+                  <div class="total-summary-item-label">已收到的💗</div>
+                  <div class="total-summary-item-value">{{ user.likesReceived }}</div>
                 </div>
               </div>
             </div>
-
-            <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 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
-                  :class="['timeline-tab-item', { selected: timelineFilter === 'articles' }]"
-                  @click="timelineFilter = 'articles'"
-                >
-                  文章
-                </div>
-                <div
-                  :class="['timeline-tab-item', { selected: timelineFilter === 'comments' }]"
-                  @click="timelineFilter = 'comments'"
-                >
-                  评论和回复
+                <div v-else>
+                  <div class="summary-empty">暂无热门回复</div>
                 </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'">
-                      发布了文章
+              <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-date">{{ formatDate(item.createdAt) }}</div>
+                      <div class="timeline-snippet">
+                        {{ stripMarkdown(item.post.snippet) }}
+                      </div>
+                      <div class="timeline-date">
+                        {{ formatDate(item.post.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'">
-                      创建了标签
+                  </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 }">
                       <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.createdAt) }}</div>
+                      <div class="timeline-date">
+                        {{ formatDate(item.tag.createdAt) }}
+                      </div>
                     </template>
-                  </template>
-                </BaseTimeline>
-              </div>
-            </div>
-
-            <div v-else-if="selectedTab === 'following'" class="follow-container">
-              <div class="follow-tabs">
-                <div
-                  :class="['follow-tab-item', { selected: followTab === 'followers' }]"
-                  @click="followTab = 'followers'"
-                >
-                  关注者
+                  </BaseTimeline>
                 </div>
-                <div
-                  :class="['follow-tab-item', { selected: followTab === 'following' }]"
-                  @click="followTab = 'following'"
-                >
-                  正在关注
+                <div v-else>
+                  <div class="summary-empty">暂无标签</div>
                 </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 === '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>
-
-            <div v-else-if="selectedTab === 'favorites'" class="favorites-container">
-              <div v-if="favoritePosts.length > 0">
-                <BaseTimeline :items="favoritePosts">
-                  <template #item="{ item }">
+            <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-snippet">
-                      {{ stripMarkdown(item.post.snippet) }}
-                    </div>
-                    <div class="timeline-date">{{ formatDate(item.post.createdAt) }}</div>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
                   </template>
-                </BaseTimeline>
-              </div>
-              <div v-else>
-                <BasePlaceholder text="暂无收藏文章" icon="fas fa-inbox" />
-              </div>
+                  <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>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                  </template>
+                </template>
+              </BaseTimeline>
             </div>
+          </div>
 
-            <div v-else-if="selectedTab === 'achievements'" class="achievements-container">
-              <AchievementList :medals="medals" :can-select="isMine" />
+          <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>
-          </template>
+            <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-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>
       </BaseTabs>
     </div>
@@ -325,9 +322,9 @@ 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 BaseTabs from '~/components/BaseTabs.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { prevLevelExp } from '~/utils/level'
@@ -369,11 +366,11 @@ const selectedTab = ref(
     : 'summary',
 )
 const tabs = [
-  { 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' },
+  { 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')
 
@@ -771,11 +768,13 @@ watch(selectedTab, async (val) => {
   font-size: 14px;
 }
 
-.profile-tabs :deep(.base-tabs-header) {
+:deep(.base-tabs-header) {
   position: sticky;
   top: calc(var(--header-height) + 1px);
   z-index: 200;
   background-color: var(--background-color-blur);
+  display: flex;
+  flex-direction: row;
   padding: 0 20px;
   border-bottom: 1px solid var(--normal-border-color);
   scrollbar-width: none;
@@ -783,7 +782,7 @@ watch(selectedTab, async (val) => {
   backdrop-filter: var(--blur-10);
 }
 
-.profile-tabs :deep(.base-tab-item) {
+:deep(.base-tabs-item) {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
@@ -796,6 +795,11 @@ watch(selectedTab, async (val) => {
   white-space: nowrap;
 }
 
+:deep(.base-tabs-item.selected) {
+  color: var(--primary-color);
+  border-bottom: 2px solid var(--primary-color);
+}
+
 .profile-summary {
   display: flex;
   flex-direction: column;
@@ -950,7 +954,7 @@ watch(selectedTab, async (val) => {
     height: 100px;
   }
 
-  .profile-tabs :deep(.base-tab-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

@@ -92,7 +92,7 @@ function linkPlugin(md) {
 
 /** @section MarkdownIt 实例：开启 HTML，但配合强净化 */
 const md = new MarkdownIt({
-  html: true, // ⭐ 允许行内 HTML（为 <video> 服务）
+  html: true,
   linkify: true,
   breaks: true,
   highlight: (str, lang) => {
@@ -106,11 +106,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)
@@ -221,7 +226,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/vditor.js

@@ -77,7 +77,7 @@ export function createVditor(editorId, options = {}) {
             const list = await fetchMentions(key)
             return list.map((u) => ({
               value: `@[${u.username}]`,
-              html: `<img src="${u.avatar}" /> @${u.username}`,
+              html: `<BaseImage src="${u.avatar}" /> @${u.username}`,
             }))
           },
         },

package.json

@@ -2,7 +2,7 @@
   "name": "openisle",
   "version": "1.0.0",
   "private": true,
-  "description": "<p align=\"center\">   <img alt=\"OpenIsle\" src=\"https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png\" width=\"200\">   <br><br>   高效的开源社区前后端端平台   <br><br>   <a href=\"LICENSE\"><img src=\"https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\"></a> </p>",
+  "description": "<p align=\"center\">   <BaseImage alt=\"OpenIsle\" src=\"https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png\" width=\"200\">   <br><br>   高效的开源社区前后端端平台   <br><br>   <a href=\"LICENSE\"><BaseImage src=\"https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\"></a> </p>",
   "author": "nagisa77",
   "license": "ISC",
   "homepage": "https://www.open-isle.com",