From 48f178e5bb81e3e6165f1ad7015b4b46d9f939c2 Mon Sep 17 00:00:00 2001
From: chenshoulin <chenshoulin@goldenstand.cn>
Date: Sun, 18 Oct 2026 19:51:38 +0800
Subject: [PATCH] =?UTF-8?q?style(ui):=20=E6=8A=BD=E5=B1=89=E9=81=AE?=
 =?UTF-8?q?=E7=BD=A9=E6=94=B9=E4=B8=BA=E5=8D=8A=E9=80=8F=E6=98=8E=E5=8A=A0?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E6=A8=A1=E7=B3=8A=EF=BC=8C=E9=80=8F=E5=87=BA?=
 =?UTF-8?q?=E5=BA=95=E4=B8=8B=E7=9A=84=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原来的遮罩压得太重（浅色 slate-900/40、深色 black/60），打开抽屉后左边几乎
是一片灰，看不出底下是什么。改为浅色 slate-900/25、深色 black/40，并加
backdrop-blur-sm：背景仍然看得见轮廓，模糊把它推远，不和面板抢焦点。

补三条测试盯住这个观感：遮罩必须半透明、必须带模糊、必须铺满视口且在
面板之下。
---
 src/components/SideDrawer.spec.ts | 30 ++++++++++++++++++++++++++++++
 src/components/SideDrawer.vue     |  9 ++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/components/SideDrawer.spec.ts b/src/components/SideDrawer.spec.ts
index 64baf4c..284db67 100644
--- a/src/components/SideDrawer.spec.ts
+++ b/src/components/SideDrawer.spec.ts
@@ -90,6 +90,36 @@ describe('SideDrawer 关闭方式', () => {
   })
 })
 
+/**
+ * 遮罩既要压暗又要让底下的页面看得见：全不透明会把看板盖成一片灰，
+ * 所以这里把「半透明 + 模糊」固定下来，避免以后又被调回不透明。
+ */
+describe('SideDrawer 遮罩观感', () => {
+  const backdropOf = (wrapper: ReturnType<typeof mountDrawer>) =>
+    wrapper.find('.absolute.inset-0')
+
+  it('遮罩是半透明的，能透出底下的页面', () => {
+    const classes = backdropOf(mountDrawer({ open: true })).classes()
+    expect(classes).toContain('bg-slate-900/25')
+    expect(classes).toContain('dark:bg-black/40')
+  })
+
+  it('遮罩带背景模糊', () => {
+    expect(backdropOf(mountDrawer({ open: true })).classes()).toContain('backdrop-blur-sm')
+  })
+
+  it('遮罩铺满整个视口并位于面板之下', () => {
+    const wrapper = mountDrawer({ open: true })
+    const backdrop = backdropOf(wrapper)
+    expect(backdrop.classes()).toContain('absolute')
+    expect(backdrop.classes()).toContain('inset-0')
+    // 面板在遮罩之后出现，因此绘制在遮罩之上
+    expect(
+      (backdrop.element.compareDocumentPosition(wrapper.find('aside').element) & 4) === 4,
+    ).toBe(true)
+  })
+})
+
 describe('SideDrawer 焦点管理', () => {
   it('打开后焦点移入面板内的第一个可聚焦元素', async () => {
     mountDrawer({ open: true })
diff --git a/src/components/SideDrawer.vue b/src/components/SideDrawer.vue
index eaff791..e3aa972 100644
--- a/src/components/SideDrawer.vue
+++ b/src/components/SideDrawer.vue
@@ -85,7 +85,14 @@ onBeforeUnmount(stopListening)
 <template>
   <Teleport to="body">
     <div v-if="open" class="fixed inset-0 z-40">
-      <div class="absolute inset-0 bg-slate-900/40 dark:bg-black/60" @click="emit('close')" />
+      <!--
+        遮罩：压暗 + 轻微模糊。刻意压得比较轻，让底下的看板仍然看得见轮廓，
+        只把注意力让给抽屉；模糊负责把背景「推远」，避免和面板内容抢焦点。
+      -->
+      <div
+        class="absolute inset-0 bg-slate-900/25 backdrop-blur-sm dark:bg-black/40"
+        @click="emit('close')"
+      />
 
       <aside
         ref="panelRef"