Selaa lähdekoodia

style(cockpit): round corners on all remaining bordered boxes

维护者要求直角框全部改圆角:为 12 个组件的 33 处带边框规则统一加
border-radius: calc(8 * var(--u, 1px))(与 KPI 卡/tab 既有档一致)。
刻意排除三类:切角造型(.cockpit-panel 四角 L 形、clip-path chip)、
全屏贴边画布(.map-canvas、.cockpit-shell__scope 全宽筛选条)。
并行会话脏文件(CockpitShell/EventListPane/PanelBlocks)基于 HEAD
精确构造 blob 暂存,未混入其 WIP。
ChenJZ 3 päivää sitten
vanhempi
commit
2598d48ae1

+ 4 - 0
src/modules/cockpit/CockpitShell.vue

@@ -2495,6 +2495,7 @@ const mapDataSourceCredits = computed(() => getDataSourceCredits())
     overflow-x: hidden;
     padding: calc(9 * var(--u));
     border: 1px solid rgba(1, 171, 234, 0.42);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(1, 5, 20, 0.96);
     box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(130, 230, 255, 0.1);
 }
@@ -2761,6 +2762,7 @@ const mapDataSourceCredits = computed(() => getDataSourceCredits())
     /* 允许被画布边缘裁切:不因此整体消失(规格 R-2)。 */
     overflow: hidden;
     border: 1px solid var(--panel-line-hi, #01abea);
+    border-radius: calc(8 * var(--u, 1px));
     /* 2026-10-23:背景与磨砂归**内层卡片**(.point-detail)单层持有 ——
        外层再叠一份渐变会双层相加(有效不透明度 ≈0.96),比两侧面板实得多;
        去掉后锚定/固定两态与两侧面板完全同款(半透明 token 背景 + 16px 磨砂)。 */
@@ -2790,6 +2792,7 @@ const mapDataSourceCredits = computed(() => getDataSourceCredits())
 .cockpit-shell__anchor-status button {
     padding: 0 calc(4 * var(--u));
     border: 1px solid rgba(255, 176, 32, 0.5);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(0, 20, 72, 0.6);
     color: inherit;
     font: inherit;
@@ -2812,6 +2815,7 @@ const mapDataSourceCredits = computed(() => getDataSourceCredits())
     overflow-y: auto;
     overflow-x: hidden;
     border: 1px solid var(--cyan);
+    border-radius: calc(8 * var(--u, 1px));
     background: linear-gradient(var(--panel-top), var(--panel-bot)), var(--bg-0);
     box-shadow: var(--shadow);
 }

+ 6 - 0
src/modules/cockpit/components/EquipmentDetailSections.vue

@@ -501,6 +501,7 @@ function isPlaceholder(text) {
     gap: calc(3 * var(--u, 1px));
     padding: calc(2 * var(--u, 1px)) calc(9 * var(--u, 1px));
     border: 1px solid rgba(1, 171, 234, 0.32);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(0, 20, 72, 0.6);
     color: var(--text-2);
     font: inherit;
@@ -544,6 +545,7 @@ function isPlaceholder(text) {
     gap: calc(3 * var(--u, 1px));
     padding: calc(5 * var(--u, 1px)) var(--space-2, 8px);
     border: 1px solid rgba(1, 171, 234, 0.24);
+    border-radius: calc(8 * var(--u, 1px));
     background: var(--inset, rgba(2, 10, 20, 0.55));
 }
 
@@ -638,6 +640,7 @@ function isPlaceholder(text) {
     gap: calc(3 * var(--u, 1px));
     padding: 1px calc(7 * var(--u, 1px));
     border: 1px solid rgba(1, 171, 234, 0.32);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(0, 20, 72, 0.6);
     color: var(--text-2);
     font: inherit;
@@ -684,6 +687,7 @@ function isPlaceholder(text) {
     padding: calc(1 * var(--u, 1px)) calc(3 * var(--u, 1px));
     margin: calc(-1 * var(--u, 1px)) calc(-3 * var(--u, 1px)) 0;
     border: 1px solid transparent;
+    border-radius: calc(8 * var(--u, 1px));
 }
 
 .equipment-section__item-head::-webkit-details-marker {
@@ -774,6 +778,7 @@ function isPlaceholder(text) {
     max-height: calc(140 * var(--u, 1px));
     object-fit: cover;
     border: 1px solid rgba(1, 171, 234, 0.35);
+    border-radius: calc(8 * var(--u, 1px));
 }
 
 .equipment-section__hint,
@@ -809,6 +814,7 @@ function isPlaceholder(text) {
     max-height: 90vh;
     padding: 16px;
     border: 1px solid var(--cyan);
+    border-radius: calc(8 * var(--u, 1px));
     background: var(--bg-0);
     color: var(--text);
 }

+ 2 - 0
src/modules/cockpit/components/EventDetailCard.vue

@@ -123,6 +123,7 @@ const locateIsFailure = computed(() => (locate.value || {}).result !== LOCATE_RE
     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));
     padding: calc(5 * var(--u, 1px)) calc(6 * var(--u, 1px));
 }
@@ -144,6 +145,7 @@ const locateIsFailure = computed(() => (locate.value || {}).result !== LOCATE_RE
 .event-detail__locate {
     padding: calc(1 * var(--u, 1px)) calc(8 * var(--u, 1px));
     border: 1px solid rgba(1, 171, 234, 0.42);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(0, 20, 72, 0.6);
     color: var(--text-2);
     font: inherit;

+ 1 - 0
src/modules/cockpit/components/EventListPane.vue

@@ -172,6 +172,7 @@ function setMode(next) {
 .event-list-pane__switch-btn {
     padding: calc(1 * var(--u, 1px)) calc(10 * var(--u, 1px));
     border: 1px solid rgba(1, 171, 234, 0.32);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(0, 20, 72, 0.6);
     color: var(--text-2);
     font: inherit;

+ 3 - 0
src/modules/cockpit/components/MapCoordinateBlocked.vue

@@ -99,6 +99,7 @@ const blockedCount = computed(() => (props.overview && props.overview.loaded ? p
     overflow: hidden auto;
     padding: calc(4 * var(--u, 1px)) calc(8 * var(--u, 1px));
     border: 1px solid rgba(1, 171, 234, 0.28);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(2, 9, 27, 0.72);
     color: var(--text-2, #88b7e8);
     font-size: var(--fs-caption, 11.5px);
@@ -151,12 +152,14 @@ const blockedCount = computed(() => (props.overview && props.overview.loaded ? p
     color: var(--lv2, #ffb020);
     font-family: var(--num, monospace);
     border: 1px solid rgba(255, 176, 32, 0.5);
+    border-radius: calc(8 * var(--u, 1px));
 }
 
 .map-blocked__toggle {
     margin-left: auto;
     padding: calc(1 * var(--u, 1px)) calc(5 * var(--u, 1px));
     border: 1px solid rgba(1, 171, 234, 0.32);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(0, 20, 72, 0.6);
     color: var(--text-2);
     font: inherit;

+ 2 - 0
src/modules/cockpit/components/PagerNav.vue

@@ -116,6 +116,7 @@ function jump() {
 .pager-nav__btn {
     padding: 1px calc(8 * var(--u, 1px));
     border: 1px solid rgba(1, 171, 234, 0.42);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(0, 20, 72, 0.6);
     color: var(--text-2);
     font: inherit;
@@ -157,6 +158,7 @@ function jump() {
     width: calc(52 * var(--u, 1px));
     padding: 1px calc(5 * var(--u, 1px));
     border: 1px solid rgba(1, 171, 234, 0.42);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(0, 20, 72, 0.6);
     color: var(--text, #d7ecff);
     font-family: var(--num, monospace);

+ 3 - 0
src/modules/cockpit/components/PanelBlocks.vue

@@ -1936,6 +1936,7 @@ onBeforeUnmount(() => {
     justify-self: start;
     padding: 1px var(--space-2, 8px);
     border: 1px solid rgba(1, 171, 234, 0.4);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(2, 9, 27, 0.6);
     color: var(--text-2, #88b7e8);
     font: inherit;
@@ -1953,6 +1954,7 @@ onBeforeUnmount(() => {
 .panel-locate {
     padding: 1px var(--space-2, 8px);
     border: 1px solid rgba(1, 171, 234, 0.45);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(2, 9, 27, 0.6);
     color: var(--cyan, #01abea);
     font: inherit;
@@ -2110,6 +2112,7 @@ onBeforeUnmount(() => {
     gap: calc(5 * var(--u, 1px));
     padding: calc(3 * var(--u, 1px)) var(--space-2, 8px);
     border: 1px solid var(--tip-color, var(--cyan, #01abea));
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(2, 10, 24, 0.92);
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 8px color-mix(in srgb, var(--tip-color, #01abea) 55%, transparent);
     transform: translate(-50%, calc(-100% - 6px));

+ 8 - 4
src/modules/cockpit/components/PipeEnhancement.vue

@@ -207,23 +207,27 @@ onBeforeUnmount(() => {
     font-size: 12px;
 }
 .pipe-enhancement__device-detail header { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
-.pipe-enhancement__device-detail button { color: #e4f4ff; background: #08213a; border: 1px solid #21618a; padding: 5px 8px; cursor: pointer; }
+.pipe-enhancement__device-detail button { color: #e4f4ff; background: #08213a; border: 1px solid #21618a; padding: 5px 8px; cursor: pointer;
+    border-radius: calc(8 * var(--u, 1px));}
 .pipe-enhancement__device-detail :deep(.equipment-sections) { max-height: 60vh; overflow: auto; }
 .pipe-enhancement__pager { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; font-size: 11px; color: #a7c4d9; }
 .pipe-enhancement__pager button { padding: 3px 8px; }
 .pipe-enhancement__pager button:disabled { opacity: .4; cursor: default; }
-.pipe-enhancement__pipe { padding: 3px 5px; border: 1px solid #226286; background: #072039; color: #d9f7ff; cursor: pointer; text-align: left; }
+.pipe-enhancement__pipe { padding: 3px 5px; border: 1px solid #226286; background: #072039; color: #d9f7ff; cursor: pointer; text-align: left;
+    border-radius: calc(8 * var(--u, 1px));}
 .pipe-enhancement__pipe[aria-pressed="true"] { border-color: #d8fbff; box-shadow: inset 0 0 4px #38bac9; }
 .pipe-enhancement__dimensions { display: block; margin-top: 4px; color: #a7c4d9; }
 .pipe-enhancement__devices h3 { margin: 0 0 8px; }
-.pipe-enhancement__devices button { color: #e4f4ff; background: #08213a; border: 1px solid #21618a; padding: 7px; cursor: pointer; }
+.pipe-enhancement__devices button { color: #e4f4ff; background: #08213a; border: 1px solid #21618a; padding: 7px; cursor: pointer;
+    border-radius: calc(8 * var(--u, 1px));}
 .pipe-enhancement__device { display: block; width: 100%; margin-bottom: 6px; text-align: left; }
 .pipe-enhancement__device small { display: block; color: #a7c4d9; margin-top: 4px; }
 .pipe-enhancement__devices section { margin-top: 12px; }
 .pipe-enhancement__devices header { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
 .pipe-enhancement__scope { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: #a7c4d9; font-size: 12px; }
 .pipe-enhancement__scope select { margin-left: 8px; padding: 5px 10px; border: 1px solid #168bff; border-radius: 4px; background: #031226; color: #e4f4ff; }
-.pipe-enhancement__viewport { min-height: 0; overflow: hidden; border: 1px solid rgba(1, 171, 234, .24); background: #031226; outline: none; touch-action: none; }
+.pipe-enhancement__viewport { min-height: 0; overflow: hidden; border: 1px solid rgba(1, 171, 234, .24); background: #031226; outline: none; touch-action: none;
+    border-radius: calc(8 * var(--u, 1px));}
 .pipe-enhancement__viewport[data-scene-focused] { border-color: var(--cyan, #01abea); box-shadow: inset 0 0 0 1px var(--cyan, #01abea); }
 .pipe-enhancement__viewport :deep(canvas) { display: block; width: 100%; height: 100%; }
 .pipe-enhancement__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; margin: 0; font-size: 14px; }

+ 5 - 0
src/modules/cockpit/components/PointDetailCard.vue

@@ -569,6 +569,7 @@ const aggregateDown = computed(() => aggregateUnavailable(sections.value.equipme
     min-height: 0;
     overflow: hidden;
     border: 1px solid var(--panel-line, rgba(1, 171, 234, 0.35));
+    border-radius: calc(8 * var(--u, 1px));
     /* 2026-10-23 维护者要求:点位摘要/设备详情与两侧面板**同款三停渐变**
        (top 0.8 → mid 0.5 @26% → bot 0.82,与 CockpitPanel 逐值一致,磨砂 16px 同值)。
        此前先后试过纯渐变(偏实)与 mid 单值(无层次),定稿为两侧同款渐变。 */
@@ -627,6 +628,7 @@ const aggregateDown = computed(() => aggregateUnavailable(sections.value.equipme
     flex: none;
     padding: 1px var(--space-2, 8px);
     border: 1px solid rgba(1, 171, 234, 0.42);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(0, 20, 72, 0.6);
     color: var(--text-2);
     font: inherit;
@@ -674,6 +676,7 @@ const aggregateDown = computed(() => aggregateUnavailable(sections.value.equipme
     margin-top: calc(5 * var(--u, 1px));
     padding: calc(4 * var(--u, 1px)) var(--space-2, 8px);
     border: 1px solid rgba(1, 171, 234, 0.24);
+    border-radius: calc(8 * var(--u, 1px));
     background: var(--inset, rgba(2, 10, 20, 0.55));
 }
 
@@ -697,6 +700,7 @@ const aggregateDown = computed(() => aggregateUnavailable(sections.value.equipme
     gap: 1px;
     padding: calc(3 * var(--u, 1px)) calc(2 * var(--u, 1px));
     border: 1px solid rgba(1, 171, 234, 0.2);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(0, 20, 72, 0.4);
 }
 
@@ -778,6 +782,7 @@ const aggregateDown = computed(() => aggregateUnavailable(sections.value.equipme
     gap: calc(3 * var(--u, 1px));
     padding: calc(6 * var(--u, 1px)) var(--space-2, 8px);
     border: 1px solid rgba(1, 171, 234, 0.35);
+    border-radius: calc(8 * var(--u, 1px));
     background: linear-gradient(180deg, rgba(0, 31, 92, 0.5), rgba(0, 15, 52, 0.7));
     font: inherit;
     text-align: left;

+ 1 - 0
src/modules/cockpit/components/SectionStateTag.vue

@@ -100,6 +100,7 @@ const tooltip = computed(() => [props.label, view.value.label, view.value.detail
     max-width: 240px;
     padding: 6px 8px;
     border: 1px solid currentcolor;
+    border-radius: calc(8 * var(--u, 1px));
     background: var(--bg-0, #010514);
     color: var(--text, #d7ecff);
     font-size: var(--fs-caption, 11.5px);

+ 1 - 0
src/modules/cockpit/components/WarningResponsePane.vue

@@ -180,6 +180,7 @@ function closeWorkOrder() {
 .warning-response-pane__control {
     padding: calc(1 * var(--u, 1px)) calc(8 * var(--u, 1px));
     border: 1px solid rgba(1, 171, 234, 0.32);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(0, 20, 72, 0.6);
     color: var(--text-2);
     font: inherit;

+ 1 - 0
src/modules/cockpit/components/WorkOrderTimeline.vue

@@ -122,6 +122,7 @@ const nodes = computed(() => pathView(props.track))
     gap: 3px;
     padding: 1px 5px;
     border: 1px solid rgba(1, 171, 234, 0.2);
+    border-radius: calc(8 * var(--u, 1px));
     background: rgba(2, 9, 27, 0.45);
     color: var(--muted, #5680b0);
     font-size: var(--fs-caption, 10.5px);