feat: add 毛玻璃效果 + 开关

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 {

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 {

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 {

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 {

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 {

frontend_nuxt/pages/users/[id].vue

@@ -229,6 +229,7 @@
             text="暂无时间线"
             icon="fas fa-inbox"
           />
+          <div class="timeline-list">
             <BaseTimeline :items="filteredTimelineItems">
               <template #item="{ item }">
                 <template v-if="item.type === 'post'">
@@ -286,6 +287,7 @@
               </template>
             </BaseTimeline>
           </div>
+        </div>
 
         <div v-else-if="selectedTab === 'following'" class="follow-container">
           <div class="follow-tabs">
@@ -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;