ChaiHao/BPOS-MVP
Archived
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

拆掉画布的灰壳 —— 白图纸自己就是那张卡,一行一层

Browse Source 
用户点破:右侧流程图看着是「两个层叠风格」—— 因为 .g-canvas 自己是一张灰卡
(#e9edf2 底 + 边框 + 14px 圆角),里面再垫白图纸;而左侧版本卡是单层白纸。
同一行两种叠法,像两套风格摞着。

拆掉灰壳:.g-canvas 只做布局(透明、无框),白图纸(process-doc)flex 撑满列高,
自己就是那张卡 —— 与版本卡同纸同影同角。实测:壳背景 transparent、边框 none,
白纸与版本卡顶对齐(256=256)、等高(572=572)。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
This commit is contained in:
ChaiHao
2026-07-28 15:11:44 +08:00
co-authored by Claude Opus 5
parent 28adab83b0
commit fd5ff1606f
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/styles/console.css
+9 -3
View File
@@ -329,10 +329,16 @@
/* ============ 编排工作区：左 2/3 画布（整图不裁切）+ 右 1/3 属性栏 ============ */ /* ============ 编排工作区：左 2/3 画布（整图不裁切）+ 右 1/3 属性栏 ============ */
.g-orch { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: start; } .g-orch { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.g-canvas { border: 1px solid var(--cline); border-radius: 14px; overflow: hidden; background: #e9edf2; } /*
* 画布不再自带灰框。从前 .g-canvas 是一张灰卡(#e9edf2 底 + 边框 + 14px 圆角),
* 里面再垫白图纸 —— 右边「灰框套白纸」两层,左边版本卡单层白纸,同一行两种叠法,
* 看着像两套风格摞在一起(用户点破)。拆掉灰壳:**白图纸自己就是那张卡**,
* 与左侧版本卡同纸同影同角,一行一层。
*/
.g-canvas { display: flex; flex-direction: column; min-height: 0; }
/* 图自身按 aspect-ratio 缩放，整张一定看得全——纸面不再限高、不再内部滚动 */ /* 图自身按 aspect-ratio 缩放，整张一定看得全——纸面不再限高、不再内部滚动 */
.g-canvas .process-desk { height: auto; max-height: none; overflow: visible; padding: 12px 10px 16px; background: transparent; } .g-canvas .process-desk { flex: 1; min-height: 0; height: auto; max-height: none; overflow: visible; padding: 0; background: transparent; display: flex; flex-direction: column; }
.g-canvas .process-doc { max-width: none; padding: 14px 18px 18px; border-radius: 10px; box-shadow: var(--cshadow); } .g-canvas .process-doc { flex: 1; min-height: 0; box-sizing: border-box; max-width: none; padding: 14px 18px 18px; border-radius: 10px; box-shadow: var(--cshadow); }
/* 画布上的选中态（外挂类，_flow 复刻件未改）：命中层描边 = 选中框 */ /* 画布上的选中态（外挂类，_flow 复刻件未改）：命中层描边 = 选中框 */
.g-canvas .flow-node-sel .djs-hit { fill: rgba(51, 112, 255, .09) !important; stroke: #3370ff !important; stroke-width: 2.5px !important; stroke-opacity: 1 !important; rx: 7px; ry: 7px; } .g-canvas .flow-node-sel .djs-hit { fill: rgba(51, 112, 255, .09) !important; stroke: #3370ff !important; stroke-width: 2.5px !important; stroke-opacity: 1 !important; rx: 7px; ry: 7px; }