style(ui): 抽屉遮罩改为半透明加背景模糊，透出底下的看板

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

补三条测试盯住这个观感：遮罩必须半透明、必须带模糊、必须铺满视口且在
面板之下。

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 })

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"