Add Reader Assets online reading

Dockerfile

@@ -1,6 +1,6 @@
 FROM node:22-bookworm-slim AS static-assets
 
-ARG ESBUILD_VERSION=0.25.8
+ARG ESBUILD_VERSION=0.28.2
 
 WORKDIR /build
 
@@ -9,11 +9,17 @@ RUN npm install --global "esbuild@${ESBUILD_VERSION}" \
 
 COPY static/ /build/static/
 COPY scripts/build_static_assets.mjs /build/build_static_assets.mjs
+COPY scripts/copy_reader_vendor.mjs /build/copy_reader_vendor.mjs
 
 RUN mkdir -p /out \
     && cp -a static/. /out/ \
+    && node /build/copy_reader_vendor.mjs /out/vendor \
     && esbuild static/app.js --minify --target=es2019 --charset=utf8 --legal-comments=none --outfile=/out/app.js \
+    && esbuild static/reader-contract.js --minify --target=es2019 --charset=utf8 --legal-comments=none --outfile=/out/reader-contract.js \
+    && esbuild static/reader-store.js --minify --target=es2019 --charset=utf8 --legal-comments=none --outfile=/out/reader-store.js \
+    && esbuild static/reader.js --minify --target=es2019 --charset=utf8 --legal-comments=none --outfile=/out/reader.js \
     && esbuild static/style.css --minify --outfile=/out/style.css \
+    && esbuild static/reader.css --minify --outfile=/out/reader.css \
     && node /build/build_static_assets.mjs \
     && esbuild /out/sw.js --minify --target=es2019 --charset=utf8 --legal-comments=none --outfile=/out/sw.min.js \
     && mv /out/sw.min.js /out/sw.js

app.py

@@ -7,6 +7,7 @@ import random
 import re
 import time
 import functools
+import io
 from pathlib import Path
 from typing import Optional
 from urllib.parse import unquote, quote, urljoin, urlparse
@@ -43,6 +44,10 @@ TXT_DIR = Path("txt")
 TXT_SPACE_RAW_BASE = "https://huggingface.co/spaces/VoiceOfML/Search/raw/main/txt"
 TXT_WARM_INTERVAL_SECONDS = 600
 TXT_WARM_IDLE_SECONDS = 600
+READER_ASSETS_URL = "https://huggingface.co/datasets/vomebook/Reader-Assets/resolve/main/reader_assets.json.gz"
+READER_ASSETS_CACHE_TTL_SECONDS = 300
+READER_ASSETS_MAX_COMPRESSED_BYTES = 5 * 1024 * 1024
+READER_ASSETS_MAX_DECOMPRESSED_BYTES = 50 * 1024 * 1024
 records: list[dict] = []
 folder_tree_data: dict[str, list[dict]] = {}
 folder_browser_data: dict[str, dict[str, dict]] = {}
@@ -61,6 +66,9 @@ repo_sorted_by_name = {}
 repo_sorted_by_size = {}
 txt_record_indices = []
 repo_txt_record_indices = {}
+READER_EXTENSIONS = frozenset({"pdf", "epub", "txt", "md", "markdown", "jpg", "jpeg", "png", "gif", "bmp", "webp"})
+reader_record_indices = []
+repo_reader_record_indices = {}
 initial_payload_global = None
 initial_payload_by_repo = {}
 API_CACHE_TTL_SECONDS = 120
@@ -75,6 +83,8 @@ ngram_postings: dict[int, dict[str, bytes]] = {}
 ngram_posting_buffers: dict[int, bytes] = {}
 injected_html_cache: dict[str | None, str] = {}
 last_user_request_at = time.monotonic()
+reader_assets_cache = {"v": 1, "f": {}}
+reader_assets_cache_at = 0.0
 
 def cached_payload(key, builder):
     now = time.monotonic()
@@ -88,6 +98,67 @@ def cached_payload(key, builder):
         api_response_cache.pop(oldest_key, None)
     return value
 
+
+def decode_reader_assets(raw: bytes) -> dict:
+    if len(raw) > READER_ASSETS_MAX_COMPRESSED_BYTES:
+        raise ValueError("reader assets sidecar is too large")
+    with gzip.GzipFile(fileobj=io.BytesIO(raw)) as stream:
+        decoded = stream.read(READER_ASSETS_MAX_DECOMPRESSED_BYTES + 1)
+    if len(decoded) > READER_ASSETS_MAX_DECOMPRESSED_BYTES:
+        raise ValueError("reader assets sidecar expands beyond limit")
+    payload = json.loads(decoded)
+    files = payload.get("f") if isinstance(payload, dict) and payload.get("v") == 1 else None
+    if not isinstance(files, dict):
+        raise ValueError("invalid reader assets sidecar")
+    clean = {}
+    for key, entry in files.items():
+        if not isinstance(key, str) or not isinstance(entry, dict) or entry.get("s") not in (2, 4):
+            continue
+        if entry.get("s") == 2:
+            path = entry.get("p")
+            mode = entry.get("m")
+            if mode not in ("p", "e") or not isinstance(path, str) or not re.fullmatch(r"objects/[0-9a-f]{2}/[0-9a-f]{64}/(?:document\.pdf|book\.epub)", path):
+                continue
+            clean[key] = {"s": 2, "m": mode, "p": path}
+        else:
+            clean[key] = {"s": 4}
+    return {"v": 1, "f": clean}
+
+
+async def get_reader_assets() -> dict:
+    global reader_assets_cache, reader_assets_cache_at
+    now = time.monotonic()
+    if now - reader_assets_cache_at < READER_ASSETS_CACHE_TTL_SECONDS:
+        return reader_assets_cache
+    async with app.state.reader_assets_lock:
+        now = time.monotonic()
+        if now - reader_assets_cache_at < READER_ASSETS_CACHE_TTL_SECONDS:
+            return reader_assets_cache
+        response = None
+        try:
+            response = await app.state.http_session.get(
+                READER_ASSETS_URL,
+                timeout=aiohttp.ClientTimeout(total=20, connect=8, sock_read=10),
+            )
+            if response.status != 200:
+                raise RuntimeError(f"reader assets HTTP {response.status}")
+            chunks = bytearray()
+            async for chunk in response.content.iter_chunked(64 * 1024):
+                chunks.extend(chunk)
+                if len(chunks) > READER_ASSETS_MAX_COMPRESSED_BYTES:
+                    raise ValueError("reader assets response is too large")
+            raw = bytes(chunks)
+            reader_assets_cache = decode_reader_assets(raw)
+            reader_assets_cache_at = now
+        except Exception as exc:
+            print(f"reader assets refresh failed: {exc}")
+            if not reader_assets_cache_at:
+                reader_assets_cache_at = now
+        finally:
+            if response is not None:
+                response.release()
+        return reader_assets_cache
+
 def decode_varint(data: bytes, offset: int) -> tuple[int, int]:
     value = 0
     shift = 0
@@ -523,7 +594,7 @@ def build_vocab_by_len():
 
 
 def build_indexes(build_words=True):
-    global _data_generation, word_index, folder_index, extension_counts, repo_counts, repo_list, extension_list, repo_extension_counts, repo_records_map, sorted_by_name, sorted_by_size, repo_sorted_by_name, repo_sorted_by_size, txt_record_indices, repo_txt_record_indices
+    global _data_generation, word_index, folder_index, extension_counts, repo_counts, repo_list, extension_list, repo_extension_counts, repo_records_map, sorted_by_name, sorted_by_size, repo_sorted_by_name, repo_sorted_by_size, txt_record_indices, repo_txt_record_indices, reader_record_indices, repo_reader_record_indices
     _data_generation += 1
     word_index = {}
     folder_index = {}
@@ -535,6 +606,8 @@ def build_indexes(build_words=True):
     repo_sorted_by_size = {}
     txt_record_indices = []
     repo_txt_record_indices = {}
+    reader_record_indices = []
+    repo_reader_record_indices = {}
     for idx, rec in enumerate(records):
         repo = rec.get("Repo", "")
         repo_counts[repo] = repo_counts.get(repo, 0) + 1
@@ -554,6 +627,9 @@ def build_indexes(build_words=True):
         if rec.get("HasTxt"):
             txt_record_indices.append(idx)
             repo_txt_record_indices.setdefault(repo, []).append(idx)
+        if ext in READER_EXTENSIONS:
+            reader_record_indices.append(idx)
+            repo_reader_record_indices.setdefault(repo, []).append(idx)
         folders_lower = [f.lower() for f in (folders or [])]
         rec["_file_lower"] = file_name.lower()
         rec["_folders_lower"] = folders_lower
@@ -775,7 +851,7 @@ def build_global_bootstrap():
         "generation": _data_generation,
         "repos": repo_list,
         "extensions": [{"name": name, "count": extension_counts[name]} for name in sorted(extension_counts)],
-        "random_txt": {"available": bool(txt_record_indices), "count": len(txt_record_indices)},
+        "random_txt": {"available": bool(reader_record_indices), "count": len(reader_record_indices)},
         "sidebar": sidebar,
     }
 
@@ -1123,6 +1199,7 @@ async def lifespan(app: FastAPI):
         auto_decompress=False,
     )
     app.state.upstream_semaphore = asyncio.Semaphore(8)
+    app.state.reader_assets_lock = asyncio.Lock()
     app.state.txt_warm_task = asyncio.create_task(warm_txt_proxy_loop(app))
     try:
         yield
@@ -1196,6 +1273,10 @@ def api_search_repo(repo_name: str, body: SearchRequest):
 
 def api_repos():
     return JSONResponse(cached_payload(("repos", _data_generation), lambda: repo_list), headers=METADATA_CACHE_HEADERS)
+@app.get("/api/reader-assets")
+
+async def api_reader_assets():
+    return JSONResponse(await get_reader_assets(), headers={"Cache-Control": "public, max-age=300"})
 @app.get("/api/extensions")
 
 def api_extensions(repo: Optional[str] = Query(default=None)):
@@ -1262,6 +1343,21 @@ def api_random_txt_status(repo: Optional[str] = Query(default=None)):
         count = len(txt_record_indices)
     return JSONResponse({"available": count > 0, "count": count}, headers=METADATA_CACHE_HEADERS)
 
+@app.get("/api/random-reader")
+def api_random_reader(repo: Optional[str] = Query(default=None)):
+    pool = repo_reader_record_indices.get(f"VoiceOfML/{repo}", []) if repo else reader_record_indices
+    if not pool:
+        return JSONResponse({"error": "无可读文档"}, status_code=404)
+    rec = dict(records[random.choice(pool)])
+    rec["Link"] = rec.get("Link") or build_record_link(rec)
+    rec["Path"] = rec.get("Path") or build_record_path_url(rec)
+    return JSONResponse(rec)
+
+@app.get("/api/random-reader/status")
+def api_random_reader_status(repo: Optional[str] = Query(default=None)):
+    count = len(repo_reader_record_indices.get(f"VoiceOfML/{repo}", [])) if repo else len(reader_record_indices)
+    return JSONResponse({"available": count > 0, "count": count}, headers=METADATA_CACHE_HEADERS)
+
 @app.get("/api/bootstrap")
 def api_bootstrap():
     return JSONResponse(

requirements.txt

@@ -1,4 +1,4 @@
-fastapi==0.115.0
-uvicorn==0.30.6
+fastapi==0.141.1
+uvicorn==0.52.4
 aiohttp==3.14.3
 jieba==0.42.1

scripts/build_static_assets.mjs

@@ -5,7 +5,7 @@ import { extname, join } from "node:path";
 const outputDir = process.env.STATIC_OUTPUT_DIR || "/out";
 const replacements = new Map();
 
-for (const filename of ["app.js", "style.css"]) {
+for (const filename of ["app.js", "style.css", "reader-contract.js", "reader-store.js", "reader.js", "reader.css"]) {
   const source = join(outputDir, filename);
   const content = readFileSync(source);
   const hash = createHash("sha256").update(content).digest("hex").slice(0, 12);
@@ -16,7 +16,7 @@ for (const filename of ["app.js", "style.css"]) {
   replacements.set(`/static/${filename}`, `/static/${versioned}`);
 }
 
-for (const filename of ["index.html", "sw.js"]) {
+for (const filename of ["index.html", "reader.html", "sw.js"]) {
   const path = join(outputDir, filename);
   let content = readFileSync(path, "utf8");
   for (const [original, versioned] of replacements) {

scripts/copy_reader_vendor.mjs

@@ -0,0 +1,56 @@
+import { createHash } from "node:crypto";
+import { mkdirSync, writeFileSync } from "node:fs";
+import { get } from "node:https";
+import { join } from "node:path";
+
+const output = process.argv[2] || "static/vendor";
+mkdirSync(output, { recursive: true });
+function download(url, redirects = 0) {
+  return new Promise((resolve, reject) => {
+    const request = get(url, (response) => {
+    if (response.statusCode >= 300 && response.statusCode < 400 && response.headers.location && redirects < 5) {
+      response.resume();
+      return download(new URL(response.headers.location, url), redirects + 1).then(resolve, reject);
+    }
+    if (response.statusCode !== 200) {
+      response.resume();
+      return reject(new Error(`${url}: HTTP ${response.statusCode}`));
+    }
+    const chunks = [];
+    response.on("data", (chunk) => chunks.push(chunk));
+    response.on("end", () => resolve(Buffer.concat(chunks)));
+    response.on("error", reject);
+    });
+    request.setTimeout(60000, () => request.destroy(new Error(`${url}: request timed out`)));
+    request.on("error", reject);
+  });
+}
+
+async function downloadWithRetry(url) {
+  let lastError;
+  for (let attempt = 0; attempt < 4; attempt++) {
+    try { return await download(url); }
+    catch (error) {
+      lastError = error;
+      if (attempt < 3) await new Promise((resolve) => setTimeout(resolve, 1000 * (2 ** attempt)));
+    }
+  }
+  throw lastError;
+}
+
+async function main() {
+for (const [url, target, expected] of [
+  ["https://cdn.jsdelivr.net/npm/pdfjs-dist@6.2.108/build/pdf.min.mjs", "pdf.min.mjs", "e0be3863c23c8af2305b16548febd58e7f8874a460253317d7771cddbc1c0f6d"],
+  ["https://cdn.jsdelivr.net/npm/pdfjs-dist@6.2.108/build/pdf.worker.min.mjs", "pdf.worker.min.mjs", "0613f41490dd6aaceed7a93fbbd38c85e6d6aa60474b6588c6e7709cfbe18cb3"],
+  ["https://cdn.jsdelivr.net/npm/epubjs@0.3.93/dist/epub.min.js", "epub.min.js", "06eae15745107b4aa508c95538275251f69bfb9f1175621fc458d9f42ed082d4"],
+  ["https://cdn.jsdelivr.net/npm/marked@18.0.10/lib/marked.umd.js", "marked.min.js", "eaccee2fb9fb3b2c09e873a5504da82507850d9e677bd720122ac49e2a03982a"],
+  ["https://cdn.jsdelivr.net/npm/dompurify@3.4.14/dist/purify.min.js", "purify.min.js", "c2f26ea4fc0d88141c9aa430eb515ac86fce59418ceebd85fa475b87a8d6c3e6"],
+]) {
+  const bytes = await downloadWithRetry(url);
+  const actual = createHash("sha256").update(bytes).digest("hex");
+  if (actual !== expected) throw new Error(`${url}: SHA-256 ${actual} does not match ${expected}`);
+  writeFileSync(join(output, target), bytes);
+}
+}
+
+main().catch((error) => { console.error(error); process.exitCode = 1; });

static/app.js

@@ -10,8 +10,6 @@ const ORDERED_EXTENSIONS = [
   "mp3", "wav",
   "iso", "dat", "exe",
 ];
-const TXT_BASE = "/txt";
-
 const FILE_ICON_MAP = {
   pdf: "pdf",
   txt: "text", mht: "text",
@@ -696,11 +694,55 @@ function encodeRecordPath(path) {
   return String(path || "").split("/").map(encodeURIComponent).join("/");
 }
 
+let readerAssets = null;
+let readerAssetsPending = null;
+
+function loadReaderAssets() {
+  if (readerAssets) return Promise.resolve(readerAssets);
+  if (readerAssetsPending) return readerAssetsPending;
+  readerAssetsPending = fetch("/api/reader-assets")
+    .then(resp => resp.ok ? resp.json() : null)
+    .then(data => {
+      readerAssets = data && data.v === 1 && data.f && typeof data.f === "object" ? data.f : {};
+      return readerAssets;
+    })
+    .catch(() => {
+      readerAssets = {};
+      return readerAssets;
+    })
+    .finally(() => { readerAssetsPending = null; });
+  return readerAssetsPending;
+}
+
+function applyReaderAsset(record, repo, relativePath, originalLink) {
+  const asset = readerAssets && readerAssets[`${repo}\0${relativePath}`];
+  if (!asset || asset.s !== 2 || !["p", "e"].includes(asset.m) || !/^objects\/[0-9a-f]{2}\/[0-9a-f]{64}\/(document\.pdf|book\.epub)$/.test(asset.p || "")) return record;
+  return Object.assign({}, record, {
+    ReaderLink: `https://huggingface.co/datasets/vomebook/Reader-Assets/resolve/main/${asset.p}`,
+    ReaderExtension: asset.m === "p" ? "pdf" : "epub",
+    DownloadLink: originalLink,
+  });
+}
+
 function getRecordLink(rec) {
   if (rec.Link) return rec.Link;
   return `https://huggingface.co/datasets/${rec.Repo || ""}/resolve/main/${encodeRecordPath(buildRecordRelativePath(rec))}`;
 }
 
+function getReaderLink(rec) {
+  const readerRecord = Object.assign({}, rec, { Link: getRecordLink(rec), ReturnUrl: location.href });
+  if (rec.HasTxt) {
+    const relPath = buildRecordRelativePath(rec);
+    const stem = relPath.includes(".") ? relPath.slice(0, relPath.lastIndexOf(".")) : relPath;
+    readerRecord.OcrUrl = `/txt/${encodeRecordPath(stem)}.txt`;
+  }
+  return VoiceOfMLReader.readerUrl(readerRecord, "/static/reader.html");
+}
+
+function isReadableRecord(rec) {
+  return VoiceOfMLReader.capability(rec && rec.Extension).article;
+}
+
 function getRecordPath(rec) {
   if (rec.Path) return rec.Path;
   return `https://huggingface.co/datasets/${rec.Repo || ""}/blob/main/${encodeRecordPath(buildRecordRelativePath(rec))}`;
@@ -1112,7 +1154,7 @@ async function updateRandomTxtVisibility() {
   const repo = STATE.mode === "repo" && STATE.repo ? STATE.repo : "";
   try {
     const data = repo
-      ? await fetchJsonWithTimeout(`/api/random-txt/status?repo=${encodeURIComponent(repo)}`, 4000)
+      ? await fetchJsonWithTimeout(`/api/random-reader/status?repo=${encodeURIComponent(repo)}`, 4000)
       : ((await API.getBootstrap()) || {}).random_txt;
     if (!data) throw new Error("bootstrap unavailable");
     if (id !== randomTxtStatusId) return;
@@ -1173,10 +1215,17 @@ function renderBrowserListItems(list, data, currentRepo, path) {
     const sizeStr = formatSize(f.size);
     const displayName = getBrowserFileName(f);
     const fileLink = getBrowserFileLink(currentRepo, path, f);
-    const stem = displayName.includes(".") ? displayName.slice(0, displayName.lastIndexOf(".")) : displayName;
-    const txtPath = path ? `${path}/${stem}` : stem;
-    const readUrl = f.hasTxt ? `${TXT_BASE}/${encodeRecordPath(txtPath)}.txt` : "";
-    html += `<div class="browser-item" data-type="file" data-link="${escapeHTML(fileLink)}" data-filename="${escapeHTML(displayName)}"${readUrl ? ` data-read-url="${escapeHTML(readUrl)}"` : ''}>${ICONS[iconType] || ICONS.file}<span class="browser-name">${escapeHTML(displayName)}</span>${f.hasTxt ? '<span class="browser-action" data-read="1">阅读</span>' : ''}${sizeStr ? '<span class="browser-size">' + sizeStr + '</span>' : ''}</div>`;
+    const sourceRepo = currentRepo.startsWith("VoiceOfML/") ? currentRepo : `VoiceOfML/${currentRepo}`;
+    const assetPath = path ? `${path}/${displayName}` : displayName;
+    let browserRecord = { File: f.name, Extension: f.ext, Link: fileLink, ReturnUrl: location.href };
+    if (f.hasTxt) {
+      const relativePath = path ? `${path}/${f.name}` : f.name;
+      const stem = f.ext ? relativePath.replace(new RegExp(`\\.${f.ext}$`, "i"), "") : relativePath;
+      browserRecord.OcrUrl = `/txt/${encodeRecordPath(stem)}.txt`;
+    }
+    browserRecord = applyReaderAsset(browserRecord, sourceRepo, assetPath, fileLink);
+    const readUrl = VoiceOfMLReader.readerUrl(browserRecord, "/static/reader.html");
+    html += `<div class="browser-item" data-type="file" data-link="${escapeHTML(fileLink)}" data-filename="${escapeHTML(displayName)}"${readUrl ? ` data-read-url="${escapeHTML(readUrl)}"` : ''}>${ICONS[iconType] || ICONS.file}<span class="browser-name">${escapeHTML(displayName)}</span><span class="browser-action" data-download="1">下载</span>${sizeStr ? '<span class="browser-size">' + sizeStr + '</span>' : ''}</div>`;
   }
   list.innerHTML = html;
 }
@@ -1187,6 +1236,8 @@ async function renderBrowser(path, routeId) {
   syncStateToURL(true);
   DOM.sidebarContent.innerHTML = "";
   const currentRepo = STATE.repo;
+  await loadReaderAssets();
+  if (routeId && routeId !== routeRenderId) return;
   const backBtn = document.createElement("div");
   backBtn.className = "back-to-global";
   backBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>返回全局搜索';
@@ -1351,7 +1402,7 @@ function buildResultHTML(rec, idx) {
       <button class="result-action-btn" data-action="copy" data-link="${escapeHTML(getCopyableLink(recordLink))}">复制链接</button>
       <button class="result-action-btn primary" data-action="download" data-filename="${escapeHTML(rec.File + (rec.Extension ? '.' + rec.Extension : ''))}" data-link="${escapeHTML(recordLink)}">下载</button>
       <a href="${escapeHTML(getPreviewLink(recordPath))}" class="result-action-btn" target="_blank" rel="noopener noreferrer">仓库查看</a>
-      ${rec.HasTxt ? `<button class="result-action-btn" data-action="read" data-link="${escapeHTML(recordLink)}" data-repo="${repoShort}">在线阅读</button>` : ""}
+      ${isReadableRecord(rec) ? `<button class="result-action-btn" data-action="read" data-reader-url="${escapeHTML(getReaderLink(rec))}">在线阅读</button>` : ""}
     </div>`;
 }
 
@@ -2444,12 +2495,11 @@ async function randomBook() {
   }
 }
 
-function openTxtRecord(rec, popup) {
+function openReaderRecord(rec, popup) {
   if (!rec) return false;
-  const relPath = buildRecordRelativePath(rec);
-  const stem = relPath.includes(".") ? relPath.slice(0, relPath.lastIndexOf(".")) : relPath;
-  if (!stem) return false;
-  const url = `${TXT_BASE}/${encodeRecordPath(stem)}.txt`;
+  const url = getReaderLink(rec);
+  if (!url) return false;
+  if (STATE.isMobile) { STATE.leftSidebarOpen = false; STATE.rightSidebarOpen = false; updateSidebarVisibility(); }
   if (popup) popup.location.replace(url);
   else openExternalWindow(url);
   return true;
@@ -2459,11 +2509,11 @@ async function randomTxt() {
   const popup = openPendingWindow();
   try {
     showToast("正在随机打开文章...");
-    const url = STATE.repo ? `/api/random-txt?repo=${encodeURIComponent(STATE.repo)}` : "/api/random-txt";
+    const url = STATE.repo ? `/api/random-reader?repo=${encodeURIComponent(STATE.repo)}` : "/api/random-reader";
     const resp = await fetch(url);
     if (!resp.ok) throw new Error("HTTP " + resp.status);
     const rec = await resp.json();
-    if (!openTxtRecord(rec, popup)) {
+    if (!openReaderRecord(rec, popup)) {
       if (popup) popup.close();
       showToast("暂无可读文章");
     }
@@ -2706,6 +2756,7 @@ function applyMobileMode() {
     STATE.leftSidebarOpen = true; STATE.rightSidebarOpen = false;
   }
   updateSidebarVisibility();
+  document.documentElement.classList.remove("mobile-boot");
   if (DOM.sidebarExpandBtn) DOM.sidebarExpandBtn.style.display = (STATE.mode === "repo" && !STATE.isMobile) ? "" : "none";
   updateSelectionUI();
   requestAnimationFrame(updateScrollTrack);
@@ -2820,18 +2871,8 @@ function setupResultDelegation() {
         return;
       }
       if (action === "read") {
-        const link = actionBtn.dataset.link;
-        const repoShort = actionBtn.dataset.repo || STATE.repo;
-        const prefix = `https://huggingface.co/datasets/VoiceOfML/${repoShort}/resolve/main/`;
-        let relPath = "";
-        if (link.startsWith(prefix)) relPath = decodeURIComponent(link.slice(prefix.length));
-        let stem = relPath;
-        if (stem.includes(".")) {
-          const lastDot = stem.lastIndexOf(".");
-          const slashAfterDot = stem.indexOf("/", lastDot);
-          if (slashAfterDot === -1) stem = stem.substring(0, lastDot);
-        }
-        openExternalWindow(`${TXT_BASE}/${encodeRecordPath(stem)}.txt`);
+        if (STATE.isMobile) { STATE.leftSidebarOpen = false; STATE.rightSidebarOpen = false; updateSidebarVisibility(); }
+        openExternalWindow(actionBtn.dataset.readerUrl);
         return;
       }
     }
@@ -2879,14 +2920,20 @@ function setupResultDelegation() {
     if (!browserItem) return;
     if (e.target.closest(".browser-action")) {
       e.stopPropagation();
-      const readUrl = browserItem.dataset.readUrl;
-      if (readUrl) openExternalWindow(readUrl);
+      const fileLink = browserItem.dataset.link;
+      if (fileLink) downloadFile(browserItem.dataset.filename || "file", fileLink);
       return;
     }
     if (browserItem.dataset.type === "folder") {
       renderBrowser(browserItem.dataset.path, ++routeRenderId);
       return;
     }
+    const readUrl = browserItem.dataset.readUrl;
+    if (readUrl) {
+      if (STATE.isMobile) { STATE.leftSidebarOpen = false; STATE.rightSidebarOpen = false; updateSidebarVisibility(); }
+      openExternalWindow(readUrl);
+      return;
+    }
     const fileLink = browserItem.dataset.link;
     if (fileLink) downloadFile(browserItem.dataset.filename || "file", fileLink);
   });

static/index.html

@@ -3,6 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<script>if (matchMedia("(max-width: 768px)").matches && localStorage.getItem("mobileMode") !== "desktop") document.documentElement.classList.add("mobile-boot");</script>
 <title>VoiceOfML Search</title>
 <link rel="manifest" href="/manifest.json">
 <meta name="theme-color" content="#1a1c1e">
@@ -266,6 +267,7 @@ if ("serviceWorker" in navigator) {
 }
 </script>
 
+<script src="/static/reader-contract.js"></script>
 <script src="/static/app.js"></script>
 </body>
 </html>

static/reader-contract.js

@@ -0,0 +1,48 @@
+(function (root) {
+  "use strict";
+
+  const ReaderMode = Object.freeze({
+    UNSUPPORTED: 0,
+    ORIGINAL: 1,
+    CONVERTED: 2,
+    PENDING: 3,
+    FAILED: 4,
+  });
+  const modes = Object.freeze({
+    pdf: "pdf", epub: "epub", txt: "text", md: "markdown", markdown: "markdown",
+    jpg: "image", jpeg: "image", png: "image", gif: "image", bmp: "image", webp: "image",
+  });
+  const articleExtensions = Object.freeze(Object.keys(modes));
+
+  function capability(extension) {
+    const normalized = String(extension || "").toLowerCase();
+    return Object.freeze({
+      extension: normalized,
+      mode: modes[normalized] || null,
+      readerMode: modes[normalized] ? ReaderMode.ORIGINAL : ReaderMode.UNSUPPORTED,
+      article: !!modes[normalized],
+    });
+  }
+
+  function clampNumber(value, minimum, maximum, fallback) {
+    const numeric = Math.round(Number(value));
+    return Number.isFinite(numeric) ? Math.min(maximum, Math.max(minimum, numeric)) : fallback;
+  }
+
+  function readerUrl(record, basePath) {
+    const source = record && (record.ReaderLink || record.readerLink || record.Link || record.link);
+    const readerExtension = record && (record.ReaderExtension || record.readerExtension || record.Extension || record.extension);
+    if (!source || capability(readerExtension).readerMode === ReaderMode.UNSUPPORTED) return "";
+    const params = new URLSearchParams({
+      url: source,
+      title: (record.File || record.name || "") + ((record.Extension || record.extension) ? "." + (record.Extension || record.extension) : ""),
+      ext: readerExtension || "",
+    });
+    if (record.DownloadLink || record.downloadLink) params.set("download", record.DownloadLink || record.downloadLink);
+    if (record.OcrUrl || record.ocrUrl) params.set("ocr", record.OcrUrl || record.ocrUrl);
+    if (record.ReturnUrl || record.returnUrl) params.set("return", record.ReturnUrl || record.returnUrl);
+    return (basePath || "/reader.html") + "?" + params.toString();
+  }
+
+  root.VoiceOfMLReader = Object.freeze({ ReaderMode, articleExtensions, capability, clampNumber, readerUrl });
+})(typeof self !== "undefined" ? self : window);

static/reader-store.js

@@ -0,0 +1,90 @@
+(function (root) {
+  "use strict";
+  const DB_NAME = "voiceofml-reader";
+  const STORE_NAME = "entries";
+  const MAX_ENTRIES = 200;
+  let databasePromise = null;
+
+  function openDatabase() {
+    if (databasePromise) return databasePromise;
+    databasePromise = new Promise((resolve, reject) => {
+      const request = indexedDB.open(DB_NAME, 1);
+      request.onupgradeneeded = () => {
+        const store = request.result.createObjectStore(STORE_NAME, { keyPath: "url" });
+        store.createIndex("lastReadAt", "lastReadAt");
+      };
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => { databasePromise = null; reject(request.error); };
+    });
+    return databasePromise;
+  }
+
+  async function transaction(mode, callback) {
+    const database = await openDatabase();
+    return new Promise((resolve, reject) => {
+      const tx = database.transaction(STORE_NAME, mode);
+      const result = callback(tx.objectStore(STORE_NAME));
+      tx.oncomplete = () => resolve(result);
+      tx.onerror = () => reject(tx.error);
+      tx.onabort = () => reject(tx.error);
+    });
+  }
+
+  async function get(url) {
+    const database = await openDatabase();
+    return new Promise((resolve, reject) => {
+      const tx = database.transaction(STORE_NAME, "readonly");
+      const request = tx.objectStore(STORE_NAME).get(url);
+      request.onsuccess = () => resolve(request.result || null);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async function put(entry) {
+    const database = await openDatabase();
+    await new Promise((resolve, reject) => {
+      const tx = database.transaction(STORE_NAME, "readwrite");
+      const store = tx.objectStore(STORE_NAME);
+      const existing = store.get(entry.url);
+      existing.onsuccess = () => {
+        if (existing.result) {
+          store.put(entry);
+          return;
+        }
+        const count = store.count();
+        count.onsuccess = () => {
+          if (count.result < MAX_ENTRIES) {
+            store.put(entry);
+            return;
+          }
+          const oldest = store.index("lastReadAt").openCursor();
+          oldest.onsuccess = () => {
+            if (oldest.result) oldest.result.delete();
+            store.put(entry);
+          };
+        };
+      };
+      tx.oncomplete = resolve;
+      tx.onerror = () => reject(tx.error);
+      tx.onabort = () => reject(tx.error);
+    });
+  }
+
+  async function list(limit = MAX_ENTRIES) {
+    const database = await openDatabase();
+    return new Promise((resolve, reject) => {
+      const entries = [];
+      const tx = database.transaction(STORE_NAME, "readonly");
+      const request = tx.objectStore(STORE_NAME).index("lastReadAt").openCursor(null, "prev");
+      request.onsuccess = () => {
+        const cursor = request.result;
+        if (!cursor || entries.length >= limit) return resolve(entries);
+        entries.push(cursor.value); cursor.continue();
+      };
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async function remove(url) { await transaction("readwrite", (store) => store.delete(url)); }
+  root.VoiceOfMLReaderStore = Object.freeze({ DB_NAME, MAX_ENTRIES, get, put, list, remove });
+})(typeof self !== "undefined" ? self : window);

static/reader.css

@@ -0,0 +1,38 @@
+:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #111315; color: #eceff1; }
+* { box-sizing: border-box; letter-spacing: 0; }
+body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
+.reader-toolbar { min-height: 44px; flex: none; display: flex; align-items: center; gap: 7px; padding: 3px 10px; background: #1b1e21; border-bottom: 1px solid #34383d; }
+.reader-heading { min-width: 0; flex: 1; display: flex; flex-direction: column; }
+.reader-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 18px; }
+.reader-heading span { color: #9ba3aa; font-size: 12px; line-height: 16px; }
+.reader-actions { display: flex; align-items: center; gap: 4px; }
+.control-group { display: inline-flex; align-items: center; gap: 2px; }
+.control-group[hidden] { display: none; }
+.compact-input { height: 32px; display: inline-flex; align-items: center; border: 1px solid #3b4147; background: #25292d; border-radius: 4px; padding-right: 4px; color: #c6ccd1; font-size: 12px; }
+.compact-input input { width: 34px; height: 28px; border: 0; background: transparent; color: inherit; text-align: right; font: inherit; outline: none; }
+.icon-button { width: 32px; height: 32px; border: 0; background: transparent; color: inherit; display: inline-grid; place-items: center; text-decoration: none; cursor: pointer; border-radius: 4px; font-size: 18px; }
+.text-button { height: 32px; padding: 0 8px; border: 0; background: transparent; color: inherit; display: inline-flex; align-items: center; text-decoration: none; border-radius: 4px; font-size: 12px; }
+.text-button[hidden] { display: none; }
+.icon-button:hover, .text-button:hover { background: #292d31; }
+.history-panel { position: fixed; top: 44px; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 20; background: #1b1e21; border-left: 1px solid #34383d; box-shadow: -5px 0 20px #0008; overflow: auto; }
+.history-panel > header { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid #34383d; }
+.history-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px; border-bottom: 1px solid #2d3237; }
+.history-item a { color: #e5e9ec; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.history-item small { color: #929aa1; }
+.history-item button { grid-row: 1 / 3; grid-column: 2; border: 0; background: transparent; color: #b5bbc0; cursor: pointer; }
+.reader-viewport { min-height: 0; flex: 1; overflow: auto; background: #121416; }
+.loading-status { display: none; color: #aeb5ba; font-size: 13px; text-align: center; padding: 12px; }
+.loading-status[hidden] { display: none; }
+.reader-content { --reader-zoom: 1; width: min(calc(100% * var(--reader-zoom)), calc(1100px * var(--reader-zoom))); margin: 0 auto; padding: 20px; }
+.reader-page { position: relative; margin: 0 auto 18px; background: white; box-shadow: 0 2px 14px #0008; min-height: 160px; }
+.reader-page canvas { display: block; width: 100%; height: auto; }
+.reader-page canvas { position: relative; opacity: 0; transition: opacity 120ms ease; }
+.reader-page canvas.ready { opacity: 1; }
+.reader-image { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; }
+.reader-text { margin: 0 auto; max-width: 76ch; white-space: pre-wrap; overflow-wrap: anywhere; font: 17px/1.8 ui-monospace, monospace; color: #e7e9eb; }
+.reader-markdown { margin: 0 auto; max-width: 76ch; font-size: 17px; line-height: 1.75; }
+.reader-markdown img { max-width: 100%; }
+.reader-markdown a { color: #72a7df; }
+.reader-error { margin: 20vh auto; max-width: 560px; color: #d7dadd; text-align: center; line-height: 1.6; }
+.epub-frame { width: 100%; height: calc(100vh - 96px); background: white; }
+@media (max-width: 600px) { .reader-toolbar { min-height: 36px; gap: 1px; padding: 2px 5px; } .reader-content { padding: 10px; } .reader-heading { display: none; } .reader-actions { flex: 1; justify-content: flex-end; gap: 1px; min-width: 0; } .reader-actions .control-group { gap: 0; } .reader-actions .icon-button { width: 26px; } .reader-actions .text-button { height: 30px; padding: 0 3px; } .loading-status { display: block; padding: 10px 6px 0; } .icon-button { width: 26px; height: 30px; flex: none; } .compact-input { height: 30px; padding-right: 3px; font-size: 11px; } .compact-input input { width: 24px; height: 28px; } .zoom-controls .compact-input input { width: 32px; } .history-panel { top: 36px; } }

static/reader.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="theme-color" content="#181a1d">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data: blob: https://huggingface.co https://hf-mirror.com https://*.huggingface.co https://*.hf.co https://*.xethub.hf.co; connect-src 'self' blob: https://huggingface.co https://hf-mirror.com https://*.huggingface.co https://*.hf.co https://*.xethub.hf.co; worker-src 'self' blob:; frame-src 'self' blob:; font-src 'self' data:; base-uri 'none'; form-action 'none'; object-src 'none'">
+<title>VoiceOfML Reader</title>
+<link rel="stylesheet" href="/static/reader.css">
+<script src="/static/reader-contract.js"></script>
+<script src="/static/reader-store.js"></script>
+</head>
+<body>
+<header class="reader-toolbar">
+  <button id="back" class="icon-button" type="button" title="返回" aria-label="返回">&#8592;</button>
+  <div class="reader-heading"><strong id="title">在线阅读</strong><span id="status">正在准备...</span></div>
+  <div class="reader-actions">
+    <span class="control-group page-controls">
+      <button id="page-prev" class="icon-button" type="button" title="上一页" aria-label="上一页">&#8249;</button>
+      <label class="compact-input"><input id="page-number" type="number" min="1" value="1" inputmode="numeric" aria-label="页码"><span id="page-total">/ -</span></label>
+      <button id="page-next" class="icon-button" type="button" title="下一页" aria-label="下一页">&#8250;</button>
+    </span>
+    <span class="control-group zoom-controls">
+      <button id="zoom-out" class="icon-button" type="button" title="缩小" aria-label="缩小">&#8722;</button>
+      <label class="compact-input"><input id="zoom" type="number" min="50" max="250" step="10" value="100" inputmode="numeric" aria-label="缩放比例"><span>%</span></label>
+      <button id="zoom-in" class="icon-button" type="button" title="放大" aria-label="放大">+</button>
+    </span>
+    <a id="ocr" class="text-button" title="阅读 OCR 文本" target="_blank" rel="noopener noreferrer" hidden>OCR</a>
+    <a id="download" class="icon-button" title="代理下载原文件" aria-label="代理下载原文件">&#8681;</a>
+  </div>
+  <button id="history" class="icon-button" type="button" title="最近阅读" aria-label="最近阅读">&#9776;</button>
+</header>
+<main id="viewport" class="reader-viewport"><div id="loading-status" class="loading-status" role="status">正在加载原文件...</div><div id="content" class="reader-content"></div></main>
+<aside id="history-panel" class="history-panel" hidden><header><strong>最近阅读</strong><button id="history-close" class="icon-button" type="button" aria-label="关闭">&times;</button></header><div id="history-list"></div></aside>
+<script type="module" src="/static/reader.js"></script>
+</body>
+</html>

static/reader.js

@@ -0,0 +1,275 @@
+const PDFJS_URL = "/static/vendor/pdf.min.mjs";
+const PDFJS_WORKER_URL = "/static/vendor/pdf.worker.min.mjs";
+const EPUB_URL = "/static/vendor/epub.min.js";
+const MARKED_URL = "/static/vendor/marked.min.js";
+const PURIFY_URL = "/static/vendor/purify.min.js";
+const params = new URLSearchParams(location.search);
+const sourceUrl = params.get("url") || "";
+const downloadUrl = params.get("download") || sourceUrl;
+const extension = (params.get("ext") || "").toLowerCase();
+const capability = VoiceOfMLReader.capability(extension);
+const content = document.querySelector("#content");
+const status = document.querySelector("#status");
+const loadingStatus = document.querySelector("#loading-status");
+const title = params.get("title") || "在线阅读";
+const ocrUrl = params.get("ocr") || "";
+const returnUrl = params.get("return") || "";
+let zoom = 1;
+let currentPage = 1;
+let pageCount = 0;
+let restoredEntry = null;
+let saveTimer = 0;
+let pdfDocument = null;
+let pdfRenderGeneration = 0;
+let pdfActiveRenders = 0;
+const pdfRenderWaiters = [];
+let epubRendition = null;
+let epubLocation = "";
+let lastSavedProgress = "";
+let progressSaveChain = Promise.resolve();
+const viewport = document.querySelector("#viewport");
+const zoomInput = document.querySelector("#zoom");
+const pageInput = document.querySelector("#page-number");
+document.querySelector(".page-controls").hidden = !["pdf", "epub"].includes(capability.mode);
+
+document.querySelector("#title").textContent = title;
+document.title = title + " - VoiceOfML Reader";
+document.querySelector("#back").addEventListener("click", () => {
+  if (history.length > 1) history.back();
+  else { try { const target = new URL(returnUrl); location.assign(target.origin === location.origin ? target.href : "/"); } catch (_) { location.assign("/"); } }
+});
+function setZoom(percent, persist = true) {
+  const normalized = VoiceOfMLReader.clampNumber(percent, 50, 250, 100);
+  zoom = normalized / 100;
+  content.style.setProperty("--reader-zoom", String(zoom));
+  zoomInput.value = String(normalized);
+  if (pdfDocument) rerenderVisiblePdfPages();
+  if (persist) scheduleSave();
+}
+for (const [id, delta] of [["#zoom-out", -10], ["#zoom-in", 10]]) {
+  document.querySelector(id).addEventListener("click", () => {
+    setZoom(Number(zoomInput.value) + delta);
+  });
+}
+zoomInput.addEventListener("change", () => setZoom(zoomInput.value));
+zoomInput.addEventListener("keydown", (event) => { if (event.key === "Enter") { setZoom(zoomInput.value); zoomInput.blur(); } });
+pageInput.addEventListener("change", () => goToPage(pageInput.value));
+pageInput.addEventListener("keydown", (event) => { if (event.key === "Enter") { goToPage(pageInput.value); pageInput.blur(); } });
+document.querySelector("#page-prev").addEventListener("click", () => epubRendition ? epubRendition.prev() : goToPage(currentPage - 1));
+document.querySelector("#page-next").addEventListener("click", () => epubRendition ? epubRendition.next() : goToPage(currentPage + 1));
+
+async function goToPage(value) {
+  if (!pageCount) return;
+  const page = VoiceOfMLReader.clampNumber(value, 1, pageCount, 1);
+  const shell = content.querySelector(`.reader-page[data-page="${page}"]`);
+  if (shell) {
+    await renderPdfShell(shell, false, true);
+    shell.scrollIntoView({ block: "start" });
+    if (restoredEntry && page === restoredEntry.page && restoredEntry.pageOffset) viewport.scrollTop += restoredEntry.pageOffset;
+  }
+  currentPage = page; pageInput.value = String(page); scheduleSave();
+}
+function scheduleSave() { clearTimeout(saveTimer); saveTimer = setTimeout(saveProgress, 500); }
+async function saveProgress() {
+  if (!validSource(sourceUrl)) return;
+  const shell = pageCount ? content.querySelector(`.reader-page[data-page="${currentPage}"]`) : null;
+  const pageOffset = shell ? Math.max(0, viewport.scrollTop - shell.offsetTop) : 0;
+  const progress = { url: sourceUrl, title, extension, readerUrl: location.href, page: currentPage, pageCount, pageOffset, epubLocation, scrollTop: viewport.scrollTop, zoom: Math.round(zoom * 100) };
+  const signature = JSON.stringify(progress);
+  if (signature === lastSavedProgress) return progressSaveChain;
+  lastSavedProgress = signature;
+  progressSaveChain = progressSaveChain.catch(() => {}).then(() => VoiceOfMLReaderStore.put({ ...progress, lastReadAt: Date.now() })).catch((error) => {
+    if (lastSavedProgress === signature) lastSavedProgress = "";
+    console.warn("Reader progress was not saved", error);
+  });
+  return progressSaveChain;
+}
+async function renderHistory() {
+  const list = document.querySelector("#history-list"); list.textContent = "";
+  try {
+    for (const entry of await VoiceOfMLReaderStore.list()) {
+      const row = document.createElement("div"); row.className = "history-item";
+      const link = document.createElement("a"); link.href = entry.readerUrl; link.textContent = entry.title || entry.url;
+      const meta = document.createElement("small"); meta.textContent = `${entry.pageCount ? `第 ${entry.page || 1} / ${entry.pageCount} 页 · ` : ""}${new Date(entry.lastReadAt).toLocaleString()}`;
+      const remove = document.createElement("button"); remove.type = "button"; remove.textContent = "删除";
+      remove.addEventListener("click", async () => { await VoiceOfMLReaderStore.remove(entry.url); row.remove(); });
+      row.append(link, meta, remove); list.appendChild(row);
+    }
+    if (!list.childElementCount) list.textContent = "暂无阅读记录";
+  } catch (_) { list.textContent = "无法读取本地记录"; }
+}
+document.querySelector("#history").addEventListener("click", async () => { const panel = document.querySelector("#history-panel"); panel.hidden = !panel.hidden; if (!panel.hidden) await renderHistory(); });
+document.querySelector("#history-close").addEventListener("click", () => { document.querySelector("#history-panel").hidden = true; });
+viewport.addEventListener("scroll", () => {
+  scheduleSave();
+}, { passive: true });
+window.addEventListener("pagehide", saveProgress);
+document.addEventListener("visibilitychange", () => { if (document.visibilityState === "hidden") saveProgress(); });
+
+function validSource(raw) {
+  try {
+    const url = new URL(raw);
+    if (url.protocol !== "https:" || !["huggingface.co", "hf-mirror.com"].includes(url.hostname)) return false;
+    return /^\/datasets\/VoiceOfML\/[^/]+\/(resolve|raw)\//.test(url.pathname)
+      || /^\/datasets\/vomebook\/Reader-Assets\/resolve\/[^/]+\/objects\/[0-9a-f]{2}\/[0-9a-f]{64}\/(document\.pdf|book\.epub)$/.test(url.pathname);
+  } catch (_) { return false; }
+}
+function validOcr(raw) {
+  try { const url = new URL(raw, location.origin); return url.origin === location.origin && url.pathname.startsWith("/txt/"); }
+  catch (_) { return false; }
+}
+function loadScript(url) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script"); script.src = url; script.onload = resolve; script.onerror = reject;
+    document.head.appendChild(script);
+  });
+}
+function fail(message) { loadingStatus.hidden = true; content.innerHTML = `<div class="reader-error">${message}</div>`; status.textContent = "无法打开"; }
+
+async function renderPdf(prepared) {
+  const pdf = await prepared;
+  pdfDocument = pdf;
+  pageCount = pdf.numPages; pageInput.max = String(pageCount); document.querySelector("#page-total").textContent = `/ ${pageCount}`;
+  status.textContent = `${pdf.numPages} 页`;
+  const firstPage = await pdf.getPage(1);
+  const firstViewport = firstPage.getViewport({ scale: 1 });
+  const observer = new IntersectionObserver((entries) => entries.forEach((entry) => {
+    entry.target.dataset.renderVisible = entry.isIntersecting ? "1" : "0";
+    if (entry.isIntersecting) renderPdfShell(entry.target);
+  }), { root: document.querySelector("#viewport"), rootMargin: "1200px 0px" });
+  const pageObserver = new IntersectionObserver((entries) => {
+    const visible = entries.filter((entry) => entry.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+    if (visible) { currentPage = Number(visible.target.dataset.page); pageInput.value = String(currentPage); scheduleSave(); }
+  }, { root: document.querySelector("#viewport"), threshold: [0.2, 0.5, 0.8] });
+  for (let page = 1; page <= pdf.numPages; page++) {
+    const shell = document.createElement("section"); shell.className = "reader-page"; shell.dataset.page = String(page);
+    shell.style.aspectRatio = `${firstViewport.width} / ${firstViewport.height}`;
+    const canvas = document.createElement("canvas"); canvas.setAttribute("aria-label", `第 ${page} 页`); shell.appendChild(canvas);
+    content.appendChild(shell); observer.observe(shell); pageObserver.observe(shell);
+  }
+  if (restoredEntry && restoredEntry.page) requestAnimationFrame(() => goToPage(restoredEntry.page));
+}
+
+async function renderPdfShell(shell, force = false, priority = false) {
+  if (!pdfDocument) return;
+  if (shell.dataset.renderState === "rendering") { if (force) shell.dataset.pendingRerender = "1"; return; }
+  if (!force && shell.dataset.renderState === "rendered") return;
+  const generation = pdfRenderGeneration;
+  shell.dataset.renderState = "rendering";
+  await acquirePdfRenderSlot(priority);
+  try {
+    const page = await pdfDocument.getPage(Number(shell.dataset.page));
+    const base = page.getViewport({ scale: 1 });
+    const scale = Math.min(3, Math.max(0.5, content.clientWidth / base.width));
+    const rendered = page.getViewport({ scale });
+    const canvas = shell.querySelector("canvas");
+    canvas.width = rendered.width; canvas.height = rendered.height;
+    shell.style.aspectRatio = `${rendered.width} / ${rendered.height}`;
+    await page.render({ canvasContext: canvas.getContext("2d"), viewport: rendered }).promise;
+    if (generation !== pdfRenderGeneration || shell.dataset.pendingRerender) {
+      shell.dataset.renderState = "idle";
+      delete shell.dataset.pendingRerender;
+      setTimeout(() => renderPdfShell(shell, true, priority), 0);
+      return;
+    }
+    canvas.classList.add("ready"); shell.dataset.renderState = "rendered";
+    shell.dataset.renderUsedAt = String(Date.now());
+    trimPdfCanvases();
+  } catch (error) {
+    shell.dataset.renderState = "idle";
+    console.warn(`PDF page ${shell.dataset.page} render failed`, error);
+    const retries = Number(shell.dataset.renderRetries || 0);
+    if (retries < 3) { shell.dataset.renderRetries = String(retries + 1); setTimeout(() => renderPdfShell(shell, true), 400 * (retries + 1)); }
+  } finally { releasePdfRenderSlot(); }
+}
+
+function acquirePdfRenderSlot(priority = false) {
+  const limit = matchMedia("(max-width: 700px)").matches ? 1 : 2;
+  if (pdfActiveRenders < limit) { pdfActiveRenders++; return Promise.resolve(); }
+  return new Promise((resolve) => {
+    const resume = () => { pdfActiveRenders++; resolve(); };
+    if (priority) pdfRenderWaiters.unshift(resume); else pdfRenderWaiters.push(resume);
+  });
+}
+function releasePdfRenderSlot() {
+  pdfActiveRenders = Math.max(0, pdfActiveRenders - 1);
+  const resume = pdfRenderWaiters.shift();
+  if (resume) resume();
+}
+function trimPdfCanvases() {
+  const limit = matchMedia("(max-width: 700px)").matches ? 7 : 11;
+  const rendered = [...content.querySelectorAll('.reader-page[data-render-state="rendered"]')];
+  if (rendered.length <= limit) return;
+  rendered.sort((a, b) => {
+    const aVisible = a.dataset.renderVisible === "1" || Number(a.dataset.page) === currentPage;
+    const bVisible = b.dataset.renderVisible === "1" || Number(b.dataset.page) === currentPage;
+    if (aVisible !== bVisible) return aVisible ? 1 : -1;
+    const distance = Math.abs(Number(b.dataset.page) - currentPage) - Math.abs(Number(a.dataset.page) - currentPage);
+    return distance || Number(a.dataset.renderUsedAt || 0) - Number(b.dataset.renderUsedAt || 0);
+  });
+  while (rendered.length > limit) {
+    const shell = rendered.shift();
+    if (shell.dataset.renderVisible === "1" || Number(shell.dataset.page) === currentPage) continue;
+    const canvas = shell.querySelector("canvas");
+    canvas.width = 0; canvas.height = 0; canvas.classList.remove("ready");
+    shell.dataset.renderState = "idle";
+  }
+}
+
+function rerenderVisiblePdfPages() {
+  pdfRenderGeneration++;
+  for (const shell of content.querySelectorAll(".reader-page")) {
+    const rect = shell.getBoundingClientRect();
+    if (rect.bottom >= -1200 && rect.top <= innerHeight + 1200) {
+      renderPdfShell(shell, true);
+    }
+  }
+}
+async function renderText(markdown, prepared) {
+  const response = await prepared.response; if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  const text = await response.text();
+  if (!markdown) { const pre = document.createElement("pre"); pre.className = "reader-text"; pre.textContent = text; content.appendChild(pre); }
+  else {
+    await prepared.engines;
+    const article = document.createElement("article"); article.className = "reader-markdown";
+    article.innerHTML = DOMPurify.sanitize(marked.parse(text), { USE_PROFILES: { html: true } }); content.appendChild(article);
+  }
+  status.textContent = "已加载";
+}
+async function renderEpub(prepared) {
+  await prepared;
+  const frame = document.createElement("div"); frame.className = "epub-frame"; content.appendChild(frame);
+  const book = ePub(sourceUrl); epubRendition = book.renderTo(frame, { width: "100%", height: "100%", spread: "none", flow: "scrolled-doc" });
+  epubRendition.on("relocated", (location) => { epubLocation = location && location.start ? location.start.cfi : ""; scheduleSave(); });
+  await epubRendition.display(restoredEntry && restoredEntry.epubLocation || undefined); status.textContent = "EPUB";
+}
+async function start() {
+  if (!validSource(sourceUrl) || capability.readerMode === VoiceOfMLReader.ReaderMode.UNSUPPORTED) return fail("此文件暂不支持在线阅读，请下载原文件。");
+  document.querySelector("#download").href = `/api/download?file=${encodeURIComponent(title)}&link=${encodeURIComponent(downloadUrl)}`;
+  if (validOcr(ocrUrl)) { const ocr = document.querySelector("#ocr"); ocr.href = ocrUrl; ocr.hidden = false; }
+  try {
+    let prepared;
+    [restoredEntry, prepared] = await Promise.all([
+      VoiceOfMLReaderStore.get(sourceUrl).catch(() => null),
+      prepareDocument(),
+    ]);
+    if (restoredEntry && restoredEntry.zoom) setZoom(restoredEntry.zoom, false);
+    if (capability.mode === "pdf") await renderPdf(prepared);
+    else if (capability.mode === "image") { content.appendChild(prepared); status.textContent = "图片"; }
+    else if (capability.mode === "text") await renderText(false, prepared);
+    else if (capability.mode === "markdown") await renderText(true, prepared);
+    else if (capability.mode === "epub") await renderEpub(prepared);
+    loadingStatus.hidden = true;
+    if (!pageCount && restoredEntry) viewport.scrollTop = restoredEntry.scrollTop || 0;
+    scheduleSave();
+  } catch (error) { console.error(error); fail("原文件加载失败，请检查网络后重试，或下载原文件。"); }
+}
+function prepareDocument() {
+  if (capability.mode === "pdf") return import(PDFJS_URL).then((pdfjs) => { pdfjs.GlobalWorkerOptions.workerSrc = PDFJS_WORKER_URL; return pdfjs.getDocument({ url: sourceUrl, withCredentials: false }).promise; });
+  if (capability.mode === "markdown") return Promise.all([fetch(sourceUrl), Promise.all([loadScript(MARKED_URL), loadScript(PURIFY_URL)])]).then(([response, engines]) => ({ response, engines }));
+  if (capability.mode === "text") return fetch(sourceUrl).then((response) => ({ response }));
+  if (capability.mode === "epub") return loadScript(EPUB_URL);
+  if (capability.mode === "image") return new Promise((resolve, reject) => { const image = new Image(); image.className = "reader-image"; image.alt = title; image.decoding = "async"; image.onload = () => resolve(image); image.onerror = reject; image.src = sourceUrl; });
+  return Promise.resolve(null);
+}
+start();

static/style.css

@@ -1507,6 +1507,8 @@ body.mobile .result-actions {
 }
 
 @media (max-width: 768px) {
+  html.mobile-boot .left-sidebar { transform: translateX(-100%); transition: none !important; }
+  html.mobile-boot .right-sidebar { transform: translateX(100%); transition: none !important; }
   body:not(.force-desktop) .sidebar {
     position: fixed;
     top: var(--header-h);

static/sw.js

@@ -3,6 +3,11 @@ const CACHE_NAME = "voiceofml-search-hf-v1.0.0";
 const PRECACHE_URLS = [
   "/",
   "/static/style.css",
+  "/static/reader-contract.js",
+  "/static/reader-store.js",
+  "/static/reader.html",
+  "/static/reader.css",
+  "/static/reader.js",
   "/static/app.js",
   "/data/initial/manifest.json",
   "/data/sidebar/manifest.json",