From 97bffb78ccdfeac88bdb178f3214d2ddba4be430 Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Fri, 26 Dec 2025 21:58:28 +0800
Subject: [PATCH] Refactor components to replace liquid glass effects with
 translucent styles

- Removed liquid glass SVG filters and related styles from index.html and various components, including CommentsModal.vue, FloatingButtons.vue, and SearchHeader.vue.
- Updated styles across multiple components to implement a consistent translucent effect, enhancing visual coherence and performance.
- Adjusted background colors, borders, and shadows to align with the new design approach, ensuring a modern and clean aesthetic.
---
 index.html                            | 69 -------------------
 src/components/CommentsModal.vue      | 55 ++++-----------
 src/components/FloatingButtons.vue    | 98 ++++-----------------------
 src/components/ImageViewer.vue        | 14 ++--
 src/components/KeyboardHelpPanel.vue  |  6 +-
 src/components/LiquidGlass.vue        | 80 ----------------------
 src/components/SearchHeader.vue       | 38 ++++-------
 src/components/SearchHistoryModal.vue | 18 ++---
 src/components/SearchResults.vue      | 36 ++--------
 src/components/SettingsModal.vue      | 27 +++-----
 src/components/TopToolbar.vue         | 54 ++-------------
 11 files changed, 71 insertions(+), 424 deletions(-)
 delete mode 100644 src/components/LiquidGlass.vue

diff --git a/index.html b/index.html
index 14a43e7..0e12ba9 100644
--- a/index.html
+++ b/index.html
@@ -282,75 +282,6 @@
     <!-- 禁止 IE 浏览器访问 -->
     <script>/MSIE|Trident/.test(window.navigator.userAgent)&&(alert("抱歉，本站不支持 IE 浏览器，请用 Chrome 访问。"),window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href))</script>
 
-    <!-- WWDC 2025 液态玻璃 SVG 滤镜 -->
-    <!-- 参考: https://github.com/lucasromerodb/liquid-glass-effect-macos -->
-    <svg style="display: none" aria-hidden="true">
-      <defs>
-        <!-- 液态玻璃扭曲滤镜 - 完整版 (用于大元素) -->
-        <filter 
-          id="liquid-glass" 
-          x="0%" y="0%" width="100%" height="100%" 
-          filterUnits="objectBoundingBox"
-        >
-          <feTurbulence 
-            type="fractalNoise" 
-            baseFrequency="0.01 0.01" 
-            numOctaves="1" 
-            seed="5" 
-            result="turbulence" 
-          />
-          <feComponentTransfer in="turbulence" result="mapped">
-            <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />
-            <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
-            <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
-          </feComponentTransfer>
-          <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
-          <feSpecularLighting 
-            in="softMap" 
-            surfaceScale="5" 
-            specularConstant="1" 
-            specularExponent="100" 
-            lighting-color="white" 
-            result="specLight"
-          >
-            <fePointLight x="-200" y="-200" z="300" />
-          </feSpecularLighting>
-          <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />
-          <!-- scale 值控制扭曲程度，20 是微妙的扭曲 -->
-          <feDisplacementMap in="SourceGraphic" in2="softMap" scale="20" xChannelSelector="R" yChannelSelector="G" />
-        </filter>
-
-        <!-- 液态玻璃滤镜 - 轻量版 (用于按钮等小元素，更微妙的扭曲) -->
-        <filter 
-          id="liquid-glass-lite" 
-          x="0%" y="0%" width="100%" height="100%" 
-          filterUnits="objectBoundingBox"
-        >
-          <feTurbulence 
-            type="fractalNoise" 
-            baseFrequency="0.015 0.015" 
-            numOctaves="1" 
-            seed="3" 
-            result="turbulence" 
-          />
-          <feGaussianBlur in="turbulence" stdDeviation="2" result="softMap" />
-          <feSpecularLighting 
-            in="softMap" 
-            surfaceScale="3" 
-            specularConstant="0.8" 
-            specularExponent="80" 
-            lighting-color="white" 
-            result="specLight"
-          >
-            <fePointLight x="-100" y="-100" z="200" />
-          </feSpecularLighting>
-          <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />
-          <!-- 更小的 scale 值，扭曲更微妙 -->
-          <feDisplacementMap in="SourceGraphic" in2="softMap" scale="8" xChannelSelector="R" yChannelSelector="G" />
-        </filter>
-      </defs>
-    </svg>
-
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
     <script>
diff --git a/src/components/CommentsModal.vue b/src/components/CommentsModal.vue
index fc14d81..01781b4 100644
--- a/src/components/CommentsModal.vue
+++ b/src/components/CommentsModal.vue
@@ -8,7 +8,7 @@
     >
       <div
         v-if="uiStore.isCommentsModalOpen"
-        class="comments-modal fixed z-[100] flex flex-col shadow-2xl shadow-black/20 inset-0 md:inset-6 md:m-auto md:w-[800px] md:max-w-[calc(100%-3rem)] md:h-[600px] md:max-h-[calc(100%-3rem)] md:rounded-3xl"
+        class="comments-modal fixed z-[100] flex flex-col shadow-2xl shadow-black/20 inset-0 md:inset-6 md:m-auto md:w-[900px] md:max-w-[calc(100%-3rem)] md:h-[760px] md:max-h-[calc(100%-3rem)] md:rounded-3xl"
       >
         <!-- 顶部导航栏 -->
         <div 
@@ -222,17 +222,12 @@ onUnmounted(() => {
 </script>
 
 <style>
-/* 评论面板 - WWDC 2025 液态玻璃效果 */
+/* 评论面板 - 半透明效果 */
 .comments-modal {
-  background: rgba(255, 255, 255, 0.35);
-  backdrop-filter: blur(20px) saturate(180%);
+  background: rgba(255, 255, 255, 0.96);
   will-change: transform;
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.12),
-    0 0 20px rgba(255, 20, 147, 0.06),
-    inset 0 1px 1px rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(255, 20, 147, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
 }
 
 /* 移动端无底部边框 */
@@ -242,48 +237,25 @@ onUnmounted(() => {
   }
 }
 
-/* 液态玻璃高光 */
-.comments-modal::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.4) 0%,
-    rgba(255, 255, 255, 0.1) 30%,
-    transparent 50%
-  );
-  pointer-events: none;
-  z-index: 100;
-}
-
 /* 评论面板 - 暗色模式 */
 .dark .comments-modal {
-  background: rgba(30, 30, 40, 0.5);
-  border-color: rgba(255, 255, 255, 0.15);
-  box-shadow: 
-    0 -8px 24px rgba(0, 0, 0, 0.2),
-    0 0 20px rgba(255, 105, 180, 0.08),
-    inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
+  background: rgba(30, 41, 59, 0.98);
+  border-color: rgba(255, 105, 180, 0.15);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
 }
 
 /* 头部样式 */
 .comments-header {
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.95);
 }
 
 .dark .comments-header {
-  background: rgba(30, 41, 59, 0.8) !important;
+  background: rgba(30, 41, 59, 0.95);
 }
 
 /* 评论容器样式 */
 .comments-container {
-  background: rgba(248, 250, 252, 0.8);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  background: rgba(248, 250, 252, 0.95);
   border-radius: 1rem;
   padding: 1rem;
   border: 1px solid rgba(226, 232, 240, 0.5);
@@ -291,7 +263,6 @@ onUnmounted(() => {
 
 @media (min-width: 640px) {
   .comments-container {
-    background: rgba(248, 250, 252, 0.5);
     padding: 1.25rem;
     border-radius: 1.25rem;
   }
@@ -299,8 +270,8 @@ onUnmounted(() => {
 
 /* 暗色模式评论容器 */
 .dark .comments-container {
-  background: rgba(51, 65, 85, 0.5) !important;
-  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+  background: rgba(51, 65, 85, 0.95);
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 /* 自定义滚动条 */
diff --git a/src/components/FloatingButtons.vue b/src/components/FloatingButtons.vue
index 6b04115..25f3e2b 100644
--- a/src/components/FloatingButtons.vue
+++ b/src/components/FloatingButtons.vue
@@ -307,61 +307,22 @@ onUnmounted(() => {
   position: relative;
   overflow: hidden;
   
-  /* WWDC 2025 液态玻璃效果 */
-  background: rgba(255, 255, 255, 0.25);
-  backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
-  box-shadow: 
-    0 6px 12px rgba(0, 0, 0, 0.15),
-    0 0 20px rgba(255, 20, 147, 0.1),
-    inset 0 1px 1px rgba(255, 255, 255, 0.6),
-    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  /* 半透明效果 */
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  border: 1px solid rgba(255, 20, 147, 0.1);
   
   /* 性能优化 */
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
   transform: translate3d(0, 0, 0);
 }
 
-/* 液态玻璃高光 */
-.fab-button::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.4) 0%,
-    rgba(255, 255, 255, 0.1) 40%,
-    transparent 60%
-  );
-  pointer-events: none;
-  opacity: 0.8;
-  transition: opacity 0.3s ease;
-}
-
-.fab-button:hover::before {
-  opacity: 1;
-}
-
 .dark .fab-button {
-  background: rgba(30, 30, 40, 0.4);
-  border-color: rgba(255, 255, 255, 0.15);
-  box-shadow: 
-    0 6px 12px rgba(0, 0, 0, 0.25),
-    0 0 20px rgba(255, 105, 180, 0.12),
-    inset 0 1px 1px rgba(255, 255, 255, 0.1),
-    inset 0 -1px 1px rgba(0, 0, 0, 0.1);
+  background: rgba(30, 41, 59, 0.95);
+  border-color: rgba(255, 105, 180, 0.15);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 }
 
-.dark .fab-button::before {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.15) 0%,
-    rgba(255, 255, 255, 0.03) 40%,
-    transparent 60%
-  );
-}
 
 @media (min-width: 640px) {
   .fab-button {
@@ -485,50 +446,17 @@ onUnmounted(() => {
 /* 站点导航面板 - 液态玻璃效果 */
 .nav-panel {
   /* 不设置 position，使用模板中的 fixed */
-  background: rgba(255, 255, 255, 0.3);
-  backdrop-filter: blur(16px) saturate(180%);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 
-    0 8px 24px rgba(0, 0, 0, 0.15),
-    0 0 20px rgba(255, 20, 147, 0.08),
-    inset 0 1px 1px rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba(255, 20, 147, 0.1);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   overflow: hidden;
 }
 
-/* 液态玻璃高光 */
-.nav-panel::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  border-radius: inherit;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.4) 0%,
-    rgba(255, 255, 255, 0.1) 30%,
-    transparent 50%
-  );
-  pointer-events: none;
-}
-
 /* 站点导航面板 - 暗色模式 */
 .dark .nav-panel {
-  background: rgba(30, 30, 40, 0.4);
-  border-color: rgba(255, 255, 255, 0.15);
-  box-shadow: 
-    0 8px 24px rgba(0, 0, 0, 0.25),
-    0 0 20px rgba(255, 105, 180, 0.1),
-    inset 0 1px 1px rgba(255, 255, 255, 0.1);
-}
-
-.dark .nav-panel::before {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.12) 0%,
-    rgba(255, 255, 255, 0.03) 30%,
-    transparent 50%
-  );
+  background: rgba(30, 41, 59, 0.98);
+  border-color: rgba(255, 105, 180, 0.15);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
 }
 
 /* 标题栏 */
diff --git a/src/components/ImageViewer.vue b/src/components/ImageViewer.vue
index ea64a69..8732e82 100644
--- a/src/components/ImageViewer.vue
+++ b/src/components/ImageViewer.vue
@@ -546,8 +546,7 @@ onUnmounted(() => {
 .image-viewer-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.92);
-  backdrop-filter: blur(8px);
+  background: rgba(0, 0, 0, 0.95);
 }
 
 .image-viewer-container {
@@ -596,9 +595,8 @@ onUnmounted(() => {
   font-size: 14px;
   font-weight: 500;
   padding: 4px 12px;
-  background: rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.2);
   border-radius: 20px;
-  backdrop-filter: blur(4px);
 }
 
 .toolbar-btn {
@@ -613,7 +611,6 @@ onUnmounted(() => {
   border-radius: 10px;
   cursor: pointer;
   transition: all 0.2s ease;
-  backdrop-filter: blur(4px);
 }
 
 .toolbar-btn:hover {
@@ -704,7 +701,6 @@ onUnmounted(() => {
   color: white;
   cursor: pointer;
   transition: all 0.2s ease;
-  backdrop-filter: blur(4px);
 }
 
 .nav-prev {
@@ -733,9 +729,8 @@ onUnmounted(() => {
   text-align: center;
   max-width: 80%;
   padding: 6px 16px;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.6);
   border-radius: 8px;
-  backdrop-filter: blur(4px);
 }
 
 /* 缩略图 */
@@ -745,9 +740,8 @@ onUnmounted(() => {
   padding: 8px;
   max-width: 90vw;
   overflow-x: auto;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.5);
   border-radius: 12px;
-  backdrop-filter: blur(4px);
 }
 
 .thumbnail {
diff --git a/src/components/KeyboardHelpPanel.vue b/src/components/KeyboardHelpPanel.vue
index 7eddae5..dfc1e63 100644
--- a/src/components/KeyboardHelpPanel.vue
+++ b/src/components/KeyboardHelpPanel.vue
@@ -150,13 +150,11 @@ function close() {
 
 <style scoped>
 .keyboard-help-panel {
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  background: rgba(255, 255, 255, 0.98);
 }
 
 .dark .keyboard-help-panel {
-  background: rgba(30, 41, 59, 0.9);
+  background: rgba(30, 41, 59, 0.98);
 }
 
 .shortcut-row {
diff --git a/src/components/LiquidGlass.vue b/src/components/LiquidGlass.vue
deleted file mode 100644
index 1343f6f..0000000
--- a/src/components/LiquidGlass.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <component 
-    :is="tag" 
-    class="liquid-glass liquid-glass-shadow"
-    :class="[sizeClass, { 'liquid-glass-interactive': interactive }]"
-  >
-    <!-- 液态扭曲效果层 -->
-    <div class="liquid-glass-effect" />
-    
-    <!-- 着色层 -->
-    <div class="liquid-glass-tint" />
-    
-    <!-- 高光层 -->
-    <div class="liquid-glass-shine" />
-    
-    <!-- 边框层 -->
-    <div class="liquid-glass-border" />
-    
-    <!-- 内容层 -->
-    <div class="liquid-glass-content">
-      <slot />
-    </div>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  /** 渲染的 HTML 标签 */
-  tag?: string
-  /** 是否有交互效果（hover 缩放） */
-  interactive?: boolean
-  /** 圆角大小 */
-  rounded?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  tag: 'div',
-  interactive: false,
-  rounded: 'xl',
-})
-
-const sizeClass = computed(() => {
-  const roundedMap: Record<string, string> = {
-    sm: 'rounded-lg',
-    md: 'rounded-xl',
-    lg: 'rounded-2xl',
-    xl: 'rounded-3xl',
-    '2xl': 'rounded-[2rem]',
-    full: 'rounded-full',
-  }
-  return roundedMap[props.rounded] || 'rounded-xl'
-})
-</script>
-
-<style scoped>
-/* 交互式液态玻璃 */
-.liquid-glass-interactive {
-  cursor: pointer;
-  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
-              box-shadow 0.3s ease;
-}
-
-.liquid-glass-interactive:hover {
-  transform: translateY(-4px) scale(1.02);
-}
-
-.liquid-glass-interactive:active {
-  transform: translateY(-2px) scale(1);
-}
-
-/* 圆角继承 */
-.liquid-glass-effect,
-.liquid-glass-tint,
-.liquid-glass-shine,
-.liquid-glass-border {
-  border-radius: inherit;
-}
-</style>
diff --git a/src/components/SearchHeader.vue b/src/components/SearchHeader.vue
index fe47e53..fbe0c0b 100644
--- a/src/components/SearchHeader.vue
+++ b/src/components/SearchHeader.vue
@@ -122,12 +122,12 @@
             </div>
           </div>
 
-          <!-- Search Mode Selector - WWDC 2025 液态玻璃 -->
+          <!-- Search Mode Selector -->
           <div class="flex justify-center items-center">
             <div class="mode-switch liquid-mode-switch relative flex p-1.5 rounded-2xl">
-              <!-- 液态玻璃高光 -->
+              <!-- 高光装饰 -->
               <div class="absolute inset-0 rounded-2xl overflow-hidden pointer-events-none">
-                <div class="absolute inset-0 bg-gradient-to-br from-white/40 via-white/10 to-transparent" />
+                <div class="absolute inset-0 bg-gradient-to-br from-white/30 via-white/5 to-transparent" />
               </div>
               
               <!-- 滑动背景指示器 -->
@@ -1036,9 +1036,7 @@ defineExpose({
 
 /* 错误卡片样式 */
 .error-card {
-  background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(254, 226, 226, 0.95));
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
+  background: linear-gradient(135deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.98));
   border-radius: 1rem;
   padding: 1rem;
   border: 1px solid rgba(239, 68, 68, 0.2);
@@ -1162,11 +1160,9 @@ defineExpose({
   border-radius: 1rem;
   background: linear-gradient(
     135deg,
-    rgba(255, 255, 255, 0.85) 0%,
-    rgba(255, 228, 242, 0.75) 100%
+    rgba(255, 255, 255, 0.95) 0%,
+    rgba(255, 245, 250, 0.92) 100%
   );
-  backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
   z-index: -1;
 }
 
@@ -1233,25 +1229,17 @@ defineExpose({
   }
 }
 
-/* 液态玻璃模式切换器 */
+/* 模式切换器 - 半透明效果 */
 .liquid-mode-switch {
-  background: rgba(255, 255, 255, 0.25);
-  backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 
-    0 6px 12px rgba(0, 0, 0, 0.12),
-    0 0 20px rgba(255, 20, 147, 0.06),
-    inset 0 1px 1px rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(255, 20, 147, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
 .dark .liquid-mode-switch {
-  background: rgba(30, 30, 40, 0.4);
-  border-color: rgba(255, 255, 255, 0.15);
-  box-shadow: 
-    0 6px 12px rgba(0, 0, 0, 0.2),
-    0 0 20px rgba(255, 105, 180, 0.08),
-    inset 0 1px 1px rgba(255, 255, 255, 0.1);
+  background: rgba(30, 41, 59, 0.9);
+  border-color: rgba(255, 105, 180, 0.15);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
 /* 模式切换按钮 hover 效果 */
diff --git a/src/components/SearchHistoryModal.vue b/src/components/SearchHistoryModal.vue
index 1322e0e..5c9b1f0 100644
--- a/src/components/SearchHistoryModal.vue
+++ b/src/components/SearchHistoryModal.vue
@@ -222,11 +222,9 @@ onUnmounted(() => {
 .history-modal {
   background: linear-gradient(
     180deg,
-    rgba(255, 255, 255, 0.95) 0%,
-    rgba(255, 251, 235, 0.98) 100%
+    rgba(255, 255, 255, 0.98) 0%,
+    rgba(255, 253, 245, 0.99) 100%
   );
-  backdrop-filter: blur(40px) saturate(1.5);
-  -webkit-backdrop-filter: blur(40px) saturate(1.5);
   border: 1px solid rgba(251, 191, 36, 0.2);
 }
 
@@ -234,23 +232,19 @@ onUnmounted(() => {
 .dark .history-modal {
   background: linear-gradient(
     180deg,
-    rgba(30, 41, 59, 0.95) 0%,
-    rgba(30, 27, 17, 0.98) 100%
+    rgba(30, 41, 59, 0.98) 0%,
+    rgba(30, 27, 17, 0.99) 100%
   ) !important;
-  backdrop-filter: blur(40px) saturate(1.5) !important;
-  -webkit-backdrop-filter: blur(40px) saturate(1.5) !important;
   border: 1px solid rgba(251, 191, 36, 0.1) !important;
 }
 
 /* 头部样式 */
 .history-header {
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.95);
 }
 
 .dark .history-header {
-  background: rgba(30, 41, 59, 0.8) !important;
+  background: rgba(30, 41, 59, 0.95) !important;
 }
 
 /* 历史记录项 */
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 90c70eb..b330364 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -346,43 +346,15 @@ function getTagLabel(tag: string) {
 </script>
 
 <style scoped>
-/* 平台卡片 - WWDC 2025 液态玻璃效果 */
+/* 平台卡片 - 半透明效果 */
 .result-card {
   animation-delay: calc(var(--index, 0) * 0.1s);
   content-visibility: auto;
   contain-intrinsic-size: auto 400px;
   
-  /* WWDC 2025 液态玻璃效果 */
-  background: rgba(255, 255, 255, 0.3) !important;
-  backdrop-filter: blur(16px) saturate(180%);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.3) !important;
-  box-shadow: 
-    0 8px 24px rgba(0, 0, 0, 0.12),
-    0 0 20px rgba(255, 20, 147, 0.06),
-    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
-}
-
-/* 液态玻璃高光 */
-.result-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.5) 0%,
-    rgba(255, 255, 255, 0.1) 30%,
-    transparent 50%
-  );
-  pointer-events: none;
-  z-index: 10;
-  opacity: 0.6;
-  transition: opacity 0.3s ease;
-}
-
-.result-card:hover::before {
-  opacity: 1;
+  background: rgba(255, 255, 255, 0.95) !important;
+  border: 1px solid rgba(255, 20, 147, 0.08) !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
 }
 
 /* 暗色模式 */
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 70fd0bd..6770d1c 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -436,34 +436,25 @@ function reset() {
 
 /* 设置面板 - 暗色模式 */
 .dark .settings-page {
-  background: rgba(30, 30, 40, 0.5);
-  border-color: rgba(255, 255, 255, 0.15);
-  box-shadow: 
-    0 -8px 24px rgba(0, 0, 0, 0.2),
-    0 0 20px rgba(255, 105, 180, 0.08),
-    inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
+  background: rgba(30, 41, 59, 0.98);
+  border-color: rgba(255, 105, 180, 0.15);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
 }
 
 /* 设置卡片 - 亮色模式 */
 .settings-card {
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
+  background: rgba(255, 255, 255, 0.95);
   border-radius: 1.25rem;
   padding: 1.25rem;
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  box-shadow:
-    0 4px 24px -4px rgba(0, 0, 0, 0.08),
-    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
+  border: 1px solid rgba(255, 20, 147, 0.08);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
 }
 
 /* 设置卡片 - 暗色模式 */
 .dark .settings-card {
-  background: rgba(30, 41, 59, 0.8) !important;
-  border: 1px solid rgba(255, 255, 255, 0.1) !important;
-  box-shadow:
-    0 4px 24px -4px rgba(0, 0, 0, 0.4),
-    0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
+  background: rgba(30, 41, 59, 0.95);
+  border: 1px solid rgba(255, 105, 180, 0.1);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 }
 
 /* 自定义滚动条 */
diff --git a/src/components/TopToolbar.vue b/src/components/TopToolbar.vue
index f9d1fb5..09b7062 100644
--- a/src/components/TopToolbar.vue
+++ b/src/components/TopToolbar.vue
@@ -219,16 +219,10 @@ async function saveBackgroundImage() {
   position: relative;
   overflow: hidden;
   
-  /* WWDC 2025 液态玻璃效果 */
-  background: rgba(255, 255, 255, 0.25);
-  backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 
-    0 6px 12px rgba(0, 0, 0, 0.15),
-    0 0 20px rgba(255, 20, 147, 0.1),
-    inset 0 1px 1px rgba(255, 255, 255, 0.6),
-    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
+  /* 半透明效果 */
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(255, 20, 147, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   
   color: rgb(199, 21, 133);
   cursor: pointer;
@@ -242,27 +236,6 @@ async function saveBackgroundImage() {
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
 }
 
-/* 液态玻璃高光 */
-.toolbar-button::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.4) 0%,
-    rgba(255, 255, 255, 0.1) 40%,
-    transparent 60%
-  );
-  pointer-events: none;
-  opacity: 0.8;
-  transition: opacity 0.3s ease;
-}
-
-.toolbar-button:hover::before {
-  opacity: 1;
-}
-
 @media (min-width: 640px) {
   .toolbar-button {
     width: 44px;
@@ -279,25 +252,12 @@ async function saveBackgroundImage() {
 
 /* 暗色主题 */
 .dark .toolbar-button {
-  background: rgba(30, 30, 40, 0.4);
-  border-color: rgba(255, 255, 255, 0.15);
-  box-shadow: 
-    0 6px 12px rgba(0, 0, 0, 0.25),
-    0 0 20px rgba(255, 105, 180, 0.12),
-    inset 0 1px 1px rgba(255, 255, 255, 0.1),
-    inset 0 -1px 1px rgba(0, 0, 0, 0.1);
+  background: rgba(30, 41, 59, 0.95);
+  border-color: rgba(255, 105, 180, 0.15);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
   color: rgb(255, 179, 217);
 }
 
-.dark .toolbar-button::before {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.15) 0%,
-    rgba(255, 255, 255, 0.03) 40%,
-    transparent 60%
-  );
-}
-
 .toolbar-button:hover {
   transform: translate3d(0, -3px, 0) scale(1.08);
   box-shadow: