fix(ui): 深色模式下补齐卡片与弹层的层次感
CI / verify (push) Successful in 1m40s
CI / 部署到服务器 (push) Successful in 27s

- 深色里沿用浅色那套低透明度黑色阴影没有对比度(黑投影落在 zinc-950 上),
  悬停和弹层都看不出「浮起来」,本次为深色单独配一套阴影与状态色
- 卡片:静止态改「近距投影 + 顶部内高光」;悬停改「外扩暗晕 + 极淡白光晕 +
  内高光 12%」,同时底色提亮一档(zinc-900 → zinc-800)、边框提到 zinc-600,
  位移补偿到 2px —— 暗底上 1px 的移动肉眼看不出来
- 弹层:新增 shadow-pop-dark / shadow-panel-dark 标记类,只挂给深色底面的
  下拉与抽屉;toast 在深色下仍是亮色块(dark:bg-zinc-100),保留原黑色投影,
  避免亮块套白光晕发脏
- 抽屉补 dark:border-l:它在深色下既无边框又无可视阴影,与背景糊成一片
- 实现说明:Tailwind v4 会把 @theme 的阴影值内联进 --tw-shadow,覆盖 CSS 变量
  对已生成的工具类无效,因此直接重写 box-shadow;规则不放进 @layer 以便稳定
  压过原子类,且选择器需按 hover: 变体转义后的类名书写

验证:vue-tsc -b 与 eslint src 干净;TaskCard / SideDrawer / TagFilter /
TagInput / BatchSelectionBar 共 114 例单测通过;另用 Playwright 采样像素亮度
与 getComputedStyle 确认深浅两套阴影各自命中。
This commit is contained in:
chenshoulin
2026-10-23 08:16:07 +08:00
parent 51235a59a2
commit 69a868a7b1
6 changed files with 70 additions and 5 deletions
+1 -1
View File
@@ -98,7 +98,7 @@ const cardClass = computed(() => {
}
return isDone.value
? 'border-slate-200 bg-white opacity-60 dark:border-zinc-800 dark:bg-zinc-900'
: 'border-slate-200 bg-white hover:-translate-y-px hover:border-slate-300 hover:shadow-card-hover dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700'
: 'border-slate-200 bg-white hover:-translate-y-px hover:border-slate-300 hover:shadow-card-hover dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-600 dark:hover:bg-zinc-800'
})
/**