From bd31d23bda12bf79d57dc1053b42db6a042c1dc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?O=E6=98=B5=E7=A7=B0=E9=87=8D=E8=A6=81=E5=90=97O?=
 <mxp131011@qq.com>
Date: Fri, 13 Mar 2026 13:08:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(meeting):=20=E6=96=B0=E5=A2=9E=E5=AD=A6?=
 =?UTF-8?q?=E7=94=9F=E7=AB=AF=E5=92=8C=E7=9B=91=E6=8E=A7=E7=AB=AF=E4=BC=9A?=
 =?UTF-8?q?=E8=AE=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在路由中新增学生端和监控端页面路由
- 修改加入会议逻辑，根据角色跳转到不同页面
- 新增监控端页面，支持多学生画面宫格布局
- 新增学生端页面，支持主画面显示和本地视频小窗拖拽
- 扩展 useAgoraMeeting hook 支持禁用本地音视频轨道
- 更新悬浮列表窗口的会议和字幕创建函数参数
- 添加课程和评讲信息的存储常量
---
 .../aa-components/floating-list.vue           |   4 +-
 .../use-tauri-session-storage.ts              |  25 +-
 src/router/router.ts                          |  16 +-
 src/utils/constant.ts                         |   6 +
 src/utils/tauri/windows-action.ts             |  44 +-
 src/views/meeting/join-room/join-room.vue     |   3 +-
 .../meeting-room/meeting-room-monitor.vue     | 419 ++++++++++
 .../meeting-room/meeting-room-student.vue     | 772 ++++++++++++++++++
 ...ting-room.vue => meeting-room-teacher.vue} |   0
 .../meeting/meeting-room/useAgoraMeeting.ts   | 156 ++--
 10 files changed, 1371 insertions(+), 74 deletions(-)
 create mode 100644 src/views/meeting/meeting-room/meeting-room-monitor.vue
 create mode 100644 src/views/meeting/meeting-room/meeting-room-student.vue
 rename src/views/meeting/meeting-room/{meeting-room.vue => meeting-room-teacher.vue} (100%)

diff --git a/src/other_pages/floating-list-window/aa-components/floating-list.vue b/src/other_pages/floating-list-window/aa-components/floating-list.vue
index 5c49e56..5858a6c 100644
--- a/src/other_pages/floating-list-window/aa-components/floating-list.vue
+++ b/src/other_pages/floating-list-window/aa-components/floating-list.vue
@@ -263,7 +263,7 @@
   async function openMeeting() {
     playPromptTone();
 
-    await createMeetingWindow(2, currTutorship.value || null);
+    await createMeetingWindow(2, currTutorship.value?.id);
   }
 
   /**
@@ -271,7 +271,7 @@
    */
   async function openSubtitle() {
     playPromptTone();
-    await createSubtitleWindow(currTutorship.value || null);
+    await createSubtitleWindow();
   }
 
   /**
diff --git a/src/other_pages/floating-list-window/aa-components/use-tauri-session-storage.ts b/src/other_pages/floating-list-window/aa-components/use-tauri-session-storage.ts
index 4ba07ea..d7c9505 100644
--- a/src/other_pages/floating-list-window/aa-components/use-tauri-session-storage.ts
+++ b/src/other_pages/floating-list-window/aa-components/use-tauri-session-storage.ts
@@ -1,11 +1,32 @@
 import { isObject } from '@/utils/verify';
 import { STORAGE_COMMANDS, tauriSessionStorage } from '@/utils/tauri/tauri-session';
-import type { BriCourse, BriTutorship } from '@/api/select-classroom-type';
 import type { BriUserInfo } from '@/api/login';
 import { tauri_store_page_curr_course, tauri_store_page_curr_tutorship, tauri_store_page_user_info } from '@/utils/constant';
 import { getCurrentWindow } from '@tauri-apps/api/window';
 import { ref } from 'vue';
 
+/**
+ * 课程信息（悬浮列表窗口只关心必要字段）
+ */
+export type BriCourse = {
+  /** 课程 ID */
+  id: number;
+  /** 班级 ID */
+  classId: number;
+  /** 其他字段 */
+  [key: string]: unknown;
+};
+
+/**
+ * 评讲信息（悬浮列表窗口只关心必要字段）
+ */
+export type BriTutorship = {
+  /** 评讲 ID */
+  id: number;
+  /** 其他字段 */
+  [key: string]: unknown;
+};
+
 /**
  * useTauriSessionStorage
  */
@@ -66,7 +87,7 @@ export function useTauriSessionStorage() {
     });
     tauriSessionStorage.get(tauri_store_page_curr_tutorship).then((value) => {
       const obj = isObject(value) ? value : null;
-      if (obj && 'id') {
+      if (obj && 'id' in obj) {
         currTutorship.value = obj as unknown as BriTutorship;
       }
     });
diff --git a/src/router/router.ts b/src/router/router.ts
index d276ea5..4e5945e 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -54,8 +54,20 @@ export function getLayoutRoutesList(): RouteRecordRaw[] {
         {
           path: 'meeting-room',
           name: 'meeting-room',
-          component: () => import('@/views/meeting/meeting-room/meeting-room.vue'),
-          meta: { title: '会议 - 会议房间', affix: false, noCache: true },
+          component: () => import('@/views/meeting/meeting-room/meeting-room-teacher.vue'),
+          meta: { title: '会议 - 教室端', affix: false, noCache: true },
+        },
+        {
+          path: 'meeting-room-student',
+          name: 'meeting-room-student',
+          component: () => import('@/views/meeting/meeting-room/meeting-room-student.vue'),
+          meta: { title: '会议 - 学生端', affix: false, noCache: true },
+        },
+        {
+          path: 'meeting-room-monitor',
+          name: 'meeting-room-monitor',
+          component: () => import('@/views/meeting/meeting-room/meeting-room-monitor.vue'),
+          meta: { title: '会议 - 监控端', affix: false, noCache: true },
         },
       ],
     },
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index 9f758a1..17e52f5 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -11,6 +11,12 @@ export const MAIN_WINDOW_HEIGHT = 700;
 /** 存储用户信息 */
 export const tauri_store_page_user_info = 'tauri_store_page_user_info';
 
+/** 存储当前课程信息 */
+export const tauri_store_page_curr_course = 'tauri_store_page_curr_course';
+
+/** 存储当前评讲信息 */
+export const tauri_store_page_curr_tutorship = 'tauri_store_page_curr_tutorship';
+
 /** 存储悬浮球页面动作 */
 export const tauri_floating_list_page_action = 'tauri_floating_list_page_action';
 
diff --git a/src/utils/tauri/windows-action.ts b/src/utils/tauri/windows-action.ts
index 8f37a6a..f92a9d4 100644
--- a/src/utils/tauri/windows-action.ts
+++ b/src/utils/tauri/windows-action.ts
@@ -8,13 +8,55 @@ import { ElMessage as Toast } from 'element-plus';
  */
 export async function createFloatListWindow(pageType: 'interaction' | 'tutorship') {
   try {
-    await invoke('create_float_list_window', { pageType });
+    await invoke('create_float_list_window', { page_type: pageType });
   } catch (error: any) {
     console.error('创建悬浮球窗口时出错:', error);
     Toast.error('悬浮球创建失败');
   }
 }
 
+/**
+ * 创建主窗口
+ */
+export async function createMainWindow() {
+  try {
+    await invoke('create_main_window');
+  } catch (error: any) {
+    console.error('创建主窗口时出错:', error);
+    Toast.error('创建主窗口失败');
+  }
+}
+
+/**
+ * 创建会议窗口
+ * @param windowType - 窗口类型
+ * @param courseId - 课程ID
+ */
+export async function createMeetingWindow(windowType: number, courseId?: number) {
+  try {
+    await invoke('create_meeting_window', { window_type: windowType, course_id: typeof courseId === 'number' ? courseId : null });
+  } catch (error: any) {
+    console.error('创建会议窗口时出错:', error);
+    Toast.error('创建会议窗口失败');
+  }
+}
+
+/**
+ * 创建画板窗口
+ */
+export function createDrawingBoardWindow(): Promise<boolean> {
+  Toast.warning('当前版本暂不支持画板窗口');
+  return Promise.resolve(false);
+}
+
+/**
+ * 创建实时字幕窗口
+ */
+export function createSubtitleWindow(): Promise<boolean> {
+  Toast.warning('当前版本暂不支持实时字幕窗口');
+  return Promise.resolve(false);
+}
+
 /**
  * 调整窗口位置和大小
  */
diff --git a/src/views/meeting/join-room/join-room.vue b/src/views/meeting/join-room/join-room.vue
index e763d90..fb0a8d6 100644
--- a/src/views/meeting/join-room/join-room.vue
+++ b/src/views/meeting/join-room/join-room.vue
@@ -428,8 +428,9 @@
     // 触发表单验证
 
     console.log('即将跳转到 meeting-room 页面');
+    const targetName = role.value === 'student' ? 'meeting-room-student' : 'meeting-room';
     router.push({
-      name: 'meeting-room',
+      name: targetName,
       query: {
         homeworkId: homeworkId.value,
         name: courseRoomName.value,
diff --git a/src/views/meeting/meeting-room/meeting-room-monitor.vue b/src/views/meeting/meeting-room/meeting-room-monitor.vue
new file mode 100644
index 0000000..0bae57a
--- /dev/null
+++ b/src/views/meeting/meeting-room/meeting-room-monitor.vue
@@ -0,0 +1,419 @@
+<template>
+  <div class="page">
+    <div class="page-content">
+      <div class="top-bar">
+        <div class="room-info">
+          <icon-mdi-video class="room-icon"></icon-mdi-video>
+          <div class="room-details">
+            <span class="room-name">{{ courseRoomName }}</span>
+            <span class="room-id">监控端 · 房间 ID: {{ courseRoomId }}</span>
+          </div>
+        </div>
+        <div class="network-status" :class="networkQualityClass">
+          <icon-mdi-wifi class="network-icon"></icon-mdi-wifi>
+          <span class="network-text">{{ networkStatusText }}</span>
+        </div>
+      </div>
+      <div class="monitor-container">
+        <el-empty v-if="classStatus !== 'in_class'" :description="classStatus === 'not_started' ? '等待老师上课...' : '老师已下课，等待重新上课...'"></el-empty>
+        <div v-else-if="studentUsers.length === 0" class="empty-students">
+          <el-empty description="暂无学生画面"></el-empty>
+        </div>
+        <div
+          v-else
+          class="grid"
+          :style="{
+            '--grid-cols': String(gridCols),
+            '--grid-rows': String(gridRows),
+          }"
+        >
+          <div v-for="u in studentUsers" :key="String(u.uid)" class="grid-item">
+            <div :id="`player-${u.uid}`" class="player-wrapper"></div>
+            <div class="video-label">
+              <span>{{ u.userName || `用户 ${u.uid}` }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { IAgoraRTCRemoteUser } from 'agora-rtc-sdk-ng';
+  import IconMdiWifi from '~icons/mdi/wifi';
+  import IconMdiVideo from '~icons/mdi/video';
+  import { computed, onMounted, onUnmounted, ref } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { ElMessage as Toast } from 'element-plus';
+  import type { OnJoinRoomData, ServerToClientEvents } from './types';
+  import { useAgoraMeeting } from './useAgoraMeeting';
+  import { destroyMeetingSocket, useMeetingSocket, useWebSocket } from './websocket';
+
+  const route = useRoute();
+  const router = useRouter();
+  const userStore = useUserStore();
+
+  /** 课程房间名称 */
+  const courseRoomName = computed(() => String(route.query.name || ''));
+  /** 用户长 ID */
+  const longUserId = computed(() => userStore.userInfo?.id || 0);
+  /** 用户名称 */
+  const userName = computed(() => userStore.userInfo?.name || '用户');
+  /** 作业 ID */
+  const homeworkId = computed(() => Number(route.query.homeworkId || 0));
+  /** 课程房间ID */
+  const courseRoomId = computed(() => `n_${homeworkId.value}`);
+
+  /** 课堂状态：not_started表示未开始 / in_class表示上课中 / finished表示已结束 */
+  const classStatus = ref<'finished' | 'in_class' | 'not_started'>('not_started');
+  /** 用户的短id */
+  const shortUid = ref<number>(0);
+  /** 房间号 */
+  const roomId = ref<string>('');
+  /** 老师短 UID */
+  const teacherUid = ref<number>(0);
+
+  const meeting = useAgoraMeeting(
+    courseRoomId,
+    userName,
+    shortUid,
+    {
+      onTokenWillExpire: () => {
+        Toast.warning('Token 即将过期，正在自动刷新...');
+      },
+      onTokenExpired: () => {
+        Toast.error('Token 已过期，请重新加入会议');
+      },
+      onConnectionStateChange: (state: string) => {
+        if (state === 'DISCONNECTED') {
+          Toast.warning('网络连接已断开');
+        } else if (state === 'RECONNECTING') {
+          Toast.info('正在重新连接...');
+        }
+      },
+      onError: (error: Error) => {
+        Toast.error(error.message || '操作失败');
+      },
+    },
+    { disableLocalTracks: true }
+  );
+
+  const socket = useWebSocket();
+  const meetingSocket = useMeetingSocket(courseRoomId, longUserId, userName, homeworkId);
+
+  const { networkQuality, selectedUserUid, leaveChannel, cleanup } = meeting;
+
+  /** 网络质量样式类名 */
+  const networkQualityClass = computed(() => networkQuality.value);
+
+  /** 网络状态文本描述 */
+  const networkStatusText = computed(() => {
+    const qualityMap: Record<string, string> = {
+      good: '网络良好',
+      fair: '网络一般',
+      poor: '网络较差',
+    };
+    return qualityMap[networkQuality.value] || '网络未知';
+  });
+
+  /**
+   * 监控端学生用户列表（只展示学生，不包含老师）
+   */
+  const studentUsers = computed(() => {
+    const users = meeting.remoteUsers.value as (IAgoraRTCRemoteUser & { userName?: string })[];
+    return users.filter((u) => (teacherUid.value ? u.uid !== teacherUid.value : true));
+  });
+
+  /**
+   * 根据学生人数计算宫格排数（最多 4 排）
+   */
+  const gridRows = computed(() => {
+    const count = studentUsers.value.length;
+    if (count <= 1) {
+      return 1;
+    }
+    if (count <= 4) {
+      return 2;
+    }
+    if (count <= 10) {
+      return 3;
+    }
+    return 4;
+  });
+
+  /**
+   * 根据学生人数与排数计算列数
+   */
+  const gridCols = computed(() => {
+    const count = studentUsers.value.length;
+    const rows = gridRows.value || 1;
+    return Math.max(1, Math.ceil(count / rows));
+  });
+
+  type MeetingWsPacket = Parameters<ServerToClientEvents['message']>[0];
+
+  /**
+   * 离开监控端
+   */
+  async function handleLeave(): Promise<void> {
+    try {
+      socket.off('message', onSocketMessage);
+      try {
+        meetingSocket.leaveRoom(socket);
+      } catch {}
+      destroyMeetingSocket();
+      await cleanup();
+      router.back();
+    } catch (error) {
+      console.error('离开监控端失败:', error);
+    }
+  }
+
+  /**
+   * WebSocket 消息处理
+   * @param packet - 消息包
+   */
+  function onSocketMessage(packet: MeetingWsPacket) {
+    switch (packet.type) {
+      case 'sev_join_room': {
+        const data = packet.data;
+        if (data?.roomId && !roomId.value) {
+          roomId.value = data.roomId;
+        }
+        if (data?.classStatus) {
+          classStatus.value = data.classStatus;
+        }
+        if (typeof data?.teacherUid === 'number') {
+          teacherUid.value = data.teacherUid;
+        }
+        break;
+      }
+      case 'sev_set_main_video': {
+        selectedUserUid.value = packet.data.targetUid;
+        break;
+      }
+      case 'sev_class_started': {
+        classStatus.value = 'in_class';
+        meetingSocket
+          .joinRoom(socket)
+          .then(async (roomData: OnJoinRoomData) => {
+            roomId.value = roomData.roomId;
+            shortUid.value = roomData.shortUid;
+            teacherUid.value = roomData.teacherUid;
+            await meeting.initAndJoin(roomData);
+          })
+          .catch((e: unknown) => {
+            if (e instanceof Error && e.message) {
+              Toast.error(e.message);
+              return;
+            }
+            Toast.error('加入失败');
+          });
+        break;
+      }
+      case 'sev_class_ended': {
+        classStatus.value = 'finished';
+        leaveChannel().catch(() => {});
+        break;
+      }
+      case 'sev_kick_user':
+      case 'sev_device_conflict': {
+        Toast.warning('监控端已断开，请重新进入');
+        handleLeave();
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  socket.on('message', onSocketMessage);
+
+  /**
+   * 页面挂载后加入房间
+   */
+  onMounted(async () => {
+    try {
+      const roomData = await meetingSocket.joinRoom(socket);
+      roomId.value = roomData.roomId;
+      shortUid.value = roomData.shortUid;
+      teacherUid.value = roomData.teacherUid;
+      classStatus.value = roomData?.classStatus || 'not_started';
+      if (classStatus.value === 'in_class') {
+        await meeting.initAndJoin(roomData);
+      }
+    } catch (error) {
+      console.error('加入监控端失败:', error);
+      const errorMessage = error instanceof Error ? error.message : '加入监控端失败';
+      Toast.error(errorMessage);
+      router.back();
+    }
+  });
+
+  /**
+   * 页面卸载清理
+   */
+  onUnmounted(async () => {
+    socket.off('message', onSocketMessage);
+    await cleanup();
+    try {
+      meetingSocket.leaveRoom(socket);
+    } catch {}
+    destroyMeetingSocket();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100vh;
+    padding: 15px;
+    overflow: hidden;
+
+    .page-content {
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background: rgba(255, 255, 255, 0.4);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 20px;
+      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+    }
+  }
+
+  .top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 16px 24px;
+  }
+
+  .room-info {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+
+  .room-icon {
+    width: 24px;
+    height: 24px;
+    color: #667eea;
+  }
+
+  .room-details {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .room-name {
+    font-size: 16px;
+    font-weight: 600;
+    color: #000000;
+  }
+
+  .room-id {
+    font-size: 12px;
+    color: #666666;
+  }
+
+  .network-status {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 8px 16px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+
+    &.good {
+      color: #10b981;
+      background: rgba(16, 185, 129, 0.1);
+    }
+
+    &.fair {
+      color: #f59e0b;
+      background: rgba(245, 158, 11, 0.1);
+    }
+
+    &.poor {
+      color: #ef4444;
+      background: rgba(239, 68, 68, 0.1);
+    }
+  }
+
+  .network-icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .network-text {
+    font-size: 13px;
+    font-weight: 500;
+  }
+
+  .monitor-container {
+    position: relative;
+    flex: 1;
+    width: 100%;
+    padding: 16px;
+    overflow: hidden;
+  }
+
+  .empty-students {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-rows: repeat(var(--grid-rows), 1fr);
+    grid-template-columns: repeat(var(--grid-cols), 1fr);
+    gap: 12px;
+    width: 100%;
+    height: 100%;
+  }
+
+  .grid-item {
+    position: relative;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.85);
+    border-radius: 16px;
+  }
+
+  .player-wrapper {
+    width: 100%;
+    height: 100%;
+  }
+
+  .player-wrapper :deep(video) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .video-label {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    padding: 6px 10px;
+    font-size: 12px;
+    color: #ffffff;
+    user-select: none;
+    background: rgba(0, 0, 0, 0.55);
+    border-radius: 10px;
+  }
+</style>
diff --git a/src/views/meeting/meeting-room/meeting-room-student.vue b/src/views/meeting/meeting-room/meeting-room-student.vue
new file mode 100644
index 0000000..60953b4
--- /dev/null
+++ b/src/views/meeting/meeting-room/meeting-room-student.vue
@@ -0,0 +1,772 @@
+<template>
+  <div class="page">
+    <div class="page-content">
+      <div class="top-bar">
+        <div class="room-info">
+          <icon-mdi-video class="room-icon"></icon-mdi-video>
+          <div class="room-details">
+            <span class="room-name">{{ courseRoomName }}</span>
+            <span class="room-id">房间 ID: {{ courseRoomId }}</span>
+          </div>
+        </div>
+        <div class="network-status" :class="networkQualityClass">
+          <icon-mdi-wifi class="network-icon"></icon-mdi-wifi>
+          <span class="network-text">{{ networkStatusText }}</span>
+        </div>
+      </div>
+      <div ref="stageRef" class="stage" @pointermove="handleSelfPointerMove" @pointerup="handleSelfPointerUp" @pointercancel="handleSelfPointerUp">
+        <el-empty v-if="classStatus !== 'in_class'" :description="classStatus === 'not_started' ? '等待老师上课...' : '老师已下课，等待重新上课...'"></el-empty>
+        <template v-else>
+          <div class="primary-video">
+            <div v-if="primaryUid" :id="`player-${primaryUid}`" class="player-wrapper"></div>
+            <div v-else class="primary-empty">暂无主讲画面</div>
+            <div class="primary-label video-label">
+              <span>{{ primaryName }}</span>
+              <span v-if="isPrimaryScreenSharing" class="badge">投屏中</span>
+            </div>
+          </div>
+          <div ref="selfWindowRef" class="self-window" :style="selfWindowStyle" @pointerdown.prevent="handleSelfPointerDown" @click.stop>
+            <div id="player-local" class="player-wrapper"></div>
+            <div class="self-label video-label">
+              <icon-mdi-account class="local-icon"></icon-mdi-account>
+              <span>{{ userName }}</span>
+            </div>
+          </div>
+        </template>
+      </div>
+      <div class="control-bar">
+        <button class="control-btn" :class="{ active: !isMuted }" :disabled="muteLoading" @click="toggleMute">
+          <icon-mdi-loading v-if="muteLoading" class="animate-spin"></icon-mdi-loading>
+          <template v-else>
+            <icon-mdi-microphone v-if="!isMuted"></icon-mdi-microphone>
+            <icon-mdi-microphone-off v-else></icon-mdi-microphone-off>
+          </template>
+          <span class="btn-text">{{ isMuted ? '取消静音' : '静音' }}</span>
+        </button>
+        <button class="control-btn" :class="{ active: !isVideoOff }" :disabled="videoLoading" @click="toggleVideo">
+          <icon-mdi-loading v-if="videoLoading" class="animate-spin"></icon-mdi-loading>
+          <template v-else>
+            <icon-mdi-video v-if="!isVideoOff"></icon-mdi-video>
+            <icon-mdi-video-off v-else></icon-mdi-video-off>
+          </template>
+          <span class="btn-text">{{ isVideoOff ? '开启视频' : '关闭视频' }}</span>
+        </button>
+        <button class="control-btn danger" :disabled="leaveLoading" @click="handleLeave">
+          <icon-mdi-loading v-if="leaveLoading" class="animate-spin"></icon-mdi-loading>
+          <icon-mdi-exit-to-app v-else></icon-mdi-exit-to-app>
+          <span class="btn-text">离开</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { playPromptTone } from '@/utils/prompt-tone';
+  import type { IAgoraRTCRemoteUser } from 'agora-rtc-sdk-ng';
+  import IconMdiAccount from '~icons/mdi/account';
+  import IconMdiExitToApp from '~icons/mdi/exit-to-app';
+  import IconMdiLoading from '~icons/mdi/loading';
+  import IconMdiMicrophone from '~icons/mdi/microphone';
+  import IconMdiMicrophoneOff from '~icons/mdi/microphone-off';
+  import IconMdiVideo from '~icons/mdi/video';
+  import IconMdiVideoOff from '~icons/mdi/video-off';
+  import IconMdiWifi from '~icons/mdi/wifi';
+  import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { ElMessage as Toast } from 'element-plus';
+  import type { OnJoinRoomData, ServerToClientEvents } from './types';
+  import { useAgoraMeeting } from './useAgoraMeeting';
+  import { destroyMeetingSocket, useMeetingSocket, useWebSocket } from './websocket';
+  import { useStreamType } from './useStreamType';
+
+  const route = useRoute();
+  const router = useRouter();
+  const userStore = useUserStore();
+
+  /** 课程房间名称 */
+  const courseRoomName = computed(() => String(route.query.name || ''));
+  /** 用户长 ID */
+  const longUserId = computed(() => userStore.userInfo?.id || 0);
+  /** 用户名称 */
+  const userName = computed(() => userStore.userInfo?.name || '用户');
+  /** 预计时长 */
+  /** 作业 ID */
+  const homeworkId = computed(() => Number(route.query.homeworkId || 0));
+  /** 课程房间ID */
+  const courseRoomId = computed(() => `n_${homeworkId.value}`);
+
+  /** 课堂状态：not_started表示未开始 / in_class表示上课中 / finished表示已结束 */
+  const classStatus = ref<'finished' | 'in_class' | 'not_started'>('not_started');
+  /** 用户的短id */
+  const shortUid = ref<number>(0);
+  /** 房间号 */
+  const roomId = ref<string>('');
+  /** 老师短 UID */
+  const teacherUid = ref<number>(0);
+  /** 主讲短 UID */
+  const speakerUid = ref<number | string | null>(null);
+  /** 投屏用户 ID */
+  const screenShareUid = ref<number | string | null>(null);
+
+  const meeting = useAgoraMeeting(courseRoomId, userName, shortUid, {
+    onTokenWillExpire: () => {
+      Toast.warning('Token 即将过期，正在自动刷新...');
+    },
+    onTokenExpired: () => {
+      Toast.error('Token 已过期，请重新加入会议');
+    },
+    onConnectionStateChange: (state: string) => {
+      if (state === 'DISCONNECTED') {
+        Toast.warning('网络连接已断开');
+      } else if (state === 'RECONNECTING') {
+        Toast.info('正在重新连接...');
+      }
+    },
+    onError: (error: Error) => {
+      Toast.error(error.message || '操作失败');
+    },
+    onLeft: () => {
+      Toast.success('已离开会议');
+    },
+  });
+
+  const socket = useWebSocket();
+  const meetingSocket = useMeetingSocket(courseRoomId, longUserId, userName, homeworkId);
+  const streamType = useStreamType(meeting.client);
+
+  const { isMuted, isVideoOff, muteLoading, videoLoading, leaveLoading, networkQuality, selectedUserUid, toggleMute, toggleVideo, leaveChannel, cleanup } =
+    meeting;
+
+  /** 网络质量样式类名 */
+  const networkQualityClass = computed(() => networkQuality.value);
+
+  /** 网络状态文本描述 */
+  const networkStatusText = computed(() => {
+    const qualityMap: Record<string, string> = {
+      good: '网络良好',
+      fair: '网络一般',
+      poor: '网络较差',
+    };
+    return qualityMap[networkQuality.value] || '网络未知';
+  });
+
+  /** 主讲 UID（投屏优先，其次主讲） */
+  const primaryUid = computed<number | string | null>(() => {
+    const candidate = screenShareUid.value ?? speakerUid.value ?? (teacherUid.value || null);
+    const local = meeting.localUser.uid;
+    if (candidate && local && candidate === local && teacherUid.value) {
+      return teacherUid.value;
+    }
+    return candidate;
+  });
+
+  /** 主讲名称 */
+  const primaryName = computed(() => {
+    const uid = primaryUid.value;
+    if (!uid) {
+      return '主讲';
+    }
+    const u = meeting.remoteUsers.value.find((it: IAgoraRTCRemoteUser) => it.uid === uid) as (IAgoraRTCRemoteUser & { userName?: string }) | undefined;
+    return u?.userName || (uid === meeting.localUser.uid ? userName.value : `用户 ${uid}`);
+  });
+
+  /** 是否为投屏主画面 */
+  const isPrimaryScreenSharing = computed(() => Boolean(primaryUid.value && screenShareUid.value === primaryUid.value));
+
+  /** 舞台容器 DOM */
+  const stageRef = ref<HTMLDivElement | null>(null);
+  /** 小窗容器 DOM */
+  const selfWindowRef = ref<HTMLDivElement | null>(null);
+
+  /** 小窗位置 X（单位：px） */
+  const selfX = ref<number>(0);
+  /** 小窗位置 Y（单位：px） */
+  const selfY = ref<number>(0);
+  /** 是否已经人为拖动过 */
+  const hasMoved = ref<boolean>(false);
+  /** 是否正在拖动 */
+  const isDragging = ref<boolean>(false);
+  /** 拖动偏移 X */
+  const dragOffsetX = ref<number>(0);
+  /** 拖动偏移 Y */
+  const dragOffsetY = ref<number>(0);
+
+  /** 小窗样式 */
+  const selfWindowStyle = computed(() => ({
+    transform: `translate3d(${selfX.value}px, ${selfY.value}px, 0)`,
+  }));
+
+  /**
+   * 计算并设置小窗默认位置（右下角）
+   */
+  function initSelfWindowPosition() {
+    if (hasMoved.value) {
+      return;
+    }
+    const stageEl = stageRef.value;
+    const selfEl = selfWindowRef.value;
+    if (!stageEl || !selfEl) {
+      return;
+    }
+    const stageRect = stageEl.getBoundingClientRect();
+    const selfRect = selfEl.getBoundingClientRect();
+    const padding = 16;
+    selfX.value = Math.max(0, Math.floor(stageRect.width - selfRect.width - padding));
+    selfY.value = Math.max(0, Math.floor(stageRect.height - selfRect.height - padding));
+  }
+
+  /**
+   * 小窗按下开始拖动
+   * @param e - 指针事件
+   */
+  function handleSelfPointerDown(e: PointerEvent) {
+    const stageEl = stageRef.value;
+    const selfEl = selfWindowRef.value;
+    if (!stageEl || !selfEl) {
+      return;
+    }
+    hasMoved.value = true;
+    isDragging.value = true;
+    try {
+      selfEl.setPointerCapture(e.pointerId);
+    } catch {}
+    const rect = selfEl.getBoundingClientRect();
+    dragOffsetX.value = e.clientX - rect.left;
+    dragOffsetY.value = e.clientY - rect.top;
+  }
+
+  /**
+   * 小窗拖动移动
+   * @param e - 指针事件
+   */
+  function handleSelfPointerMove(e: PointerEvent) {
+    if (!isDragging.value) {
+      return;
+    }
+    const stageEl = stageRef.value;
+    const selfEl = selfWindowRef.value;
+    if (!stageEl || !selfEl) {
+      return;
+    }
+    const stageRect = stageEl.getBoundingClientRect();
+    const selfRect = selfEl.getBoundingClientRect();
+    const nextX = e.clientX - stageRect.left - dragOffsetX.value;
+    const nextY = e.clientY - stageRect.top - dragOffsetY.value;
+    const maxX = Math.max(0, stageRect.width - selfRect.width);
+    const maxY = Math.max(0, stageRect.height - selfRect.height);
+    selfX.value = Math.max(0, Math.min(Math.floor(nextX), Math.floor(maxX)));
+    selfY.value = Math.max(0, Math.min(Math.floor(nextY), Math.floor(maxY)));
+  }
+
+  /**
+   * 小窗抬起结束拖动
+   * @param e - 指针事件
+   */
+  function handleSelfPointerUp(e: PointerEvent) {
+    if (!isDragging.value) {
+      return;
+    }
+    isDragging.value = false;
+    const selfEl = selfWindowRef.value;
+    if (!selfEl) {
+      return;
+    }
+    try {
+      selfEl.releasePointerCapture(e.pointerId);
+    } catch {}
+  }
+
+  /**
+   * 确保主讲视频能播放到当前主讲容器
+   * @param uid - 主讲 UID
+   */
+  async function ensurePrimaryVideoPlaying(uid: number | string | null) {
+    if (!uid) {
+      return;
+    }
+    await nextTick();
+    const el = document.getElementById(`player-${uid}`);
+    if (!el) {
+      return;
+    }
+    const client = meeting.client.value;
+    const user = client?.remoteUsers?.find((u: IAgoraRTCRemoteUser) => u.uid === uid);
+    if (user?.videoTrack) {
+      user.videoTrack.play(el);
+    }
+  }
+
+  watch(
+    () => primaryUid.value,
+    (uid) => {
+      ensurePrimaryVideoPlaying(uid);
+    }
+  );
+
+  watch(
+    () => meeting.remoteUsers.value.length,
+    () => {
+      ensurePrimaryVideoPlaying(primaryUid.value);
+    }
+  );
+
+  const isLeaving = ref<boolean>(false);
+  type MeetingWsPacket = Parameters<ServerToClientEvents['message']>[0];
+
+  /**
+   * 离开会议
+   */
+  async function handleLeave(): Promise<void> {
+    if (isLeaving.value) {
+      return;
+    }
+    isLeaving.value = true;
+    try {
+      socket.off('message', onSocketMessage);
+      try {
+        meetingSocket.leaveRoom(socket);
+      } catch {}
+      destroyMeetingSocket();
+      await cleanup();
+      router.back();
+    } catch (error) {
+      console.error('离开会议失败:', error);
+    } finally {
+      isLeaving.value = false;
+    }
+  }
+
+  /**
+   * WebSocket 消息处理
+   * @param packet - 消息包
+   */
+  function onSocketMessage(packet: MeetingWsPacket) {
+    console.log('[会议室] 收到控制消息:', packet);
+    switch (packet.type) {
+      case 'sev_join_room': {
+        const data = packet.data;
+        if (data?.roomId && !roomId.value) {
+          roomId.value = data.roomId;
+        }
+        if (data?.classStatus) {
+          classStatus.value = data.classStatus;
+        }
+        if (typeof data?.teacherUid === 'number') {
+          teacherUid.value = data.teacherUid;
+        }
+        if (typeof data?.speakerUid === 'number') {
+          speakerUid.value = data.speakerUid;
+          selectedUserUid.value = data.speakerUid;
+          streamType.setMainVideo(data.speakerUid);
+        }
+        if (data?.screenShareUid) {
+          screenShareUid.value = data.screenShareUid;
+        }
+        break;
+      }
+      case 'sev_mute_audio': {
+        meeting.forceMuteAudio();
+        Toast.warning('您已被创建者禁麦');
+        break;
+      }
+      case 'sev_unmute_audio': {
+        meeting.forceUnmuteAudio();
+        Toast.success('您已被解除禁麦');
+        break;
+      }
+      case 'sev_mute_video': {
+        meeting.forceMuteVideo();
+        Toast.warning('您已被创建者禁视频');
+        break;
+      }
+      case 'sev_unmute_video': {
+        meeting.forceUnmuteVideo();
+        Toast.success('您已被解除禁视频');
+        break;
+      }
+      case 'sev_set_main_video': {
+        const targetUid = packet.data.targetUid;
+        speakerUid.value = targetUid;
+        selectedUserUid.value = targetUid;
+        streamType.setMainVideo(targetUid);
+        Toast.info?.('已切换主屏');
+        break;
+      }
+      case 'sev_start_screen_share': {
+        const targetUid = packet.data?.targetUid;
+        if (typeof targetUid === 'number') {
+          screenShareUid.value = targetUid;
+          Toast.info?.(`用户 ${targetUid} 开始投屏`);
+          setTimeout(() => {
+            ensurePrimaryVideoPlaying(primaryUid.value);
+          }, 300);
+        }
+        break;
+      }
+      case 'sev_stop_screen_share': {
+        const targetUid = packet.data?.targetUid;
+        if (typeof targetUid === 'number') {
+          if (screenShareUid.value === targetUid) {
+            screenShareUid.value = null;
+          }
+          Toast.info?.(`用户 ${targetUid} 停止投屏`);
+        }
+        break;
+      }
+      case 'sev_class_started': {
+        classStatus.value = 'in_class';
+        Toast.success('老师已上课，准备加入音视频');
+        meetingSocket
+          .joinRoom(socket)
+          .then(async (roomData: OnJoinRoomData) => {
+            roomId.value = roomData.roomId;
+            shortUid.value = roomData.shortUid;
+            teacherUid.value = roomData.teacherUid;
+            speakerUid.value = roomData.speakerUid;
+            selectedUserUid.value = roomData.speakerUid;
+            streamType.setMainVideo(roomData.speakerUid);
+            if (roomData.screenShareUid) {
+              screenShareUid.value = roomData.screenShareUid;
+            }
+            await meeting.initAndJoin(roomData);
+            initSelfWindowPosition();
+          })
+          .catch((e: unknown) => {
+            if (e instanceof Error && e.message) {
+              Toast.error(e.message);
+              return;
+            }
+            Toast.error('加入失败');
+          });
+        break;
+      }
+      case 'sev_class_ended': {
+        classStatus.value = 'finished';
+        screenShareUid.value = null;
+        leaveChannel().catch(() => {});
+        Toast.info?.('老师已下课，等待重新上课');
+        break;
+      }
+      case 'sev_kick_user': {
+        Toast.error('您已被创建者移出会议');
+        handleLeave();
+        break;
+      }
+      case 'sev_device_conflict': {
+        playPromptTone();
+        Toast.warning('您已在其他设备进入课程');
+        handleLeave();
+        break;
+      }
+      default:
+        console.log('未处理的消息====', packet);
+        break;
+    }
+  }
+
+  socket.on('message', onSocketMessage);
+
+  /**
+   * 页面挂载后加入房间
+   */
+  onMounted(async () => {
+    try {
+      const roomData = await meetingSocket.joinRoom(socket);
+      roomId.value = roomData.roomId;
+      shortUid.value = roomData.shortUid;
+      teacherUid.value = roomData.teacherUid;
+      speakerUid.value = roomData.speakerUid;
+      selectedUserUid.value = roomData.speakerUid;
+      streamType.setMainVideo(roomData.speakerUid);
+      classStatus.value = roomData?.classStatus || 'not_started';
+      if (roomData.screenShareUid) {
+        screenShareUid.value = roomData.screenShareUid;
+      }
+      if (classStatus.value === 'in_class') {
+        await meeting.initAndJoin(roomData);
+        initSelfWindowPosition();
+      } else {
+        Toast.info?.('等待老师上课...');
+      }
+      setTimeout(() => {
+        initSelfWindowPosition();
+      }, 100);
+    } catch (error) {
+      console.error('加入会议失败:', error);
+      const errorMessage = error instanceof Error ? error.message : '加入会议失败';
+      Toast.error(errorMessage);
+      router.back();
+    }
+  });
+
+  /**
+   * 页面卸载清理
+   */
+  onUnmounted(async () => {
+    if (isLeaving.value) {
+      return;
+    }
+    socket.off('message', onSocketMessage);
+    await cleanup();
+    try {
+      meetingSocket.leaveRoom(socket);
+    } catch {}
+    destroyMeetingSocket();
+  });
+</script>
+
+<style lang="scss" scoped>
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .animate-spin {
+    animation: spin 1s linear infinite;
+  }
+
+  .page {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100vh;
+    padding: 15px;
+    overflow: hidden;
+
+    .page-content {
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background: rgba(255, 255, 255, 0.4);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 20px;
+      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+    }
+  }
+
+  .top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 16px 24px;
+  }
+
+  .room-info {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+
+  .room-icon {
+    width: 24px;
+    height: 24px;
+    color: #667eea;
+  }
+
+  .room-details {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .room-name {
+    font-size: 16px;
+    font-weight: 600;
+    color: #000000;
+  }
+
+  .room-id {
+    font-size: 12px;
+    color: #666666;
+  }
+
+  .network-status {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 8px 16px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+
+    &.good {
+      color: #10b981;
+      background: rgba(16, 185, 129, 0.1);
+    }
+
+    &.fair {
+      color: #f59e0b;
+      background: rgba(245, 158, 11, 0.1);
+    }
+
+    &.poor {
+      color: #ef4444;
+      background: rgba(239, 68, 68, 0.1);
+    }
+  }
+
+  .network-icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .network-text {
+    font-size: 13px;
+    font-weight: 500;
+  }
+
+  .stage {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 16px;
+    overflow: hidden;
+  }
+
+  .primary-video {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.82);
+    border-radius: 16px;
+  }
+
+  .primary-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  .player-wrapper {
+    width: 100%;
+    height: 100%;
+  }
+
+  .video-label {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 6px 10px;
+    font-size: 12px;
+    color: #ffffff;
+    user-select: none;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 10px;
+  }
+
+  .badge {
+    padding: 2px 8px;
+    font-size: 11px;
+    background: rgba(16, 185, 129, 0.8);
+    border-radius: 8px;
+  }
+
+  .self-window {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 240px;
+    height: 160px;
+    overflow: hidden;
+    cursor: grab;
+    background: rgba(0, 0, 0, 0.85);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-radius: 14px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  .self-label {
+    top: 8px;
+    bottom: auto;
+  }
+
+  .local-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .control-bar {
+    display: flex;
+    gap: 14px;
+    justify-content: center;
+    width: 100%;
+    padding: 14px 16px 18px;
+  }
+
+  .control-btn {
+    display: inline-flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 16px;
+    color: #ffffff;
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.65);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 14px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.78);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    &.active {
+      background: rgba(102, 126, 234, 0.85);
+      border-color: rgba(102, 126, 234, 0.55);
+    }
+
+    &.danger {
+      background: rgba(239, 68, 68, 0.85);
+      border-color: rgba(239, 68, 68, 0.55);
+    }
+  }
+
+  .btn-text {
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  .control-btn :deep(svg) {
+    width: 18px;
+    height: 18px;
+  }
+
+  .player-wrapper :deep(video) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+</style>
diff --git a/src/views/meeting/meeting-room/meeting-room.vue b/src/views/meeting/meeting-room/meeting-room-teacher.vue
similarity index 100%
rename from src/views/meeting/meeting-room/meeting-room.vue
rename to src/views/meeting/meeting-room/meeting-room-teacher.vue
diff --git a/src/views/meeting/meeting-room/useAgoraMeeting.ts b/src/views/meeting/meeting-room/useAgoraMeeting.ts
index eb3a1c8..9d1b072 100644
--- a/src/views/meeting/meeting-room/useAgoraMeeting.ts
+++ b/src/views/meeting/meeting-room/useAgoraMeeting.ts
@@ -22,14 +22,29 @@ import { useRoute } from 'vue-router';
 import type { LocalUser, MeetingEventCallbacks, NetworkQualityLevel, OnJoinRoomData } from './types';
 import { TokenManager } from './useTokenManager';
 
+/**
+ * 声网会议 Hook 配置
+ */
+export interface AgoraMeetingOptions {
+  /** 是否禁用本地音视频轨道（用于监控端等纯观看场景） */
+  disableLocalTracks?: boolean;
+}
+
 /**
  * 声网会议核心 Hook
  * @param {Ref<string>} courseRoomId - 课程房间 ID
  * @param {Ref<string>} userName - 用户名称
  * @param {Ref<number>} shortUidRef - 短 UID 引用（由外部维护）
  * @param {MeetingEventCallbacks} callbacks - 事件回调函数
+ * @param {AgoraMeetingOptions} options - 配置项
  */
-export function useAgoraMeeting(courseRoomId: Ref<string>, userName: Ref<string>, shortUidRef: Ref<number>, callbacks?: MeetingEventCallbacks) {
+export function useAgoraMeeting(
+  courseRoomId: Ref<string>,
+  userName: Ref<string>,
+  shortUidRef: Ref<number>,
+  callbacks?: MeetingEventCallbacks,
+  options?: AgoraMeetingOptions
+) {
   /** 设置声网日志等级 */
   AgoraRTC.setLogLevel(2);
   // 从路由获取设备 ID
@@ -81,6 +96,8 @@ export function useAgoraMeeting(courseRoomId: Ref<string>, userName: Ref<string>
 
   /** 是否正在共享屏幕 */
   const isScreenSharing = ref(false);
+  /** 是否禁用本地音视频轨道 */
+  const disableLocalTracks = Boolean(options?.disableLocalTracks);
 
   // 同步本地用户名称
   watchEffect(() => {
@@ -355,40 +372,45 @@ export function useAgoraMeeting(courseRoomId: Ref<string>, userName: Ref<string>
     try {
       FullLoading.show('正在加入会议...');
 
-      // 初始化本地麦克风
-      try {
-        localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack({
-          microphoneId: microphoneDeviceId.value || undefined,
-          encoderConfig: { sampleRate: 16000, bitrate: 16 },
-        });
-      } catch (error) {
-        console.error('麦克风初始化失败:', error);
-        const err = error as { code?: string; name?: string; message?: string };
-        if (err.code === 'NOT_READABLE' || err.name === 'NotReadableError' || err.message?.includes('Device in use')) {
-          throw new Error('麦克风被占用，请关闭其他使用麦克风的程序后重试', { cause: error });
-        } else {
-          throw new Error('麦克风初始化失败，请检查设备连接', { cause: error });
+      if (!disableLocalTracks) {
+        // 初始化本地麦克风
+        try {
+          localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack({
+            microphoneId: microphoneDeviceId.value || undefined,
+            encoderConfig: { sampleRate: 16000, bitrate: 16 },
+          });
+        } catch (error) {
+          console.error('麦克风初始化失败:', error);
+          const err = error as { code?: string; name?: string; message?: string };
+          if (err.code === 'NOT_READABLE' || err.name === 'NotReadableError' || err.message?.includes('Device in use')) {
+            throw new Error('麦克风被占用，请关闭其他使用麦克风的程序后重试', { cause: error });
+          } else {
+            throw new Error('麦克风初始化失败，请检查设备连接', { cause: error });
+          }
         }
-      }
 
-      // 初始化本地摄像头
-      try {
-        localVideoTrack = await AgoraRTC.createCameraVideoTrack({
-          cameraId: cameraDeviceId.value || undefined,
-          encoderConfig: { width: 640, height: 480, frameRate: 15, bitrateMin: 300, bitrateMax: 600 },
-        });
-      } catch (error) {
-        console.error('摄像头初始化失败:', error);
-        const err = error as { code?: string; name?: string; message?: string };
-        if (err.code === 'NOT_READABLE' || err.name === 'NotReadableError' || err.message?.includes('Device in use')) {
-          throw new Error('摄像头被占用，请关闭其他使用摄像头的程序后重试', { cause: error });
-        } else {
-          throw new Error('摄像头初始化失败，请检查设备连接', { cause: error });
+        // 初始化本地摄像头
+        try {
+          localVideoTrack = await AgoraRTC.createCameraVideoTrack({
+            cameraId: cameraDeviceId.value || undefined,
+            encoderConfig: { width: 640, height: 480, frameRate: 15, bitrateMin: 300, bitrateMax: 600 },
+          });
+        } catch (error) {
+          console.error('摄像头初始化失败:', error);
+          const err = error as { code?: string; name?: string; message?: string };
+          if (err.code === 'NOT_READABLE' || err.name === 'NotReadableError' || err.message?.includes('Device in use')) {
+            throw new Error('摄像头被占用，请关闭其他使用摄像头的程序后重试', { cause: error });
+          } else {
+            throw new Error('摄像头初始化失败，请检查设备连接', { cause: error });
+          }
         }
-      }
 
-      localUser.videoTrack = localVideoTrack;
-      localUser.audioTrack = localAudioTrack;
+        localUser.videoTrack = localVideoTrack;
+        localUser.audioTrack = localAudioTrack;
+      } else {
+        localUser.videoTrack = null;
+        localUser.audioTrack = null;
+      }
 
       // join 返回声网实际分配的 uid（传 0 时声网会自动分配）
       // 更新本地用户 UID
@@ -402,43 +424,45 @@ export function useAgoraMeeting(courseRoomId: Ref<string>, userName: Ref<string>
         tokenManagerRef.value.setCurrentToken(roomData.tokenInfo);
       }
 
-      // ✅ 根据恢复的状态决定是否发布轨道（如果被禁麦/禁视频，只发布另一个）
-      const tracksToPublish: (ICameraVideoTrack | IMicrophoneAudioTrack)[] = [];
+      if (!disableLocalTracks) {
+        // ✅ 根据恢复的状态决定是否发布轨道（如果被禁麦/禁视频，只发布另一个）
+        const tracksToPublish: (ICameraVideoTrack | IMicrophoneAudioTrack)[] = [];
 
-      // 如果没有被禁麦，发布音频
-      if (!roomData?.isAudioMuted && localAudioTrack) {
-        tracksToPublish.push(localAudioTrack);
-      }
+        // 如果没有被禁麦，发布音频
+        if (!roomData?.isAudioMuted && localAudioTrack) {
+          tracksToPublish.push(localAudioTrack);
+        }
 
-      // 如果没有被禁视频，发布视频
-      if (!roomData?.isVideoMuted && localVideoTrack) {
-        tracksToPublish.push(localVideoTrack);
-      }
+        // 如果没有被禁视频，发布视频
+        if (!roomData?.isVideoMuted && localVideoTrack) {
+          tracksToPublish.push(localVideoTrack);
+        }
 
-      console.log('[Agora] 准备发布的轨道:', {
-        audio: !roomData?.isAudioMuted,
-        video: !roomData?.isVideoMuted,
-        tracksCount: tracksToPublish.length,
-      });
+        console.log('[Agora] 准备发布的轨道:', {
+          audio: !roomData?.isAudioMuted,
+          video: !roomData?.isVideoMuted,
+          tracksCount: tracksToPublish.length,
+        });
 
-      if (tracksToPublish.length > 0) {
-        await client.value?.publish(tracksToPublish);
-        console.log('[Agora] 轨道已发布，准备播放视频');
-      } else {
-        console.log('[Agora] 用户被禁麦/禁视频，暂不发布任何轨道');
-      }
-
-      // 加入并发布成功后再播放本地视频（确保 player-local 元素已存在）
-      if (localVideoTrack) {
-        // 使用 nextTick 等待 Vue 响应式更新完成
-        await nextTick();
-        const el = document.getElementById('player-local');
-        console.log('[Agora] 查找 player-local 元素:', el ? '找到' : '未找到');
-        if (el && !el.querySelector('video')) {
-          localVideoTrack?.play(el);
-          console.log('[Agora] 本地视频已播放');
+        if (tracksToPublish.length > 0) {
+          await client.value?.publish(tracksToPublish);
+          console.log('[Agora] 轨道已发布，准备播放视频');
         } else {
-          console.warn('[Agora] 未找到 player-local 元素或已有视频', el ? '元素存在' : '元素不存在');
+          console.log('[Agora] 用户被禁麦/禁视频，暂不发布任何轨道');
+        }
+
+        // 加入并发布成功后再播放本地视频（确保 player-local 元素已存在）
+        if (localVideoTrack) {
+          // 使用 nextTick 等待 Vue 响应式更新完成
+          await nextTick();
+          const el = document.getElementById('player-local');
+          console.log('[Agora] 查找 player-local 元素:', el ? '找到' : '未找到');
+          if (el && !el.querySelector('video')) {
+            localVideoTrack?.play(el);
+            console.log('[Agora] 本地视频已播放');
+          } else {
+            console.warn('[Agora] 未找到 player-local 元素或已有视频', el ? '元素存在' : '元素不存在');
+          }
         }
       }
 
@@ -606,9 +630,9 @@ export function useAgoraMeeting(courseRoomId: Ref<string>, userName: Ref<string>
 
   /**
    * 清理 Agora 客户端资源
-   * @param options.toastSuccess - 是否显示成功提示
+   * @param teardownOptions.toastSuccess - 是否显示成功提示
    */
-  async function teardownAgoraClient(options: { toastSuccess?: boolean }): Promise<void> {
+  async function teardownAgoraClient(teardownOptions: { toastSuccess?: boolean }): Promise<void> {
     cleanupTokenManager();
     const currentClient = client.value;
     client.value = null;
@@ -647,7 +671,7 @@ export function useAgoraMeeting(courseRoomId: Ref<string>, userName: Ref<string>
     localUser.videoTrack = null;
     localUser.audioTrack = null;
 
-    if (options.toastSuccess) {
+    if (teardownOptions.toastSuccess) {
       callbacks?.onLeft?.();
     }
   }