From 013d47e8e45d9fbb04bebf4e4cbfa27d9ddc0c5f Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Wed, 27 Aug 2025 12:07:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=89=8D=E7=AB=AF=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=EF=BC=9A=E5=9B=BE=E7=89=87loading=E5=81=9A=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=EF=BC=8C=E7=8E=B0=E5=9C=A8=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=B2=A1=E5=8A=A0=E8=BD=BD=E5=87=BA=E6=9D=A5=E4=BC=9A=E5=87=BA?=
 =?UTF-8?q?=E7=8E=B0=E5=A6=82=E4=B8=8B=E6=83=85=E5=86=B5=EF=BC=8C=20?=
 =?UTF-8?q?=E4=B8=8D=E4=B8=9D=E6=BB=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  4 +-
 .../openisle/controller/RssController.java    |  2 +-
 frontend_nuxt/components/AchievementList.vue  |  2 +-
 frontend_nuxt/components/ActivityPopup.vue    |  2 +-
 frontend_nuxt/components/ArticleCategory.vue  |  2 +-
 frontend_nuxt/components/ArticleTags.vue      |  2 +-
 frontend_nuxt/components/AvatarCropper.vue    |  2 +-
 frontend_nuxt/components/BaseImage.vue        | 40 ++++++++++++++-----
 frontend_nuxt/components/BaseTimeline.vue     |  4 +-
 frontend_nuxt/components/CategorySelect.vue   |  2 +-
 frontend_nuxt/components/CommentItem.vue      |  2 +-
 frontend_nuxt/components/Dropdown.vue         | 18 +++++++--
 frontend_nuxt/components/HeaderComponent.vue  | 12 +++---
 frontend_nuxt/components/MedalPopup.vue       |  2 +-
 frontend_nuxt/components/MenuComponent.vue    |  4 +-
 frontend_nuxt/components/ReactionsGroup.vue   |  6 +--
 .../components/SearchPersonDropdown.vue       |  2 +-
 frontend_nuxt/components/TagSelect.vue        |  2 +-
 frontend_nuxt/components/UserList.vue         |  2 +-
 frontend_nuxt/pages/activities.vue            |  2 +-
 frontend_nuxt/pages/login.vue                 | 24 +++++++++--
 frontend_nuxt/pages/message-box/[id].vue      |  7 ++--
 frontend_nuxt/pages/message-box/index.vue     |  4 +-
 frontend_nuxt/pages/new-post.vue              |  2 +-
 frontend_nuxt/pages/points.vue                |  2 +-
 frontend_nuxt/pages/posts/[id]/index.vue      |  8 ++--
 frontend_nuxt/pages/settings.vue              |  2 +-
 frontend_nuxt/pages/signup.vue                | 24 +++++++++--
 frontend_nuxt/pages/users/[id].vue            |  2 +-
 frontend_nuxt/utils/markdown.js               |  2 +-
 frontend_nuxt/utils/vditor.js                 |  2 +-
 package.json                                  |  2 +-
 32 files changed, 130 insertions(+), 65 deletions(-)

diff --git a/README.md b/README.md
index a394d7574..ae13153bc 100644
--- a/README.md
+++ b/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>
 
 ## 💡 简介
diff --git a/backend/src/main/java/com/openisle/controller/RssController.java b/backend/src/main/java/com/openisle/controller/RssController.java
index 7dc6122f7..6a3bddfb9 100644
--- a/backend/src/main/java/com/openisle/controller/RssController.java
+++ b/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;
 
diff --git a/frontend_nuxt/components/AchievementList.vue b/frontend_nuxt/components/AchievementList.vue
index ddcceef94..60598739e 100644
--- a/frontend_nuxt/components/AchievementList.vue
+++ b/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 }]"
diff --git a/frontend_nuxt/components/ActivityPopup.vue b/frontend_nuxt/components/ActivityPopup.vue
index cf64a22ef..e781a0dbf 100644
--- a/frontend_nuxt/components/ActivityPopup.vue
+++ b/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>
diff --git a/frontend_nuxt/components/ArticleCategory.vue b/frontend_nuxt/components/ArticleCategory.vue
index e075005a3..bfae92c90 100644
--- a/frontend_nuxt/components/ArticleCategory.vue
+++ b/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"
diff --git a/frontend_nuxt/components/ArticleTags.vue b/frontend_nuxt/components/ArticleTags.vue
index 84aec68d7..a5f801081 100644
--- a/frontend_nuxt/components/ArticleTags.vue
+++ b/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"
diff --git a/frontend_nuxt/components/AvatarCropper.vue b/frontend_nuxt/components/AvatarCropper.vue
index 2cf260fd7..5571559e1 100644
--- a/frontend_nuxt/components/AvatarCropper.vue
+++ b/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>
diff --git a/frontend_nuxt/components/BaseImage.vue b/frontend_nuxt/components/BaseImage.vue
index 09601c8c2..b28cdf330 100644
--- a/frontend_nuxt/components/BaseImage.vue
+++ b/frontend_nuxt/components/BaseImage.vue
@@ -1,13 +1,14 @@
 <template>
   <NuxtImg
-    v-bind="attrs"
+    v-bind="passAttrs"
     :src="src"
     :alt="alt"
     loading="lazy"
     :placeholder="placeholder"
     placeholder-class="base-image-ph"
     @load="onLoad"
-    :class="['base-image', attrs.class, { 'is-loaded': loaded }]"
+    @error="onError"
+    :class="['base-image', passAttrs.class, { 'is-loaded': loaded }]"
   />
 </template>
 
@@ -21,25 +22,46 @@ const props = defineProps({
 })
 
 const attrs = useAttrs()
+
+const passAttrs = computed(() => {
+  const { placeholder, ...rest } = attrs
+  return rest
+})
+
 const loaded = ref(false)
 const img = useImage()
-const placeholder = computed(() => img(props.src, { w: 16, h: 16, f: 'webp', q: 40, blur: 2 }))
+
+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 {
-  opacity: 0;
-  transition: opacity 0.25s;
+  display: block;
+  transition:
+    filter 0.35s ease,
+    transform 0.35s ease,
+    opacity 0.35s ease;
+  opacity: 0.92;
 }
+
+.base-image-ph {
+  filter: blur(10px) saturate(0.85);
+  transform: scale(1.02);
+}
+
 .base-image.is-loaded {
+  filter: none;
+  transform: none;
   opacity: 1;
 }
-:deep(img.base-image-ph) {
-  filter: blur(10px);
-  transform: scale(1.03);
-}
 </style>
diff --git a/frontend_nuxt/components/BaseTimeline.vue b/frontend_nuxt/components/BaseTimeline.vue
index d381c6783..f9a2043fa 100644
--- a/frontend_nuxt/components/BaseTimeline.vue
+++ b/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>
diff --git a/frontend_nuxt/components/CategorySelect.vue b/frontend_nuxt/components/CategorySelect.vue
index dfbe81e75..68af8f283 100644
--- a/frontend_nuxt/components/CategorySelect.vue
+++ b/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"
diff --git a/frontend_nuxt/components/CommentItem.vue b/frontend_nuxt/components/CommentItem.vue
index 10f74bf4e..aba727162 100644
--- a/frontend_nuxt/components/CommentItem.vue
+++ b/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">
diff --git a/frontend_nuxt/components/Dropdown.vue b/frontend_nuxt/components/Dropdown.vue
index f30e1b1a6..a580cc510 100644
--- a/frontend_nuxt/components/Dropdown.vue
+++ b/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>
diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index 909189529..f512c9178 100644
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/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('邀请链接已复制')
           })
diff --git a/frontend_nuxt/components/MedalPopup.vue b/frontend_nuxt/components/MedalPopup.vue
index c0af2d0fc..6c741f618 100644
--- a/frontend_nuxt/components/MedalPopup.vue
+++ b/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>
diff --git a/frontend_nuxt/components/MenuComponent.vue b/frontend_nuxt/components/MenuComponent.vue
index 72e8d3ede..3ecac2f09 100644
--- a/frontend_nuxt/components/MenuComponent.vue
+++ b/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"
diff --git a/frontend_nuxt/components/ReactionsGroup.vue b/frontend_nuxt/components/ReactionsGroup.vue
index ee9de00db..58b145330 100644
--- a/frontend_nuxt/components/ReactionsGroup.vue
+++ b/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>
diff --git a/frontend_nuxt/components/SearchPersonDropdown.vue b/frontend_nuxt/components/SearchPersonDropdown.vue
index 1ff229bad..d6b25bba0 100644
--- a/frontend_nuxt/components/SearchPersonDropdown.vue
+++ b/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"
diff --git a/frontend_nuxt/components/TagSelect.vue b/frontend_nuxt/components/TagSelect.vue
index 14de024a7..c6e0d9a6e 100644
--- a/frontend_nuxt/components/TagSelect.vue
+++ b/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"
diff --git a/frontend_nuxt/components/UserList.vue b/frontend_nuxt/components/UserList.vue
index 7d8f4e953..9126b6bac 100644
--- a/frontend_nuxt/components/UserList.vue
+++ b/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>
diff --git a/frontend_nuxt/pages/activities.vue b/frontend_nuxt/pages/activities.vue
index 5f0180334..c30feee28 100644
--- a/frontend_nuxt/pages/activities.vue
+++ b/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">
diff --git a/frontend_nuxt/pages/login.vue b/frontend_nuxt/pages/login.vue
index 8174c437b..922a04bd8 100644
--- a/frontend_nuxt/pages/login.vue
+++ b/frontend_nuxt/pages/login.vue
@@ -36,19 +36,35 @@
 
     <div class="other-login-page-content">
       <div class="login-page-button" @click="loginWithGoogle">
-        <img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
+        <BaseImage
+          class="login-page-button-icon"
+          src="../assets/icons/google.svg"
+          alt="Google Logo"
+        />
         <div class="login-page-button-text">Google 登录</div>
       </div>
       <div class="login-page-button" @click="loginWithGithub">
-        <img class="login-page-button-icon" src="../assets/icons/github.svg" alt="GitHub Logo" />
+        <BaseImage
+          class="login-page-button-icon"
+          src="../assets/icons/github.svg"
+          alt="GitHub Logo"
+        />
         <div class="login-page-button-text">GitHub 登录</div>
       </div>
       <div class="login-page-button" @click="loginWithDiscord">
-        <img class="login-page-button-icon" src="../assets/icons/discord.svg" alt="Discord Logo" />
+        <BaseImage
+          class="login-page-button-icon"
+          src="../assets/icons/discord.svg"
+          alt="Discord Logo"
+        />
         <div class="login-page-button-text">Discord 登录</div>
       </div>
       <div class="login-page-button" @click="loginWithTwitter">
-        <img class="login-page-button-icon" src="../assets/icons/twitter.svg" alt="Twitter Logo" />
+        <BaseImage
+          class="login-page-button-icon"
+          src="../assets/icons/twitter.svg"
+          alt="Twitter Logo"
+        />
         <div class="login-page-button-text">Twitter 登录</div>
       </div>
     </div>
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index 8f183b127..dc96c1b18 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/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>
@@ -597,10 +597,11 @@ function goBack() {
 }
 
 .reply-preview {
-  padding: 5px 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 {
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index abd255dfc..ffb91ffb2 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -41,7 +41,7 @@
         @click="goToConversation(convo.id)"
       >
         <div class="conversation-avatar">
-          <img
+          <BaseImage
             :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
             :alt="getOtherParticipant(convo)?.username || '用户'"
             class="avatar-img"
@@ -88,7 +88,7 @@
           @click="goToChannel(ch.id)"
         >
           <div class="conversation-avatar">
-            <img
+            <BaseImage
               :src="ch.avatar || '/default-avatar.svg'"
               :alt="ch.name"
               class="avatar-img"
diff --git a/frontend_nuxt/pages/new-post.vue b/frontend_nuxt/pages/new-post.vue
index e66c56353..1252330a0 100644
--- a/frontend_nuxt/pages/new-post.vue
+++ b/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" />
diff --git a/frontend_nuxt/pages/points.vue b/frontend_nuxt/pages/points.vue
index f4bdf0255..0c3e64616 100644
--- a/frontend_nuxt/pages/points.vue
+++ b/frontend_nuxt/pages/points.vue
@@ -39,7 +39,7 @@
 
         <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" />
+            <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>
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index bcdf955e0..30ec1f7a9 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/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"
diff --git a/frontend_nuxt/pages/settings.vue b/frontend_nuxt/pages/settings.vue
index cc2028e38..5e5355580 100644
--- a/frontend_nuxt/pages/settings.vue
+++ b/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" />
diff --git a/frontend_nuxt/pages/signup.vue b/frontend_nuxt/pages/signup.vue
index bda1dd4b5..8cf6d1500 100644
--- a/frontend_nuxt/pages/signup.vue
+++ b/frontend_nuxt/pages/signup.vue
@@ -70,19 +70,35 @@
 
     <div class="other-signup-page-content">
       <div class="signup-page-button" @click="signupWithGoogle">
-        <img class="signup-page-button-icon" src="~/assets/icons/google.svg" alt="Google Logo" />
+        <BaseImage
+          class="signup-page-button-icon"
+          src="~/assets/icons/google.svg"
+          alt="Google Logo"
+        />
         <div class="signup-page-button-text">Google 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithGithub">
-        <img class="signup-page-button-icon" src="~/assets/icons/github.svg" alt="GitHub Logo" />
+        <BaseImage
+          class="signup-page-button-icon"
+          src="~/assets/icons/github.svg"
+          alt="GitHub Logo"
+        />
         <div class="signup-page-button-text">GitHub 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithDiscord">
-        <img class="signup-page-button-icon" src="~/assets/icons/discord.svg" alt="Discord Logo" />
+        <BaseImage
+          class="signup-page-button-icon"
+          src="~/assets/icons/discord.svg"
+          alt="Discord Logo"
+        />
         <div class="signup-page-button-text">Discord 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithTwitter">
-        <img class="signup-page-button-icon" src="~/assets/icons/twitter.svg" alt="Twitter Logo" />
+        <BaseImage
+          class="signup-page-button-icon"
+          src="~/assets/icons/twitter.svg"
+          alt="Twitter Logo"
+        />
         <div class="signup-page-button-text">Twitter 注册</div>
       </div>
     </div>
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index fc9382d49..64881ad7d 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/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>
diff --git a/frontend_nuxt/utils/markdown.js b/frontend_nuxt/utils/markdown.js
index 6de79772f..f6fd3192e 100644
--- a/frontend_nuxt/utils/markdown.js
+++ b/frontend_nuxt/utils/markdown.js
@@ -48,7 +48,7 @@ function tiebaEmojiPlugin(md) {
   md.renderer.rules['tieba-emoji'] = (tokens, idx) => {
     const name = tokens[idx].content
     const file = tiebaEmoji[name]
-    return `<img class="emoji" src="${file}" alt="${name}">`
+    return `<BaseImage class="emoji" src="${file}" alt="${name}">`
   }
   md.inline.ruler.before('emphasis', 'tieba-emoji', (state, silent) => {
     const pos = state.pos
diff --git a/frontend_nuxt/utils/vditor.js b/frontend_nuxt/utils/vditor.js
index bd64a3055..3016fbc69 100644
--- a/frontend_nuxt/utils/vditor.js
+++ b/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}`,
             }))
           },
         },
diff --git a/package.json b/package.json
index 701c64565..1a2fd58a8 100644
--- a/package.json
+++ b/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",