feat: timeline 基础格式更新

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

@@ -24,7 +24,7 @@ public class UserMapper {
   private final LevelService levelService;
   private final MedalService medalService;
 
-  @Value("${app.snippet-length:50}")
+  @Value("${app.snippet-length}")
   private int snippetLength;
 
   public AuthorDto toAuthorDto(User user) {

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}

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;  */
 }

frontend_nuxt/pages/users/[id].vue

@@ -212,26 +212,85 @@
             <div class="timeline-list">
               <BaseTimeline :items="filteredTimelineItems">
                 <template #item="{ item }">
-                  <template v-if="item.type === 'post'">
+                  <!-- <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>
+                  </template> -->
+                  <template v-if="item.type === 'post'">
+                    <div class="ttimeline-container">
+                      <div class="timeline-header">
+                        <div class="timeline-title">发布了文章</div>
+                        <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                      </div>
+                      <div class="article-container">
+                        <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-article-link">
+                          {{ item.post.title }}
+                        </NuxtLink>
+                        <div class="timeline-snippet">
+                          {{ stripMarkdown(item.post.snippet) }}
+                        </div>
+                      </div>
+                    </div>
                   </template>
-                  <template v-else-if="item.type === 'comment'">
+                  <!-- <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"
-                    >
+                    <NuxtLink :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`" class="timeline-link">
                       {{ stripMarkdownLength(item.comment.content, 200) }}
                     </NuxtLink>
                     <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                  </template> -->
+                  <template v-else-if="item.type === 'comment'">
+                    <div class="ttimeline-container">
+                      <div class="timeline-header">
+                        <div class="timeline-title">发布了4条评论</div>
+                        <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                      </div>
+                      <div class="comment-content">
+                        <div class="comment-content-item">
+                          <div class="comment-content-item-main">
+                            <comment-one class="comment-content-item-icon" />
+                            <NuxtLink
+                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                              class="timeline-comment-link"
+                            >
+                              {{ stripMarkdownLength(item.comment.content, 200) }}
+                            </NuxtLink>
+                          </div>
+                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                        </div>
+                        <div class="comment-content-item">
+                          <div class="comment-content-item-main">
+                            <comment-one class="comment-content-item-icon" />
+                            <NuxtLink
+                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                              class="timeline-comment-link"
+                            >
+                              {{ stripMarkdownLength(item.comment.content, 200) }}
+                            </NuxtLink>
+                          </div>
+                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                        </div>
+                        <div class="comment-content-item">
+                          <div class="comment-content-item-main">
+                            <comment-one class="comment-content-item-icon" />
+                            <NuxtLink
+                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                              class="timeline-comment-link"
+                            >
+                              {{ stripMarkdownLength(item.comment.content, 200) }}
+                            </NuxtLink>
+                          </div>
+                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                        </div>
+                      </div>
+                    </div>
                   </template>
                   <template v-else-if="item.type === 'reply'">
                     在
@@ -903,6 +962,7 @@ watch(selectedTab, async (val) => {
   font-size: 12px;
   color: gray;
   margin-top: 5px;
+  white-space: nowrap;
 }
 
 .timeline-snippet {
@@ -939,6 +999,81 @@ 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;
+}
+
+.timeline-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.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;
+}
+
+.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 {
 }
 

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)