宜博 / lemonboss

Commit 7c0990089a7671a287951171b2e066f6f16799e5

Authored by yibo
1 parent 0bbf3e4b

fix(console): 文件预览弹框背景透明看不清 

用错了变量：写的是 `background: var(--bg-surface, #fff)`，而 `--bg-surface`
不是「不透明表面」，它是 2% 的叠加色调（App.vue 里深色 rgba(255,255,255,0.02)、
浅色 rgba(0,0,0,0.02)）。于是弹框几乎全透，把身后 42% 的遮罩透了出来；
文字色 var(--text-primary) 又跟着主题走成近白色，叠起来就是一片看不清。
以为兜底的 #fff 永远轮不到 —— 变量确实存在，只是语义不是我以为的那个。

该看的是周围的约定：**整个控制台是硬编码浅色的**
（GraphConsole.vue:363 `.console { background:#fff; color:#1a1a1a }`，
NodeDetailPanel.vue 里 CSS 变量用了 0 次）。我的弹框是唯一读主题变量的组件，
所以只有它坏。改成与邻居一致的硬编码浅色，遮罩阴影 .18 → .28 让边界更清楚。

在运行中的实例上用真实产物核过（mycompany 的 brd.md）：白底、标题/表格/列表
渲染正常。871 全绿（纯样式改动，无逻辑变更）。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Inline Side-by-side
Showing 1 changed file with 13 additions and 6 deletions
web/src/components/graph-console/FilePreviewModal.vue
  View file @7c09900
@@ -171,15 +171,21 @@ watch(() =&gt; props.open, (isOpen) =&gt; { @@ -171,15 +171,21 @@ watch(() =&gt; props.open, (isOpen) =&gt; {
171 background: rgba(0, 0, 0, .42); 171 background: rgba(0, 0, 0, .42);
172 display: flex; align-items: center; justify-content: center; padding: 24px; 172 display: flex; align-items: center; justify-content: center; padding: 24px;
173 } 173 }
  174 +/* 底色/文字色**硬编码浅色**，与整个控制台一致（GraphConsole.vue 的
  175 + `.console { background:#fff; color:#1a1a1a }`，NodeDetailPanel 里 CSS 变量用了 0 次）。
  176 + 第一版写的是 var(--bg-surface, #fff) —— 那个变量不是「不透明表面」，
  177 + 它是 rgba(...,0.02) 的**叠加色调**（App.vue 里两套主题都是 2%），
  178 + 于是弹框背景几乎全透、把身后 42% 的遮罩透出来，文字还跟着主题走成近白色。
  179 + fallback #fff 永远轮不到（变量确实存在，只是语义不是我以为的那个）。 */
174 .modal { 180 .modal {
175 - background: var(--bg-surface, #fff); color: var(--text-primary, #1a1a1a);  
176 - border: 1px solid var(--border-primary, #e2e2e6); border-radius: 10px; 181 + background: #fff; color: #1a1a1a;
  182 + border: 1px solid #e2e2e6; border-radius: 10px;
177 width: min(900px, 100%); max-height: 84vh; display: flex; flex-direction: column; 183 width: min(900px, 100%); max-height: 84vh; display: flex; flex-direction: column;
178 - box-shadow: 0 12px 40px rgba(0, 0, 0, .18); 184 + box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
179 } 185 }
180 .head { 186 .head {
181 display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px; 187 display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px;
182 - border-bottom: 1px solid var(--border-primary, #eee); 188 + border-bottom: 1px solid #eee;
183 } 189 }
184 .titles { display: flex; align-items: center; gap: 8px; min-width: 0; } 190 .titles { display: flex; align-items: center; gap: 8px; min-width: 0; }
185 .name { font-size: 14px; word-break: break-all; } 191 .name { font-size: 14px; word-break: break-all; }
@@ -190,9 +196,10 @@ watch(() =&gt; props.open, (isOpen) =&gt; { @@ -190,9 +196,10 @@ watch(() =&gt; props.open, (isOpen) =&gt; {
190 .acts { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; } 196 .acts { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
191 .mini { 197 .mini {
192 font-size: 12px; padding: 3px 9px; cursor: pointer; 198 font-size: 12px; padding: 3px 9px; cursor: pointer;
193 - border: 1px solid var(--border-primary, #ddd); border-radius: 5px;  
194 - background: var(--bg-overlay, #fafafa); color: inherit; 199 + border: 1px solid #ddd; border-radius: 5px;
  200 + background: #fafafa; color: #1a1a1a;
195 } 201 }
  202 +.mini:hover:not(:disabled) { background: #f0f0f2; }
196 .mini:disabled { opacity: .5; cursor: not-allowed; } 203 .mini:disabled { opacity: .5; cursor: not-allowed; }
197 .mini.close { font-size: 13px; padding: 3px 8px; } 204 .mini.close { font-size: 13px; padding: 3px 8px; }
198 .fullpath { 205 .fullpath {