fix: UI部份美化

更新评论项组件，添加回复用户头像和样式优化

frontend_nuxt/assets/global.css

@@ -19,7 +19,7 @@
   --menu-border-color: lightgray;
   --normal-border-color: lightgray;
   --menu-selected-background-color: rgba(242, 242, 242, 0.884);
-  --menu-text-color: black;
+  --menu-text-color: rgb(99, 99, 99);
   --scroller-background-color: rgba(130, 175, 180, 0.5);
   /* --normal-background-color: rgb(241, 241, 241); */
   --normal-background-color: white;
@@ -27,7 +27,7 @@
   --code-highlight-background-color: rgb(241, 241, 241);
   --login-background-color: rgb(248, 248, 248);
   --login-background-color-hover: #e0e0e0;
-  --text-color: black;
+  --text-color: rgb(70, 70, 70);
   --blockquote-text-color: #6a737d;
   --menu-width: 200px;
   --page-max-width: 1400px;
@@ -50,7 +50,7 @@
   --menu-border-color: #555;
   --normal-border-color: #555;
   --menu-selected-background-color: rgba(255, 255, 255, 0.1);
-  --menu-text-color: white;
+  --menu-text-color: rgb(173, 173, 173);
   /* --normal-background-color: #000000; */
   --normal-background-color: #333;
   --lottery-background-color: #4e4e4e;
@@ -75,7 +75,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Roboto', sans-serif;
+  font-family: 'WenQuanYi Micro Hei', 'Helvetica Neue', Arial, sans-serif;
   background-color: var(--normal-background-color);
   color: var(--text-color);
   /* 禁止滚动 */

frontend_nuxt/components/CommentItem.vue

@@ -23,9 +23,13 @@
             >{{ getMedalTitle(comment.medal) }}</NuxtLink
           >
           <i v-if="comment.pinned" class="fas fa-thumbtack pin-icon"></i>
-          <span v-if="level >= 2">
+          <span v-if="level >= 2" class="reply-item">
             <i class="fas fa-reply reply-icon"></i>
-            <span class="user-name reply-user-name">{{ comment.parentUserName }}</span>
+            <span class="reply-info">
+              <BaseImage class="reply-avatar"  :src="comment.parentUserAvatar || '/default-avatar.svg'" alt="avatar"
+              @click="comment.parentUserClick && comment.parentUserClick()" />
+              <span class="reply-user-name">{{ comment.parentUserName }}</span>
+            </span>
           </span>
           <div class="post-time">{{ comment.time }}</div>
         </div>
@@ -250,6 +254,7 @@ const submitReply = async (parentUserName, text, clear) => {
         medal: data.author.displayMedal,
         text: data.content,
         parentUserName: parentUserName,
+        parentUserAvatar: props.comment.avatar,
         reactions: [],
         reply: (data.replies || []).map((r) => ({
           id: r.id,
@@ -376,7 +381,22 @@ const handleContentClick = (e) => {
   justify-content: space-between;
 }
 
+.reply-item, .reply-info {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.reply-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 5px;
+  cursor: pointer;
+}
+
 .reply-icon {
+  color: var(--primary-color);
   margin-right: 10px;
   margin-left: 10px;
   opacity: 0.5;

frontend_nuxt/components/HeaderComponent.vue

@@ -4,7 +4,7 @@
       <div class="header-content-left">
         <div v-if="showMenuBtn" class="menu-btn-wrapper">
           <button class="menu-btn" ref="menuBtn" @click="$emit('toggle-menu')">
-            <i class="fas fa-bars"></i>
+            <i class="fas fa-bars micon"></i>
           </button>
           <span
             v-if="isMobile && (unreadMessageCount > 0 || hasChannelUnread)"
@@ -318,6 +318,10 @@ onMounted(async () => {
   gap: 20px;
 }
 
+.micon {
+  margin-left: 10px;
+}
+
 .menu-btn {
   font-size: 24px;
   background: none;
@@ -370,6 +374,7 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   cursor: pointer;
+  margin-right: 10px;
 }
 
 .avatar-img {

frontend_nuxt/components/MenuComponent.vue

@@ -279,12 +279,29 @@ const gotoTag = (t) => {
   padding: 10px 10px 0 10px;
 }
 
+.menu-content::-webkit-scrollbar {
+  display: none;
+}
+
+.menu-content {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.menu-item-container {
+  border-bottom: 1px solid var(--menu-border-color);
+}
+
+.menu-item:last-child {
+  margin-bottom: 5px;
+}
+
 /* .menu-item-container { */
 /**/
 /* } */
 
 .menu-item {
-  padding: 4px 10px;
+  padding: 6px 12px;
   text-decoration: none;
   color: var(--menu-text-color);
   border-radius: 10px;
@@ -298,7 +315,7 @@ const gotoTag = (t) => {
 }
 
 .menu-item-text {
-  font-size: 16px;
+  font-size: 14px;
   text-decoration: none;
   color: var(--menu-text-color);
 }
@@ -352,16 +369,17 @@ const gotoTag = (t) => {
 }
 
 .menu-section {
-  margin-top: 10px;
+  border-bottom: 1px solid var(--menu-border-color);
+  padding-bottom: 5px;
 }
 
 .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-weight: bold;
+  font-size: 14px;
-  opacity: 0.5;
+  padding: 6px 12px 0 12px;
-  padding: 4px 10px;
+  color: var(--menu-text-color);
   cursor: pointer;
 }
 
@@ -373,7 +391,7 @@ const gotoTag = (t) => {
 }
 
 .section-item {
-  padding: 4px 10px;
+  padding: 6px 12px;
   display: flex;
   align-items: center;
   gap: 5px;
@@ -393,6 +411,8 @@ const gotoTag = (t) => {
 }
 
 .section-item-text {
+  font-size: 14px;
+  text-decoration: none;
   color: var(--menu-text-color);
 }
 

frontend_nuxt/pages/index.vue

@@ -72,9 +72,9 @@
               <i v-if="article.type === 'LOTTERY'" class="fa-solid fa-gift lottery-icon"></i>
               {{ article.title }}
             </NuxtLink>
-            <div class="article-item-description main-item">
+            <NuxtLink class="article-item-description main-item" :to="`/posts/${article.id}`">
               {{ sanitizeDescription(article.description) }}
-            </div>
+            </NuxtLink>
             <div class="article-info-container main-item">
               <ArticleCategory :category="article.category" />
               <ArticleTags :tags="article.tags" />
@@ -527,15 +527,18 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 
 .article-item-title {
   margin-top: 10px;
-  font-size: 20px;
+  font-size: 18px;
   text-decoration: none;
   color: var(--text-color);
   max-width: 100%;
+  font-weight: bold;
+  transition: color 0.2s ease;
 }
 
 .article-item-title:hover {
   color: var(--primary-color);
   text-decoration: underline;
+  transition: color 0.2s ease;
 }
 
 .pinned-icon,
@@ -547,13 +550,23 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 .article-item-description {
   max-width: 100%;
   margin-top: 10px;
-  font-size: 14px;
+  font-size: 13px;
-  color: gray;
+  color: rgba(140, 140, 140, 0.888);
   display: -webkit-box;
   line-clamp: 3;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  letter-spacing: 0.01em;
+  font-weight: 400;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.article-item-description:hover {
+  color: var(--primary-color);
+  cursor: pointer;
+  transition: color 0.2s ease;
 }
 
 .article-info-container {

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

@@ -411,7 +411,13 @@ const gatherPostItems = () => {
   }
 }
 
-const mapComment = (c, parentUserName = '', level = 0) => ({
+const mapComment = (
+  c,
+  parentUserName = '',
+  parentUserAvatar = '',
+  parentUserId = '',
+  level = 0,
+) => ({
   id: c.id,
   userName: c.author.username,
   medal: c.author.displayMedal,
@@ -421,11 +427,15 @@ const mapComment = (c, parentUserName = '', level = 0) => ({
   text: c.content,
   reactions: c.reactions || [],
   pinned: Boolean(c.pinned ?? c.pinnedAt ?? c.pinned_at),
-  reply: (c.replies || []).map((r) => mapComment(r, c.author.username, level + 1)),
+  reply: (c.replies || []).map((r) =>
+    mapComment(r, c.author.username, c.author.avatar, c.author.id, level + 1),
+  ),
   openReplies: level === 0,
   src: c.author.avatar,
-  iconClick: () => navigateTo(`/users/${c.author.id}`, { replace: true }),
+  iconClick: () => navigateTo(`/users/${c.author.id}`),
   parentUserName: parentUserName,
+  parentUserAvatar: parentUserAvatar,
+  parentUserClick: parentUserId ? () => navigateTo(`/users/${parentUserId}`) : null,
 })
 
 const getTop = (el) => {
@@ -1422,7 +1432,7 @@ onMounted(async () => {
   }
 
   .info-content-text {
-    line-height: 1.3;
+    line-height: 1.5;
   }
 
   .reactions-viewer-item {