fix: timeline ui 重构

frontend_nuxt/components/BaseTimeline.vue

@@ -95,7 +95,7 @@ export default {
 }
 
 .timeline-item:last-child::before {
-  display: none;
+  bottom: 0px;
 }
 
 .timeline-content {

frontend_nuxt/components/TimelineTagItem.vue

@@ -1,26 +1,16 @@
 <template>
   <div class="timeline-tag-item">
-    <template v-if="mode === 'timeline'">
+    <div class="tags-container">
-      <div class="tags-container">
+      <div class="tags-container-item">
-        <div class="tags-container-item">
+        <div class="timeline-tag-title">创建了标签</div>
-          <div class="timeline-tag-title">{{ title }}</div>
+        <ArticleTags v-if="tag" :tags="[tag]" />
-          <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">
+      <div v-if="timelineDate" class="timeline-date">{{ timelineDate }}</div>
-        {{ tag?.description }}
+    </div>
-      </div>
+    <div v-if="hasDescription" class="timeline-snippet">
-    </template>
+      {{ tag?.description }}
-    <template v-else>
+    </div>
-      <span class="timeline-link" :class="{ clickable: isClickable }" @click="handleTagClick">
-        {{ tag?.name }}<span v-if="tag?.count"> x{{ tag.count }}</span>
-      </span>
-      <div v-if="hasDescription" class="timeline-snippet">
-        {{ tag?.description }}
-      </div>
-      <div v-if="summaryDate" class="timeline-date">{{ summaryDate }}</div>
-    </template>
   </div>
 </template>
 
@@ -30,15 +20,6 @@ import TimeManager from '~/utils/time'
 
 const props = defineProps({
   item: { type: Object, required: true },
-  mode: {
-    type: String,
-    default: 'timeline',
-    validator: (value) => ['timeline', 'summary'].includes(value),
-  },
-  title: {
-    type: String,
-    default: '创建了标签',
-  },
 })
 
 const emit = defineEmits(['tag-click'])
@@ -95,6 +76,10 @@ const handleTagClick = () => {
   font-weight: 600;
 }
 
+.timeline-tag-count {
+  font-size: 12px;
+}
+
 .timeline-date {
   font-size: 12px;
   color: gray;

frontend_nuxt/pages/users/[id].vue

@@ -112,19 +112,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>
@@ -156,7 +155,7 @@
                 <div class="summary-content" v-if="hotTags.length > 0">
                   <BaseTimeline :items="hotTags">
                     <template #item="{ item }">
-                      <TimelineTagItem :item="item" mode="summary" @tag-click="gotoTag" />
+                      <TimelineTagItem :item="item" />
                     </template>
                   </BaseTimeline>
                 </div>
@@ -670,6 +669,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;
@@ -922,8 +926,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;
 }
 
@@ -1014,6 +1018,7 @@ watch(selectedTab, async (val) => {
   color: var(--text-color);
   word-break: break-word;
   text-decoration: underline;
+  margin-left: 5px;
 }
 
 .timeline-comment-link:hover {