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>
This commit is contained in:
wangjia
@@ -4,6 +4,10 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>dudu 设置</title>
|
<title>dudu 设置</title>
|
||||||
|
<style>
|
||||||
|
/* 窗口 transparent，圆角/边框/阴影由页面自绘（对齐原型 MacWindow） */
|
||||||
|
html, body { margin: 0; background: transparent; }
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
|
|||||||
tauri-build = { version = "2", features = [] }
|
tauri-build = { version = "2", features = [] }
|
||||||
|
|
||||||
[dependencies]
|
[dependencies]
|
||||||
tauri = { version = "2", features = ["tray-icon"] }
|
tauri = { version = "2", features = ["macos-private-api", "tray-icon"] }
|
||||||
tauri-plugin-global-shortcut = "2"
|
tauri-plugin-global-shortcut = "2"
|
||||||
serde = { version = "1", features = ["derive"] }
|
serde = { version = "1", features = ["derive"] }
|
||||||
serde_json = "1"
|
serde_json = "1"
|
||||||
|
|||||||
@@ -15,12 +15,18 @@
|
|||||||
"label": "settings",
|
"label": "settings",
|
||||||
"title": "dudu 设置",
|
"title": "dudu 设置",
|
||||||
"url": "index.html",
|
"url": "index.html",
|
||||||
"width": 440,
|
"width": 472,
|
||||||
"height": 560,
|
"height": 592,
|
||||||
"resizable": false,
|
"resizable": false,
|
||||||
"visible": false,
|
"visible": false,
|
||||||
"titleBarStyle": "Overlay",
|
"titleBarStyle": "Overlay",
|
||||||
"hiddenTitle": true
|
"hiddenTitle": true,
|
||||||
|
"transparent": true,
|
||||||
|
"shadow": false,
|
||||||
|
"trafficLightPosition": {
|
||||||
|
"x": 30,
|
||||||
|
"y": 28
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "overlay",
|
"label": "overlay",
|
||||||
|
|||||||
@@ -61,13 +61,19 @@ export function SettingsApp() {
|
|||||||
const trialUsedMin = me ? Math.floor(me.trial_used_today / 60) : 0;
|
const trialUsedMin = me ? Math.floor(me.trial_used_today / 60) : 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ fontFamily: 'var(--font-sans)', background: 'var(--bg-app)', minHeight: '100vh' }}>
|
// 透明窗口自绘 MacWindow 框（对齐原型）：16px 阴影边距 + radius-md + border + shadow-window。
|
||||||
{/* 无边框窗口自绘顶条（titleBarStyle Overlay：系统红绿灯悬浮于左上，留 76px）；
|
// 原生 NSWindow 底色在深色内容外露白边，故窗口 transparent、框由页面画。
|
||||||
样式对齐原型 MacWindow：surface-2 + 下边框，整条可拖拽 */}
|
<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
|
<div
|
||||||
data-tauri-drag-region
|
data-tauri-drag-region
|
||||||
style={{
|
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)',
|
background: 'var(--surface-2)', borderBottom: '1px solid var(--border-1)',
|
||||||
fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-semibold)', color: 'var(--text-1)',
|
fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-semibold)', color: 'var(--text-1)',
|
||||||
userSelect: 'none', WebkitUserSelect: 'none', cursor: 'default',
|
userSelect: 'none', WebkitUserSelect: 'none', cursor: 'default',
|
||||||
@@ -75,6 +81,7 @@ export function SettingsApp() {
|
|||||||
>
|
>
|
||||||
dudu 设置
|
dudu 设置
|
||||||
</div>
|
</div>
|
||||||
|
<div style={{ overflowY: 'auto', flex: 1 }}>
|
||||||
<Section title="输入">
|
<Section title="输入">
|
||||||
<SettingRow label="说话快捷键" description="按住说话，松开上屏">
|
<SettingRow label="说话快捷键" description="按住说话，松开上屏">
|
||||||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
|
||||||
@@ -148,6 +155,7 @@ export function SettingsApp() {
|
|||||||
<Button variant="ghost" size="sm" onClick={() => invoke('open_feedback')}>去反馈</Button>
|
<Button variant="ghost" size="sm" onClick={() => invoke('open_feedback')}>去反馈</Button>
|
||||||
</SettingRow>
|
</SettingRow>
|
||||||
</Section>
|
</Section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user