Merge pull request #17 from LeafCreeper/copilot/add-switch-to-transcript-button

feat: Add transcript/summary toggle button in course detail view

Author: LeafCreeper

frontend/index.html

@@ -88,6 +88,11 @@
       </svg>
     </button>
     <!-- Edit (detail view, desktop) -->
+    <button x-show="view === 'detail' && currentLecture?.transcript"
+            @click="showTranscript = !showTranscript"
+            class="hidden md:block text-sm bg-gray-100 text-gray-700 px-3 py-1.5 rounded-lg hover:bg-gray-200"
+            x-text="showTranscript ? '切换到摘要' : '切换到转录'">
+    </button>
     <button x-show="view === 'detail' && currentLecture?.state === 'ready'"
             @click="startEdit()"
             class="hidden md:block text-sm bg-blue-500 text-white px-3 py-1.5 rounded-lg hover:bg-blue-600">
@@ -309,17 +314,31 @@ <h4 class="font-medium text-gray-800 text-sm truncate" x-text="lec.sub_title ||
     <template x-if="currentLecture">
       <div>
         <!-- Metadata -->
-        <p x-show="currentLecture.summary_model"
+        <p x-show="!showTranscript && currentLecture.summary_model"
            class="text-xs text-gray-400 mb-4">
           Generated by <span x-text="currentLecture.summary_model"></span>
         </p>
 
         <!-- Rendered summary -->
-        <div class="prose"
+        <div x-show="!showTranscript"
+             class="prose"
              x-html="renderMd(currentLecture.summary || '')"
-             x-effect="currentLecture && $nextTick(() => activateKaTeX($el))">
+             x-effect="!showTranscript && currentLecture && $nextTick(() => activateKaTeX($el))">
+        </div>
+
+        <!-- Transcript -->
+        <div x-show="showTranscript"
+             class="prose whitespace-pre-wrap text-sm text-gray-700"
+             x-text="currentLecture.transcript || ''">
         </div>
 
+        <!-- Mobile toggle button -->
+        <button x-show="currentLecture.transcript"
+                @click="showTranscript = !showTranscript"
+                class="md:hidden fixed left-5 bottom-24 text-xs bg-gray-100 text-gray-700 px-3 py-2 rounded-full shadow hover:bg-gray-200 z-20"
+                x-text="showTranscript ? '切换到摘要' : '切换到转录'">
+        </button>
+
         <!-- FAB edit button (mobile) -->
         <button x-show="currentLecture.state === 'ready'"
                 @click="startEdit()"

frontend/js/app.js

@@ -122,6 +122,7 @@ document.addEventListener("alpine:init", () => {
     currentCourse: null, currentLecture: null,
     searchQuery: "", searchResults: [],
     editText: "", editPreview: false, saving: false,
+    showTranscript: false,
     commitSha: null,
     setup: { token: "", stuid: "", uispsw: "", dashscope: "", smtp: "" },
     setupError: "", setupTesting: false,
@@ -201,7 +202,7 @@ document.addEventListener("alpine:init", () => {
         this.currentCourse = this.courses.find(x => x.course_id === params.courseId) || { course_id: params.courseId, title: "...", teacher: "" };
         this.lectures = ICS.db.getLectures(params.courseId);
       }
-      else if (view === "detail" && params.subId) { this.currentLecture = ICS.db.getLecture(params.subId); }
+      else if (view === "detail" && params.subId) { this.currentLecture = ICS.db.getLecture(params.subId); this.showTranscript = false; }
       else if (view === "edit") { this.editText = this.currentLecture?.summary || ""; this.editPreview = false; }
       this.view = view;
     },