Add content admin and interactive Python console

README.md

@@ -13,6 +13,7 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
 
 - 學生：`/classroom`
 - 教師：`/classroom/teacher`
+- 內容管理：`/admin`
 - 展示：`/`
 
 內建 2026 Fall 18 週課程，Week 1、2 已有套版。支援多個 Python 檔、ZIP 匯入匯出、即時監看、每週只保留最後正式版與整班發布。
@@ -23,6 +24,8 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
 - 教師可選現有課程，也可用教師密碼建立新課程代碼。新課程會寫回此 Space，因此建立時會觸發一次重新建置。
 - 教師可從課程刪除學生及其教室內進度；已經發布到首頁 Demo 的作品不會連帶刪除。
 - 學生名單與尚未發布的草稿保存在 Space 執行期間；每週正式提交發布後才會成為此 repository 內的長期作品。
+- 學生端 Python 會逐段顯示輸出；程式執行到 `input()` 時，Console 才出現輸入列並等待送出。
+- 內容管理後台可修改 18 週課程資料與每週套版，也可新增、改名、編輯或刪除公開 Demo 專題。所有儲存都會寫回此 Space。
 
 Space Secrets：
 

admin_service.py

@@ -0,0 +1,282 @@
+"""Teacher-only content administration for classroom plans and Demo projects."""
+from __future__ import annotations
+
+import json
+import re
+import shutil
+from pathlib import Path, PurePosixPath
+
+from fastapi import APIRouter, HTTPException
+from fastapi.responses import FileResponse
+from pydantic import BaseModel
+
+import classroom_service as classroom
+
+ROOT = Path(__file__).resolve().parent
+PROJECTS = ROOT / "projects"
+STATIC = ROOT / "classroom_static"
+TEXT_EXTENSIONS = {
+    ".py", ".html", ".css", ".js", ".json", ".txt", ".csv", ".md",
+    ".toml", ".yaml", ".yml",
+}
+router = APIRouter()
+
+
+class AdminAuth(BaseModel):
+    password: str
+
+
+class WeekRequest(AdminAuth):
+    week_id: str
+
+
+class WeekSave(WeekRequest):
+    title: str
+    project: str
+    output: str
+    files: dict[str, str]
+
+
+class ProjectRef(BaseModel):
+    class_name: str
+    student_name: str
+    project_name: str
+
+
+class DemoRequest(AdminAuth):
+    project: ProjectRef
+
+
+class DemoSave(AdminAuth):
+    original: ProjectRef | None = None
+    class_name: str
+    student_name: str
+    project_name: str
+    files: dict[str, str]
+
+
+def segment(value: str, label: str) -> str:
+    text = re.sub(r"[\x00-\x1f\x7f]", "", str(value).strip())[:100]
+    if not text or text in {".", ".."} or "/" in text or "\\" in text:
+        raise HTTPException(400, f"{label}不合法")
+    return text
+
+
+def text_path(value: str) -> str:
+    raw = str(value).replace("\\", "/").strip("/")
+    path = PurePosixPath(raw)
+    if (
+        not raw or path.is_absolute() or ".." in path.parts or len(raw) > 180
+        or path.suffix.lower() not in TEXT_EXTENSIONS
+    ):
+        raise HTTPException(400, f"檔案路徑不合法：{value}")
+    return path.as_posix()
+
+
+def project_root(ref: ProjectRef) -> Path:
+    return PROJECTS / segment(ref.class_name, "班級名稱") / segment(ref.student_name, "學生名稱") / segment(ref.project_name, "專題名稱")
+
+
+def relative_repo_path(path: Path) -> str:
+    return path.relative_to(ROOT).as_posix()
+
+
+def commit_changes(additions: dict[str, bytes | Path], deletions: list[str], message: str):
+    if not classroom.TOKEN:
+        raise HTTPException(503, "請先在 Space Secrets 設定 HF_TOKEN")
+    from huggingface_hub import CommitOperationAdd, CommitOperationDelete, HfApi
+
+    add_paths = set(additions)
+    operations = [
+        CommitOperationDelete(path_in_repo=path)
+        for path in sorted(set(deletions) - add_paths)
+    ]
+    operations.extend(
+        CommitOperationAdd(path_in_repo=path, path_or_fileobj=value)
+        for path, value in sorted(additions.items())
+    )
+    if not operations:
+        return None
+    return HfApi(token=classroom.TOKEN).create_commit(
+        repo_id=classroom.REPO,
+        repo_type="space",
+        operations=operations,
+        commit_message=message,
+    )
+
+
+def load_course() -> dict:
+    return json.loads((classroom.DATA / "course.json").read_text(encoding="utf-8"))
+
+
+def scan_demo() -> list[dict]:
+    projects = []
+    if not PROJECTS.is_dir():
+        return projects
+    for class_dir in sorted(path for path in PROJECTS.iterdir() if path.is_dir() and not path.name.startswith(".")):
+        for student_dir in sorted(path for path in class_dir.iterdir() if path.is_dir() and not path.name.startswith(".")):
+            for item in sorted(path for path in student_dir.iterdir() if path.is_dir() and not path.name.startswith(".")):
+                kind = "python" if (item / "main.py").is_file() else "html" if (item / "index.html").is_file() else "external" if (item / "link.txt").is_file() else "asset"
+                projects.append({
+                    "class_name": class_dir.name,
+                    "student_name": student_dir.name,
+                    "project_name": item.name,
+                    "type": kind,
+                })
+    return projects
+
+
+def read_editable_text(path: Path) -> str | None:
+    if path.suffix.lower() not in TEXT_EXTENSIONS or path.stat().st_size > 800_000:
+        return None
+    try:
+        return path.read_text(encoding="utf-8")
+    except UnicodeDecodeError:
+        return None
+
+
+def editable_project(root: Path) -> dict:
+    if not root.is_dir():
+        raise HTTPException(404, "找不到這個 Demo 專題")
+    files: dict[str, str] = {}
+    assets: list[str] = []
+    for path in sorted(item for item in root.rglob("*") if item.is_file()):
+        rel = path.relative_to(root).as_posix()
+        content = read_editable_text(path)
+        if content is None:
+            assets.append(rel)
+        else:
+            files[rel] = content
+    return {"files": files, "assets": assets}
+
+
+@router.get("/admin")
+def admin_page():
+    return FileResponse(STATIC / "admin.html")
+
+
+@router.post("/api/admin/state")
+def admin_state(req: AdminAuth):
+    classroom.check_password(req.password)
+    return {"course": load_course(), "demo_projects": scan_demo()}
+
+
+@router.post("/api/admin/week")
+def admin_week(req: WeekRequest):
+    classroom.check_password(req.password)
+    week_id = classroom.clean(req.week_id, "")
+    course = load_course()
+    week = next((item for item in course.get("weeks", []) if item.get("id") == week_id), None)
+    if not week:
+        raise HTTPException(404, "找不到這一週")
+    root = classroom.TEMPLATES / week_id
+    files = {}
+    if root.is_dir():
+        for path in sorted(item for item in root.rglob("*") if item.is_file()):
+            rel = path.relative_to(root).as_posix()
+            if path.suffix.lower() in TEXT_EXTENSIONS:
+                files[rel] = path.read_text(encoding="utf-8")
+    return {"week": week, "files": files}
+
+
+@router.post("/api/admin/week/save")
+def save_week(req: WeekSave):
+    classroom.check_password(req.password)
+    week_id = classroom.clean(req.week_id, "")
+    files = {text_path(path): str(content) for path, content in req.files.items()}
+    course = load_course()
+    week = next((item for item in course.get("weeks", []) if item.get("id") == week_id), None)
+    if not week:
+        raise HTTPException(404, "找不到這一週")
+    week.update({
+        "title": classroom.clean_label(req.title, week.get("title", "")),
+        "project": classroom.clean_label(req.project, week.get("project", "")),
+        "output": classroom.clean_label(req.output, week.get("output", ""), 160),
+        "template": bool(files),
+    })
+    course_bytes = (json.dumps(course, ensure_ascii=False, indent=2) + "\n").encode()
+    root = classroom.TEMPLATES / week_id
+    old = [path for path in root.rglob("*") if path.is_file()] if root.is_dir() else []
+    additions = {"classroom_data/course.json": course_bytes}
+    additions.update({f"classroom_data/templates/{week_id}/{path}": content.encode() for path, content in files.items()})
+    deletions = [relative_repo_path(path) for path in old if path.relative_to(root).as_posix() not in files]
+    result = commit_changes(additions, deletions, f"Update classroom {week_id}")
+
+    (classroom.DATA / "course.json").write_bytes(course_bytes)
+    root.mkdir(parents=True, exist_ok=True)
+    for path in old:
+        if path.relative_to(root).as_posix() not in files:
+            path.unlink(missing_ok=True)
+    for rel, content in files.items():
+        target = root / rel
+        target.parent.mkdir(parents=True, exist_ok=True)
+        target.write_text(content, encoding="utf-8")
+    return {"ok": True, "commit_url": str(result.commit_url) if result else ""}
+
+
+@router.post("/api/admin/demo/project")
+def admin_demo_project(req: DemoRequest):
+    classroom.check_password(req.password)
+    return editable_project(project_root(req.project))
+
+
+@router.post("/api/admin/demo/save")
+def save_demo(req: DemoSave):
+    classroom.check_password(req.password)
+    target_ref = ProjectRef(
+        class_name=segment(req.class_name, "班級名稱"),
+        student_name=segment(req.student_name, "學生名稱"),
+        project_name=segment(req.project_name, "專題名稱"),
+    )
+    target = project_root(target_ref)
+    original = project_root(req.original) if req.original else None
+    if original and not original.is_dir():
+        raise HTTPException(404, "原始 Demo 專題不存在")
+    if target != original and target.exists():
+        raise HTTPException(409, "目標位置已有同名專題")
+    files = {text_path(path): str(content) for path, content in req.files.items()}
+    if not any(name in files for name in ("main.py", "index.html", "link.txt")):
+        raise HTTPException(400, "專題至少需要 main.py、index.html 或 link.txt 其中一個入口")
+
+    existing = [path for path in original.rglob("*") if path.is_file()] if original else []
+    additions: dict[str, bytes | Path] = {}
+    target_prefix = relative_repo_path(target)
+    if target != original:
+        for path in existing:
+            rel = path.relative_to(original).as_posix()
+            if read_editable_text(path) is None:
+                additions[f"{target_prefix}/{rel}"] = path
+    additions.update({f"{target_prefix}/{rel}": content.encode() for rel, content in files.items()})
+    if target == original:
+        deletions = [relative_repo_path(path) for path in existing if read_editable_text(path) is not None and path.relative_to(original).as_posix() not in files]
+    else:
+        deletions = [relative_repo_path(path) for path in existing]
+    result = commit_changes(additions, deletions, f"Update Demo project {target_ref.project_name}")
+
+    if original and target != original:
+        target.parent.mkdir(parents=True, exist_ok=True)
+        shutil.copytree(original, target)
+        shutil.rmtree(original)
+    else:
+        target.mkdir(parents=True, exist_ok=True)
+    for path in list(target.rglob("*")):
+        if path.is_file() and read_editable_text(path) is not None and path.relative_to(target).as_posix() not in files:
+            path.unlink()
+    for rel, content in files.items():
+        path = target / rel
+        path.parent.mkdir(parents=True, exist_ok=True)
+        path.write_text(content, encoding="utf-8")
+    project_data = target_ref.model_dump() if hasattr(target_ref, "model_dump") else target_ref.dict()
+    return {"ok": True, "project": project_data, "commit_url": str(result.commit_url) if result else ""}
+
+
+@router.post("/api/admin/demo/delete")
+def delete_demo(req: DemoRequest):
+    classroom.check_password(req.password)
+    root = project_root(req.project)
+    if not root.is_dir():
+        raise HTTPException(404, "找不到這個 Demo 專題")
+    paths = [path for path in root.rglob("*") if path.is_file()]
+    result = commit_changes({}, [relative_repo_path(path) for path in paths], f"Delete Demo project {root.name}")
+    shutil.rmtree(root)
+    return {"ok": True, "commit_url": str(result.commit_url) if result else ""}

classroom_static/admin.css

@@ -0,0 +1,51 @@
+.admin-body { min-width:0; }
+.app-header a { text-decoration:none; }
+.admin-tabs { flex:none;min-height:52px;display:flex;align-items:center;gap:.25rem;padding:0 1.5rem;border-bottom:1px solid var(--line);background:var(--surface); }
+.admin-tabs>span { margin-left:auto;color:var(--muted);font-size:.75rem; }
+.admin-tab { align-self:stretch;padding:0 1.1rem;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font-weight:800; }
+.admin-tab:hover { color:var(--navy);background:var(--surface-subtle); }
+.admin-tab.active { border-bottom-color:var(--action);color:var(--navy); }
+.admin-main { min-height:0;flex:1;overflow:hidden; }
+.admin-view { display:none;height:100%;grid-template-columns:320px minmax(0,1fr); }
+.admin-view.active { display:grid; }
+.admin-sidebar { min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden;border-right:1px solid var(--line);background:var(--surface); }
+#courseView .admin-sidebar { grid-template-rows:auto minmax(0,1fr); }
+.admin-sidebar-head { min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--line); }
+.admin-sidebar-head strong,.admin-sidebar-head small { display:block; }
+.admin-sidebar-head small { margin-top:.2rem;color:var(--muted);font-size:.75rem; }
+.admin-search { padding:.75rem;border-bottom:1px solid var(--line); }
+.admin-list { min-height:0;overflow:auto;padding:.5rem; }
+.admin-list-button { width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;padding:.7rem .75rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);text-align:left; }
+.admin-list-button:hover { background:var(--surface-subtle); }
+.admin-list-button.active { background:var(--action-soft);color:var(--navy); }
+.admin-list-button strong,.admin-list-button span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
+.admin-list-button span,.admin-list-button small { color:var(--muted);font-size:.75rem; }
+.admin-list-button>div small { display:block;margin-top:.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
+.admin-editor { min-width:0;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden;background:var(--shell); }
+.admin-editor-head { min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--line);background:var(--surface); }
+.admin-editor-head h1 { margin:0;font-size:1.15rem; }
+.admin-editor-head p { margin:.25rem 0 0;color:var(--muted);font-size:.8rem; }
+.admin-actions { display:flex;gap:.5rem; }
+.admin-fields { display:grid;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--line);background:var(--surface); }
+.admin-fields.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
+.admin-fields label { color:var(--muted);font-size:.78rem;font-weight:750; }
+.admin-fields input { margin-top:.4rem;color:var(--ink);font-weight:600; }
+.file-workspace { min-height:0;display:grid;grid-template-columns:240px minmax(0,1fr); }
+.file-workspace>aside { min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border-right:1px solid var(--line);background:var(--surface); }
+.file-workspace-head { min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--line); }
+.admin-file-list { min-height:0;overflow:auto;padding:.4rem; }
+.admin-file-row { display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;border-radius:var(--radius-sm); }
+.admin-file-row.active { background:var(--action-soft); }
+.admin-file-row button { min-width:0;min-height:38px;border:0;background:transparent;color:var(--ink);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 .78rem/1.2 "SFMono-Regular",Consolas,monospace; }
+.admin-file-row button:first-child { padding:0 .65rem; }
+.admin-file-row .remove-file { text-align:center;color:var(--muted);font-size:1.1rem; }
+.admin-file-row .remove-file:hover { color:var(--danger); }
+.code-field { min-width:0;min-height:0;display:grid;grid-template-rows:42px minmax(0,1fr);background:var(--editor); }
+.code-field>span { display:flex;align-items:center;padding:0 1rem;border-bottom:1px solid var(--editor-line);background:var(--editor-raised);color:var(--editor-ink);font:650 .8rem/1 "SFMono-Regular",Consolas,monospace; }
+.code-field textarea { min-width:0;min-height:0;resize:none;padding:1rem;border:0;outline:0;background:var(--editor);color:var(--editor-ink);font:500 .9rem/1.65 "SFMono-Regular",Consolas,monospace;tab-size:4; }
+.code-field textarea:focus { box-shadow:inset 0 0 0 2px var(--action); }
+.asset-note { max-height:110px;overflow:auto;padding:.65rem .75rem;border-top:1px solid var(--line);color:var(--muted);font-size:.72rem;line-height:1.45; }
+.admin-empty { padding:1.25rem;color:var(--muted);font-size:.82rem;line-height:1.5; }
+@media (max-width:980px) { .admin-tabs>span{display:none}.admin-view{grid-template-columns:270px minmax(0,1fr)}.admin-fields.three{grid-template-columns:1fr}.admin-fields{max-height:230px;overflow:auto}.file-workspace{grid-template-columns:200px minmax(0,1fr)} }
+@media (max-width:720px) { .admin-view{grid-template-columns:220px minmax(0,1fr)}.admin-tabs{padding-inline:.5rem}.admin-tab{padding-inline:.7rem}.admin-editor-head{padding-inline:.75rem}.admin-editor-head p{display:none}.admin-fields{padding:.75rem}.file-workspace{grid-template-columns:170px minmax(0,1fr)} }
+@media (prefers-reduced-motion:reduce) { *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} }

classroom_static/admin.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="zh-Hant">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Telearn 內容管理後台</title>
+  <link rel="stylesheet" href="/classroom-assets/classroom.css?v=2026fall-4">
+  <link rel="stylesheet" href="/classroom-assets/admin.css?v=2026fall-4">
+</head>
+<body class="admin-body">
+  <header class="app-header">
+    <div class="brand"><div class="brand-mark">Py</div><div class="brand-copy"><strong>內容管理後台</strong><span id="adminStatus">尚未登入</span></div></div>
+    <div class="header-actions"><a class="btn secondary compact" href="/classroom/teacher">即時教室</a><a class="btn secondary compact" href="/">查看 Demo</a><button class="btn compact" id="loginButton">重新登入</button></div>
+  </header>
+  <nav class="admin-tabs" aria-label="管理內容"><button class="admin-tab active" data-view="courseView">教室課程</button><button class="admin-tab" data-view="demoView">Demo 專題</button><span>儲存後會重新建置 Space，通常需等待約 1–2 分鐘。</span></nav>
+
+  <main class="admin-main">
+    <section class="admin-view active" id="courseView">
+      <aside class="admin-sidebar"><div class="admin-sidebar-head"><div><strong>18 週課程</strong><small>選一週修改主題與套版</small></div></div><div class="admin-list" id="weekAdminList"></div></aside>
+      <form class="admin-editor" id="weekForm">
+        <header class="admin-editor-head"><div><h1 id="weekHeading">選擇週次</h1><p>課堂顯示內容與學生可匯入的本週套版。</p></div><button class="btn" id="saveWeekButton" type="submit">儲存這一週</button></header>
+        <div class="admin-fields three"><label>課程標題<input class="text-field" id="weekTitle" required></label><label>專題名稱<input class="text-field" id="weekProject" required></label><label>本週產出<input class="text-field" id="weekOutput" required></label></div>
+        <div class="file-workspace"><aside><div class="file-workspace-head"><strong>套版檔案</strong><button class="copy-button" id="newWeekFile" type="button">＋新增</button></div><div class="admin-file-list" id="weekFiles"></div></aside><label class="code-field"><span id="weekFileLabel">尚未選擇檔案</span><textarea id="weekFileContent" spellcheck="false" disabled></textarea></label></div>
+      </form>
+    </section>
+
+    <section class="admin-view" id="demoView">
+      <aside class="admin-sidebar"><div class="admin-sidebar-head"><div><strong>公開 Demo</strong><small>可搜尋、編輯或新增專題</small></div><button class="copy-button" id="newDemoButton">＋新增</button></div><div class="admin-search"><input class="text-field" id="demoSearch" type="search" placeholder="搜尋班級、學生或專題"></div><div class="admin-list" id="demoAdminList"></div></aside>
+      <form class="admin-editor" id="demoForm">
+        <header class="admin-editor-head"><div><h1 id="demoHeading">選擇一個 Demo 專題</h1><p>文字程式可直接編輯；圖片、音效等資產會原樣保留。</p></div><div class="admin-actions"><button class="copy-button danger-action" id="deleteDemoButton" type="button" disabled>刪除</button><button class="btn" id="saveDemoButton" type="submit" disabled>儲存專題</button></div></header>
+        <div class="admin-fields three"><label>班級<input class="text-field" id="demoClass" required disabled></label><label>學生<input class="text-field" id="demoStudent" required disabled></label><label>專題名稱<input class="text-field" id="demoProject" required disabled></label></div>
+        <div class="file-workspace"><aside><div class="file-workspace-head"><strong>程式檔案</strong><button class="copy-button" id="newDemoFile" type="button" disabled>＋新增</button></div><div class="admin-file-list" id="demoFiles"></div><div class="asset-note" id="demoAssets"></div></aside><label class="code-field"><span id="demoFileLabel">尚未選擇檔案</span><textarea id="demoFileContent" spellcheck="false" disabled></textarea></label></div>
+      </form>
+    </section>
+  </main>
+
+  <dialog id="adminLoginDialog"><form class="dialog-content form-stack" id="adminLoginForm"><div><h1>登入內容管理後台</h1><p>使用與教師控制台相同的密碼。</p></div><label><span class="field-label">教師密碼</span><input class="text-field" id="adminPassword" type="password" required autofocus></label><p class="form-error" id="adminLoginError"></p><button class="btn" type="submit">登入</button></form></dialog>
+  <div class="toast" id="toast"></div>
+  <script src="/classroom-assets/admin.js?v=2026fall-4"></script>
+</body>
+</html>

classroom_static/admin.js

@@ -0,0 +1,288 @@
+const $ = id => document.getElementById(id);
+const E = {};
+[
+  "adminStatus", "loginButton", "weekAdminList", "weekForm", "weekHeading",
+  "weekTitle", "weekProject", "weekOutput", "saveWeekButton", "newWeekFile",
+  "weekFiles", "weekFileLabel", "weekFileContent", "demoSearch", "newDemoButton",
+  "demoAdminList", "demoForm", "demoHeading", "demoClass", "demoStudent",
+  "demoProject", "newDemoFile", "demoFiles", "demoFileLabel", "demoFileContent",
+  "demoAssets", "saveDemoButton", "deleteDemoButton", "adminLoginDialog",
+  "adminLoginForm", "adminPassword", "adminLoginError", "toast"
+].forEach(id => E[id] = $(id));
+
+let password = "";
+let state = { course: { weeks: [] }, demo_projects: [] };
+let selectedWeek = "";
+let weekFiles = {};
+let weekFile = "";
+let originalDemo = null;
+let demoFiles = {};
+let demoFile = "";
+let demoAssets = [];
+
+const esc = value => String(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
+
+function toast(message) {
+  E.toast.textContent = message;
+  E.toast.classList.add("visible");
+  setTimeout(() => E.toast.classList.remove("visible"), 2600);
+}
+
+async function request(path, data = {}) {
+  const response = await fetch(path, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ password, ...data })
+  });
+  if (!response.ok) {
+    let message = "操作失敗";
+    try { message = (await response.json()).detail || message; } catch (_) {}
+    throw Error(message);
+  }
+  return response.json();
+}
+
+function setBusy(button, busy, label) {
+  if (!button.dataset.label) button.dataset.label = button.textContent;
+  button.disabled = busy;
+  button.textContent = busy ? label : button.dataset.label;
+}
+
+document.querySelectorAll(".admin-tab").forEach(button => button.onclick = () => {
+  document.querySelectorAll(".admin-tab").forEach(item => item.classList.toggle("active", item === button));
+  document.querySelectorAll(".admin-view").forEach(view => view.classList.toggle("active", view.id === button.dataset.view));
+});
+
+async function login() {
+  state = await request("/api/admin/state");
+  E.adminStatus.textContent = `已登入 · ${state.course.title || "課程管理"}`;
+  renderWeeks();
+  renderDemoList();
+  if (state.course.weeks.length) await selectWeek(state.course.weeks[0].id);
+}
+
+E.adminLoginForm.onsubmit = async event => {
+  event.preventDefault();
+  password = E.adminPassword.value;
+  const button = E.adminLoginForm.querySelector("button[type=submit]");
+  setBusy(button, true, "登入中…");
+  E.adminLoginError.textContent = "";
+  try {
+    await login();
+    E.adminLoginDialog.close();
+  } catch (error) {
+    password = "";
+    E.adminLoginError.textContent = error.message;
+  } finally { setBusy(button, false); }
+};
+E.loginButton.onclick = () => E.adminLoginDialog.showModal();
+
+function renderWeeks() {
+  E.weekAdminList.innerHTML = state.course.weeks.map(week => `
+    <button class="admin-list-button ${week.id === selectedWeek ? "active" : ""}" data-week="${esc(week.id)}">
+      <div><strong>第 ${week.week} 週｜${esc(week.title)}</strong><small>${esc(week.project)}</small></div>
+      <span>${week.template ? "有套版" : "無套版"}</span>
+    </button>`).join("");
+  E.weekAdminList.querySelectorAll("[data-week]").forEach(button => button.onclick = () => selectWeek(button.dataset.week));
+}
+
+async function selectWeek(weekId) {
+  saveWeekFileBuffer();
+  selectedWeek = weekId;
+  renderWeeks();
+  const data = await request("/api/admin/week", { week_id: weekId });
+  E.weekHeading.textContent = `第 ${data.week.week} 週｜${data.week.title}`;
+  E.weekTitle.value = data.week.title || "";
+  E.weekProject.value = data.week.project || "";
+  E.weekOutput.value = data.week.output || "";
+  weekFiles = data.files || {};
+  weekFile = Object.keys(weekFiles)[0] || "";
+  renderWeekFiles();
+}
+
+function saveWeekFileBuffer() {
+  if (weekFile) weekFiles[weekFile] = E.weekFileContent.value;
+}
+
+function renderWeekFiles() {
+  E.weekFiles.innerHTML = Object.keys(weekFiles).sort().map(path => `
+    <div class="admin-file-row ${path === weekFile ? "active" : ""}"><button type="button" data-open="${esc(path)}">${esc(path)}</button><button class="remove-file" type="button" data-remove="${esc(path)}" aria-label="移除 ${esc(path)}">×</button></div>`).join("") || '<div class="admin-empty">這週目前沒有套版。學生會看到「尚未發布套版」。</div>';
+  E.weekFiles.querySelectorAll("[data-open]").forEach(button => button.onclick = () => {
+    saveWeekFileBuffer(); weekFile = button.dataset.open; renderWeekFiles();
+  });
+  E.weekFiles.querySelectorAll("[data-remove]").forEach(button => button.onclick = () => {
+    const path = button.dataset.remove;
+    delete weekFiles[path];
+    if (weekFile === path) weekFile = Object.keys(weekFiles)[0] || "";
+    renderWeekFiles();
+  });
+  E.weekFileLabel.textContent = weekFile || "尚未選擇檔案";
+  E.weekFileContent.disabled = !weekFile;
+  E.weekFileContent.value = weekFile ? weekFiles[weekFile] : "";
+}
+
+function askFileName(existing) {
+  const path = (prompt("檔案名稱（例如 main.py 或 data/case.json）：") || "").trim().replaceAll("\\", "/");
+  if (!/^[\w\-\u4e00-\u9fff/]+\.(py|html|css|js|json|txt|csv|md|toml|yaml|yml)$/i.test(path) || path.includes("..")) {
+    if (path) toast("檔名或副檔名不符合規則");
+    return "";
+  }
+  if (path in existing) { toast("檔案已存在"); return ""; }
+  return path;
+}
+
+E.newWeekFile.onclick = () => {
+  saveWeekFileBuffer();
+  const path = askFileName(weekFiles);
+  if (!path) return;
+  weekFiles[path] = path.endsWith(".py") ? "# 本週 Python 套版\n" : "";
+  weekFile = path;
+  renderWeekFiles();
+};
+
+E.weekForm.onsubmit = async event => {
+  event.preventDefault();
+  saveWeekFileBuffer();
+  setBusy(E.saveWeekButton, true, "儲存中…");
+  try {
+    await request("/api/admin/week/save", {
+      week_id: selectedWeek,
+      title: E.weekTitle.value,
+      project: E.weekProject.value,
+      output: E.weekOutput.value,
+      files: weekFiles
+    });
+    const week = state.course.weeks.find(item => item.id === selectedWeek);
+    Object.assign(week, { title: E.weekTitle.value.trim(), project: E.weekProject.value.trim(), output: E.weekOutput.value.trim(), template: Object.keys(weekFiles).length > 0 });
+    E.weekHeading.textContent = `第 ${week.week} 週｜${week.title}`;
+    renderWeeks();
+    toast("課程內容已儲存，Space 正在重新建置");
+  } catch (error) { toast(error.message); }
+  finally { setBusy(E.saveWeekButton, false); }
+};
+
+function demoKey(item) { return `${item.class_name}\n${item.student_name}\n${item.project_name}`; }
+function renderDemoList() {
+  const query = E.demoSearch.value.trim().toLowerCase();
+  const visible = state.demo_projects.filter(item => `${item.class_name} ${item.student_name} ${item.project_name}`.toLowerCase().includes(query));
+  E.demoAdminList.innerHTML = visible.map(item => `
+    <button class="admin-list-button ${originalDemo && demoKey(item) === demoKey(originalDemo) ? "active" : ""}" data-key="${esc(demoKey(item))}">
+      <div><strong>${esc(item.project_name)}</strong><small>${esc(item.class_name)} · ${esc(item.student_name)}</small></div><span>${esc(item.type)}</span>
+    </button>`).join("") || '<div class="admin-empty">找不到符合的 Demo 專題。</div>';
+  E.demoAdminList.querySelectorAll("[data-key]").forEach(button => button.onclick = () => {
+    const item = state.demo_projects.find(project => demoKey(project) === button.dataset.key);
+    if (item) selectDemo(item);
+  });
+}
+E.demoSearch.oninput = renderDemoList;
+
+function enableDemoForm(enabled) {
+  [E.demoClass, E.demoStudent, E.demoProject, E.newDemoFile, E.saveDemoButton].forEach(element => element.disabled = !enabled);
+  E.deleteDemoButton.disabled = !enabled || !originalDemo;
+}
+
+async function selectDemo(item) {
+  saveDemoFileBuffer();
+  originalDemo = { class_name: item.class_name, student_name: item.student_name, project_name: item.project_name };
+  renderDemoList();
+  const data = await request("/api/admin/demo/project", { project: originalDemo });
+  E.demoClass.value = item.class_name;
+  E.demoStudent.value = item.student_name;
+  E.demoProject.value = item.project_name;
+  E.demoHeading.textContent = item.project_name;
+  demoFiles = data.files || {};
+  demoAssets = data.assets || [];
+  demoFile = Object.keys(demoFiles)[0] || "";
+  enableDemoForm(true);
+  renderDemoFiles();
+}
+
+function saveDemoFileBuffer() {
+  if (demoFile) demoFiles[demoFile] = E.demoFileContent.value;
+}
+
+function renderDemoFiles() {
+  E.demoFiles.innerHTML = Object.keys(demoFiles).sort().map(path => `
+    <div class="admin-file-row ${path === demoFile ? "active" : ""}"><button type="button" data-open="${esc(path)}">${esc(path)}</button><button class="remove-file" type="button" data-remove="${esc(path)}" aria-label="移除 ${esc(path)}">×</button></div>`).join("") || '<div class="admin-empty">尚無文字程式檔案。</div>';
+  E.demoFiles.querySelectorAll("[data-open]").forEach(button => button.onclick = () => {
+    saveDemoFileBuffer(); demoFile = button.dataset.open; renderDemoFiles();
+  });
+  E.demoFiles.querySelectorAll("[data-remove]").forEach(button => button.onclick = () => {
+    const path = button.dataset.remove;
+    delete demoFiles[path];
+    if (demoFile === path) demoFile = Object.keys(demoFiles)[0] || "";
+    renderDemoFiles();
+  });
+  E.demoFileLabel.textContent = demoFile || "尚未選擇檔案";
+  E.demoFileContent.disabled = !demoFile;
+  E.demoFileContent.value = demoFile ? demoFiles[demoFile] : "";
+  E.demoAssets.textContent = demoAssets.length ? `保留 ${demoAssets.length} 個非文字資產：${demoAssets.join("、")}` : "沒有圖片或音效資產。";
+}
+
+E.newDemoButton.onclick = () => {
+  originalDemo = null;
+  demoFiles = { "main.py": '# 新 Demo 專題\nprint("Hello, Telearn!")\n' };
+  demoAssets = [];
+  demoFile = "main.py";
+  E.demoClass.value = "2026Fall進階專題";
+  E.demoStudent.value = "";
+  E.demoProject.value = "";
+  E.demoHeading.textContent = "建立新 Demo 專題";
+  enableDemoForm(true);
+  renderDemoList();
+  renderDemoFiles();
+  E.demoStudent.focus();
+};
+
+E.newDemoFile.onclick = () => {
+  saveDemoFileBuffer();
+  const path = askFileName(demoFiles);
+  if (!path) return;
+  demoFiles[path] = "";
+  demoFile = path;
+  renderDemoFiles();
+};
+
+E.demoForm.onsubmit = async event => {
+  event.preventDefault();
+  saveDemoFileBuffer();
+  setBusy(E.saveDemoButton, true, "儲存中…");
+  try {
+    const data = await request("/api/admin/demo/save", {
+      original: originalDemo,
+      class_name: E.demoClass.value,
+      student_name: E.demoStudent.value,
+      project_name: E.demoProject.value,
+      files: demoFiles
+    });
+    if (originalDemo) state.demo_projects = state.demo_projects.filter(item => demoKey(item) !== demoKey(originalDemo));
+    originalDemo = data.project;
+    state.demo_projects.push({ ...data.project, type: "main.py" in demoFiles ? "python" : "index.html" in demoFiles ? "html" : "external" });
+    E.demoHeading.textContent = data.project.project_name;
+    renderDemoList();
+    enableDemoForm(true);
+    toast("Demo 專題已儲存，Space 正在重新建置");
+  } catch (error) { toast(error.message); }
+  finally { setBusy(E.saveDemoButton, false); }
+};
+
+E.deleteDemoButton.onclick = async () => {
+  if (!originalDemo || !confirm(`永久刪除 Demo 專題「${originalDemo.project_name}」？\n\n這會移除程式、圖片與音效，無法從管理頁復原。`)) return;
+  setBusy(E.deleteDemoButton, true, "刪除中…");
+  try {
+    await request("/api/admin/demo/delete", { project: originalDemo });
+    state.demo_projects = state.demo_projects.filter(item => demoKey(item) !== demoKey(originalDemo));
+    originalDemo = null;
+    demoFiles = {};
+    demoAssets = [];
+    demoFile = "";
+    E.demoHeading.textContent = "選擇一個 Demo 專題";
+    [E.demoClass, E.demoStudent, E.demoProject].forEach(input => input.value = "");
+    enableDemoForm(false);
+    renderDemoList();
+    renderDemoFiles();
+    toast("Demo 專題已刪除，Space 正在重新建置");
+  } catch (error) { toast(error.message); enableDemoForm(true); }
+};
+
+E.adminLoginDialog.showModal();

classroom_static/classroom.css

@@ -39,6 +39,7 @@
 
 * { box-sizing: border-box; }
 [hidden] { display: none !important; }
+.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
 html, body { width: 100%; height: 100%; overflow: hidden; }
 body { min-height: 0; margin: 0; display: flex; flex-direction: column; background: var(--shell); color: var(--ink); }
 button, input, textarea, select { font: inherit; }
@@ -132,6 +133,7 @@ button:disabled { cursor: not-allowed; opacity: .48; }
 .btn.help { background: var(--help); color: oklch(0.25 0.08 70); }
 .btn.help.active { background: oklch(0.65 0.17 68); }
 .btn.compact { min-height: 36px; padding: 0 var(--space-md); font-size: .875rem; }
+.header-link { text-decoration:none; }
 
 .project-bar { min-height:58px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:var(--space-sm) var(--space-xl);border-bottom:1px solid var(--line);background:var(--surface); }
 .project-context,.project-actions { display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap; }
@@ -239,9 +241,8 @@ button:disabled { cursor: not-allowed; opacity: .48; }
 .CodeMirror { height: 100%; font: 500 1rem/1.7 "SFMono-Regular", Consolas, monospace; background: var(--editor); }
 .CodeMirror-gutters { background: var(--editor); border-right: 1px solid var(--editor-line); }
 
-.console-body { min-height:0;display:grid;grid-template-rows:auto minmax(120px,1fr) auto; }
-.stdin-section { padding: var(--space-lg); border-bottom: 1px solid var(--line); }
-.stdin-field { min-height: 96px; resize: vertical; padding: var(--space-md); font: 500 .875rem/1.5 "SFMono-Regular", Consolas, monospace; }
+.console-body { min-height:0;display:grid;grid-template-rows:minmax(120px,1fr) auto auto; }
+.console-stream { min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--editor); }
 .field-help { margin: var(--space-sm) 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
 .console-output {
   margin: 0;
@@ -253,6 +254,12 @@ button:disabled { cursor: not-allowed; opacity: .48; }
   white-space: pre-wrap;
   word-break: break-word;
 }
+.console-input-row { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-top:1px solid var(--editor-line);background:var(--editor-raised);color:var(--editor-ink); }
+.console-input-row>span { color:oklch(.76 .15 150);font:800 1.1rem/1 monospace; }
+.console-input-row input { min-width:0;height:38px;padding:0 var(--space-md);border:1px solid var(--editor-line);border-radius:var(--radius-sm);background:var(--editor);color:var(--editor-ink);font:500 .875rem/1.4 "SFMono-Regular",Consolas,monospace; }
+.console-input-row input::placeholder { color:oklch(.7 .02 255); }
+.console-input-row input:focus { border-color:var(--action);outline:2px solid var(--action);outline-offset:1px; }
+.console-hint { margin:0;padding:var(--space-sm) var(--space-lg);border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:.75rem;line-height:1.45; }
 .console-status { min-height: 48px; display: flex; align-items: center; gap: var(--space-sm); padding: 0 var(--space-lg); border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
 
 .mobile-tabs { display: none; }

classroom_static/py-worker.js

@@ -1,25 +1,52 @@
 let pyodide = null;
-let inputQueue = [];
+let inputControl = null;
+let inputBytes = null;
 
 async function initialize() {
   try {
     importScripts("https://cdn.jsdelivr.net/pyodide/v0.27.7/full/pyodide.js");
-    pyodide = await loadPyodide();
+    pyodide = await loadPyodide({ indexURL: "https://cdn.jsdelivr.net/pyodide/v0.27.7/full/" });
+    pyodide.setStdout({
+      write(buffer) {
+        postMessage({ type: "stream", channel: "stdout", bytes: buffer });
+        return buffer.length;
+      },
+      isatty: true
+    });
+    pyodide.setStderr({
+      write(buffer) {
+        postMessage({ type: "stream", channel: "stderr", bytes: buffer });
+        return buffer.length;
+      },
+      isatty: true
+    });
     postMessage({ type: "ready" });
   } catch (error) {
     postMessage({ type: "load_error", text: String(error) });
   }
 }
 
+function readInteractiveInput() {
+  if (!inputControl || !inputBytes) return "";
+  Atomics.store(inputControl, 0, 0);
+  postMessage({ type: "input_request" });
+  Atomics.wait(inputControl, 0, 0);
+  const length = Math.max(0, Math.min(Atomics.load(inputControl, 1), inputBytes.length));
+  const value = new TextDecoder().decode(inputBytes.slice(0, length));
+  Atomics.store(inputControl, 0, 0);
+  return value;
+}
+
 self.onmessage = async event => {
   if (event.data.type !== "run" || !pyodide) return;
-  inputQueue = Array.isArray(event.data.inputs) ? [...event.data.inputs] : [];
-  pyodide.setStdin({
-    stdin: () => {
-      const value = inputQueue.length ? inputQueue.shift() : "";
-      return value;
-    }
-  });
+  const sharedInput = event.data.inputBuffer;
+  if (!(sharedInput instanceof SharedArrayBuffer)) {
+    postMessage({ type: "python_error", text: "瀏覽器未提供互動式 Python 所需的安全執行環境。" });
+    return;
+  }
+  inputControl = new Int32Array(sharedInput, 0, 2);
+  inputBytes = new Uint8Array(sharedInput, 8);
+  pyodide.setStdin({ stdin: readInteractiveInput, isatty: true });
 
   try {
     const files = event.data.files || { "main.py": event.data.code || "" };
@@ -39,28 +66,27 @@ for name, module in list(sys.modules.items()):
       pyodide.FS.writeFile(fullPath, content, { encoding: "utf8" });
     }
     pyodide.globals.set("classroom_entry", entry);
-    const captured = await pyodide.runPythonAsync(`
-import contextlib, io, json, os, sys, traceback
+    const succeeded = await pyodide.runPythonAsync(`
+import os, sys, traceback
 root = "/home/pyodide/classroom_project"
 os.chdir(root)
-if root not in sys.path: sys.path.insert(0, root)
+if root not in sys.path:
+    sys.path.insert(0, root)
 entry = os.path.join(root, classroom_entry)
 namespace = {"__name__": "__main__", "__file__": entry}
-stdout_buffer, stderr_buffer = io.StringIO(), io.StringIO()
 ok = True
-with contextlib.redirect_stdout(stdout_buffer), contextlib.redirect_stderr(stderr_buffer):
-    try:
-        with open(entry, "r", encoding="utf-8") as source:
-            exec(compile(source.read(), entry, "exec"), namespace)
-    except BaseException:
-        ok = False
-        traceback.print_exc()
-json.dumps({"ok": ok, "stdout": stdout_buffer.getvalue(), "stderr": stderr_buffer.getvalue()})
+try:
+    with open(entry, "r", encoding="utf-8") as source:
+        exec(compile(source.read(), entry, "exec"), namespace)
+except BaseException:
+    ok = False
+    traceback.print_exc()
+finally:
+    sys.stdout.flush()
+    sys.stderr.flush()
+ok
 `);
-    const result = JSON.parse(captured);
-    if (result.stdout) postMessage({ type: "stdout", text: result.stdout.replace(/\n$/, "") });
-    if (result.stderr) postMessage({ type: "stderr", text: result.stderr.replace(/\n$/, "") });
-    postMessage({ type: result.ok ? "done" : "python_error", text: result.ok ? "" : "程式執行失敗" });
+    postMessage({ type: succeeded ? "done" : "python_error", text: succeeded ? "" : "程式執行失敗" });
   } catch (error) {
     postMessage({ type: "python_error", text: String(error) });
   }

classroom_static/student.html

@@ -1,10 +1,10 @@
-<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="light"><title>Python 專案教室｜學生工作區</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/material-darker.min.css"><link rel="stylesheet" href="/classroom-assets/classroom.css?v=2026fall-3"></head><body>
+<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="light"><title>Python 專案教室｜學生工作區</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/material-darker.min.css"><link rel="stylesheet" href="/classroom-assets/classroom.css?v=2026fall-4"></head><body>
 <header class="app-header"><div class="brand"><div class="brand-mark">Py</div><div class="brand-copy"><strong>Python 專案教室</strong><span id="studentIdentity">尚未進入教室</span></div></div><div class="header-actions"><div class="connection-state"><i class="status-dot" id="connectionDot"></i><span id="connectionText">未連線</span></div><button class="btn help compact" id="helpButton">請老師協助</button><button class="btn secondary compact" id="identityButton">更換身分</button></div></header>
 <section class="project-bar"><div class="project-context"><label for="weekSelect">週次</label><select id="weekSelect"></select><label for="projectName">專案</label><input id="projectName" maxlength="36" value="Python專案"></div><div class="project-actions"><button class="copy-button" id="templateButton">匯入本週套版</button><button class="copy-button" id="progressButton">選擇舊進度</button><button class="copy-button" id="importButton">匯入 .py / ZIP</button><button class="copy-button" id="exportButton">匯出專案</button><button class="btn compact" id="submitButton">提交本週版本</button><input id="fileImport" type="file" accept=".py,.zip" hidden></div></section>
 <nav class="mobile-tabs" role="tablist"><button class="mobile-tab" data-panel="referencePanel">專案／語法</button><button class="mobile-tab" data-panel="editorPanel" aria-selected="true">程式</button><button class="mobile-tab" data-panel="consolePanel">執行結果</button></nav>
 <main class="student-layout"><aside class="panel reference-panel" id="referencePanel"><div class="side-tabs"><button class="side-tab active" data-side="filesView">專案檔案</button><button class="side-tab" data-side="syntaxView">語法查詢</button></div><section class="side-view" id="filesView"><div class="panel-heading"><h1>檔案夾</h1><button class="copy-button" id="newFileButton">+新增</button></div><div class="file-list" id="fileList"></div><p class="side-note">入口固定為 <code>main.py</code>，可用 <code>import</code> 引入其他 Python 檔。</p></section><section class="side-view" id="syntaxView" hidden><div class="panel-heading"><h1>Python 語法查詢</h1><span id="snippetCount">0 項</span></div><div class="search-wrap"><label class="field-label" for="syntaxSearch">輸入語法或用途</label><input class="text-field" id="syntaxSearch" type="search" placeholder="迴圈、字典、JSON"><div class="chip-row" id="categoryFilters"></div></div><div class="snippet-list" id="snippetList"></div></section></aside>
 <section class="panel editor-panel mobile-active" id="editorPanel"><div class="panel-heading dark"><span class="file-name" id="activeFileLabel">main.py</span><div class="editor-toolbar"><button class="btn stop compact" id="stopButton" disabled>停止</button><button class="btn compact" id="runButton" disabled>載入 Python…</button></div></div><div class="editor-host"><textarea id="codeEditor" aria-label="程式碼"></textarea></div></section>
-<aside class="panel console-panel" id="consolePanel"><div class="panel-heading"><h2>執行與輸出</h2><button class="copy-button" id="clearOutputButton">清除</button></div><div class="console-body"><section class="stdin-section"><label class="field-label" for="stdinInput">程式輸入</label><textarea class="stdin-field" id="stdinInput" placeholder="input() 每行一筆"></textarea><p class="field-help">執行 <code>main.py</code>，同專案的文字檔會一起載入。</p></section><pre class="console-output" id="consoleOutput">Python 執行環境載入中…</pre><div class="console-status"><i class="status-dot" id="runStatusDot"></i><span id="runStatusText">準備環境</span><span>·</span><span id="saveStatus">尚未同步</span><span>·</span><span id="submitStatus">本週尚未提交</span></div></div></aside></main>
+<aside class="panel console-panel" id="consolePanel"><div class="panel-heading"><h2>互動式 Console</h2><button class="copy-button" id="clearOutputButton">清除</button></div><div class="console-body"><div class="console-stream"><pre class="console-output" id="consoleOutput">Python 執行環境載入中…</pre><form class="console-input-row" id="consoleInputForm" hidden><span aria-hidden="true">›</span><label class="sr-only" for="consoleInput">Python 程式要求輸入</label><input id="consoleInput" autocomplete="off" placeholder="輸入後按 Enter"><button class="btn compact" type="submit">送出</button></form></div><p class="console-hint">執行 <code>main.py</code>；遇到 <code>input()</code> 時會在這裡詢問。</p><div class="console-status"><i class="status-dot" id="runStatusDot"></i><span id="runStatusText">準備環境</span><span>·</span><span id="saveStatus">尚未同步</span><span>·</span><span id="submitStatus">本週尚未提交</span></div></div></aside></main>
 <dialog id="identityDialog"><form class="dialog-content form-stack" id="identityForm"><div><h1>進入程式教室</h1><p>先選課程，再選自己的名字。名單上沒有時可新增。</p></div><div><label class="field-label" for="classCode">課程</label><select class="text-field" id="classCode" required></select></div><div><label class="field-label" for="studentChoice">學生</label><select class="text-field" id="studentChoice" required></select></div><div id="newStudentFields" hidden><label class="field-label" for="displayName">新學生名稱</label><input class="text-field" id="displayName" placeholder="12_Alex"><p class="field-help">建議使用座號與英文名，方便老師辨識。</p></div><p class="form-error" id="identityError"></p><button class="btn" type="submit">進入教室</button></form></dialog>
 <dialog id="progressDialog"><div class="dialog-content"><h2>選擇正式進度</h2><p>匯入後會成為目前週次的工作副本。</p><div class="progress-list" id="progressList"></div><button class="btn secondary dialog-close">關閉</button></div></dialog><div class="toast" id="toast"></div>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/python/python.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script><script src="/classroom-assets/student.js?v=2026fall-3"></script></body></html>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/python/python.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script><script src="/classroom-assets/student.js?v=2026fall-4"></script></body></html>

classroom_static/student.js

@@ -1,8 +1,8 @@
 const SNIPPETS=[["基礎","輸入與輸出",'name = input("名字：")\nprint("你好", name)'],["判斷","if / elif / else",'if score >= 90:\n    print("A")\nelse:\n    print("繼續加油")'],["迴圈","for 與 range",'for number in range(1, 6):\n    print(number)'],["迴圈","while",'while True:\n    choice = input("選擇：")\n    if choice == "q":\n        break'],["資料","list",'items = []\nitems.append("線索")\nfor item in items:\n    print(item)'],["資料","dict",'student = {"name": "Alex"}\nprint(student.get("team", "未分組"))'],["函式","def / return",'def add(a, b):\n    return a + b'],["檔案","引入自己的模組",'from clues import find_clue'],["檔案","讀取 JSON",'import json\nwith open("data.json", encoding="utf-8") as file:\n    data = json.load(file)'],["錯誤","try / except",'try:\n    age = int(input("年齡："))\nexcept ValueError:\n    print("請輸入整數")']].map(([category,title,code])=>({category,title,code}));
-const $=id=>document.getElementById(id),E={};["identityDialog","identityForm","identityError","classCode","studentChoice","newStudentFields","displayName","studentIdentity","identityButton","connectionDot","connectionText","helpButton","weekSelect","projectName","templateButton","progressButton","importButton","exportButton","submitButton","fileImport","fileList","newFileButton","activeFileLabel","syntaxSearch","categoryFilters","snippetList","snippetCount","runButton","stopButton","stdinInput","consoleOutput","clearOutputButton","runStatusDot","runStatusText","saveStatus","submitStatus","toast","progressDialog","progressList"].forEach(id=>E[id]=$(id));
+const $=id=>document.getElementById(id),E={};["identityDialog","identityForm","identityError","classCode","studentChoice","newStudentFields","displayName","studentIdentity","identityButton","connectionDot","connectionText","helpButton","weekSelect","projectName","templateButton","progressButton","importButton","exportButton","submitButton","fileImport","fileList","newFileButton","activeFileLabel","syntaxSearch","categoryFilters","snippetList","snippetCount","runButton","stopButton","consoleInputForm","consoleInput","consoleOutput","clearOutputButton","runStatusDot","runStatusText","saveStatus","submitStatus","toast","progressDialog","progressList"].forEach(id=>E[id]=$(id));
 const editor=CodeMirror.fromTextArea($("codeEditor"),{mode:"python",theme:"material-darker",lineNumbers:true,indentUnit:4,tabSize:4,extraKeys:{Tab:cm=>cm.replaceSelection("    ")}});
 let studentId=localStorage.getItem("classroom_student_id")||crypto.randomUUID(),catalog={courses:[]};localStorage.setItem("classroom_student_id",studentId);
-let course,files={"main.py":"# 在這裡寫 Python\n"},activeFile="main.py",socket,worker,workerReady=false,running=false,needsHelp=false,submittedAt=null,output="",suppress=false,timer,reconnect,category="全部";
+let course,files={"main.py":"# 在這裡寫 Python\n"},activeFile="main.py",socket,worker,workerReady=false,running=false,needsHelp=false,submittedAt=null,output="",suppress=false,timer,reconnect,category="全部",inputBuffer,inputControl,inputBytes,stdoutDecoder=new TextDecoder(),stderrDecoder=new TextDecoder();
 const clean=v=>String(v||"").trim().replace(/[^0-9A-Za-z_\-一-鿿]/g,"").slice(0,48),week=()=>E.weekSelect.value||"week02",key=()=>`classroom_project_${localStorage.getItem("classroom_code")}_${week()}`;
 function toast(t){E.toast.textContent=t;E.toast.classList.add("visible");setTimeout(()=>E.toast.classList.remove("visible"),1900)}
 function send(m){if(socket?.readyState===WebSocket.OPEN)socket.send(JSON.stringify(m))}
@@ -14,9 +14,9 @@ function setProject(next,name,preferred="main.py"){files=Object.fromEntries(Obje
 function renderFiles(){E.fileList.innerHTML=Object.keys(files).sort((a,b)=>a==="main.py"?-1:b==="main.py"?1:a.localeCompare(b)).map(p=>`<div class="file-row ${p===activeFile?"selected":""}"><button data-open="${esc(p)}">◇ ${esc(p)}</button>${p!=="main.py"?`<button class="file-remove" data-remove="${esc(p)}">×</button>`:""}</div>`).join("");E.fileList.querySelectorAll("[data-open]").forEach(b=>b.onclick=()=>openFile(b.dataset.open));E.fileList.querySelectorAll("[data-remove]").forEach(b=>b.onclick=()=>{if(confirm(`刪除 ${b.dataset.remove}？`)){delete files[b.dataset.remove];if(activeFile===b.dataset.remove)activeFile="main.py";openFile(activeFile);sync()}})}
 function connect(){clearTimeout(reconnect);const previous=socket;if(previous){previous.onclose=null;previous.close()}const c=clean(localStorage.getItem("classroom_code")),n=clean(localStorage.getItem("classroom_name"));if(!c||!n){E.identityDialog.showModal();return}E.studentIdentity.textContent=`${c} · ${n}`;E.connectionText.textContent="連線中";const scheme=location.protocol==="https:"?"wss":"ws",q=new URLSearchParams({class_code:c,student_id:studentId,display_name:n,week_id:week()}),current=new WebSocket(`${scheme}://${location.host}/ws/classroom/student?${q}`);socket=current;current.onopen=()=>{E.connectionDot.className="status-dot online";E.connectionText.textContent="已連線"};current.onmessage=e=>{const m=JSON.parse(e.data);if(m.type==="restore"){const local=JSON.parse(localStorage.getItem(key())||"null"),s=m.state,src=local||{files:s.files,activeFile:s.active_file,projectName:s.project_name,output:s.output};output=src.output||"";E.consoleOutput.textContent=output||"尚無執行結果。";submittedAt=s.submitted_at;needsHelp=!!s.needs_help;renderState();setProject(src.files,src.projectName,src.activeFile);send({type:"output",output})}if(m.type==="help_ack"){needsHelp=false;renderState();toast("老師已看到你的協助請求")}if(["ack","pong"].includes(m.type)){if(typeof m.needs_help==="boolean"){const seen=needsHelp&&!m.needs_help;needsHelp=m.needs_help;if(seen)toast("老師已看到你的協助請求")}if(m.submitted_at)submittedAt=m.submitted_at;renderState();if(m.type==="ack")E.saveStatus.textContent="已同步"}};current.onclose=async e=>{if(socket!==current)return;E.connectionDot.className="status-dot error";E.connectionText.textContent="已離線";E.saveStatus.textContent="保存在此裝置";if(e.code===4004){localStorage.removeItem("classroom_student_id");localStorage.removeItem("classroom_name");studentId=crypto.randomUUID();localStorage.setItem("classroom_student_id",studentId);await loadCatalog();toast("老師已將這個學生從名單移除");E.identityDialog.showModal();return}reconnect=setTimeout(connect,2500)}}
 function renderState(){E.helpButton.classList.toggle("active",needsHelp);E.helpButton.textContent=needsHelp?"取消請求協助":"請老師協助";E.submitStatus.textContent=submittedAt?`已提交 ${new Date(submittedAt).toLocaleTimeString("zh-TW",{hour:"2-digit",minute:"2-digit"})}`:"本週尚未提交"}
-function initWorker(){worker?.terminate();workerReady=false;E.runButton.disabled=true;worker=new Worker("/classroom-assets/py-worker.js?v=2026fall-1");worker.onmessage=e=>{const m=e.data;if(m.type==="ready"){workerReady=true;E.runButton.disabled=false;E.runButton.textContent="執行";runState("online","準備完成")}else if(m.type==="stdout"||m.type==="stderr")append(`${m.text}\n`);else if(m.type==="done")runState("success","執行成功");else if(m.type==="python_error"){append(`${m.text}\n`);runState("error","程式錯誤")}else if(m.type==="load_error")runState("error","載入失敗")}}
+function initWorker(){worker?.terminate();workerReady=false;running=false;E.consoleInputForm.hidden=true;E.runButton.disabled=true;E.runButton.textContent="載入 Python…";if(!crossOriginIsolated||typeof SharedArrayBuffer==="undefined"){append("瀏覽器未啟用互動式 Python。請重新整理，並使用最新版 Chrome、Edge 或 Safari。\n");runState("error","環境不支援");return}inputBuffer=new SharedArrayBuffer(16392);inputControl=new Int32Array(inputBuffer,0,2);inputBytes=new Uint8Array(inputBuffer,8);worker=new Worker("/classroom-assets/py-worker.js?v=2026fall-4");worker.onmessage=e=>{const m=e.data;if(m.type==="ready"){workerReady=true;E.runButton.disabled=false;E.runButton.textContent="執行";runState("online","準備完成")}else if(m.type==="stream"){const decoder=m.channel==="stderr"?stderrDecoder:stdoutDecoder;append(decoder.decode(m.bytes,{stream:true}))}else if(m.type==="input_request"){E.consoleInputForm.hidden=false;E.consoleInput.value="";E.runStatusText.textContent="等待輸入";E.consoleInput.focus()}else if(m.type==="done"){E.consoleInputForm.hidden=true;runState("success","執行成功")}else if(m.type==="python_error"){E.consoleInputForm.hidden=true;if(m.text)append(`${m.text}\n`);runState("error","程式錯誤")}else if(m.type==="load_error"){append(`Python 載入失敗：${m.text}\n`);runState("error","載入失敗")}};worker.onerror=e=>{append(`Python 執行器錯誤：${e.message}\n`);runState("error","執行器錯誤")}}
 function runState(s,t){running=s==="running";E.runStatusDot.className=`status-dot ${s}`;E.runStatusText.textContent=t;E.runButton.disabled=!workerReady||running;E.stopButton.disabled=!running;send({type:"status",status:s==="online"?"idle":s})}
-function append(t){output=(output+t).slice(-40000);E.consoleOutput.textContent=output;saveLocal();send({type:"output",output})}
+function append(t){output=(output+t).slice(-40000);E.consoleOutput.textContent=output;E.consoleOutput.scrollTop=E.consoleOutput.scrollHeight;saveLocal();send({type:"output",output})}
 function renderSyntax(){const cats=["全部",...new Set(SNIPPETS.map(s=>s.category))];E.categoryFilters.innerHTML=cats.map(c=>`<button class="chip" data-cat="${c}" aria-pressed="${c===category}">${c}</button>`).join("");E.categoryFilters.querySelectorAll("button").forEach(b=>b.onclick=()=>{category=b.dataset.cat;renderSyntax()});const q=E.syntaxSearch.value.toLowerCase(),list=SNIPPETS.filter(s=>(category==="全部"||s.category===category)&&(`${s.title} ${s.code}`.toLowerCase().includes(q)));E.snippetCount.textContent=`${list.length} 項`;E.snippetList.innerHTML=list.map(s=>`<article class="snippet-item"><div class="snippet-title"><strong>${s.title}</strong><span>${s.category}</span></div><pre>${esc(s.code)}</pre><button class="copy-button" data-copy="${SNIPPETS.indexOf(s)}">複製範例</button></article>`).join("")||'<div class="snippet-empty">找不到符合的語法。</div>';E.snippetList.querySelectorAll("[data-copy]").forEach(b=>b.onclick=async()=>{const s=SNIPPETS[+b.dataset.copy];await navigator.clipboard.writeText(s.code);toast(`已複製：${s.title}`)})}
 async function loadCatalog(){catalog=await(await fetch("/api/classroom/classes")).json();const saved=localStorage.getItem("classroom_code");E.classCode.innerHTML=catalog.courses.map(c=>`<option value="${esc(c.class_code)}">${esc(c.course_name)}｜${esc(c.class_code)}</option>`).join("");E.classCode.value=catalog.courses.some(c=>c.class_code===saved)?saved:(catalog.courses[0]?.class_code||"");renderStudentChoices()}
 function renderStudentChoices(){const selectedCourse=catalog.courses.find(c=>c.class_code===E.classCode.value),members=selectedCourse?.students||[],savedId=localStorage.getItem("classroom_student_id");E.studentChoice.innerHTML=members.map(s=>`<option value="${esc(s.student_id)}" data-name="${esc(s.display_name)}">${esc(s.display_name)}</option>`).join("")+`<option value="__new__">＋ 輸入新名字</option>`;E.studentChoice.value=members.some(s=>s.student_id===savedId)?savedId:"__new__";toggleNewStudent()}
@@ -28,6 +28,6 @@ E.progressButton.onclick=async()=>{const q=new URLSearchParams({class_code:local
 E.importButton.onclick=()=>E.fileImport.click();E.fileImport.onchange=async()=>{const f=E.fileImport.files[0];if(!f)return;if(f.name.endsWith(".py"))setProject({"main.py":await f.text()},f.name.replace(/\.py$/,"").trim());else{const z=await JSZip.loadAsync(f),next={};for(const [p,item] of Object.entries(z.files))if(!item.dir&&/\.(py|json|txt|csv|md)$/i.test(p)&&!p.includes(".."))next[p]=await item.async("string");setProject(next,f.name.replace(/\.zip$/i,""))}E.fileImport.value="";toast("已匯入專案")};
 E.exportButton.onclick=async()=>{files[activeFile]=editor.getValue();const z=new JSZip();Object.entries(files).forEach(([p,t])=>z.file(p,t));const blob=await z.generateAsync({type:"blob"}),a=document.createElement("a");a.href=URL.createObjectURL(blob);a.download=`${clean(E.projectName.value)||"project"}.zip`;a.click();URL.revokeObjectURL(a.href)};
 E.submitButton.onclick=()=>{files[activeFile]=editor.getValue();if(!files["main.py"].trim())return toast("main.py 不能為空");if(!confirm("設為本週最後正式版本？重新提交會覆蓋前一版。"))return;send({type:"submit",files});submittedAt=Date.now();renderState();toast("本週正式版本已提交")};E.helpButton.onclick=()=>{needsHelp=!needsHelp;renderState();send({type:"help",needs_help:needsHelp})};
-E.runButton.onclick=()=>{if(!workerReady||running)return;files[activeFile]=editor.getValue();output="";E.consoleOutput.textContent="";runState("running","執行中");worker.postMessage({type:"run",files,entry:"main.py",inputs:E.stdinInput.value.replace(/\r/g,"").split("\n")})};E.stopButton.onclick=()=>{append("\n[已停止]\n");runState("idle","已停止");initWorker()};E.clearOutputButton.onclick=()=>{output="";E.consoleOutput.textContent="尚無執行結果。";send({type:"output",output:""})};E.syntaxSearch.oninput=renderSyntax;editor.on("change",()=>{if(!suppress){files[activeFile]=editor.getValue();sync()}});
+E.runButton.onclick=()=>{if(!workerReady||running)return;files[activeFile]=editor.getValue();output="";E.consoleOutput.textContent="";E.consoleInputForm.hidden=true;stdoutDecoder=new TextDecoder();stderrDecoder=new TextDecoder();Atomics.store(inputControl,0,0);runState("running","執行中");worker.postMessage({type:"run",files,entry:"main.py",inputBuffer})};E.consoleInputForm.onsubmit=e=>{e.preventDefault();if(!running||E.consoleInputForm.hidden)return;const encoded=new TextEncoder().encode(E.consoleInput.value);if(encoded.length>inputBytes.length)return toast("單次輸入內容太長");inputBytes.fill(0);inputBytes.set(encoded);Atomics.store(inputControl,1,encoded.length);append(`${E.consoleInput.value}\n`);E.consoleInputForm.hidden=true;E.runStatusText.textContent="執行中";Atomics.store(inputControl,0,1);Atomics.notify(inputControl,0,1)};E.stopButton.onclick=()=>{append("\n[已停止]\n");runState("idle","已停止");initWorker()};E.clearOutputButton.onclick=()=>{output="";E.consoleOutput.textContent="尚無執行結果。";send({type:"output",output:""})};E.syntaxSearch.oninput=renderSyntax;editor.on("change",()=>{if(!suppress){files[activeFile]=editor.getValue();sync()}});
 document.querySelectorAll(".side-tab").forEach(b=>b.onclick=()=>{document.querySelectorAll(".side-tab").forEach(x=>x.classList.toggle("active",x===b));document.querySelectorAll(".side-view").forEach(v=>v.hidden=v.id!==b.dataset.side)});document.querySelectorAll(".mobile-tab").forEach(b=>b.onclick=()=>{document.querySelectorAll(".mobile-tab").forEach(x=>x.setAttribute("aria-selected",String(x===b)));document.querySelectorAll(".student-layout>.panel").forEach(p=>p.classList.toggle("mobile-active",p.id===b.dataset.panel));if(b.dataset.panel==="editorPanel")setTimeout(()=>editor.refresh(),0)});setInterval(()=>send({type:"ping"}),4000);
 (async()=>{[course]=await Promise.all([(await fetch("/api/classroom/course")).json(),loadCatalog()]);E.weekSelect.innerHTML=course.weeks.map(w=>`<option value="${w.id}">第 ${w.week} 週｜${esc(w.title)}${w.template?"":"（規劃）"}</option>`).join("");E.weekSelect.value=localStorage.getItem("classroom_week")||"week02";renderFiles();renderSyntax();initWorker();connect()})();

classroom_static/teacher.html

@@ -1,6 +1,6 @@
-<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Python 專案教室｜教師控制台</title><link rel="stylesheet" href="/classroom-assets/classroom.css?v=2026fall-3"></head><body>
-<header class="app-header"><div class="brand"><div class="brand-mark">Py</div><div class="brand-copy"><strong>全班專案控制台</strong><span id="classLabel">尚未進入班級</span></div></div><div class="header-actions"><div class="connection-state"><i id="connectionDot" class="status-dot"></i><span id="connectionText">未連線</span></div><button class="btn secondary compact" id="loginButton">切換班級</button></div></header>
+<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Python 專案教室｜教師控制台</title><link rel="stylesheet" href="/classroom-assets/classroom.css?v=2026fall-4"></head><body>
+<header class="app-header"><div class="brand"><div class="brand-mark">Py</div><div class="brand-copy"><strong>全班專案控制台</strong><span id="classLabel">尚未進入班級</span></div></div><div class="header-actions"><div class="connection-state"><i id="connectionDot" class="status-dot"></i><span id="connectionText">未連線</span></div><a class="btn secondary compact header-link" href="/admin">內容管理</a><button class="btn secondary compact" id="loginButton">切換班級</button></div></header>
 <section class="project-bar"><div class="project-context"><label for="teacherWeek">週次</label><select id="teacherWeek"></select><span id="submissionSummary" class="submission-summary">等待學生</span></div><div class="project-actions"><button class="copy-button" id="downloadButton">下載全班 ZIP</button><button class="btn compact" id="publishButton">結算並發布 Demo</button></div></section>
 <main class="teacher-layout"><section class="roster-panel"><div class="panel-heading"><h1>學生狀態</h1><span id="studentTotal">0 人</span></div><div class="filter-bar" id="teacherFilters"><button class="chip" data-filter="all" aria-pressed="true">全部</button><button class="chip" data-filter="submitted">已提交</button><button class="chip" data-filter="help">需要協助</button><button class="chip" data-filter="error">錯誤</button></div><div class="roster-header"><span>學生</span><span>狀態</span><span>檔案</span><span>提交</span></div><div class="roster-list" id="rosterList"></div></section>
 <section class="teacher-detail" id="teacherDetail"><div class="detail-empty" id="detailEmpty">選擇一位學生查看多檔案專案。</div><div class="detail-view" id="detailView" hidden><header class="detail-header"><div><h1 id="selectedStudentName"></h1><p class="detail-meta" id="selectedStudentMeta"></p></div><div class="detail-actions"><button class="copy-button" id="ackHelpButton" hidden>標記已查看</button><button class="copy-button" id="copyCodeButton">複製檔案</button><button class="copy-button danger-action" id="deleteStudentButton">刪除學生</button></div></header><div class="teacher-project"><nav class="teacher-file-tabs" id="teacherFiles"></nav><div class="detail-split"><section class="read-only-pane"><div class="pane-label"><span id="teacherActiveFile">main.py</span><span id="lineCount">0 行</span></div><pre class="code-readonly" id="studentCode"></pre></section><section class="read-only-pane"><div class="pane-label"><span>Console</span><span id="outputState"></span></div><pre class="output-readonly" id="studentOutput"></pre></section></div></div></div></section></main>
-<dialog id="loginDialog"><form class="dialog-content form-stack" id="loginForm"><div><h1>進入教師控制台</h1><p>選取現有課程，或建立新的課程代碼。</p></div><div><label class="field-label" for="classCode">課程</label><select class="text-field" id="classCode" required></select></div><div id="newClassFields" hidden><label class="field-label" for="newClassCode">新課程代碼</label><input class="text-field" id="newClassCode" placeholder="L6B"><label class="field-label secondary-label" for="newClassName">課程名稱</label><input class="text-field" id="newClassName" placeholder="進階專題 B 班"></div><div><label class="field-label" for="teacherPassword">教師密碼</label><input class="text-field" id="teacherPassword" type="password" required></div><p class="form-error" id="loginError"></p><button class="btn" type="submit">開始監看</button></form></dialog><dialog id="publishDialog"><div class="dialog-content"><h2>結算並發布</h2><p id="publishMessage"></p><div class="publish-actions"><button class="btn secondary" id="cancelPublish">取消</button><button class="btn" id="confirmPublish">確認發布</button></div></div></dialog><div class="toast" id="toast"></div><script src="/classroom-assets/teacher.js?v=2026fall-3"></script></body></html>
+<dialog id="loginDialog"><form class="dialog-content form-stack" id="loginForm"><div><h1>進入教師控制台</h1><p>選取現有課程，或建立新��課程代碼。</p></div><div><label class="field-label" for="classCode">課程</label><select class="text-field" id="classCode" required></select></div><div id="newClassFields" hidden><label class="field-label" for="newClassCode">新課程代碼</label><input class="text-field" id="newClassCode" placeholder="L6B"><label class="field-label secondary-label" for="newClassName">課程名稱</label><input class="text-field" id="newClassName" placeholder="進階專題 B 班"></div><div><label class="field-label" for="teacherPassword">教師密碼</label><input class="text-field" id="teacherPassword" type="password" required></div><p class="form-error" id="loginError"></p><button class="btn" type="submit">開始監看</button></form></dialog><dialog id="publishDialog"><div class="dialog-content"><h2>結算並發布</h2><p id="publishMessage"></p><div class="publish-actions"><button class="btn secondary" id="cancelPublish">取消</button><button class="btn" id="confirmPublish">確認發布</button></div></div></dialog><div class="toast" id="toast"></div><script src="/classroom-assets/teacher.js?v=2026fall-4"></script></body></html>

server.py

@@ -23,6 +23,7 @@ from fastapi.responses import FileResponse, HTMLResponse, JSONResponse, Redirect
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from classroom_service import router as classroom_router
+from admin_service import router as admin_router
 
 # ---------------------------------------------------------------------------
 # Configuration
@@ -61,6 +62,16 @@ app = FastAPI(title="Student Pygame/OpenCV Arcade Hub")
 templates = Jinja2Templates(directory=TEMPLATES_DIR)
 app.mount("/classroom-assets", StaticFiles(directory=os.path.join(BASE_DIR, "classroom_static")), name="classroom-assets")
 app.include_router(classroom_router)
+app.include_router(admin_router)
+
+
+@app.middleware("http")
+async def browser_runtime_headers(request: Request, call_next):
+    """Enable SharedArrayBuffer for interactive input inside the Python worker."""
+    response = await call_next(request)
+    response.headers["Cross-Origin-Opener-Policy"] = "same-origin"
+    response.headers["Cross-Origin-Embedder-Policy"] = "credentialless"
+    return response
 
 # Concurrency + live session metrics
 runner_semaphore = asyncio.Semaphore(MAX_CONCURRENT_RUNNERS)

tests/test_admin.py

@@ -0,0 +1,84 @@
+import json
+import tempfile
+import unittest
+from pathlib import Path
+from types import SimpleNamespace
+
+import admin_service as admin
+import classroom_service as classroom
+
+
+class AdminServiceTests(unittest.TestCase):
+    def setUp(self):
+        self.temp_dir = tempfile.TemporaryDirectory()
+        self.root = Path(self.temp_dir.name)
+        self.data = self.root / "classroom_data"
+        self.templates = self.data / "templates"
+        self.projects = self.root / "projects"
+        self.templates.mkdir(parents=True)
+        self.projects.mkdir()
+        (self.data / "course.json").write_text(json.dumps({
+            "title": "測試課程",
+            "weeks": [{
+                "id": "week02", "week": 2, "title": "舊標題",
+                "project": "舊專題", "output": "舊產出", "template": False,
+            }],
+        }, ensure_ascii=False), encoding="utf-8")
+        self.old = (classroom.DATA, classroom.TEMPLATES, classroom.PASSWORD, admin.ROOT, admin.PROJECTS, admin.commit_changes)
+        classroom.DATA = self.data
+        classroom.TEMPLATES = self.templates
+        classroom.PASSWORD = "teacher-test"
+        admin.ROOT = self.root
+        admin.PROJECTS = self.projects
+        self.commits = []
+
+        def fake_commit(additions, deletions, message):
+            self.commits.append((additions, deletions, message))
+            return SimpleNamespace(commit_url="https://example.test/commit")
+
+        admin.commit_changes = fake_commit
+
+    def tearDown(self):
+        classroom.DATA, classroom.TEMPLATES, classroom.PASSWORD, admin.ROOT, admin.PROJECTS, admin.commit_changes = self.old
+        self.temp_dir.cleanup()
+
+    def test_teacher_updates_week_and_template_files(self):
+        request = admin.WeekSave(
+            password="teacher-test", week_id="week02", title="新標題",
+            project="新專題", output="新產出",
+            files={"main.py": 'print("ok")\n', "data/case.json": "{}\n"},
+        )
+        result = admin.save_week(request)
+        course = json.loads((self.data / "course.json").read_text(encoding="utf-8"))
+        self.assertTrue(result["ok"])
+        self.assertEqual(course["weeks"][0]["title"], "新標題")
+        self.assertTrue(course["weeks"][0]["template"])
+        self.assertEqual((self.templates / "week02" / "main.py").read_text(), 'print("ok")\n')
+        self.assertEqual(len(self.commits), 1)
+
+    def test_teacher_creates_renames_and_deletes_demo_project(self):
+        created = admin.save_demo(admin.DemoSave(
+            password="teacher-test", class_name="進階班", student_name="Alex",
+            project_name="互動故事", files={"main.py": 'print("start")\n'},
+        ))
+        original = admin.ProjectRef(**created["project"])
+        project_root = self.projects / "進階班" / "Alex" / "互動故事"
+        (project_root / "picture.png").write_bytes(b"png")
+        renamed = admin.save_demo(admin.DemoSave(
+            password="teacher-test", original=original, class_name="進階班",
+            student_name="Alex", project_name="互動故事完整版",
+            files={"main.py": 'print("done")\n'},
+        ))
+        renamed_root = self.projects / "進階班" / "Alex" / "互動故事完整版"
+        self.assertFalse(project_root.exists())
+        self.assertEqual((renamed_root / "main.py").read_text(), 'print("done")\n')
+        self.assertEqual((renamed_root / "picture.png").read_bytes(), b"png")
+        admin.delete_demo(admin.DemoRequest(
+            password="teacher-test", project=admin.ProjectRef(**renamed["project"])
+        ))
+        self.assertFalse(renamed_root.exists())
+        self.assertEqual(len(self.commits), 3)
+
+
+if __name__ == "__main__":
+    unittest.main()