فهرست منبع

fix(cockpit): 事件详情面板改用与两侧面板同源的半透明磨砂背景

此前 .cockpit-shell__event-detail 是不透明 linear-gradient(--panel-top, --panel-bot), var(--bg-0),
内层 .event-detail 再叠一份深色渐变(无 blur),两层相加比其它面板实得多。

- 外壳改为三停 token(--panel-top 0% / --panel-mid 26% / --panel-bot 100%)+
  backdrop-filter: blur(16px) saturate(115%),与 CockpitPanel 逐值一致,边框改用 --panel-line;
- 内层卡片去背景去边框(透明),背景与磨砂只由外壳单层持有,避免双层叠加。

闸门 t69-current-warning 17/17、变异 12/12;回归 t65-card-interactions 22/22。
按 AGENTS.md 未跑 build/dev/browser。
ChenJZ 12 ساعت پیش
والد
کامیت
d5bdffd67c
2فایلهای تغییر یافته به همراه20 افزوده شده و 5 حذف شده
  1. 13 2
      src/modules/cockpit/CockpitShell.vue
  2. 7 3
      src/modules/cockpit/components/EventDetailCard.vue

+ 13 - 2
src/modules/cockpit/CockpitShell.vue

@@ -3140,9 +3140,20 @@ const mapDataSourceCredits = computed(() => getDataSourceCredits())
     max-height: calc(100% - 48px);
     overflow-y: auto;
     overflow-x: hidden;
-    border: 1px solid var(--cyan);
+    border: 1px solid var(--panel-line, rgba(1, 171, 234, 0.35));
     border-radius: calc(8 * var(--u, 1px));
-    background: linear-gradient(var(--panel-top), var(--panel-bot)), var(--bg-0);
+    /* 票 69:与两侧面板同一套「半透明三停 + 磨砂」语言,逐值同源(token + 16px 同值)。
+       此前这里是不透明 `linear-gradient(--panel-top, --panel-bot), var(--bg-0)`,再叠内层卡片自己的
+       深色渐变 —— 两层相加后比两侧面板实得多,就是「CockpitPanel 一句话、事件详情另一样」的来源。
+       背景与磨砂**只在这一层持有**,内层卡片(EventDetailCard)必须保持透明,否则又变双层。 */
+    background: linear-gradient(
+        180deg,
+        var(--panel-top, rgba(2, 9, 27, 0.28)) 0%,
+        var(--panel-mid, rgba(0, 53, 156, 0.2)) 26%,
+        var(--panel-bot, rgba(0, 15, 52, 0.38)) 100%
+    );
+    backdrop-filter: blur(16px) saturate(115%);
+    -webkit-backdrop-filter: blur(16px) saturate(115%);
     box-shadow: var(--shadow);
 }
 </style>

+ 7 - 3
src/modules/cockpit/components/EventDetailCard.vue

@@ -95,13 +95,17 @@ const locateIsFailure = computed(() => (locate.value || {}).result !== LOCATE_RE
 </script>
 
 <style scoped>
+/*
+   票 69:本卡片**不再自带背景/边框** —— 半透明三停 + 磨砂 16px 由外壳的
+   `.cockpit-shell__event-detail` 单层持有(与 CockpitPanel / PointDetailCard 同一组 token、同一值)。
+   这里再画一份渐变就是 PointDetailCard 踩过的「双层叠加导致更实」(有效不透明度 ≈0.96)。
+*/
 .event-detail {
     display: grid;
     gap: calc(4 * var(--u, 1px));
     min-height: 0;
-    border: 1px solid rgba(1, 171, 234, 0.45);
-    border-radius: calc(8 * var(--u, 1px));
-    background: linear-gradient(180deg, rgba(0, 31, 92, 0.72), rgba(0, 15, 52, 0.92));
+    background: transparent;
+    border: 0;
     padding: calc(5 * var(--u, 1px)) calc(6 * var(--u, 1px));
 }