feat: add base item group component

CONTRIBUTING.md

@@ -53,8 +53,8 @@ cd OpenIsle
      --profile dev up -d
    ```
    该命令会创建名为 `frontend_dev` 的容器并运行 `npm run dev`，浏览器访问 http://127.0.0.1:3000 即可查看页面。
-   修改前端代码，页面会热更新。
-   如果修改后端代码，可以重启后端容器, 或是环境变量中指向IDEA，采用IDEA编译运行也可以哦。
+
+   修改代码后，可以强制重新创建所有容器，执行：
 
    ```shell
    docker compose \
@@ -73,12 +73,6 @@ cd OpenIsle
    docker compose -f docker/docker-compose.yaml --env-file .env --profile dev down
    ```
 
-5. 开发时若需要**重置所有容器及其挂载的数据卷**，可以执行：
-   ```shell
-   docker compose -f docker/docker-compose.yaml --env-file .env --profile dev down -v
-   ```
-   `-v` 参数会在关闭容器的同时移除通过 `volumes` 声明的挂载卷，适用于希望清理数据库、缓存等持久化数据，确保下一次启动时获得全新环境的场景。
-
 如需自定义 Node 依赖缓存、数据库持久化等，可参考 `docker/docker-compose.yaml` 中各卷的定义进行调整。
 
 ## 启动后端服务

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

@@ -1,43 +0,0 @@
-package com.openisle.controller;
-
-import com.openisle.dto.DonationRequest;
-import com.openisle.dto.DonationResponse;
-import com.openisle.service.PointService;
-import io.swagger.v3.oas.annotations.Operation;
-import io.swagger.v3.oas.annotations.responses.ApiResponse;
-import io.swagger.v3.oas.annotations.security.SecurityRequirement;
-import lombok.RequiredArgsConstructor;
-import org.springframework.security.core.Authentication;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
-
-@RestController
-@RequestMapping("/api/posts/{postId}/donations")
-@RequiredArgsConstructor
-public class PostDonationController {
-
-  private final PointService pointService;
-
-  @GetMapping
-  @Operation(summary = "List donations", description = "Get recent donations for a post")
-  @ApiResponse(responseCode = "200", description = "Donation summary")
-  public DonationResponse list(@PathVariable Long postId) {
-    return pointService.getPostDonations(postId);
-  }
-
-  @PostMapping
-  @SecurityRequirement(name = "JWT")
-  @Operation(summary = "Donate", description = "Donate points to the post author")
-  @ApiResponse(responseCode = "200", description = "Donation result")
-  public DonationResponse donate(
-    @PathVariable Long postId,
-    @RequestBody DonationRequest req,
-    Authentication auth
-  ) {
-    return pointService.donateToPost(auth.getName(), postId, req.getAmount());
-  }
-}

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

@@ -1,16 +0,0 @@
-package com.openisle.dto;
-
-import java.time.LocalDateTime;
-import lombok.Getter;
-import lombok.Setter;
-
-@Getter
-@Setter
-public class DonationDto {
-
-  private Long userId;
-  private String username;
-  private String avatar;
-  private int amount;
-  private LocalDateTime createdAt;
-}

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

@@ -1,11 +0,0 @@
-package com.openisle.dto;
-
-import lombok.Getter;
-import lombok.Setter;
-
-@Getter
-@Setter
-public class DonationRequest {
-
-  private int amount;
-}

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

@@ -1,15 +0,0 @@
-package com.openisle.dto;
-
-import java.util.ArrayList;
-import java.util.List;
-import lombok.Getter;
-import lombok.Setter;
-
-@Getter
-@Setter
-public class DonationResponse {
-
-  private int totalAmount;
-  private List<DonationDto> donations = new ArrayList<>();
-  private Integer balance;
-}

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

@@ -29,5 +29,4 @@ public class PostChangeLogDto {
   private LocalDateTime newPinnedAt;
   private Boolean oldFeatured;
   private Boolean newFeatured;
-  private Integer amount;
 }

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

@@ -52,8 +52,6 @@ public class PostChangeLogMapper {
     } else if (log instanceof PostFeaturedChangeLog f) {
       dto.setOldFeatured(f.isOldFeatured());
       dto.setNewFeatured(f.isNewFeatured());
-    } else if (log instanceof PostDonateChangeLog d) {
-      dto.setAmount(d.getAmount());
     }
     return dto;
   }

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

@@ -48,8 +48,6 @@ public enum NotificationType {
   POLL_RESULT_PARTICIPANT,
   /** Your post was featured */
   POST_FEATURED,
-  /** Someone donated to your post */
-  DONATION,
   /** You were mentioned in a post or comment */
   MENTION,
 }

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

@@ -13,6 +13,4 @@ public enum PointHistoryType {
   REDEEM,
   LOTTERY_JOIN,
   LOTTERY_REWARD,
-  DONATE_SENT,
-  DONATE_RECEIVED,
 }

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

@@ -10,5 +10,4 @@ public enum PostChangeType {
   FEATURED,
   VOTE_RESULT,
   LOTTERY_RESULT,
-  DONATE,
 }

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

@@ -1,19 +0,0 @@
-package com.openisle.model;
-
-import jakarta.persistence.Column;
-import jakarta.persistence.Entity;
-import jakarta.persistence.Table;
-import lombok.Getter;
-import lombok.NoArgsConstructor;
-import lombok.Setter;
-
-@Getter
-@Setter
-@NoArgsConstructor
-@Entity
-@Table(name = "post_donate_change_logs")
-public class PostDonateChangeLog extends PostChangeLog {
-
-  @Column(nullable = false)
-  private int amount;
-}

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

@@ -2,14 +2,11 @@ package com.openisle.repository;
 
 import com.openisle.model.Comment;
 import com.openisle.model.PointHistory;
-import com.openisle.model.PointHistoryType;
 import com.openisle.model.Post;
 import com.openisle.model.User;
 import java.time.LocalDateTime;
 import java.util.List;
 import org.springframework.data.jpa.repository.JpaRepository;
-import org.springframework.data.jpa.repository.Query;
-import org.springframework.data.repository.query.Param;
 
 public interface PointHistoryRepository extends JpaRepository<PointHistory, Long> {
   List<PointHistory> findByUserOrderByIdDesc(User user);
@@ -24,11 +21,4 @@ public interface PointHistoryRepository extends JpaRepository<PointHistory, Long
   List<PointHistory> findByComment(Comment comment);
 
   List<PointHistory> findByPost(Post post);
-
-  List<PointHistory> findTop10ByPostAndTypeOrderByCreatedAtDesc(Post post, PointHistoryType type);
-
-  @Query(
-    "SELECT COALESCE(SUM(ph.amount), 0) FROM PointHistory ph WHERE ph.post = :post AND ph.type = :type"
-  )
-  Long sumAmountByPostAndType(@Param("post") Post post, @Param("type") PointHistoryType type);
 }

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

@@ -1,7 +1,5 @@
 package com.openisle.service;
 
-import com.openisle.dto.DonationDto;
-import com.openisle.dto.DonationResponse;
 import com.openisle.exception.FieldException;
 import com.openisle.model.*;
 import com.openisle.repository.*;
@@ -10,10 +8,8 @@ import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List;
 import java.util.Map;
-import java.util.stream.Collectors;
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
-import org.springframework.transaction.annotation.Transactional;
 
 @Service
 @RequiredArgsConstructor
@@ -24,8 +20,6 @@ public class PointService {
   private final PostRepository postRepository;
   private final CommentRepository commentRepository;
   private final PointHistoryRepository pointHistoryRepository;
-  private final NotificationService notificationService;
-  private final PostChangeLogService postChangeLogService;
 
   public int awardForPost(String userName, Long postId) {
     User user = userRepository.findByUsername(userName).orElseThrow();
@@ -278,95 +272,4 @@ public class PointService {
     User user = userRepository.findByUsername(userName).orElseThrow();
     return recalculateUserPoints(user);
   }
-
-  @Transactional
-  public DonationResponse donateToPost(String donorName, Long postId, int amount) {
-    if (amount <= 0) {
-      throw new FieldException("amount", "打赏积分必须大于0");
-    }
-    User donor = userRepository.findByUsername(donorName).orElseThrow();
-    Post post = postRepository.findById(postId).orElseThrow();
-    User author = post.getAuthor();
-    if (author.getId().equals(donor.getId())) {
-      throw new FieldException("post", "不能给自己打赏");
-    }
-    if (donor.getPoint() < amount) {
-      throw new FieldException("point", "积分不足");
-    }
-    addPoint(donor, -amount, PointHistoryType.DONATE_SENT, post, null, author);
-    addPoint(author, amount, PointHistoryType.DONATE_RECEIVED, post, null, donor);
-    notificationService.createNotification(
-      author,
-      NotificationType.DONATION,
-      post,
-      null,
-      null,
-      donor,
-      null,
-      String.valueOf(amount)
-    );
-    postChangeLogService.recordDonation(post, donor, amount);
-    DonationResponse response = buildDonationResponse(post);
-    response.setBalance(donor.getPoint());
-    return response;
-  }
-
-  public DonationResponse getPostDonations(Long postId) {
-    Post post = postRepository.findById(postId).orElseThrow();
-    return buildDonationResponse(post);
-  }
-
-  private DonationResponse buildDonationResponse(Post post) {
-    List<PointHistory> histories =
-      pointHistoryRepository.findTop10ByPostAndTypeOrderByCreatedAtDesc(
-        post,
-        PointHistoryType.DONATE_RECEIVED
-      );
-    List<DonationDto> donations = histories
-      .stream()
-      .collect(Collectors.collectingAndThen(Collectors.toMap(
-          history -> {
-            User donor = history.getFromUser();
-            if (donor != null && donor.getId() != null) {
-              return "user:" + donor.getId();
-            }
-            return "history:" + history.getId();
-          },
-          history -> {
-            DonationDto dto = new DonationDto();
-            User donor = history.getFromUser();
-            if (donor != null) {
-              dto.setUserId(donor.getId());
-              dto.setUsername(donor.getUsername());
-              dto.setAvatar(donor.getAvatar());
-            }
-            dto.setAmount(history.getAmount());
-            dto.setCreatedAt(history.getCreatedAt());
-            return dto;
-          },
-          (left, right) -> {
-            left.setAmount(left.getAmount() + right.getAmount());
-            if (
-              left.getCreatedAt() == null ||
-              (right.getCreatedAt() != null && right.getCreatedAt().isAfter(left.getCreatedAt()))
-            ) {
-              left.setCreatedAt(right.getCreatedAt());
-            }
-            return left;
-          },
-          java.util.LinkedHashMap::new
-        ), map -> new java.util.ArrayList<>(map.values())));
-    Long total = pointHistoryRepository.sumAmountByPostAndType(
-      post,
-      PointHistoryType.DONATE_RECEIVED
-    );
-    int safeTotal = 0;
-    if (total != null) {
-      safeTotal = total > Integer.MAX_VALUE ? Integer.MAX_VALUE : total.intValue();
-    }
-    DonationResponse response = new DonationResponse();
-    response.setDonations(donations);
-    response.setTotalAmount(safeTotal);
-    return response;
-  }
 }

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

@@ -115,15 +115,6 @@ public class PostChangeLogService {
     logRepository.save(log);
   }
 
-  public void recordDonation(Post post, User donor, int amount) {
-    PostDonateChangeLog log = new PostDonateChangeLog();
-    log.setPost(post);
-    log.setUser(donor);
-    log.setType(PostChangeType.DONATE);
-    log.setAmount(amount);
-    logRepository.save(log);
-  }
-
   public void deleteLogsForPost(Post post) {
     logRepository.deleteByPost(post);
   }

frontend_nuxt/app.vue

@@ -41,13 +41,10 @@ import GlobalPopups from '~/components/GlobalPopups.vue'
 import ConfirmDialog from '~/components/ConfirmDialog.vue'
 import MessageFloatWindow from '~/components/MessageFloatWindow.vue'
 import { useIsMobile } from '~/utils/screen'
-import { checkToken } from '~/utils/auth'
 
 const isMobile = useIsMobile()
 const menuVisible = ref(!isMobile.value)
 
-await checkToken()
-
 const showNewPostIcon = computed(() => useRoute().path === '/')
 
 const hideMenu = computed(() => {

frontend_nuxt/assets/global.css

@@ -3,7 +3,7 @@
   --primary-color: rgb(10, 110, 120);
   --primary-color-disabled: rgba(93, 152, 156, 0.5);
   --secondary-color: rgb(255, 255, 255);
-  --secondary-color-hover: rgba(10, 111, 120, 0.079);
+  --secondary-color-hover: rgba(10, 111, 120, 0.184);
   --new-post-icon-color: rgba(10, 111, 120, 0.598);
   --header-height: 60px;
   --header-background-color: white;
@@ -54,7 +54,6 @@
   --header-border-color: #555;
   --primary-color: rgb(17, 182, 197);
   --primary-color-hover: rgb(13, 137, 151);
-  --secondary-color-hover: rgba(17, 182, 197, 0.238);
   --new-post-icon-color: rgba(10, 111, 120, 0.598);
   --header-text-color: white;
   --app-menu-background-color: #333;
@@ -180,7 +179,7 @@ body {
 
 .info-content-text pre .line-numbers {
   counter-reset: line-number 0;
-  white-space: nowrap; /* 禁止数字换行 */
+  white-space: nowrap;        /* 禁止数字换行 */
   font-variant-numeric: tabular-nums; /* 数字等宽 */
   /* width: 2em; */
   font-size: 13px;
@@ -206,6 +205,7 @@ body {
   border-radius: 4px;
   background-color: var(--code-highlight-background-color);
   color: var(--text-color);
+  white-space: pre; /* 禁止自动换行 */
 }
 
 .copy-code-btn {
@@ -344,7 +344,7 @@ body {
   .info-content-text pre {
     line-height: 1.5;
   }
-
+  
   /*处理iframe视频标签*/
   .info-content-text iframe {
     width: 100%;
@@ -370,10 +370,7 @@ body {
   .d2h-code-line {
     padding-left: 10px !important;
   }
-  /* 手机端不换行 */
-  .info-content-text code {
-    white-space: pre; /* 禁止自动换行 */
-  }
+
   /* .d2h-diff-table {
     font-size: 6px !important;
   }

frontend_nuxt/components/BaseImage.vue

@@ -17,7 +17,7 @@ import { computed, ref } from 'vue'
 import { useAttrs } from 'vue'
 
 const props = defineProps({
-  src: { type: String, default: '' },
+  src: { type: String, required: true },
   alt: { type: String, default: '' },
 })
 
@@ -39,6 +39,9 @@ const placeholder = computed(() => {
 function onLoad() {
   loaded.value = true
 }
+function onError() {
+  loaded.value = true
+}
 </script>
 
 <style scoped>

frontend_nuxt/components/BaseItemGroup.vue

@@ -1,187 +1,157 @@
 <template>
   <div
-    ref="groupRef"
     class="base-item-group"
-    :class="groupClass"
-    :style="groupStyle"
+    :style="{
+      width: `${containerWidth}px`,
+      height: `${itemSize}px`,
+      '--base-item-group-duration': `${animationDuration}ms`,
+    }"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
-    @focusin="onFocusIn"
-    @focusout="onFocusOut"
   >
     <div
-      v-for="(item, index) in normalizedItems"
-      :key="resolveKey(item, index)"
-      class="base-item-group-item"
-      :style="{ zIndex: getZIndex(index) }"
+      v-for="(item, index) in items"
+      :key="itemKey(item, index)"
+      class="base-item-group__item"
+      :style="{
+        width: `${itemSize}px`,
+        height: `${itemSize}px`,
+        transform: `translateX(${index * activeGap}px)`,
+        zIndex: items.length - index,
+      }"
     >
-      <slot name="item" :item="item" :index="index"></slot>
+      <slot :item="item" :index="index">
+        <BaseImage
+          v-if="item && (item.src || typeof item === 'string')"
+          class="base-item-group__image"
+          :src="typeof item === 'string' ? item : item.src"
+          :alt="itemAlt(item, index)"
+        />
+        <div v-else class="base-item-group__placeholder">{{ placeholderText(item) }}</div>
+      </slot>
     </div>
-    <slot name="after"></slot>
   </div>
 </template>
 
 <script setup>
-import { computed, reactive, ref } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
+import BaseImage from './BaseImage.vue'
 
 const props = defineProps({
   items: {
     type: Array,
     default: () => [],
   },
-  itemKey: {
-    type: [String, Function],
-    default: null,
+  itemSize: {
+    type: Number,
+    default: 40,
   },
-  overlap: {
-    type: [Number, String],
+  collapsedGap: {
+    type: Number,
     default: 12,
   },
   expandedGap: {
-    type: [Number, String],
-    default: 8,
-  },
-  direction: {
-    type: String,
-    default: 'horizontal',
-    validator: (value) => ['horizontal', 'vertical'].includes(value),
-  },
-  reverse: {
-    type: Boolean,
-    default: false,
+    type: Number,
+    default: null,
   },
   animationDuration: {
-    type: [Number, String],
+    type: Number,
     default: 200,
   },
-})
-
-const groupRef = ref(null)
-const state = reactive({
-  hovering: false,
-  focused: false,
-})
-
-const normalizedItems = computed(() => props.items || [])
-
-const sanitizedOverlap = computed(() => Math.max(0, Number(props.overlap) || 0))
-const sanitizedExpandedGap = computed(() => Math.max(0, Number(props.expandedGap) || 0))
-const sanitizedAnimationDuration = computed(() => Math.max(0, Number(props.animationDuration) || 0))
-
-const groupClass = computed(() => [
-  `base-item-group--${props.direction}`,
-  {
-    'is-expanded': isExpanded.value,
-    'is-reversed': props.reverse,
+  itemKeyField: {
+    type: String,
+    default: 'id',
   },
-])
+})
 
-const groupStyle = computed(() => ({
-  '--base-item-group-overlap': `${sanitizedOverlap.value}px`,
-  '--base-item-group-expanded-gap': `${sanitizedExpandedGap.value}px`,
-  '--base-item-group-transition-duration': `${sanitizedAnimationDuration.value}ms`,
-}))
+const isHovered = ref(false)
 
-const isExpanded = computed(() => state.hovering || state.focused)
-
-function onMouseEnter() {
-  state.hovering = true
+const onMouseEnter = () => {
+  isHovered.value = true
 }
 
-function onMouseLeave() {
-  state.hovering = false
+const onMouseLeave = () => {
+  isHovered.value = false
 }
 
-function onFocusIn() {
-  state.focused = true
-}
+const effectiveExpandedGap = computed(() =>
+  props.expandedGap == null ? props.itemSize : props.expandedGap,
+)
 
-function onFocusOut(event) {
-  const nextTarget = event.relatedTarget
-  if (!groupRef.value) {
-    state.focused = false
-    return
+const activeGap = computed(() =>
+  isHovered.value ? effectiveExpandedGap.value : props.collapsedGap,
+)
+
+const containerWidth = computed(() =>
+  props.items.length ? props.itemSize + (props.items.length - 1) * activeGap.value : props.itemSize,
+)
+
+watchEffect(() => {
+  if (effectiveExpandedGap.value < props.collapsedGap) {
+    console.warn('[BaseItemGroup] `expandedGap` should be greater than or equal to `collapsedGap`.')
   }
-  if (!nextTarget || !groupRef.value.contains(nextTarget)) {
-    state.focused = false
-  }
-}
+})
 
-function resolveKey(item, index) {
-  if (typeof props.itemKey === 'function') {
-    return props.itemKey(item, index)
-  }
-  if (props.itemKey && item && Object.prototype.hasOwnProperty.call(item, props.itemKey)) {
-    return item[props.itemKey]
+const itemKey = (item, index) => {
+  if (item && typeof item === 'object' && props.itemKeyField in item) {
+    return item[props.itemKeyField]
   }
   return index
 }
 
-function getZIndex(index) {
-  if (props.reverse) {
-    return index + 1
+const itemAlt = (item, index) => {
+  if (item && typeof item === 'object') {
+    return item.alt || `item-${index}`
   }
-  return normalizedItems.value.length - index
+  if (typeof item === 'string') {
+    return `item-${index}`
+  }
+  return 'item'
+}
+
+const placeholderText = (item) => {
+  if (item == null) return ''
+  if (typeof item === 'object' && 'text' in item) return item.text
+  return String(item)
 }
 </script>
 
 <style scoped>
 .base-item-group {
-  --base-item-group-overlap: 12px;
-  --base-item-group-expanded-gap: 8px;
-  --base-item-group-transition-duration: 200ms;
-  display: inline-flex;
+  display: flex;
   position: relative;
-  align-items: center;
+  transition: width var(--base-item-group-duration) ease;
 }
 
-.base-item-group:focus-within {
-  outline: none;
-}
-
-.base-item-group--horizontal {
-  flex-direction: row;
-}
-
-.base-item-group--horizontal.is-reversed {
-  flex-direction: row-reverse;
-}
-
-.base-item-group--vertical {
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.base-item-group--vertical.is-reversed {
-  flex-direction: column-reverse;
-}
-
-.base-item-group-item {
-  transition:
-    margin var(--base-item-group-transition-duration) ease,
-    transform var(--base-item-group-transition-duration) ease;
-  display: inline-flex;
+.base-item-group__item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: 9999px;
+  overflow: hidden;
+  background-color: var(--color-neutral-100, #f0f2f5);
+  transition: transform var(--base-item-group-duration) ease;
+  box-shadow: 0 0 0 2px var(--color-surface, #fff);
 }
 
-.base-item-group--horizontal:not(.is-expanded) .base-item-group-item:not(:first-child) {
-  margin-left: calc(var(--base-item-group-overlap) * -1);
+.base-item-group__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-.base-item-group--horizontal.is-expanded .base-item-group-item:not(:first-child) {
-  margin-left: var(--base-item-group-expanded-gap);
-}
-
-.base-item-group--vertical:not(.is-expanded) .base-item-group-item:not(:first-child) {
-  margin-top: calc(var(--base-item-group-overlap) * -1);
-}
-
-.base-item-group--vertical.is-expanded .base-item-group-item:not(:first-child) {
-  margin-top: var(--base-item-group-expanded-gap);
-}
-
-.base-item-group.is-expanded .base-item-group-item {
-  transform: translateZ(0);
+.base-item-group__placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-neutral-500, #666);
+  background-color: var(--color-neutral-200, #e5e7eb);
 }
 </style>

frontend_nuxt/components/BaseUserAvatar.vue

@@ -1,20 +1,22 @@
 <template>
-  <div
+  <NuxtLink
+    :to="resolvedLink"
     class="base-user-avatar"
     :class="wrapperClass"
     :style="wrapperStyle"
     v-bind="wrapperAttrs"
-    @click="handleClick"
   >
-    <BaseImage :src="props.src" :alt="altText" class="base-user-avatar-img" />
-  </div>
+    <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
+  </NuxtLink>
 </template>
 
 <script setup>
-import { computed, watch } from 'vue'
+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],
@@ -48,6 +50,15 @@ const props = defineProps({
 
 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 !== '') {
@@ -59,16 +70,10 @@ const resolvedLink = computed(() => {
 const altText = computed(() => props.alt || '用户头像')
 
 const sizeStyle = computed(() => {
-  var style = {}
-
-  if (props.width > 0) {
-    style.width = `${props.width}px`
-  }
-  if (props.height > 0) {
-    style.height = `${props.height}px`
-  }
-
-  return style
+  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 wrapperStyle = computed(() => {
@@ -83,9 +88,10 @@ const wrapperAttrs = computed(() => {
   return rest
 })
 
-const handleClick = () => {
-  if (props.disableLink) return
-  navigateTo(resolvedLink.value)
+function onError() {
+  if (currentSrc.value !== DEFAULT_AVATAR) {
+    currentSrc.value = DEFAULT_AVATAR
+  }
 }
 </script>
 
@@ -103,7 +109,7 @@ const handleClick = () => {
 }
 
 .base-user-avatar:hover {
-  box-shadow: 0 4px 24px rgba(251, 138, 138, 0.1);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
   transform: scale(1.05);
 }
 

frontend_nuxt/components/CommentItem.vue

@@ -488,16 +488,6 @@ const handleContentClick = (e) => {
   font-weight: bold;
 }
 
-.article-footer-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 10px;
-  margin-top: 0px;
-  flex-wrap: wrap;
-  margin-bottom: 0px;
-}
-
 .medal-name {
   font-size: 12px;
   margin-left: 1px;

frontend_nuxt/components/DonateGroup.vue

@@ -1,319 +0,0 @@
-<template>
-  <div class="donate-container">
-    <ToolTip content="打赏作者" placement="bottom" v-if="donationList.length > 0">
-      <div class="donate-viewer" @click="openPanel">
-        <div
-          class="donate-viewer-item-container"
-          @mouseenter="cancelHide"
-          @mouseleave="scheduleHide"
-        >
-          <BaseItemGroup
-            :items="donationList"
-            :overlap="10"
-            :expanded-gap="2"
-            :direction="vertical"
-          >
-            <template #item="{ item }">
-              <BaseUserAvatar
-                :user-id="item.userId"
-                :src="item.avatar"
-                :alt="item.username"
-                :width="20"
-                :disable-link="true"
-              />
-            </template>
-          </BaseItemGroup>
-          <div class="donate-counts-text">{{ totalAmount }}</div>
-        </div>
-      </div>
-    </ToolTip>
-    <ToolTip content="赞赏作者" placement="bottom" v-else>
-      <div class="donate-viewer-item placeholder" @click="openPanel">
-        <financing class="donate-viewer-item-placeholder-icon" />
-      </div>
-    </ToolTip>
-    <div
-      v-if="panelVisible"
-      class="donate-panel"
-      ref="donatePanelRef"
-      :style="panelInlineStyle"
-      @mouseenter="cancelHide"
-      @mouseleave="scheduleHide"
-    >
-      <div
-        v-for="option in donateOptions"
-        :key="option"
-        class="donate-option"
-        :class="{ disabled: donating || isAuthorUser || !authState.loggedIn }"
-        @click="handleDonate(option)"
-      >
-        <financing class="donate-option-icon" />
-        <div class="donate-counts-text">{{ option }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { Finance } from '@icon-park/vue-next'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { toast } from '~/main'
-import { authState, getToken } from '~/utils/auth'
-
-const financing = Finance
-
-const props = defineProps({
-  postId: {
-    type: [Number, String],
-    required: true,
-  },
-  authorId: {
-    type: [Number, String],
-    required: true,
-  },
-  isAuthor: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const config = useRuntimeConfig()
-const API_BASE_URL = config.public.apiBaseUrl
-
-const panelVisible = ref(false)
-const donatePanelRef = ref(null)
-const panelInlineStyle = ref({})
-const donationSummary = ref({ totalAmount: 0, donations: [] })
-const donating = ref(false)
-let hideTimer = null
-
-const donateOptions = [10, 30, 100]
-const donationList = computed(() => donationSummary.value?.donations ?? [])
-const totalAmount = computed(() => donationSummary.value?.totalAmount ?? 0)
-const isAuthorUser = computed(() => {
-  if (props.isAuthor) return true
-  if (!authState.userId || !props.authorId) return false
-  return Number(authState.userId) === Number(props.authorId)
-})
-
-const openPanel = () => {
-  clearTimeout(hideTimer)
-  panelVisible.value = true
-}
-
-const scheduleHide = () => {
-  clearTimeout(hideTimer)
-  hideTimer = setTimeout(() => {
-    panelVisible.value = false
-  }, 500)
-}
-const cancelHide = () => {
-  clearTimeout(hideTimer)
-}
-
-const updatePanelInlineStyle = () => {
-  if (!panelVisible.value) return
-  const panelEl = donatePanelRef.value
-  if (!panelEl) return
-  const parentEl = panelEl.closest('.donate-container')?.parentElement.parentElement
-  if (!parentEl) return
-  const parentWidth = parentEl.clientWidth - 20
-  panelInlineStyle.value = {
-    width: 'max-content',
-    maxWidth: `${parentWidth}px`,
-  }
-}
-
-watch(panelVisible, async (visible) => {
-  if (visible) {
-    await nextTick()
-    updatePanelInlineStyle()
-  }
-})
-
-const normalizeSummary = (data) => ({
-  totalAmount: data?.totalAmount ?? 0,
-  donations: Array.isArray(data?.donations) ? data.donations : [],
-})
-
-const loadDonations = async () => {
-  try {
-    const res = await fetch(`${API_BASE_URL}/api/posts/${props.postId}/donations`)
-    if (!res.ok) return
-    const data = await res.json()
-    donationSummary.value = normalizeSummary(data)
-  } catch (e) {
-    // ignore network errors for donation summary
-  }
-}
-
-const handleDonate = async (amount) => {
-  if (!amount || donating.value) return
-  if (!authState.loggedIn) {
-    toast.error('请先登录后再打赏')
-    panelVisible.value = false
-    return
-  }
-  if (isAuthorUser.value) {
-    toast.warning('不能给自己打赏')
-    return
-  }
-  try {
-    donating.value = true
-    const token = getToken()
-    const res = await fetch(`${API_BASE_URL}/api/posts/${props.postId}/donations`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: token ? `Bearer ${token}` : '',
-      },
-      body: JSON.stringify({ amount }),
-    })
-    const data = await res.json().catch(() => null)
-    if (!res.ok) {
-      if (res.status === 401) {
-        toast.error('请先登录后再打赏')
-      } else {
-        toast.error(data?.error || '打赏失败')
-      }
-      return
-    }
-    donationSummary.value = normalizeSummary(data)
-    toast.success('打赏成功，感谢你的支持！')
-    panelVisible.value = false
-  } catch (e) {
-    toast.error('打赏失败，请稍后再试')
-  } finally {
-    donating.value = false
-  }
-}
-
-onMounted(async () => {
-  window.addEventListener('resize', updatePanelInlineStyle)
-  await loadDonations()
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', updatePanelInlineStyle)
-})
-
-watch(
-  () => props.postId,
-  async () => {
-    donationSummary.value = { totalAmount: 0, donations: [] }
-    await loadDonations()
-  },
-)
-</script>
-
-<style scoped>
-.donate-container {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.donate-viewer-item-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 2px;
-}
-
-.donate-viewer {
-  border-radius: 13px;
-  padding: 3px;
-  padding-right: 6px;
-  cursor: pointer;
-  transition: background-color 0.5s ease;
-}
-
-.donate-viewer:hover {
-  background-color: var(--secondary-color-hover);
-}
-
-.donate-counts-text {
-  color: var(--primary-color);
-  font-size: 14px;
-}
-
-.donate-panel {
-  position: absolute;
-  bottom: 35px;
-  background-color: var(--background-color);
-  border: 1px solid var(--normal-border-color);
-  border-radius: 20px;
-  padding: 5px 10px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  z-index: 10;
-  gap: 5px;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-}
-
-.donate-viewer-item.placeholder {
-  display: flex;
-  cursor: pointer;
-  flex-direction: row;
-  padding: 2px 10px;
-  gap: 5px;
-  border: 1px solid var(--normal-border-color);
-  border-radius: 10px;
-  margin-right: 5px;
-  font-size: 14px;
-  color: var(--text-color);
-  align-items: center;
-  background-color: var(--normal-light-background-color);
-}
-
-.donate-viewer-item {
-  font-size: 16px;
-}
-
-.donate-viewer-item-placeholder-icon {
-  opacity: 0.5;
-}
-
-.donate-option {
-  cursor: pointer;
-  padding: 3px 6px;
-  border-radius: 4px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 2px;
-}
-
-.donate-option:hover {
-  background-color: var(--normal-light-background-color);
-}
-
-.donate-option.disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.donate-option.disabled:hover {
-  background-color: transparent;
-}
-
-.donate-option-icon {
-  color: var(--primary-color);
-}
-
-@media (max-width: 768px) {
-  .donate-viewer-item.placeholder {
-    padding: 4px 8px;
-    gap: 3px;
-    border: 1px solid var(--normal-border-color);
-    border-radius: 10px;
-    margin-right: 3px;
-    margin-bottom: 3px;
-    font-size: 12px;
-    color: var(--text-color);
-    align-items: center;
-  }
-}
-</style>

frontend_nuxt/components/HeaderComponent.vue

@@ -78,9 +78,7 @@
             <div class="header-icon-item" @click="goToMessages">
               <message-emoji class="header-icon" />
               <span class="header-label">消息</span>
-              <span v-if="unreadMessageCount > 0" class="unread-badge">{{
-                unreadMessageCount
-              }}</span>
+              <span v-if="unreadMessageCount > 0" class="unread-badge">{{ unreadMessageCount }}</span>
               <span v-else-if="hasChannelUnread" class="unread-dot"></span>
             </div>
           </ToolTip>
@@ -91,9 +89,10 @@
                 <BaseUserAvatar
                   class="avatar-img"
                   :user-id="authState.userId"
-                  :src="authState.avatar"
-                  :disable-link="true"
+                  :src="avatar"
+                  alt="avatar"
                   :width="32"
+                  :disable-link="true"
                 />
                 <down />
               </div>
@@ -118,7 +117,7 @@ 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 } from '~/utils/auth'
+import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
 import { useUnreadCount } from '~/composables/useUnreadCount'
 import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
 import { useIsMobile } from '~/utils/screen'
@@ -140,11 +139,13 @@ const isLogin = computed(() => authState.loggedIn)
 const isMobile = useIsMobile()
 const { count: unreadMessageCount, fetchUnreadCount } = useUnreadCount()
 const { hasUnread: hasChannelUnread, fetchChannelUnread } = useChannelsUnreadCount()
+const avatar = ref('')
 const showSearch = ref(false)
 const searchDropdown = ref(null)
 const userMenu = ref(null)
 const menuBtn = ref(null)
 const isCopying = ref(false)
+
 const onlineCount = ref(0)
 
 // 心跳检测
@@ -207,7 +208,7 @@ const copyInviteLink = async () => {
   const token = getToken()
   if (!token) {
     toast.error('请先登录')
-    isCopying.value = false // 🔥 修复：未登录时立即复原状态
+    isCopying.value = false   // 🔥 修复：未登录时立即复原状态
     return
   }
   try {
@@ -251,7 +252,17 @@ const copyRssLink = async () => {
 }
 
 const goToProfile = async () => {
-  let id = authState.username || authState.id
+  if (!authState.loggedIn) {
+    navigateTo('/login', { replace: true })
+    return
+  }
+  let id = authState.username || authState.userId
+  if (!id) {
+    const user = await loadCurrentUser()
+    if (user) {
+      id = user.username || user.id
+    }
+  }
   if (id) {
     navigateTo(`/users/${id}`, { replace: true })
   }
@@ -295,6 +306,14 @@ const iconClass = computed(() => {
 })
 
 onMounted(async () => {
+  const updateAvatar = async () => {
+    if (authState.loggedIn) {
+      const user = await loadCurrentUser()
+      if (user && user.avatar) {
+        avatar.value = user.avatar
+      }
+    }
+  }
   const updateUnread = async () => {
     if (authState.loggedIn) {
       fetchUnreadCount()
@@ -304,8 +323,17 @@ onMounted(async () => {
     }
   }
 
+  await updateAvatar()
   await updateUnread()
 
+  watch(
+    () => authState.loggedIn,
+    async (isLoggedIn) => {
+      await updateAvatar()
+      await updateUnread()
+    },
+  )
+
   // 新增的在线人数逻辑
   sendPing()
   fetchCount()
@@ -454,6 +482,7 @@ onMounted(async () => {
   cursor: pointer;
 }
 
+
 .invite_text:hover {
   opacity: 0.8;
   text-decoration: underline;
@@ -514,10 +543,7 @@ onMounted(async () => {
   color: var(--primary-color);
   cursor: pointer;
   position: relative;
-  transition:
-    color 0.25s ease,
-    transform 0.15s ease,
-    opacity 0.2s ease;
+  transition: color 0.25s ease, transform 0.15s ease, opacity 0.2s ease;
 }
 
 .header-icon-item:hover {
@@ -546,14 +572,15 @@ onMounted(async () => {
   position: absolute;
   top: -4px;
   right: -6px;
-  color: var(--primary-color); /* 🔹 使用主题主色 */
-  background: none; /* 🔹 去掉背景 */
-  font-size: 11px; /* 字体稍微大一点以便清晰 */
-  font-weight: 600; /* 加一点权重让数字更醒目 */
+  color: var(--primary-color);  /* 🔹 使用主题主色 */
+  background: none;             /* 🔹 去掉背景 */
+  font-size: 11px;              /* 字体稍微大一点以便清晰 */
+  font-weight: 600;             /* 加一点权重让数字更醒目 */
   line-height: 1;
-  padding: 0; /* 去掉内边距 */
+  padding: 0;                   /* 去掉内边距 */
 }
 
+
 @keyframes rss-glow {
   0% {
     text-shadow: 0 0 0px var(--primary-color);

frontend_nuxt/components/NotificationContainer.vue

@@ -45,7 +45,6 @@ export default {
   font-size: 12px;
   cursor: pointer;
   margin-left: 10px;
-  white-space: nowrap;
 }
 
 .mark-read-button:hover {
@@ -54,7 +53,6 @@ export default {
 
 .has-read-button {
   font-size: 12px;
-  white-space: nowrap;
 }
 
 @media (max-width: 768px) {

frontend_nuxt/components/PostChangeLogItem.vue

@@ -42,9 +42,6 @@
       <span v-else-if="log.type === 'LOTTERY_RESULT'" class="change-log-content"
         >系统已「精密计算」抽奖结果 (=ﾟωﾟ)ﾉ</span
       >
-      <span v-else-if="log.type === 'DONATE'" class="change-log-content"
-        >为文章打赏了 {{ log.amount ?? 0 }} 积分</span
-      >
     </div>
     <div class="change-log-time">{{ log.time }}</div>
     <div

frontend_nuxt/components/ReactionsGroup.vue

@@ -18,11 +18,9 @@
             <div>{{ counts[r.type] }}</div>
           </div>
 
-          <ToolTip content="发表心情" placement="bottom">
-            <div class="reactions-viewer-item placeholder" @click="openPanel">
-              <sly-face-whit-smile class="reactions-viewer-item-placeholder-icon" />
-            </div>
-          </ToolTip>
+          <div class="reactions-viewer-item placeholder" @click="openPanel">
+            <sly-face-whit-smile class="reactions-viewer-item-placeholder-icon" />
+          </div>
         </template>
         <template v-else-if="displayedReactions.length">
           <div
@@ -166,7 +164,7 @@ const updatePanelInlineStyle = () => {
   if (!panelVisible.value) return
   const panelEl = reactionsPanelRef.value
   if (!panelEl) return
-  const parentEl = panelEl.closest('.reactions-container')?.parentElement?.parentElement
+  const parentEl = panelEl.closest('.reactions-container')?.parentElement
   if (!parentEl) return
   const parentWidth = parentEl.clientWidth - 20
   panelInlineStyle.value = {
@@ -322,12 +320,11 @@ onBeforeUnmount(() => {
 .reactions-count {
   font-size: 16px;
   font-weight: bold;
-  margin-right: 15px;
 }
 
 .reactions-panel {
   position: absolute;
-  bottom: 35px;
+  bottom: 40px;
   background-color: var(--background-color);
   border: 1px solid var(--normal-border-color);
   border-radius: 20px;
@@ -360,6 +357,7 @@ onBeforeUnmount(() => {
   border: 1px solid var(--normal-border-color);
   border-radius: 10px;
   margin-right: 5px;
+  margin-bottom: 5px;
   font-size: 14px;
   color: var(--text-color);
   align-items: center;

frontend_nuxt/pages/index.vue

@@ -76,7 +76,7 @@
               {{ article.title }}
             </NuxtLink>
             <NuxtLink class="article-item-description main-item" :to="`/posts/${article.id}`">
-              <div v-html="stripMarkdownWithTiebaMoji(article.description, 500)"></div>
+              <div v-html="sanitizeDescription(article.description)"></div>
             </NuxtLink>
             <div class="article-info-container main-item">
               <ArticleCategory :category="article.category" />
@@ -143,7 +143,6 @@ import { useIsMobile } from '~/utils/screen'
 import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import TimeManager from '~/utils/time'
 import { selectedCategoryGlobal, selectedTagsGlobal } from '~/composables/postFilter'
-import { stripMarkdownWithTiebaMoji } from '~/utils/markdown'
 useHead({
   title: 'OpenIsle - 全面开源的自由社区',
   meta: [
@@ -379,6 +378,27 @@ onBeforeUnmount(() => {
 /** 供 InfiniteLoadMore 重建用的 key：筛选/Tab 改变即重建内部状态 */
 const ioKey = computed(() => asyncKey.value.join('::'))
 
+// 在首页摘要加载贴吧表情包
+const sanitizeDescription = (text) => {
+  if (!text) return ''
+
+  // 1️⃣ 先把 Markdown 转成纯文本
+  const plain = stripMarkdown(text)
+
+  // 2️⃣ 替换 :tieba123: 为 <img>
+  const withEmoji = plain.replace(/:tieba(\d+):/g, (match, num) => {
+    const key = `tieba${num}`
+    const file = tiebaEmoji[key]
+    return file
+      ? `<img loading="lazy" class="emoji" src="${file}" alt="${key}">`
+      : match // 没有匹配到图片则保留原样
+  })
+
+  // 3️⃣ 可选：截断纯文本长度（防止撑太长）
+  const truncated = withEmoji.length > 500 ? withEmoji.slice(0, 500) + '…' : withEmoji
+
+  return truncated
+}
 
 // 页面选项同步到全局状态
 watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {

frontend_nuxt/pages/login.vue

@@ -40,7 +40,7 @@
 
 <script setup>
 import { toast } from '~/main'
-import { setToken } from '~/utils/auth'
+import { setToken, loadCurrentUser } from '~/utils/auth'
 import BaseInput from '~/components/BaseInput.vue'
 import ThirdPartyAuth from '~/components/ThirdPartyAuth.vue'
 import { registerPush } from '~/utils/push'
@@ -61,6 +61,7 @@ const submitLogin = async () => {
     const data = await res.json()
     if (res.ok && data.token) {
       setToken(data.token)
+      await loadCurrentUser()
       toast.success('登录成功')
       registerPush()
       await navigateTo('/', { replace: true })

frontend_nuxt/pages/message-box/index.vue

@@ -84,7 +84,7 @@
           >
             <div class="conversation-avatar">
               <BaseImage
-                :src="ch.avatar"
+                :src="ch.avatar || '/default-avatar.svg'"
                 :alt="ch.name"
                 class="avatar-img"
                 @error="handleAvatarError"
@@ -194,7 +194,7 @@ function formatTime(timeString) {
 
 // 头像加载失败处理
 function handleAvatarError(event) {
-  event.target.src = null
+  event.target.src = '/default-avatar.svg'
 }
 
 async function fetchChannels() {

frontend_nuxt/pages/message.vue

@@ -75,7 +75,7 @@
                           @click="markRead(item.id)"
                           :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
                         >
-                          <span v-html="stripMarkdownWithTiebaMoji(item.parentComment.content, 500)"></span>
+                          {{ stripMarkdownLength(item.parentComment.content, 100) }}
                         </NuxtLink>
                       </span>
                       回复了
@@ -85,7 +85,7 @@
                           @click="markRead(item.id)"
                           :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                         >
-                        <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
+                          {{ stripMarkdownLength(item.comment.content, 100) }}
                         </NuxtLink>
                       </span>
                     </NotificationContainer>
@@ -115,7 +115,7 @@
                           @click="markRead(item.id)"
                           :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                         >
-                        <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
+                          {{ stripMarkdownLength(item.comment.content, 100) }}
                         </NuxtLink>
                       </span>
                     </NotificationContainer>
@@ -162,7 +162,7 @@
                           @click="markRead(item.id)"
                           :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                         >
-                          <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
+                          {{ stripMarkdownLength(item.comment.content, 100) }}
                         </NuxtLink>
                       </span>
                       进行了表态
@@ -267,7 +267,7 @@
                         @click="markRead(item.id)"
                         :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                       >
-                        <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
+                        {{ stripMarkdownLength(item.comment.content, 100) }}
                       </NuxtLink>
                     </NotificationContainer>
                   </template>
@@ -287,7 +287,7 @@
                         @click="markRead(item.id)"
                         :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
                       >
-                        <span v-html="stripMarkdownWithTiebaMoji(item.parentComment.content, 500)"></span>                      
+                        {{ stripMarkdownLength(item.parentComment.content, 100) }}
                       </NuxtLink>
                       回复了
                       <NuxtLink
@@ -295,7 +295,7 @@
                         @click="markRead(item.id)"
                         :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                       >
-                        <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>                      
+                        {{ stripMarkdownLength(item.comment.content, 100) }}
                       </NuxtLink>
                     </NotificationContainer>
                   </template>
@@ -323,7 +323,7 @@
                         @click="markRead(item.id)"
                         :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                       >
-                        <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
+                        {{ stripMarkdownLength(item.comment.content, 100) }}
                       </NuxtLink>
                     </NotificationContainer>
                   </template>
@@ -342,7 +342,7 @@
                         @click="markRead(item.id)"
                         :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
                       >
-                        <span v-html="stripMarkdownWithTiebaMoji(item.comment.content, 500)"></span>
+                        {{ stripMarkdownLength(item.comment.content, 100) }}
                       </NuxtLink>
                     </NotificationContainer>
                   </template>
@@ -542,27 +542,6 @@
                       被收录为精选
                     </NotificationContainer>
                   </template>
-                  <template v-else-if="item.type === 'DONATION'">
-                    <NotificationContainer :item="item" :markRead="markRead">
-                      <NuxtLink
-                        class="notif-content-text"
-                        @click="markRead(item.id)"
-                        :to="`/users/${item.fromUser.id}`"
-                      >
-                        {{ item.fromUser.username }}
-                      </NuxtLink>
-                      在帖子
-                      <NuxtLink
-                        class="notif-content-text"
-                        @click="markRead(item.id)"
-                        :to="`/posts/${item.post.id}`"
-                      >
-                        {{ stripMarkdownLength(item.post.title, 100) }}
-                      </NuxtLink>
-                      打赏了你
-                      <template v-if="item.content"> ，获得 {{ item.content }} 积分 </template>
-                    </NotificationContainer>
-                  </template>
                   <template v-else-if="item.type === 'POST_DELETED'">
                     <NotificationContainer :item="item" :markRead="markRead">
                       管理员
@@ -577,7 +556,7 @@
                       </template>
                       删除了您的帖子
                       <span class="notif-content-text">
-                        <span v-html="stripMarkdownWithTiebaMoji(item.content, 500)"></span>
+                        {{ stripMarkdownLength(item.content, 100) }}
                       </span>
                     </NotificationContainer>
                   </template>
@@ -607,7 +586,7 @@ import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import BaseTabs from '~/components/BaseTabs.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
-import { stripMarkdownWithTiebaMoji } from '~/utils/markdown'
+import { stripMarkdownLength } from '~/utils/markdown'
 import {
   fetchNotifications,
   fetchUnreadCount,

frontend_nuxt/pages/points.vue

@@ -184,27 +184,6 @@
                   }}</NuxtLink>
                   参与，获得 {{ item.amount }} 积分
                 </template>
-                <template v-else-if="item.type === 'DONATE_SENT'">
-                  你在文章
-                  <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                    item.postTitle
-                  }}</NuxtLink>
-                  中打赏了
-                  <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
-                    item.fromUserName
-                  }}</NuxtLink>
-                  ，消耗 {{ -item.amount }} 积分
-                </template>
-                <template v-else-if="item.type === 'DONATE_RECEIVED'">
-                  <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
-                    item.fromUserName
-                  }}</NuxtLink>
-                  在文章
-                  <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                    item.postTitle
-                  }}</NuxtLink>
-                  中打赏了你，获得 {{ item.amount }} 积分
-                </template>
                 <template v-else-if="item.type === 'SYSTEM_ONLINE'"> 积分历史系统上线 </template>
                 <paper-money-two /> 你目前的积分是 {{ item.balance }}
               </div>
@@ -269,8 +248,6 @@ const iconMap = {
   FEATURE: 'star',
   LOTTERY_JOIN: 'medal-one',
   LOTTERY_REWARD: 'fireworks',
-  DONATE_SENT: 'paper-money-two',
-  DONATE_RECEIVED: 'paper-money-two',
   POST_LIKE_CANCELLED: 'clear-icon',
   COMMENT_LIKE_CANCELLED: 'clear-icon',
 }

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

@@ -92,15 +92,12 @@
           ></div>
 
           <div class="article-footer-container">
-            <div class="option-container">
-              <ReactionsGroup
-                ref="postReactionsGroupRef"
-                v-model="postReactions"
-                content-type="post"
-                :content-id="postId"
-              />
-              <DonateGroup :post-id="postId" :author-id="author.id" :is-author="isAuthor" />
-            </div>
+            <ReactionsGroup
+              ref="postReactionsGroupRef"
+              v-model="postReactions"
+              content-type="post"
+              :content-id="postId"
+            />
             <div class="article-footer-actions">
               <div
                 class="reaction-action like-action"
@@ -214,7 +211,6 @@ import PostChangeLogItem from '~/components/PostChangeLogItem.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ReactionsGroup from '~/components/ReactionsGroup.vue'
-import DonateGroup from '~/components/DonateGroup.vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import PostLottery from '~/components/PostLottery.vue'
 import PostPoll from '~/components/PostPoll.vue'
@@ -412,8 +408,6 @@ const changeLogIcon = (l) => {
     return 'check-one'
   } else if (l.type === 'LOTTERY_RESULT') {
     return 'gift'
-  } else if (l.type === 'DONATE') {
-    return 'financing'
   } else {
     return 'info'
   }
@@ -438,7 +432,6 @@ const mapChangeLog = (l) => ({
   newCategory: l.newCategory,
   oldTags: l.oldTags,
   newTags: l.newTags,
-  amount: l.amount,
   icon: changeLogIcon(l),
 })
 
@@ -1283,14 +1276,6 @@ onMounted(async () => {
   gap: 10px;
   margin-top: 0px;
   flex-wrap: wrap;
-  margin-bottom: 10px;
-}
-
-.option-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
 }
 
 .article-footer-actions {
@@ -1382,7 +1367,6 @@ onMounted(async () => {
 
   .article-footer-container {
     margin-top: 0;
-    margin-bottom: 0px;
   }
 
   .loading-container {

frontend_nuxt/pages/signup.vue

@@ -70,7 +70,7 @@
 <script setup>
 import BaseInput from '~/components/BaseInput.vue'
 import { toast } from '~/main'
-import { setToken } from '~/utils/auth'
+import { loadCurrentUser, setToken } from '~/utils/auth'
 import ThirdPartyAuth from '~/components/ThirdPartyAuth.vue'
 
 const route = useRoute()
@@ -172,6 +172,7 @@ const verifyCode = async () => {
       if (data.reason_code === 'VERIFIED_AND_APPROVED') {
         toast.success('注册成功')
         setToken(data.token)
+        loadCurrentUser()
         navigateTo('/', { replace: true })
       } else if (data.reason_code === 'VERIFIED') {
         if (registerMode.value === 'WHITELIST') {

frontend_nuxt/plugins/iconpark.client.ts

@@ -80,7 +80,6 @@ import {
   Dislike,
   CheckOne,
   Share,
-  Financing,
 } from '@icon-park/vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -164,5 +163,4 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('Dislike', Dislike)
   nuxtApp.vueApp.component('CheckOne', CheckOne)
   nuxtApp.vueApp.component('Share', Share)
-  nuxtApp.vueApp.component('Financing', Financing)
 })

frontend_nuxt/public/default-avatar.svg

@@ -0,0 +1 @@
+<svg t="1755789348718" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13787" width="400" height="400"><path d="M152.773168 306.474932h45.030559c37.525466 0 56.288199 18.762733 56.288198 56.288198v45.024199c0 37.525466-18.762733 56.288199-56.288198 56.288199h-45.030559c-37.525466 0-56.281839-18.762733-56.281839-56.288199v-45.030559c0-37.525466 18.762733-56.288199 56.288199-56.288199z" fill="#4D4132" p-id="13788"></path><path d="M409.294708 763.229814h228.968944v146.285714c0 63.22723-51.263602 114.484472-114.484472 114.484472-63.23359 0-114.484472-51.257242-114.484472-114.484472v-146.285714z" fill="#C5AC95" p-id="13789"></path><path d="M73.97605 520.357366c0 55.957466 45.361292 101.318758 101.318757 101.318758 55.951106 0 101.312398-45.361292 101.312398-101.318758 0-55.951106-45.361292-101.312398-101.318758-101.312397-55.951106 0-101.312398 45.361292-101.312397 101.318758z" fill="#C9AB90" p-id="13790"></path><path d="M490.48964 2.531379c186.520646 0 337.710112 151.195826 337.710112 337.716472v382.740671c0 99.474286-80.63523 180.109516-180.109516 180.109515H287.858484c-74.599354 0-135.078957-60.485963-135.078956-135.085317V340.247851C152.773168 153.727205 303.968994 2.531379 490.48964 2.531379z" fill="#EBD3BD" p-id="13791"></path><path d="M400.434882 509.099727c124.342857 0 225.140075 93.241242 225.140075 208.259975 0 5.679702-0.25441 11.308522-0.731429 16.880099H176.019876a195.278708 195.278708 0 0 1-0.731429-16.880099c0-115.018733 100.797217-208.259975 225.146435-208.259975zM805.684472 306.474932h45.030559c37.525466 0 56.288199 18.762733 56.288199 56.288198v45.024199c0 37.525466-18.762733 56.288199-56.288199 56.288199h-45.030559c-37.525466 0-56.288199-18.762733-56.288199-56.288199v-45.030559c0-37.525466 18.762733-56.288199 56.288199-56.288199z" fill="#4D4132" p-id="13792"></path><path d="M749.402634 520.357366c0 55.957466 45.361292 101.318758 101.312397 101.318758s101.318758-45.361292 101.318758-101.318758c0-55.951106-45.367652-101.312398-101.318758-101.312397s-101.318758 45.361292-101.318758 101.318758z" fill="#EBD3BD" p-id="13793"></path><path d="M805.684472 509.099727a45.030559 45.030559 0 1 0 90.061118 0.01908 45.030559 45.030559 0 0 0-90.061118-0.01908z" fill="#E89E80" p-id="13794"></path><path d="M175.288447 374.01441a90.061118 90.061118 0 1 0 180.115876 0c0-49.737143-40.323975-90.054758-90.061118-90.054758s-90.054758 40.323975-90.054758 90.061118z" fill="#FFFFFF" p-id="13795"></path><path d="M220.319006 379.64323a39.401739 39.401739 0 1 0 78.803478 0 39.401739 39.401739 0 0 0-78.803478 0z" fill="#514141" p-id="13796"></path><path d="M490.48964 374.01441c0 49.737143 40.323975 90.061118 90.061118 90.061118s90.048398-40.323975 90.048397-90.061118-40.317615-90.054758-90.054757-90.054758-90.061118 40.323975-90.061118 90.061118z" fill="#FFFFFF" p-id="13797"></path><path d="M535.520199 379.64323a39.401739 39.401739 0 1 0 78.797118 0 39.401739 39.401739 0 0 0-78.803478 0z" fill="#514141" p-id="13798"></path><path d="M394.806062 362.75677a40.18405 40.18405 0 0 1 37.754435 26.458634l41.99036 115.47031A78.803478 78.803478 0 0 1 400.504845 610.412124h-17.789615a78.803478 78.803478 0 0 1-72.920249-108.633043l46.207205-112.970733a41.920398 41.920398 0 0 1 38.797516-26.051578z" fill="#E89E80" p-id="13799"></path><path d="M165.36646 190.807453m38.16149 0l101.763975 0q38.161491 0 38.161491 38.161491l0 0q0 38.161491-38.161491 38.161491l-101.763975 0q-38.161491 0-38.16149-38.161491l0 0q0-38.161491 38.16149-38.161491Z" fill="#4D4132" p-id="13800"></path><path d="M483.378882 190.807453m38.161491 0l127.204969 0q38.161491 0 38.16149 38.161491l0 0q0 38.161491-38.16149 38.161491l-127.204969 0q-38.161491 0-38.161491-38.161491l0 0q0-38.161491 38.161491-38.161491Z" fill="#4D4132" p-id="13801"></path></svg>

frontend_nuxt/utils/auth.js

@@ -1,28 +1,33 @@
 import { reactive } from 'vue'
 
 const TOKEN_KEY = 'token'
+const USER_ID_KEY = 'userId'
+const USERNAME_KEY = 'username'
+const ROLE_KEY = 'role'
 
 export const authState = reactive({
   loggedIn: false,
   userId: null,
   username: null,
   role: null,
-  avatar: null,
 })
 
 if (import.meta.client) {
   authState.loggedIn =
     localStorage.getItem(TOKEN_KEY) !== null && localStorage.getItem(TOKEN_KEY) !== ''
+  authState.userId = localStorage.getItem(USER_ID_KEY)
+  authState.username = localStorage.getItem(USERNAME_KEY)
+  authState.role = localStorage.getItem(ROLE_KEY)
 }
 
 export function getToken() {
   return import.meta.client ? localStorage.getItem(TOKEN_KEY) : null
 }
 
-export async function setToken(token) {
+export function setToken(token) {
   if (import.meta.client) {
     localStorage.setItem(TOKEN_KEY, token)
-    await loadCurrentUser()
+    authState.loggedIn = true
   }
 }
 
@@ -34,20 +39,26 @@ export function clearToken() {
   }
 }
 
-export function setUserInfo(user) {
+export function setUserInfo({ id, username }) {
   if (import.meta.client) {
-    authState.userId = user.id
-    authState.username = user.username
-    authState.avatar = user.avatar
-    authState.role = user.role
+    authState.userId = id
+    authState.username = username
+    if (arguments[0] && arguments[0].role) {
+      authState.role = arguments[0].role
+      localStorage.setItem(ROLE_KEY, arguments[0].role)
+    }
+    if (id !== undefined && id !== null) localStorage.setItem(USER_ID_KEY, id)
+    if (username) localStorage.setItem(USERNAME_KEY, username)
   }
 }
 
 export function clearUserInfo() {
   if (import.meta.client) {
+    localStorage.removeItem(USER_ID_KEY)
+    localStorage.removeItem(USERNAME_KEY)
+    localStorage.removeItem(ROLE_KEY)
     authState.userId = null
     authState.username = null
-    authState.avatar = null
     authState.role = null
   }
 }
@@ -71,11 +82,9 @@ export async function fetchCurrentUser() {
 export async function loadCurrentUser() {
   const user = await fetchCurrentUser()
   if (user) {
-    setUserInfo(user)
-  } else {
-    clearUserInfo()
+    setUserInfo({ id: user.id, username: user.username, role: user.role })
   }
-  authState.loggedIn = user !== null
+  return user
 }
 
 export function isLogin() {
@@ -91,12 +100,10 @@ export async function checkToken() {
     const res = await fetch(`${API_BASE_URL}/api/auth/check`, {
       headers: { Authorization: `Bearer ${token}` },
     })
-    if (res.ok) {
-      await setToken(token)
-    } else {
-      clearToken()
-    }
+    authState.loggedIn = res.ok
+    return res.ok
   } catch (e) {
-    clearToken()
+    authState.loggedIn = false
+    return false
   }
 }

frontend_nuxt/utils/discord.js

@@ -1,5 +1,5 @@
 import { toast } from '../main'
-import { setToken } from './auth'
+import { setToken, loadCurrentUser } from './auth'
 import { registerPush } from './push'
 
 export function discordAuthorize(inviteToken = '') {
@@ -47,6 +47,7 @@ export async function discordExchange(code, inviteToken = '', reason = '') {
 
     if (res.ok && data.token) {
       setToken(data.token)
+      await loadCurrentUser()
       toast.success('登录成功')
       registerPush?.()
       return { success: true, needReason: false }

frontend_nuxt/utils/github.js

@@ -1,5 +1,5 @@
 import { toast } from '../main'
-import { setToken } from './auth'
+import { setToken, loadCurrentUser } from './auth'
 import { registerPush } from './push'
 
 export function githubAuthorize(inviteToken = '') {
@@ -45,6 +45,7 @@ export async function githubExchange(code, inviteToken = '', reason = '') {
 
     if (res.ok && data.token) {
       setToken(data.token)
+      await loadCurrentUser()
       toast.success('登录成功')
       registerPush?.()
       return { success: true, needReason: false }

frontend_nuxt/utils/google.js

@@ -1,5 +1,5 @@
 import { toast } from '../main'
-import { setToken } from './auth'
+import { setToken, loadCurrentUser } from './auth'
 import { registerPush } from './push'
 
 export async function googleGetIdToken() {
@@ -79,6 +79,7 @@ export async function googleAuthWithToken(
 
     if (res.ok && data && data.token) {
       setToken(data.token)
+      await loadCurrentUser()
       toast.success('登录成功')
       registerPush?.()
       if (typeof redirect_success === 'function') redirect_success()

frontend_nuxt/utils/markdown.js

@@ -265,26 +265,3 @@ export function stripMarkdownLength(text, length) {
   }
   return plain.slice(0, length) + '...'
 }
-
-// 朴素文本带贴吧表情
-export function stripMarkdownWithTiebaMoji(text, length){
-  console.error(text)
-    if (!text) return ''
-
-  // Markdown 转成纯文本
-  const plain = stripMarkdown(text)
- console.error(plain)
-  // 替换 :tieba123: 为 <img>
-  const withEmoji = plain.replace(/:tieba(\d+):/g, (match, num) => {
-    const key = `tieba${num}`
-    const file = tiebaEmoji[key]
-    return file
-      ? `<img loading="lazy" class="emoji" src="${file}" alt="${key}">`
-      : match // 没有匹配到图片则保留原样
-  })
-
-  // 截断纯文本长度（防止撑太长）
-  const truncated = withEmoji.length > length ? withEmoji.slice(0, length) + '...' : withEmoji
-  return truncated
-
-}

frontend_nuxt/utils/notification.js

@@ -31,7 +31,6 @@ const iconMap = {
   MENTION: 'HashtagKey',
   POST_DELETED: 'ClearIcon',
   POST_FEATURED: 'Star',
-  DONATION: 'PaperMoneyTwo',
 }
 
 export async function fetchUnreadCount() {
@@ -335,18 +334,6 @@ function createFetchNotifications() {
               }
             },
           })
-        } else if (n.type === 'DONATION') {
-          arr.push({
-            ...n,
-            src: n.fromUser ? n.fromUser.avatar : null,
-            icon: n.fromUser ? undefined : iconMap[n.type],
-            iconClick: () => {
-              if (n.post) {
-                markNotificationRead(n.id)
-                navigateTo(`/posts/${n.post.id}`, { replace: true })
-              }
-            },
-          })
         } else if (n.type === 'REGISTER_REQUEST') {
           arr.push({
             ...n,

frontend_nuxt/utils/telegram.js

@@ -1,5 +1,5 @@
 import { toast } from '../main'
-import { setToken } from './auth'
+import { setToken, loadCurrentUser } from './auth'
 import { registerPush } from './push'
 
 export function telegramAuthorize(inviteToken = '') {
@@ -34,6 +34,7 @@ export async function telegramExchange(authData, inviteToken = '', reason = '')
     const data = await res.json()
     if (res.ok && data.token) {
       setToken(data.token)
+      await loadCurrentUser()
       toast.success('登录成功')
       registerPush?.()
       return { success: true, needReason: false }

frontend_nuxt/utils/twitter.js

@@ -1,5 +1,5 @@
 import { toast } from '../main'
-import { setToken } from './auth'
+import { setToken, loadCurrentUser } from './auth'
 import { registerPush } from './push'
 
 function generateCodeVerifier() {
@@ -99,6 +99,7 @@ export async function twitterExchange(code, state, reason) {
     const data = await res.json()
     if (res.ok && data.token) {
       setToken(data.token)
+      await loadCurrentUser()
       toast.success('登录成功')
       registerPush()
       return { success: true, needReason: false }