Merge pull request #19 from LeafCreeper/copilot/add-export-button-to-course-schedule

前端课次页新增可选导出 PDF（对齐现有导出脚本格式）

Author: LeafCreeper

docs/frontend-readme.md

@@ -55,6 +55,7 @@ https://<你的用户名>.github.io/<仓库名>/
 - **节次列表** — 单课程视图，显示状态标签（就绪 / 总结中 / 等待中 / 失败）
 - **摘要阅读** — 完整 Markdown 渲染，支持 LaTeX 公式（KaTeX）
 - **编辑** — 点击编辑按钮修改任意摘要，保存后自动推送到 GitHub
+- **课次摘要导出 PDF** — 在课程课次页点击「导出」，可勾选或全选后下载 PDF
 - **搜索** — 全文搜索所有摘要内容
 - **移动端友好** — 底部标签栏导航，触控优化，响应式布局
 

frontend/index.html

@@ -87,6 +87,11 @@
               d="M4 4v5h4.5M20 20v-5h-4.5M4.5 9A8 8 0 0119.5 15M19.5 15A8 8 0 014.5 9"/>
       </svg>
     </button>
+    <!-- Export (lectures view) -->
+    <button x-show="view === 'lectures'" @click="openExportDialog()"
+            class="text-sm bg-blue-500 text-white px-3 py-1.5 rounded-lg hover:bg-blue-600">
+      导出
+    </button>
     <!-- Edit (detail view, desktop) -->
     <button x-show="view === 'detail' && currentLecture?.transcript"
             @click="showTranscript = !showTranscript"
@@ -474,6 +479,58 @@ <h2 class="text-lg font-bold text-gray-800 mt-8 mb-4">Advanced</h2>
 
 </main>
 
+<!-- ── EXPORT DIALOG ── -->
+<div x-show="exportDialogOpen" x-transition.opacity
+     class="fixed inset-0 z-50 bg-black/40 flex items-end md:items-center justify-center p-3"
+     @click.self="closeExportDialog()">
+  <div class="w-full max-w-2xl bg-white rounded-xl shadow-xl max-h-[85vh] flex flex-col">
+    <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
+      <h3 class="font-semibold text-gray-800">导出课程摘要</h3>
+      <button @click="closeExportDialog()" class="text-gray-400 hover:text-gray-600 text-sm">关闭</button>
+    </div>
+
+    <div class="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
+      <label class="inline-flex items-center gap-2 text-sm text-gray-700">
+        <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-400"
+               :checked="isExportAllSelected()"
+               @change="setExportAll($event.target.checked)">
+        <span>全选</span>
+      </label>
+      <span class="text-xs text-gray-500" x-text="'已选 ' + selectedExportCount() + ' / ' + getExportableLectures().length"></span>
+    </div>
+
+    <div class="overflow-y-auto px-4 py-3 space-y-2">
+      <template x-for="lec in getExportableLectures()" :key="lec.sub_id">
+        <label class="flex items-start gap-3 p-3 border border-gray-100 rounded-lg hover:bg-gray-50 cursor-pointer">
+          <input type="checkbox" class="mt-0.5 rounded border-gray-300 text-blue-600 focus:ring-blue-400"
+                 :checked="isLectureSelected(lec.sub_id)"
+                 @change="toggleLectureSelection(lec.sub_id, $event.target.checked)">
+          <div class="min-w-0">
+            <p class="text-sm font-medium text-gray-800 truncate" x-text="lec.sub_title || 'Untitled'"></p>
+            <p class="text-xs text-gray-500 mt-1 line-clamp-2" x-text="snippet(lec.summary, 100)"></p>
+          </div>
+        </label>
+      </template>
+      <p x-show="getExportableLectures().length === 0" class="text-sm text-gray-500 text-center py-8">
+        当前课程暂无可导出的摘要。
+      </p>
+    </div>
+
+    <div class="px-4 py-3 border-t border-gray-100 flex justify-end gap-2">
+      <button @click="closeExportDialog()"
+              :disabled="exportingPdf"
+              class="px-4 py-2 text-sm rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 disabled:opacity-50">
+        取消
+      </button>
+      <button @click="exportSelectedToPdf()"
+              :disabled="exportingPdf"
+              class="px-4 py-2 text-sm rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50"
+              x-text="exportingPdf ? '导出中…' : '导出 PDF'">
+      </button>
+    </div>
+  </div>
+</div>
+
 <!-- ── TOAST ── -->
 <div x-show="toast" x-transition.opacity
      class="toast"
@@ -489,6 +546,8 @@ <h2 class="text-lg font-bold text-gray-800 mt-8 mb-4">Advanced</h2>
 <script src="https://cdn.jsdelivr.net/npm/marked@15/marked.min.js"></script>
 <!-- DOMPurify (provides window.DOMPurify) -->
 <script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
+<!-- html2pdf.js (provides window.html2pdf) -->
+<script src="https://cdn.jsdelivr.net/npm/html2pdf.js@0.10.1/dist/html2pdf.bundle.min.js"></script>
 <!-- KaTeX + auto-render -->
 <script src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/contrib/auto-render.min.js"></script>

frontend/js/app.js

@@ -113,6 +113,23 @@ function _highlightSnippet(text, query, radius) {
   return snip.replace(re, "<mark>$1</mark>");
 }
 
+function _escapeHtml(s) {
+  return String(s || "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function _getLectureDateString(dateText, processedAt) {
+  if (dateText) return String(dateText);
+  if (!processedAt) return "";
+  const d = new Date(processedAt);
+  if (Number.isNaN(d.getTime())) return String(processedAt);
+  return d.toISOString().slice(0, 10);
+}
+
 /* ── Alpine app ── */
 document.addEventListener("alpine:init", () => {
   Alpine.data("app", () => ({
@@ -127,6 +144,7 @@ document.addEventListener("alpine:init", () => {
     setup: { token: "", stuid: "", uispsw: "", dashscope: "", smtp: "" },
     setupError: "", setupTesting: false,
     settingsForm: {}, showSecrets: {},
+    exportDialogOpen: false, exportSelection: {}, exportingPdf: false,
     iterations: 10000, repoOwner: "", repoName: "", dataBranch: "data",
     _history: [],
 
@@ -205,6 +223,7 @@ document.addEventListener("alpine:init", () => {
       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;
+      if (view !== "lectures") this.exportDialogOpen = false;
     },
     goBack() {
       const p = this._history.pop();
@@ -217,6 +236,119 @@ document.addEventListener("alpine:init", () => {
     startEdit() { this.navigate("edit"); },
     cancelEdit() { this.goBack(); },
 
+    getExportableLectures() {
+      return (this.lectures || []).filter((lec) => lec.summary && lec.summary.trim());
+    },
+    openExportDialog() {
+      const list = this.getExportableLectures();
+      if (!list.length) { this._toast("No summarized lectures to export", "error"); return; }
+      this.exportSelection = {};
+      list.forEach((lec) => { this.exportSelection[lec.sub_id] = true; });
+      this.exportDialogOpen = true;
+    },
+    closeExportDialog() {
+      if (this.exportingPdf) return;
+      this.exportDialogOpen = false;
+    },
+    isLectureSelected(subId) { return !!this.exportSelection[subId]; },
+    toggleLectureSelection(subId, checked) { this.exportSelection[subId] = !!checked; },
+    setExportAll(checked) {
+      this.getExportableLectures().forEach((lec) => { this.exportSelection[lec.sub_id] = !!checked; });
+    },
+    isExportAllSelected() {
+      const list = this.getExportableLectures();
+      return list.length > 0 && list.every((lec) => this.exportSelection[lec.sub_id]);
+    },
+    selectedExportCount() {
+      return this.getExportableLectures().filter((lec) => this.exportSelection[lec.sub_id]).length;
+    },
+    _buildExportHtml(lectures) {
+      const courseTitle = this.currentCourse?.title || "课程";
+      const teacher = this.currentCourse?.teacher || "";
+      const sections = lectures.map((lec) => {
+        const dateText = _getLectureDateString(lec.date, lec.processed_at);
+        const title = _escapeHtml(lec.sub_title || "Untitled");
+        const subtitle = dateText ? `<small>(${_escapeHtml(dateText)})</small>` : "";
+        const titleLine = subtitle ? `${title} ${subtitle}` : title;
+        return `
+          <section>
+            <h2>${titleLine}</h2>
+            ${ICS.render.renderMarkdown(lec.summary || "")}
+          </section>
+          <hr>
+        `;
+      }).join("");
+      return `
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <style>
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; color: #111827; }
+    h1 { font-size: 24px; margin: 0; }
+    .meta { color: #6b7280; margin: 8px 0 16px; font-size: 14px; }
+    section { page-break-inside: avoid; }
+    h2 { font-size: 18px; margin: 14px 0 10px; }
+    h2 small { font-size: 12px; font-weight: 400; color: #6b7280; margin-left: 6px; }
+    hr { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0; }
+    p { line-height: 1.7; }
+    pre { white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; }
+    img { max-width: 100%; }
+  </style>
+</head>
+<body>
+  <h1>${_escapeHtml(courseTitle)}</h1>
+  <p class="meta">${teacher ? `任课教师：${_escapeHtml(teacher)}` : ""}</p>
+  <hr>
+  ${sections}
+</body>
+</html>
+      `;
+    },
+    async exportSelectedToPdf() {
+      if (this.exportingPdf) return;
+      if (!window.html2pdf) {
+        this._toast("PDF library failed to load", "error");
+        return;
+      }
+      const selected = this.getExportableLectures().filter((lec) => this.exportSelection[lec.sub_id]);
+      if (!selected.length) {
+        this._toast("Please select at least one lecture", "error");
+        return;
+      }
+      this.exportingPdf = true;
+      let mount = null;
+      try {
+        mount = document.createElement("div");
+        mount.style.position = "fixed";
+        mount.style.left = "-10000px";
+        mount.style.top = "0";
+        mount.style.width = "794px";
+        mount.innerHTML = this._buildExportHtml(selected);
+        document.body.appendChild(mount);
+        const fileBase = (this.currentCourse?.title?.trim() || "course_summaries")
+          .replace(/[\\/:*?"<>|]+/g, "_");
+        await window.html2pdf()
+          .set({
+            margin: [12, 10, 12, 10],
+            filename: fileBase + "_summaries.pdf",
+            image: { type: "jpeg", quality: 0.98 },
+            html2canvas: { scale: 2, useCORS: true },
+            jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
+            pagebreak: { mode: ["css", "legacy"] },
+          })
+          .from(mount.firstElementChild || mount)
+          .save();
+        this.exportDialogOpen = false;
+        this._toast("PDF exported", "success");
+      } catch (e) {
+        this._toast(e?.message || "Export failed", "error");
+      } finally {
+        if (mount && mount.parentNode) mount.parentNode.removeChild(mount);
+        this.exportingPdf = false;
+      }
+    },
+
     async saveEdit() {
       if (this.saving) return;
       this.saving = true;

frontend/js/db.js

@@ -62,7 +62,7 @@ function _getCourses() {
 
 function _getLectures(courseId) {
   const rows = _queryAll(`
-    SELECT sub_id, sub_title, summary, processed_at,
+    SELECT sub_id, sub_title, date, summary, processed_at,
            error_stage, error_msg, summary_model, transcript
     FROM lectures WHERE course_id = ? ORDER BY sub_id ASC
   `, [courseId]);