Upload 9 files

src/views/InstructorView.js

@@ -110,6 +110,9 @@ export async function renderInstructorView() {
                 <div id="room-info" class="hidden flex items-center space-x-2 bg-black/30 px-3 py-1 rounded-lg border border-gray-700">
                     <span class="text-xs text-gray-500 uppercase">Room</span>
                     <span id="display-room-code" class="text-xl font-mono font-bold text-cyan-400 tracking-widest"></span>
+                    <button id="leave-room-btn" class="ml-2 bg-red-900/50 hover:bg-red-800 text-red-300 hover:text-white px-2 py-0.5 rounded text-xs border border-red-800/50 transition-colors" title="離開教室">
+                        🚪 離開
+                    </button>
                 </div>
             </div>
             
@@ -643,6 +646,24 @@ export function setupInstructorEvents() {
         });
     }
 
+    // Leave Room Logic
+    document.getElementById('leave-room-btn').addEventListener('click', () => {
+        if (confirm('確定要離開目前教室嗎？(不會刪除教室資料，僅回到選擇介面)')) {
+            // UI Reset
+            createContainer.classList.remove('hidden');
+            roomInfo.classList.add('hidden');
+            dashboardContent.classList.add('hidden');
+
+            // State Clear
+            sessionStorage.removeItem('vibecoding_instructor_in_room');
+            localStorage.removeItem('vibecoding_instructor_room');
+
+            // Reload to clear listeners/subscriptions effectively
+            // Or we could implement an unsubscribe, but reload is safer for quick implementation
+            window.location.reload();
+        }
+    });
+
     // Modal Events
     window.closeBroadcast = () => {
         const modal = document.getElementById('broadcast-modal');