fix: 图谱/思维导图高度塌陷导致不显示

真正根因: GraphView 容器有 flex:1(在行布局中)但不是 display:flex,
   子组件 MindmapTree/LinkGraph 的 flex:1 被忽略 → 高度 auto = 0
   (子内容全是绝对定位,无在流内容) → SVG 高度 0 → fit() 计算 NaN
   持续报 translate(NaN,NaN) 错误,内容不可见

   之前 E2E 只数 DOM 元素数量不检查可见性,掩盖了此 bug

修复: GraphView 容器加 display:flex + flexDirection:column,
   子组件 flex:1 正常生效,容器高度正确,内容可见

附带:
- 主进程转发渲染进程 console 到终端(便于 dev 调试)
- graph-render E2E 测试改为检查可见性(getBoundingClientRect)
- 修复 TabBar 关闭全部测试的 flaky 断言(expect.poll 自动重试)
This commit is contained in:
hunter-dev
2026-08-27 17:22:49 +08:00
parent 96f5c72fa7
commit e20fcab837
4 changed files with 45 additions and 25 deletions
@@ -124,7 +124,7 @@ function tabBtn(active: boolean): React.CSSProperties {
export function GraphView({ onSwitchToEditor }: { onSwitchToEditor?: () => void }) {
const [mode, setMode] = useState<'mindmap' | 'graph'>('mindmap');
return (
<div style={{ flex: 1, position: 'relative', overflow: 'hidden', background: 'var(--bg-secondary)' }}>
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden', background: 'var(--bg-secondary)' }}>
<div style={{ position: 'absolute', top: 8, left: 8, zIndex: 10, display: 'flex', gap: 4 }}>
<button style={tabBtn(mode === 'mindmap')} onClick={() => setMode('mindmap')}>思维导图</button>
<button style={tabBtn(mode === 'graph')} onClick={() => setMode('graph')}>知识图谱</button>