ExHentai Reader Pro のソースコード

ExHentai Reader Pro

E站阅读加强自适应点对点缩放+预载图片 v4 — 嵌入原网页，保留原有样式，向下滚动自动加载，失败自动重试，阅读记忆
右端で折り返す
// ==UserScript==
// @name         ExHentai Reader Pro
// @namespace    EHReaderPro
// @version      4.4.0
// @description  E站 阅读加强 自适应点对点缩放+预载图片 v4 — 嵌入原网页，保留原有样式，向下滚动自动加载，失败自动重试，阅读记忆
// @author       EHReader
// @match        https://exhentai.org/s/*
// @match        https://e-hentai.org/s/*
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function () {
"use strict";

// =================================================
// 全局配置与状态
// =================================================

const EHR = {
  version: "4.4.0",

  config: {
    mode: "auto",        // pixel=1:1像素(可横向滚动) | auto=自适应可视宽
    scale: 100,           // 缩放百分比
    preloadDown: 3,       // 向下预载页数
    preloadUp: 1,         // 向上预载页数（仅滚动到顶触发）
    cacheLimit: 500,      // 超出此范围的页释放内存
    showImgInfo: true,    // 是否显示图片信息
  },

  state: {
    gid: "",
    startPage: 1,
    startKey: "",
    activePage: 1,
    totalPages: 0,
    pageKeys: new Map(),
    pageData: new Map(),
    loadedPages: new Set(),
    loadingPages: new Set(),
    container: null,
  },
};

// =================================================
// 配置持久化
// =================================================

function loadConfig() {
  try {
    const saved = JSON.parse(localStorage.getItem("EHReader_config") || "{}");
    Object.assign(EHR.config, saved);
  } catch (e) {}
}

function saveConfig() {
  localStorage.setItem("EHReader_config", JSON.stringify(EHR.config));
}

loadConfig();

// =================================================
// IndexedDB URL缓存（LRU）
// =================================================

const EHCache = (() => {
  const DB_NAME = "EHReaderURLCache";
  const ST_NAME = "pages";
  let _db = null;

  async function openDB() {
    if (_db) return _db;
    return new Promise((res, rej) => {
      // v3：records 含 url/info/pageKey 字段，旧版记录兼容（缺字段默认空串）
      const req = indexedDB.open(DB_NAME, 3);
      req.onupgradeneeded = e => {
        const db = e.target.result;
        if (!db.objectStoreNames.contains(ST_NAME)) {
          const st = db.createObjectStore(ST_NAME, { keyPath: "key" });
          st.createIndex("ts", "ts", { unique: false });
        }
        // v1/v2 → v3：无需改 schema，pageKey 字段随 put 写入即可
      };
      req.onsuccess = e => { _db = e.target.result; res(_db); };
      req.onerror   = e => rej(e.target.error);
    });
  }

  async function get(gid, page) {
    try {
      const db  = await openDB();
      const key = gid + "_" + page;
      return new Promise(res => {
        const tx  = db.transaction(ST_NAME, "readwrite");
        const st  = tx.objectStore(ST_NAME);
        const req = st.get(key);
        req.onsuccess = e => {
          const rec = e.target.result;
          if (rec) { rec.ts = Date.now(); st.put(rec); }
          // 返回 { url, info, pageKey }，pageKey 为该页自身的 key（旧缓存兼容空串）
          res(rec ? { url: rec.url, info: rec.info || "", pageKey: rec.pageKey || "" } : null);
        };
        req.onerror = () => res(null);
      });
    } catch(e) { return null; }
  }

  async function put(gid, page, url, info, pageKey) {
    try {
      const db  = await openDB();
      const key = gid + "_" + page;
      return new Promise(res => {
        const tx = db.transaction(ST_NAME, "readwrite");
        const st = tx.objectStore(ST_NAME);
        // url/info/pageKey 一并写入，下次命中时无需额外 fetch
        st.put({ key, url, info: info || "", pageKey: pageKey || "", ts: Date.now() });
        tx.oncomplete = () => evict(db).then(res);
        tx.onerror    = () => res();
      });
    } catch(e) {}
  }

  async function evict(db) {
    const maxRows = Math.max(10, EHR.config.cacheLimit || 500);
    return new Promise(res => {
      const tx  = db.transaction(ST_NAME, "readwrite");
      const st  = tx.objectStore(ST_NAME);
      const idx = st.index("ts");
      const all = [];
      idx.openCursor().onsuccess = e => {
        const cur = e.target.result;
        if (cur) { all.push(cur.value.key); cur.continue(); }
        else {
          const del = all.length - maxRows;
          for (let i = 0; i < del; i++) st.delete(all[i]);
          res();
        }
      };
      tx.onerror = () => res();
    });
  }

  async function getCount() {
    try {
      const db = await openDB();
      return new Promise(res => {
        const tx  = db.transaction(ST_NAME, "readonly");
        const st  = tx.objectStore(ST_NAME);
        const req = st.count();
        req.onsuccess = e => res(e.target.result);
        req.onerror   = () => res(0);
      });
    } catch(e) { return 0; }
  }

  async function remove(gid, page) {
    try {
      const db  = await openDB();
      const key = gid + "_" + page;
      return new Promise(res => {
        const tx = db.transaction(ST_NAME, "readwrite");
        tx.objectStore(ST_NAME).delete(key);
        tx.oncomplete = () => res();
        tx.onerror    = () => res();
      });
    } catch(e) {}
  }

  return { get, put, remove, getCount };
})();

// =================================================
// URL 解析
// =================================================

function parseURL(href) {
  const m = (href || location.href).match(/\/s\/([^/]+)\/(\d+)-(\d+)/);
  if (m) return { key: m[1], gid: m[2], page: Number(m[3]) };
  return { key: "", gid: "", page: 1 };
}

const _cur = parseURL();
EHR.state.gid        = _cur.gid;
EHR.state.startPage  = _cur.page;
EHR.state.startKey   = _cur.key;
EHR.state.activePage = _cur.page;
if (_cur.key) EHR.state.pageKeys.set(_cur.page, _cur.key);

// =================================================
// 从 DOM 采集页码→key 映射
// =================================================

function harvestPageKeys() {
  document.querySelectorAll("a[href]").forEach(a => {
    const m = a.href.match(/\/s\/([^/]+)\/\d+-(\d+)/);
    if (m) {
      const page = Number(m[2]);
      if (!EHR.state.pageKeys.has(page)) EHR.state.pageKeys.set(page, m[1]);
    }
  });
}

// =================================================
// 检测总页数
// =================================================

function detectTotalPages() {
  const sn = document.querySelector(".sn");
  if (sn) {
    const m = sn.textContent.match(/of\s+(\d+)/i);
    if (m) return Number(m[1]);
    const spans = sn.querySelectorAll("span");
    spans.forEach(s => {
      const n = s.textContent.match(/\d+/);
      if (n && Number(n[0]) > 1) EHR.state.totalPages = Math.max(EHR.state.totalPages, Number(n[0]));
    });
    if (EHR.state.totalPages > 1) return EHR.state.totalPages;
  }
  const scripts = document.querySelectorAll("script:not([src])");
  for (const s of scripts) {
    const m = s.textContent.match(/var\s+prl\s*=\s*(\d+)/);
    if (m && Number(m[1]) < 9999) return Number(m[1]);
  }
  return 0;
}

function extractTotalPagesFromDoc(doc) {
  const scripts = doc.querySelectorAll("script:not([src])");
  for (const s of scripts) {
    const m = s.textContent.match(/var\s+prl\s*=\s*(\d+)/);
    if (m && Number(m[1]) < 9999) return Number(m[1]);
  }
  return 0;
}

// =================================================
// 构造页面 URL
// =================================================

function buildPageURL(page) {
  const key = EHR.state.pageKeys.get(page);
  if (!key) return null;
  return `${location.origin}/s/${key}/${EHR.state.gid}-${page}`;
}

// =================================================
// HTTP fetch，带重试
// =================================================

async function fetchDoc(url, retries = 2) {
  for (let i = 0; i <= retries; i++) {
    try {
      const res = await fetch(url, { credentials: "include" });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const text = await res.text();
      const parser = new DOMParser();
      return parser.parseFromString(text, "text/html");
    } catch (e) {
      if (i === retries) return null;
      await new Promise(r => setTimeout(r, 800));
    }
  }
}

// =================================================
// 解析单图页，获取图片URL、文件信息、nl链接、存储相邻页key
// =================================================

async function parsePage(url) {
  const doc = await fetchDoc(url);
  if (!doc) return null;

  // 采集相邻页 key：精确选择器优先，采集不到时降级为全量遍历（兼容改版）
  {
    const EH_LINK_RE = /\/s\/([^/]+)\/\d+-(\d+)/;
    let found = 0;
    // 优先精确选择器
    for (const sel of ["#i3 a[href]", "#i4 a[href]", "#pnp a[href]", "a[onclick*='nl(']"]) {
      doc.querySelectorAll(sel).forEach(a => {
        const m = a.href && a.href.match(EH_LINK_RE);
        if (m) { found++; const pg = Number(m[2]); if (!EHR.state.pageKeys.has(pg)) EHR.state.pageKeys.set(pg, m[1]); }
      });
    }
    // 精确选择器未采集到时，全量遍历兜底
    if (!found) {
      doc.querySelectorAll("a[href]").forEach(a => {
        const m = a.href.match(EH_LINK_RE);
        if (m) { const pg = Number(m[2]); if (!EHR.state.pageKeys.has(pg)) EHR.state.pageKeys.set(pg, m[1]); }
      });
    }
    // key 已写入 pageKeys（相邻页），本页 key 由 resolvePage 在 data.pageKey 里传递
  }

  // 更新总页数
  if (!EHR.state.totalPages) {
    const t = extractTotalPagesFromDoc(doc);
    if (t) EHR.state.totalPages = t;
  }

  // 找图片（多选择器兼容改版）
  const img = doc.querySelector("#img")
    || doc.querySelector("img[id='img']")
    || doc.querySelector("#i3 img")
    || doc.querySelector(".image-container img")
    || doc.querySelector("img[src*='ehgt.org']")
    || doc.querySelector("img[src*='hath.network']")
    || doc.querySelector("img[src*='exhentai.org/t/']")
    || doc.querySelector("img[src*='e-hentai.org/t/']");
  if (!img) return null;
  const imgSrc = img.src || img.dataset.src || img.getAttribute("data-src") || "";
  if (!imgSrc) return null;

  // 提取图片信息文本（原网页 #i2 第二个div 或 #i4 第一个div，格式：filename :: W x H :: size）
  const imgInfo = extractImgInfo(doc);

  return { url: imgSrc, info: imgInfo };
}

// 从文档中提取图片信息字符串（"filename :: W x H :: size"）
// 多层容错，兼容网页改版：依次尝试已知选择器 → 全文正则匹配 → img alt
function extractImgInfo(doc) {
  // 候选选择器（按优先级）：覆盖已知结构及可能的改版
  const candidates = [
    "#i4 > div:first-child",   // 当前主结构
    "#i4 div",                 // i4 下任意 div（改版 first-child 位置变化时）
    "#i2 > div:last-child",    // 旧版结构
    "#i2 div",                 // i2 下任意 div
    ".image-info",             // 可能的新 class 名
    "[data-src] + div",        // 图片后紧跟的 div
    "#img ~ div",              // img 同级 div
  ];
  // 图片信息正则：filename.ext :: WxH :: size（支持 KiB/MiB/KB/MB/B）
  const infoRE = /[\w\-. ]+\.\w{2,5}\s*::\s*\d+\s*x\s*\d+\s*::\s*[\d.,]+\s*[KMGkmg]?i?[Bb]/;

  for (const sel of candidates) {
    try {
      const els = doc.querySelectorAll(sel);
      for (const el of els) {
        const txt = el.textContent.replace(/\s+/g, " ").trim();
        if (infoRE.test(txt)) return txt.match(infoRE)[0];
      }
    } catch(e) {}
  }
  // 全文正则兜底：扫描整个 body 文本
  const bodyTxt = (doc.body || doc.documentElement).textContent.replace(/\s+/g, " ");
  const m = bodyTxt.match(infoRE);
  if (m) return m[0];
  // 最终降级：img alt
  const imgEl = doc.querySelector("#img");
  if (imgEl && imgEl.alt) return imgEl.alt;
  return "";
}

// 从当前页面提取图片信息（第一页，不需要 fetch）复用 extractImgInfo 逻辑
function extractCurrentImgInfo() {
  return extractImgInfo(document);
}

// =================================================
// 并发控制 Semaphore（限制同时 fetch 数，防止网卡时请求堆积）
// =================================================

const _sem = (() => {
  const MAX = 3;
  let _running = 0;
  const _queue = [];
  function next() {
    if (_running >= MAX || !_queue.length) return;
    _running++;
    const { fn, res, rej } = _queue.shift();
    fn().then(v => { _running--; res(v); next(); })
        .catch(e => { _running--; rej(e); next(); });
  }
  return {
    run(fn) {
      return new Promise((res, rej) => { _queue.push({ fn, res, rej }); next(); });
    }
  };
})();

// =================================================
// 解析某页数据（IDB缓存命中 → in-flight去重 → fetch，内存上限）
// =================================================

// in-flight 去重：同一页并发调用共享同一个 Promise，避免重复 fetch
const _inflightMap = new Map();

async function resolvePage(page) {
  // 1. 内存缓存命中
  if (EHR.state.pageData.has(page)) return EHR.state.pageData.get(page);
  // 2. in-flight 去重：同一页已在请求中，直接等待该 Promise
  if (_inflightMap.has(page)) return _inflightMap.get(page);

  // in-flight Promise 必须在 IIFE 启动前注册，防止 await 间隙重入
  let _resolvePromise;
  _resolvePromise = (async () => {
    // 3. 先查 IndexedDB（命中时 url + info 同时返回，零额外 fetch）
    const cached = await EHCache.get(EHR.state.gid, page);
    if (cached && cached.url) {
      // 恢复 pageKey 到 Map，并附加到 data 对象
      if (cached.pageKey && !EHR.state.pageKeys.has(page)) {
        EHR.state.pageKeys.set(page, cached.pageKey);
      }
      const data = { url: cached.url, info: cached.info || "", pageKey: cached.pageKey || "" };
      EHR.state.pageData.set(page, data);
      return data;
    }
    // IDB 记录 url 无效（过期/损坏）时删除，重新 fetch
    if (cached && !cached.url) {
      // 将在下一步重新 fetch，不做特殊处理
    }
    // 4. 需要发现 key 才能构造 URL
    if (!EHR.state.pageKeys.has(page)) await discoverKey(page);
    const url = buildPageURL(page);
    if (!url) return null;
    // 5. 受 Semaphore 限流的 HTML fetch
    const data = await _sem.run(() => parsePage(url));
    if (data) {
      // 把本页的 pageKey 附加到 data，供 createPageBlock onload 时写入 IDB
      data.pageKey = EHR.state.pageKeys.get(page) || "";
      EHR.state.pageData.set(page, data);
      // pageData 超出 cacheLimit*2 时清理最远页，防止内存无限增长
      const maxCache = (EHR.config.cacheLimit || 500) * 2;
      if (EHR.state.pageData.size > maxCache) {
        const cur = EHR.state.activePage;
        const keys = [...EHR.state.pageData.keys()]
          .sort((a, b) => Math.abs(a - cur) - Math.abs(b - cur));
        keys.slice(maxCache).forEach(k => EHR.state.pageData.delete(k));
      }
    }
    return data;
  })();
  _inflightMap.set(page, _resolvePromise);
  try {
    return await _resolvePromise;
  } finally {
    _inflightMap.delete(page);
  }
}

// discoverKey 全局 in-flight 去重（同一目标页只跑一次，节省配额）
const _discoverInflight = new Map();

async function discoverKey(targetPage) {
  if (EHR.state.pageKeys.has(targetPage)) return;
  if (_discoverInflight.has(targetPage)) return _discoverInflight.get(targetPage);
  if (!EHR.state.pageKeys.size) return;

  const p = (async () => {
    let nearest = -1, minDist = Infinity;
    EHR.state.pageKeys.forEach((_, p) => {
      const d = Math.abs(p - targetPage);
      if (d < minDist) { minDist = d; nearest = p; }
    });
    if (nearest === -1) return;
    let cur = nearest;
    const dir = targetPage > nearest ? 1 : -1;
    const steps = Math.abs(targetPage - nearest) + 1;
    for (let i = 0; i < steps; i++) {
      if (EHR.state.pageKeys.has(targetPage)) break;
      const url = buildPageURL(cur);
      if (!url) break;
      await _sem.run(() => parsePage(url));
      cur += dir;
    }
  })();

  _discoverInflight.set(targetPage, p);
  try { await p; } finally { _discoverInflight.delete(targetPage); }
}

// =================================================
// 提取"返回图库预览"链接 href
// =================================================

function extractGalleryBackLink() {
  // 原网页 #i5 > div.sb > a[href*="/g/"] > img[src*="b.png"]
  const imgInSb = document.querySelector("#i5 a[href*='/g/']");
  if (imgInSb) return imgInSb.href;
  // 降级：含 img/b.png 的 <a>
  const bImg = document.querySelector('a[href*="/g/"] img[src*="img/b.png"]');
  if (bImg) return bImg.closest("a").href;
  return "";
}

// =================================================
// 初始化原页面：隐藏导航/按钮/图库链接等，嵌入容器
// =================================================

function patchOriginalPage() {
  // 1. #i2 完整隐藏
  const i2 = document.querySelector("#i2");
  if (i2) i2.style.display = "none";

  // 2. #i4 整体隐藏
  const i4 = document.querySelector("#i4");
  if (i4) i4.style.display = "none";

  // 3. #i5 整体隐藏（返回图库功能由主页悬浮按钮实现）
  const i5 = document.querySelector("#i5");
  if (i5) i5.style.display = "none";

  // 4. #i6 整体隐藏
  const i6 = document.querySelector("#i6");
  if (i6) i6.style.display = "none";

  // 5. #i3：隐藏原来的图片 <a> 包裹，脚本自行渲染
  const i3a = document.querySelector("#i3 > a");
  if (i3a) i3a.style.display = "none";
  const i3img = document.querySelector("#i3 > #img");
  if (i3img) i3img.style.display = "none";

  // 6. 标题 h1（#i1 内）下方增加 padding-bottom: 6px
  const h1 = document.querySelector("#i1 h1");
  if (h1) h1.style.paddingBottom = "6px";

  // 7. 消除 body 的 padding（原网页有 padding:2px 导致图片左右抖动）
  document.body.style.padding = "0";

  // 8. body 可正常滚动
  document.documentElement.style.overflow = "auto";
  document.body.style.overflow = "auto";
}

// =================================================
// 创建阅读器容器：直接插入 #i3 之后，在 #i1 内部
// =================================================

function createReaderContainer() {
  const container = document.createElement("div");
  container.id = "EHR_container";

  // 插入到 #i3 之后（紧跟原图片位置），保持在 #i1 内部
  const i3 = document.querySelector("#i3");
  if (i3 && i3.parentNode) {
    i3.parentNode.insertBefore(container, i3.nextSibling);
  } else {
    const i1 = document.querySelector("#i1");
    if (i1) i1.appendChild(container);
    else document.body.appendChild(container);
  }

  EHR.state.container = container;
  return container;
}

// =================================================
// 把当前页的主图移入容器（第一张）
// =================================================

function moveCurrentImage() {
  const imgEl = document.querySelector("#i3 #img") ||
                document.querySelector("#i3 a > img") ||
                document.querySelector("#img");

  const src  = imgEl ? (imgEl.src || imgEl.dataset.src || "") : "";
  const info = extractCurrentImgInfo();

  if (src) EHR.state.pageData.set(EHR.state.startPage, { url: src, info });

  const box = document.createElement("div");
  box.className = "EHR_page";
  box.dataset.page = EHR.state.startPage;

  // 图片包裹，复用 #i3 的结构概念（直接放 <img>，无额外容器样式）
  const img = new Image();
  img.referrerPolicy = "origin";
  img.src = src;
  img.style.display = "none";
  img.onload = () => {
    img.style.display = "";
    applyImageMode(img);
    observeBlock(box);
  };
  img.onerror = () => {
    img.alt = "当前页图片加载失败";
    img.style.display = "";
  };
  box.appendChild(img);

  // 图片信息行：复用原网页 #i4 > div:first-child 的结构（文本居中，原样式）
  if (EHR.config.showImgInfo && info) {
    const infoDiv = createImgInfoBar(info);
    infoDiv.dataset.infoPage = EHR.state.startPage;
    box.appendChild(infoDiv);
  }

  EHR.state.container.appendChild(box);
  EHR.state.loadedPages.add(EHR.state.startPage);
}

// =================================================
// 图片信息行：复用原网页 #i2 > div:last-child 的节点结构（文本居中，完全继承原样式）
// #i4 已被隐藏，但其节点仍可供克隆；优先用 #i2 最后一个 div
// =================================================

function createImgInfoBar(infoText) {
  // 优先克隆 #i2 > div:last-child（原网页信息行节点，已有居中样式）
  const orig = document.querySelector("#i2 > div:last-child") ||
               document.querySelector("#i4 > div:first-child");
  let div;
  if (orig) {
    div = orig.cloneNode(false); // 只克隆节点本身，不含子内容
    // 保留原节点的所有 class 和内联样式，确保居中等样式完全继承
  } else {
    div = document.createElement("div");
  }
  // 追加 EHR_info_bar 标记 class，用于 refreshInfoBars 选择器
  div.className = (div.className ? div.className + " " : "") + "EHR_info_bar";
  div.textContent = infoText || "";
  div.style.display = EHR.config.showImgInfo ? "" : "none";
  return div;
}

function refreshInfoBars() {
  document.querySelectorAll(".EHR_info_bar").forEach(bar => {
    bar.style.display = EHR.config.showImgInfo ? "" : "none";
  });
}

// =================================================
// 从 URL 提取文件名
// =================================================

function getFilename(url) {
  try {
    return url.split("/").pop().split("?")[0];
  } catch (e) {
    return url;
  }
}

// =================================================
// 加载框 & 失败状态
// =================================================

function createLoadingBox(page) {
  const div = document.createElement("div");
  div.className = "EHR_loading";
  div.innerHTML = `
    <div class="EHR_spinner"></div>
    <span>正在获取第 ${page} 页...</span>
  `;
  return div;
}

function setErrorState(loadingDiv, page, retryFn) {
  loadingDiv.innerHTML = `
    <div class="EHR_err_icon">!</div>
    <span>第 ${page} 页加载失败</span>
  `;
  if (typeof retryFn === "function") {
    const btn = document.createElement("button");
    btn.className = "EHR_retry_btn";
    btn.textContent = "重新加载";
    btn.onclick = () => {
      btn.remove();
      retryFn();
    };
    loadingDiv.appendChild(btn);
  }
}

// =================================================
// 创建页面块
// =================================================

async function createPageBlock(page) {
  if (EHR.state.loadedPages.has(page)) return null;
  if (EHR.state.loadingPages.has(page)) return null;
  EHR.state.loadingPages.add(page);

  const data = await resolvePage(page);
  EHR.state.loadingPages.delete(page);

  if (!data) return null;


  // data 就绪后立即把 pageKey 写入 pageKeys Map（缓存/fetch 路径都生效）
  if (data.pageKey) EHR.state.pageKeys.set(page, data.pageKey);
  // 若此时正在看这一页，立即更新地址栏
  if (page === EHR.state.activePage) applyPageUrl(page);
  const box = document.createElement("div");
  box.className = "EHR_page";
  box.dataset.page = page;
  EHR.state.loadedPages.add(page);

  function startLoad(autoRetries, onImgLoaded) {
    if (autoRetries === undefined) autoRetries = 3;

    box.querySelectorAll("img:not(.EHR_info_bar img)").forEach(i => i.remove());
    box.querySelectorAll(".EHR_loading").forEach(i => i.remove());

    const loadingEl = createLoadingBox(page);
    box.insertBefore(loadingEl, box.querySelector(".EHR_info_bar") || null);

    const img = new Image();
    img.referrerPolicy = "origin";
    img.style.display = "none";
    box.insertBefore(img, loadingEl);

    img.onload = () => {
      loadingEl.remove();
      img.style.display = "";
      applyImageMode(img);
      observeBlock(box);
      // 图片加载成功时把 url + info + pageKey 一起写入 IDB
      EHCache.put(EHR.state.gid, page, data.url, data.info, data.pageKey || "").catch(() => {});
      // 图片加载完成 = 本页 key 已确定，立即更新地址栏（若当前正在看此页）
      if (page === EHR.state.activePage) applyPageUrl(page);
      if (typeof onImgLoaded === "function") onImgLoaded();
    };

    img.onerror = async () => {
      img.remove();
      if (autoRetries > 0) {
        const retryLeft = autoRetries - 1;
        const span = loadingEl.querySelector("span");
        if (span) span.textContent = `正在重新获取第 ${page} 页... (剩余重试 ${retryLeft + 1} 次)`;
        // 清除内存缓存 + IDB 缓存，确保重新 fetch 最新 URL（应对画廊更新/URL 过期）
        EHR.state.pageData.delete(page);
        await EHCache.remove(EHR.state.gid, page);
        const newData = await resolvePage(page);
        if (newData) {
          data.url  = newData.url;
          data.info = newData.info;
          startLoad(retryLeft);
        } else {
          setErrorState(loadingEl, page, () => startLoad(3));
        }
      } else {
        // 3 次自动重试全部耗尽，显示"重新加载"按钮供用户手动触发
        setErrorState(loadingEl, page, () => startLoad(3));
      }
    };

    img.src = data.url;
  }

  // 图片信息行（复用原网页样式，居中文本）——先加 info，再触发图片加载
  if (EHR.config.showImgInfo && data.info) {
    const infoDiv = createImgInfoBar(data.info);
    infoDiv.dataset.infoPage = page;
    box.appendChild(infoDiv);
  }

  startLoad(3, () => {
    // 旧版 IDB 缓存（v1，info 为空）：图片加载后若 data.info 已被 parsePage 填充则补插 infoBar
    if (EHR.config.showImgInfo && data.info && !box.querySelector(".EHR_info_bar")) {
      const infoDiv = createImgInfoBar(data.info);
      infoDiv.dataset.infoPage = page;
      box.appendChild(infoDiv);
    }
  });
  return box;
}


// =================================================
// 向下加载（并发发起，按页码顺序插入 DOM，防止顺序错位）
// =================================================

let _loadingNext = false;

async function loadNextPages() {
  if (_loadingNext) return;
  _loadingNext = true;
  try {
    const loaded = EHR.state.loadedPages;
    if (!loaded.size) return;
    let maxLoaded = 0;
    loaded.forEach(p => { if (p > maxLoaded) maxLoaded = p; });

    const pages = [];
    for (let i = 1; i <= EHR.config.preloadDown; i++) {
      const page = maxLoaded + i;
      if (EHR.state.totalPages && page > EHR.state.totalPages) break;
      if (loaded.has(page) || EHR.state.loadingPages.has(page)) continue;
      pages.push(page);
    }
    if (!pages.length) return;

    // 并发发起，结果附带页码以便排序
    const results = await Promise.all(
      pages.map(page => createPageBlock(page).then(block => ({ page, block })))
    );
    // 按页码升序插入，确保顺序正确
    results.sort((a, b) => a.page - b.page);
    for (const { block } of results) {
      if (block && EHR.state.container) EHR.state.container.appendChild(block);
    }
    cleanMemory();
  } finally {
    _loadingNext = false;
  }
}


// =================================================
// 向上加载（并发发起，按页码降序 prepend，防止顺序错位）
// =================================================

let _loadingPrev = false;

async function loadPreviousPages() {
  if (_loadingPrev) return;
  _loadingPrev = true;
  try {
    const loaded = EHR.state.loadedPages;
    if (!loaded.size) return;
    let minLoaded = Infinity;
    loaded.forEach(p => { if (p < minLoaded) minLoaded = p; });

    const pages = [];
    for (let i = 1; i <= EHR.config.preloadUp; i++) {
      const page = minLoaded - i;
      if (page <= 0) break;
      if (loaded.has(page) || EHR.state.loadingPages.has(page)) continue;
      pages.push(page);
    }
    if (!pages.length) return;

    const results = await Promise.all(
      pages.map(page => createPageBlock(page).then(block => ({ page, block })))
    );
    // 按页码降序 prepend，最小页最终在容器最顶部
    results.sort((a, b) => b.page - a.page);
    for (const { block } of results) {
      if (block && EHR.state.container) EHR.state.container.prepend(block);
    }
    cleanMemory();
  } finally {
    _loadingPrev = false;
  }
}

// =================================================
// 滚动触发（监听 window，容器已是普通文档流）
// =================================================

let _scrollTimer = null;
let _lastScrollY = 0; // 在 setupScrollLoader 里延迟初始化，避免被浏览器 scroll-restore 污染

function setupScrollLoader() {
  function onScroll() {
    if (_scrollTimer) return;
    _scrollTimer = setTimeout(() => {
      _scrollTimer = null;
      const curScrollY = window.scrollY;
      const scrollingUp   = curScrollY < _lastScrollY;
      const scrollingDown = curScrollY > _lastScrollY;
      _lastScrollY = curScrollY;

      const bottom = window.innerHeight + curScrollY;
      const height = document.documentElement.scrollHeight;

      // 向下滚动且距底部不足 1500px：触发向下加载
      if (scrollingDown && height - bottom < 1500) loadNextPages();
      // 向上滚动且距顶部不足 80px：触发向上加载（严格阈值）
      if (scrollingUp && curScrollY < 80) loadPreviousPages();
    }, 200);
  }
  // 延迟 800ms 再开始监听：等浏览器 scroll-restore 完成，避免误触发向上加载
  setTimeout(() => {
    _lastScrollY = window.scrollY; // 以恢复后的真实位置为基准
    window.addEventListener("scroll", onScroll, { passive: true });
  }, 800);
}

// =================================================
// 图片显示引擎
// =================================================

function applyImageMode(img) {
  if (!img) return;
  if (!img.naturalWidth) {
    if (!img.width) { setTimeout(() => applyImageMode(img), 100); return; }
  }

  const nw  = img.naturalWidth  || img.width;
  const nh  = img.naturalHeight || img.height;
  const dpr = window.devicePixelRatio || 1;

  // 屏幕可用物理像素宽（减去滚动条估算 20px，再折算为 CSS px）
  const screenCSSW = (window.innerWidth - 20);
  // 脚本缩放倍率（优先级最高，两种模式都叠加）
  const ratio = EHR.config.scale / 100;

  img.style.removeProperty("width");
  img.style.removeProperty("max-width");
  img.style.removeProperty("height");
  img.style.height         = "auto";
  img.style.display        = "block";
  img.style.margin         = "0 auto";
  img.style.imageRendering = "pixelated";
  img.style.imageRendering = "-moz-crisp-edges";
  img.style.imageRendering = "crisp-edges";

  const container = EHR.state.container;

  if (EHR.config.mode === "pixel") {
    // 像素100%：图片物理像素 ≤ 屏幕物理像素 → 完整显示 CSS 尺寸(nw/dpr)
    //           图片物理像素 > 屏幕物理像素 → 超出部分出横向滚动条
    // 浏览器 zoom 时 dpr 和 innerWidth 同步变化，结果始终正确，无需额外监听
    const cssW = (nw / dpr) * ratio;
    img.style.width    = cssW + "px";
    img.style.maxWidth = "none";
    if (container) container.style.overflowX = "auto";
  } else {
    // 自适应：图片物理像素 ≤ 屏幕物理像素 → 1:1 完整显示（nw/dpr CSS px）
    //         图片物理像素 > 屏幕物理像素 → 缩到屏幕宽（不超出，不出横向滚动条）
    // 浏览器 zoom 时 dpr/innerWidth 同步变化，条件判断始终正确
    let cssW;
    if (nw <= screenCSSW * dpr) {
      cssW = (nw / dpr) * ratio; // 图片不超屏幕：完整显示原始尺寸
    } else {
      cssW = screenCSSW * ratio; // 图片超出屏幕：缩到可视宽
    }
    img.style.width    = cssW + "px";
    img.style.maxWidth = (screenCSSW * ratio) + "px";
    if (container) container.style.overflowX = "hidden";
  }
}

function refreshImages() {
  document.querySelectorAll(".EHR_page img").forEach(img => applyImageMode(img));
}

// 窗口大小变化（含浏览器 zoom）时自动重算
function setupResizeWatcher() {
  let tid = null;
  window.addEventListener("resize", () => {
    clearTimeout(tid);
    tid = setTimeout(refreshImages, 120);
  });
}

// =================================================
// IntersectionObserver：更新当前页 + 地址栏
// =================================================

// 找视口内最靠近顶部的 .EHR_page，返回其 page 编号
function getTopVisiblePage() {
  const blocks = document.querySelectorAll(".EHR_page[data-page]");
  let best = null, bestScore = Infinity;
  blocks.forEach(b => {
    const rect = b.getBoundingClientRect();
    // 只考虑底部在视口内（bottom > 0）且顶部未超过视口底部（top < innerHeight）的图
    if (rect.bottom <= 0 || rect.top >= window.innerHeight) return;
    // score：图片顶部距视口顶部的距离
    // top >= 0：图片在视口内，score = rect.top（越小越靠顶）
    // top < 0：图片上部超出视口，score = rect.top（负数，更优先）
    const score = rect.top;
    if (score < bestScore) { bestScore = score; best = b; }
  });
  return best ? Number(best.dataset.page) : null;
}

let _pageUpdateTimer = null;

function applyPageUrl(page) {
  const key = EHR.state.pageKeys.get(page);
  if (!key || !EHR.state.gid) return;
  const newURL = `${location.origin}/s/${key}/${EHR.state.gid}-${page}`;
  if (location.href !== newURL) history.replaceState(null, "", newURL);
}

function schedulePageUpdate() {
  if (_pageUpdateTimer) return;
  _pageUpdateTimer = setTimeout(() => {
    _pageUpdateTimer = null;
    const page = getTopVisiblePage();
    if (!page) return;
    EHR.state.activePage = page;
    updateProgress();
    applyPageUrl(page);
  }, 150);
}

function setupObserver() {
  // 用 scroll 事件驱动页码同步，不依赖 IntersectionObserver 的批次回调
  window.addEventListener("scroll", schedulePageUpdate, { passive: true });
  // 初始触发一次，确保刚进入页面时页码正确
  setTimeout(schedulePageUpdate, 300);
}

// observeBlock 保留签名兼容性，实际不需要注册 observer
function observeBlock(block) { void block; }

// 位置记忆已移除：浏览器自身会记住滚动位置，刷新后自动恢复

// =================================================
// 内存管理
// =================================================

function cleanMemory() {
  const cur   = EHR.state.activePage;
  const limit = EHR.config.cacheLimit;
  const boxMap = new Map();
  document.querySelectorAll(".EHR_page[data-page]").forEach(b => {
    boxMap.set(Number(b.dataset.page), b);
  });
  EHR.state.loadedPages.forEach(page => {
    // 跳过正在加载中的页，防止干扰进行中的请求
    if (EHR.state.loadingPages.has(page)) return;
    if (Math.abs(page - cur) > limit) {
      const box = boxMap.get(page);
      if (!box) return;
      const img = box.querySelector("img:not([data-src])");
      if (img && img.src && !img.src.startsWith("data:")) {
        img.dataset.src = img.src;
        img.src = "";          // 比 removeAttribute 更彻底释放内存
        img.style.display = "none";
      }
    }
  });
}

function restoreReleasedImages() {
  document.querySelectorAll("img[data-src]").forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top < window.innerHeight * 2) {
      img.onload = () => { img.style.display = "block"; applyImageMode(img); };
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
}

function setupPerformance() {
  let t = null;
  function onPerf() {
    if (t) return;
    t = setTimeout(() => { t = null; restoreReleasedImages(); }, 200);
  }
  window.addEventListener("scroll", onPerf, { passive: true });
  // cleanMemory 改由加载新页后按需触发（见 loadNextPages/loadPreviousPages），
  // 不再用 setInterval 定期全量扫描
}

// =================================================
// 进度显示（右上角，始终可见）
// =================================================

let _progressEl = null;
function createProgress() {
  _progressEl = document.createElement("div");
  _progressEl.id = "EHR_progress";
  _progressEl.textContent = `${EHR.state.startPage} / ?`;
  document.body.appendChild(_progressEl);
}

function updateProgress() {
  if (_progressEl) _progressEl.textContent = `${EHR.state.activePage} / ${EHR.state.totalPages || "?"}`;
}

// =================================================
// 悬浮球
// =================================================

function createFloatBall() {
  // SVG 图标：设置齿轮（下方）
  const svgSettings = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>`;
  // SVG 图标：主页房子（上方）
  const svgHome = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>`;

  // 悬浮球（设置菜单）
  const ball = document.createElement("div");
  ball.id = "EHR_ball";
  ball.innerHTML = svgSettings;
  ball.title = "EH Reader 设置";
  document.body.appendChild(ball);

  ball.addEventListener("mousedown", () => ball.classList.add("EHR_ball_press"));
  ball.addEventListener("mouseup",   () => ball.classList.remove("EHR_ball_press"));
  ball.addEventListener("mouseleave",() => ball.classList.remove("EHR_ball_press"));
  ball.onclick = () => togglePanel();

  // 主页按钮（返回图库预览）——在悬浮球上方
  const homeBtn = document.createElement("div");
  homeBtn.id = "EHR_home_btn";
  homeBtn.innerHTML = svgHome;
  homeBtn.title = "返回图库预览";
  document.body.appendChild(homeBtn);

  homeBtn.addEventListener("mousedown", () => homeBtn.classList.add("EHR_ball_press"));
  homeBtn.addEventListener("mouseup",   () => homeBtn.classList.remove("EHR_ball_press"));
  homeBtn.addEventListener("mouseleave",() => homeBtn.classList.remove("EHR_ball_press"));
  homeBtn.onclick = () => {
    const href = extractGalleryBackLink();
    if (href) location.href = href;
  };

  // 对齐 EhSyringe 悬浮球，并将主页按钮始终保持在设置球上方
  function alignBall() {
    const syringe = document.querySelector("#eh-syringe-popup-button");
    let right = 20, bottom = 20, size = 42, fontSize = 20;
    if (syringe) {
      bottom   = parseFloat(syringe.style.bottom) || 12;
      right    = parseFloat(syringe.style.right)  || 12;
      size     = syringe.offsetHeight || 36;
      fontSize = Math.round(size * 0.5);
    }
    const gap = 8;
    // 设置球
    ball.style.width    = size + "px";
    ball.style.height   = size + "px";
    ball.style.right    = right + "px";
    ball.style.bottom   = (bottom + size + gap) + "px";
    ball.style.fontSize = fontSize + "px";
    // 主页球（在设置球再上方）
    homeBtn.style.width    = size + "px";
    homeBtn.style.height   = size + "px";
    homeBtn.style.right    = right + "px";
    homeBtn.style.bottom   = (bottom + (size + gap) * 2) + "px";
    homeBtn.style.fontSize = (fontSize + 2) + "px"; // ⌂ 略大一点更易辨认
  }

  alignBall();
  const bodyObs = new MutationObserver(() => {
    if (document.querySelector("#eh-syringe-popup-button")) alignBall();
  });
  bodyObs.observe(document.body, { childList: true, subtree: true });
  setTimeout(() => {
    const syringe = document.querySelector("#eh-syringe-popup-button");
    if (syringe) {
      new MutationObserver(alignBall).observe(syringe, { attributes: true, attributeFilter: ["style"] });
    }
  }, 2000);
}

// =================================================
// 设置面板（优化排版，新增图片信息开关）
// =================================================

function togglePanel() {
  const old = document.querySelector("#EHR_panel");
  if (old) { old.remove(); return; }

  const panel = document.createElement("div");
  panel.id = "EHR_panel";
  panel.innerHTML = `
<div class="ehr_panel_title">⚙ EH Reader</div>

<div class="ehr_section">
  <div class="ehr_section_label">显示模式</div>
  <div class="ehr_radio_group">
    <label><input type="radio" name="ehrmode" value="auto"> 自适应</label>
    <label><input type="radio" name="ehrmode" value="pixel"> 像素100%</label>
  </div>
</div>

<div class="ehr_section">
  <div class="ehr_section_label">缩放 <span id="ehr_scale_val">${EHR.config.scale}%</span></div>
  <input id="ehr_scale" type="range" min="25" max="200" step="5" value="${EHR.config.scale}">
</div>

<div class="ehr_section ehr_row_group">
  <div class="ehr_row">
    <span class="ehr_row_label">向上预载</span>
    <input id="ehr_up" type="number" min="1" max="20" value="${EHR.config.preloadUp}">
  </div>
  <div class="ehr_row">
    <span class="ehr_row_label">向下预载</span>
    <input id="ehr_down" type="number" min="1" max="20" value="${EHR.config.preloadDown}">
  </div>
  <div class="ehr_row">
    <span class="ehr_row_label">缓存上限(张)</span>
    <input id="ehr_cache_limit" type="number" min="10" max="1000" step="10" value="${EHR.config.cacheLimit || 500}">
  </div>
</div>

<div class="ehr_section">
  <div class="ehr_section_label">显示图片信息</div>
  <label class="ehr_toggle_label">
    <input type="checkbox" id="ehr_show_info" ${EHR.config.showImgInfo ? "checked" : ""}>
    <span class="ehr_toggle_text">在每张图片下方显示文件名/尺寸/大小</span>
  </label>
</div>

<div class="ehr_section ehr_stats">
  <span>已加载 <b id="ehr_loaded">-</b> 张</span>
  <span>共 <b id="ehr_total">-</b> 页</span>
  <span id="ehr_cache_used" style="font-size:11px;color:#888;">缓存查询中…</span>
</div>

<div class="ehr_btns">
  <button id="ehr_apply">应用并刷新</button>
  <button id="ehr_reset">恢复默认</button>
</div>
`;

  document.body.appendChild(panel);
  positionPanel(panel);

  document.querySelector("#ehr_loaded").textContent = EHR.state.loadedPages.size;
  document.querySelector("#ehr_total").textContent  = EHR.state.totalPages || "?";

  // 显示模式（即时生效）
  document.querySelectorAll("[name=ehrmode]").forEach(r => {
    if (r.value === EHR.config.mode) r.checked = true;
    r.onchange = () => { EHR.config.mode = r.value; saveConfig(); refreshImages(); };
  });

  // 缩放（即时生效）
  document.querySelector("#ehr_scale").oninput = function () {
    EHR.config.scale = Number(this.value);
    document.querySelector("#ehr_scale_val").textContent = this.value + "%";
    saveConfig();
    refreshImages();
  };

  // 图片信息开关（即时生效，无需刷新）
  document.querySelector("#ehr_show_info").onchange = function () {
    EHR.config.showImgInfo = this.checked;
    saveConfig();
    refreshInfoBars();
  };

  // 查询已缓存条目数
  EHCache.getCount().then(count => {
    const el = document.querySelector("#ehr_cache_used");
    if (el) el.textContent = `已缓存 ${count} 张 / 上限 ${EHR.config.cacheLimit || 500} 张`;
  });

  // 应用
  document.querySelector("#ehr_apply").onclick = () => {
    EHR.config.preloadDown = Math.max(1, Number(document.querySelector("#ehr_down").value));
    EHR.config.preloadUp   = Math.max(1, Number(document.querySelector("#ehr_up").value));
    EHR.config.cacheLimit  = Math.max(10, Number(document.querySelector("#ehr_cache_limit").value));
    saveConfig();
    location.reload();
  };

  // 恢复默认
  document.querySelector("#ehr_reset").onclick = () => {
    localStorage.removeItem("EHReader_config");
    location.reload();
  };
}

// 面板定位：对齐悬浮球左侧
function positionPanel(panel) {
  const ball = document.querySelector("#EHR_ball");
  if (ball) {
    const ballRight  = parseFloat(ball.style.right)  || 20;
    const ballBottom = parseFloat(ball.style.bottom) || 20;
    const ballH      = ball.offsetHeight || 42;
    panel.style.right  = ballRight + "px";
    panel.style.bottom = (ballBottom + ballH + 10) + "px";
    panel.style.top    = "auto";
    panel.style.transform = "none";
  }
}

// =================================================
// 热键
// =================================================

function setupHotkeys() {
  document.addEventListener("keydown", e => {
    if (e.target.tagName === "INPUT") return;
    if (e.key === "ArrowRight" || e.key === "d") {
      const box = document.querySelector(`.EHR_page[data-page="${EHR.state.activePage + 1}"]`);
      if (box) box.scrollIntoView({ behavior: "smooth", block: "start" });
    }
    if (e.key === "ArrowLeft" || e.key === "a") {
      const box = document.querySelector(`.EHR_page[data-page="${EHR.state.activePage - 1}"]`);
      if (box) box.scrollIntoView({ behavior: "smooth", block: "start" });
    }
    if (e.key === "Escape") {
      const panel = document.querySelector("#EHR_panel");
      if (panel) panel.remove();
    }
  });
}

// =================================================
// CSS
// =================================================

function addCSS() {
  const css = `
/* ======== 阅读器容器：在 #i1 内部，紧跟 #i3 ======== */
#EHR_container {
  display: block;
  width: 100%;
  /* pixel 模式时由 JS 动态改为 overflow-x: auto */
  overflow-x: hidden;
}

/* ======== 每页块：始终居中，不参与横向溢出决策 ======== */
.EHR_page {
  display: block;
  width: 100%;
  text-align: center;
  overflow-x: visible;
}

/* 图片本身 */
.EHR_page > img {
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 图片信息行：继承原网页样式（居中），下方加 14px 间距 */
.EHR_info_bar {
  display: block;
  text-align: center;
  margin-bottom: 14px;
}

/* ======== 加载框 ======== */
.EHR_loading {
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  gap: 10px;
}

.EHR_spinner {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 3px solid #888;
  border-top-color: transparent;
  animation: EHRspin 1s linear infinite;
}

@keyframes EHRspin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.EHR_err_icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 3px solid #666;
  font-size: 16px;
  font-weight: bold;
  display: flex; align-items: center; justify-content: center;
}

.EHR_retry_btn {
  margin-top: 10px;
  padding: 5px 16px;
  background: #5c5c5c;
  color: #eee;
  border: none;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
}
.EHR_retry_btn:hover {
  background: #7a7a7a;
}

/* ======== 右上角进度 ======== */
#EHR_progress {
  position: fixed;
  right: 20px; top: 12px;
  background: rgba(0, 0, 0, 0.65);
  color: #eee;
  padding: 4px 11px;
  border-radius: 10px;
  z-index: 999999;
  font-size: 13px;
  pointer-events: none;
}

/* ======== 悬浮球（设置）& 主页按钮 ======== */
#EHR_ball, #EHR_home_btn {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 42px; height: 42px;
  background: rgba(40, 40, 40, .55);
  color: rgba(238, 238, 238, .8);
  border-radius: 50%;
  cursor: pointer;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  opacity: 0.5;
  transition: opacity .2s, background .2s, transform .12s, box-shadow .2s;
  box-sizing: border-box;
  padding: 0;
  line-height: 0;
  font-size: 0;
}
/* SVG 图标：强制居中，不继承字体偏移 */
#EHR_ball svg, #EHR_home_btn svg {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}
#EHR_ball:hover, #EHR_home_btn:hover {
  opacity: 1;
  background: rgba(60, 60, 60, .95);
  box-shadow: 0 3px 12px rgba(0,0,0,.6);
}
#EHR_ball.EHR_ball_press, #EHR_home_btn.EHR_ball_press {
  transform: scale(.88);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ======== 设置面板 ======== */
#EHR_panel {
  position: fixed;
  right: 72px;
  bottom: 70px;
  top: auto;
  width: 240px;
  padding: 0;
  background: rgba(22, 22, 22, 0.97);
  color: #e0e0e0;
  border-radius: 12px;
  z-index: 999999;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 6px 24px rgba(0,0,0,.7);
  overflow: hidden;
}

.ehr_panel_title {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  padding: 12px 16px 10px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid #333;
  letter-spacing: 1px;
}

.ehr_section {
  padding: 9px 14px;
  border-bottom: 1px solid #2a2a2a;
}
.ehr_section:last-child { border-bottom: none; }

.ehr_section_label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 5px;
}

.ehr_radio_group {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
.ehr_radio_group label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.ehr_radio_group label input[type=radio] {
  margin: 0;
  vertical-align: middle;
  position: relative;
  top: 0;
}

#EHR_panel input[type=range] {
  width: 100%;
  accent-color: #7a7a7a;
}

.ehr_row_group { display: flex; flex-direction: column; gap: 5px; }
.ehr_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ehr_row_label { font-size: 12px; color: #ccc; }
#EHR_panel input[type=number] {
  width: 64px;
  background: #2c2c2c;
  color: #eee;
  border: 1px solid #444;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 12px;
  text-align: left;
}

.ehr_toggle_label {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.ehr_toggle_text { font-size: 12px; color: #ccc; line-height: 1.4; }
#EHR_panel input[type=checkbox] { margin-top: 2px; accent-color: #9a9a9a; }

.ehr_stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: #999;
  font-size: 12px;
}
.ehr_stats b { color: #ddd; }

.ehr_btns {
  display: flex;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid #2a2a2a;
}
#EHR_panel button {
  flex: 1;
  padding: 6px 0;
  border-radius: 7px;
  border: none;
  background: #3a3a3a;
  color: #ddd;
  cursor: pointer;
  font-size: 12px;
  transition: background .15s;
}
#EHR_panel button:hover { background: #505050; color: #fff; }
#EHR_panel #ehr_apply { background: #4a4a6a; }
#EHR_panel #ehr_apply:hover { background: #5a5a8a; }
`;

  const style = document.createElement("style");
  style.id = "EHR_main_style";
  style.textContent = css;
  document.head.appendChild(style);
}

// =================================================
// 主入口
// =================================================

async function init() {
  console.log("[EHReader] Init v" + EHR.version);

  harvestPageKeys();
  EHR.state.totalPages = detectTotalPages();

  addCSS();
  patchOriginalPage();     // 隐藏#i2导航/.sn，#i4全隐，#i5改文字链接，#i6隐藏
  createReaderContainer(); // 在#i3后插入容器，在#i1内部
  moveCurrentImage();      // 当前页图片插入容器
  createFloatBall();
  createProgress();
  setupObserver();         // scroll 驱动页码 + 地址栏同步
  setupScrollLoader();     // scroll 触发向上/向下预加载
  setupResizeWatcher();    // 浏览器 zoom/resize 时自动重算图片尺寸
  setupPerformance();
  setupHotkeys();

  // 延迟到浏览器 scroll-restore 完成后再触发首次向下预加载
  // （800ms 是 scroll 监听启动时间，900ms 确保顺序正确）
  setTimeout(async () => {
    await loadNextPages();
    updateProgress();
  }, 900);

  console.log("[EHReader] page:", EHR.state.startPage, "total:", EHR.state.totalPages);
}

init();

})();