feat: add BaseUserAvatar and unify avatar usage

fix: 修复api playgrond 跳转问题

backend/src/main/java/com/openisle/config/SecurityConfig.java

@@ -101,8 +101,8 @@ public class SecurityConfig {
         "http://localhost",
         "http://30.211.97.238:3000",
         "http://30.211.97.238",
-        "http://192.168.7.98",
-        "http://192.168.7.98:3000",
+        "http://192.168.7.90",
+        "http://192.168.7.90:3000",
         "https://petstore.swagger.io",
         // 允许自建OpenAPI地址
         "https://docs.open-isle.com",

docs/components/api-overview.tsx

@@ -0,0 +1,65 @@
+import Link from "next/link";
+
+import { getOpenAPIOperations } from "@/lib/openapi-operations";
+
+const methodColors: Record<string, string> = {
+  GET: "bg-emerald-100 text-emerald-700",
+  POST: "bg-blue-100 text-blue-700",
+  PUT: "bg-amber-100 text-amber-700",
+  PATCH: "bg-purple-100 text-purple-700",
+  DELETE: "bg-rose-100 text-rose-700",
+};
+
+function MethodBadge({ method }: { method: string }) {
+  const color = methodColors[method] ?? "bg-slate-100 text-slate-700";
+
+  return (
+    <span
+      className={`font-semibold uppercase tracking-wide text-xs px-2 py-1 rounded ${color}`}
+    >
+      {method}
+    </span>
+  );
+}
+
+export function APIOverviewTable() {
+  const operations = getOpenAPIOperations();
+
+  if (operations.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="not-prose mt-6 overflow-x-auto">
+      <table className="w-full border-separate border-spacing-y-2 text-sm">
+        <thead className="text-left text-muted-foreground">
+          <tr>
+            <th className="px-3 py-2 font-medium">路径</th>
+            <th className="px-3 py-2 font-medium">方法</th>
+            <th className="px-3 py-2 font-medium">摘要</th>
+          </tr>
+        </thead>
+        <tbody>
+          {operations.map((operation) => (
+            <tr
+              key={`${operation.method}-${operation.route}`}
+              className="bg-muted/30"
+            >
+              <td className="px-3 py-2 align-top font-mono">
+                <Link className="hover:underline" href={operation.href}>
+                  {operation.route}
+                </Link>
+              </td>
+              <td className="px-3 py-2 align-top">
+                <MethodBadge method={operation.method} />
+              </td>
+              <td className="px-3 py-2 align-top text-muted-foreground">
+                {operation.summary || "—"}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

docs/content/docs/openapi/index.mdx

@@ -2,3 +2,11 @@
 title: API 概览
 description: Open API 接口文档
 ---
+
+import { APIOverviewTable } from "@/components/api-overview";
+
+# 接口列表
+
+以下列表聚合了所有已生成的接口页面，展示对应的路径、请求方法以及摘要，便于快速检索和跳转。
+
+<APIOverviewTable />

docs/lib/openapi-operations.ts

@@ -0,0 +1,68 @@
+import matter from "gray-matter";
+
+import { source } from "@/lib/source";
+
+interface OperationFrontmatter {
+  title?: string;
+  description?: string;
+  _openapi?: {
+    method?: string;
+    route?: string;
+  };
+}
+
+export interface OpenAPIOperation {
+  href: string;
+  method: string;
+  route: string;
+  summary: string;
+}
+
+function parseFrontmatter(content: string): OperationFrontmatter {
+  const result = matter(content);
+
+  return result.data as OperationFrontmatter;
+}
+
+function normalizeSummary(frontmatter: OperationFrontmatter): string {
+  return frontmatter.title ?? frontmatter.description ?? "";
+}
+
+export function getOpenAPIOperations(): OpenAPIOperation[] {
+  return source
+    .getPages()
+    .filter((page) =>
+      page.url.startsWith("/openapi/") && page.url !== "/openapi"
+    )
+    .map((page) => {
+      if (typeof page.data.content !== "string") {
+        return undefined;
+      }
+
+      const frontmatter = parseFrontmatter(page.data.content);
+
+      const method = frontmatter._openapi?.method?.toUpperCase();
+      const route = frontmatter._openapi?.route;
+      const summary = normalizeSummary(frontmatter);
+
+      if (!method || !route) {
+        return undefined;
+      }
+
+      return {
+        href: page.url,
+        method,
+        route,
+        summary,
+      } satisfies OpenAPIOperation;
+    })
+    .filter((operation): operation is OpenAPIOperation => Boolean(operation))
+    .sort((a, b) => {
+      const routeCompare = a.route.localeCompare(b.route);
+      if (routeCompare !== 0) {
+        return routeCompare;
+      }
+
+      return a.method.localeCompare(b.method);
+    });
+}

docs/scripts/generate-docs.ts

@@ -1,10 +1,18 @@
+import { rmSync } from "node:fs";
+
 import { generateFiles } from "fumadocs-openapi";
 import { openapi } from "@/lib/openapi";
 
+const outputDir = "./content/docs/openapi/(generated)";
+
+rmSync(outputDir, { recursive: true, force: true });
+
 void generateFiles({
   input: openapi,
-  output: "./content/docs/openapi/(generated)",
+  output: outputDir,
   // we recommend to enable it
   // make sure your endpoint description doesn't break MDX syntax.
   includeDescription: true,
+  per: "operation",
+  groupBy: "route",
 });

frontend_nuxt/assets/global.css

@@ -121,6 +121,19 @@ body {
   vertical-align: middle;
 }
 
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-icon {
+  animation: spin 1s linear infinite;
+}
+
 /* .vditor {
   --textarea-background-color: transparent;
   border: none !important;

frontend_nuxt/components/BaseTimeline.vue

@@ -1,12 +1,21 @@
 <template>
-  <div class="timeline" :class="{ 'hover-enabled': hover }">
+  <div class="timeline">
     <div class="timeline-item" v-for="(item, idx) in items" :key="idx">
       <div
         class="timeline-icon"
-        :class="{ clickable: !!item.iconClick }"
-        @click="item.iconClick && item.iconClick()"
+        :class="{ clickable: !!item.iconClick && !item.src }"
+        @click="!item.src && item.iconClick && item.iconClick()"
       >
-        <BaseImage v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
+        <BaseUserAvatar
+          v-if="item.src"
+          :class="['timeline-img', { 'is-clickable': !!item.iconClick }]"
+          :user-id="item.userId"
+          :avatar="item.src"
+          :username="item.userName || item.username"
+          :width="32"
+          :link="!item.iconClick"
+          @click.stop="item.iconClick && item.iconClick()"
+        />
         <component
           v-else-if="item.icon && (typeof item.icon !== 'string' || !item.icon.includes(' '))"
           :is="item.icon"
@@ -26,7 +35,6 @@ export default {
   name: 'BaseTimeline',
   props: {
     items: { type: Array, default: () => [] },
-    hover: { type: Boolean, default: false },
   },
 }
 </script>
@@ -46,12 +54,6 @@ export default {
   margin-top: 10px;
 }
 
-.hover-enabled .timeline-item:hover {
-  background-color: var(--menu-selected-background-color);
-  transition: background-color 0.2s;
-  border-radius: 10px;
-}
-
 .timeline-icon {
   position: sticky;
   top: 0;
@@ -71,10 +73,12 @@ export default {
 }
 
 .timeline-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+}
+
+.timeline-img.is-clickable {
+  cursor: pointer;
 }
 
 .timeline-emoji {

frontend_nuxt/components/BaseUserAvatar.vue

@@ -0,0 +1,116 @@
+<template>
+  <component :is="wrapperTag" v-bind="wrapperAttrs" :class="containerClass" :style="mergedStyle">
+    <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="handleError" />
+  </component>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useAttrs } from 'vue'
+
+const DEFAULT_AVATAR = '/default-avatar.svg'
+
+const props = defineProps({
+  userId: {
+    type: [String, Number],
+    required: true,
+  },
+  avatar: {
+    type: String,
+    default: '',
+  },
+  username: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: [Number, String],
+    default: 40,
+  },
+  alt: {
+    type: String,
+    default: '',
+  },
+  link: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const attrs = useAttrs()
+const currentSrc = ref(props.avatar || DEFAULT_AVATAR)
+
+watch(
+  () => props.avatar,
+  (newVal) => {
+    currentSrc.value = newVal || DEFAULT_AVATAR
+  },
+)
+
+const wrapperTag = computed(() => (props.link ? 'NuxtLink' : 'div'))
+const sizeStyle = computed(() => {
+  const value = typeof props.width === 'number' ? `${props.width}px` : props.width || '40px'
+  return {
+    width: value,
+    height: value,
+  }
+})
+
+const altText = computed(() => {
+  if (props.alt) return props.alt
+  if (props.username) return `${props.username}的头像`
+  return '用户头像'
+})
+
+const containerClass = computed(() => {
+  const classes = ['base-user-avatar']
+  if (props.link) classes.push('is-link')
+  if (attrs.class) classes.push(attrs.class)
+  return classes
+})
+
+const mergedStyle = computed(() => {
+  if (!attrs.style) return sizeStyle.value
+  return [sizeStyle.value, attrs.style]
+})
+
+const wrapperAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  if (props.link) {
+    return {
+      ...rest,
+      to: `/users/${props.userId}`,
+    }
+  }
+  return rest
+})
+
+function handleError() {
+  if (currentSrc.value !== DEFAULT_AVATAR) {
+    currentSrc.value = DEFAULT_AVATAR
+  }
+}
+</script>
+
+<style scoped>
+.base-user-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: var(--avatar-background, rgba(0, 0, 0, 0.05));
+}
+
+.base-user-avatar.is-link {
+  cursor: pointer;
+}
+
+.base-user-avatar-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+}
+</style>

frontend_nuxt/components/CommentEditor.vue

@@ -10,7 +10,7 @@
           发布评论
           <span class="shortcut-icon" v-if="!isMobile"> {{ isMac ? '⌘' : 'Ctrl' }} ⏎ </span>
         </template>
-        <template v-else> <loading-four /> 发布中... </template>
+        <template v-else> <loading-four class="loading-icon" /> 发布中... </template>
       </div>
     </div>
   </div>

frontend_nuxt/components/CommentItem.vue

@@ -26,10 +26,14 @@
           <span v-if="level >= 2" class="reply-item">
             <next class="reply-icon" />
             <span class="reply-info">
-              <BaseImage
+              <BaseUserAvatar
+                v-if="comment.parentUserName"
                 class="reply-avatar"
-                :src="comment.parentUserAvatar || '/default-avatar.svg'"
-                alt="avatar"
+                :user-id="comment.parentUserId"
+                :avatar="comment.parentUserAvatar"
+                :username="comment.parentUserName"
+                :width="20"
+                :link="Boolean(comment.parentUserId)"
                 @click="comment.parentUserClick && comment.parentUserClick()"
               />
               <span class="reply-user-name">{{ comment.parentUserName }}</span>
@@ -253,16 +257,19 @@ const submitReply = async (parentUserName, text, clear) => {
       replyList.push({
         id: data.id,
         userName: data.author.username,
+        userId: data.author.id,
         time: TimeManager.format(data.createdAt),
         avatar: data.author.avatar,
         medal: data.author.displayMedal,
         text: data.content,
         parentUserName: parentUserName,
         parentUserAvatar: props.comment.avatar,
+        parentUserId: props.comment.userId,
         reactions: [],
         reply: (data.replies || []).map((r) => ({
           id: r.id,
           userName: r.author.username,
+          userId: r.author.id,
           time: TimeManager.format(r.createdAt),
           avatar: r.author.avatar,
           text: r.content,
@@ -394,9 +401,7 @@ const handleContentClick = (e) => {
 .reply-avatar {
   width: 20px;
   height: 20px;
-  border-radius: 50%;
   margin-right: 5px;
-  cursor: pointer;
 }
 
 .reply-icon {

frontend_nuxt/components/HeaderComponent.vue

@@ -70,7 +70,14 @@
           <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
             <template #trigger>
               <div class="avatar-container">
-                <img class="avatar-img" :src="avatar" alt="avatar" />
+                <BaseUserAvatar
+                  class="avatar-img"
+                  :user-id="authState.userId"
+                  :avatar="avatar"
+                  :username="authState.username"
+                  :width="32"
+                  :link="false"
+                />
                 <down />
               </div>
             </template>
@@ -434,7 +441,6 @@ onMounted(async () => {
   height: 32px;
   border-radius: 50%;
   background-color: lightgray;
-  object-fit: cover;
 }
 
 .dropdown-icon {

frontend_nuxt/components/MessageEditor.vue

@@ -9,7 +9,7 @@
           发送
           <span class="shortcut-icon" v-if="!isMobile"> {{ isMac ? '⌘' : 'Ctrl' }} ⏎ </span>
         </template>
-        <template v-else> <loading-four /> 发送中... </template>
+        <template v-else> <loading-four class="loading-icon" /> 发送中... </template>
       </div>
     </div>
   </div>

frontend_nuxt/components/PostChangeLogItem.vue

@@ -1,12 +1,13 @@
 <template>
   <div :id="`change-log-${log.id}`" class="change-log-container">
     <div class="change-log-text">
-      <BaseImage
+      <BaseUserAvatar
         v-if="log.userAvatar"
         class="change-log-avatar"
-        :src="log.userAvatar"
-        alt="avatar"
-        @click="() => navigateTo(`/users/${log.username}`)"
+        :user-id="log.userId"
+        :avatar="log.userAvatar"
+        :username="log.username"
+        :width="20"
       />
       <span v-if="log.username" class="change-log-user">{{ log.username }}</span>
       <span v-if="log.type === 'CONTENT'" class="change-log-content">变更了文章内容</span>
@@ -57,8 +58,6 @@ import { html } from 'diff2html'
 import { createTwoFilesPatch } from 'diff'
 import { useIsMobile } from '~/utils/screen'
 import 'diff2html/bundles/css/diff2html.min.css'
-import BaseImage from '~/components/BaseImage.vue'
-import { navigateTo } from 'nuxt/app'
 import { themeState } from '~/utils/theme'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ArticleTags from '~/components/ArticleTags.vue'

frontend_nuxt/components/PostLottery.vue

@@ -53,24 +53,26 @@
       </div>
     </div>
     <div class="prize-member-container">
-      <BaseImage
+      <BaseUserAvatar
         v-for="p in lotteryParticipants"
         :key="p.id"
         class="prize-member-avatar"
-        :src="p.avatar"
-        alt="avatar"
-        @click="gotoUser(p.id)"
+        :user-id="p.id"
+        :avatar="p.avatar"
+        :username="p.username"
+        :width="30"
       />
       <div v-if="lotteryEnded && lotteryWinners.length" class="prize-member-winner">
         <medal-one class="medal-icon"></medal-one>
         <span class="prize-member-winner-name">获奖者: </span>
-        <BaseImage
+        <BaseUserAvatar
           v-for="w in lotteryWinners"
           :key="w.id"
           class="prize-member-avatar"
-          :src="w.avatar"
-          alt="avatar"
-          @click="gotoUser(w.id)"
+          :user-id="w.id"
+          :avatar="w.avatar"
+          :username="w.username"
+          :width="30"
         />
         <div v-if="lotteryWinners.length === 1" class="prize-member-winner-name">
           {{ lotteryWinners[0].username }}
@@ -106,8 +108,6 @@ const hasJoined = computed(() => {
   return lotteryParticipants.value.some((p) => p.id === Number(authState.userId))
 })
 
-const gotoUser = (id) => navigateTo(`/users/${id}`, { replace: true })
-
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 const joinLottery = async () => {
@@ -246,8 +246,6 @@ const joinLottery = async () => {
   width: 30px;
   height: 30px;
   margin-left: 3px;
-  border-radius: 50%;
-  object-fit: cover;
   cursor: pointer;
 }
 

frontend_nuxt/components/PostPoll.vue

@@ -17,13 +17,14 @@
               ></div>
             </div>
             <div class="poll-participants">
-              <BaseImage
+              <BaseUserAvatar
                 v-for="p in pollOptionParticipants[idx] || []"
                 :key="p.id"
                 class="poll-participant-avatar"
-                :src="p.avatar"
-                alt="avatar"
-                @click="gotoUser(p.id)"
+                :user-id="p.id"
+                :avatar="p.avatar"
+                :username="p.username"
+                :width="30"
               />
             </div>
           </div>
@@ -152,8 +153,6 @@ watch([hasVoted, pollEnded], ([voted, ended]) => {
   if (voted || ended) showPollResult.value = true
 })
 
-const gotoUser = (id) => navigateTo(`/users/${id}`, { replace: true })
-
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 const voteOption = async (idx) => {
@@ -426,7 +425,6 @@ const submitMultiPoll = async () => {
 .poll-participant-avatar {
   width: 30px;
   height: 30px;
-  border-radius: 50%;
   cursor: pointer;
 }
 </style>

frontend_nuxt/components/SearchPersonDropdown.vue

@@ -24,10 +24,13 @@
       </template>
       <template #option="{ option }">
         <div class="search-option-item">
-          <BaseImage
-            :src="option.avatar || '/default-avatar.svg'"
+          <BaseUserAvatar
             class="avatar"
-            @error="handleAvatarError"
+            :user-id="option.id"
+            :avatar="option.avatar"
+            :username="option.username"
+            :width="32"
+            :link="false"
           />
           <div class="result-body">
             <div class="result-main" v-html="highlight(option.username)"></div>
@@ -87,10 +90,6 @@ const highlight = (text) => {
   return text.replace(reg, (m) => `<span class="highlight">${m}</span>`)
 }
 
-const handleAvatarError = (e) => {
-  e.target.src = '/default-avatar.svg'
-}
-
 watch(selected, async (val) => {
   if (!val) return
   const user = results.value.find((u) => u.id === val)
@@ -178,8 +177,6 @@ defineExpose({
 .avatar {
   width: 32px;
   height: 32px;
-  border-radius: 50%;
-  object-fit: cover;
 }
 
 .result-body {

frontend_nuxt/components/UserList.vue

@@ -2,7 +2,14 @@
   <div class="user-list">
     <BasePlaceholder v-if="users.length === 0" text="暂无用户" icon="inbox" />
     <div v-for="u in users" :key="u.id" class="user-item" @click="handleUserClick(u)">
-      <BaseImage :src="u.avatar" alt="avatar" class="user-avatar" />
+      <BaseUserAvatar
+        class="user-avatar"
+        :user-id="u.id"
+        :avatar="u.avatar"
+        :username="u.username"
+        :width="50"
+        :link="false"
+      />
       <div class="user-info">
         <div class="user-name">{{ u.username }}</div>
         <div v-if="u.introduction" class="user-intro">{{ u.introduction }}</div>
@@ -27,21 +34,21 @@ const handleUserClick = (user) => {
 .user-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
 }
 .user-item {
+  padding-top: 20px;
+  padding-bottom: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
   cursor: pointer;
+  border-bottom: 1px solid var(--normal-border-color);
 }
 .user-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
+  width: 50px;
+  height: 50px;
   flex-shrink: 0;
-  object-fit: cover;
 }
 .user-info {
   display: flex;

frontend_nuxt/pages/about/index.vue

@@ -18,7 +18,9 @@
             </div>
           </div>
           <div class="about-api-title">API文档和调试入口</div>
-          <div class="about-api-link">API Playground <share /></div>
+          <a href="http://docs.open-isle.com" target="_blank" rel="noopener" class="about-api-link">
+            API 文档与 Playground <share />
+          </a>
         </div>
       </template>
       <template v-else>
@@ -233,6 +235,7 @@ export default {
 .about-api-link {
   color: var(--primary-color);
   cursor: pointer;
+  text-decoration: none;
 }
 
 .about-api-link:hover {

frontend_nuxt/pages/index.vue

@@ -85,14 +85,15 @@
           </div>
 
           <div class="article-member-avatars-container">
-            <NuxtLink
+            <BaseUserAvatar
               v-for="member in article.members"
               :key="`${article.id}-${member.id}`"
               class="article-member-avatar-item"
-              :to="`/users/${member.id}`"
-            >
-              <BaseImage class="article-member-avatar-item-img" :src="member.avatar" alt="avatar" />
-            </NuxtLink>
+              :user-id="member.id"
+              :avatar="member.avatar"
+              :username="member.username"
+              :width="25"
+            />
           </div>
 
           <div class="article-comments main-info-text">
@@ -291,7 +292,11 @@ const {
       description: p.content,
       category: p.category,
       tags: p.tags || [],
-      members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
+      members: (p.participants || []).map((m) => ({
+        id: m.id,
+        avatar: m.avatar,
+        username: m.username,
+      })),
       comments: p.commentCount,
       views: p.views,
       rssExcluded: p.rssExcluded || false,
@@ -333,7 +338,11 @@ const fetchNextPage = async () => {
     description: p.content,
     category: p.category,
     tags: p.tags || [],
-    members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
+    members: (p.participants || []).map((m) => ({
+      id: m.id,
+      avatar: m.avatar,
+      username: m.username,
+    })),
     comments: p.commentCount,
     views: p.views,
     rssExcluded: p.rssExcluded || false,
@@ -383,7 +392,6 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
   selectedCategoryGlobal.value = newCategory
   selectedTagsGlobal.value = newTags
 })
-
 </script>
 
 <style scoped>
@@ -631,14 +639,7 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
 .article-member-avatar-item {
   width: 25px;
   height: 25px;
-  border-radius: 50%;
-  overflow: hidden;
-}
-
-.article-member-avatar-item-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  flex-shrink: 0;
 }
 
 .placeholder-container {

frontend_nuxt/pages/login.vue

@@ -16,7 +16,7 @@
 
         <div v-else class="login-page-button-primary disabled">
           <div class="login-page-button-text">
-            <loading-four />
+            <loading-four class="loading-icon" />
             登录中...
           </div>
         </div>

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

@@ -44,7 +44,13 @@
             <div v-if="item.replyTo" class="reply-preview info-content-text">
               <div class="reply-header">
                 <next class="reply-icon" />
-                <BaseImage class="reply-avatar" :src="item.replyTo.sender.avatar" alt="avatar" />
+                <BaseUserAvatar
+                  class="reply-avatar"
+                  :user-id="item.replyTo.sender.id"
+                  :avatar="item.replyTo.sender.avatar"
+                  :username="item.replyTo.sender.username"
+                  :width="20"
+                />
                 <div class="reply-author">{{ item.replyTo.sender.username }}:</div>
               </div>
               <div class="reply-content" v-html="renderMarkdown(item.replyTo.content)"></div>
@@ -242,6 +248,8 @@ async function fetchMessages(page = 0) {
 
     const newMessages = pageData.content.reverse().map((item) => ({
       ...item,
+      userId: item.sender.id,
+      userName: item.sender.username,
       src: item.sender.avatar,
       iconClick: () => {
         openUser(item.sender.id)
@@ -327,6 +335,8 @@ async function sendMessage(content, clearInput) {
     const newMessage = await response.json()
     messages.value.push({
       ...newMessage,
+      userId: newMessage.sender.id,
+      userName: newMessage.sender.username,
       src: newMessage.sender.avatar,
       iconClick: () => {
         openUser(newMessage.sender.id)
@@ -402,6 +412,8 @@ const subscribeToConversation = () => {
 
       messages.value.push({
         ...parsedMessage,
+        userId: parsedMessage.sender.id,
+        userName: parsedMessage.sender.username,
         src: parsedMessage.sender.avatar,
         iconClick: () => openUser(parsedMessage.sender.id),
       })

frontend_nuxt/pages/message-box/index.vue

@@ -33,11 +33,23 @@
           @click="goToConversation(convo.id)"
         >
           <div class="conversation-avatar">
-            <BaseImage
-              :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
-              :alt="getOtherParticipant(convo)?.username || '用户'"
+            <BaseUserAvatar
+              v-if="getOtherParticipant(convo)"
               class="avatar-img"
-              @error="handleAvatarError"
+              :user-id="getOtherParticipant(convo).id"
+              :avatar="getOtherParticipant(convo).avatar"
+              :username="getOtherParticipant(convo).username"
+              :width="40"
+              @click.stop
+            />
+            <BaseUserAvatar
+              v-else
+              class="avatar-img"
+              :user-id="convo.id"
+              :avatar="''"
+              username="用户"
+              :width="40"
+              :link="false"
             />
           </div>
 
@@ -431,7 +443,6 @@ function minimize() {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  object-fit: cover;
 }
 
 .conversation-content {

frontend_nuxt/pages/new-post.vue

@@ -30,7 +30,9 @@
           >
             发布
           </div>
-          <div v-else class="post-submit-loading"><loading-four /> 发布中...</div>
+          <div v-else class="post-submit-loading">
+            <loading-four class="loading-icon" /> 发布中...
+          </div>
         </div>
       </div>
       <LotteryForm v-if="postType === 'LOTTERY'" :data="lottery" />

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

@@ -26,7 +26,9 @@
           >
             更新
           </div>
-          <div v-else class="post-submit-loading"><loading-four /> 更新中...</div>
+          <div v-else class="post-submit-loading">
+            <loading-four class="loading-icon" /> 更新中...
+          </div>
         </div>
       </div>
     </div>

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

@@ -46,10 +46,14 @@
       </div>
 
       <div class="info-content-container author-info-container">
-        <div class="user-avatar-container" @click="gotoProfile">
-          <div class="user-avatar-item">
-            <BaseImage class="user-avatar-item-img" :src="author.avatar" alt="avatar" />
-          </div>
+        <div class="user-avatar-container">
+          <BaseUserAvatar
+            class="user-avatar-item"
+            :user-id="author.id"
+            :avatar="author.avatar"
+            :username="author.username"
+            :width="50"
+          />
           <div v-if="isMobile" class="info-content-header">
             <div class="user-name">
               {{ author.username }}
@@ -340,6 +344,7 @@ const mapComment = (
   iconClick: () => navigateTo(`/users/${c.author.id}`),
   parentUserName: parentUserName,
   parentUserAvatar: parentUserAvatar,
+  parentUserId: parentUserId,
   parentUserClick: parentUserId ? () => navigateTo(`/users/${parentUserId}`) : null,
 })
 
@@ -379,6 +384,7 @@ const mapChangeLog = (l) => ({
   id: l.id,
   kind: 'log',
   username: l.username,
+  userId: l.userId ?? l.username,
   userAvatar: l.userAvatar,
   type: l.type,
   createdAt: l.time,
@@ -863,10 +869,6 @@ const jumpToHashComment = async () => {
   }
 }
 
-const gotoProfile = () => {
-  navigateTo(`/users/${author.value.id}`, { replace: true })
-}
-
 const initPage = async () => {
   scrollTo(0, 0)
   await fetchTimeline()
@@ -960,6 +962,8 @@ onMounted(async () => {
 .user-avatar-container {
   display: flex;
   flex-direction: row;
+  align-items: center;
+  gap: 10px;
 }
 
 .scroller-middle {
@@ -1172,18 +1176,13 @@ onMounted(async () => {
 }
 
 .user-avatar-container {
-  cursor: pointer;
+  cursor: default;
 }
 
 .user-avatar-item {
   width: 50px;
   height: 50px;
-}
-
-.user-avatar-item-img {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
+  flex-shrink: 0;
 }
 
 .info-content {

frontend_nuxt/pages/signup.vue

@@ -35,7 +35,7 @@
         </div>
         <div v-else class="signup-page-button-primary disabled">
           <div class="signup-page-button-text">
-            <loading-four />
+            <loading-four class="loading-icon" />
             发送中...
           </div>
         </div>
@@ -56,7 +56,7 @@
         </div>
         <div v-else class="signup-page-button-primary disabled">
           <div class="signup-page-button-text">
-            <loading-four />
+            <loading-four class="loading-icon" />
             验证中...
           </div>
         </div>

frontend_nuxt/pages/users/[id].vue

@@ -7,7 +7,13 @@
     <div v-else>
       <div class="profile-page-header">
         <div class="profile-page-header-avatar">
-          <BaseImage :src="user.avatar" alt="avatar" class="profile-page-header-avatar-img" />
+          <BaseUserAvatar
+            class="profile-page-header-avatar-img"
+            :user-id="user.id"
+            :avatar="user.avatar"
+            :username="user.username"
+            :width="200"
+          />
         </div>
         <div class="profile-page-header-user-info">
           <div class="profile-page-header-user-info-name">{{ user.username }}</div>
@@ -651,8 +657,6 @@ watch(selectedTab, async (val) => {
 .profile-page-header-avatar-img {
   width: 200px;
   height: 200px;
-  border-radius: 50%;
-  object-fit: cover;
 }
 
 .profile-page-header-user-info {

frontend_nuxt/utils/notification.js

@@ -199,6 +199,8 @@ function createFetchNotifications() {
           arr.push({
             ...n,
             src: n.comment.author.avatar,
+            userId: n.comment.author.id,
+            userName: n.comment.author.username,
             iconClick: () => {
               markNotificationRead(n.id)
               navigateTo(`/users/${n.comment.author.id}`, { replace: true })
@@ -219,6 +221,8 @@ function createFetchNotifications() {
           arr.push({
             ...n,
             src: n.fromUser ? n.fromUser.avatar : null,
+            userId: n.fromUser ? n.fromUser.id : undefined,
+            userName: n.fromUser ? n.fromUser.username : undefined,
             icon: n.fromUser ? undefined : iconMap[n.type],
             iconClick: () => {
               if (n.fromUser) {
@@ -231,6 +235,8 @@ function createFetchNotifications() {
           arr.push({
             ...n,
             src: n.fromUser ? n.fromUser.avatar : null,
+            userId: n.fromUser ? n.fromUser.id : undefined,
+            userName: n.fromUser ? n.fromUser.username : undefined,
             icon: n.fromUser ? undefined : iconMap[n.type],
             iconClick: () => {
               if (n.fromUser) {
@@ -269,6 +275,8 @@ function createFetchNotifications() {
           arr.push({
             ...n,
             src: n.comment.author.avatar,
+            userId: n.comment.author.id,
+            userName: n.comment.author.username,
             iconClick: () => {
               markNotificationRead(n.id)
               navigateTo(`/users/${n.comment.author.id}`, { replace: true })
@@ -315,6 +323,8 @@ function createFetchNotifications() {
           arr.push({
             ...n,
             src: n.fromUser ? n.fromUser.avatar : null,
+            userId: n.fromUser ? n.fromUser.id : undefined,
+            userName: n.fromUser ? n.fromUser.username : undefined,
             icon: n.fromUser ? undefined : iconMap[n.type],
             iconClick: () => {
               if (n.post) {