azmat1127/yingqing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复基础资产缺三视图气泡裁切与样式

Browse Source 
悬停时放开预览卡 overflow，气泡改为白底暖橙警示色，避免被裁碎叠到邻卡。
This commit is contained in:
Azmat@qq.com
2026-09-04 18:52:53 +08:00
parent 75b1665f76
commit 587681aea4
2 changed files with 45 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/frontend/src/design-restraint.css
+19 -11
View File
@@ -2876,17 +2876,18 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
line-height: 1;
}
/* hover popover · V2.1 dark tooltip with arrow */
/* hover popover · 白底浅色 tip */
.tri-missing-pop {
position: absolute;
top: calc(100% + 9px);
left: 0;
width: 252px;
padding: 11px 13px 12px;
background: var(--accent-black);
color: var(--accent-white);
padding: 11px 13px 14px;
background: #fff;
color: var(--accent-black);
border: 1px solid rgba(34, 42, 54, 0.10);
border-radius: var(--r-md);
box-shadow: 0 8px 24px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.10);
box-shadow: 0 12px 28px rgba(20, 27, 38, 0.14), 0 2px 6px rgba(0,0,0,.06);
opacity: 0; visibility: hidden;
transform: translateY(-4px);
transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
@@ -2904,7 +2905,9 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
position: absolute;
top: -5px; left: 14px;
width: 10px; height: 10px;
background: var(--accent-black);
background: #fff;
border-left: 1px solid rgba(34, 42, 54, 0.10);
border-top: 1px solid rgba(34, 42, 54, 0.10);
transform: rotate(45deg);
border-radius: 2px;
}
@@ -2913,28 +2916,33 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .04em;
color: var(--heat);
/* 警示色,勿用 --heat(--heat 已绑克莱因蓝) */
color: #B45309;
margin-bottom: 6px;
}
.tri-missing-pop .pop-h svg { display: block; }
.tri-missing-pop .pop-body {
font-size: 12px;
line-height: 1.6;
color: rgba(255,255,255,.88);
color: var(--accent-black);
}
.tri-missing-pop .pop-tip {
display: block;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,.12);
border-top: 1px solid rgba(34, 42, 54, 0.08);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.55;
letter-spacing: .02em;
color: rgba(255,255,255,.78);
color: var(--black-alpha-56, rgba(34, 42, 54, 0.56));
}
.tri-missing-pop .pop-body b {
color: #B45309;
font-weight: 600;
}
.tri-missing-pop .pop-tip b {
color: var(--accent-white);
color: #B45309;
font-weight: 600;
letter-spacing: .03em;
}
core/frontend/src/pipeline-page.css
+26 -10
View File
@@ -765,6 +765,17 @@
background-repeat: no-repeat;
}
.as-preview-tri.ready { background-size: contain; }
.as-preview-main { z-index: 2; }
.as-preview-main:has(.tri-missing-badge:hover),
.as-preview-main:has(.tri-missing-badge:focus-within) {
overflow: visible;
z-index: 8;
}
.as-row:has(.tri-missing-badge:hover),
.as-row:has(.tri-missing-badge:focus-within) {
overflow: visible;
z-index: 7;
}
.as-preview.pending:not(.ready):not(.generating)::before,
.as-gen-preview.pending:not(.ready):not(.generating)::before {
content: "";
@@ -1499,16 +1510,21 @@
.asset-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.asset-card-actions .btn { display: inline-flex; align-items: center; }
/* ── 行39 · 缺三视图悬浮气泡 ── */
.tri-missing-badge { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: var(--surface); border: 1px solid rgba(180,83,9,.30); border-radius: var(--r-pill); color: #B45309; font-size: 12px; cursor: help; }
.tri-missing-badge .ico { width: 6px; height: 6px; border-radius: 50%; background: #B45309; }
.tri-missing-badge .lbl-mono { font-family: var(--font-mono); letter-spacing: .02em; }
.tri-missing-badge .tri-missing-pop { position: absolute; top: calc(100% + 8px); left: 0; width: 260px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0,0,0,.14); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base); z-index: 20; pointer-events: none; display: flex; flex-direction: column; gap: 6px; cursor: default; }
.tri-missing-badge:hover .tri-missing-pop, .tri-missing-badge:focus-visible .tri-missing-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.tri-missing-pop .pop-h { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: #B45309; }
.tri-missing-pop .pop-body { font-size: 12px; line-height: 1.55; color: var(--accent-black); }
.tri-missing-pop .pop-tip { font-size: 12px; line-height: 1.5; color: var(--black-alpha-56); }
.tri-missing-pop b { color: var(--heat); }
/* ── 行39 · 缺三视图:沿用 design-restraint 白底气泡;管道页只补定位与 overflow 放开 ── */
.as-preview .tri-missing-badge {
top: 10px;
left: 10px;
z-index: 4;
}
/* 气泡向右展开,避免盖住瓶身主视觉;悬停时父级已 overflow:visible */
.as-preview-main .tri-missing-badge .tri-missing-pop {
left: 0;
top: calc(100% + 9px);
width: 252px;
max-width: 252px;
padding: 11px 13px 14px;
z-index: 30;
}
/* ── 行39 · 三视图选择弹窗 ── */
.tri-modal { width: min(720px, 100%); }