feat: refresh base user avatar styling

feat: add base user avatar component

CONTRIBUTING.md

@@ -4,6 +4,8 @@
     - [配置环境变量](#配置环境变量)
     - [配置 IDEA 参数](#配置-idea-参数)
     - [配置 MySQL](#配置-mysql)
+    - [配置 Redis](#配置-redis)
+    - [配置 RabbitMQ](#配置-rabbitmq)
   - [Docker 环境](#docker-环境)
     - [配置环境变量](#配置环境变量-1)
     - [构建并启动镜像](#构建并启动镜像)
@@ -117,14 +119,75 @@ SERVER_PORT=8082
 
 #### 配置 Redis
 
-填写环境变量 `.env` 中的 Redis 相关配置并启动 Redis
+后端的登录态缓存、访问频控等都依赖 Redis，请确保本地有可用的 Redis 实例。
 
-```ini
-REDIS_HOST=<Redis 地址>
-REDIS_PORT=<Redis 端口>
-```
+1. **启动 Redis 服务**（已有服务可跳过）
 
-处理完环境问题直接跑起来就能通了
+   ```bash
+   docker run --name openisle-redis -p 6379:6379 -d redis:7-alpine
+   ```
+
+   该命令会在本机暴露 `6379` 端口。若你已有其他端口的 Redis，可以根据实际情况调整映射关系。
+
+2. **在 `backend/open-isle.env` 中填写连接信息**
+
+   ```ini
+   REDIS_HOST=127.0.0.1
+   REDIS_PORT=6379
+   # 可选：若需要切换逻辑库，可新增此变量，默认使用 0 号库
+   REDIS_DATABASE=0
+   ```
+
+   `application.properties` 中的默认值为 `localhost:6379`、数据库 `0`，如果你的环境恰好一致，也可以不额外填写；显式声明可以避免 IDE/运行时读取到意外配置。
+
+3. **验证连接**
+
+   ```bash
+   redis-cli -h 127.0.0.1 -p 6379 ping
+   ```
+
+   启动后端后，日志中会出现 `Redis connection established ...`（来自 `RedisConnectionLogger`），说明已成功连通。
+
+#### 配置 RabbitMQ
+
+消息通知和 WebSocket 推送链路依赖 RabbitMQ。后端会自动声明交换机与队列，确保本地 RabbitMQ 可用即可。
+
+1. **启动 RabbitMQ 服务**（推荐包含管理界面）
+
+   ```bash
+   docker run --name openisle-rabbitmq \
+     -e RABBITMQ_DEFAULT_USER=openisle \
+     -e RABBITMQ_DEFAULT_PASS=openisle \
+     -p 5672:5672 -p 15672:15672 \
+     -d rabbitmq:3.13-management
+   ```
+
+   管理界面位于 http://127.0.0.1:15672 ，可用于查看队列、交换机等资源。
+
+2. **同步填写后端与 WebSocket 服务的环境变量**
+
+   ```ini
+   # backend/open-isle.env
+   RABBITMQ_HOST=127.0.0.1
+   RABBITMQ_PORT=5672
+   RABBITMQ_USERNAME=openisle
+   RABBITMQ_PASSWORD=openisle
+
+   # 如果需要启动 websocket_service，也需要在 websocket_service.env 中保持一致
+   ```
+
+   如果沿用 RabbitMQ 默认的 `guest/guest`，可以不显式设置，Spring Boot 会回退到 `application.properties` 中的默认值 (`localhost:5672`、`guest/guest`、虚拟主机 `/`)。
+
+3. **确认自动声明的资源**
+
+   - 交换机：`openisle-exchange`
+   - 旧版兼容队列：`notifications-queue`
+   - 分片队列：`notifications-queue-0` ~ `notifications-queue-f`（共 16 个，对应路由键 `notifications.shard.0` ~ `notifications.shard.f`）
+   - 队列持久化默认开启，来自 `rabbitmq.queue.durable=true`，如需仅在本地短暂测试，可在 `application.properties` 中调整该配置。
+
+   启动后端时可在日志中看到 `=== 开始主动声明 RabbitMQ 组件 ===` 与后续的声明结果，也可以在管理界面中查看是否创建成功。
+
+完成 Redis 与 RabbitMQ 配置后，即可继续启动后端服务。
 
 ![运行画面](assets/contributing/backend_img_4.png)
 

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",

backend/src/main/java/com/openisle/dto/PostMetaDto.java

@@ -1,6 +1,7 @@
 package com.openisle.dto;
 
 import java.time.LocalDateTime;
+import java.util.List;
 import lombok.Data;
 
 /** Lightweight post metadata used in user profile lists. */
@@ -11,6 +12,8 @@ public class PostMetaDto {
   private String title;
   private String snippet;
   private LocalDateTime createdAt;
-  private String category;
+  private CategoryDto category;
+  private List<TagDto> tags;
   private long views;
+  private long commentCount;
 }

backend/src/main/java/com/openisle/mapper/UserMapper.java

@@ -5,6 +5,7 @@ import com.openisle.model.Comment;
 import com.openisle.model.Post;
 import com.openisle.model.User;
 import com.openisle.service.*;
+import java.util.stream.Collectors;
 import lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.security.core.Authentication;
@@ -23,8 +24,10 @@ public class UserMapper {
   private final PostReadService postReadService;
   private final LevelService levelService;
   private final MedalService medalService;
+  private final CategoryMapper categoryMapper;
+  private final TagMapper tagMapper;
 
-  @Value("${app.snippet-length:50}")
+  @Value("${app.snippet-length}")
   private int snippetLength;
 
   public AuthorDto toAuthorDto(User user) {
@@ -88,8 +91,10 @@ public class UserMapper {
       dto.setSnippet(content);
     }
     dto.setCreatedAt(post.getCreatedAt());
-    dto.setCategory(post.getCategory().getName());
+    dto.setCategory(categoryMapper.toDto(post.getCategory()));
+    dto.setTags(post.getTags().stream().map(tagMapper::toDto).collect(Collectors.toList()));
     dto.setViews(post.getViews());
+    dto.setCommentCount(post.getCommentCount());
     return dto;
   }
 

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

@@ -28,7 +28,7 @@ public class SearchService {
   private final CategoryRepository categoryRepository;
   private final TagRepository tagRepository;
 
-  @org.springframework.beans.factory.annotation.Value("${app.snippet-length:50}")
+  @org.springframework.beans.factory.annotation.Value("${app.snippet-length}")
   private int snippetLength;
 
   public List<User> searchUsers(String keyword) {

backend/src/main/resources/application.properties

@@ -43,7 +43,7 @@ app.avatar.base-url=${AVATAR_BASE_URL:https://api.dicebear.com/6.x}
 app.user.posts-limit=${USER_POSTS_LIMIT:10}
 app.user.replies-limit=${USER_REPLIES_LIMIT:50}
 # Length of extracted snippets for posts and search (-1 to disable truncation)
-app.snippet-length=${SNIPPET_LENGTH:50}
+app.snippet-length=${SNIPPET_LENGTH:200}
 
 # Captcha configuration
 app.captcha.enabled=${CAPTCHA_ENABLED:false}

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

@@ -8,6 +8,7 @@ import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.
 import com.openisle.dto.CommentInfoDto;
 import com.openisle.dto.PostMetaDto;
 import com.openisle.dto.UserDto;
+import com.openisle.mapper.CategoryMapper;
 import com.openisle.mapper.TagMapper;
 import com.openisle.mapper.UserMapper;
 import com.openisle.model.User;
@@ -64,6 +65,9 @@ class UserControllerTest {
   @MockBean
   private TagMapper tagMapper;
 
+  @MockBean
+  private CategoryMapper categoryMapper;
+
   @Test
   void getCurrentUser() throws Exception {
     User u = new User();

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

@@ -94,6 +94,7 @@ body {
   font-family: 'WenQuanYi Micro Hei', 'Helvetica Neue', Arial, sans-serif;
   background-color: var(--normal-background-color);
   color: var(--text-color);
+  text-underline-offset: 4px;
   /* 禁止滚动 */
   /* overflow: hidden;  */
 }
@@ -120,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,20 @@
 <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 || hasLink(item) }"
+        @click="onIconClick(item, $event)"
       >
-        <BaseImage v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
+        <BaseUserAvatar
+          v-if="item.src"
+          :src="item.src"
+          :user-id="item.userId"
+          :to="item.avatarLink"
+          class="timeline-img"
+          alt="timeline item"
+          :disable-link="!hasLink(item) || !!item.iconClick"
+        />
         <component
           v-else-if="item.icon && (typeof item.icon !== 'string' || !item.icon.includes(' '))"
           :is="item.icon"
@@ -22,11 +30,27 @@
 </template>
 
 <script>
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
+
 export default {
   name: 'BaseTimeline',
+  components: { BaseUserAvatar },
   props: {
     items: { type: Array, default: () => [] },
-    hover: { type: Boolean, default: false },
+  },
+  methods: {
+    hasLink(item) {
+      if (!item) return false
+      if (item.avatarLink) return true
+      const id = item?.userId
+      return id !== undefined && id !== null && id !== ''
+    },
+    onIconClick(item, event) {
+      if (item && item.iconClick) {
+        event.preventDefault()
+        item.iconClick()
+      }
+    },
   },
 }
 </script>
@@ -46,12 +70,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;
@@ -73,8 +91,12 @@ export default {
 .timeline-img {
   width: 100%;
   height: 100%;
+}
+
+.timeline-img :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-  border-radius: 50%;
 }
 
 .timeline-emoji {
@@ -95,7 +117,7 @@ export default {
 }
 
 .timeline-item:last-child::before {
-  display: none;
+  bottom: 0px;
 }
 
 .timeline-content {

frontend_nuxt/components/BaseUserAvatar.vue

@@ -0,0 +1,215 @@
+<template>
+  <component
+    :is="wrapperTag"
+    :to="isLink ? resolvedLink : undefined"
+    class="base-user-avatar"
+    :class="wrapperClass"
+    :style="wrapperStyle"
+    v-bind="wrapperAttrs"
+    :role="isLink ? undefined : 'img'"
+    :aria-label="altText"
+    :title="altText"
+  >
+    <span class="base-user-avatar-backdrop" aria-hidden="true" />
+    <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
+  </component>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useAttrs } from 'vue'
+import BaseImage from './BaseImage.vue'
+
+const DEFAULT_AVATAR = '/default-avatar.svg'
+
+const props = defineProps({
+  userId: {
+    type: [String, Number],
+    default: null,
+  },
+  src: {
+    type: String,
+    default: '',
+  },
+  alt: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: [Number, String],
+    default: null,
+  },
+  rounded: {
+    type: Boolean,
+    default: true,
+  },
+  disableLink: {
+    type: Boolean,
+    default: false,
+  },
+  to: {
+    type: String,
+    default: '',
+  },
+})
+
+const attrs = useAttrs()
+
+const currentSrc = ref(props.src || DEFAULT_AVATAR)
+
+watch(
+  () => props.src,
+  (value) => {
+    currentSrc.value = value || DEFAULT_AVATAR
+  },
+)
+
+const resolvedLink = computed(() => {
+  if (props.to) return props.to
+  if (props.userId !== null && props.userId !== undefined && props.userId !== '') {
+    return `/users/${props.userId}`
+  }
+  return null
+})
+
+const altText = computed(() => props.alt || '用户头像')
+
+const sizeStyle = computed(() => {
+  if (!props.width && props.width !== 0) return null
+  const value = typeof props.width === 'number' ? `${props.width}px` : props.width
+  if (!value) return null
+  return { width: value, height: value }
+})
+
+const accentHue = computed(() => {
+  const seed = props.userId ?? props.alt
+  const source = seed !== undefined && seed !== null ? String(seed) : ''
+  if (!source) return 198
+  let hash = 0
+  for (let index = 0; index < source.length; index += 1) {
+    hash = (hash << 5) - hash + source.charCodeAt(index)
+    hash |= 0
+  }
+  return Math.abs(hash) % 360
+})
+
+const accentStyles = computed(() => {
+  const hue = accentHue.value
+  return {
+    '--avatar-accent': `hsl(${hue}, 74%, 54%)`,
+    '--avatar-accent-light': `hsl(${hue}, 95%, 82%)`,
+    '--avatar-accent-soft': `hsl(${hue}, 96%, 95%)`,
+    '--avatar-accent-border': `hsla(${hue}, 70%, 48%, 0.28)`,
+    '--avatar-accent-shadow': `hsla(${hue}, 68%, 36%, 0.2)`,
+  }
+})
+
+const wrapperStyle = computed(() => {
+  const attrStyle = attrs.style
+  return [accentStyles.value, sizeStyle.value, attrStyle]
+})
+
+const isLink = computed(() => !props.disableLink && !!resolvedLink.value)
+
+const wrapperTag = computed(() => (isLink.value ? 'NuxtLink' : 'div'))
+
+const wrapperClass = computed(() => [
+  attrs.class,
+  { 'is-rounded': props.rounded, 'is-interactive': isLink.value },
+])
+
+const wrapperAttrs = computed(() => {
+  const { class: _class, style: _style, to: _to, href: _href, ...rest } = attrs
+  return rest
+})
+
+function onError() {
+  if (currentSrc.value !== DEFAULT_AVATAR) {
+    currentSrc.value = DEFAULT_AVATAR
+  }
+}
+</script>
+
+<style scoped>
+.base-user-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 16px;
+  background: linear-gradient(
+    140deg,
+    var(--avatar-accent-soft, rgba(17, 182, 197, 0.12)) 0%,
+    var(--avatar-accent-light, rgba(17, 182, 197, 0.22)) 100%
+  );
+  border: 1px solid var(--avatar-accent-border, rgba(17, 182, 197, 0.2));
+  box-shadow:
+    0 1px 2px rgba(15, 52, 67, 0.08),
+    0 3px 8px var(--avatar-accent-shadow, rgba(17, 182, 197, 0.18));
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease,
+    border-color 0.3s ease,
+    background 0.3s ease;
+}
+
+.base-user-avatar.is-rounded {
+  border-radius: 50%;
+}
+
+.base-user-avatar:not(.is-rounded) {
+  border-radius: 0;
+}
+
+.base-user-avatar-backdrop {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.72), transparent 62%),
+    linear-gradient(150deg, rgba(255, 255, 255, 0.08), transparent),
+    linear-gradient(
+      140deg,
+      var(--avatar-accent-soft, rgba(17, 182, 197, 0.08)) 0%,
+      var(--avatar-accent-light, rgba(17, 182, 197, 0.18)) 100%
+    );
+  opacity: 0.75;
+  transition:
+    opacity 0.35s ease,
+    transform 0.35s ease;
+  z-index: 0;
+}
+
+.base-user-avatar-img {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  z-index: 1;
+  border-radius: inherit;
+  transition: transform 0.35s ease;
+}
+
+.base-user-avatar.is-interactive:hover,
+.base-user-avatar.is-interactive:focus-visible {
+  transform: translateY(-1px) scale(1.02);
+  border-color: var(--avatar-accent, var(--primary-color, #0a6e78));
+  box-shadow:
+    0 6px 16px var(--avatar-accent-shadow, rgba(17, 182, 197, 0.24)),
+    0 3px 6px rgba(15, 52, 67, 0.18);
+  outline: none;
+}
+
+.base-user-avatar.is-interactive:hover .base-user-avatar-backdrop,
+.base-user-avatar.is-interactive:focus-visible .base-user-avatar-backdrop {
+  opacity: 1;
+  transform: scale(1.05);
+}
+
+.base-user-avatar.is-interactive:hover .base-user-avatar-img,
+.base-user-avatar.is-interactive:focus-visible .base-user-avatar-img {
+  transform: scale(1.02);
+}
+</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,11 +26,12 @@
           <span v-if="level >= 2" class="reply-item">
             <next class="reply-icon" />
             <span class="reply-info">
-              <BaseImage
+              <BaseUserAvatar
                 class="reply-avatar"
-                :src="comment.parentUserAvatar || '/default-avatar.svg'"
-                alt="avatar"
-                @click="comment.parentUserClick && comment.parentUserClick()"
+                :src="comment.parentUserAvatar"
+                :user-id="comment.parentUserId"
+                :alt="comment.parentUserName"
+                :disable-link="!comment.parentUserId"
               />
               <span class="reply-user-name">{{ comment.parentUserName }}</span>
             </span>
@@ -111,6 +112,7 @@ import BaseTimeline from '~/components/BaseTimeline.vue'
 import CommentEditor from '~/components/CommentEditor.vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import ReactionsGroup from '~/components/ReactionsGroup.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
@@ -259,6 +261,7 @@ const submitReply = async (parentUserName, text, clear) => {
         text: data.content,
         parentUserName: parentUserName,
         parentUserAvatar: props.comment.avatar,
+        parentUserId: props.comment.userId,
         reactions: [],
         reply: (data.replies || []).map((r) => ({
           id: r.id,
@@ -270,10 +273,12 @@ const submitReply = async (parentUserName, text, clear) => {
           reply: [],
           openReplies: false,
           src: r.author.avatar,
+          userId: r.author.id,
           iconClick: () => navigateTo(`/users/${r.author.id}`),
         })),
         openReplies: false,
         src: data.author.avatar,
+        userId: data.author.id,
         iconClick: () => navigateTo(`/users/${data.author.id}`),
       })
       clear()

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"
+                  :src="avatar"
+                  alt="avatar"
+                  :width="32"
+                  :disable-link="true"
+                />
                 <down />
               </div>
             </template>
@@ -93,6 +100,7 @@ import { computed, nextTick, ref, watch } from 'vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import ToolTip from '~/components/ToolTip.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
 import { useUnreadCount } from '~/composables/useUnreadCount'
 import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'

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"
+        :to="log.username ? `/users/${log.username}` : ''"
         alt="avatar"
-        @click="() => navigateTo(`/users/${log.username}`)"
+        :disable-link="!log.username"
       />
       <span v-if="log.username" class="change-log-user">{{ log.username }}</span>
       <span v-if="log.type === 'CONTENT'" class="change-log-content">变更了文章内容</span>
@@ -55,10 +56,8 @@
 import { computed } from 'vue'
 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 BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import { themeState } from '~/utils/theme'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
@@ -135,6 +134,12 @@ const diffHtml = computed(() => {
   cursor: pointer;
 }
 
+.change-log-avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .change-log-time {
   font-size: 12px;
   opacity: 0.6;

frontend_nuxt/components/PostLottery.vue

@@ -53,24 +53,24 @@
       </div>
     </div>
     <div class="prize-member-container">
-      <BaseImage
+      <BaseUserAvatar
         v-for="p in lotteryParticipants"
         :key="p.id"
         class="prize-member-avatar"
+        :user-id="p.id"
         :src="p.avatar"
         alt="avatar"
-        @click="gotoUser(p.id)"
       />
       <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"
+          :user-id="w.id"
           :src="w.avatar"
           alt="avatar"
-          @click="gotoUser(w.id)"
         />
         <div v-if="lotteryWinners.length === 1" class="prize-member-winner-name">
           {{ lotteryWinners[0].username }}
@@ -87,6 +87,7 @@ import { toast } from '~/main'
 import { useRuntimeConfig } from '#imports'
 import { useIsMobile } from '~/utils/screen'
 import { useCountdown } from '~/composables/useCountdown'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 
 const props = defineProps({
   lottery: { type: Object, required: true },
@@ -106,8 +107,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 () => {
@@ -247,10 +246,15 @@ const joinLottery = async () => {
   height: 30px;
   margin-left: 3px;
   border-radius: 50%;
-  object-fit: cover;
   cursor: pointer;
 }
 
+.prize-member-avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .prize-member-winner {
   display: flex;
   flex-direction: row;

frontend_nuxt/components/PostPoll.vue

@@ -17,13 +17,13 @@
               ></div>
             </div>
             <div class="poll-participants">
-              <BaseImage
+              <BaseUserAvatar
                 v-for="p in pollOptionParticipants[idx] || []"
                 :key="p.id"
                 class="poll-participant-avatar"
+                :user-id="p.id"
                 :src="p.avatar"
                 alt="avatar"
-                @click="gotoUser(p.id)"
               />
             </div>
           </div>
@@ -119,6 +119,7 @@ import { getToken, authState } from '~/utils/auth'
 import { toast } from '~/main'
 import { useRuntimeConfig } from '#imports'
 import { useCountdown } from '~/composables/useCountdown'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 
 const props = defineProps({
   poll: { type: Object, required: true },
@@ -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) => {
@@ -429,4 +428,10 @@ const submitMultiPoll = async () => {
   border-radius: 50%;
   cursor: pointer;
 }
+
+.poll-participant-avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 </style>

frontend_nuxt/components/SearchPersonDropdown.vue

@@ -24,10 +24,12 @@
       </template>
       <template #option="{ option }">
         <div class="search-option-item">
-          <BaseImage
-            :src="option.avatar || '/default-avatar.svg'"
+          <BaseUserAvatar
+            :src="option.avatar"
+            :user-id="option.id"
+            :alt="option.username"
             class="avatar"
-            @error="handleAvatarError"
+            :disable-link="true"
           />
           <div class="result-body">
             <div class="result-main" v-html="highlight(option.username)"></div>
@@ -49,6 +51,7 @@ import Dropdown from '~/components/Dropdown.vue'
 import { stripMarkdown } from '~/utils/markdown'
 import { useIsMobile } from '~/utils/screen'
 import { getToken } from '~/utils/auth'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
@@ -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)
@@ -179,6 +178,12 @@ defineExpose({
   width: 32px;
   height: 32px;
   border-radius: 50%;
+  overflow: hidden;
+}
+
+.avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
   object-fit: cover;
 }
 

frontend_nuxt/components/TimelineCommentGroup.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="timeline-container">
+    <div class="timeline-header">
+      <div class="timeline-title">{{ headerText }}</div>
+      <div class="timeline-date">{{ formattedDate }}</div>
+    </div>
+    <div class="comment-content" v-if="entries.length > 0">
+      <div class="comment-content-item" v-for="entry in entries" :key="entry.comment.id">
+        <div class="comment-content-item-main">
+          <comment-one class="comment-content-item-icon" />
+          <div class="comment-content-item-text">
+            <NuxtLink
+              :to="`/posts/${entry.comment.post.id}#comment-${entry.comment.id}`"
+              class="timeline-comment-link"
+            >
+              {{ stripContent(entry.comment.content) }}
+            </NuxtLink>
+          </div>
+        </div>
+        <div class="timeline-date">{{ formatEntryDate(entry.createdAt) }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { stripMarkdownLength } from '~/utils/markdown'
+import TimeManager from '~/utils/time'
+
+const props = defineProps({
+  item: { type: Object, required: true },
+})
+
+const entries = computed(() => {
+  if (Array.isArray(props.item.entries)) {
+    return props.item.entries
+  }
+  if (props.item.comment) {
+    return [
+      {
+        type: props.item.type,
+        comment: props.item.comment,
+        createdAt: props.item.createdAt,
+      },
+    ]
+  }
+  return []
+})
+
+const formattedDate = computed(() => TimeManager.formatWithDay(props.item.createdAt))
+
+const hasReplies = computed(() => entries.value.some((entry) => !!entry.comment.parentComment))
+const hasComments = computed(() => entries.value.some((entry) => !entry.comment.parentComment))
+
+const headerText = computed(() => {
+  const count = entries.value.length
+  if (count === 0) return ''
+  if (hasComments.value && hasReplies.value) {
+    return `发布了${count}条评论/回复`
+  }
+  if (hasReplies.value) {
+    return `发布了${count}条回复`
+  }
+  return `发布了${count}条评论`
+})
+
+const formatEntryDate = (date) => TimeManager.format(date)
+const stripContent = (content) => stripMarkdownLength(content ?? '', 200)
+const parentSnippet = (entry) =>
+  stripMarkdownLength(entry.comment.parentComment?.content ?? '', 200)
+</script>
+
+<style scoped>
+.timeline-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 5px;
+  padding-bottom: 20px;
+}
+
+.timeline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.timeline-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.timeline-date {
+  font-size: 12px;
+  color: var(--timeline-date-color, #888);
+  white-space: nowrap;
+}
+
+.comment-content {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.comment-content-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.comment-content-item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.comment-content-item-main {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.comment-content-item-icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+}
+
+.comment-content-item-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.comment-content-item-prefix {
+  font-size: 14px;
+  color: var(--text-color);
+}
+
+.timeline-comment-link {
+  font-size: 14px;
+  color: var(--link-color);
+  text-decoration: underline;
+}
+
+.timeline-comment-link:hover {
+  color: var(--primary-color);
+}
+
+.timeline-link {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+.timeline-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+  .comment-content-item-prefix,
+  .timeline-comment-link {
+    font-size: 13px;
+  }
+}
+</style>

frontend_nuxt/components/TimelinePostItem.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="timeline-container">
+    <div class="timeline-header">
+      <div class="timeline-title">发布了文章</div>
+      <div class="timeline-date">{{ formattedDate }}</div>
+    </div>
+    <div class="article-container">
+      <NuxtLink :to="postLink" class="timeline-article-link">
+        {{ item.post?.title }}
+      </NuxtLink>
+      <div class="timeline-snippet">
+        {{ strippedSnippet }}
+      </div>
+      <div class="article-meta" v-if="hasMeta">
+        <ArticleCategory v-if="item.post?.category" :category="item.post.category" />
+        <ArticleTags :tags="item.post?.tags" />
+        <div class="article-comment-count" v-if="item.post?.commentCount !== undefined">
+          <comment-one class="article-comment-count-icon" />
+          <span>{{ item.post?.commentCount }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { stripMarkdown } from '~/utils/markdown'
+import TimeManager from '~/utils/time'
+
+const props = defineProps({
+  item: { type: Object, required: true },
+})
+
+const postLink = computed(() => {
+  const id = props.item.post?.id
+  return id ? `/posts/${id}` : '#'
+})
+
+const formattedDate = computed(() => TimeManager.format(props.item.createdAt))
+const strippedSnippet = computed(() => stripMarkdown(props.item.post?.snippet ?? ''))
+const hasMeta = computed(() => {
+  const tags = props.item.post?.tags ?? []
+  const hasTags = Array.isArray(tags) && tags.length > 0
+  const hasCategory = !!props.item.post?.category
+  const hasCommentCount =
+    props.item.post?.commentCount !== undefined && props.item.post?.commentCount !== null
+  return hasTags || hasCategory || hasCommentCount
+})
+</script>
+
+<style scoped>
+.timeline-container {
+  display: flex;
+  flex-direction: column;
+  padding-top: 5px;
+  gap: 12px;
+  border-radius: 10px;
+  background: var(--timeline-card-background, transparent);
+}
+
+.timeline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.timeline-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.timeline-date {
+  font-size: 12px;
+  color: var(--timeline-date-color, #888);
+}
+
+.article-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--normal-border-color);
+  border-radius: 10px;
+  padding: 10px;
+  gap: 6px;
+}
+
+.timeline-article-link {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+.timeline-article-link:hover {
+  text-decoration: underline;
+}
+
+.timeline-snippet {
+  color: var(--timeline-snippet-color, #666);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.article-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.article-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.article-tag {
+  background-color: var(--article-info-background-color);
+  border-radius: 6px;
+  padding: 2px 6px;
+  font-size: 12px;
+  color: var(--text-color);
+}
+
+.article-comment-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-color);
+}
+
+.article-comment-count-icon {
+  width: 16px;
+  height: 16px;
+}
+
+@media (max-width: 768px) {
+  .timeline-article-link {
+    font-size: 16px;
+  }
+
+  .timeline-snippet {
+    font-size: 13px;
+  }
+}
+</style>

frontend_nuxt/components/TimelineTagItem.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="timeline-tag-item">
+    <div class="tags-container">
+      <div class="tags-container-item">
+        <div class="timeline-tag-title">创建了标签</div>
+        <ArticleTags v-if="tag" :tags="[tag]" />
+        <span class="timeline-tag-count" v-if="tag?.count"> x{{ tag.count }}</span>
+      </div>
+      <div v-if="timelineDate" class="timeline-date">{{ timelineDate }}</div>
+    </div>
+    <div v-if="hasDescription" class="timeline-snippet">
+      {{ tag?.description }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import TimeManager from '~/utils/time'
+
+const props = defineProps({
+  item: { type: Object, required: true },
+})
+
+const emit = defineEmits(['tag-click'])
+
+const tag = computed(() => props.item?.tag ?? null)
+const hasDescription = computed(() => {
+  const description = tag.value?.description
+  return !!description
+})
+
+const timelineDate = computed(() => {
+  const date = props.item?.createdAt ?? tag.value?.createdAt
+  return date ? TimeManager.format(date) : ''
+})
+
+const summaryDate = computed(() => {
+  const date = tag.value?.createdAt ?? props.item?.createdAt
+  return date ? TimeManager.format(date) : ''
+})
+
+const isClickable = computed(() => props.mode === 'summary' && !!tag.value)
+
+const handleTagClick = () => {
+  if (!isClickable.value) return
+  emit('tag-click', tag.value)
+}
+</script>
+
+<style scoped>
+.timeline-tag-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.tags-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  padding-top: 5px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tags-container-item {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+}
+
+.timeline-tag-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.timeline-tag-count {
+  font-size: 12px;
+}
+
+.timeline-date {
+  font-size: 12px;
+  color: gray;
+  margin-top: 5px;
+  white-space: nowrap;
+}
+
+.timeline-snippet {
+  font-size: 14px;
+  color: #666;
+  margin-top: 5px;
+}
+
+.timeline-link {
+  font-weight: bold;
+  color: var(--primary-color);
+  text-decoration: none;
+  word-break: break-word;
+  cursor: default;
+}
+
+.timeline-link.clickable {
+  cursor: pointer;
+}
+
+.timeline-link.clickable:hover {
+  text-decoration: underline;
+}
+</style>

frontend_nuxt/components/UserList.vue

@@ -1,8 +1,8 @@
 <template>
   <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" />
+    <div v-for="u in users" :key="u.id" class="user-item">
+      <BaseUserAvatar :src="u.avatar" :user-id="u.id" 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>
@@ -13,6 +13,7 @@
 
 <script setup>
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 
 defineProps({
   users: { type: Array, default: () => [] },
@@ -27,20 +28,27 @@ 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;
+  width: 50px;
+  height: 50px;
   border-radius: 50%;
   flex-shrink: 0;
+}
+
+.user-avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
   object-fit: cover;
 }
 .user-info {

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,16 @@
           </div>
 
           <div class="article-member-avatars-container">
-            <NuxtLink
-              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>
+            <div v-for="member in article.members">
+              <BaseUserAvatar
+                class="article-member-avatar-item-img"
+                :src="member.avatar"
+                :user-id="member.id"
+                alt="avatar"
+                :disable-link="true"
+                :width="25"
+              />
+            </div>
           </div>
 
           <div class="article-comments main-info-text">
@@ -138,6 +140,7 @@ import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import { getToken } from '~/utils/auth'
 import { stripMarkdown } from '~/utils/markdown'
 import { useIsMobile } from '~/utils/screen'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import TimeManager from '~/utils/time'
 import { selectedCategoryGlobal, selectedTagsGlobal } from '~/composables/postFilter'
 useHead({
@@ -383,7 +386,6 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
   selectedCategoryGlobal.value = newCategory
   selectedTagsGlobal.value = newTags
 })
-
 </script>
 
 <style scoped>
@@ -628,14 +630,12 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
   margin-left: 20px;
 }
 
-.article-member-avatar-item {
-  width: 25px;
-  height: 25px;
-  border-radius: 50%;
-  overflow: hidden;
+.article-member-avatar-item-img {
+  width: 100%;
+  height: 100%;
 }
 
-.article-member-avatar-item-img {
+.article-member-avatar-item-img :deep(.base-user-avatar-img) {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -692,6 +692,7 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
     margin-left: 0px;
     gap: 0px;
   }
+
   .article-main-container,
   .header-item.main-item {
     width: calc(70% - 20px);

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,12 @@
             <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"
+                  :src="item.replyTo.sender.avatar"
+                  :user-id="item.replyTo.sender.id"
+                  :alt="item.replyTo.sender.username"
+                />
                 <div class="reply-author">{{ item.replyTo.sender.username }}:</div>
               </div>
               <div class="reply-content" v-html="renderMarkdown(item.replyTo.content)"></div>
@@ -121,6 +126,7 @@ import TimeManager from '~/utils/time'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import VueEasyLightbox from 'vue-easy-lightbox'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 
 const config = useRuntimeConfig()
 const route = useRoute()
@@ -243,6 +249,7 @@ async function fetchMessages(page = 0) {
     const newMessages = pageData.content.reverse().map((item) => ({
       ...item,
       src: item.sender.avatar,
+      userId: item.sender.id,
       iconClick: () => {
         openUser(item.sender.id)
       },
@@ -328,6 +335,7 @@ async function sendMessage(content, clearInput) {
     messages.value.push({
       ...newMessage,
       src: newMessage.sender.avatar,
+      userId: newMessage.sender.id,
       iconClick: () => {
         openUser(newMessage.sender.id)
       },
@@ -403,6 +411,7 @@ const subscribeToConversation = () => {
       messages.value.push({
         ...parsedMessage,
         src: parsedMessage.sender.avatar,
+        userId: parsedMessage.sender.id,
         iconClick: () => openUser(parsedMessage.sender.id),
       })
 
@@ -686,6 +695,12 @@ function goBack() {
   margin-right: 5px;
 }
 
+.reply-avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .reply-preview {
   margin-top: 10px;
   padding: 10px;

frontend_nuxt/pages/message-box/index.vue

@@ -33,11 +33,12 @@
           @click="goToConversation(convo.id)"
         >
           <div class="conversation-avatar">
-            <BaseImage
-              :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
+            <BaseUserAvatar
+              :src="getOtherParticipant(convo)?.avatar"
+              :user-id="getOtherParticipant(convo)?.id"
               :alt="getOtherParticipant(convo)?.username || '用户'"
               class="avatar-img"
-              @error="handleAvatarError"
+              :disable-link="true"
             />
           </div>
 
@@ -130,6 +131,7 @@ import { stripMarkdownLength } from '~/utils/markdown'
 import SearchPersonDropdown from '~/components/SearchPersonDropdown.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTabs from '~/components/BaseTabs.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 
 const config = useRuntimeConfig()
 const conversations = ref([])
@@ -431,6 +433,11 @@ function minimize() {
   width: 40px;
   height: 40px;
   border-radius: 50%;
+}
+
+.avatar-img :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
   object-fit: cover;
 }
 

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

@@ -48,7 +48,13 @@
       <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" />
+            <BaseUserAvatar
+              class="user-avatar-item-img"
+              :src="author.avatar"
+              :user-id="author.id"
+              alt="avatar"
+              :disable-link="true"
+            />
           </div>
           <div v-if="isMobile" class="info-content-header">
             <div class="user-name">
@@ -193,6 +199,7 @@ import ReactionsGroup from '~/components/ReactionsGroup.vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import PostLottery from '~/components/PostLottery.vue'
 import PostPoll from '~/components/PostPoll.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import { renderMarkdown, handleMarkdownClick, stripMarkdownLength } from '~/utils/markdown'
 import { getMedalTitle } from '~/utils/medal'
 import { toast } from '~/main'
@@ -340,7 +347,7 @@ const mapComment = (
   iconClick: () => navigateTo(`/users/${c.author.id}`),
   parentUserName: parentUserName,
   parentUserAvatar: parentUserAvatar,
-  parentUserClick: parentUserId ? () => navigateTo(`/users/${parentUserId}`) : null,
+  parentUserId: parentUserId,
 })
 
 const changeLogIcon = (l) => {
@@ -1186,6 +1193,12 @@ onMounted(async () => {
   border-radius: 50%;
 }
 
+.user-avatar-item-img :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .info-content {
   display: flex;
   flex-direction: column;

frontend_nuxt/pages/settings.vue

@@ -15,7 +15,13 @@
         <div class="avatar-row">
           <!-- label 充当点击区域，内部隐藏 input -->
           <label class="avatar-container">
-            <BaseImage :src="avatar" class="avatar-preview" alt="avatar" />
+            <BaseUserAvatar
+              :src="avatar"
+              :user-id="userId"
+              alt="avatar"
+              class="avatar-preview"
+              :disable-link="true"
+            />
             <!-- 半透明蒙层：hover 时出现 -->
             <div class="avatar-overlay">更换头像</div>
             <input type="file" class="avatar-input" accept="image/*" @change="onAvatarChange" />
@@ -74,6 +80,7 @@ import AvatarCropper from '~/components/AvatarCropper.vue'
 import BaseInput from '~/components/BaseInput.vue'
 import Dropdown from '~/components/Dropdown.vue'
 import BaseSwitch from '~/components/BaseSwitch.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import { toast } from '~/main'
 import { fetchCurrentUser, getToken, setToken } from '~/utils/auth'
 import { frostedState, setFrosted } from '~/utils/frosted'
@@ -87,6 +94,7 @@ const avatarFile = ref(null)
 const tempAvatar = ref('')
 const showCropper = ref(false)
 const role = ref('')
+const userId = ref(null)
 const publishMode = ref('DIRECT')
 const passwordStrength = ref('LOW')
 const aiFormatLimit = ref(3)
@@ -103,6 +111,7 @@ onMounted(async () => {
     username.value = user.username
     introduction.value = user.introduction || ''
     avatar.value = user.avatar
+    userId.value = user.id
     role.value = user.role
     if (role.value === 'ADMIN') {
       loadAdminConfig()
@@ -271,6 +280,11 @@ const save = async () => {
   width: 80px;
   height: 80px;
   border-radius: 40px;
+}
+
+.avatar-preview :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
   object-fit: cover;
 }
 

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,12 @@
     <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
+            :src="user.avatar"
+            :user-id="user.id"
+            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>
@@ -112,19 +117,18 @@
                         {{ 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"
+                          class="timeline-comment-link"
                         >
                           {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
                         </NuxtLink>
-                        回复了
+                        <next class="reply-icon" /> 回复了
                       </template>
                       <template v-else> 下评论了 </template>
                       <NuxtLink
                         :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                        class="timeline-link"
+                        class="timeline-comment-link"
                       >
                         {{ stripMarkdownLength(item.comment.content, 200) }}
                       </NuxtLink>
@@ -143,15 +147,7 @@
                 <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>
+                      <TimelinePostItem :item="item" />
                     </template>
                   </BaseTimeline>
                 </div>
@@ -164,15 +160,7 @@
                 <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>
+                      <TimelineTagItem :item="item" />
                     </template>
                   </BaseTimeline>
                 </div>
@@ -213,56 +201,16 @@
               <BaseTimeline :items="filteredTimelineItems">
                 <template #item="{ item }">
                   <template v-if="item.type === 'post'">
-                    发布了文章
-                    <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
-                      {{ item.post.title }}
-                    </NuxtLink>
-                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                    <TimelinePostItem :item="item" />
                   </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>
+                    <TimelineCommentGroup :item="item" />
                   </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>
+                    <TimelineCommentGroup :item="item" />
                   </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>
+                    <TimelineTagItem :item="item" />
                   </template>
                 </template>
               </BaseTimeline>
@@ -326,6 +274,10 @@ 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 TimelineCommentGroup from '~/components/TimelineCommentGroup.vue'
+import TimelinePostItem from '~/components/TimelinePostItem.vue'
+import TimelineTagItem from '~/components/TimelineTagItem.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import UserList from '~/components/UserList.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
@@ -415,7 +367,12 @@ const fetchSummary = async () => {
   const postsRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-posts`)
   if (postsRes.ok) {
     const data = await postsRes.json()
-    hotPosts.value = data.map((p) => ({ icon: 'file-text', post: p }))
+    hotPosts.value = data.map((p) => ({
+      icon: 'file-text',
+      type: 'post',
+      post: p,
+      createdAt: p.createdAt,
+    }))
   }
 
   const repliesRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-replies`)
@@ -427,10 +384,66 @@ const fetchSummary = async () => {
   const tagsRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-tags`)
   if (tagsRes.ok) {
     const data = await tagsRes.json()
-    hotTags.value = data.map((t) => ({ icon: 'tag-one', tag: t }))
+    hotTags.value = data.map((t) => ({
+      icon: 'tag-one',
+      type: 'tag',
+      tag: t,
+      createdAt: t.createdAt,
+    }))
   }
 }
 
+const isDiscussionItem = (item) => item && (item.type === 'comment' || item.type === 'reply')
+
+const toDateKey = (value) => {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  const month = `${date.getMonth() + 1}`.padStart(2, '0')
+  const day = `${date.getDate()}`.padStart(2, '0')
+  return `${date.getFullYear()}-${month}-${day}`
+}
+
+const combineDiscussionItems = (items) => {
+  const result = []
+  items.forEach((item) => {
+    if (!isDiscussionItem(item)) {
+      result.push(item)
+      return
+    }
+
+    const dateKey = toDateKey(item.createdAt)
+    const last = result[result.length - 1]
+    if (last && isDiscussionItem(last) && last.dateKey === dateKey) {
+      last.entries.push({
+        type: item.type,
+        comment: item.comment,
+        createdAt: item.createdAt,
+      })
+      if (item.type === 'comment' && last.type === 'reply') {
+        last.type = 'comment'
+      }
+      if (new Date(item.createdAt) > new Date(last.createdAt)) {
+        last.createdAt = item.createdAt
+      }
+    } else {
+      result.push({
+        type: item.type,
+        icon: item.icon,
+        createdAt: item.createdAt,
+        dateKey,
+        entries: [
+          {
+            type: item.type,
+            comment: item.comment,
+            createdAt: item.createdAt,
+          },
+        ],
+      })
+    }
+  })
+  return result
+}
+
 const fetchTimeline = async () => {
   const [postsRes, repliesRes, tagsRes] = await Promise.all([
     fetch(`${API_BASE_URL}/api/users/${username}/posts?limit=50`),
@@ -461,7 +474,7 @@ const fetchTimeline = async () => {
     })),
   ]
   mapped.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
-  timelineItems.value = mapped
+  timelineItems.value = combineDiscussionItems(mapped)
 }
 
 const fetchFollowUsers = async () => {
@@ -645,6 +658,11 @@ watch(selectedTab, async (val) => {
   width: 200px;
   height: 200px;
   border-radius: 50%;
+}
+
+.profile-page-header-avatar-img :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
   object-fit: cover;
 }
 
@@ -662,6 +680,11 @@ watch(selectedTab, async (val) => {
   color: #666;
 }
 
+.reply-icon {
+  color: var(--primary-color);
+  margin-left: 5px;
+}
+
 .profile-page-header-user-info-buttons {
   display: flex;
   flex-direction: row;
@@ -903,6 +926,7 @@ watch(selectedTab, async (val) => {
   font-size: 12px;
   color: gray;
   margin-top: 5px;
+  white-space: nowrap;
 }
 
 .timeline-snippet {
@@ -913,8 +937,8 @@ watch(selectedTab, async (val) => {
 
 .timeline-link {
   font-weight: bold;
-  color: var(--primary-color);
   text-decoration: none;
+  color: var(--text-color);
   word-break: break-word;
 }
 
@@ -939,6 +963,98 @@ watch(selectedTab, async (val) => {
   padding: 40px 0;
 }
 
+.ttimeline-container {
+  margin-top: 2px;
+  padding-bottom: 30px;
+}
+
+.timeline-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tags-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  padding-top: 5px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tags-container-item {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+}
+
+.timeline-tag-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.comment-content {
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  gap: 5px;
+}
+
+.comment-content-item-main {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: flex-start;
+}
+
+.comment-content-item-icon {
+  width: 20px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.comment-content-item {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.timeline-comment-link {
+  color: var(--text-color);
+  word-break: break-word;
+  text-decoration: underline;
+  margin-left: 5px;
+}
+
+.timeline-comment-link:hover {
+  color: var(--primary-color);
+}
+
+.timeline-article-link {
+  color: var(--text-color);
+  font-weight: bold;
+  font-size: 20px;
+  word-break: break-word;
+  text-decoration: underline;
+}
+
+.timeline-article-link:hover {
+  color: var(--primary-color);
+}
+
+.article-container {
+  padding: 20px;
+  border-radius: 10px;
+  border: 1px solid var(--normal-border-color);
+  margin-top: 10px;
+}
+
 .follow-container {
 }
 
@@ -975,6 +1091,7 @@ watch(selectedTab, async (val) => {
   .profile-page-header-avatar-img {
     width: 100px;
     height: 100px;
+    border-radius: 50%;
   }
 
   :deep(.base-tabs-item) {

frontend_nuxt/plugins/iconpark.client.ts

@@ -22,6 +22,7 @@ import {
   Moon,
   ComputerOne,
   Comment,
+  CommentOne,
   Link,
   SlyFaceWhitSmile,
   Like,
@@ -103,6 +104,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('Moon', Moon)
   nuxtApp.vueApp.component('ComputerOne', ComputerOne)
   nuxtApp.vueApp.component('CommentIcon', Comment)
+  nuxtApp.vueApp.component('CommentOne', CommentOne)
   nuxtApp.vueApp.component('LinkIcon', Link)
   nuxtApp.vueApp.component('SlyFaceWhitSmile', SlyFaceWhitSmile)
   nuxtApp.vueApp.component('Like', Like)

frontend_nuxt/utils/time.js

@@ -40,4 +40,33 @@ export default class TimeManager {
 
     return `${date.getFullYear()}.${month}.${day} ${timePart}`
   }
+
+  // 仅显示日期（不含时间）
+  static formatWithDay(input) {
+    const date = new Date(input)
+    if (Number.isNaN(date.getTime())) return ''
+
+    const now = new Date()
+
+    const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    const startOfDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+    const diffDays = Math.floor((startOfToday - startOfDate) / 86400000)
+
+    if (diffDays === 0) return '今天'
+    if (diffDays === 1) return '昨天'
+    if (diffDays === 2) return '前天'
+
+    const month = date.getMonth() + 1
+    const day = date.getDate()
+
+    if (date.getFullYear() === now.getFullYear()) {
+      return `${month}.${day}`
+    }
+
+    if (date.getFullYear() === now.getFullYear() - 1) {
+      return `去年 ${month}.${day}`
+    }
+
+    return `${date.getFullYear()}.${month}.${day}`
+  }
 }