fix(live): 管控区与预览横排断点、礼物条移至画面下方

Made-with: Cursor

admin/src/views/sites/LiveBroadcast.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="live-broadcast live-broadcast--split">
-    <div class="live-broadcast-main">
-      <el-card>
+  <div class="live-broadcast">
+    <el-card class="live-broadcast-card">
       <template #header>
         <span>官网视频直播（WebRTC）</span>
       </template>
@@ -71,40 +70,38 @@
         <el-button v-if="!session" type="primary" :disabled="!token" @click="start">开始直播</el-button>
         <el-button v-else type="danger" @click="stop">结束直播</el-button>
       </div>
-      <div ref="previewWrapRef" class="preview-wrap">
-        <video
-          v-show="previewLayout !== 'screen_pip'"
-          ref="previewMainRef"
-          class="preview-main"
-          playsinline
-          muted
-          autoplay
-        ></video>
-        <video
-          v-show="previewLayout === 'screen_pip'"
-          ref="previewScreenRef"
-          class="preview-main preview-main--fill"
-          playsinline
-          muted
-          autoplay
-        ></video>
-        <video
-          v-show="previewLayout === 'screen_pip'"
-          ref="previewCamRef"
-          class="preview-pip-drag"
-          :style="pipStyle"
-          playsinline
-          muted
-          autoplay
-          title="拖动调整小窗位置（观众端同步）"
-          @pointerdown.prevent="onPipPointerDown"
-        ></video>
-      </div>
-    </el-card>
-    </div>
-
-    <aside class="live-broadcast-side" aria-label="观众与发言管控">
-      <el-card class="moderation-card" shadow="never">
+      <div class="live-preview-row">
+        <div ref="previewWrapRef" class="preview-wrap">
+          <video
+            v-show="previewLayout !== 'screen_pip'"
+            ref="previewMainRef"
+            class="preview-main"
+            playsinline
+            muted
+            autoplay
+          ></video>
+          <video
+            v-show="previewLayout === 'screen_pip'"
+            ref="previewScreenRef"
+            class="preview-main preview-main--fill"
+            playsinline
+            muted
+            autoplay
+          ></video>
+          <video
+            v-show="previewLayout === 'screen_pip'"
+            ref="previewCamRef"
+            class="preview-pip-drag"
+            :style="pipStyle"
+            playsinline
+            muted
+            autoplay
+            title="拖动调整小窗位置（观众端同步）"
+            @pointerdown.prevent="onPipPointerDown"
+          ></video>
+        </div>
+        <aside class="live-moderation-aside" aria-label="观众与发言管控">
+          <el-card class="moderation-card" shadow="never">
         <template #header>
           <div class="moderation-head">
             <span>观众与发言管控</span>
@@ -188,8 +185,10 @@
             </template>
           </el-table-column>
         </el-table>
-      </el-card>
-    </aside>
+          </el-card>
+        </aside>
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -511,7 +510,43 @@ onBeforeRouteLeave(() => {
 
 <style scoped>
 .live-broadcast {
-  max-width: min(1200px, 100%);
+  max-width: min(1680px, 100%);
+}
+/* 预览与观众管控同一行：画面在左、管控在右（勿在窄屏外误触发布局为上下） */
+.live-preview-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  gap: 16px;
+  margin-top: 4px;
+  width: 100%;
+}
+.live-moderation-aside {
+  flex: 0 0 auto;
+  width: clamp(280px, 34vw, 420px);
+  min-width: 260px;
+  max-height: calc(100vh - 180px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: sticky;
+  top: 8px;
+  align-self: stretch;
+}
+/* 仅小屏/手机再上下堆叠，避免 1200px 以下管理后台侧栏占宽导致误变单列 */
+@media (max-width: 768px) {
+  .live-preview-row {
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+  .live-moderation-aside {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    max-height: none;
+    position: static;
+    overflow-y: visible;
+  }
 }
 .status {
   color: #409eff;
@@ -548,8 +583,9 @@ onBeforeRouteLeave(() => {
 }
 .preview-wrap {
   position: relative;
-  width: 100%;
-  max-width: 1100px;
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: none;
 }
 .preview-main {
   display: block;