From b20fe962dea957d7378b4579aa6ca767725e7a28 Mon Sep 17 00:00:00 2001
From: "clim.ashscape" <ddx226005215@gmail.com>
Date: Sat, 4 Jul 2026 02:27:08 +0800
Subject: [PATCH] =?UTF-8?q?fix(theme):=20=E6=9A=97=E8=89=B2=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E5=8E=BB=E9=99=A4=20shadow=20inset=20=E9=A1=B6?=
 =?UTF-8?q?=E9=AB=98=E5=85=89=E5=B9=B6=E4=BC=98=E5=8C=96=E5=A4=96=E8=A7=82?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=20hover=20=E5=8D=A1=E9=A1=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 改动一:暗色 shadow inset 顶高光

.dark 块下 5 个 --shadow-* token 含 inset 0 1px 0 0 顶部内高光,在深色滑块顶部显现成亮线,与向下外阴影叠加,把视觉质心往下拉——滑块几何本就居中,偏下纯属视觉错觉。命名暗色主题(远山暮霭/森息夜语/莫兰迪夜/CRT终端)滑块本身浅色,inset 高光不可见故无偏下感,反向印证根因。

去掉 .dark 下 --shadow-xs/sm/md/lg/xl 的 inset 顶高光段,保留外阴影承担浮起感。一处 token 改动,所有吃 shadow-* 的浮起元素统一生效。亮色 :root token 未改动,零影响。

## 改动二:外观面板特殊风格卡片首次 hover 卡顿

StyleCard 容器 transition-all 收窄为 transition-[box-shadow,transform],避免 hover 时全属性插值扫描;预览图 loading 由 lazy 改为 eager,面板打开即加载,消除首次 hover 的下载/解码延迟。零行为变化。

## 测试

- bun run typecheck 全 6 包通过
- 暗色默认主题:滑块视觉偏下感消失,几何本就居中
- 命名暗色主题:滑块本就浅色无偏下问题,改动后行为一致,无回归
- 亮色模式:完全无变化
- 外观面板特殊风格卡片首次 hover 不再卡顿

Closes #1063
---
 .../components/settings/AppearanceSettings.tsx        |  4 ++--
 apps/electron/src/renderer/components/ui/dialog.tsx   |  2 +-
 apps/electron/src/renderer/components/ui/popover.tsx  |  2 +-
 apps/electron/src/renderer/styles/globals.css         | 11 +++++++----
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/electron/src/renderer/components/settings/AppearanceSettings.tsx b/apps/electron/src/renderer/components/settings/AppearanceSettings.tsx
index 9faac2055..577cc4aa9 100644
--- a/apps/electron/src/renderer/components/settings/AppearanceSettings.tsx
+++ b/apps/electron/src/renderer/components/settings/AppearanceSettings.tsx
@@ -440,7 +440,7 @@ function StyleCard({
       {/* 图片卡片本体 */}
       <div
         className={cn(
-          'relative rounded-lg overflow-hidden w-[99px] h-[183px] transition-all duration-150',
+          'relative rounded-lg overflow-hidden w-[99px] h-[183px] transition-[box-shadow,transform] duration-150',
           isSelected
             ? 'ring-2 ring-primary shadow-lg shadow-primary/20'
             : 'ring-1 ring-border/50 group-hover:ring-border group-focus-visible:ring-2 group-focus-visible:ring-primary group-focus-visible:ring-offset-1'
@@ -453,7 +453,7 @@ function StyleCard({
           <img
             src={style.image}
             alt={style.name}
-            loading="lazy"
+            loading="eager"
             decoding="async"
             className="w-full h-full object-cover"
             style={style.objectPosition ? { objectPosition: style.objectPosition } : undefined}
diff --git a/apps/electron/src/renderer/components/ui/dialog.tsx b/apps/electron/src/renderer/components/ui/dialog.tsx
index a9137e034..0a3bbb7c7 100644
--- a/apps/electron/src/renderer/components/ui/dialog.tsx
+++ b/apps/electron/src/renderer/components/ui/dialog.tsx
@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        // 内容容器：吃 --dialog token、xl 圆角、shadow-xl（多层柔阴影 + 暗色 inset 顶高光）；
+        // 内容容器：吃 --dialog token、xl 圆角、shadow-xl（多层柔阴影，暗色仅外阴影无 inset 高光）；
         // hairline 边框（border/50）替代默认实色边；动画时长稍微拉长到 250ms 配合 blur 过渡更自然
         "fixed left-[50%] top-[50%] z-[100] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4",
         "border border-border/50 bg-dialog text-dialog-foreground rounded-xl p-6 shadow-xl duration-200 titlebar-no-drag",
diff --git a/apps/electron/src/renderer/components/ui/popover.tsx b/apps/electron/src/renderer/components/ui/popover.tsx
index e16f434b5..323b6ecce 100644
--- a/apps/electron/src/renderer/components/ui/popover.tsx
+++ b/apps/electron/src/renderer/components/ui/popover.tsx
@@ -24,7 +24,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        // lg 圆角 + hairline 边框 + shadow-lg（多层柔阴影 + dark inset 高光）
+        // lg 圆角 + hairline 边框 + shadow-lg（多层柔阴影，暗色仅外阴影无 inset 高光）
         "z-[100] w-72 rounded-lg border border-border/50 bg-popover p-4 text-popover-foreground shadow-lg outline-none titlebar-no-drag",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
diff --git a/apps/electron/src/renderer/styles/globals.css b/apps/electron/src/renderer/styles/globals.css
index 862f59875..687ae9b92 100644
--- a/apps/electron/src/renderer/styles/globals.css
+++ b/apps/electron/src/renderer/styles/globals.css
@@ -89,11 +89,14 @@
   }
 
   .dark {
+    /* 暗色阴影去掉 inset 顶高光：原 inset 0 1px 0 hsl(0 0% 100% / N) 在深色滑块/按钮顶部
+     * 显现成亮线，与向下外阴影叠加导致视觉质心下沉（"偏下"错觉）。去掉后顶部不再发亮，
+     * 浮起感由外阴影承担，几何居中的滑块视觉上也居中。影响所有 shadow-* 浮起元素。 */
     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
-    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), inset 0 1px 0 0 hsl(0 0% 100% / 0.06);
-    --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.55), 0 2px 4px 0 rgb(0 0 0 / 0.35), inset 0 1px 0 0 hsl(0 0% 100% / 0.08);
-    --shadow-lg: 0 16px 32px -8px rgb(0 0 0 / 0.6), 0 6px 12px -2px rgb(0 0 0 / 0.4), inset 0 1px 0 0 hsl(0 0% 100% / 0.10);
-    --shadow-xl: 0 32px 64px -16px rgb(0 0 0 / 0.7), 0 16px 32px -8px rgb(0 0 0 / 0.5), inset 0 1px 0 0 hsl(0 0% 100% / 0.12);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5);
+    --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.55), 0 2px 4px 0 rgb(0 0 0 / 0.35);
+    --shadow-lg: 0 16px 32px -8px rgb(0 0 0 / 0.6), 0 6px 12px -2px rgb(0 0 0 / 0.4);
+    --shadow-xl: 0 32px 64px -16px rgb(0 0 0 / 0.7), 0 16px 32px -8px rgb(0 0 0 / 0.5);
   }
 
   :root {