🎨 style(titlebar): 调整 Windows 窗口按钮间距

- 为 Windows 自绘标题栏控制组增加 4px 间距
- 保持其他平台及按钮尺寸、圆角和交互不变
- 新增平台选择器与间距接线回归测试
This commit is contained in:
Syngnat
2026-07-23 10:14:52 +08:00
parent e4ca74d935
commit 5e71ad0090
3 changed files with 20 additions and 0 deletions

View File

@@ -411,6 +411,10 @@ body[data-theme='light'] .redis-viewer-workbench .ant-radio-button-wrapper-check
}
/* Custom Title Bar Close Button Hover */
body[data-platform='windows'] .titlebar-window-controls {
gap: 4px;
}
.titlebar-close-btn:hover {
background-color: #ff4d4f !important;
color: #fff !important;

View File

@@ -7111,6 +7111,7 @@ function App() {
<div style={{ minWidth: Math.max(40, Math.round(48 * effectiveUiScale)) }} />
) : (
<div
className="titlebar-window-controls"
data-no-titlebar-toggle="true"
onDoubleClick={(e) => e.stopPropagation()}
style={{ display: 'flex', height: '100%', WebkitAppRegion: 'no-drag', '--wails-draggable': 'no-drag' } as any}

View File

@@ -0,0 +1,15 @@
import { readFileSync } from 'node:fs';
import { describe, expect, it } from 'vitest';
const appSource = readFileSync(new URL('./App.tsx', import.meta.url), 'utf8');
const appCssSource = readFileSync(new URL('./App.css', import.meta.url), 'utf8');
describe('Windows titlebar window controls spacing', () => {
it('adds a small platform-scoped gap between the custom window buttons', () => {
expect(appSource).toContain('className="titlebar-window-controls"');
expect(appSource).toContain("document.body.setAttribute('data-platform', runtimePlatform || '')");
expect(appCssSource).toMatch(
/body\[data-platform='windows'\]\s+\.titlebar-window-controls\s*\{[^}]*gap:\s*4px;/s,
);
});
});