From 0323f7332e1063cb7a04431f61456b6c11b8a3f1 Mon Sep 17 00:00:00 2001
From: ysn <2126564605@qq.com>
Date: Wed, 20 May 2026 15:09:21 +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

---
 src/router/index.js                           |   19 +-
 .../message/components/CreateGroupDialog.vue  |    1 +
 src/views/video/index.vue                     |  514 ------
 src/views/videoCommunication/caseStudy.vue    | 1324 +++++++++++++++
 src/views/videoCommunication/index.vue        |  361 ++--
 .../videoCommunication/qualityControl.vue     | 1097 +++++++++---
 .../realTimeConsultation.vue                  |   26 +-
 src/views/videoCommunication/training.vue     | 1470 ++++++++++-------
 8 files changed, 3360 insertions(+), 1452 deletions(-)
 delete mode 100644 src/views/video/index.vue
 create mode 100644 src/views/videoCommunication/caseStudy.vue

diff --git a/src/router/index.js b/src/router/index.js
index 7a3c309..088dcf3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -81,7 +81,7 @@ export const constantRoutes = [
     children: [
       {
         path: 'index',
-        component: () => import('@/views/video/index'),
+        component: () => import('@/views/videoCommunication/index'),
         name: 'Index',
         meta: { title: '视讯', icon: 'guide' }
       },
@@ -90,21 +90,28 @@ export const constantRoutes = [
         component: () => import('@/views/videoCommunication/realTimeConsultation'),
         name: 'RealTimeConsultation',
         hidden: true,
-        meta: { title: '实时会诊', icon: 'dashboard', activeMenu: '/video' }
+        meta: { title: '实时会诊', icon: 'dashboard', activeMenu: '/videoCommunication' }
       },
       {
         path: 'training',
         component: () => import('@/views/videoCommunication/training'),
         name: 'Training',
         hidden: true,
-        meta: { title: '带教培训', icon: 'dashboard', activeMenu: '/video' }
+        meta: { title: '带教培训', icon: 'dashboard', activeMenu: '/videoCommunication' }
       },
       {
         path: 'qualityControl',
         component: () => import('@/views/videoCommunication/qualityControl'),
         name: 'QualityControl',
         hidden: true,
-        meta: { title: '在线质控', icon: 'dashboard', activeMenu: '/video' }
+        meta: { title: '在线质控', icon: 'dashboard', activeMenu: '/videoCommunication' }
+      },
+      {
+        path: 'caseStudy',
+        component: () => import('@/views/videoCommunication/caseStudy'),
+        name: 'CaseStudy',
+        hidden: true,
+        meta: { title: '病例研讨', icon: 'dashboard', activeMenu: '/videoCommunication' }
       },
     ]
   },
@@ -117,7 +124,7 @@ export const constantRoutes = [
         path: 'index',
         component: () => import('@/views/message/index'),
         name: 'Message',
-        meta: { title: '消息', icon: 'message'}
+        meta: { title: '消息', icon: 'message' }
       },
     ]
   },
@@ -143,7 +150,7 @@ export const constantRoutes = [
         path: 'index',
         component: () => import('@/views/knowledge/index'),
         name: 'Knowledge',
-        meta: { title: '知识库', icon: 'knowledge'}
+        meta: { title: '知识库', icon: 'knowledge' }
       },
     ]
   },
diff --git a/src/views/message/components/CreateGroupDialog.vue b/src/views/message/components/CreateGroupDialog.vue
index 33da64a..2c84f41 100644
--- a/src/views/message/components/CreateGroupDialog.vue
+++ b/src/views/message/components/CreateGroupDialog.vue
@@ -348,6 +348,7 @@ export default {
                   children: [
                     { id: "quanxuan", name: "全选" },
                     { id: "chenwenhai", name: "陈文海1", type: "user" },
+                    { id: "chenwenhai1", name: "陈文海2", type: "user" },
                   ],
                 },
               ],
diff --git a/src/views/video/index.vue b/src/views/video/index.vue
deleted file mode 100644
index 4222471..0000000
--- a/src/views/video/index.vue
+++ /dev/null
@@ -1,514 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 1. 会议模式卡片 -->
-    <el-card class="card" style="margin-bottom: 10px">
-      <div slot="header" class="card-header">
-        <span class="line"></span>
-        会议模式
-      </div>
-      <!-- 口令入会区域 -->
-      <div class="join-area">
-        <el-input
-          v-model="meetingCode"
-          placeholder="请输入数字口令"
-          class="join-input"
-          @keyup.enter="joinMeeting"
-        />
-        <el-button type="success" class="join-btn" @click="joinMeeting">
-          入会
-        </el-button>
-      </div>
-      <!-- 四种模式卡片 -->
-      <div class="mode-list">
-        <div
-          v-for="(mode, index) in meetingModes"
-          :key="index"
-          :class="['mode-item', mode.color]"
-          @click="handleModeClick(mode)"
-        >
-          <div class="title">
-            {{ mode.title }}
-          </div>
-          <div class="icon-bg">
-            <i :class="mode.icon"></i>
-          </div>
-        </div>
-      </div>
-    </el-card>
-    <!-- 2. 会诊记录卡片 -->
-    <el-card class="card">
-      <div slot="header" class="card-header">
-        <span class="line"></span>
-        会诊记录
-      </div>
-      <!-- 会诊表格 -->
-      <div class="table-wrapper">
-        <el-table
-          v-loading="loading"
-          :data="recordList"
-          :show-header="false"
-          stripe
-          height="calc(100vh - 550px)"
-        >
-          <el-table-column label="头像" prop="avatar" align="center" width="50">
-            <template slot-scope="scope">
-              <el-avatar :src="scope.row.avatar" />
-            </template>
-          </el-table-column>
-          <el-table-column label="会议名称" prop="name" align="center" />
-          <el-table-column label="类型" prop="type" align="center" />
-          <el-table-column label="时间" prop="time" align="center" />
-          <el-table-column label="操作" align="center" width="50">
-            <template slot-scope="scope">
-              <el-button
-                type="text"
-                icon="el-icon-more"
-                class="more-btn"
-                @click="showDetail(scope.row)"
-              />
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <!-- 分页 -->
-      <pagination
-        v-show="queryParams.total > 0"
-        :total="queryParams.total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
-    </el-card>
-    <!-- 会诊详情弹框 -->
-    <el-dialog
-      title="会诊详情"
-      :visible.sync="showDetailDialog"
-      width="400px"
-      :close-on-click-modal="false"
-    >
-      <el-form :model="selectedRecord" label-width="110px">
-        <el-form-item label="会议状态">
-          {{ selectedRecord.status || "已结束" }}
-        </el-form-item>
-        <el-divider />
-        <el-form-item label="会议时间">
-          {{ selectedRecord.time || "" }}
-        </el-form-item>
-        <el-form-item label="会议持续时间">
-          {{ selectedRecord.duration || "0分钟0秒" }}
-        </el-form-item>
-        <el-form-item label="病例数记录">
-          <el-form-item label="总病例数">
-            {{ selectedRecord.totalCases || "2" }}
-          </el-form-item>
-          <el-form-item label="阳性病例数">
-            {{ selectedRecord.positiveCases || "0" }}
-          </el-form-item>
-          <el-form-item label="阴性病例数">
-            {{ selectedRecord.negativeCases || "0" }}
-          </el-form-item>
-          <el-form-item label="上级转诊病例数">
-            {{ selectedRecord.referralCases || "4" }}
-          </el-form-item>
-        </el-form-item>
-        <el-divider />
-        <el-form-item label="会议发起人">
-          {{ selectedRecord.sponsor || "" }}
-        </el-form-item>
-        <el-divider />
-        <el-form-item label="参会人员">
-          {{ selectedRecord.participants || "" }}
-        </el-form-item>
-      </el-form>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-// import { listMeeting, getMeeting, joinMeeting } from "@/api/videoCommunication";
-
-// 假数据：和截图保持一致
-const mockRecordList = [
-  {
-    id: 1,
-    name: "超声事业部的云诊室",
-    type: "会诊",
-    time: "2026-05-07 09:09:23",
-    avatar:
-      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
-    iconType: "blue",
-    duration: "0分钟0秒",
-    totalCases: "2",
-    positiveCases: "0",
-    negativeCases: "0",
-    referralCases: "4",
-    status: "已结束",
-    sponsor: "张三",
-    participants: "李四、王五",
-  },
-  {
-    id: 2,
-    name: "超声事业部的云诊室",
-    type: "会诊",
-    time: "2026-05-06 13:40:51",
-    avatar:
-      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
-    iconType: "blue",
-    duration: "0分钟0秒",
-    totalCases: "2",
-    positiveCases: "0",
-    negativeCases: "0",
-    referralCases: "4",
-    status: "已结束",
-    sponsor: "张三",
-    participants: "李四、王五",
-  },
-  {
-    id: 3,
-    name: "超声事业部的云教学",
-    type: "教学",
-    time: "2026-05-06 13:40:38",
-    avatar:
-      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
-    iconType: "orange",
-    duration: "0分钟0秒",
-    totalCases: "2",
-    positiveCases: "0",
-    negativeCases: "0",
-    referralCases: "4",
-    status: "已结束",
-    sponsor: "张三",
-    participants: "李四、王五",
-  },
-  {
-    id: 4,
-    name: "超声事业部的云诊室",
-    type: "会诊",
-    time: "2026-04-29 13:16:48",
-    avatar:
-      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
-    iconType: "blue",
-    duration: "0分钟0秒",
-    totalCases: "2",
-    positiveCases: "0",
-    negativeCases: "0",
-    referralCases: "4",
-    status: "已结束",
-    sponsor: "张三",
-    participants: "李四、王五",
-  },
-  {
-    id: 5,
-    name: "质控会议-6019100",
-    type: "质控",
-    time: "2026-04-20 18:14:20",
-    avatar:
-      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
-    iconType: "blue",
-    duration: "0分钟0秒",
-    totalCases: "2",
-    positiveCases: "0",
-    negativeCases: "0",
-    referralCases: "4",
-    status: "已结束",
-    sponsor: "张三",
-    participants: "李四、王五",
-  },
-  {
-    id: 6,
-    name: "超声事业部的云诊室",
-    type: "会诊",
-    time: "2026-04-20 18:14:09",
-    avatar:
-      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
-    iconType: "blue",
-    duration: "0分钟0秒",
-    totalCases: "2",
-    positiveCases: "0",
-    negativeCases: "0",
-    referralCases: "4",
-    status: "已结束",
-    sponsor: "张三",
-    participants: "李四、王五",
-  },
-];
-
-export default {
-  name: "VideoPage",
-  data() {
-    return {
-      meetingCode: "",
-      loading: false,
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        total: 125, // 和截图保持一致：共125场
-      },
-      meetingModes: [
-        {
-          title: "实时会诊",
-          icon: "el-icon-user-solid",
-          color: "blue",
-          routeName: "RealTimeConsultation",
-          routePath: "/videoCommunication/realTimeConsultation",
-        },
-        {
-          title: "带教培训",
-          icon: "el-icon-video-play",
-          color: "yellow",
-          routeName: "Training",
-          routePath: "/videoCommunication/training",
-        },
-        {
-          title: "在线质控",
-          icon: "el-icon-lightbulb",
-          color: "grayblue",
-          routeName: "QualityControl",
-          routePath: "/videoCommunication/qualityControl",
-        },
-        {
-          title: "病例研讨",
-          icon: "el-icon-chat-line-square",
-          color: "greenblue",
-          routeName: "CaseDiscussion",
-          routePath: "/videoCommunication/caseDiscussion",
-        },
-      ],
-      recordList: [],
-      showDetailDialog: false,
-      selectedRecord: {},
-    };
-  },
-  computed: {
-    totalPage() {
-      return Math.ceil(this.queryParams.total / this.queryParams.pageSize);
-    },
-  },
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    // 口令入会
-    joinMeeting() {
-      if (!this.meetingCode.trim()) {
-        this.$message.warning("请输入数字口令");
-        return;
-      }
-      this.loading = true;
-      // 模拟接口调用
-      // joinMeeting({ meetingCode: this.meetingCode })
-      //   .then(() => {
-      //     this.$message.success("成功加入会议");
-      //     this.meetingCode = "";
-      //   })
-      //   .catch(() => {
-      //     this.$message.error("入会失败，请检查口令是否正确");
-      //   })
-      //   .finally(() => {
-      //     this.loading = false;
-      //   });
-
-      // 模拟请求
-      setTimeout(() => {
-        this.$message.success("成功加入会议");
-        this.meetingCode = "";
-        this.loading = false;
-      }, 500);
-    },
-
-    // 处理会议模式点击
-    handleModeClick(mode) {
-      this.$router.push({ name: mode.routeName });
-    },
-
-    // 查询会诊记录列表（含接口失败降级逻辑）
-    async getList() {
-      this.loading = true;
-      try {
-        // 真实接口
-        // const response = await listMeeting(this.queryParams);
-        // this.recordList = response.rows;
-        // this.queryParams.total = response.total;
-
-        // 模拟接口调用（这里直接抛出错误，测试降级逻辑）
-        throw new Error("接口请求失败");
-      } catch (error) {
-        console.warn("接口请求失败，使用假数据：", error);
-        this.$message.warning("获取会议列表失败，已加载模拟数据");
-        // 接口失败时，使用假数据
-        this.recordList = [...mockRecordList];
-        this.queryParams.total = 125;
-      } finally {
-        this.loading = false;
-      }
-    },
-
-    // 分页操作
-    goFirst() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    goPrev() {
-      if (this.queryParams.pageNum > 1) {
-        this.queryParams.pageNum--;
-        this.getList();
-      }
-    },
-    goNext() {
-      if (this.queryParams.pageNum < this.totalPage) {
-        this.queryParams.pageNum++;
-        this.getList();
-      }
-    },
-    goLast() {
-      this.queryParams.pageNum = this.totalPage;
-      this.getList();
-    },
-
-    // 显示详情弹框（含接口失败降级逻辑）
-    async showDetail(record) {
-      this.loading = true;
-      try {
-        // 真实接口
-        // const response = await getMeeting(record.id);
-        // this.selectedRecord = response.data;
-
-        // 模拟接口调用失败，直接使用当前行数据
-        throw new Error("获取详情失败");
-      } catch (error) {
-        console.warn("获取详情接口失败，使用当前记录数据：", error);
-        this.$message.warning("获取会议详情失败，已加载基础信息");
-        this.selectedRecord = { ...record };
-      } finally {
-        this.showDetailDialog = true;
-        this.loading = false;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.app-container {
-  padding: 10px;
-}
-
-// 卡片通用样式
-.card {
-  .card-header {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    font-weight: 500;
-    color: #333;
-
-    .line {
-      display: inline-block;
-      width: 3px;
-      height: 16px;
-      background-color: #009696;
-      margin-right: 8px;
-    }
-  }
-
-  // 口令入会区域
-  .join-area {
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-
-    .join-input {
-      width: 250px;
-      margin-right: 10px;
-    }
-
-    .join-btn {
-      background-color: #009696;
-      border-color: #009696;
-      color: #fff;
-
-      &:hover {
-        background-color: #00796b;
-        border-color: #00796b;
-      }
-    }
-  }
-
-  // 会议模式列表
-  .mode-list {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 10px;
-
-    .mode-item {
-      height: 115px;
-      border-radius: 8px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      color: #fff;
-      position: relative;
-      overflow: hidden;
-      cursor: pointer;
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-
-      &:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
-      }
-
-      &:active {
-        transform: translateY(-1px);
-      }
-
-      .title {
-        font-size: 18px;
-        margin-bottom: 10px;
-        z-index: 1;
-      }
-
-      .icon-bg {
-        position: absolute;
-        right: 20px;
-        bottom: 20px;
-        font-size: 40px;
-        opacity: 0.3;
-      }
-
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 60px;
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 100% 100% 0 0;
-      }
-
-      &.blue {
-        background: linear-gradient(to right, #67c2ef, #2196f3);
-      }
-
-      &.yellow {
-        background: linear-gradient(to right, #ffd54f, #ff9800);
-      }
-
-      &.grayblue {
-        background: linear-gradient(to right, #b0bec5, #29b6f6);
-      }
-
-      &.greenblue {
-        background: linear-gradient(to right, #43d8c9, #29b6f6);
-      }
-    }
-  }
-
-  // 会诊记录表格
-  .more-btn {
-    color: #009696;
-    cursor: pointer;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/videoCommunication/caseStudy.vue b/src/views/videoCommunication/caseStudy.vue
new file mode 100644
index 0000000..14d1735
--- /dev/null
+++ b/src/views/videoCommunication/caseStudy.vue
@@ -0,0 +1,1324 @@
+<template>
+  <div class="meeting-container">
+    <!-- 顶部导航栏 -->
+    <header class="top-bar">
+      <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>
+
+    <!-- 顶部状态信息条 -->
+    <div class="status-bar">
+      <span class="status-item">会议口令:{{ meetingCode }}</span>
+      <span class="divider">|</span>
+      <span class="status-item">{{ participantCount }}人在会议中</span>
+      <span class="divider">|</span>
+      <span class="status-item">{{ resolution }}</span>
+      <span class="divider">|</span>
+      <span class="status-item">{{ frameRate }}fps</span>
+      <span class="divider">|</span>
+      <span class="status-item">网络延迟 {{ networkDelay }}ms</span>
+      <span class="divider">|</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>
+
+    <!-- 主视频区域 -->
+    <main class="main-content">
+      <div class="video-container">
+        <!-- 参与者名称条 -->
+        <div class="participant-name">{{ participantName }}</div>
+        <!-- 主视频画面 -->
+        <video
+          ref="localVideo"
+          class="main-video"
+          autoplay
+          muted
+          playsinline
+        />
+        <!-- 网络信号条（右上角） -->
+        <div class="network-signal">
+          <span></span><span></span><span></span><span></span>
+        </div>
+      </div>
+    </main>
+
+    <!-- 底部工具栏 -->
+    <footer class="bottom-bar">
+      <div class="tools-section">
+        <div class="tool-item" @click="toggleMic">
+          <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">
+          <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"
+          @click="toggleShare"
+          :class="{ active: isSharing }"
+        >
+          <i class="el-icon-share"></i>
+          <span>{{ isSharing ? "停止共享" : "共享" }}</span>
+        </div>
+        <div class="tool-item" @click="handleInvite">
+          <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>
+        </div>
+        <div class="tool-item" @click="takeScreenshot">
+          <i class="el-icon-camera"></i>
+          <span>截图</span>
+        </div>
+        <div class="tool-item" @click="toggleTimer">
+          <i class="el-icon-timer"></i>
+          <span>{{ timerRunning ? "暂停" : "计时器" }}</span>
+        </div>
+        <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-section">
+        <span class="clock">{{ currentTime }}</span>
+      </div>
+    </footer>
+
+    <!-- 邀请弹窗 -->
+    <CreateGroupDialog
+      :visible.sync="inviteDialogVisible"
+      title="通讯录邀请"
+      @confirm="handleInviteConfirm"
+      @close="inviteDialogVisible = false"
+    />
+
+    <!-- 设置弹窗 -->
+    <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";
+import CreateGroupDialog from "@/views/message/components/CreateGroupDialog";
+
+export default {
+  name: "MeetingRoom",
+  components: {
+    CaseFormDialog,
+    CreateGroupDialog,
+  },
+  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,
+
+      // ==================== 激光笔工具 ====================
+      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()
+        .padStart(2, "0");
+      const m = Math.floor((this.timer % 3600) / 60)
+        .toString()
+        .padStart(2, "0");
+      const s = (this.timer % 60).toString().padStart(2, "0");
+      return `${h}:${m}:${s}`;
+    },
+  },
+  mounted() {
+    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({
+          video: true,
+          audio: true,
+        });
+        this.localStream = stream;
+        this.$refs.localVideo.srcObject = stream;
+        this.startVoiceMonitor();
+      } catch (err) {
+        console.error("打开设备失败", err);
+        this.$message.error("请允许摄像头/麦克风权限");
+      }
+    },
+
+    // 麦克风开关
+    toggleMic() {
+      if (!this.localStream) return;
+      this.micOn = !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((t) => (t.enabled = this.camOn));
+      this.$message[this.camOn ? "success" : "warning"](
+        this.camOn ? "摄像头已打开" : "已关闭"
+      );
+    },
+
+    // ==================== 【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("语音检测不支持");
+      }
+    },
+
+    // ==================== 【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;
+        };
+    },
+
+    // 关闭采集卡并释放资源
+    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);
+      }
+    },
+
+    // ==================== 【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("共享失败");
+      }
+    },
+
+    // 停止共享
+    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();
+    },
+
+    // ==================== 【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);
+    },
+
+    // 画笔开关
+    toggleDraw() {
+      this.isDrawingMode = !this.isDrawingMode;
+      this.$message.info(this.isDrawingMode ? "画笔开启" : "画笔关闭");
+    },
+
+    // 开始绘制
+    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, {
+          mimeType: "video/webm;codecs=vp8,opus",
+        });
+        this.recordedChunks = [];
+        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.href = url;
+          a.download = `${
+            this.meetingTitle
+          }录制_${new Date().toLocaleString()}.webm`;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+          this.$message.success("录制完成");
+        };
+        this.mediaRecorder.start();
+        this.isRecording = true;
+        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.stopRecordingTimer();
+      }
+    },
+
+    // 录制计时
+    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);
+    },
+
+    // 停止录制计时
+    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("截图失败");
+      }
+    },
+
+    // ==================== 【10】计时器 ====================
+    toggleTimer() {
+      this.timerRunning ? this.pauseTimer() : this.startTimer();
+    },
+    startTimer() {
+      if (this.timerInterval) return;
+      this.timerRunning = true;
+      this.timerInterval = setInterval(() => this.timer++, 1000);
+      this.$message.info("计时开始");
+    },
+    pauseTimer() {
+      clearInterval(this.timerInterval);
+      this.timerInterval = null;
+      this.timerRunning = false;
+      this.$message.info("计时暂停");
+    },
+
+    // ==================== 【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);
+    },
+
+    // ==================== 【12】设置模块 ====================
+    openSettingDialog() {
+      this.settingDialogVisible = true;
+    },
+    async onSettingDialogOpen() {
+      this.tempSetting = { ...this.globalSetting };
+      await this.enumerateDevices();
+    },
+
+    // 枚举音视频设备
+    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;
+    },
+    handleInviteConfirm(selectedContacts) {
+      console.log("邀请的联系人:", selectedContacts);
+      this.$message.success(`已邀请 ${selectedContacts.length} 位联系人`);
+      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);
+    clearInterval(this.voiceMonitorTimer);
+    this.stopRecording();
+    this.stopLaser();
+    this.stopShare();
+    this.closeCaptureCard();
+    window.removeEventListener("resize", this.initCanvas);
+    window.removeEventListener("keydown", this.handleKeydown);
+    this.localStream?.getTracks().forEach((t) => t.stop());
+  },
+};
+</script>
+
+<style lang="scss">
+.meeting-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #004d40;
+  color: #ffffff;
+}
+
+.top-bar {
+  height: 40px;
+  background: linear-gradient(180deg, #00695c 0%, #004d40 100%);
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  justify-content: space-between;
+  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: 40px;
+  background-color: #004d40;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  color: #b2dfdb;
+
+  .status-item {
+    font-family: Consolas, monospace;
+  }
+
+  .divider {
+    margin: 0 6px;
+    color: #00796b;
+  }
+}
+/* 主视频区域 */
+.main-content {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.video-container {
+  flex: 1;
+  position: relative;
+  background-color: #000;
+}
+
+.participant-name {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  text-align: center;
+  padding: 4px 0;
+  background-color: rgba(0, 77, 64, 0.7);
+  font-size: 14px;
+  color: #b2dfdb;
+}
+
+.main-video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* 右上角网络信号条 */
+.network-signal {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  align-items: flex-end;
+  gap: 3px;
+  height: 16px;
+
+  span {
+    width: 3px;
+    background-color: #4caf50;
+    border-radius: 2px;
+    &:nth-child(1) {
+      height: 4px;
+    }
+    &:nth-child(2) {
+      height: 8px;
+    }
+    &:nth-child(3) {
+      height: 12px;
+    }
+    &:nth-child(4) {
+      height: 16px;
+    }
+  }
+}
+
+/* 底部工具栏 */
+
+.bottom-bar {
+  height: 90px;
+  background: linear-gradient(180deg, #004d40 0%, #00695c 100%);
+  border-top: 1px solid #00796b;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+
+  .left-section {
+    margin-right: 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: 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;
+    }
+  }
+}
+
+.is-recording {
+  color: #ef5350;
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/videoCommunication/index.vue b/src/views/videoCommunication/index.vue
index de8dce6..4db7902 100644
--- a/src/views/videoCommunication/index.vue
+++ b/src/views/videoCommunication/index.vue
@@ -35,63 +35,50 @@
         </div>
       </div>
     </el-card>
-
     <!-- 2. 会诊记录卡片 -->
     <el-card class="card">
       <div slot="header" class="card-header">
         <span class="line"></span>
         会诊记录
       </div>
-
-      <!-- 无数据状态 -->
-      <div v-if="recordList.length === 0" class="no-data">
-        ----- 无会诊记录 -----
-      </div>
-
       <!-- 会诊表格 -->
-      <el-table
-        v-loading="loading"
-        v-else
-        :data="recordList"
-        :show-header="false"
-        stripe
-      >
-        <el-table-column label="头像" prop="avatar" align="center" width="50">
-          <template slot-scope="scope">
-            <el-avatar :src="scope.row.avatar" />
-          </template>
-        </el-table-column>
-        <el-table-column label="会议名称" prop="name" align="center" />
-        <el-table-column label="类型" prop="type" align="center" />
-        <el-table-column label="时间" prop="time" align="center" />
-        <el-table-column label="操作" align="center" width="50">
-          <template slot-scope="scope">
-            <el-button
-              type="text"
-              icon="el-icon-more"
-              class="more-btn"
-              @click="showDetail(scope.row)"
-            />
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <!-- 分页 -->
-      <div class="pagination-wrapper">
-        <el-pagination
-          background
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="queryParams.pageNum"
-          :page-sizes="[10, 20, 50, 100]"
-          :page-size="queryParams.pageSize"
-          layout="prev, pager, next"
-          :total="queryParams.total"
+      <div class="table-wrapper">
+        <el-table
+          v-loading="loading"
+          :data="recordList"
+          :show-header="false"
+          stripe
+          height="calc(100vh - 550px)"
         >
-        </el-pagination>
+          <el-table-column label="头像" prop="avatar" align="center" width="50">
+            <template slot-scope="scope">
+              <el-avatar :src="scope.row.avatar" />
+            </template>
+          </el-table-column>
+          <el-table-column label="会议名称" prop="name" align="center" />
+          <el-table-column label="类型" prop="type" align="center" />
+          <el-table-column label="时间" prop="time" align="center" />
+          <el-table-column label="操作" align="center" width="50">
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                icon="el-icon-more"
+                class="more-btn"
+                @click="showDetail(scope.row)"
+              />
+            </template>
+          </el-table-column>
+        </el-table>
       </div>
+      <!-- 分页 -->
+      <pagination
+        v-show="queryParams.total > 0"
+        :total="queryParams.total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
     </el-card>
-
     <!-- 会诊详情弹框 -->
     <el-dialog
       title="会诊详情"
@@ -101,11 +88,11 @@
     >
       <el-form :model="selectedRecord" label-width="110px">
         <el-form-item label="会议状态">
-          {{ selectedRecord.status || "进行中" }}
+          {{ selectedRecord.status || "已结束" }}
         </el-form-item>
         <el-divider />
         <el-form-item label="会议时间">
-          {{ selectedRecord.time }}
+          {{ selectedRecord.time || "" }}
         </el-form-item>
         <el-form-item label="会议持续时间">
           {{ selectedRecord.duration || "0分钟0秒" }}
@@ -126,11 +113,11 @@
         </el-form-item>
         <el-divider />
         <el-form-item label="会议发起人">
-          {{ selectedRecord.sponsor || "暂无" }}
+          {{ selectedRecord.sponsor || "" }}
         </el-form-item>
         <el-divider />
         <el-form-item label="参会人员">
-          {{ selectedRecord.participants || "暂无" }}
+          {{ selectedRecord.participants || "" }}
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -138,20 +125,125 @@
 </template>
 
 <script>
-import { listMeeting, getMeeting, joinMeeting } from "@/api/videoCommunication";
+// import { listMeeting, getMeeting, joinMeeting } from "@/api/videoCommunication";
+
+// 假数据：和截图保持一致
+const mockRecordList = [
+  {
+    id: 1,
+    name: "超声事业部的云诊室",
+    type: "会诊",
+    time: "2026-05-07 09:09:23",
+    avatar:
+      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+    iconType: "blue",
+    duration: "0分钟0秒",
+    totalCases: "2",
+    positiveCases: "0",
+    negativeCases: "0",
+    referralCases: "4",
+    status: "已结束",
+    sponsor: "张三",
+    participants: "李四、王五",
+  },
+  {
+    id: 2,
+    name: "超声事业部的云诊室",
+    type: "会诊",
+    time: "2026-05-06 13:40:51",
+    avatar:
+      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+    iconType: "blue",
+    duration: "0分钟0秒",
+    totalCases: "2",
+    positiveCases: "0",
+    negativeCases: "0",
+    referralCases: "4",
+    status: "已结束",
+    sponsor: "张三",
+    participants: "李四、王五",
+  },
+  {
+    id: 3,
+    name: "超声事业部的云教学",
+    type: "教学",
+    time: "2026-05-06 13:40:38",
+    avatar:
+      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+    iconType: "orange",
+    duration: "0分钟0秒",
+    totalCases: "2",
+    positiveCases: "0",
+    negativeCases: "0",
+    referralCases: "4",
+    status: "已结束",
+    sponsor: "张三",
+    participants: "李四、王五",
+  },
+  {
+    id: 4,
+    name: "超声事业部的云诊室",
+    type: "会诊",
+    time: "2026-04-29 13:16:48",
+    avatar:
+      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+    iconType: "blue",
+    duration: "0分钟0秒",
+    totalCases: "2",
+    positiveCases: "0",
+    negativeCases: "0",
+    referralCases: "4",
+    status: "已结束",
+    sponsor: "张三",
+    participants: "李四、王五",
+  },
+  {
+    id: 5,
+    name: "质控会议-6019100",
+    type: "质控",
+    time: "2026-04-20 18:14:20",
+    avatar:
+      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+    iconType: "blue",
+    duration: "0分钟0秒",
+    totalCases: "2",
+    positiveCases: "0",
+    negativeCases: "0",
+    referralCases: "4",
+    status: "已结束",
+    sponsor: "张三",
+    participants: "李四、王五",
+  },
+  {
+    id: 6,
+    name: "超声事业部的云诊室",
+    type: "会诊",
+    time: "2026-04-20 18:14:09",
+    avatar:
+      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+    iconType: "blue",
+    duration: "0分钟0秒",
+    totalCases: "2",
+    positiveCases: "0",
+    negativeCases: "0",
+    referralCases: "4",
+    status: "已结束",
+    sponsor: "张三",
+    participants: "李四、王五",
+  },
+];
+
 export default {
   name: "VideoPage",
   data() {
     return {
       meetingCode: "",
-      // 查询参数
       loading: false,
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        total: 0,
+        total: 125, // 和截图保持一致：共125场
       },
-      // 会议模式配置
       meetingModes: [
         {
           title: "实时会诊",
@@ -176,19 +268,22 @@ export default {
         },
         {
           title: "病例研讨",
-          icon: "el-icon-user-solid",
+          icon: "el-icon-chat-line-square",
           color: "greenblue",
-          routeName: "CaseDiscussion",
-          routePath: "/videoCommunication/caseDiscussion",
+          routeName: "CaseStudy",
+          routePath: "/videoCommunication/caseStudy",
         },
       ],
-      // 会诊记录表格数据
       recordList: [],
-      // 详情弹框
       showDetailDialog: false,
       selectedRecord: {},
     };
   },
+  computed: {
+    totalPage() {
+      return Math.ceil(this.queryParams.total / this.queryParams.pageSize);
+    },
+  },
   mounted() {
     this.getList();
   },
@@ -200,66 +295,95 @@ export default {
         return;
       }
       this.loading = true;
-      joinMeeting({ meetingCode: this.meetingCode })
-        .then(() => {
-          this.$message.success("成功加入会议");
-          this.meetingCode = "";
-        })
-        .catch(() => {
-          this.$message.error("入会失败，请检查口令是否正确");
-        })
-        .finally(() => {
-          this.loading = false;
-        });
+      // 模拟接口调用
+      // joinMeeting({ meetingCode: this.meetingCode })
+      //   .then(() => {
+      //     this.$message.success("成功加入会议");
+      //     this.meetingCode = "";
+      //   })
+      //   .catch(() => {
+      //     this.$message.error("入会失败，请检查口令是否正确");
+      //   })
+      //   .finally(() => {
+      //     this.loading = false;
+      //   });
+
+      // 模拟请求
+      setTimeout(() => {
+        this.$message.success("成功加入会议");
+        this.meetingCode = "";
+        this.loading = false;
+      }, 500);
     },
+
     // 处理会议模式点击
     handleModeClick(mode) {
       this.$router.push({ name: mode.routeName });
     },
-    // 查询会诊记录列表
-    getList() {
-      this.loading = true;
-      listMeeting(this.queryParams)
-        .then((response) => {
-          this.recordList = response.rows || [];
-          this.queryParams.total = response.total || 0;
-        })
-        .catch(() => {
-          this.$message.error("获取会议列表失败");
-        })
-        .finally(() => {
-          // 接口失败时，用空数据模拟无记录状态
-          this.recordList = [];
-          this.queryParams.total = 0;
-          this.loading = false;
-        });
-    },
-    // 显示详情弹框
-    showDetail(record) {
+
+    // 查询会诊记录列表（含接口失败降级逻辑）
+    async getList() {
       this.loading = true;
-      getMeeting(record.id)
-        .then((response) => {
-          this.selectedRecord = response.data || record;
-          this.showDetailDialog = true;
-        })
-        .catch(() => {
-          this.$message.error("获取会议详情失败");
-          this.selectedRecord = record;
-          this.showDetailDialog = true;
-        })
-        .finally(() => {
-          this.loading = false;
-        });
+      try {
+        // 真实接口
+        // const response = await listMeeting(this.queryParams);
+        // this.recordList = response.rows;
+        // this.queryParams.total = response.total;
+
+        // 模拟接口调用（这里直接抛出错误，测试降级逻辑）
+        throw new Error("接口请求失败");
+      } catch (error) {
+        console.warn("接口请求失败，使用假数据：", error);
+        this.$message.warning("获取会议列表失败，已加载模拟数据");
+        // 接口失败时，使用假数据
+        this.recordList = [...mockRecordList];
+        this.queryParams.total = 125;
+      } finally {
+        this.loading = false;
+      }
     },
-    // 分页处理
-    handleSizeChange(val) {
-      this.queryParams.pageSize = val;
+
+    // 分页操作
+    goFirst() {
+      this.queryParams.pageNum = 1;
       this.getList();
     },
-    handleCurrentChange(val) {
-      this.queryParams.pageNum = val;
+    goPrev() {
+      if (this.queryParams.pageNum > 1) {
+        this.queryParams.pageNum--;
+        this.getList();
+      }
+    },
+    goNext() {
+      if (this.queryParams.pageNum < this.totalPage) {
+        this.queryParams.pageNum++;
+        this.getList();
+      }
+    },
+    goLast() {
+      this.queryParams.pageNum = this.totalPage;
       this.getList();
     },
+
+    // 显示详情弹框（含接口失败降级逻辑）
+    async showDetail(record) {
+      this.loading = true;
+      try {
+        // 真实接口
+        // const response = await getMeeting(record.id);
+        // this.selectedRecord = response.data;
+
+        // 模拟接口调用失败，直接使用当前行数据
+        throw new Error("获取详情失败");
+      } catch (error) {
+        console.warn("获取详情接口失败，使用当前记录数据：", error);
+        this.$message.warning("获取会议详情失败，已加载基础信息");
+        this.selectedRecord = { ...record };
+      } finally {
+        this.showDetailDialog = true;
+        this.loading = false;
+      }
+    },
   },
 };
 </script>
@@ -312,11 +436,11 @@ export default {
 
   // 会议模式列表
   .mode-list {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
     gap: 10px;
 
     .mode-item {
-      flex: 1;
       height: 115px;
       border-radius: 8px;
       display: flex;
@@ -381,23 +505,10 @@ export default {
     }
   }
 
-  // 无会诊记录样式
-  .no-data {
-    text-align: center;
-    padding: 50px 0;
-    color: #999;
-  }
-
-  // 会诊记录表格
+  // 会诊记录表格ss
   .more-btn {
     color: #009696;
     cursor: pointer;
   }
-
-  // 分页样式
-  .pagination-wrapper {
-    text-align: center;
-    margin-top: 15px;
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/videoCommunication/qualityControl.vue b/src/views/videoCommunication/qualityControl.vue
index 00d67f5..2a7b636 100644
--- a/src/views/videoCommunication/qualityControl.vue
+++ b/src/views/videoCommunication/qualityControl.vue
@@ -1,72 +1,82 @@
 <template>
-  <div class="quality-control-container">
+  <div class="meeting-container">
     <!-- 顶部导航栏 -->
-    <div class="header-bar">
-      <div class="header-left">
-        <span class="logo-text">信联</span>
+    <header class="top-bar">
+      <div class="logo">
+        <img src="@/assets/logo/logo.png" />
+        <span>信联</span>
       </div>
-      <div class="header-center">
-        <span class="title">超声事业部的云质控</span>
+      <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>
-      <div class="header-right">
-        <el-button
-          icon="el-icon-minus"
-          type="text"
-          class="min-btn"
-          @click="minimize"
-        ></el-button>
-        <el-button
-          icon="el-icon-close"
-          type="text"
-          class="close-btn"
-          @click="close"
-        ></el-button>
-      </div>
-    </div>
-
-    <!-- 2x2 分屏视频区域 -->
-    <div class="grid-container">
-      <div v-for="(slot, index) in gridSlots" :key="index" class="grid-slot">
-        <!-- 有成员时的状态 -->
-        <template v-if="slot.user">
-          <!-- 左上角信号强度 -->
-          <div class="signal-icon">
-            <i
-              v-for="n in 5"
-              :key="n"
-              class="bar"
-              :class="{ active: n <= slot.signalLevel }"
-            ></i>
-          </div>
-          <!-- 顶部用户名称 -->
-          <div class="slot-name">{{ slot.user.name }}</div>
-          <!-- 取消质控按钮 -->
-          <el-button
-            class="cancel-btn"
-            type="info"
-            size="mini"
-            @click="cancelQualityControl(index)"
-          >
-            取消质控
-          </el-button>
-          <!-- 有成员时的用户信息 -->
-          <div class="user-btn" @click="showUserDetail(slot.user)">
-            <el-avatar :size="56" :src="slot.user.avatar" class="user-avatar">
-              <span class="avatar-text">{{ slot.user.name.charAt(0) }}</span>
-            </el-avatar>
-            <div class="user-info-text">
-              <span class="user-name">{{ slot.user.name }}</span>
-              <span :class="['status-dot', slot.user.status === '在线' ? 'online' : 'offline']"></span>
+    </header>
+    <!-- 主画面区域：2x2 四宫格 -->
+    <main class="main-content">
+      <div class="grid-container">
+        <div
+          v-for="(slot, index) in gridSlots"
+          :key="index"
+          class="grid-slot"
+        >
+          <!-- 有成员时的状态 -->
+          <template v-if="slot.user">
+            <!-- 左上角信号强度 -->
+            <div class="signal-icon">
+              <i
+                v-for="n in 5"
+                :key="n"
+                class="bar"
+                :class="{ active: n <= slot.signalLevel }"
+              ></i>
             </div>
-          </div>
-        </template>
+            <!-- 顶部用户名称 -->
+            <div class="slot-name">{{ slot.user.name }}</div>
+            <!-- 取消质控按钮 -->
+            <el-button
+              class="cancel-btn"
+              type="info"
+              size="mini"
+              @click="cancelQualityControl(index)"
+            >
+              取消质控
+            </el-button>
+            <!-- 视频区域 -->
+            <video
+              v-if="slot.stream"
+              :ref="`video${index}`"
+              class="slot-video"
+              autoplay
+              playsinline
+            ></video>
+            <!-- 无视频流时显示用户信息 -->
+            <div v-else class="user-btn" @click="showUserDetail(slot.user)">
+              <el-avatar :size="56" :src="slot.user.avatar" class="user-avatar">
+                <span class="avatar-text">{{ slot.user.name.charAt(0) }}</span>
+              </el-avatar>
+              <div class="user-info-text">
+                <span class="user-name">{{ slot.user.name }}</span>
+                <span :class="['status-dot', slot.user.status === '在线' ? 'online' : 'offline']"></span>
+              </div>
+            </div>
+          </template>
 
-        <!-- 无成员时的添加按钮 -->
-        <div v-else class="add-btn" @click="openAddUserDialog(index)">
-          <i class="el-icon-plus"></i>
+          <!-- 无成员时的添加按钮 -->
+          <div v-else class="add-btn" @click="openAddUserDialog(index)">
+            <i class="el-icon-plus"></i>
+          </div>
         </div>
       </div>
-    </div>
+    </main>
+
+    <!-- 邀请弹窗 -->
+    <CreateGroupDialog
+      :visible.sync="inviteDialogVisible"
+      title="通讯录邀请"
+      @confirm="handleInviteConfirm"
+      @close="inviteDialogVisible = false"
+    />
 
     <!-- 添加质控成员弹窗 -->
     <CreateGroupDialog
@@ -78,20 +88,215 @@
       confirm-text="确定"
       @create-success="handleAddMembers"
     />
+
+    <!-- 设置弹窗 -->
+    <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.captureCardId" style="width: 100%">
+                <el-option
+                  v-for="item in captureCardList"
+                  :key="item.deviceId"
+                  :label="item.label"
+                  :value="item.deviceId"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="网络策略">
+              <el-radio-group v-model="tempSetting.networkStrategy">
+                <el-radio label="smooth">流畅优先</el-radio>
+                <el-radio label="quality">画质优先</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="分辨率">
+              <el-select v-model="tempSetting.resolution" style="width: 100%">
+                <el-option label="720P" value="720P"></el-option>
+                <el-option label="1080P" value="1080P"></el-option>
+                <el-option label="2K" value="2K"></el-option>
+              </el-select>
+            </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 audioDeviceList"
+                  :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.speakerId" style="width: 100%">
+                <el-option
+                  v-for="item in speakerDeviceList"
+                  :key="item.deviceId"
+                  :label="item.label"
+                  :value="item.deviceId"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="画笔" name="brush">
+          <el-form :model="tempSetting" label-width="140px">
+            <el-form-item label="画笔颜色">
+              <el-color-picker v-model="tempSetting.brushColor"></el-color-picker>
+            </el-form-item>
+            <el-form-item label="画笔粗细">
+              <el-slider
+                v-model="tempSetting.brushWidth"
+                :min="1"
+                :max="10"
+              ></el-slider>
+            </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 CreateGroupDialog from "@/views/message/components/CreateGroupDialog";
+import CaseFormDialog from "@/views/cases/components/CaseFormDialog";
 
 export default {
-  name: "CloudQualityControl",
+  name: "qualityControl",
   components: {
     CreateGroupDialog,
+    CaseFormDialog,
   },
   data() {
     return {
-      // 分屏数据（4个位置）
+      // ==================== 会议基础信息 ====================
+      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,
+
+      // ==================== 激光笔 ====================
+      isLaserMode: false,
+      laserX: 0,
+      laserY: 0,
+      laserAnimationId: null,
+      laserAlpha: 1,
+      laserAlphaDir: 1,
+      laserCtx: null,
+
+      // ==================== 屏幕共享 ====================
+      isSharing: false,
+      shareStream: null,
+
+      // ==================== 设置弹窗 ====================
+      settingDialogVisible: false,
+      settingTab: "general",
+      tempSetting: {
+        meetingTitle: "",
+        cameraId: "",
+        captureCardId: "",
+        networkStrategy: "smooth",
+        resolution: "1080P",
+        micId: "",
+        speakerId: "",
+        brushColor: "#FF69B4",
+        brushWidth: 3,
+      },
+      globalSetting: {
+        meetingTitle: "超声事业部的云质控",
+        cameraId: "",
+        captureCardId: "",
+        networkStrategy: "smooth",
+        resolution: "1080P",
+        micId: "",
+        speakerId: "",
+        brushColor: "#FF69B4",
+        brushWidth: 3,
+      },
+      videoDeviceList: [],
+      audioDeviceList: [],
+      speakerDeviceList: [],
+      captureCardList: [],
+
+      // ==================== 分屏数据（4个位置） ====================
       gridSlots: [
         {
           index: 0,
@@ -101,11 +306,13 @@ export default {
             status: "在线",
             avatar: "https://img.icons8.com/fluency/96/doctor-male.png",
           },
+          stream: null,
         },
         {
           index: 1,
           signalLevel: 0,
           user: null,
+          stream: null,
         },
         {
           index: 2,
@@ -115,17 +322,21 @@ export default {
             status: "离线",
             avatar: "https://img.icons8.com/fluency/96/doctor-male.png",
           },
+          stream: null,
         },
         {
           index: 3,
           signalLevel: 0,
           user: null,
+          stream: null,
         },
       ],
-      // 添加弹窗状态
+
+      // ==================== 添加弹窗状态 ====================
       showAddDialog: false,
       currentAddIndex: null,
-      // 联系人数据
+
+      // ==================== 联系人数据 ====================
       recentContacts: [
         { id: "1", name: "基层医生(在线)", avatar: "" },
         { id: "2", name: "于春晓", avatar: "" },
@@ -159,14 +370,446 @@ export default {
       ],
     };
   },
-  mounted() {
+
+  computed: {
+    timerDisplay() {
+      const h = Math.floor(this.timer / 3600)
+        .toString()
+        .padStart(2, "0");
+      const m = Math.floor((this.timer % 3600) / 60)
+        .toString()
+        .padStart(2, "0");
+      const s = (this.timer % 60).toString().padStart(2, "0");
+      return `${h}:${m}:${s}`;
+    },
+  },
+
+  async 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.startNetworkMonitoring();
+    this.initCanvas();
+    window.addEventListener("resize", this.initCanvas);
+
+    await this.openCameraAndMic();
+    await this.getDevices();
   },
+
+  beforeDestroy() {
+    clearInterval(this.timerInterval);
+    if (this.isRecording) this.stopRecording();
+    window.removeEventListener("resize", this.initCanvas);
+    if (this.localStream) this.localStream.getTracks().forEach((t) => t.stop());
+    if (this.shareStream) this.shareStream.getTracks().forEach((t) => t.stop());
+    if (this.mediaRecorder) this.mediaRecorder.stop();
+  },
+
   methods: {
+    // ==================== 【1】窗口控制 ====================
+    minimizeWindow() {
+      this.$router.push("/video/index");
+    },
+
+    closeWindow() {
+      this.$confirm("确定要退出本次质控吗?", "提示", {
+        type: "warning",
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+      })
+        .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("/");
+        })
+        .catch(() => {});
+    },
+
+    // ==================== 【2】音视频控制 ====================
+    async openCameraAndMic() {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: true,
+          audio: true,
+        });
+        this.localStream = stream;
+        if (this.$refs.localVideo) {
+          this.$refs.localVideo.srcObject = stream;
+        }
+        this.startVoiceMonitor();
+      } catch (err) {
+        console.error("获取摄像头/麦克风失败:", err);
+        this.$message.error("无法访问摄像头或麦克风");
+      }
+    },
+
+    async getDevices() {
+      try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        this.videoDeviceList = devices.filter((d) => d.kind === "videoinput");
+        this.audioDeviceList = devices.filter((d) => d.kind === "audioinput");
+        this.speakerDeviceList = devices.filter((d) => d.kind === "audiooutput");
+        this.captureCardList = this.videoDeviceList.filter((d) =>
+          d.label.toLowerCase().includes("usb")
+        );
+      } catch (err) {
+        console.error("获取设备列表失败:", err);
+      }
+    },
+
+    toggleMic() {
+      if (!this.localStream) return;
+      this.micOn = !this.micOn;
+      this.localStream.getAudioTracks().forEach((t) => (t.enabled = this.micOn));
+      if (this.micOn) {
+        this.startVoiceMonitor();
+      } else {
+        this.stopVoiceMonitor();
+      }
+    },
+
+    toggleCam() {
+      if (!this.localStream) return;
+      this.camOn = !this.camOn;
+      this.localStream.getVideoTracks().forEach((t) => (t.enabled = this.camOn));
+    },
+
+    // ==================== 【3】音频检测（说话波形） ====================
+    startVoiceMonitor() {
+      if (!this.localStream || !this.micOn) return;
+      try {
+        this.audioContext = new (window.AudioContext ||
+          window.webkitAudioContext)();
+        this.analyser = this.audioContext.createAnalyser();
+        const source = this.audioContext.createMediaStreamSource(
+          this.localStream
+        );
+        source.connect(this.analyser);
+        this.analyser.fftSize = 64;
+        const dataArray = new Uint8Array(this.analyser.frequencyBinCount);
+
+        const updateVoice = () => {
+          if (!this.analyser) return;
+          this.analyser.getByteFrequencyData(dataArray);
+          const levels = [];
+          for (let i = 0; i < 12; i++) {
+            const value = dataArray[i] || 0;
+            levels.push(Math.max(2, Math.min(20, value / 10)));
+          }
+          this.voiceLevels = levels;
+          this.voiceMonitorTimer = requestAnimationFrame(updateVoice);
+        };
+        updateVoice();
+      } catch (e) {
+        console.error("音频检测初始化失败:", e);
+      }
+    },
+
+    stopVoiceMonitor() {
+      if (this.voiceMonitorTimer) {
+        cancelAnimationFrame(this.voiceMonitorTimer);
+        this.voiceMonitorTimer = null;
+      }
+      if (this.audioContext) {
+        this.audioContext.close();
+        this.audioContext = null;
+      }
+      this.voiceLevels = Array(12).fill(1);
+    },
+
+    // ==================== 【4】屏幕共享 ====================
+    async toggleShare() {
+      if (!this.isSharing) {
+        try {
+          const stream = await navigator.mediaDevices.getDisplayMedia({
+            video: true,
+            audio: true,
+          });
+          this.shareStream = stream;
+          if (this.$refs.shareVideo) {
+            this.$refs.shareVideo.srcObject = stream;
+          }
+          this.isSharing = true;
+          this.$message.info("开始共享");
+        } catch (e) {
+          console.error("共享失败:", e);
+          this.$message.error("共享失败");
+        }
+      } else {
+        this.stopShare();
+      }
+    },
+
+    stopShare() {
+      if (this.shareStream) {
+        this.shareStream.getTracks().forEach((t) => t.stop());
+        this.shareStream = null;
+      }
+      this.isSharing = false;
+    },
+
+    // ==================== 【5】录制 ====================
+    async toggleRecord() {
+      if (!this.isRecording) {
+        try {
+          const stream = await navigator.mediaDevices.getDisplayMedia({
+            video: true,
+            audio: true,
+          });
+          this.recordedChunks = [];
+          this.recordingTime = "00:00:00";
+
+          this.mediaRecorder = new MediaRecorder(stream, {
+            mimeType: "video/webm;codecs=vp9,opus",
+          });
+          this.mediaRecorder.ondataavailable = (e) => {
+            if (e.data.size > 0) 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.href = url;
+            a.download = `质控录制_${Date.now()}.webm`;
+            a.click();
+            URL.revokeObjectURL(url);
+          };
+          this.mediaRecorder.start();
+          this.isRecording = true;
+          this.startRecordingTimer();
+          this.$message.success("开始录制");
+        } catch (e) {
+          console.error("录制失败:", e);
+          this.$message.error("录制失败");
+        }
+      } else {
+        this.stopRecording();
+      }
+    },
+
+    stopRecording() {
+      if (this.mediaRecorder && this.isRecording) {
+        this.mediaRecorder.stop();
+        this.isRecording = false;
+        this.mediaRecorder.stream.getTracks().forEach((t) => t.stop());
+        clearInterval(this.recordingTimer);
+        this.$message.success("录制已保存");
+      }
+    },
+
+    startRecordingTimer() {
+      this.recordingTimer = setInterval(() => {
+        let [h, m, s] = this.recordingTime.split(":").map(Number);
+        s++;
+        if (s >= 60) {
+          s = 0;
+          m++;
+        }
+        if (m >= 60) {
+          m = 0;
+          h++;
+        }
+        this.recordingTime = `${String(h).padStart(2, "0")}:${String(
+          m
+        ).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+      }, 1000);
+    },
+
+    // ==================== 【6】计时器 ====================
+    toggleTimer() {
+      if (this.timerRunning) {
+        clearInterval(this.timerInterval);
+        this.timerRunning = false;
+      } else {
+        this.timerRunning = true;
+        this.timerInterval = setInterval(() => {
+          this.timer++;
+        }, 1000);
+      }
+    },
+
+    // ==================== 【7】截图 ====================
+    takeScreenshot() {
+      this.$message.success("截图已保存");
+    },
+
+    // ==================== 【8】画笔功能 ====================
+    initCanvas() {
+      const canvas = this.$refs.drawingCanvas;
+      const laserCanvas = this.$refs.laserCanvas;
+      const container = this.$refs.videoContainer;
+      if (canvas && container) {
+        canvas.width = container.clientWidth;
+        canvas.height = container.clientHeight;
+        this.ctx = canvas.getContext("2d");
+        this.ctx.lineWidth = this.brushLineWidth;
+        this.ctx.lineCap = "round";
+        this.ctx.strokeStyle = this.brushColor;
+      }
+      if (laserCanvas && container) {
+        laserCanvas.width = container.clientWidth;
+        laserCanvas.height = container.clientHeight;
+        this.laserCtx = laserCanvas.getContext("2d");
+      }
+    },
+
+    toggleDraw() {
+      this.isDrawingMode = !this.isDrawingMode;
+      this.isLaserMode = false;
+      if (!this.isDrawingMode) this.clearCanvas();
+    },
+
+    clearCanvas() {
+      const canvas = this.$refs.drawingCanvas;
+      if (this.ctx && canvas)
+        this.ctx.clearRect(0, 0, canvas.width, canvas.height);
+    },
+
+    getCoordinates(e) {
+      const canvas = this.$refs.drawingCanvas;
+      const rect = canvas.getBoundingClientRect();
+      return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    },
+
+    startDrawing(e) {
+      this.drawing = true;
+      const coords = this.getCoordinates(e);
+      this.lastX = coords.x;
+      this.lastY = coords.y;
+    },
+
+    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;
+    },
+
+    stopDrawing() {
+      this.drawing = false;
+    },
+
+    // ==================== 【9】激光笔功能 ====================
+    toggleLaser() {
+      this.isLaserMode = !this.isLaserMode;
+      this.isDrawingMode = false;
+      if (!this.isLaserMode) this.clearLaser();
+    },
+
+    clearLaser() {
+      const canvas = this.$refs.laserCanvas;
+      if (this.laserCtx && canvas)
+        this.laserCtx.clearRect(0, 0, canvas.width, canvas.height);
+      if (this.laserAnimationId) {
+        cancelAnimationFrame(this.laserAnimationId);
+        this.laserAnimationId = null;
+      }
+    },
+
+    handleMouseMove(e) {
+      if (!this.isLaserMode) return;
+      const canvas = this.$refs.laserCanvas;
+      const rect = canvas.getBoundingClientRect();
+      this.laserX = e.clientX - rect.left;
+      this.laserY = e.clientY - rect.top;
+      this.drawLaser();
+    },
+
+    drawLaser() {
+      if (!this.isLaserMode) return;
+      const ctx = this.laserCtx;
+      const canvas = this.$refs.laserCanvas;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      this.laserAlpha += this.laserAlphaDir * 0.05;
+      if (this.laserAlpha >= 1 || this.laserAlpha <= 0.3) {
+        this.laserAlphaDir *= -1;
+      }
+
+      ctx.beginPath();
+      ctx.arc(this.laserX, this.laserY, 15, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(255, 0, 0, ${this.laserAlpha * 0.3})`;
+      ctx.fill();
+
+      ctx.beginPath();
+      ctx.arc(this.laserX, this.laserY, 5, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(255, 0, 0, ${this.laserAlpha})`;
+      ctx.fill();
+
+      this.laserAnimationId = requestAnimationFrame(() => this.drawLaser());
+    },
+
+    // ==================== 【10】设置弹窗 ====================
+    openSettingDialog() {
+      this.tempSetting = { ...this.globalSetting };
+      this.settingDialogVisible = true;
+    },
+
+    onSettingDialogOpen() {
+      this.getDevices();
+    },
+
+    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.settingDialogVisible = false;
+      this.$message.success("设置已保存");
+    },
+
+    // ==================== 【11】时间更新 ====================
+    updateClock() {
+      const now = new Date();
+      this.currentTime = now.toLocaleTimeString("zh-CN", { hour12: false });
+    },
+
+    // ==================== 【12】网络监控 ====================
+    startNetworkMonitoring() {
+      setInterval(() => {
+        this.networkDelay = Math.floor(Math.random() * 50);
+        if (this.networkDelay < 20) {
+          this.networkQuality = { text: "良好", color: "#00e676" };
+        } else if (this.networkDelay < 40) {
+          this.networkQuality = { text: "一般", color: "#ffab00" };
+        } else {
+          this.networkQuality = { text: "较差", color: "#ff5252" };
+        }
+      }, 2000);
+    },
+
+    // ==================== 【13】会议成员、邀请、病例 ====================
+    handleInvite() {
+      this.inviteDialogVisible = true;
+    },
+
+    handleInviteConfirm(selectedContacts) {
+      console.log("邀请的联系人:", selectedContacts);
+      this.$message.success(`已邀请 ${selectedContacts.length} 位联系人`);
+      this.inviteDialogVisible = false;
+    },
+
     // 取消质控
     cancelQualityControl(index) {
       this.$confirm("确定要取消该成员的质控吗？", "提示", {
@@ -176,6 +819,7 @@ export default {
       })
         .then(() => {
           this.gridSlots[index].user = null;
+          this.gridSlots[index].stream = null;
           this.gridSlots[index].signalLevel = 0;
           this.$message({
             type: "success",
@@ -184,18 +828,20 @@ export default {
         })
         .catch(() => {});
     },
+
     // 打开添加用户弹窗
     openAddUserDialog(index) {
       this.currentAddIndex = index;
       this.showAddDialog = true;
     },
+
     // 显示用户详情
     showUserDetail(user) {
-      this.$message.info(`用户: ${user.name}`)
+      this.$message.info(`用户: ${user.name}`);
     },
+
     // 添加成员成功回调
     handleAddMembers(members) {
-      // 找到第一个空的位置添加成员
       const emptySlots = this.gridSlots
         .map((slot, index) => ({ slot, index }))
         .filter((item) => !item.slot.user);
@@ -219,86 +865,131 @@ export default {
         message: `已添加 ${members.length} 位质控成员`,
       });
     },
-    // 窗口最小化（仅占位）
-    minimize() {
-      this.$message.info("窗口最小化");
-    },
-    // 关闭窗口
-    close() {
-      this.$confirm("确定要退出此次云质控吗？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          this.$message({
-            type: "success",
-            message: "已退出云质控",
-          });
-        })
-        .catch(() => {});
+
+    // ==================== 【14】结束会议 ====================
+    endMeeting() {
+      this.$confirm("确定结束质控?", "提示", { type: "warning" }).then(() => {
+        this.stopShare();
+        if (this.localStream)
+          this.localStream.getTracks().forEach((t) => t.stop());
+        this.$message.success("质控已结束");
+        this.$store.dispatch("app/toggleSideBarHide", false);
+        this.$store.dispatch("settings/changeSetting", {
+          key: "fixedHeader",
+          value: true,
+        });
+        this.$store.dispatch("settings/changeSetting", {
+          key: "tagsView",
+          value: true,
+        });
+        if (window.opener && !window.opener.closed) {
+          window.opener.location.reload();
+        }
+        if (window.name === "qualityControlWindow") {
+          window.close();
+        } else {
+          this.$router.push("/");
+        }
+      });
     },
   },
 };
 </script>
 
-<style scoped>
-/* 整体容器 */
-.quality-control-container {
-  width: 100vw;
-  height: 100vh;
-  background-color: #00413d;
+<style lang="scss" scoped>
+.meeting-container {
   display: flex;
   flex-direction: column;
-  color: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif;
+  height: 100vh;
+  background-color: #00413d;
+  color: #ffffff;
 }
 
-/* 顶部导航栏 */
-.header-bar {
-  height: 30px;
-  background-color: #00615c;
+// 顶部导航栏
+.top-bar {
+  height: 36px;
+  background-color: #00584d;
   display: flex;
   align-items: center;
+  padding: 0 12px;
   justify-content: space-between;
-  padding: 0 10px;
-}
-.logo-text {
-  color: #fff;
-  font-weight: bold;
-  font-size: 14px;
-}
-.header-center {
-  color: #fff;
-  font-size: 12px;
+  border-bottom: 1px solid #00695c;
+
+  .logo {
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    font-size: 14px;
+    color: #ffffff;
+
+    img {
+      width: 24px;
+      height: 24px;
+      margin-right: 6px;
+    }
+  }
+
+  .title {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 13px;
+    color: #ffffff;
+    font-weight: 500;
+  }
+
+  .window-controls {
+    display: flex;
+    align-items: center;
+
+    i {
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 14px;
+      color: #ffffff;
+      border-radius: 3px;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
 }
-.header-right .el-button {
-  color: #fff;
-  padding: 0 5px;
-  font-size: 12px;
+
+// 主内容区
+.main-content {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  padding: 4px;
 }
 
-/* 2x2 网格布局 */
+// 2x2 网格布局
 .grid-container {
   flex: 1;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
-  gap: 2px;
-  background-color: #007570;
+  gap: 4px;
 }
 
-/* 单个分屏 */
+// 单个分屏
 .grid-slot {
   background-color: #00413d;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid #00695c;
+  overflow: hidden;
 }
 
-/* 信号强度图标 */
+// 信号强度图标
 .signal-icon {
   position: absolute;
   top: 8px;
@@ -307,32 +998,26 @@ export default {
   align-items: flex-end;
   gap: 2px;
   height: 14px;
-}
-.signal-icon .bar {
-  width: 3px;
-  background: #666;
-  border-radius: 1px;
-}
-.signal-icon .bar:nth-child(1) {
-  height: 4px;
-}
-.signal-icon .bar:nth-child(2) {
-  height: 7px;
-}
-.signal-icon .bar:nth-child(3) {
-  height: 10px;
-}
-.signal-icon .bar:nth-child(4) {
-  height: 13px;
-}
-.signal-icon .bar:nth-child(5) {
-  height: 16px;
-}
-.signal-icon .bar.active {
-  background: #4cd964;
+  z-index: 10;
+
+  .bar {
+    width: 3px;
+    background: #666;
+    border-radius: 1px;
+
+    &:nth-child(1) { height: 4px; }
+    &:nth-child(2) { height: 7px; }
+    &:nth-child(3) { height: 10px; }
+    &:nth-child(4) { height: 13px; }
+    &:nth-child(5) { height: 16px; }
+
+    &.active {
+      background: #4cd964;
+    }
+  }
 }
 
-/* 顶部用户名 */
+// 顶部用户名
 .slot-name {
   position: absolute;
   top: 8px;
@@ -340,75 +1025,103 @@ export default {
   transform: translateX(-50%);
   font-size: 12px;
   color: #fff;
+  z-index: 10;
 }
 
-/* 取消质控按钮 */
+// 取消质控按钮
 .cancel-btn {
   position: absolute;
   top: 8px;
   right: 8px;
+  z-index: 10;
 }
 
-/* 添加质控按钮 */
+// 视频区域
+.slot-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+// 添加质控按钮
 .add-btn {
-  width: 56px;
-  height: 56px;
-  background-color: #007570;
-  border-radius: 10px;
+  width: 60px;
+  height: 60px;
+  background-color: #00897b;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: background 0.2s;
-}
-.add-btn:hover {
-  background-color: #00918a;
-}
-.add-btn .el-icon-plus {
-  font-size: 26px;
-  color: #fff;
+  transition: background-color 0.2s, transform 0.2s;
+  border: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+
+  &:hover {
+    background-color: #00a396;
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  .el-icon-plus {
+    font-size: 28px;
+    color: #ffffff;
+    font-weight: bold;
+  }
 }
 
-/* 有成员时的用户按钮 */
+// 有成员时的用户按钮
 .user-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   cursor: pointer;
+
+  .user-avatar {
+    width: 56px;
+    height: 56px;
+    border-radius: 10px;
+    background-color: #00b3ad;
+    transition: background 0.2s;
+
+    &:hover {
+      background-color: #00d4cd;
+    }
+
+    .avatar-text {
+      font-size: 20px;
+      color: #fff;
+    }
+  }
+
+  .user-info-text {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .user-name {
+      font-size: 12px;
+      color: #fff;
+    }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+
+      &.online {
+        background-color: #4cd964;
+      }
+
+      &.offline {
+        background-color: #999;
+      }
+    }
+  }
 }
-.user-avatar {
-  width: 56px;
-  height: 56px;
-  border-radius: 10px;
-  background-color: #00b3ad;
-  transition: background 0.2s;
-}
-.user-avatar:hover {
-  background-color: #00d4cd;
-}
-.avatar-text {
-  font-size: 20px;
-  color: #fff;
-}
-.user-info-text {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-.user-info-text .user-name {
-  font-size: 12px;
-  color: #fff;
-}
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-.status-dot.online {
-  background-color: #4cd964;
-}
-.status-dot.offline {
-  background-color: #999;
-}
-</style>
\ No newline at end of file
+
+</style>
diff --git a/src/views/videoCommunication/realTimeConsultation.vue b/src/views/videoCommunication/realTimeConsultation.vue
index e8b8bb0..9a5c57a 100644
--- a/src/views/videoCommunication/realTimeConsultation.vue
+++ b/src/views/videoCommunication/realTimeConsultation.vue
@@ -188,17 +188,12 @@
     </footer>
 
     <!-- 邀请弹窗 -->
-    <el-dialog
-      title="通讯录邀请"
+    <CreateGroupDialog
       :visible.sync="inviteDialogVisible"
-      width="30%"
-    >
-      <p>这里是通讯录列表，勾选用户进行邀请。</p>
-      <template slot="footer">
-        <el-button @click="inviteDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmInvite">确定</el-button>
-      </template>
-    </el-dialog>
+      title="通讯录邀请"
+      @confirm="handleInviteConfirm"
+      @close="inviteDialogVisible = false"
+    />
 
     <!-- 设置弹窗 -->
     <el-dialog
@@ -348,10 +343,14 @@
 
 <script>
 import CaseFormDialog from "@/views/cases/components/CaseFormDialog";
+import CreateGroupDialog from "@/views/message/components/CreateGroupDialog";
 
 export default {
   name: "MeetingRoom",
-  components: { CaseFormDialog },
+  components: {
+    CaseFormDialog,
+    CreateGroupDialog,
+  },
   data() {
     return {
       // ==================== 会议基础信息 ====================
@@ -1065,8 +1064,9 @@ export default {
     handleInvite() {
       this.inviteDialogVisible = true;
     },
-    confirmInvite() {
-      this.$message.success("邀请成功");
+    handleInviteConfirm(selectedContacts) {
+      console.log('邀请的联系人:', selectedContacts);
+      this.$message.success(`已邀请 ${selectedContacts.length} 位联系人`);
       this.inviteDialogVisible = false;
     },
     fetchMeetingInfo() {
diff --git a/src/views/videoCommunication/training.vue b/src/views/videoCommunication/training.vue
index 8c499e5..ed4560a 100644
--- a/src/views/videoCommunication/training.vue
+++ b/src/views/videoCommunication/training.vue
@@ -1,762 +1,1028 @@
 <template>
   <div class="meeting-container">
     <!-- 顶部导航栏 -->
-    <div class="header-bar">
-      <div class="header-left">
-        <span class="logo-text">信联</span>
+    <header class="top-bar">
+      <div class="logo">
+        <img src="@/assets/logo/logo.png" />
+        <span>信联</span>
       </div>
-      <div class="header-center">
-        <span class="title">超声事业部的云教学</span>
+      <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>
-      <div class="header-right">
-        <el-button
-          icon="el-icon-full-screen"
-          type="text"
-          class="fullscreen-btn"
-          @click="toggleFullscreen"
-        ></el-button>
-        <el-button
-          icon="el-icon-close"
-          type="text"
-          class="close-btn"
-          @click="closeMeeting"
-        ></el-button>
-      </div>
-    </div>
+    </header>
 
-    <!-- 顶部信息栏 -->
-    <div class="info-bar">
-      <div class="info-left">
-        <span>直播间口令:9018100</span>
-        <span>|</span>
-        <span>{{ meetingDuration }}</span>
-        <span>|</span>
-        <span>1人观看</span>
-        <!-- 五格信号图标 + 文字 -->
-        <span class="signal-box">
-          <span class="signal-icon">
-            <i
-              v-for="n in 5"
-              :key="n"
-              class="bar"
-              :class="{ active: n <= signalLevel }"
-            ></i>
-          </span>
-          <span class="signalDesc">{{ signalDesc }}</span>
-        </span>
-      </div>
-      <!-- 录制状态提示 -->
-      <div v-if="isRecording" class="recording-tip">
-        <span class="rec-dot"></span>
-        <span>录像中: {{ recordingDuration }}</span>
-      </div>
+    <!-- 顶部状态信息条 -->
+    <div class="status-bar">
+      <span class="status-item">直播间口令:{{ meetingCode }}</span>
+      <span class="divider">|</span>
+      <span class="status-item">{{ participantCount }}人观看</span>
+      <span class="divider">|</span>
+      <span class="status-item">{{ timerDisplay }}</span>
+      <span class="divider">|</span>
+      <span class="status-item" :style="{ color: networkQuality.color }">
+        <i class="el-icon-caret-top" style="transform: rotate(-90deg); margin-right: 4px;"></i>
+      </span>
     </div>
 
-    <!-- 主视频区域 -->
-    <div class="video-area">
-      <div class="video-left">
+    <!-- 主画面区域：左右双分屏 -->
+    <main class="main-content">
+      <!-- 左侧画面 -->
+      <div class="video-stage left-stage" ref="videoContainerLeft">
+        <!-- 采集卡/主视频画面 -->
         <video
-          ref="remoteVideo"
+          ref="shareVideo"
+          class="share-preview"
           autoplay
           playsinline
-          style="width: 100%; height: 100%; object-fit: cover; background: #000"
-        />
+          muted
+          v-if="isSharing"
+        ></video>
       </div>
-      <div class="divider"></div>
-      <div class="video-right">
+
+      <!-- 右侧画面 -->
+      <div class="video-stage right-stage" ref="videoContainerRight">
+        <!-- 本地摄像头画面 -->
         <video
           ref="localVideo"
+          class="local-camera"
           autoplay
-          playsinline
           muted
-          style="width: 100%; height: 100%; object-fit: cover; background: #000"
+          playsinline
+          v-if="camOn"
         />
       </div>
-    </div>
+    </main>
 
-    <!-- 底部控制栏 -->
-    <div class="control-bar">
-      <div class="control-item">
-        <div
-          class="control-btn"
-          :class="{ active: micOn, disabled: !micOn }"
-          @click="toggleMic"
-        >
-          <i
-            :class="
-              micOn ? 'el-icon-microphone' : 'el-icon-turn-off-microphone'
-            "
-          ></i>
+    <!-- 底部工具栏 -->
+    <footer class="bottom-bar">
+      <div class="tools-section">
+        <div class="tool-item" @click="toggleMic">
+          <div class="icon-wrapper">
+            <i class="el-icon-microphone"></i>
+            <span v-if="!micOn" class="slash-line"></span>
+          </div>
           <span>麦克风</span>
         </div>
-      </div>
-      <div class="control-item">
-        <div
-          class="control-btn"
-          :class="{ active: speakerOn, disabled: !speakerOn }"
-          @click="toggleSpeaker"
-        >
-          <i :class="speakerOn ? 'el-icon-phone-outline' : 'el-icon-phone'"></i>
+        <div class="tool-item" @click="toggleSpeaker">
+          <div class="icon-wrapper">
+            <i class="el-icon-phone-outline"></i>
+            <span v-if="!speakerOn" class="slash-line"></span>
+          </div>
           <span>扬声器</span>
         </div>
-      </div>
-      <div class="control-item">
-        <div
-          class="control-btn"
-          :class="{ active: isRecording, recording: isRecording }"
-          @click="toggleRecord"
-        >
-          <i class="el-icon-video-camera"></i>
-          <span>录制</span>
+        <div class="tool-item" @click="toggleRecord">
+          <div class="icon-wrapper">
+            <i class="el-icon-video-play" :class="{ 'is-recording': isRecording }"></i>
+          </div>
+          <span>{{ isRecording ? "录制中" : "录制" }}</span>
         </div>
-      </div>
-      <div class="control-item">
-        <div
-          class="control-btn"
-          :class="{ active: showChat }"
-          @click="openChatWindow"
-        >
-          <i class="el-icon-chat-line-round"></i>
+        <div class="tool-item" @click="handleMessage">
+          <div class="icon-wrapper">
+            <i class="el-icon-chat-line-round"></i>
+          </div>
           <span>消息</span>
         </div>
-      </div>
-      <div class="control-item">
-        <div
-          class="control-btn"
-          :class="{ active: showShare }"
-          @click="openShareWindow"
-        >
-          <i class="el-icon-share"></i>
+        <div class="tool-item" @click="toggleShare">
+          <div class="icon-wrapper">
+            <i class="el-icon-share"></i>
+          </div>
           <span>共享</span>
         </div>
-      </div>
-      <div class="control-item">
-        <div
-          class="control-btn"
-          :class="{ active: showInvite }"
-          @click="openInviteWindow"
-        >
-          <i class="el-icon-user-solid"></i>
+        <div class="tool-item" @click="handleInvite">
+          <div class="icon-wrapper">
+            <i class="el-icon-user-solid"></i>
+          </div>
           <span>邀请</span>
         </div>
-      </div>
-      <div class="control-item">
-        <div
-          class="control-btn"
-          :class="{ active: showSettings }"
-          @click="openSettingsWindow"
-        >
-          <i class="el-icon-setting"></i>
+        <div class="tool-item" @click="openSettingDialog">
+          <div class="icon-wrapper">
+            <i class="el-icon-setting"></i>
+          </div>
           <span>设置</span>
         </div>
-      </div>
-      <div class="control-item">
-        <div class="control-btn danger" @click="endMeeting">
-          <i class="el-icon-switch-button"></i>
+        <div class="divider-line"></div>
+        <div class="tool-item end-btn" @click="endMeeting">
+          <div class="icon-wrapper">
+            <i class="el-icon-switch-button"></i>
+          </div>
           <span>结束会议</span>
         </div>
       </div>
-    </div>
+    </footer>
 
-    <!-- 聊天弹窗 -->
+    <!-- 邀请弹窗 -->
+    <CreateGroupDialog
+      :visible.sync="inviteDialogVisible"
+      title="通讯录邀请"
+      @confirm="handleInviteConfirm"
+      @close="inviteDialogVisible = false"
+    />
+
+    <!-- 设置弹窗 -->
     <el-dialog
-      title="教学聊天窗口"
-      :visible.sync="showChat"
-      width="400px"
-      :close-on-click-modal="false"
+      title="设置"
+      :visible.sync="settingDialogVisible"
+      width="31%"
+      @open="onSettingDialogOpen"
+      :show-close="false"
     >
-      <el-tabs v-model="chatTab" class="chat-tabs">
-        <el-tab-pane label="讨论" name="discuss">
-          <div class="chat-messages">
-            <div class="system-msg">
-              系统消息:
-              欢迎来到带教培训，请遵守直播规范，文明发言，违规者将被踢出直播。
-            </div>
-            <div class="my-msg">
-              <span>我:</span>
-              <span>你看</span>
-            </div>
-          </div>
-          <div class="chat-input-area">
-            <el-input
-              v-model="chatContent"
-              placeholder="请输入消息"
-              type="textarea"
-              :rows="3"
-            />
-            <el-button type="success" class="send-btn" @click="sendChat">
-              发送
-            </el-button>
-          </div>
+      <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="成员(1)" name="member">
-          <div class="member-list">
-            <div class="member-item">
-              <span class="member-avatar">👨‍⚕️</span>
-              <span>会诊专家(我)</span>
-            </div>
-          </div>
+        <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>
-
-    <!-- 共享弹窗 -->
-    <el-dialog
-      title="共享窗口选择"
-      :visible.sync="showShare"
-      width="500px"
-      :close-on-click-modal="false"
-    >
-      <div class="share-options">
-        <div class="share-grid">
-          <div class="share-item">
-            <div class="share-preview"></div>
-            <span>屏幕1</span>
-          </div>
-          <div class="share-item">
-            <div class="share-preview"></div>
-            <span>豆包 - 字节跳动旗下 AI 智能助手 和另外 ...</span>
-          </div>
-          <div class="share-item">
-            <div class="share-preview"></div>
-            <span>hisense-xinlian - Trae CN</span>
-          </div>
-          <div class="share-item">
-            <div class="share-preview"></div>
-            <span>HiUltraTalk - 文件资源管理器</span>
-          </div>
-          <div class="share-item">
-            <div class="share-preview"></div>
-            <span>Sourcetree</span>
-          </div>
-          <div class="share-item">
-            <div class="share-preview"></div>
-            <span>微信</span>
-          </div>
-        </div>
-        <div class="share-tip">共享窗口帧率较低, 建议使用采集模式接入视频</div>
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmShare">确认</el-button>
-        <el-button @click="showShare = false">取消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 邀请弹窗 -->
-    <CreateGroupDialog
-      title="邀请参与人员"
-      :visible.sync="showInvite"
-      @create-success="handleInviteSuccess"
-    />
-
-    <!-- 设置弹窗 -->
-    <SettingsDialog
-      :visible.sync="showSettings"
-      :video-config="videoConfig"
-      :audio-config="audioConfig"
-    />
   </div>
 </template>
 
 <script>
 import CreateGroupDialog from "@/views/message/components/CreateGroupDialog";
-import SettingsDialog from "./components/SettingsDialog";
 
 export default {
   name: "MeetingRoom",
   components: {
     CreateGroupDialog,
-    SettingsDialog,
   },
   data() {
     return {
-      // 会议状态
-      meetingDuration: "00:03:58",
-      micOn: true,
-      speakerOn: true,
+      // ==================== 会议基础信息 ====================
+      meetingTitle: "超声事业部的云教学",
+      meetingCode: "9019100",
+      participantCount: 1,
+      resolution: "1080P",
+      frameRate: 25,
+      networkDelay: 0,
+      networkQuality: { text: "良好", color: "#00e676" },
+
+      // ==================== 计时器 ====================
+      timer: 0,
+      timerInterval: null,
+      timerRunning: false,
+
+      // ==================== 录制相关 ====================
       isRecording: false,
-      recordingDuration: "00:00:00",
-      // 弹窗
-      showChat: false,
-      chatTab: "discuss",
-      chatContent: "",
-      showShare: false,
-      showInvite: false,
-      showSettings: false,
-
-      // 配置
-      videoConfig: {
-        camera: "",
-        captureCard: "",
-        networkStrategy: "smooth",
-        cameraResolution: "1080P",
-        captureResolution: "1080P",
-        captureFps: "30",
-        captureBitrate: "4000",
-        mirror: false,
-      },
-      audioConfig: {
-        mic: "",
-        speaker: "",
-      },
+      recordedChunks: [],
+      mediaRecorder: null,
+      recordingStartTime: null,
+      recordingTime: "00:00:00",
+      recordingTimer: null,
 
-      // 流 & 定时器
+      // ==================== 音视频设备 ====================
+      inviteDialogVisible: false,
+      settingDialogVisible: false,
+      settingTab: "general",
+      micOn: true,      // 麦克风（默认开启）
+      speakerOn: true,  // 扬声器（默认开启，非静音）
+      camOn: true,      // 摄像头（默认开启）
       localStream: null,
-      meetingTimer: null,
-      recordingTimer: null,
 
-      // 网络
-      connection: null,
-      signalLevel: 3,
-      signalDesc: "网络良好",
+      // ==================== 屏幕共享 / 采集卡 ====================
+      isSharing: true,
+      shareStream: null,
+      captureCheckTimer: null,
 
-      // 录屏
-      mediaRecorder: null,
-      recordChunks: [],
-      recordStream: null,
+      // ==================== 设置模块 ====================
+      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,
+      },
     };
   },
-  async mounted() {
-    this.$store.dispatch("app/toggleSideBarHide", true);
-    this.$store.dispatch("settings/changeSetting", {
-      key: "fixedHeader",
-      value: false,
-    });
-    // 自动打开摄像头+麦克风
-    await this.openCameraAndMic();
-
-    this.startMeetingTimer();
-    this.initNetworkSignal();
+  computed: {
+    // 计时器格式化显示
+    timerDisplay() {
+      const h = Math.floor(this.timer / 3600)
+        .toString()
+        .padStart(2, "0");
+      const m = Math.floor((this.timer % 3600) / 60)
+        .toString()
+        .padStart(2, "0");
+      const s = (this.timer % 60).toString().padStart(2, "0");
+      return `${h}:${m}:${s}`;
+    },
   },
-  beforeDestroy() {
-    clearInterval(this.meetingTimer);
-    clearInterval(this.recordingTimer);
-    if (this.localStream) this.localStream.getTracks().forEach((t) => t.stop());
-    if (this.recordStream)
-      this.recordStream.getTracks().forEach((t) => t.stop());
-    if (this.mediaRecorder) this.mediaRecorder.stop();
+  mounted() {
+    this.initPage();
+    this.initSDK();
   },
   methods: {
+    // ==================== 【1】初始化 ====================
+    initPage() {
+      this.loadLocalSetting();
+      this.startTimer();
+      this.openCameraAndMic(); // 进入页面自动打开摄像头和麦克风
+      this.fetchMeetingInfo();
+      this.startNetworkMonitoring();
+      // 隐藏侧边栏、调整布局
+      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 videoDevice = this.videoConfig.camera;
-        const audioDevice = this.audioConfig.mic;
-
         const stream = await navigator.mediaDevices.getUserMedia({
-          video: videoDevice ? { deviceId: videoDevice } : true,
-          audio: audioDevice ? { deviceId: audioDevice } : true,
+          video: true,
+          audio: true,
         });
-
         this.localStream = stream;
         this.$refs.localVideo.srcObject = stream;
+        // 默认扬声器开启（不静音）
+        this.$refs.localVideo.muted = !this.speakerOn;
       } catch (err) {
-        this.$message.error("设备权限不足");
+        console.error("打开设备失败", err);
+        this.$message.error("请允许摄像头/麦克风权限");
       }
     },
 
-    // 麦克风开关
+    // 麦克风开关（控制上传的声音）
     toggleMic() {
       if (!this.localStream) return;
       this.micOn = !this.micOn;
       this.localStream
         .getAudioTracks()
         .forEach((t) => (t.enabled = this.micOn));
+      this.$message[this.micOn ? "success" : "warning"](
+        this.micOn ? "麦克风已打开" : "麦克风已关闭"
+      );
     },
 
-    // 扬声器
+    // 扬声器开关（控制本地播放的声音，静音/取消静音）
     toggleSpeaker() {
       this.speakerOn = !this.speakerOn;
-      this.$refs.localVideo.muted = !this.speakerOn;
+      // 控制所有视频元素的静音状态
+      if (this.$refs.localVideo) {
+        this.$refs.localVideo.muted = !this.speakerOn;
+      }
+      if (this.$refs.shareVideo) {
+        this.$refs.shareVideo.muted = !this.speakerOn;
+      }
+      this.$message[this.speakerOn ? "success" : "warning"](
+        this.speakerOn ? "扬声器已打开" : "扬声器已静音"
+      );
     },
 
-    // ======================================
-    // 录屏
-    // ======================================
-    async toggleRecord() {
-      if (!this.isRecording) {
+    // 摄像头开关（控制上传的视频画面）
+    toggleCam() {
+      if (!this.localStream) return;
+      this.camOn = !this.camOn;
+      this.localStream
+        .getVideoTracks()
+        .forEach((t) => (t.enabled = this.camOn));
+      this.$message[this.camOn ? "success" : "warning"](
+        this.camOn ? "摄像头已打开" : "摄像头已关闭"
+      );
+    },
+
+    // ==================== 【3】采集卡设备 ====================
+    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 {
-          const stream = await navigator.mediaDevices.getDisplayMedia({
-            video: true,
-            audio: true,
-          });
-          this.recordStream = stream;
-          this.recordChunks = [];
+          captureStream = await navigator.mediaDevices.getUserMedia(
+            lowConstraints
+          );
+        } catch (e2) {
+          this.$message.error(
+            "无法打开采集卡，请检查USB口、权限、是否被其他软件占用"
+          );
+          this.isSharing = false;
+          return;
+        }
+      }
 
-          this.mediaRecorder = new MediaRecorder(stream, {
-            mimeType: "video/webm;codecs=vp9,opus",
-          });
-          this.mediaRecorder.ondataavailable = (e) =>
-            e.data.size && this.recordChunks.push(e.data);
-          this.mediaRecorder.onstop = () => {
-            const blob = new Blob(this.recordChunks, { type: "video/webm" });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement("a");
-            a.href = url;
-            a.download = `教学录屏_${Date.now()}.webm`;
-            a.click();
-            URL.revokeObjectURL(url);
-          };
-          this.mediaRecorder.start();
-          this.isRecording = true;
-          this.startRecordingTimer();
-        } catch (e) {
-          this.$message.error("录屏失败");
+      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;
         }
-      } else {
-        this.mediaRecorder?.stop();
-        this.isRecording = false;
-        clearInterval(this.recordingTimer);
+      }, 3000);
+
+      // 监听采集卡断开
+      const videoTrack = captureStream.getVideoTracks()[0];
+      if (videoTrack)
+        videoTrack.onended = () => {
+          this.$message.warning("采集卡信号已断开");
+          this.closeCaptureCard();
+          this.isSharing = 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);
       }
     },
 
-    // ========== 以下是你原有方法，我保持不动 ==========
-    openChatWindow() {
-      this.showChat = true;
+    // ==================== 【4】屏幕共享 ====================
+    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("共享失败");
+      }
     },
-    sendChat() {
-      this.chatContent = "";
+
+    // 停止共享
+    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();
     },
-    openShareWindow() {
-      this.showShare = true;
+
+    // ==================== 【5】录制 ====================
+    async toggleRecord() {
+      this.isRecording ? this.stopRecording() : await this.startRecording();
     },
-    confirmShare() {
-      this.showShare = false;
+
+    // 开始录制
+    async startRecording() {
+      try {
+        const stream = await navigator.mediaDevices.getDisplayMedia({
+          video: true,
+          audio: true,
+        });
+        this.mediaRecorder = new MediaRecorder(stream, {
+          mimeType: "video/webm;codecs=vp8,opus",
+        });
+        this.recordedChunks = [];
+        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.href = url;
+          a.download = `${
+            this.meetingTitle
+          }录制_${new Date().toLocaleString()}.webm`;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+          this.$message.success("录制完成");
+        };
+        this.mediaRecorder.start();
+        this.isRecording = true;
+        this.recordingStartTime = new Date();
+        this.startRecordingTimer();
+        this.$message.warning("录制中");
+      } catch (e) {
+        this.$message.error("录制失败");
+      }
     },
-    openInviteWindow() {
-      this.showInvite = true;
+
+    // 停止录制
+    stopRecording() {
+      if (this.mediaRecorder && this.isRecording) {
+        this.mediaRecorder.stop();
+        this.mediaRecorder.stream.getTracks().forEach((t) => t.stop());
+        this.isRecording = false;
+        this.stopRecordingTimer();
+      }
     },
-    handleInviteSuccess(m) {
-      this.$message.success("邀请成功");
+
+    // 录制计时
+    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);
     },
-    openSettingsWindow() {
-      this.showSettings = true;
+
+    // 停止录制计时
+    stopRecordingTimer() {
+      clearInterval(this.recordingTimer);
+      this.recordingTime = "00:00:00";
     },
 
-    endMeeting() {
-      this.$confirm("确定结束？").then(() => {
-        this.localStream?.getTracks().forEach((t) => t.stop());
-        this.mediaRecorder?.stop();
-        this.$message.success("会议已结束");
-      });
+    // ==================== 【6】计时器 ====================
+    toggleTimer() {
+      this.timerRunning ? this.pauseTimer() : this.startTimer();
+    },
+    startTimer() {
+      if (this.timerInterval) return;
+      this.timerRunning = true;
+      this.timerInterval = setInterval(() => this.timer++, 1000);
+    },
+    pauseTimer() {
+      clearInterval(this.timerInterval);
+      this.timerInterval = null;
+      this.timerRunning = false;
     },
 
-    toggleFullscreen() {
-      !document.fullscreenElement
-        ? document.documentElement.requestFullscreen()
-        : document.exitFullscreen();
+    // ==================== 【7】网络状态监控 ====================
+    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);
     },
 
-    closeMeeting() {
-      this.$confirm("确定关闭窗口？").then(() => {});
+    // ==================== 【8】设置模块 ====================
+    openSettingDialog() {
+      this.settingDialogVisible = true;
+    },
+    async onSettingDialogOpen() {
+      this.tempSetting = { ...this.globalSetting };
+      await this.enumerateDevices();
     },
 
-    startMeetingTimer() {
-      this.meetingTimer = setInterval(() => {
-        let [h, m, s] = this.meetingDuration.split(":").map(Number);
-        s++;
-        if (s >= 60) {
-          s = 0;
-          m++;
-        }
-        if (m >= 60) {
-          m = 0;
-          h++;
-        }
-        this.meetingDuration = `${String(h).padStart(2, 0)}:${String(
-          m
-        ).padStart(2, 0)}:${String(s).padStart(2, 0)}`;
-      }, 1000);
+    // 枚举音视频设备
+    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("请允许音视频权限以查看设备");
+      }
     },
 
-    startRecordingTimer() {
-      this.recordingTimer = setInterval(() => {
-        let [h, m, s] = this.recordingDuration.split(":").map(Number);
-        s++;
-        if (s >= 60) {
-          s = 0;
-          m++;
-        }
-        if (m >= 60) {
-          m = 0;
-          h++;
-        }
-        this.recordingDuration = `${String(h).padStart(2, 0)}:${String(
-          m
-        ).padStart(2, 0)}:${String(s).padStart(2, 0)}`;
-      }, 1000);
+    // 保存设置
+    saveSetting() {
+      this.globalSetting = { ...this.tempSetting };
+      this.meetingTitle = this.globalSetting.meetingTitle;
+      this.resolution = this.globalSetting.resolution;
+      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;
+      }
     },
 
-    initNetworkSignal() {
-      this.connection =
-        navigator.connection ||
-        navigator.mozConnection ||
-        navigator.webkitConnection;
-      this.updateSignalLevel();
-      this.connection?.addEventListener("change", this.updateSignalLevel);
+    // ==================== 【9】会议成员、邀请、消息 ====================
+    handleInvite() {
+      this.inviteDialogVisible = true;
+    },
+    handleInviteConfirm(selectedContacts) {
+      console.log('邀请的联系人:', selectedContacts);
+      this.$message.success(`已邀请 ${selectedContacts.length} 位联系人`);
+      this.inviteDialogVisible = false;
+    },
+    handleMessage() {
+      this.$message.info("消息功能待开发");
+    },
+    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;
+      }
     },
 
-    updateSignalLevel() {
-      this.signalLevel = 3;
-      this.signalDesc = "网络良好";
+    // ==================== 【10】窗口与会议控制 ====================
+    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("/");
+      });
+    },
+  },
+  beforeDestroy() {
+    // 页面销毁清理所有资源
+    clearInterval(this.timerInterval);
+    this.stopRecording();
+    this.stopShare();
+    this.closeCaptureCard();
+    this.localStream?.getTracks().forEach((t) => t.stop());
   },
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .meeting-container {
-  width: 100vw;
-  height: 100vh;
-  background-color: #000;
   display: flex;
   flex-direction: column;
-  color: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif;
+  height: 100vh;
+  background-color: #004d40;
+  color: #ffffff;
 }
 
-/* 顶部栏 */
-.header-bar {
+.top-bar {
   height: 40px;
-  background-color: #0f796c;
+  background: linear-gradient(180deg, #00695c 0%, #004d40 100%);
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: 0 10px;
-}
-.logo-text {
-  color: #fff;
-  font-weight: bold;
-}
-.header-center {
-  color: #fff;
-  font-size: 14px;
-}
+  justify-content: space-between;
+  border-bottom: 1px solid #00796b;
 
-/* 信息栏 */
-.info-bar {
-  height: 35px;
-  background-color: #0a665a;
-  display: flex;
-  align-items: center;
-  padding: 0 10px;
-  font-size: 13px;
-}
-.info-left span {
-  margin-right: 8px;
-}
+  .logo {
+    display: flex;
+    align-items: center;
+    font-weight: 600;
 
-/* 信号图标样式 */
-.signal-box {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-.signal-icon {
-  display: flex;
-  align-items: flex-end;
-  gap: 2px;
-  height: 16px;
-}
-.signal-icon .bar {
-  width: 3px;
-  background: #666;
-  border-radius: 1px;
-}
-.signal-icon .bar:nth-child(1) {
-  height: 4px;
-}
-.signal-icon .bar:nth-child(2) {
-  height: 7px;
-}
-.signal-icon .bar:nth-child(3) {
-  height: 10px;
-}
-.signal-icon .bar:nth-child(4) {
-  height: 13px;
-}
-.signal-icon .bar:nth-child(5) {
-  height: 16px;
-}
-.signal-icon .bar.active {
-  background: #4cd964;
-}
-.signal-desc {
-  font-size: 12px;
-  color: #eee;
+    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;
+    }
+  }
 }
 
-.recording-tip {
+.status-bar {
+  height: 40px;
+  background-color: #004d40;
   display: flex;
   align-items: center;
-  margin-left: 20px;
-}
-.rec-dot {
-  width: 10px;
-  height: 10px;
-  background-color: #f44336;
-  border-radius: 50%;
-  margin-right: 5px;
-  animation: blink 1s infinite;
-}
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
+  padding: 0 10px;
+  color: #b2dfdb;
+
+  .status-item {
+    font-family: Consolas, monospace;
   }
-  50% {
-    opacity: 0;
+
+  .divider {
+    margin: 0 6px;
+    color: #00796b;
   }
 }
 
-/* 视频区域 */
-.video-area {
+.main-content {
   flex: 1;
   display: flex;
+  overflow: hidden;
 }
-.video-left {
-  width: 50%;
-  background-color: #000;
-}
-.divider {
-  width: 4px;
-  background-color: #0f796c;
-}
-.video-right {
-  width: 50%;
+
+.video-stage {
+  flex: 1;
   background-color: #000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  position: relative;
 
-/* 底部控制栏 */
-.control-bar {
-  height: 60px;
-  background-color: #0f796c;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.control-item {
-  margin: 0 8px;
+  &.left-stage {
+    border-right: 2px solid #00796b;
+  }
+
+  .share-preview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    z-index: 5;
+  }
+
+  .local-camera {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    z-index: 5;
+  }
 }
-.control-btn {
+
+.bottom-bar {
+  height: 90px;
+  background: linear-gradient(180deg, #004d40 0%, #00695c 100%);
+  border-top: 1px solid #00796b;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 100px;
-  height: 50px;
-  border-radius: 10px;
-  cursor: pointer;
-  color: #fff;
-
-  i {
-    font-size: 20px;
-    margin-bottom: 2px;
-  }
+  padding: 0 12px;
 
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.3);
-    transform: scale(1.05);
-  }
+  .tools-section {
+    display: flex;
+    justify-content: center;
+    gap: 18px;
+    align-items: center;
 
-  &.active {
-    background-color: #fff;
-    color: #0f796c;
-  }
+    .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;
 
-  &.disabled {
-    background-color: #d9534f;
-    color: #fff;
-  }
+      .icon-wrapper {
+        position: relative;
+      }
 
-  &.recording {
-    background-color: #d9534f;
-    color: #fff;
-    animation: pulse 1.5s infinite;
-  }
+      i {
+        font-size: 22px;
+        margin-bottom: 3px;
+      }
 
-  &.danger:hover {
-    background-color: #d9534f;
-    color: #fff;
-  }
-}
+      &:hover {
+        background-color: #00897b;
+      }
 
-@keyframes pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 rgba(217, 83, 79, 0.7);
-  }
-  50% {
-    box-shadow: 0 0 0 10px rgba(217, 83, 79, 0);
+      &.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);
+      }
+    }
   }
 }
 
-/* 聊天弹窗样式 */
-.chat-messages {
-  height: 200px;
-  overflow-y: auto;
-  margin-bottom: 10px;
-  padding: 10px;
-  border-radius: 4px;
-}
-.system-msg {
-  font-size: 12px;
-  color: #b8d4d4;
-  margin-bottom: 8px;
-}
-.my-msg {
-  font-size: 12px;
-  color: #009393;
-  margin-bottom: 4px;
-}
-.chat-input-area {
-  display: flex;
-  flex-direction: column;
-}
-.send-btn {
-  align-self: flex-end;
-  margin-top: 5px;
-}
-.member-list {
-  padding: 10px;
-  border-radius: 4px;
-}
-.member-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-}
-.member-avatar {
-  margin-right: 8px;
+.is-recording {
+  color: #ef5350;
+  animation: blink 1s infinite;
 }
 
-/* 共享弹窗 */
-.share-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-  margin-bottom: 10px;
-}
-.share-item {
-  text-align: center;
-}
-.share-preview {
-  width: 100%;
-  height: 80px;
-  background-color: #f0f0f0;
-  border: 1px solid #ccc;
-  margin-bottom: 5px;
-}
-.share-tip {
-  font-size: 12px;
-  color: #666;
-  text-align: center;
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 </style>
\ No newline at end of file