视频连线

frontend/src/components/meeting/MeetingToolbar.vue

@@ -28,7 +28,7 @@
           <line x1="8" y1="23" x2="16" y2="23"></line>
         </svg>
       </view>
-      <text class="label">{{ audioEnabled ? '静音' : '解除' }}</text>
+      <text class="label">{{ audioEnabled ? '静音' : '开麦' }}</text>
     </button>
 
     <button class="btn" :class="{ active: videoEnabled, loading: videoLoading }" :disabled="videoLoading" @click="emitIf('cam-toggle')">
@@ -42,7 +42,10 @@
           <path d="M16 16v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v4m0 0l6-4v10"></path>
         </svg>
       </view>
-      <text class="label">{{ videoEnabled ? '停止视频' : '开启视频' }}</text>
+      <text class="label">
+        <text class="label-desktop">{{ videoEnabled ? '停止视频' : '开启视频' }}</text>
+        <text class="label-mobile">视频</text>
+      </text>
     </button>
 
     <button
@@ -70,7 +73,10 @@
           <line x1="12" y1="7" x2="12" y2="14"></line>
         </svg>
       </view>
-      <text class="label">{{ screenSharing ? '停止共享' : '共享屏幕' }}</text>
+      <text class="label">
+        <text class="label-desktop">{{ screenSharing ? '停止共享' : '共享屏幕' }}</text>
+        <text class="label-mobile">共享</text>
+      </text>
     </button>
 
     <!-- 录制按钮（Phase B）：仅主持人可见；recording=true 时红色脉动；上传中禁用 -->
@@ -90,7 +96,10 @@
           <circle cx="12" cy="12" r="3"></circle>
         </svg>
       </view>
-      <text class="label">{{ recording ? '停止录制' : '开始录制' }}</text>
+      <text class="label">
+        <text class="label-desktop">{{ recording ? '停止录制' : '开始录制' }}</text>
+        <text class="label-mobile">录制</text>
+      </text>
     </button>
 
     <button class="btn" @click="emitIf('invite')">
@@ -251,6 +260,7 @@ const emitIf = (name) => {
   letter-spacing: 0.5rpx;
   color: inherit;
 }
+.label-mobile { display: none; }
 
 .btn-leave .icon { background: #EF4444; }
 .btn-leave:hover .icon { background: #DC2626; }
@@ -290,20 +300,59 @@ const emitIf = (name) => {
     left: 0;
     right: 0;
     bottom: 0;
-    justify-content: flex-start;
-    gap: 8rpx;
-    padding: 10rpx 12rpx calc(10rpx + env(safe-area-inset-bottom)) 12rpx;
-    overflow-x: auto;
+    justify-content: space-between;
+    gap: 4rpx;
+    width: 100vw;
+    box-sizing: border-box;
+    padding: 10rpx 8rpx calc(12rpx + env(safe-area-inset-bottom)) 8rpx;
+    background: linear-gradient(to top, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.92));
+    box-shadow: 0 -12rpx 30rpx rgba(0, 0, 0, 0.32);
+    border-top-color: rgba(148, 163, 184, 0.16);
+    overflow-x: hidden;
     overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
   }
   .btn {
-    min-width: 76rpx;
-    flex: 0 0 auto;
+    min-width: 0;
+    flex: 1 1 0;
     gap: 4rpx;
-    padding: 4rpx 4rpx;
+    padding: 4rpx 0;
+    border-radius: 14rpx;
+  }
+  .btn:hover { background: transparent; }
+  .btn:active { background: rgba(255, 255, 255, 0.08); }
+  .icon {
+    width: 48rpx;
+    height: 48rpx;
+    background: rgba(51, 65, 85, 0.92);
+    box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.08);
+  }
+  .icon svg {
+    width: 36rpx;
+    height: 36rpx;
+  }
+  .btn.active .icon { background: #2563EB; }
+  .btn[disabled] .icon {
+    background: rgba(51, 65, 85, 0.58);
+    color: rgba(255, 255, 255, 0.55);
+  }
+  .btn[disabled] .label { color: rgba(255, 255, 255, 0.48); }
+  .btn-leave .icon { background: #EF4444; }
+  .label {
+    max-width: 100%;
+    font-size: 18rpx;
+    line-height: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .label-desktop { display: none; }
+  .label-mobile { display: inline; }
+  .badge {
+    top: -8rpx;
+    right: -8rpx;
+    min-width: 28rpx;
+    height: 28rpx;
+    font-size: 16rpx;
   }
-  .icon { width: 54rpx; height: 54rpx; }
-  .label { font-size: 18rpx; }
 }
 </style>