From a756c2fab3b02eba3a5f93267b2ae24e95c5a631 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Sat, 16 Aug 2025 18:11:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20add=20=E6=AF=9B=E7=8E=BB=E7=92=83?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C=20+=20=E5=BC=80=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/assets/global.css              |   4 +-
 frontend_nuxt/components/HeaderComponent.vue |   1 +
 frontend_nuxt/components/MenuComponent.vue   |   1 +
 frontend_nuxt/pages/index.vue                |   1 +
 frontend_nuxt/pages/message.vue              |   1 +
 frontend_nuxt/pages/users/[id].vue           | 122 ++++++++++---------
 6 files changed, 68 insertions(+), 62 deletions(-)

diff --git a/frontend_nuxt/assets/global.css b/frontend_nuxt/assets/global.css
index 910125d06..d0967523c 100644
--- a/frontend_nuxt/assets/global.css
+++ b/frontend_nuxt/assets/global.css
@@ -15,8 +15,7 @@
   /* 加一个app前缀防止与firefox的userChrome.css中的--menu-background-color冲突 */
   --app-menu-background-color: white;
   --background-color: white;
-  /* --background-color-blur: rgba(255, 255, 255, 0.57); */
-  --background-color-blur: var(--background-color);
+  --background-color-blur: rgba(255, 255, 255, 0.57);
   --menu-border-color: lightgray;
   --normal-border-color: lightgray;
   --menu-selected-background-color: rgba(208, 250, 255, 0.659);
@@ -70,6 +69,7 @@
   --blur-4: none;
   --blur-5: none;
   --blur-10: none;
+  --background-color-blur: var(--background-color);
 }
 
 body {
diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index bb4cf2fc9..9677f4c8a 100644
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/frontend_nuxt/components/HeaderComponent.vue
@@ -210,6 +210,7 @@ onMounted(async () => {
   width: 100%;
   height: 100%;
   max-width: var(--page-max-width);
+  backdrop-filter: var(--blur-10);
 }
 
 .header-content-left {
diff --git a/frontend_nuxt/components/MenuComponent.vue b/frontend_nuxt/components/MenuComponent.vue
index 1102afc23..9f5aa53db 100644
--- a/frontend_nuxt/components/MenuComponent.vue
+++ b/frontend_nuxt/components/MenuComponent.vue
@@ -239,6 +239,7 @@ const gotoTag = (t) => {
   flex-direction: column;
   overflow-y: auto;
   scrollbar-width: none;
+  backdrop-filter: var(--blur-10);
 }
 
 .menu-content {
diff --git a/frontend_nuxt/pages/index.vue b/frontend_nuxt/pages/index.vue
index bb8eee891..f85bc285b 100644
--- a/frontend_nuxt/pages/index.vue
+++ b/frontend_nuxt/pages/index.vue
@@ -417,6 +417,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   gap: 10px;
   width: 100%;
   padding: 10px 0;
+  backdrop-filter: var(--blur-10);
 }
 
 .topic-item-container {
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 9b189526f..0755fcd09 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -649,6 +649,7 @@ onActivated(() => {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  backdrop-filter: var(--blur-10);
 }
 
 .message-page-header-right {
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 2e67ea756..a01aa3525 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -229,62 +229,64 @@
             text="暂无时间线"
             icon="fas fa-inbox"
           />
-          <BaseTimeline :items="filteredTimelineItems">
-            <template #item="{ item }">
-              <template v-if="item.type === 'post'">
-                发布了文章
-                <router-link :to="`/posts/${item.post.id}`" class="timeline-link">
-                  {{ item.post.title }}
-                </router-link>
-                <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+          <div class="timeline-list">
+            <BaseTimeline :items="filteredTimelineItems">
+              <template #item="{ item }">
+                <template v-if="item.type === 'post'">
+                  发布了文章
+                  <router-link :to="`/posts/${item.post.id}`" class="timeline-link">
+                    {{ item.post.title }}
+                  </router-link>
+                  <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                </template>
+                <template v-else-if="item.type === 'comment'">
+                  在
+                  <router-link :to="`/posts/${item.comment.post.id}`" class="timeline-link">
+                    {{ item.comment.post.title }}
+                  </router-link>
+                  下评论了
+                  <router-link
+                    :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                    class="timeline-link"
+                  >
+                    {{ stripMarkdownLength(item.comment.content, 200) }}
+                  </router-link>
+                  <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                </template>
+                <template v-else-if="item.type === 'reply'">
+                  在
+                  <router-link :to="`/posts/${item.comment.post.id}`" class="timeline-link">
+                    {{ item.comment.post.title }}
+                  </router-link>
+                  下对
+                  <router-link
+                    :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
+                    class="timeline-link"
+                  >
+                    {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
+                  </router-link>
+                  回复了
+                  <router-link
+                    :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                    class="timeline-link"
+                  >
+                    {{ stripMarkdownLength(item.comment.content, 200) }}
+                  </router-link>
+                  <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                </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>
+                </template>
               </template>
-              <template v-else-if="item.type === 'comment'">
-                在
-                <router-link :to="`/posts/${item.comment.post.id}`" class="timeline-link">
-                  {{ item.comment.post.title }}
-                </router-link>
-                下评论了
-                <router-link
-                  :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                  class="timeline-link"
-                >
-                  {{ stripMarkdownLength(item.comment.content, 200) }}
-                </router-link>
-                <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-              </template>
-              <template v-else-if="item.type === 'reply'">
-                在
-                <router-link :to="`/posts/${item.comment.post.id}`" class="timeline-link">
-                  {{ item.comment.post.title }}
-                </router-link>
-                下对
-                <router-link
-                  :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
-                  class="timeline-link"
-                >
-                  {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
-                </router-link>
-                回复了
-                <router-link
-                  :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                  class="timeline-link"
-                >
-                  {{ stripMarkdownLength(item.comment.content, 200) }}
-                </router-link>
-                <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-              </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>
-              </template>
-            </template>
-          </BaseTimeline>
+            </BaseTimeline>
+          </div>
         </div>
 
         <div v-else-if="selectedTab === 'following'" class="follow-container">
@@ -729,6 +731,7 @@ watch(selectedTab, async (val) => {
   border-bottom: 1px solid var(--normal-border-color);
   scrollbar-width: none;
   overflow-x: auto;
+  backdrop-filter: var(--blur-10);
 }
 
 .profile-tabs-item {
@@ -810,7 +813,10 @@ watch(selectedTab, async (val) => {
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid var(--normal-border-color);
-  margin-bottom: 10px;
+}
+
+.timeline-list {
+  padding: 10px 20px;
 }
 
 .timeline-tab-item {
@@ -823,10 +829,6 @@ watch(selectedTab, async (val) => {
   border-bottom: 2px solid var(--primary-color);
 }
 
-.profile-timeline {
-  padding: 20px;
-}
-
 .timeline-date {
   font-size: 12px;
   color: gray;