Merge branch 'beta' of https://git.cocorobo.cn/jack/PPT into beta

src/views/Student/index.vue

@@ -324,6 +324,15 @@
       重新连接
     </button>
   </div>
+
+  <div class="connection-status" v-if="false">
+    <div class="status-indicator" :class="'disconnected'">
+      <span>连接断开</span>
+    </div>
+    <button @click="manualReconnect" class="reconnect-btn">
+      重新连接
+    </button>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -1966,7 +1975,6 @@ const selectCourseSLook = async (type = 2) => {
       await api.updateCourseFollowC(slideIndex.value, props.courseid as string)
       sendMessage({slideIndex: slideIndex.value, courseid: props.courseid, type: 'slideIndex'})
       console.log('设置当前幻灯片为跟随目标:', slideIndex.value)
-      checkParentMode()
     }
   }
   else {
@@ -1978,6 +1986,8 @@ const selectCourseSLook = async (type = 2) => {
   if (props.type == '2') {
     message.success(isFollowModeActive.value ? '跟随模式已开启' : '自由模式已开启')
   }
+  
+  checkParentMode()
 }
 
 // 切换跟随模式
@@ -3666,7 +3676,7 @@ const clearTimerState = () => {
   position: fixed;
   top: 10px;
   right: 10px;
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255, 255, 255, 0.9);
   border-radius: 5px;
   padding: 5px 10px;
   display: flex;
@@ -3674,43 +3684,85 @@ const clearTimerState = () => {
   z-index: 1000;
 
   .status-indicator {
-    width: 100px;
-    height: 20px;
+    // 胶囊浅蓝底 + 蓝色文字
+    padding: 5px 12px 5px 22px;
     border-radius: 5px;
     margin-right: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
+    position: relative;
+    background: transparent; // 根据具体状态设置渐变
+    // 边框去除
+    // border: 1px solid rgba(59, 111, 255, 0.35);
+    box-shadow: 0 2px 8px rgba(59, 111, 255, 0.15);
+
+    // 左侧状态圆点（不同状态不同颜色）
+    &::before {
+      content: "";
+      position: absolute;
+      left: 8px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: #1890ff; // 默认使用连接中蓝色
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.12);
+    }
 
-    &.connected {
-      background-color: #52c41a;
+    &.connected::before {
+      background-color: #52c41a; // 原始绿色
+      box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.18);
     }
 
-    &.connecting {
-      background-color: #1890ff;
+    &.connecting::before {
+      background-color: #1890ff; // 原始蓝色
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.18);
     }
 
-    &.disconnected {
-      background-color: #ff4d4f;
+    &.disconnected::before {
+      background-color: #ff4d4f; // 原始红色
+      box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.18);
     }
 
     span {
-      color: #fff;
+      color: #1890ff; // 默认蓝色，具体状态里覆盖
       font-size: 12px;
+      // font-weight: 600;
+      letter-spacing: 0.2px;
+    }
+
+    // 以原始主色为基础的浅色渐变与文字色
+    &.connected {
+      background: rgba(82, 196, 26, 0.15);
+      span { color: #52c41a; }
+    }
+
+    &.connecting {
+      background: rgba(24, 144, 255, 0.15);
+      span { color: #1890ff; }
+    }
+
+    &.disconnected {
+      background: rgba(255, 77, 79, 0.15);
+      span { color: #ff4d4f; }
     }
   }
 
   .reconnect-btn {
-    background-color: #1890ff;
-    color: #fff;
+    background: linear-gradient(180deg, #eaf2ff 0%, #ddebff 100%);
+    color: #3b6fff;
     border: none;
     border-radius: 5px;
-    padding: 5px 10px;
+    padding: 6px 14px;
     cursor: pointer;
-    transition: background-color 0.3s;
+    transition: all 0.2s ease;
+    // font-weight: 600;
+    box-shadow: 0 2px 8px rgba(59, 111, 255, 0.15);
 
     &:hover {
-      background-color: #40a9ff;
+      background: linear-gradient(180deg, #e2edff 0%, #d3e4ff 100%);
+      border-color: rgba(59, 111, 255, 0.55);
+      box-shadow: 0 4px 12px rgba(59, 111, 255, 0.2);
     }
   }
 }