From 2f78fd0d529ae0540bb9c7f18e0aad2237f0b962 Mon Sep 17 00:00:00 2001
From: whm <973418690@qq.com>
Date: Fri, 27 Mar 2026 10:30:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(live):=20=E7=AE=A1=E6=8E=A7=E5=8C=BA?=
 =?UTF-8?q?=E4=B8=8E=E9=A2=84=E8=A7=88=E6=A8=AA=E6=8E=92=E6=96=AD=E7=82=B9?=
 =?UTF-8?q?=E3=80=81=E7=A4=BC=E7=89=A9=E6=9D=A1=E7=A7=BB=E8=87=B3=E7=94=BB?=
 =?UTF-8?q?=E9=9D=A2=E4=B8=8B=E6=96=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Made-with: Cursor
---
 admin/src/views/sites/LiveBroadcast.vue | 120 +++++++++++++++---------
 web/src/views/LiveRoom.vue              | 105 +++++++++++++++------
 2 files changed, 155 insertions(+), 70 deletions(-)

diff --git a/admin/src/views/sites/LiveBroadcast.vue b/admin/src/views/sites/LiveBroadcast.vue
index bceb608..712050c 100644
--- a/admin/src/views/sites/LiveBroadcast.vue
+++ b/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;
diff --git a/web/src/views/LiveRoom.vue b/web/src/views/LiveRoom.vue
index de5d299..a12f90d 100644
--- a/web/src/views/LiveRoom.vue
+++ b/web/src/views/LiveRoom.vue
@@ -57,7 +57,8 @@
                     <span class="live-gift-from">{{ g.from }} 送出</span>
                   </div>
                 </div>
-                <div class="live-video-overlay" role="toolbar" aria-label="播放与音量">
+                <!-- 控制条放右上，避免底栏占满与抖音类布局冲突 -->
+                <div class="live-video-overlay live-video-overlay--corner" role="toolbar" aria-label="播放与音量">
                   <div class="live-video-overlay-inner">
                     <button type="button" class="live-overlay-btn" @click="toggleMute">
                       {{ displayMuted ? '开声音' : '静音' }}
@@ -95,26 +96,6 @@
                   <router-link class="live-dm-auth-link" to="/live/register">注册</router-link>
                 </template>
               </div>
-              <div v-if="dmLoggedIn" class="live-gift-row live-gift-row--scroll" aria-label="礼物">
-                <span class="live-gift-hint">送礼</span>
-                <div class="live-gift-strip">
-                  <button
-                    v-for="g in LIVE_GIFTS"
-                    :key="g.id"
-                    type="button"
-                    class="live-gift-chip"
-                    :class="{ 'live-gift-chip--big': g.tier === 'big' }"
-                    :title="g.label"
-                    @click="sendGift(g.id)"
-                  >
-                    <span class="live-gift-chip-emoji" aria-hidden="true">{{ g.emoji }}</span>
-                    <span class="live-gift-chip-label">{{ g.label }}</span>
-                  </button>
-                </div>
-              </div>
-              <div v-else class="live-gift-row">
-                <span class="live-gift-hint-muted">登录后可送礼物（含火箭·跑车·飞机·嘉年华等）</span>
-              </div>
               <div class="live-dm-bar">
                 <input
                   v-model="dmDraft"
@@ -131,6 +112,29 @@
               <p v-if="dmHint" class="live-dm-hint">{{ dmHint }}</p>
             </aside>
           </div>
+          <!-- 礼物条：全宽横条，贴在画面区域下方（类抖音底栏） -->
+          <div class="live-gift-dock" aria-label="礼物">
+            <div v-if="dmLoggedIn" class="live-gift-row live-gift-row--scroll">
+              <span class="live-gift-hint">送礼</span>
+              <div class="live-gift-strip">
+                <button
+                  v-for="g in LIVE_GIFTS"
+                  :key="g.id"
+                  type="button"
+                  class="live-gift-chip"
+                  :class="{ 'live-gift-chip--big': g.tier === 'big' }"
+                  :title="g.label"
+                  @click="sendGift(g.id)"
+                >
+                  <span class="live-gift-chip-emoji" aria-hidden="true">{{ g.emoji }}</span>
+                  <span class="live-gift-chip-label">{{ g.label }}</span>
+                </button>
+              </div>
+            </div>
+            <div v-else class="live-gift-row live-gift-row--guest">
+              <span class="live-gift-hint-muted">登录后可送礼物（含火箭·跑车·飞机·嘉年华等）</span>
+            </div>
+          </div>
         </div>
         <div v-if="dmToast" class="live-dm-toast" role="status">{{ dmToast }}</div>
       </section>
@@ -628,6 +632,31 @@ onUnmounted(() => {
   width: 100%;
   max-width: 100%;
   margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+}
+.live-gift-dock {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 12px 12px;
+  border-radius: 0 0 14px 14px;
+  background: rgba(0, 0, 0, 0.42);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-top: 1px solid rgba(0, 212, 255, 0.12);
+}
+.live-gift-dock .live-gift-row {
+  max-width: none;
+  margin: 0;
+  justify-content: center;
+}
+.live-gift-dock .live-gift-row--guest {
+  justify-content: center;
+  padding: 6px 0;
+}
+.live-gift-dock .live-gift-hint-muted {
+  text-align: center;
 }
 .live-stage-inner {
   display: flex;
@@ -651,7 +680,6 @@ onUnmounted(() => {
   border: 1px solid rgba(255, 255, 255, 0.08);
 }
 .live-room-side .live-dm-auth-row,
-.live-room-side .live-gift-row,
 .live-room-side .live-dm-bar,
 .live-room-side .live-dm-hint {
   max-width: none;
@@ -659,9 +687,6 @@ onUnmounted(() => {
   margin-right: 0;
   justify-content: flex-start;
 }
-.live-room-side .live-gift-hint-muted {
-  text-align: left;
-}
 @media (max-width: 900px) {
   .live-stage-inner {
     flex-direction: column;
@@ -709,6 +734,13 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  gap: 10px;
+}
+.live-stage:fullscreen .live-gift-dock,
+.live-stage:-webkit-full-screen .live-gift-dock {
+  flex-shrink: 0;
+  border-radius: 12px;
+  margin-top: 0;
 }
 .live-stage:fullscreen .live-stage-inner,
 .live-stage:-webkit-full-screen .live-stage-inner {
@@ -761,13 +793,13 @@ onUnmounted(() => {
   object-fit: cover;
 }
 .live-stage:fullscreen .live-dm-auth-row,
-.live-stage:fullscreen .live-gift-row,
 .live-stage:fullscreen .live-dm-bar,
 .live-stage:fullscreen .live-dm-hint,
+.live-stage:fullscreen .live-gift-dock .live-gift-row,
 .live-stage:-webkit-full-screen .live-dm-auth-row,
-.live-stage:-webkit-full-screen .live-gift-row,
 .live-stage:-webkit-full-screen .live-dm-bar,
-.live-stage:-webkit-full-screen .live-dm-hint {
+.live-stage:-webkit-full-screen .live-dm-hint,
+.live-stage:-webkit-full-screen .live-gift-dock .live-gift-row {
   max-width: none;
 }
 .live-video-overlay {
@@ -781,6 +813,23 @@ onUnmounted(() => {
   background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 55%, transparent 100%);
   pointer-events: auto;
 }
+/* 右上条：不占满底栏，避免与右侧互动区「头重脚轻」 */
+.live-video-overlay--corner {
+  left: auto;
+  bottom: auto;
+  top: 0;
+  right: 0;
+  width: auto;
+  max-width: min(100%, 400px);
+  padding: 10px 10px 12px 16px;
+  border-radius: 0 14px 0 16px;
+  background: linear-gradient(
+    to left,
+    rgba(0, 0, 0, 0.78) 0%,
+    rgba(0, 0, 0, 0.35) 65%,
+    transparent 100%
+  );
+}
 .live-video-overlay-inner {
   display: flex;
   flex-wrap: wrap;