Commit 81629b7d7de9c0f598e9aca91e20d3440e85b7ce
1 parent
71d1305a
fix(console): org graph 那栏从死宽 320px 改成有下限、按比例分空间
真在浏览器上看了才发现的：320px 减去 padding 只剩 292px 可用，而两个节点 加一条边就要 380px+ —— 实际效果是节点名被从中间切断（`org-cod…`）、必须 横向滚才看得全。而它是**全局导航**，是这个页面上最不该被压的一栏。 同一时刻中间那栏（work graph）拿着 600px 却经常是空的：选中的 task 只要 还没跑过 work graph，那栏就是一句空态提示。 改成 `280px minmax(380px, 0.9fr) minmax(0, 1.1fr) 360px`：org graph 保底 380px，两张画布按 0.9 : 1.1 分剩余空间，屏幕越宽一起长。work graph 仍拿 多数 —— 它才是下钻之后的主画布。rail 态（≤1400px 最左栏收成图标条）同步。 改后实测：org-planner → org-coder 两个节点完整显示，边上的 prd 标签与回退 边的 0/3 熔断徽标都看得见，控制条从两行挤成一行。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Showing
1 changed file
with
8 additions
and
2 deletions
web/src/views/GraphConsole.vue
| @@ -617,7 +617,13 @@ function fmt(n) { return n == null ? '∞' : Number(n).toLocaleString(); } | @@ -617,7 +617,13 @@ function fmt(n) { return n == null ? '∞' : Number(n).toLocaleString(); } | ||
| 617 | 617 | ||
| 618 | /* 四栏（§七.1）。每一栏都显式指定 grid-column：抽屉态下最左栏是 absolute（脱离流）， | 618 | /* 四栏（§七.1）。每一栏都显式指定 grid-column：抽屉态下最左栏是 absolute（脱离流）， |
| 619 | 靠自动放置的话剩下三栏会整体左移一格、挤进那条 44px 的轨道里 */ | 619 | 靠自动放置的话剩下三栏会整体左移一格、挤进那条 44px 的轨道里 */ |
| 620 | -.cols { position:relative; flex:1; display:grid; grid-template-columns:280px 320px minmax(0, 1fr) 360px; min-height:0; } | 620 | +/* org graph 那栏原来是死的 320px，减去 padding 只剩 292px 可用 —— 而两个节点加一条边就要 |
| 621 | + 380px+，实际效果是节点名被从中间切断（`org-cod…`）、必须横向滚才看得全，而它是**全局导航**。 | ||
| 622 | + 同一时刻中间那栏（work graph）拿着 600px 却经常是空的（选中的 task 还没跑过 work graph）。 | ||
| 623 | + 改成「有下限、按比例分剩余空间」：org graph 保底 380px，两张画布按 0.9 : 1.1 分空间， | ||
| 624 | + 屏幕越宽两边一起长。work graph 仍拿多数，因为它才是下钻后的主画布。 */ | ||
| 625 | +.cols { position:relative; flex:1; display:grid; | ||
| 626 | + grid-template-columns:280px minmax(380px, 0.9fr) minmax(0, 1.1fr) 360px; min-height:0; } | ||
| 621 | .cols > .goals { grid-column:1; } | 627 | .cols > .goals { grid-column:1; } |
| 622 | .cols > .left { grid-column:2; } | 628 | .cols > .left { grid-column:2; } |
| 623 | .cols > .mid { grid-column:3; } | 629 | .cols > .mid { grid-column:3; } |
| @@ -628,7 +634,7 @@ function fmt(n) { return n == null ? '∞' : Number(n).toLocaleString(); } | @@ -628,7 +634,7 @@ function fmt(n) { return n == null ? '∞' : Number(n).toLocaleString(); } | ||
| 628 | .right { border-left:1px solid #eee; } | 634 | .right { border-left:1px solid #eee; } |
| 629 | 635 | ||
| 630 | /* ≤1400px：最左栏收成 44px 图标条（org graph 那栏最不能压，它是全局导航） */ | 636 | /* ≤1400px：最左栏收成 44px 图标条（org graph 那栏最不能压，它是全局导航） */ |
| 631 | -.cols.rail { grid-template-columns:44px 320px minmax(0, 1fr) 360px; } | 637 | +.cols.rail { grid-template-columns:44px minmax(380px, 0.9fr) minmax(0, 1.1fr) 360px; } |
| 632 | .goals.rail { padding:8px 4px; overflow:hidden; } | 638 | .goals.rail { padding:8px 4px; overflow:hidden; } |
| 633 | .goals.drawer-open { | 639 | .goals.drawer-open { |
| 634 | position:absolute; left:0; top:0; bottom:0; width:280px; z-index:30; | 640 | position:absolute; left:0; top:0; bottom:0; width:280px; z-index:30; |