fix(ux): 标签栏开关按钮图标可见性——▭/▯(12px细矩形肉眼不可见)改为 ☰/–(14px三横线+短横), 用户反馈漏看此按钮; 删除临时截图测试
This commit is contained in:
@@ -19,7 +19,7 @@ export function TitleBar({ onToggleView, view, onSettings, onAppearance, onToggl
|
|||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 2, padding: '0 6px', ...noDrag }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 2, padding: '0 6px', ...noDrag }}>
|
||||||
<button title={"刷新"} onClick={() => loadTree()} style={btn}>↻</button>
|
<button title={"刷新"} onClick={() => loadTree()} style={btn}>↻</button>
|
||||||
<button title={"切换 编辑器/图谱"} onClick={onToggleView} style={btn}>{view === 'editor' ? '🕸' : '✎'}</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={onToggleMinimal} style={btn}>{minimal ? '⛶' : '⊡'}</button>
|
||||||
<button title={"设置"} onClick={onSettings} style={btn}>⚙</button>
|
<button title={"设置"} onClick={onSettings} style={btn}>⚙</button>
|
||||||
<span style={{ width: 1, background: 'var(--control-border)', height: 16, margin: '0 4px' }} />
|
<span style={{ width: 1, background: 'var(--control-border)', height: 16, margin: '0 4px' }} />
|
||||||
|
|||||||
@@ -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();
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user