fix: 大屏左右业务栏固定为 350px

避免随视口百分比缩放导致侧栏过宽或过窄，保持布局稳定。

Co-authored-by: Cursor <cursoragent@cursor.com>

web/src/components/scene/SceneViewport.vue

@@ -924,7 +924,7 @@ onBeforeUnmount(() => {
   position: absolute;
   position: absolute;
   z-index: 8;
   z-index: 8;
   /* 贴在右侧业务面板内侧，对应原 screen-nav--side 占位 */
   /* 贴在右侧业务面板内侧，对应原 screen-nav--side 占位 */
-  right: calc(var(--screen-side-w, 24vw) + 16px);
+  right: calc(var(--screen-side-w, 350px) + 16px);
   top: 50%;
   top: 50%;
   transform: translateY(-50%);
   transform: translateY(-50%);
   display: flex;
   display: flex;
@@ -981,7 +981,7 @@ onBeforeUnmount(() => {
   flex-direction: row;
   flex-direction: row;
   align-items: center;
   align-items: center;
   gap: 4px;
   gap: 4px;
-  max-width: calc(100vw - 2 * var(--screen-side-w, clamp(280px, 24vw, 480px)) - 36px);
+  max-width: calc(100vw - 2 * var(--screen-side-w, 350px) - 36px);
   overflow-x: auto;
   overflow-x: auto;
   pointer-events: auto;
   pointer-events: auto;
 }
 }

web/src/composables/useStageScale.ts

@@ -17,9 +17,8 @@ export function useStageScale() {
 
 
   function fit() {
   function fit() {
     const w = window.innerWidth
     const w = window.innerWidth
-    // 窄屏收窄侧栏，宽屏不超过 480
-    const side = Math.round(Math.min(480, Math.max(280, w * 0.24)))
-    document.documentElement.style.setProperty('--screen-side-w', `${side}px`)
+    // 左右面板固定 350px
+    document.documentElement.style.setProperty('--screen-side-w', '350px')
     document.documentElement.style.setProperty('--screen-vw', `${w}px`)
     document.documentElement.style.setProperty('--screen-vw', `${w}px`)
     document.documentElement.style.setProperty('--screen-vh', `${window.innerHeight}px`)
     document.documentElement.style.setProperty('--screen-vh', `${window.innerHeight}px`)
   }
   }

web/src/layouts/ScreenLayout.vue

@@ -233,7 +233,7 @@ function goAdmin() {
   left: 0;
   left: 0;
   top: 0;
   top: 0;
   bottom: 0;
   bottom: 0;
-  width: calc(var(--screen-side-w, 24vw) + 40px);
+  width: calc(var(--screen-side-w, 350px) + 40px);
   background: linear-gradient(
   background: linear-gradient(
     90deg,
     90deg,
     rgba(0, 8, 22, 0.82) 0%,
     rgba(0, 8, 22, 0.82) 0%,
@@ -245,7 +245,7 @@ function goAdmin() {
   right: 0;
   right: 0;
   top: 0;
   top: 0;
   bottom: 0;
   bottom: 0;
-  width: calc(var(--screen-side-w, 24vw) + 40px);
+  width: calc(var(--screen-side-w, 350px) + 40px);
   background: linear-gradient(
   background: linear-gradient(
     270deg,
     270deg,
     rgba(0, 8, 22, 0.82) 0%,
     rgba(0, 8, 22, 0.82) 0%,
@@ -286,7 +286,7 @@ function goAdmin() {
   /* 避开顶栏 + 中间翻牌器；贴在右侧面板内侧 */
   /* 避开顶栏 + 中间翻牌器；贴在右侧面板内侧 */
   top: clamp(200px, 26vh, 280px);
   top: clamp(200px, 26vh, 280px);
   bottom: clamp(56px, 8vh, 88px);
   bottom: clamp(56px, 8vh, 88px);
-  right: calc(var(--screen-side-w, 24vw) + 28px);
+  right: calc(var(--screen-side-w, 350px) + 28px);
   width: clamp(88px, 6vw, 108px);
   width: clamp(88px, 6vw, 108px);
   height: auto !important;
   height: auto !important;
   flex: none !important;
   flex: none !important;

web/src/styles/screen.css

@@ -12,8 +12,8 @@
   background: #00060f;
   background: #00060f;
   color: var(--text);
   color: var(--text);
   font-family: var(--body-font);
   font-family: var(--body-font);
-  /* 左右业务栏宽度，随视口由 useStageScale 更新 */
-  --screen-side-w: clamp(280px, 24vw, 480px);
+  /* 左右业务栏宽度（固定 350px） */
+  --screen-side-w: 350px;
 }
 }
 .stage::before {
 .stage::before {
   content: none;
   content: none;

web/src/views/overview/OverviewView.vue

@@ -374,10 +374,7 @@ const energyDigits = computed(() => digits.value)
   height: 100%;
   height: 100%;
   min-height: 0;
   min-height: 0;
   display: grid;
   display: grid;
-  grid-template-columns: var(--screen-side-w, clamp(280px, 24vw, 480px)) minmax(0, 1fr) var(
-      --screen-side-w,
-      clamp(280px, 24vw, 480px)
-    );
+  grid-template-columns: var(--screen-side-w, 350px) minmax(0, 1fr) var(--screen-side-w, 350px);
   grid-template-rows: auto 1fr;
   grid-template-rows: auto 1fr;
   gap: 10px 12px;
   gap: 10px 12px;
   pointer-events: none;
   pointer-events: none;