From fe061e6168c3a7727b4a1d7586c2ec17064655e2 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Sun, 30 Aug 2026 01:32:28 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E9=A1=B6=E6=A0=8F=E6=A8=A1=E7=B3=8A?=
 =?UTF-8?q?=E6=94=B9=E4=B8=89=E7=BA=A7=E6=B8=90=E8=BF=9B=E6=9D=A1=E5=B8=A6?=
 =?UTF-8?q?=EF=BC=8C=E6=A0=B9=E6=B2=BB=E6=96=B0=E7=89=88=E5=86=85=E6=A0=B8?=
 =?UTF-8?q?=20mask+backdrop-filter=20=E5=90=8C=E5=85=83=E7=B4=A0=E5=A4=B1?=
 =?UTF-8?q?=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- mask-image 与 backdrop-filter 同元素时模糊被新版浏览器内核静默丢弃（实测确认）
- 桌面 conversation-ribbon / 移动 mobile-panel-topbar 各加 __blur 元素：
  本体 blur(14px) + ::before blur(5px) + ::after blur(1.2px) 三级递减，
  模拟原 mask 渐隐模糊，无可见下边界
- 原 ::after 颜色渐隐层保持不变，盖在最上溶掉条带阶梯感
---
 static/src/App.vue                            |  2 +
 .../styles/components/chat/_chat-area.scss    | 40 +++++++++++++++++++
 .../styles/components/overlays/_overlays.scss | 40 +++++++++++++++++++
 3 files changed, 82 insertions(+)

diff --git a/static/src/App.vue b/static/src/App.vue
index 40c2e0f3..437f0576 100644
--- a/static/src/App.vue
+++ b/static/src/App.vue
@@ -128,6 +128,7 @@
           />
 
           <div v-if="titleRibbonVisible" class="conversation-ribbon" ref="titleRibbon">
+            <div class="conversation-ribbon__blur" aria-hidden="true"></div>
             <button
               type="button"
               class="conversation-ribbon__selector"
@@ -592,6 +593,7 @@
         ref="mobilePanelTrigger"
       >
         <div class="mobile-panel-topbar">
+          <div class="mobile-panel-topbar__blur" aria-hidden="true"></div>
           <button
             type="button"
             class="mobile-panel-fab"
diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss
index c8be2ab5..87dcda5e 100644
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/static/src/styles/components/chat/_chat-area.scss
@@ -44,6 +44,46 @@
   gap: 12px;
 }
 
+/* 顶栏下方渐进模糊带：mask-image 与 backdrop-filter 写在同一元素上时，
+   新版浏览器内核中模糊会静默失效（2026-08 实测），单元素 mask 渐隐模糊不可用；
+   改用三级强度递减的条带（元素本体 + ::before + ::after）模拟渐进模糊，
+   上方再由 ::after 颜色渐隐层溶掉阶梯感 */
+.conversation-ribbon__blur {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 2px; /* 带 1（最强）：ribbon 底上 8px ~ 底上 2px */
+  height: 6px;
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  pointer-events: none;
+}
+
+.conversation-ribbon__blur::before,
+.conversation-ribbon__blur::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}
+
+/* 带 2（中等）：与带 1 重叠 1px 避免接缝 */
+.conversation-ribbon__blur::before {
+  top: 5px;
+  height: 7px;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
+
+/* 带 3（极轻）：溶掉模糊下边界 */
+.conversation-ribbon__blur::after {
+  top: 11px;
+  height: 6px;
+  backdrop-filter: blur(1.2px);
+  -webkit-backdrop-filter: blur(1.2px);
+}
+
 .conversation-ribbon::after {
   content: '';
   position: absolute;
diff --git a/static/src/styles/components/overlays/_overlays.scss b/static/src/styles/components/overlays/_overlays.scss
index 15ae1d83..62797302 100644
--- a/static/src/styles/components/overlays/_overlays.scss
+++ b/static/src/styles/components/overlays/_overlays.scss
@@ -1440,6 +1440,46 @@
   height: 44px;
 }
 
+/* 顶栏下方渐进模糊带：mask-image 与 backdrop-filter 写在同一元素上时，
+   新版浏览器内核中模糊会静默失效（2026-08 实测），单元素 mask 渐隐模糊不可用；
+   改用三级强度递减的条带（元素本体 + ::before + ::after）模拟渐进模糊，
+   上方再由 ::after 颜色渐隐层溶掉阶梯感 */
+.mobile-panel-topbar__blur {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 2px; /* 带 1（最强）：顶栏底上 8px ~ 底上 2px */
+  height: 6px;
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  pointer-events: none;
+}
+
+.mobile-panel-topbar__blur::before,
+.mobile-panel-topbar__blur::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}
+
+/* 带 2（中等）：与带 1 重叠 1px 避免接缝 */
+.mobile-panel-topbar__blur::before {
+  top: 5px;
+  height: 7px;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
+
+/* 带 3（极轻）：溶掉模糊下边界 */
+.mobile-panel-topbar__blur::after {
+  top: 11px;
+  height: 6px;
+  backdrop-filter: blur(1.2px);
+  -webkit-backdrop-filter: blur(1.2px);
+}
+
 .mobile-panel-topbar::after {
   content: '';
   position: absolute;