OmniAI/omniai-web
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: 视频流程树节点放大并修复分支线与节点的对齐错位

Browse Source 
将 branch-tap 改为 flex:1 布局自动对齐行中心，
放大节点尺寸和间距使流程图在画布中更易阅读。

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Stringadmin
2026-06-03 23:33:06 +08:00
parent 7e631cfa1b
commit bf401e4ab0
1 changed files with 39 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/pages/ecommerce-video.css
+39 -29
View File
@@ -179,9 +179,9 @@
min-height: 0; min-height: 0;
overflow: auto; overflow: auto;
background: #101318; background: #101318;
padding: 26px; padding: 32px 40px;
display: flex; display: flex;
align-items: center; align-items: stretch;
justify-content: center; justify-content: center;
} }
@@ -735,10 +735,10 @@
.ecom-video-tree { .ecom-video-tree {
display: flex; display: flex;
align-items: center; align-items: stretch;
gap: 0; gap: 0;
width: 100%; width: 100%;
min-height: 0; min-height: 100%;
} }
/* ── Source node ── */ /* ── Source node ── */
@@ -746,9 +746,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
gap: 10px; gap: 10px;
flex-shrink: 0; flex-shrink: 0;
align-self: center;
} }
.ecom-video-tree-node { .ecom-video-tree-node {
@@ -762,8 +762,8 @@
} }
.ecom-video-tree-node--source { .ecom-video-tree-node--source {
width: 150px; width: 180px;
height: 190px; height: 230px;
flex-shrink: 0; flex-shrink: 0;
border-color: #1c4d3a; border-color: #1c4d3a;
background: #162820; background: #162820;
@@ -785,9 +785,9 @@
/* ── Text node (分镜文本) ── */ /* ── Text node (分镜文本) ── */
.ecom-video-tree-node--text { .ecom-video-tree-node--text {
min-width: 120px; min-width: 140px;
max-width: 150px; max-width: 170px;
padding: 14px 12px; padding: 16px 14px;
cursor: default; cursor: default;
border-color: #2a3d30; border-color: #2a3d30;
background: #131d1a; background: #131d1a;
@@ -824,8 +824,8 @@
/* ── Image node (分镜图) ── */ /* ── Image node (分镜图) ── */
.ecom-video-tree-node--image, .ecom-video-tree-node--image,
.ecom-video-tree-node--video { .ecom-video-tree-node--video {
width: 150px; width: 170px;
height: 120px; height: 136px;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -919,7 +919,7 @@
/* ── Trunk connector (分支连接线) ── */ /* ── Trunk connector (分支连接线) ── */
.ecom-video-tree__trunk { .ecom-video-tree__trunk {
position: relative; position: relative;
width: 48px; width: 56px;
flex-shrink: 0; flex-shrink: 0;
align-self: stretch; align-self: stretch;
} }
@@ -928,7 +928,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 50%; top: 50%;
width: 24px; width: 28px;
height: 2px; height: 2px;
background: #3a4550; background: #3a4550;
transform: translateY(-50%); transform: translateY(-50%);
@@ -948,10 +948,15 @@
.ecom-video-tree__branches-line { .ecom-video-tree__branches-line {
position: absolute; position: absolute;
left: 24px; left: 28px;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 24px; width: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
padding: 0;
} }
.ecom-video-tree__branches-line::before { .ecom-video-tree__branches-line::before {
@@ -965,24 +970,28 @@
} }
.ecom-video-tree__branch-tap { .ecom-video-tree__branch-tap {
position: absolute; position: relative;
left: 0; flex: 1;
display: flex;
align-items: center;
}
.ecom-video-tree__branch-tap::before {
content: "";
display: block;
width: 100%; width: 100%;
height: 2px; height: 2px;
background: #3a4550; background: #3a4550;
} }
.ecom-video-tree__branch-tap:nth-child(1) { top: 0; }
.ecom-video-tree__branch-tap:nth-child(2) { top: 50%; transform: translateY(-50%); }
.ecom-video-tree__branch-tap:nth-child(3) { bottom: 0; }
.ecom-video-tree__branch-tap::after { .ecom-video-tree__branch-tap::after {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 50%;
transform: translateY(-50%);
width: 100%; width: 100%;
height: 100%; height: 2px;
background: linear-gradient(90deg, transparent, #00ff88, transparent); background: linear-gradient(90deg, transparent, #00ff88, transparent);
animation: ecom-tree-branch-flow 2.4s ease-in-out infinite; animation: ecom-tree-branch-flow 2.4s ease-in-out infinite;
} }
@@ -1016,18 +1025,19 @@
.ecom-video-tree__rows { .ecom-video-tree__rows {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; gap: 0;
gap: 20px;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
align-self: center; align-self: stretch;
padding: 8px 0; padding: 0;
} }
.ecom-video-tree__row { .ecom-video-tree__row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; justify-content: flex-start;
flex: 1;
gap: 12px;
animation: ecom-tree-row-in 480ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both; animation: ecom-tree-row-in 480ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
} }