From 01cec4e4c651089b1977f0cd0dcef19a6ad0b08b Mon Sep 17 00:00:00 2001
From: hunter-dev <dev@local>
Date: Wed, 26 Aug 2026 16:30:11 +0800
Subject: [PATCH] =?UTF-8?q?fix(ux):=20=E6=A0=87=E7=AD=BE=E6=A0=8F=E5=BC=80?=
 =?UTF-8?q?=E5=85=B3=E6=8C=89=E9=92=AE=E5=9B=BE=E6=A0=87=E5=8F=AF=E8=A7=81?=
 =?UTF-8?q?=E6=80=A7=E2=80=94=E2=80=94=E2=96=AD/=E2=96=AF(12px=E7=BB=86?=
 =?UTF-8?q?=E7=9F=A9=E5=BD=A2=E8=82=89=E7=9C=BC=E4=B8=8D=E5=8F=AF=E8=A7=81?=
 =?UTF-8?q?)=E6=94=B9=E4=B8=BA=20=E2=98=B0/=E2=80=93(14px=E4=B8=89?=
 =?UTF-8?q?=E6=A8=AA=E7=BA=BF+=E7=9F=AD=E6=A8=AA),=20=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E5=8F=8D=E9=A6=88=E6=BC=8F=E7=9C=8B=E6=AD=A4=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?;=20=E5=88=A0=E9=99=A4=E4=B8=B4=E6=97=B6=E6=88=AA=E5=9B=BE?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/renderer/features/shell/TitleBar.tsx  |  2 +-
 .../tests/e2e/screenshot-titlebar.spec.ts     | 40 +++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 apps/desktop/tests/e2e/screenshot-titlebar.spec.ts

diff --git a/apps/desktop/src/renderer/features/shell/TitleBar.tsx b/apps/desktop/src/renderer/features/shell/TitleBar.tsx
index 733ef4f..a37ee2e 100644
--- a/apps/desktop/src/renderer/features/shell/TitleBar.tsx
+++ b/apps/desktop/src/renderer/features/shell/TitleBar.tsx
@@ -19,7 +19,7 @@ export function TitleBar({ onToggleView, view, onSettings, onAppearance, onToggl
       <div style={{ display: 'flex', alignItems: 'center', gap: 2, padding: '0 6px', ...noDrag }}>
         <button title={"刷新"} onClick={() => loadTree()} style={btn}>↻</button>
         <button title={"切换 编辑器/图谱"} onClick={onToggleView} style={btn}>{view === 'editor' ? '🕸' : '✎'}</button>
-        <button title={tabbarVisible ? '隐藏标签栏' : '显示标签栏'} onClick={onToggleTabbar} style={btn} data-testid="tabbar-toggle">{tabbarVisible ? '▭' : '▯'}</button>
+        <button title={tabbarVisible ? '隐藏标签栏' : '显示标签栏'} onClick={onToggleTabbar} style={{ ...btn, fontSize: 14 }} data-testid="tabbar-toggle">{tabbarVisible ? '☰' : '–'}</button>
         <button title={"极简模式"} onClick={onToggleMinimal} style={btn}>{minimal ? '⛶' : '⊡'}</button>
         <button title={"设置"} onClick={onSettings} style={btn}>⚙</button>
         <span style={{ width: 1, background: 'var(--control-border)', height: 16, margin: '0 4px' }} />
diff --git a/apps/desktop/tests/e2e/screenshot-titlebar.spec.ts b/apps/desktop/tests/e2e/screenshot-titlebar.spec.ts
new file mode 100644
index 0000000..0227ff3
--- /dev/null
+++ b/apps/desktop/tests/e2e/screenshot-titlebar.spec.ts
@@ -0,0 +1,40 @@
+import { test } from '@playwright/test';
+import { _electron as electron } from 'playwright';
+import { promises as fs } from 'node:fs';
+import nodePath from 'node:path';
+import os from 'node:os';
+
+const MAIN_JS = nodePath.join(process.cwd(), 'dist-electron/main/index.js');
+
+test('screenshot titlebar buttons', async () => {
+  const tmp = await fs.mkdtemp(nodePath.join(os.tmpdir(), 'hn-shot2-'));
+  const ud = nodePath.join(tmp, 'ud'); const v = nodePath.join(tmp, 'v');
+  await fs.mkdir(ud, { recursive: true }); await fs.mkdir(v, { recursive: true });
+  const app = await electron.launch({ args: ['--user-data-dir=' + ud, MAIN_JS] });
+  const page = await app.firstWindow();
+  await page.waitForLoadState('domcontentloaded');
+  await page.evaluate((root: string) => (globalThis as any).dsh.invoke('vault:switch', { root }), v);
+  await page.waitForTimeout(500);
+  // Clip the top-right area where buttons are (full width, top 36px)
+  await page.screenshot({ path: 'test-results/titlebar-buttons.png', clip: { x: 780, y: 0, width: 420, height: 36 } });
+  // Get computed styles of each button to check visibility
+  const btnInfo = await page.evaluate(() => {
+    return Array.from(document.querySelectorAll('button[title]')).filter(b => {
+      const r = b.getBoundingClientRect();
+      return r.top < 36; // titlebar buttons only
+    }).map(b => {
+      const cs = getComputedStyle(b);
+      const r = b.getBoundingClientRect();
+      return {
+        title: b.getAttribute('title'),
+        text: b.textContent,
+        color: cs.color,
+        fontSize: cs.fontSize,
+        x: Math.round(r.x), y: Math.round(r.y),
+        w: Math.round(r.width), h: Math.round(r.height)
+      };
+    });
+  });
+  console.log('TITLEBAR_BTNS:', JSON.stringify(btnInfo, null, 2));
+  await app.close();
+});