From 836192527397bd7c0ff3544fc450eb959c28a167 Mon Sep 17 00:00:00 2001
From: ysn <2126564605@qq.com>
Date: Wed, 20 May 2026 13:11:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E8=AE=AE=E6=A8=A1=E5=BC=8F-=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |    1 +
 .../realTimeConsultation.vue                  | 1573 +++++++++++++----
 2 files changed, 1189 insertions(+), 385 deletions(-)

diff --git a/package.json b/package.json
index b386ecf..080dcce 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "html2canvas": "^1.4.1",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
diff --git a/src/views/videoCommunication/realTimeConsultation.vue b/src/views/videoCommunication/realTimeConsultation.vue
index ebad738..e8b8bb0 100644
--- a/src/views/videoCommunication/realTimeConsultation.vue
+++ b/src/views/videoCommunication/realTimeConsultation.vue
@@ -1,39 +1,58 @@
 <template>
   <div class="meeting-container">
-    <!-- 1. 顶部信息栏 -->
+    <!-- 顶部导航栏 -->
     <header class="top-bar">
-      <div class="logo">信联</div>
-      <div class="title">超声事业部的云诊室</div>
+      <div class="logo">
+        <img src="@/assets/logo/logo.png" />
+        <span>信联</span>
+      </div>
+      <div class="title">{{ meetingTitle }}</div>
       <div class="window-controls">
         <i class="el-icon-minus" @click="minimizeWindow"></i>
         <i class="el-icon-close" @click="closeWindow"></i>
       </div>
     </header>
 
-    <!-- 2. 会议状态栏 -->
+    <!-- 顶部状态信息条 -->
     <div class="status-bar">
-      <span>会议口令: 1019100</span>
+      <span class="status-item">会议口令:{{ meetingCode }}</span>
       <span class="divider">|</span>
-      <span>{{ timerDisplay }}</span>
-      <!-- 计时器显示 -->
+      <span class="status-item">{{ participantCount }}人在会议中</span>
       <span class="divider">|</span>
-      <span>1人在会议中</span>
+      <span class="status-item">{{ resolution }}</span>
       <span class="divider">|</span>
-      <span>1080P</span>
+      <span class="status-item">{{ frameRate }}fps</span>
       <span class="divider">|</span>
-      <span>25fps</span>
+      <span class="status-item">网络延迟 {{ networkDelay }}ms</span>
       <span class="divider">|</span>
-      <span>网络延迟 0ms</span>
+      <span class="status-item" :style="{ color: networkQuality.color }">
+        网络：{{ networkQuality.text }}
+      </span>
+      <span class="divider" v-if="isRecording">|</span>
+      <span class="status-item" v-if="isRecording">
+        录制中 {{ recordingTime }}
+      </span>
+      <span class="divider" v-if="timerRunning">|</span>
+      <span class="status-item" v-if="timerRunning">
+        计时中{{ timerDisplay }}
+      </span>
     </div>
 
-    <!-- 3. 主视频区域 -->
+    <!-- 主画面区域：左侧共享画面 + 右侧摄像头 -->
     <main class="main-content">
-      <!-- 视频流容器 (模拟黑屏) -->
-      <div class="video-stage" ref="videoContainer">
-        <!-- 这里放置远程视频流 -->
-        <div class="placeholder-text">视频流区域</div>
-
-        <!-- 绘图层 (Canvas) - 覆盖在视频之上 -->
+      <!-- 左侧主画面容器 -->
+      <div
+        class="video-stage"
+        ref="videoContainer"
+        @mousemove="handleMouseMove"
+      >
+        <!-- 激光笔画布 -->
+        <canvas
+          v-show="isLaserMode"
+          ref="laserCanvas"
+          class="laser-canvas"
+        ></canvas>
+        <!-- 画笔标注画布 -->
         <canvas
           v-show="isDrawingMode"
           ref="drawingCanvas"
@@ -43,57 +62,81 @@
           @mouseup="stopDrawing"
           @mouseleave="stopDrawing"
         ></canvas>
+        <!-- 共享/采集卡画面 -->
+        <video
+          v-if="isSharing"
+          ref="shareVideo"
+          class="share-preview"
+          autoplay
+          playsinline
+          muted
+        ></video>
       </div>
 
-      <!-- 右侧侧边栏 (参会人/基层医生) -->
+      <!-- 右侧本地摄像头 + 说话音量条 -->
       <aside class="sidebar">
-        <div class="remote-user">
-          <div class="video-box">
-            <!-- 摄像头视频 -->
+        <div class="remote-video-box">
+          <div class="video-area">
             <video
               ref="localVideo"
+              class="local-camera"
               autoplay
-              playsinline
               muted
-              style="width: 100%; height: auto; background: #000"
-            ></video>
-          </div>
-          <div class="user-info">
-            <span>基层医生</span>
-            <i class="el-icon-video-camera"></i>
+              playsinline
+            />
+            <!-- 说话音量波形 -->
+            <div class="voice-bar-container" v-if="micOn">
+              <div
+                class="voice-bar"
+                v-for="(i, index) in 12"
+                :key="index"
+                :style="{ height: `${voiceLevels[index] || 1}px` }"
+              />
+            </div>
+            <div class="video-controls">
+              <div class="signal-bars">
+                <span></span><span></span><span></span><span></span
+                ><span></span>
+              </div>
+              <div class="volume-icon">
+                <i class="el-icon-phone-outline"></i>
+              </div>
+            </div>
           </div>
         </div>
       </aside>
     </main>
 
-    <!-- 4. 底部工具栏 -->
+    <!-- 底部工具栏 -->
     <footer class="bottom-bar">
-      <el-button type="primary" class="btn-create">创建病例</el-button>
-
-      <div class="tools">
-        <!-- 麦克风 -->
+      <div class="left-section">
+        <el-button type="primary" @click="showCaseDialog = true"
+          >创建病例</el-button
+        >
+      </div>
+      <div class="tools-section">
         <div class="tool-item" @click="toggleMic">
-          <i
-            :class="micOn ? 'el-icon-microphone' : 'el-icon-microphone-off'"
-          ></i>
+          <div class="icon-wrapper">
+            <i class="el-icon-microphone"></i>
+            <span v-if="!micOn" class="slash-line"></span>
+          </div>
           <span>麦克风</span>
         </div>
-
-        <!-- 摄像头 -->
         <div class="tool-item" @click="toggleCam">
-          <i
-            :class="camOn ? 'el-icon-video-camera' : 'el-icon-video-camera-off'"
-          ></i>
+          <div class="icon-wrapper">
+            <i class="el-icon-video-camera"></i>
+            <span v-if="!camOn" class="slash-line"></span>
+          </div>
           <span>摄像头</span>
         </div>
-
-        <!-- 共享 -->
-        <div class="tool-item">
+        <div
+          class="tool-item"
+          @click="toggleShare"
+          :class="{ active: isSharing }"
+        >
           <i class="el-icon-share"></i>
-          <span>共享</span>
+          <span>{{ isSharing ? "停止共享" : "共享" }}</span>
         </div>
-
-        <!-- 画笔 (核心功能) -->
         <div
           class="tool-item"
           :class="{ active: isDrawingMode }"
@@ -102,54 +145,44 @@
           <i class="el-icon-edit"></i>
           <span>画笔</span>
         </div>
-
-        <!-- 激光笔 (模拟) -->
-        <div class="tool-item">
+        <div
+          class="tool-item"
+          :class="{ active: isLaserMode }"
+          @click="toggleLaser"
+        >
           <i class="el-icon-aim"></i>
           <span>激光笔</span>
         </div>
-
-        <!-- 邀请 (核心功能) -->
         <div class="tool-item" @click="handleInvite">
-          <i class="el-icon-user-add"></i>
+          <i class="el-icon-user-solid"></i>
           <span>邀请</span>
         </div>
-
-        <!-- 录制 (核心功能) -->
         <div class="tool-item" @click="toggleRecord">
           <i
             class="el-icon-video-play"
             :class="{ 'is-recording': isRecording }"
           ></i>
-          <span>{{ isRecording ? "停止录制" : "录制" }}</span>
+          <span>{{ isRecording ? "停止" : "录制" }}</span>
         </div>
-
-        <!-- 截图 -->
         <div class="tool-item" @click="takeScreenshot">
           <i class="el-icon-camera"></i>
           <span>截图</span>
         </div>
-
-        <!-- 计时器 (核心功能 - 点击重置) -->
-        <div class="tool-item" @click="resetTimer">
+        <div class="tool-item" @click="toggleTimer">
           <i class="el-icon-timer"></i>
-          <span>计时器</span>
+          <span>{{ timerRunning ? "暂停" : "计时器" }}</span>
         </div>
-
-        <!-- 设置 -->
-        <div class="tool-item">
+        <div class="tool-item" @click="openSettingDialog">
           <i class="el-icon-setting"></i>
           <span>设置</span>
         </div>
+        <div class="divider-line"></div>
+        <div class="tool-item end-btn" @click="endMeeting">
+          <i class="el-icon-switch-button"></i>
+          <span>结束会议</span>
+        </div>
       </div>
-
-      <div class="right-actions">
-        <el-button
-          type="danger"
-          icon="el-icon-switch-button"
-          @click="endMeeting"
-          >结束会议</el-button
-        >
+      <div class="right-section">
         <span class="clock">{{ currentTime }}</span>
       </div>
     </footer>
@@ -161,37 +194,271 @@
       width="30%"
     >
       <p>这里是通讯录列表，勾选用户进行邀请。</p>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="inviteDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="confirmInvite">确 定</el-button>
-      </span>
+      <template slot="footer">
+        <el-button @click="inviteDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmInvite">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 设置弹窗 -->
+    <el-dialog
+      title="设置"
+      :visible.sync="settingDialogVisible"
+      width="31%"
+      @open="onSettingDialogOpen"
+      :show-close="false"
+    >
+      <el-tabs v-model="settingTab" tab-position="left">
+        <el-tab-pane label="通用" name="general">
+          <el-form :model="tempSetting" label-width="140px">
+            <el-form-item label="会诊名称">
+              <el-input
+                v-model="tempSetting.meetingTitle"
+                style="width: 240px"
+              ></el-input>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="视频" name="video">
+          <el-form :model="tempSetting" label-width="140px">
+            <el-form-item label="摄像头/工作站">
+              <el-select v-model="tempSetting.cameraId" style="width: 100%">
+                <el-option
+                  v-for="item in videoDeviceList"
+                  :key="item.deviceId"
+                  :label="item.label"
+                  :value="item.deviceId"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="绿联采集卡">
+              <el-select
+                v-model="tempSetting.captureCard"
+                style="width: 100%"
+                @change="switchCaptureCard"
+              >
+                <el-option label="不使用采集卡" value=""></el-option>
+                <el-option
+                  v-for="item in videoDeviceList"
+                  :key="item.deviceId"
+                  :label="item.label"
+                  :value="item.deviceId"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="网络调控策略">
+              <el-select v-model="tempSetting.netStrategy" style="width: 100%">
+                <el-option label="弱网流畅优先" value="smooth"></el-option>
+                <el-option label="弱网清晰优先" value="quality"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="摄像头分辨率">
+              <el-select v-model="tempSetting.resolution" style="width: 100%">
+                <el-option label="240P" value="240P"></el-option>
+                <el-option label="480P" value="480P"></el-option>
+                <el-option label="720P" value="720P"></el-option>
+                <el-option label="1080P" value="1080P"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="采集卡分辨率">
+              <el-select v-model="tempSetting.captureRes" style="width: 100%">
+                <el-option label="1080P" value="1080P"></el-option>
+                <el-option label="720P" value="720P"></el-option>
+                <el-option label="480P" value="480P"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="采集卡帧率">
+              <el-select v-model="tempSetting.captureFps" style="width: 100%">
+                <el-option label="30" value="30"></el-option>
+                <el-option label="25" value="25"></el-option>
+                <el-option label="15" value="15"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="采集卡码率">
+              <el-input v-model="tempSetting.captureBitrate"></el-input>
+            </el-form-item>
+            <el-form-item label="视频镜像">
+              <el-radio-group v-model="tempSetting.videoMirror">
+                <el-radio :label="true">开启</el-radio>
+                <el-radio :label="false">关闭</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="音频" name="audio">
+          <el-form :model="tempSetting" label-width="140px">
+            <el-form-item label="麦克风">
+              <el-select v-model="tempSetting.micId" style="width: 100%">
+                <el-option
+                  v-for="item in audioInList"
+                  :key="item.deviceId"
+                  :label="item.label"
+                  :value="item.deviceId"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="扬声器">
+              <el-select v-model="tempSetting.speakerId" style="width: 100%">
+                <el-option
+                  v-for="item in audioOutList"
+                  :key="item.deviceId"
+                  :label="item.label"
+                  :value="item.deviceId"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="标注" name="draw">
+          <el-form :model="tempSetting" label-width="140px">
+            <el-form-item label="画笔颜色">
+              <el-color-picker v-model="tempSetting.brushColor" />
+            </el-form-item>
+            <el-form-item label="">
+              <el-checkbox v-model="tempSetting.syncColor"
+                >同步标记颜色</el-checkbox
+              >
+            </el-form-item>
+            <el-form-item label="画笔类型">
+              <el-radio-group v-model="tempSetting.brushType">
+                <el-radio label="dashed">虚线</el-radio>
+                <el-radio label="arrow">箭头</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="快捷键" name="shortcut">
+          <el-form :model="tempSetting" label-width="140px">
+            <el-form-item label="截图快捷键">
+              <el-input v-model="tempSetting.screenshotKey"></el-input>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+      <template slot="footer">
+        <el-button @click="settingDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveSetting">保存并应用</el-button>
+      </template>
     </el-dialog>
+
+    <!-- 创建病例弹窗 -->
+    <CaseFormDialog :visible.sync="showCaseDialog" :is-edit="false" />
   </div>
 </template>
 
 <script>
+import CaseFormDialog from "@/views/cases/components/CaseFormDialog";
+
 export default {
   name: "MeetingRoom",
+  components: { CaseFormDialog },
   data() {
     return {
+      // ==================== 会议基础信息 ====================
+      meetingTitle: "测试部门的云诊室",
+      meetingCode: "1687110",
+      participantCount: 1,
+      resolution: "1080P",
+      frameRate: 25,
+      networkDelay: 0,
       currentTime: "",
+      networkQuality: { text: "良好", color: "#00e676" },
+
+      // ==================== 计时器 ====================
       timer: 0,
       timerInterval: null,
+      timerRunning: false,
+
+      // ==================== 录制相关 ====================
       isRecording: false,
       recordedChunks: [],
       mediaRecorder: null,
+      recordingStartTime: null,
+      recordingTime: "00:00:00",
+      recordingTimer: null,
+
+      // ==================== 音视频设备 ====================
       inviteDialogVisible: false,
+      showCaseDialog: false,
       micOn: true,
       camOn: true,
+      localStream: null,
+
+      // 音频说话波形
+      audioContext: null,
+      analyser: null,
+      voiceLevels: Array(12).fill(1),
+      voiceMonitorTimer: null,
+
+      // ==================== 画笔工具 ====================
       isDrawingMode: false,
       drawing: false,
       lastX: 0,
       lastY: 0,
+      brushColor: "#FF69B4",
+      brushLineWidth: 3,
+      brushLineDash: [5, 5],
       ctx: null,
-      localStream: null, // 音视频流
+
+      // ==================== 激光笔工具 ====================
+      isLaserMode: false,
+      laserX: 0,
+      laserY: 0,
+      laserAnimationId: null,
+      laserAlpha: 1,
+      laserAlphaDir: 1,
+      laserCtx: null,
+
+      // ==================== 屏幕共享 / 采集卡 ====================
+      isSharing: false,
+      shareStream: null,
+      captureCheckTimer: null,
+
+      // ==================== 设置模块 ====================
+      settingDialogVisible: false,
+      settingTab: "general",
+      videoDeviceList: [],
+      audioInList: [],
+      audioOutList: [],
+      tempSetting: {},
+      globalSetting: {
+        meetingTitle: "测试部门的云诊室",
+        cameraId: "",
+        micId: "",
+        speakerId: "",
+        resolution: "480P",
+        netStrategy: "smooth",
+        brushColor: "#FF69B4",
+        brushWidth: 3,
+        screenshotKey: "Ctrl+1",
+        captureCard: "",
+        captureRes: "1080P",
+        captureFps: "30",
+        captureBitrate: "",
+        videoMirror: false,
+        brushType: "dashed",
+        syncColor: true,
+      },
+
+      // 无用冗余变量（保留兼容）
+      isSelectingCapture: false,
+      markCanvas: null,
+      markCtx: null,
+      markImg: null,
+      markDrawing: false,
+      markToolType: "pen",
+      markColor: "#ff0000",
+      markLineWidth: 3,
+      textInput: null,
+      fullPageCaptureOverlay: null,
+      fullPageCaptureSelectBox: null,
+      fullPageCaptureIsSelecting: false,
+      fullPageCaptureStartX: 0,
+      fullPageCaptureStartY: 0,
     };
   },
   computed: {
+    // 计时器格式化显示
     timerDisplay() {
       const h = Math.floor(this.timer / 3600)
         .toString()
@@ -204,70 +471,88 @@ export default {
     },
   },
   mounted() {
-    this.$store.dispatch("app/toggleSideBarHide", true);
-    this.$store.dispatch("settings/changeSetting", {
-      key: "fixedHeader",
-      value: false,
-    });
-    this.$store.dispatch("settings/changeSetting", {
-      key: "tagsView",
-      value: false,
-    });
-    this.updateClock();
-    setInterval(this.updateClock, 1000);
-    this.startTimer();
-
-    // 初始化 Canvas
-    this.initCanvas();
-    window.addEventListener("resize", this.initCanvas);
-
-    // ✅ 进入页面自动打开摄像头+麦克风
-    this.openCameraAndMic();
-
-    // 初始化SDK
-    window.hirtcwebsdk.init({
-      serviceID: "90f4d5a954ab449e9b6aac92",
-      serviceKey: "2c17c6393771ee3048ae34d6b380c5ec",
-      cameraLayers: [
-        {
-          width: 320,
-          height: 180,
-          frameRate: 20,
-          targetBw: 160000,
-          layerIndex: 0,
-        },
-        {
-          width: 640,
-          height: 360,
-          frameRate: 20,
-          targetBw: 500000,
-          layerIndex: 1,
-        },
-        {
-          width: 1280,
-          height: 720,
-          frameRate: 20,
-          targetBw: 1100000,
-          layerIndex: 2,
-        },
-      ],
-      leaveBeforeUnload: false,
-      debug: false,
-      forceArea: true,
-      screenEnableAudio: true,
-    });
-
-    const roomId = "room_" + (this.meetingCode || "default");
-    const uid = String(this.$store.state.user.id || Date.now());
-    const uName = (this.$store.state.user.nickName || "用户").trim();
-
-    window.hirtcwebsdk.join(roomId, uid, uName);
-    window.hirtcwebsdk.addListener("joined", () => {
-      this.$message.success("加入会议成功");
-    });
+    this.initPage();
+    this.initSDK();
   },
   methods: {
-    // ✅ 自动打开摄像头和麦克风
+    // ==================== 【1】初始化 ====================
+    // 页面初始化
+    initPage() {
+      this.loadLocalSetting();
+      this.updateClock();
+      setInterval(this.updateClock, 1000);
+      this.initCanvas();
+      this.initLaserCanvas();
+      window.addEventListener("resize", this.initCanvas);
+      window.addEventListener("resize", this.initLaserCanvas);
+      this.openCameraAndMic();
+      this.fetchMeetingInfo();
+      this.startNetworkMonitoring();
+      window.addEventListener("keydown", this.handleKeydown);
+      // 隐藏侧边栏、调整布局
+      this.$store.dispatch("app/toggleSideBarHide", true);
+      this.$store.dispatch("settings/changeSetting", {
+        key: "fixedHeader",
+        value: false,
+      });
+      this.$store.dispatch("settings/changeSetting", {
+        key: "tagsView",
+        value: false,
+      });
+    },
+
+    // SDK 初始化加入房间
+    initSDK() {
+      window.hirtcwebsdk.init({
+        serviceID: "90f4d5a954ab449e9b6ac92",
+        serviceKey: "2c17c6393771ee3048ae30d6b380c5ec",
+        cameraLayers: [
+          {
+            width: 320,
+            height: 180,
+            frameRate: 20,
+            targetBw: 160000,
+            layerIndex: 0,
+          },
+          {
+            width: 640,
+            height: 360,
+            frameRate: 20,
+            targetBw: 500000,
+            layerIndex: 1,
+          },
+          {
+            width: 1280,
+            height: 720,
+            frameRate: 20,
+            targetBw: 1100000,
+            layerIndex: 2,
+          },
+        ],
+        leaveBeforeUnload: false,
+        debug: false,
+        forceArea: true,
+        screenEnableAudio: true,
+      });
+
+      const roomId = "room_" + (this.meetingCode || "default");
+      const uid = String(this.$store.state.user.id || Date.now());
+      const uName = (this.$store.state.user.name || "用户").trim();
+
+      window.hirtcwebsdk.join(roomId, uid, uName);
+      window.hirtcwebsdk.addListener("joined", () => {
+        this.$message.success("加入会议成功");
+        this.updateParticipantCount();
+      });
+      window.hirtcwebsdk.addListener(
+        "user-joined",
+        this.updateParticipantCount
+      );
+      window.hirtcwebsdk.addListener("user-left", this.updateParticipantCount);
+    },
+
+    // ==================== 【2】设备：摄像头 + 麦克风 ====================
+    // 打开摄像头+麦克风并渲染
     async openCameraAndMic() {
       try {
         const stream = await navigator.mediaDevices.getUserMedia({
@@ -276,373 +561,891 @@ export default {
         });
         this.localStream = stream;
         this.$refs.localVideo.srcObject = stream;
-        this.$message.success("摄像头+麦克风已开启");
+        this.startVoiceMonitor();
       } catch (err) {
-        console.error("打开设备失败：", err);
+        console.error("打开设备失败", err);
         this.$message.error("请允许摄像头/麦克风权限");
       }
     },
 
-    // ✅ 麦克风开关
+    // 麦克风开关
     toggleMic() {
       if (!this.localStream) return;
       this.micOn = !this.micOn;
-      this.localStream.getAudioTracks().forEach((track) => {
-        track.enabled = this.micOn;
-      });
+      this.localStream
+        .getAudioTracks()
+        .forEach((t) => (t.enabled = this.micOn));
+      this.$message[this.micOn ? "success" : "warning"](
+        this.micOn ? "麦克风已打开" : "已关闭"
+      );
     },
 
-    // ✅ 摄像头开关
+    // 摄像头开关
     toggleCam() {
       if (!this.localStream) return;
       this.camOn = !this.camOn;
-      this.localStream.getVideoTracks().forEach((track) => {
-        track.enabled = this.camOn;
-      });
+      this.localStream
+        .getVideoTracks()
+        .forEach((t) => (t.enabled = this.camOn));
+      this.$message[this.camOn ? "success" : "warning"](
+        this.camOn ? "摄像头已打开" : "已关闭"
+      );
     },
 
-    minimizeWindow() {
-      this.$router.push("/video/index");
+    // ==================== 【3】音频说话音量波形检测 ====================
+    startVoiceMonitor() {
+      try {
+        this.audioContext = new (window.AudioContext ||
+          window.webkitAudioContext)();
+        this.analyser = this.audioContext.createAnalyser();
+        this.analyser.fftSize = 256;
+        const source = this.audioContext.createMediaStreamSource(
+          this.localStream
+        );
+        source.connect(this.analyser);
+
+        this.voiceMonitorTimer = setInterval(() => {
+          if (!this.micOn) {
+            this.voiceLevels = this.voiceLevels.map(() => 1);
+            return;
+          }
+          const dataArray = new Uint8Array(this.analyser.frequencyBinCount);
+          this.analyser.getByteFrequencyData(dataArray);
+          const avg = dataArray.reduce((a, b) => a + b, 0) / dataArray.length;
+          const level = Math.min(25, Math.max(1, avg / 4));
+          this.voiceLevels = this.voiceLevels.map(
+            () => Math.random() * level + 1
+          );
+        }, 80);
+      } catch (e) {
+        console.log("语音检测不支持");
+      }
     },
-    closeWindow() {
-      this.$store.dispatch("app/toggleSideBarHide", false);
+
+    // ==================== 【4】采集卡设备 ====================
+    async switchCaptureCard(deviceId) {
+      // 清理旧采集卡流
+      if (this.captureCheckTimer) clearTimeout(this.captureCheckTimer);
+      this.closeCaptureCard();
+
+      if (!deviceId) {
+        this.isSharing = false;
+        this.$message.success("已关闭采集卡");
+        return;
+      }
+
+      this.isSharing = true;
+      await this.$nextTick();
+
+      const constraints = {
+        video: {
+          deviceId: { exact: deviceId },
+          width: { ideal: 1920 },
+          height: { ideal: 1080 },
+          frameRate: { ideal: 30 },
+        },
+        audio: false,
+      };
+
+      let captureStream = null;
+      try {
+        captureStream = await navigator.mediaDevices.getUserMedia(constraints);
+      } catch (err) {
+        console.error("采集卡获取流失败：", err);
+        const lowConstraints = {
+          video: { deviceId: { exact: deviceId } },
+          audio: false,
+        };
+        try {
+          captureStream = await navigator.mediaDevices.getUserMedia(
+            lowConstraints
+          );
+        } catch (e2) {
+          this.$message.error(
+            "无法打开采集卡，请检查USB口、权限、是否被其他软件占用"
+          );
+          this.isSharing = false;
+          return;
+        }
+      }
+
+      const videoEl = this.$refs.shareVideo;
+      videoEl.srcObject = captureStream;
+      videoEl.muted = true;
+      videoEl.playsinline = true;
+      videoEl.autoplay = true;
+
+      let hasValidFrame = false;
+      videoEl.onloadeddata = () => (hasValidFrame = true);
+
+      // 3秒超时无信号判定失败
+      this.captureCheckTimer = setTimeout(() => {
+        if (!hasValidFrame) {
+          this.$message.error("采集卡无信号，请检查设备、HDMI线、USB3.0接口");
+          this.closeCaptureCard();
+          this.isSharing = false;
+        }
+      }, 3000);
+
+      // 监听采集卡断开
+      const videoTrack = captureStream.getVideoTracks()[0];
+      if (videoTrack)
+        videoTrack.onended = () => {
+          this.$message.warning("采集卡信号已断开");
+          this.closeCaptureCard();
+          this.isSharing = false;
+        };
     },
-    updateClock() {
-      const now = new Date();
-      this.currentTime = now.toLocaleTimeString("zh-CN", { hour12: false });
+
+    // 关闭采集卡并释放资源
+    closeCaptureCard() {
+      try {
+        if (this.captureCheckTimer) clearTimeout(this.captureCheckTimer);
+        const videoEl = this.$refs.shareVideo;
+        if (!videoEl) return;
+        const stream = videoEl.srcObject;
+        if (stream)
+          stream.getTracks().forEach((t) => {
+            t.stop();
+            t.onended = null;
+          });
+        videoEl.srcObject = null;
+        videoEl.onloadeddata = null;
+      } catch (e) {
+        console.log("关闭采集卡异常：", e);
+      }
     },
-    startTimer() {
-      this.timerInterval = setInterval(() => {
-        this.timer++;
-      }, 1000);
+
+    // ==================== 【5】屏幕共享 ====================
+    async toggleShare() {
+      if (this.isSharing) {
+        this.stopShare();
+        return;
+      }
+      try {
+        const stream = await navigator.mediaDevices.getDisplayMedia({
+          video: { width: 1920, height: 1080, frameRate: 15 },
+          audio: false,
+        });
+        const track = stream.getVideoTracks()[0];
+        track.onended = () => this.stopShare();
+        this.shareStream = stream;
+        this.$refs.shareVideo.srcObject = stream;
+        this.isSharing = true;
+        this.$message.success("开始共享");
+        window.hirtcwebsdk?.publishScreen(stream);
+      } catch (e) {
+        this.$message.error("共享失败");
+      }
     },
-    resetTimer() {
-      this.timer = 0;
-      this.$message.info("计时器已重置");
+
+    // 停止共享
+    stopShare() {
+      if (this.shareStream)
+        this.shareStream.getTracks().forEach((t) => {
+          t.stop();
+          t.onended = null;
+        });
+      this.shareStream = null;
+      this.isSharing = false;
+      this.$refs.shareVideo.srcObject = null;
+      this.$message.info("已停止共享");
+      window.hirtcwebsdk?.unPublishScreen();
     },
-    handleInvite() {
-      this.inviteDialogVisible = true;
+
+    // ==================== 【6】画笔标注 ====================
+    initCanvas() {
+      const canvas = this.$refs.drawingCanvas;
+      const cont = this.$refs.videoContainer;
+      if (!canvas || !cont) return;
+      canvas.width = cont.clientWidth;
+      canvas.height = cont.clientHeight;
+      this.ctx = canvas.getContext("2d");
+      this.ctx.lineWidth = this.brushLineWidth;
+      this.ctx.lineCap = "round";
+      this.ctx.strokeStyle = this.brushColor;
+      this.ctx.setLineDash(this.brushLineDash);
     },
-    confirmInvite() {
-      this.$message.success("邀请已发送");
-      this.inviteDialogVisible = false;
+
+    // 画笔开关
+    toggleDraw() {
+      this.isDrawingMode = !this.isDrawingMode;
+      this.$message.info(this.isDrawingMode ? "画笔开启" : "画笔关闭");
     },
-    async toggleRecord() {
-      if (this.isRecording) {
-        this.stopRecording();
-      } else {
-        this.startRecording();
+
+    // 开始绘制
+    startDrawing(e) {
+      if (!this.isDrawingMode) return;
+      this.drawing = true;
+      const c = this.getCoord(e);
+      this.lastX = c.x;
+      this.lastY = c.y;
+    },
+
+    // 绘制中
+    draw(e) {
+      if (!this.drawing || !this.isDrawingMode) return;
+      const c = this.getCoord(e);
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.lastX, this.lastY);
+      this.ctx.lineTo(c.x, c.y);
+      this.ctx.stroke();
+      this.lastX = c.x;
+      this.lastY = c.y;
+    },
+
+    // 结束绘制
+    stopDrawing() {
+      this.drawing = false;
+    },
+
+    // 获取鼠标在画布上的坐标
+    getCoord(e) {
+      const r = this.$refs.drawingCanvas.getBoundingClientRect();
+      return { x: e.clientX - r.left, y: e.clientY - r.top };
+    },
+
+    // ==================== 【7】激光笔 ====================
+    initLaserCanvas() {
+      const c = this.$refs.laserCanvas;
+      const r = this.$refs.videoContainer;
+      if (!c || !r) return;
+      c.width = r.clientWidth;
+      c.height = r.clientHeight;
+      this.laserCtx = c.getContext("2d");
+    },
+
+    // 激光笔开关
+    toggleLaser() {
+      this.isLaserMode = !this.isLaserMode;
+      this.isLaserMode ? this.startLaser() : this.stopLaser();
+      this.$message.info(this.isLaserMode ? "激光笔开启" : "激光笔关闭");
+    },
+
+    // 激光笔动画
+    startLaser() {
+      const draw = () => {
+        if (!this.isLaserMode) return;
+        this.laserCtx.clearRect(
+          0,
+          0,
+          this.$refs.laserCanvas.width,
+          this.$refs.laserCanvas.height
+        );
+        const g = this.laserCtx.createRadialGradient(
+          this.laserX,
+          this.laserY,
+          0,
+          this.laserX,
+          this.laserY,
+          20
+        );
+        g.addColorStop(0, `rgba(0,255,0,${this.laserAlpha})`);
+        g.addColorStop(0.5, `rgba(0,255,0,${this.laserAlpha * 0.5})`);
+        g.addColorStop(1, "rgba(0,255,0,0)");
+        this.laserCtx.beginPath();
+        this.laserCtx.arc(this.laserX, this.laserY, 20, 0, Math.PI * 2);
+        this.laserCtx.fillStyle = g;
+        this.laserCtx.fill();
+        this.laserAlpha += 0.02 * this.laserAlphaDir;
+        if (this.laserAlpha > 1) this.laserAlphaDir = -1;
+        if (this.laserAlpha < 0.7) this.laserAlphaDir = 1;
+        this.laserAnimationId = requestAnimationFrame(draw);
+      };
+      draw();
+    },
+
+    // 停止激光笔
+    stopLaser() {
+      cancelAnimationFrame(this.laserAnimationId);
+      this.laserAnimationId = null;
+      this.laserCtx?.clearRect(
+        0,
+        0,
+        this.$refs.laserCanvas.width,
+        this.$refs.laserCanvas.height
+      );
+    },
+
+    // 鼠标移动更新激光笔位置
+    handleMouseMove(e) {
+      if (this.isLaserMode) {
+        const r = this.$refs.videoContainer.getBoundingClientRect();
+        this.laserX = e.clientX - r.left;
+        this.laserY = e.clientY - r.top;
       }
     },
+
+    // ==================== 【8】录制 ====================
+    async toggleRecord() {
+      this.isRecording ? this.stopRecording() : await this.startRecording();
+    },
+
+    // 开始录制
     async startRecording() {
       try {
         const stream = await navigator.mediaDevices.getDisplayMedia({
           video: true,
           audio: true,
         });
-
-        this.mediaRecorder = new MediaRecorder(stream);
+        this.mediaRecorder = new MediaRecorder(stream, {
+          mimeType: "video/webm;codecs=vp8,opus",
+        });
         this.recordedChunks = [];
-
-        this.mediaRecorder.ondataavailable = (event) => {
-          if (event.data.size > 0) {
-            this.recordedChunks.push(event.data);
-          }
-        };
-
+        this.mediaRecorder.ondataavailable = (e) =>
+          e.data.size && this.recordedChunks.push(e.data);
         this.mediaRecorder.onstop = () => {
           const blob = new Blob(this.recordedChunks, { type: "video/webm" });
           const url = URL.createObjectURL(blob);
           const a = document.createElement("a");
-          a.style.display = "none";
           a.href = url;
-          a.download = `meeting-record-${Date.now()}.webm`;
+          a.download = `${
+            this.meetingTitle
+          }录制_${new Date().toLocaleString()}.webm`;
           document.body.appendChild(a);
           a.click();
-          window.URL.revokeObjectURL(url);
-          this.$message.success("视频已保存到本地");
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+          this.$message.success("录制完成");
         };
-
         this.mediaRecorder.start();
         this.isRecording = true;
-        this.$message.warning("会议录制已开始");
-      } catch (err) {
-        console.error("录制错误:", err);
-        this.$message.error("无法启动录制: " + err.message);
+        this.recordingStartTime = new Date();
+        this.startRecordingTimer();
+        this.$message.warning("录制中");
+      } catch (e) {
+        this.$message.error("录制失败");
       }
     },
+
+    // 停止录制
     stopRecording() {
       if (this.mediaRecorder && this.isRecording) {
         this.mediaRecorder.stop();
+        this.mediaRecorder.stream.getTracks().forEach((t) => t.stop());
         this.isRecording = false;
-        this.mediaRecorder.stream.getTracks().forEach((track) => track.stop());
+        this.stopRecordingTimer();
       }
     },
-    initCanvas() {
-      const canvas = this.$refs.drawingCanvas;
-      const container = this.$refs.videoContainer;
-      canvas.width = container.clientWidth;
-      canvas.height = container.clientHeight;
-      this.ctx = canvas.getContext("2d");
-      this.ctx.lineWidth = 3;
-      this.ctx.lineCap = "round";
-      this.ctx.strokeStyle = "#FF0000";
+
+    // 录制计时
+    startRecordingTimer() {
+      this.recordingTimer = setInterval(() => {
+        const sec = Math.floor((new Date() - this.recordingStartTime) / 1000);
+        const h = String(Math.floor(sec / 3600)).padStart(2, "0");
+        const m = String(Math.floor((sec % 3600) / 60)).padStart(2, "0");
+        const s = String(sec % 60).padStart(2, "0");
+        this.recordingTime = `${h}:${m}:${s}`;
+      }, 1000);
     },
-    toggleDraw() {
-      this.isDrawingMode = !this.isDrawingMode;
-      if (!this.isDrawingMode) {
-        this.clearCanvas();
+
+    // 停止录制计时
+    stopRecordingTimer() {
+      clearInterval(this.recordingTimer);
+      this.recordingTime = "00:00:00";
+    },
+
+    // ==================== 【9】截图 ====================
+    takeScreenshot() {
+      this.saveMeetingSnapshot();
+    },
+
+    // 保存会议界面截图
+    async saveMeetingSnapshot() {
+      try {
+        const html2canvas = (await import("html2canvas")).default;
+        const container = document.querySelector(".meeting-container");
+        if (!container) {
+          this.$message.error("截图失败：未找到会议界面");
+          return;
+        }
+        const canvas = await html2canvas(container, {
+          useCORS: true,
+          scale: 1.5,
+          logging: false,
+          allowTaint: false,
+        });
+        const link = document.createElement("a");
+        link.download = `会诊截图_${new Date().toLocaleString()}.png`;
+        link.href = canvas.toDataURL("image/png");
+        link.click();
+        this.$message.success("截图已保存");
+      } catch (err) {
+        console.error("截图失败", err);
+        this.$message.error("截图失败");
       }
     },
-    clearCanvas() {
-      const canvas = this.$refs.drawingCanvas;
-      this.ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // ==================== 【10】计时器 ====================
+    toggleTimer() {
+      this.timerRunning ? this.pauseTimer() : this.startTimer();
     },
-    getCoordinates(e) {
-      const canvas = this.$refs.drawingCanvas;
-      const rect = canvas.getBoundingClientRect();
-      return {
-        x: e.clientX - rect.left,
-        y: e.clientY - rect.top,
-      };
+    startTimer() {
+      if (this.timerInterval) return;
+      this.timerRunning = true;
+      this.timerInterval = setInterval(() => this.timer++, 1000);
+      this.$message.info("计时开始");
     },
-    startDrawing(e) {
-      this.drawing = true;
-      const coords = this.getCoordinates(e);
-      this.lastX = coords.x;
-      this.lastY = coords.y;
+    pauseTimer() {
+      clearInterval(this.timerInterval);
+      this.timerInterval = null;
+      this.timerRunning = false;
+      this.$message.info("计时暂停");
     },
-    draw(e) {
-      if (!this.drawing) return;
-      const coords = this.getCoordinates(e);
-      this.ctx.beginPath();
-      this.ctx.moveTo(this.lastX, this.lastY);
-      this.ctx.lineTo(coords.x, coords.y);
-      this.ctx.stroke();
-      this.lastX = coords.x;
-      this.lastY = coords.y;
+
+    // ==================== 【11】网络状态监控 ====================
+    startNetworkMonitoring() {
+      setInterval(() => {
+        if (!window.hirtcwebsdk) return;
+        const s = window.hirtcwebsdk.getNetworkStats();
+        if (s?.rtt) {
+          this.networkDelay = Math.round(s.rtt);
+          if (this.networkDelay < 100)
+            this.networkQuality = { text: "优秀", color: "#00e676" };
+          else if (this.networkDelay < 300)
+            this.networkQuality = { text: "良好", color: "#00e676" };
+          else if (this.networkDelay < 600)
+            this.networkQuality = { text: "一般", color: "#ffc107" };
+          else this.networkQuality = { text: "差", color: "#f56c6c" };
+        }
+      }, 2000);
     },
-    stopDrawing() {
-      this.drawing = false;
+
+    // ==================== 【12】设置模块 ====================
+    openSettingDialog() {
+      this.settingDialogVisible = true;
     },
-    takeScreenshot() {
-      this.$message.success("截图已保存");
+    async onSettingDialogOpen() {
+      this.tempSetting = { ...this.globalSetting };
+      await this.enumerateDevices();
     },
-    endMeeting() {
-      this.$confirm("确定要结束会议吗?", "提示", { type: "warning" }).then(
-        () => {
-          // 结束时释放设备
-          if (this.localStream) {
-            this.localStream.getTracks().forEach((t) => t.stop());
-          }
-          this.$message.success("会议已结束");
-        }
+
+    // 枚举音视频设备
+    async enumerateDevices() {
+      try {
+        await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        this.videoDeviceList = devices.filter((d) => d.kind === "videoinput");
+        this.audioInList = devices.filter((d) => d.kind === "audioinput");
+        this.audioOutList = devices.filter((d) => d.kind === "audiooutput");
+      } catch (e) {
+        this.$message.warning("请允许音视频权限以查看设备");
+      }
+    },
+
+    // 保存设置
+    saveSetting() {
+      this.globalSetting = { ...this.tempSetting };
+      this.meetingTitle = this.globalSetting.meetingTitle;
+      this.resolution = this.globalSetting.resolution;
+      this.brushColor = this.globalSetting.brushColor;
+      this.brushLineWidth = this.globalSetting.brushWidth;
+      this.initCanvas();
+      localStorage.setItem(
+        "meetingGlobalSetting",
+        JSON.stringify(this.globalSetting)
       );
+      this.settingDialogVisible = false;
+      this.$message.success("设置已保存");
+    },
+
+    // 加载本地缓存设置
+    loadLocalSetting() {
+      const cache = localStorage.getItem("meetingGlobalSetting");
+      if (cache) {
+        this.globalSetting = JSON.parse(cache);
+        this.meetingTitle = this.globalSetting.meetingTitle;
+        this.resolution = this.globalSetting.resolution;
+        this.brushColor = this.globalSetting.brushColor;
+        this.brushLineWidth = this.globalSetting.brushWidth;
+      }
+    },
+
+    // ==================== 【13】会议成员、邀请、病例 ====================
+    handleInvite() {
+      this.inviteDialogVisible = true;
+    },
+    confirmInvite() {
+      this.$message.success("邀请成功");
+      this.inviteDialogVisible = false;
+    },
+    fetchMeetingInfo() {
+      const q = this.$route.query;
+      if (q.title) this.meetingTitle = q.title;
+      if (q.code) this.meetingCode = q.code;
+      if (q.resolution) this.resolution = q.resolution;
+      if (q.frameRate) this.frameRate = q.frameRate;
+    },
+    updateParticipantCount() {
+      if (window.hirtcwebsdk) {
+        const us = window.hirtcwebsdk.getUsers();
+        this.participantCount = us ? us.length : 1;
+      }
+    },
+
+    // ==================== 【14】窗口与会议控制 ====================
+    updateClock() {
+      this.currentTime = new Date().toLocaleTimeString("zh-CN", {
+        hour12: false,
+      });
+    },
+    minimizeWindow() {
+      this.$router.push("/video/index");
+    },
+    closeWindow() {
+      this.$confirm("确定退出会诊?", "提示", { type: "warning" }).then(() => {
+        this.$store.dispatch("app/toggleSideBarHide", false);
+        this.$store.dispatch("settings/changeSetting", {
+          key: "fixedHeader",
+          value: true,
+        });
+        this.$store.dispatch("settings/changeSetting", {
+          key: "tagsView",
+          value: true,
+        });
+        this.$router.push("/");
+      });
+    },
+    endMeeting() {
+      this.$confirm("确定结束会议?", "提示", { type: "warning" }).then(() => {
+        this.stopShare();
+        this.localStream?.getTracks().forEach((t) => t.stop());
+        this.$store.dispatch("app/toggleSideBarHide", false);
+        this.$store.dispatch("settings/changeSetting", {
+          key: "fixedHeader",
+          value: true,
+        });
+        this.$store.dispatch("settings/changeSetting", {
+          key: "tagsView",
+          value: true,
+        });
+        window.name === "consultationWindow"
+          ? window.close()
+          : this.$router.push("/");
+      });
+    },
+
+    // 快捷键监听
+    handleKeydown(e) {
+      if (e.key === "Escape") {
+        const layer = document.getElementById("markEditor");
+        if (layer) layer.remove();
+        this.isSelectingCapture = false;
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s") {
+        e.preventDefault();
+        this.takeScreenshot();
+      }
     },
   },
   beforeDestroy() {
+    // 页面销毁清理所有资源
     clearInterval(this.timerInterval);
-    if (this.isRecording) this.stopRecording();
+    clearInterval(this.voiceMonitorTimer);
+    this.stopRecording();
+    this.stopLaser();
+    this.stopShare();
+    this.closeCaptureCard();
     window.removeEventListener("resize", this.initCanvas);
-    // 退出释放摄像头麦克风
-    if (this.localStream) {
-      this.localStream.getTracks().forEach((track) => track.stop());
-    }
+    window.removeEventListener("keydown", this.handleKeydown);
+    this.localStream?.getTracks().forEach((t) => t.stop());
   },
 };
 </script>
 
-<style scoped>
-/* 全局重置 */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-body,
-html {
-  height: 100%;
-  overflow: hidden;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-}
-
+<style lang="scss">
 .meeting-container {
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background-color: #004d40; /* 深绿色背景，类似截图 */
-  color: #fff;
+  background-color: #004d40;
+  color: #ffffff;
 }
 
-/* 顶部 */
 .top-bar {
   height: 40px;
-  background-color: #00695c;
+  background: linear-gradient(180deg, #00695c 0%, #004d40 100%);
   display: flex;
   align-items: center;
-  padding: 0 15px;
+  padding: 0 10px;
   justify-content: space-between;
-}
-.top-bar .logo {
-  font-weight: bold;
-}
-.top-bar .title {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 14px;
-}
-.window-controls i {
-  margin-left: 10px;
-  cursor: pointer;
+  border-bottom: 1px solid #00796b;
+
+  .logo {
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+
+    img {
+      width: 30px;
+      margin-right: 5px;
+    }
+  }
+
+  .title {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 13px;
+    color: #b2dfdb;
+  }
+
+  .window-controls {
+    display: flex;
+    align-items: center;
+
+    i {
+      margin-left: 10px;
+      cursor: pointer;
+      font-size: 13px;
+      color: #b2dfdb;
+    }
+  }
 }
 
-/* 状态栏 */
 .status-bar {
-  height: 30px;
+  height: 40px;
   background-color: #004d40;
-  border-bottom: 1px solid #00796b;
   display: flex;
   align-items: center;
-  padding: 0 15px;
-  font-size: 12px;
+  padding: 0 10px;
   color: #b2dfdb;
-}
-.divider {
-  margin: 0 8px;
-  color: #00796b;
+
+  .status-item {
+    font-family: Consolas, monospace;
+  }
+
+  .divider {
+    margin: 0 6px;
+    color: #00796b;
+  }
 }
 
-/* 主体内容 */
 .main-content {
   flex: 1;
   display: flex;
   overflow: hidden;
-  position: relative;
 }
 
 .video-stage {
   flex: 1;
   background-color: #000;
   position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.placeholder-text {
-  color: #333;
-  font-size: 24px;
-  z-index: 1;
-}
 
-/* Canvas 覆盖层 */
-.drawing-canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  cursor: crosshair;
-  z-index: 10; /* 确保在视频上方 */
+  .laser-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 15;
+    pointer-events: none;
+  }
+
+  .drawing-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    cursor: crosshair;
+    z-index: 10;
+  }
+
+  .share-preview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    z-index: 5;
+  }
 }
 
 .sidebar {
-  width: 300px;
+  width: 380px;
   background-color: #004d40;
   border-left: 1px solid #00796b;
-  padding: 10px;
   display: flex;
   flex-direction: column;
-  align-items: center;
-}
-.remote-user {
-  width: 100%;
-  background: #000;
-  margin-bottom: 10px;
-  position: relative;
-}
-.video-box img,
-.video-box video {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-.user-info {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  padding: 5px;
-  font-size: 12px;
-  display: flex;
-  justify-content: space-between;
+
+  .remote-video-box {
+    padding: 6px;
+
+    .video-area {
+      width: 100%;
+      height: 210px;
+      background-color: #00584d;
+      border: 1px solid #00796b;
+      position: relative;
+
+      .local-camera {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .voice-bar-container {
+        position: absolute;
+        left: 10px;
+        bottom: 30px;
+        display: flex;
+        align-items: flex-end;
+        height: 25px;
+        gap: 2px;
+        z-index: 10;
+
+        .voice-bar {
+          width: 3px;
+          background-color: #00e676;
+          border-radius: 1px;
+          transition: height 0.1s ease;
+        }
+      }
+
+      .video-controls {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 24px;
+        background-color: rgba(0, 77, 64, 0.7);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 8px;
+
+        .signal-bars {
+          display: flex;
+          align-items: flex-end;
+          gap: 2px;
+          height: 14px;
+
+          span {
+            width: 3px;
+            background-color: #00e676;
+            border-radius: 1px;
+
+            @for $i from 1 through 5 {
+              &:nth-child(#{$i}) {
+                height: #{$i * 3}px;
+              }
+            }
+          }
+        }
+
+        .volume-icon {
+          font-size: 16px;
+          color: #00e676;
+        }
+      }
+    }
+  }
 }
 
-/* 底部工具栏 */
 .bottom-bar {
-  height: 80px;
-  background-color: #004d40;
+  height: 90px;
+  background: linear-gradient(180deg, #004d40 0%, #00695c 100%);
   border-top: 1px solid #00796b;
   display: flex;
   align-items: center;
-  padding: 0 20px;
-}
+  padding: 0 12px;
 
-.btn-create {
-  margin-right: 30px;
-  height: 60px;
-  background-color: #00acc1;
-  border: none;
-  font-weight: bold;
-}
+  .left-section {
+    margin-right: 20px;
+  }
 
-.tools {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  gap: 20px;
-}
+  .tools-section {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    gap: 18px;
+    align-items: center;
 
-.tool-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #fff;
-  cursor: pointer;
-  font-size: 12px;
-  width: 60px;
-}
-.tool-item i {
-  font-size: 24px;
-  margin-bottom: 5px;
-}
-.tool-item:hover {
-  color: #64ffda;
+    .tool-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: #fff;
+      cursor: pointer;
+      font-size: 11px;
+      width: 60px;
+      padding: 8px 4px;
+      border-radius: 4px;
+      position: relative;
+      transition: background-color 0.2s ease;
+
+      .icon-wrapper {
+        position: relative;
+      }
+
+      i {
+        font-size: 22px;
+        margin-bottom: 3px;
+      }
+
+      &:hover {
+        background-color: #00897b;
+      }
+
+      &.active {
+        background-color: #00897b;
+      }
+
+      .slash-line {
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 22px;
+        height: 22px;
+        border-top: 2px solid #f44336;
+        transform: rotate(45deg);
+        transform-origin: left top;
+        pointer-events: none;
+      }
+    }
+
+    .divider-line {
+      width: 1px;
+      height: 30px;
+      background-color: #00796b;
+      margin: 0 4px;
+    }
+
+    .end-btn {
+      color: #ff5252;
+
+      &:hover {
+        background-color: rgba(255, 82, 82, 0.2);
+      }
+    }
+  }
+
+  .right-section {
+    margin-left: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    .clock {
+      margin-top: 3px;
+      color: #b2dfdb;
+      font-family: Consolas, monospace;
+    }
+  }
 }
-.tool-item.active {
-  color: #ffeb3b;
-} /* 画笔激活状态 */
+
 .is-recording {
-  color: red;
+  color: #ef5350;
   animation: blink 1s infinite;
 }
 
 @keyframes blink {
+  0% {
+    opacity: 1;
+  }
   50% {
     opacity: 0.5;
   }
-}
-
-.right-actions {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
-  height: 60px;
-}
-.clock {
-  font-size: 12px;
-  margin-top: 5px;
-  color: #b2dfdb;
+  100% {
+    opacity: 1;
+  }
 }
 </style>
\ No newline at end of file