fix(desktop): 设置窗口透明化 + 自绘 MacWindow 框，去掉原生白边（12A 实测反馈）

Overlay 标题栏模式下原生 NSWindow 底色在深色内容四周露出白边。改为与托盘菜单一致的模式：窗口 transparent + shadow:false，由页面自绘窗框（对齐原型 MacWindow 规格：radius-md + border-1 + shadow-window， 16px 阴影边距，窗口尺寸相应 472x592），红绿灯 trafficLightPosition 对齐自绘顶条，内容区独立滚动。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-11 07:47:19 +08:00
parent adfa1ef1e4
commit b914aebb00
4 changed files with 26 additions and 8 deletions
@@ -4,6 +4,10 @@
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>dudu 设置</title>
+  <style>
+    /* 窗口 transparent，圆角/边框/阴影由页面自绘（对齐原型 MacWindow） */
+    html, body { margin: 0; background: transparent; }
+  </style>
 </head>
 <body>
  <div id="root"></div>
@@ -12,7 +12,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }

 [dependencies]
-tauri = { version = "2", features = ["tray-icon"] }
+tauri = { version = "2", features = ["macos-private-api", "tray-icon"] }
 tauri-plugin-global-shortcut = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
@@ -15,12 +15,18 @@
        "label": "settings",
        "title": "dudu 设置",
        "url": "index.html",
-        "width": 440,
-        "height": 560,
+        "width": 472,
+        "height": 592,
        "resizable": false,
        "visible": false,
        "titleBarStyle": "Overlay",
-        "hiddenTitle": true
+        "hiddenTitle": true,
+        "transparent": true,
+        "shadow": false,
+        "trafficLightPosition": {
+          "x": 30,
+          "y": 28
+        }
      },
      {
        "label": "overlay",
@@ -61,13 +61,19 @@ export function SettingsApp() {
  const trialUsedMin = me ? Math.floor(me.trial_used_today / 60) : 0;

  return (
-    <div style={{ fontFamily: 'var(--font-sans)', background: 'var(--bg-app)', minHeight: '100vh' }}>
-      {/* 无边框窗口自绘顶条（titleBarStyle Overlay：系统红绿灯悬浮于左上，留 76px）；
-          样式对齐原型 MacWindow：surface-2 + 下边框，整条可拖拽 */}
+    // 透明窗口自绘 MacWindow 框（对齐原型）：16px 阴影边距 + radius-md + border + shadow-window。
+    // 原生 NSWindow 底色在深色内容外露白边，故窗口 transparent、框由页面画。
+    <div style={{
+      fontFamily: 'var(--font-sans)', position: 'fixed', inset: 16,
+      background: 'var(--bg-app)', borderRadius: 'var(--radius-md)',
+      border: '1px solid var(--border-1)', boxShadow: 'var(--shadow-window)',
+      overflow: 'hidden', display: 'flex', flexDirection: 'column',
+    }}>
+      {/* 自绘顶条：系统红绿灯悬浮于左上（trafficLightPosition 已对齐），留 76px；整条可拖拽 */}
      <div
        data-tauri-drag-region
        style={{
-          height: 36, display: 'flex', alignItems: 'center', padding: '0 14px 0 76px',
+          height: 36, flex: 'none', display: 'flex', alignItems: 'center', padding: '0 14px 0 76px',
          background: 'var(--surface-2)', borderBottom: '1px solid var(--border-1)',
          fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-semibold)', color: 'var(--text-1)',
          userSelect: 'none', WebkitUserSelect: 'none', cursor: 'default',
@@ -75,6 +81,7 @@ export function SettingsApp() {
      >
        dudu 设置
      </div>
+      <div style={{ overflowY: 'auto', flex: 1 }}>
      <Section title="输入">
        <SettingRow label="说话快捷键" description="按住说话，松开上屏">
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
@@ -149,5 +156,6 @@ export function SettingsApp() {
        </SettingRow>
      </Section>
      </div>
+    </div>
  );
 }