diff --git a/web/src/components/graph-console/FilePreviewModal.vue b/web/src/components/graph-console/FilePreviewModal.vue index acede3b..370b75d 100644 --- a/web/src/components/graph-console/FilePreviewModal.vue +++ b/web/src/components/graph-console/FilePreviewModal.vue @@ -171,15 +171,21 @@ watch(() => props.open, (isOpen) => { background: rgba(0, 0, 0, .42); display: flex; align-items: center; justify-content: center; padding: 24px; } +/* 底色/文字色**硬编码浅色**,与整个控制台一致(GraphConsole.vue 的 + `.console { background:#fff; color:#1a1a1a }`,NodeDetailPanel 里 CSS 变量用了 0 次)。 + 第一版写的是 var(--bg-surface, #fff) —— 那个变量不是「不透明表面」, + 它是 rgba(...,0.02) 的**叠加色调**(App.vue 里两套主题都是 2%), + 于是弹框背景几乎全透、把身后 42% 的遮罩透出来,文字还跟着主题走成近白色。 + fallback #fff 永远轮不到(变量确实存在,只是语义不是我以为的那个)。 */ .modal { - background: var(--bg-surface, #fff); color: var(--text-primary, #1a1a1a); - border: 1px solid var(--border-primary, #e2e2e6); border-radius: 10px; + background: #fff; color: #1a1a1a; + border: 1px solid #e2e2e6; border-radius: 10px; width: min(900px, 100%); max-height: 84vh; display: flex; flex-direction: column; - box-shadow: 0 12px 40px rgba(0, 0, 0, .18); + box-shadow: 0 12px 40px rgba(0, 0, 0, .28); } .head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px; - border-bottom: 1px solid var(--border-primary, #eee); + border-bottom: 1px solid #eee; } .titles { display: flex; align-items: center; gap: 8px; min-width: 0; } .name { font-size: 14px; word-break: break-all; } @@ -190,9 +196,10 @@ watch(() => props.open, (isOpen) => { .acts { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; } .mini { font-size: 12px; padding: 3px 9px; cursor: pointer; - border: 1px solid var(--border-primary, #ddd); border-radius: 5px; - background: var(--bg-overlay, #fafafa); color: inherit; + border: 1px solid #ddd; border-radius: 5px; + background: #fafafa; color: #1a1a1a; } +.mini:hover:not(:disabled) { background: #f0f0f2; } .mini:disabled { opacity: .5; cursor: not-allowed; } .mini.close { font-size: 13px; padding: 3px 8px; } .fullpath {