xin61
3059 lines
111 KiB
JavaScript
3059 lines
111 KiB
JavaScript
let rows = [];
|
||
let filteredRows = [];
|
||
let structure = { chapters: [] };
|
||
let currentIndex = -1;
|
||
let currentRow = null;
|
||
let currentChapter = null;
|
||
let currentPart = null;
|
||
let currentImageItem = null;
|
||
let currentMode = "reading";
|
||
let showTouchedOnly = false;
|
||
let dirty = false;
|
||
let quickDirty = false;
|
||
let hasSession = false;
|
||
let expandedChapters = new Set();
|
||
let sidePanelMode = null;
|
||
let searchScope = "current";
|
||
let gptConfigLoaded = false;
|
||
let gptCandidateHtml = "";
|
||
let glossaryLoaded = false;
|
||
let glossaryEntries = [];
|
||
let glossaryDirty = false;
|
||
let savedReadingPosition = null;
|
||
let restoringReadingPosition = false;
|
||
let readingPositionSaveTimer = null;
|
||
let readingPositionInFlight = false;
|
||
let readingPositionSavePromise = null;
|
||
let pendingReadingPosition = null;
|
||
let readingPositionReady = false;
|
||
let readerSettings = { theme: "default", fontSize: 17, lineHeight: 1.95 };
|
||
let chromeHideTimer = null;
|
||
let chromeResizeObserver = null;
|
||
let chromePointerNearTop = false;
|
||
let translationSessionId = "";
|
||
let translationJobId = "";
|
||
let translationOutputSessionId = "";
|
||
let translationPollTimer = null;
|
||
let translationPromptDefaults = {};
|
||
let librarySessions = [];
|
||
let librarySeries = [];
|
||
let bookshelfFilter = { type: "all", value: "" };
|
||
let bookshelfSearch = "";
|
||
let activeSeriesId = "";
|
||
let activeBookshelfSessionId = "";
|
||
let activeSeriesConfig = null;
|
||
let translationUsesSeriesConfig = false;
|
||
|
||
const READER_SETTINGS_KEY = "epubReviewReaderSettings";
|
||
const READER_THEMES = new Set(["default", "eye", "night"]);
|
||
|
||
const $ = (id) => document.getElementById(id);
|
||
|
||
const dom = {
|
||
startScreen: $("startScreen"),
|
||
bookshelfScreen: $("bookshelfScreen"),
|
||
translationScreen: $("translationScreen"),
|
||
reviewLayout: $("reviewLayout"),
|
||
appVersion: $("appVersion"),
|
||
sessionMeta: $("sessionMeta"),
|
||
bookshelfBtn: $("bookshelfBtn"),
|
||
readingModeBtn: $("readingModeBtn"),
|
||
polishModeBtn: $("polishModeBtn"),
|
||
openLibraryBtn: $("openLibraryBtn"),
|
||
reviewToolsBtn: $("reviewToolsBtn"),
|
||
showTouchedBtn: $("showTouchedBtn"),
|
||
feedbackBtn: $("feedbackBtn"),
|
||
applyBtn: $("applyBtn"),
|
||
exportBtn: $("exportBtn"),
|
||
tocPanelBtn: $("tocPanelBtn"),
|
||
searchPanelBtn: $("searchPanelBtn"),
|
||
sidebar: $("sidebar"),
|
||
sideTitle: $("sideTitle"),
|
||
closeSidebarBtn: $("closeSidebarBtn"),
|
||
tocPanel: $("tocPanel"),
|
||
searchPanel: $("searchPanel"),
|
||
searchInput: $("searchInput"),
|
||
searchScopeCurrentBtn: $("searchScopeCurrentBtn"),
|
||
searchScopeBookBtn: $("searchScopeBookBtn"),
|
||
stats: $("stats"),
|
||
expandTocBtn: $("expandTocBtn"),
|
||
collapseTocBtn: $("collapseTocBtn"),
|
||
toc: $("toc"),
|
||
rowList: $("rowList"),
|
||
readerPane: $("readerPane"),
|
||
editorPane: $("editorPane"),
|
||
chapterKicker: $("chapterKicker"),
|
||
readerTitle: $("readerTitle"),
|
||
readingFlow: $("readingFlow"),
|
||
prevPartBtn: $("prevPartBtn"),
|
||
nextPartBtn: $("nextPartBtn"),
|
||
themeDefaultBtn: $("themeDefaultBtn"),
|
||
themeEyeBtn: $("themeEyeBtn"),
|
||
themeNightBtn: $("themeNightBtn"),
|
||
readerFontSizeInput: $("readerFontSizeInput"),
|
||
readerFontSizeValue: $("readerFontSizeValue"),
|
||
readerLineHeightInput: $("readerLineHeightInput"),
|
||
readerLineHeightValue: $("readerLineHeightValue"),
|
||
emptyState: $("emptyState"),
|
||
editorCard: $("editorCard"),
|
||
rowId: $("rowId"),
|
||
rowPath: $("rowPath"),
|
||
markedInput: $("markedInput"),
|
||
jpText: $("jpText"),
|
||
cnEditor: $("cnEditor"),
|
||
markSelectionBtn: $("markSelectionBtn"),
|
||
clearMarksBtn: $("clearMarksBtn"),
|
||
resetTextBtn: $("resetTextBtn"),
|
||
issueTypeInput: $("issueTypeInput"),
|
||
severityInput: $("severityInput"),
|
||
tagsInput: $("tagsInput"),
|
||
commentInput: $("commentInput"),
|
||
learnNoteInput: $("learnNoteInput"),
|
||
prevBtn: $("prevBtn"),
|
||
saveBtn: $("saveBtn"),
|
||
nextBtn: $("nextBtn"),
|
||
quickEditor: $("quickEditor"),
|
||
quickRowId: $("quickRowId"),
|
||
quickRowPath: $("quickRowPath"),
|
||
quickJpText: $("quickJpText"),
|
||
quickCnEditor: $("quickCnEditor"),
|
||
quickMarkedInput: $("quickMarkedInput"),
|
||
quickIssueTypeInput: $("quickIssueTypeInput"),
|
||
quickSeverityInput: $("quickSeverityInput"),
|
||
quickTagsInput: $("quickTagsInput"),
|
||
quickCommentInput: $("quickCommentInput"),
|
||
quickLearnNoteInput: $("quickLearnNoteInput"),
|
||
closeQuickEditorBtn: $("closeQuickEditorBtn"),
|
||
quickMarkSelectionBtn: $("quickMarkSelectionBtn"),
|
||
quickSaveBtn: $("quickSaveBtn"),
|
||
quickOpenFullBtn: $("quickOpenFullBtn"),
|
||
gptStatus: $("gptStatus"),
|
||
gptConfig: $("gptConfig"),
|
||
gptBaseUrlInput: $("gptBaseUrlInput"),
|
||
gptModelInput: $("gptModelInput"),
|
||
gptApiKeyInput: $("gptApiKeyInput"),
|
||
glossaryPathInput: $("glossaryPathInput"),
|
||
gptTranslationPromptInput: $("gptTranslationPromptInput"),
|
||
gptFormatPromptInput: $("gptFormatPromptInput"),
|
||
gptCharacterPromptInput: $("gptCharacterPromptInput"),
|
||
glossaryMeta: $("glossaryMeta"),
|
||
glossarySearchInput: $("glossarySearchInput"),
|
||
reloadGlossaryBtn: $("reloadGlossaryBtn"),
|
||
addGlossaryEntryBtn: $("addGlossaryEntryBtn"),
|
||
saveGlossaryBtn: $("saveGlossaryBtn"),
|
||
glossaryList: $("glossaryList"),
|
||
saveGptConfigBtn: $("saveGptConfigBtn"),
|
||
resetGptPromptsBtn: $("resetGptPromptsBtn"),
|
||
gptInstructionInput: $("gptInstructionInput"),
|
||
retranslateBtn: $("retranslateBtn"),
|
||
applyRetranslationBtn: $("applyRetranslationBtn"),
|
||
gptCandidate: $("gptCandidate"),
|
||
uploadForm: $("uploadForm"),
|
||
epubFileInput: $("epubFileInput"),
|
||
selectedFileName: $("selectedFileName"),
|
||
uploadBtn: $("uploadBtn"),
|
||
refreshSessionsBtn: $("refreshSessionsBtn"),
|
||
sessionList: $("sessionList"),
|
||
sessionListMeta: $("sessionListMeta"),
|
||
bookshelfRefreshBtn: $("bookshelfRefreshBtn"),
|
||
bookshelfOpenUploadBtn: $("bookshelfOpenUploadBtn"),
|
||
bookshelfOpenUploadBtnInline: $("bookshelfOpenUploadBtnInline"),
|
||
bookshelfTitle: $("bookshelfTitle"),
|
||
bookshelfDescription: $("bookshelfDescription"),
|
||
bookshelfSearchInput: $("bookshelfSearchInput"),
|
||
bookshelfFacetList: $("bookshelfFacetList"),
|
||
seriesConfigBtn: $("seriesConfigBtn"),
|
||
seriesConfigDrawer: $("seriesConfigDrawer"),
|
||
seriesConfigTitle: $("seriesConfigTitle"),
|
||
seriesConfigMeta: $("seriesConfigMeta"),
|
||
closeSeriesConfigBtn: $("closeSeriesConfigBtn"),
|
||
seriesGlossaryPathInput: $("seriesGlossaryPathInput"),
|
||
seriesTranslationPromptInput: $("seriesTranslationPromptInput"),
|
||
seriesFormatPromptInput: $("seriesFormatPromptInput"),
|
||
seriesCharacterPromptInput: $("seriesCharacterPromptInput"),
|
||
saveSeriesConfigBtn: $("saveSeriesConfigBtn"),
|
||
bookshelfMeta: $("bookshelfMeta"),
|
||
bookshelfList: $("bookshelfList"),
|
||
translationBookMeta: $("translationBookMeta"),
|
||
translationBackBookshelfBtn: $("translationBackBookshelfBtn"),
|
||
translationOpenReviewBtn: $("translationOpenReviewBtn"),
|
||
translationForm: $("translationForm"),
|
||
translationSourceMeta: $("translationSourceMeta"),
|
||
translationOutputModeInput: $("translationOutputModeInput"),
|
||
translationRangeModeInput: $("translationRangeModeInput"),
|
||
translationLimitInput: $("translationLimitInput"),
|
||
translationTemperatureInput: $("translationTemperatureInput"),
|
||
translationSample: $("translationSample"),
|
||
translationStats: $("translationStats"),
|
||
translationGptStatus: $("translationGptStatus"),
|
||
translationBaseUrlInput: $("translationBaseUrlInput"),
|
||
translationModelInput: $("translationModelInput"),
|
||
translationApiKeyInput: $("translationApiKeyInput"),
|
||
translationGlossaryPathInput: $("translationGlossaryPathInput"),
|
||
translationSaveConfigBtn: $("translationSaveConfigBtn"),
|
||
translationResetPromptsBtn: $("translationResetPromptsBtn"),
|
||
translationPromptInput: $("translationPromptInput"),
|
||
translationFormatPromptInput: $("translationFormatPromptInput"),
|
||
translationCharacterPromptInput: $("translationCharacterPromptInput"),
|
||
translationStartBtn: $("translationStartBtn"),
|
||
translationJobMeta: $("translationJobMeta"),
|
||
translationProgressBar: $("translationProgressBar"),
|
||
translationProgressText: $("translationProgressText"),
|
||
translationOutput: $("translationOutput"),
|
||
translationLogs: $("translationLogs"),
|
||
toast: $("toast"),
|
||
};
|
||
|
||
function escapeHtml(value) {
|
||
return String(value || "")
|
||
.replaceAll("&", "&")
|
||
.replaceAll("<", "<")
|
||
.replaceAll(">", ">")
|
||
.replaceAll('"', """);
|
||
}
|
||
|
||
function stripTags(value) {
|
||
const div = document.createElement("div");
|
||
div.innerHTML = value || "";
|
||
return div.textContent || div.innerText || "";
|
||
}
|
||
|
||
function toast(message, ms = 3600) {
|
||
dom.toast.textContent = message;
|
||
dom.toast.hidden = false;
|
||
clearTimeout(toast.timer);
|
||
toast.timer = setTimeout(() => {
|
||
dom.toast.hidden = true;
|
||
}, ms);
|
||
}
|
||
|
||
async function api(path, options = {}) {
|
||
const response = await fetch(path, {
|
||
headers: { "Content-Type": "application/json", ...(options.headers || {}) },
|
||
...options,
|
||
});
|
||
const data = await response.json().catch(() => ({}));
|
||
if (!response.ok) {
|
||
throw new Error(data.error || `HTTP ${response.status}`);
|
||
}
|
||
return data;
|
||
}
|
||
|
||
async function apiForm(path, formData) {
|
||
const response = await fetch(path, {
|
||
method: "POST",
|
||
body: formData,
|
||
});
|
||
const data = await response.json().catch(() => ({}));
|
||
if (!response.ok) {
|
||
throw new Error(data.error || `HTTP ${response.status}`);
|
||
}
|
||
return data;
|
||
}
|
||
|
||
function rowTouched(row) {
|
||
return Boolean(row.edited || row.marked || row.comment || row.learn_note || row.issue_type || row.severity || row.tags);
|
||
}
|
||
|
||
function clampNumber(value, min, max, fallback) {
|
||
const parsed = Number(value);
|
||
if (!Number.isFinite(parsed)) return fallback;
|
||
return Math.min(max, Math.max(min, parsed));
|
||
}
|
||
|
||
function readStoredReaderSettings() {
|
||
try {
|
||
const stored = JSON.parse(localStorage.getItem(READER_SETTINGS_KEY) || "{}");
|
||
readerSettings = {
|
||
theme: READER_THEMES.has(stored.theme) ? stored.theme : "default",
|
||
fontSize: clampNumber(stored.fontSize, 15, 24, 17),
|
||
lineHeight: clampNumber(stored.lineHeight, 1.6, 2.4, 1.95),
|
||
};
|
||
} catch (_error) {
|
||
readerSettings = { theme: "default", fontSize: 17, lineHeight: 1.95 };
|
||
}
|
||
}
|
||
|
||
function persistReaderSettings() {
|
||
try {
|
||
localStorage.setItem(READER_SETTINGS_KEY, JSON.stringify(readerSettings));
|
||
} catch (_error) {
|
||
// Browser storage can be unavailable in restricted contexts; reading still works.
|
||
}
|
||
}
|
||
|
||
function applyReaderSettings(save = false) {
|
||
document.body.dataset.readerTheme = readerSettings.theme;
|
||
document.documentElement.style.setProperty("--reader-font-size", `${readerSettings.fontSize}px`);
|
||
document.documentElement.style.setProperty("--reader-line-height", readerSettings.lineHeight.toFixed(2));
|
||
[
|
||
dom.themeDefaultBtn,
|
||
dom.themeEyeBtn,
|
||
dom.themeNightBtn,
|
||
].forEach((button) => {
|
||
if (!button) return;
|
||
const active = button.dataset.readerTheme === readerSettings.theme;
|
||
button.classList.toggle("active", active);
|
||
button.setAttribute("aria-pressed", active ? "true" : "false");
|
||
});
|
||
if (dom.readerFontSizeInput) dom.readerFontSizeInput.value = String(readerSettings.fontSize);
|
||
if (dom.readerFontSizeValue) dom.readerFontSizeValue.textContent = String(readerSettings.fontSize);
|
||
if (dom.readerLineHeightInput) dom.readerLineHeightInput.value = readerSettings.lineHeight.toFixed(2);
|
||
if (dom.readerLineHeightValue) dom.readerLineHeightValue.textContent = readerSettings.lineHeight.toFixed(2);
|
||
if (save) persistReaderSettings();
|
||
}
|
||
|
||
function setReaderTheme(theme) {
|
||
if (!READER_THEMES.has(theme)) return;
|
||
withReaderAnchor(() => {
|
||
readerSettings.theme = theme;
|
||
applyReaderSettings(true);
|
||
});
|
||
}
|
||
|
||
function setReaderFontSize(value) {
|
||
withReaderAnchor(() => {
|
||
readerSettings.fontSize = Math.round(clampNumber(value, 15, 24, 17));
|
||
applyReaderSettings(true);
|
||
});
|
||
}
|
||
|
||
function setReaderLineHeight(value) {
|
||
withReaderAnchor(() => {
|
||
readerSettings.lineHeight = clampNumber(value, 1.6, 2.4, 1.95);
|
||
applyReaderSettings(true);
|
||
});
|
||
}
|
||
|
||
function showChromeBriefly() {
|
||
document.body.classList.add("chromeVisible");
|
||
clearTimeout(chromeHideTimer);
|
||
chromeHideTimer = setTimeout(() => {
|
||
if (
|
||
chromePointerNearTop
|
||
|| document.querySelector(".topbar:hover, .topbar:focus-within, .readerHeader:hover, .readerHeader:focus-within")
|
||
) {
|
||
showChromeBriefly();
|
||
return;
|
||
}
|
||
document.body.classList.remove("chromeVisible");
|
||
}, 1600);
|
||
}
|
||
|
||
function updateChromeVisibility(event) {
|
||
if (!hasSession || document.body.classList.contains("startOpen")) {
|
||
chromePointerNearTop = false;
|
||
document.body.classList.remove("chromeVisible");
|
||
return;
|
||
}
|
||
chromePointerNearTop = event.clientY <= 104;
|
||
if (chromePointerNearTop) {
|
||
showChromeBriefly();
|
||
}
|
||
}
|
||
|
||
function syncChromeMetrics() {
|
||
const topbar = document.querySelector(".topbar");
|
||
if (!topbar) return;
|
||
const height = Math.max(0, Math.round(topbar.getBoundingClientRect().height || 0));
|
||
if (height) document.documentElement.style.setProperty("--topbar-live-height", `${height}px`);
|
||
}
|
||
|
||
function initChromeMetrics() {
|
||
syncChromeMetrics();
|
||
window.addEventListener("resize", syncChromeMetrics);
|
||
if ("ResizeObserver" in window) {
|
||
chromeResizeObserver = new ResizeObserver(syncChromeMetrics);
|
||
const topbar = document.querySelector(".topbar");
|
||
if (topbar) chromeResizeObserver.observe(topbar);
|
||
}
|
||
}
|
||
|
||
function readerViewportTop(paneRect) {
|
||
const header = document.querySelector(".readerHeader");
|
||
if (!header) return paneRect.top + 8;
|
||
const headerRect = header.getBoundingClientRect();
|
||
const headerVisible = Number.parseFloat(getComputedStyle(header).opacity || "0") > 0.05;
|
||
return headerVisible && headerRect.bottom > paneRect.top
|
||
? headerRect.bottom + 8
|
||
: paneRect.top + 8;
|
||
}
|
||
|
||
function readerAnchor() {
|
||
if (currentMode !== "reading" || !dom.readerPane || dom.readerPane.hidden) return null;
|
||
const paneRect = dom.readerPane.getBoundingClientRect();
|
||
const top = readerViewportTop(paneRect);
|
||
const blocks = Array.from(dom.readingFlow.querySelectorAll("[data-row-id]"));
|
||
if (!blocks.length) {
|
||
return { rowId: "", offset: 0, scrollTop: dom.readerPane.scrollTop };
|
||
}
|
||
let target = blocks[0];
|
||
for (const block of blocks) {
|
||
const rect = block.getBoundingClientRect();
|
||
if (rect.bottom >= top) {
|
||
target = block;
|
||
break;
|
||
}
|
||
}
|
||
return {
|
||
rowId: target.dataset.rowId || "",
|
||
offset: target.getBoundingClientRect().top - paneRect.top,
|
||
scrollTop: dom.readerPane.scrollTop,
|
||
};
|
||
}
|
||
|
||
function restoreReaderAnchor(anchor) {
|
||
if (!anchor || currentMode !== "reading") return;
|
||
requestAnimationFrame(() => {
|
||
requestAnimationFrame(() => {
|
||
if (!anchor.rowId) {
|
||
dom.readerPane.scrollTop = anchor.scrollTop || 0;
|
||
return;
|
||
}
|
||
const target = dom.readingFlow.querySelector(`[data-row-id="${CSS.escape(anchor.rowId)}"]`);
|
||
if (!target) {
|
||
dom.readerPane.scrollTop = anchor.scrollTop || 0;
|
||
return;
|
||
}
|
||
const paneRect = dom.readerPane.getBoundingClientRect();
|
||
const nextOffset = target.getBoundingClientRect().top - paneRect.top;
|
||
dom.readerPane.scrollTop += nextOffset - anchor.offset;
|
||
});
|
||
});
|
||
}
|
||
|
||
function withReaderAnchor(action) {
|
||
const anchor = readerAnchor();
|
||
const result = action();
|
||
restoreReaderAnchor(anchor);
|
||
return result;
|
||
}
|
||
|
||
function imageItemById(chapter, imageItemId) {
|
||
if (!chapter || !imageItemId) return null;
|
||
return chapterItems(chapter).find((item) => isImageItem(item) && item.id === imageItemId) || null;
|
||
}
|
||
|
||
function currentReadingPosition() {
|
||
const anchor = readerAnchor();
|
||
const chapter = currentChapter || chapterForPart(currentPart);
|
||
const scope = currentImageItem ? "image" : currentPart ? "part" : chapter ? "chapter" : "none";
|
||
return {
|
||
mode: currentMode,
|
||
scope,
|
||
chapter_id: chapter ? chapter.id : "",
|
||
part_id: currentPart ? currentPart.id : "",
|
||
image_item_id: currentImageItem ? currentImageItem.id : "",
|
||
row_id: (anchor && anchor.rowId) || (currentRow && currentRow.id) || "",
|
||
scroll_top: dom.readerPane ? Math.max(0, Math.round(dom.readerPane.scrollTop || 0)) : 0,
|
||
offset: anchor ? Math.max(0, Math.round(anchor.offset || 0)) : 0,
|
||
updated_at: new Date().toISOString(),
|
||
};
|
||
}
|
||
|
||
async function postReadingPosition(position) {
|
||
await api("/api/reading-position", {
|
||
method: "POST",
|
||
body: JSON.stringify(position),
|
||
});
|
||
}
|
||
|
||
async function saveReadingPositionNow(position) {
|
||
readingPositionInFlight = true;
|
||
const promise = postReadingPosition(position);
|
||
readingPositionSavePromise = promise;
|
||
try {
|
||
await promise;
|
||
savedReadingPosition = position;
|
||
} catch (_error) {
|
||
pendingReadingPosition = position;
|
||
} finally {
|
||
if (readingPositionSavePromise === promise) readingPositionSavePromise = null;
|
||
readingPositionInFlight = false;
|
||
if (pendingReadingPosition) saveReadingPositionSoon();
|
||
}
|
||
}
|
||
|
||
function saveReadingPositionSoon() {
|
||
if (!hasSession || !readingPositionReady || restoringReadingPosition) return;
|
||
const position = currentReadingPosition();
|
||
pendingReadingPosition = position;
|
||
clearTimeout(readingPositionSaveTimer);
|
||
readingPositionSaveTimer = setTimeout(async () => {
|
||
if (readingPositionInFlight || !pendingReadingPosition) return;
|
||
const next = pendingReadingPosition;
|
||
pendingReadingPosition = null;
|
||
await saveReadingPositionNow(next);
|
||
}, 650);
|
||
}
|
||
|
||
async function flushReadingPosition() {
|
||
if (!hasSession || !readingPositionReady || restoringReadingPosition) return;
|
||
clearTimeout(readingPositionSaveTimer);
|
||
if (readingPositionSavePromise) {
|
||
await readingPositionSavePromise.catch(() => {});
|
||
}
|
||
const position = pendingReadingPosition || currentReadingPosition();
|
||
pendingReadingPosition = null;
|
||
await saveReadingPositionNow(position);
|
||
}
|
||
|
||
function sendReadingPositionBeacon() {
|
||
if (!hasSession || !readingPositionReady || restoringReadingPosition || !navigator.sendBeacon) return;
|
||
const blob = new Blob([JSON.stringify(currentReadingPosition())], { type: "application/json" });
|
||
navigator.sendBeacon("/api/reading-position", blob);
|
||
}
|
||
|
||
function openSidePanel(mode) {
|
||
if (!hasSession) return;
|
||
sidePanelMode = mode;
|
||
dom.sidebar.hidden = false;
|
||
dom.tocPanel.hidden = mode !== "toc";
|
||
dom.searchPanel.hidden = mode !== "search";
|
||
dom.sideTitle.textContent = mode === "search" ? "检索" : "目录";
|
||
dom.tocPanelBtn.classList.toggle("active", mode === "toc");
|
||
dom.searchPanelBtn.classList.toggle("active", mode === "search");
|
||
document.body.classList.add("sidebarOpen");
|
||
if (mode === "search") {
|
||
requestAnimationFrame(() => dom.searchInput.focus());
|
||
}
|
||
}
|
||
|
||
function closeSidePanel() {
|
||
sidePanelMode = null;
|
||
if (dom.sidebar) dom.sidebar.hidden = true;
|
||
if (dom.tocPanel) dom.tocPanel.hidden = true;
|
||
if (dom.searchPanel) dom.searchPanel.hidden = true;
|
||
document.body.classList.remove("sidebarOpen");
|
||
if (dom.tocPanelBtn) dom.tocPanelBtn.classList.remove("active");
|
||
if (dom.searchPanelBtn) dom.searchPanelBtn.classList.remove("active");
|
||
}
|
||
|
||
function resetReviewState() {
|
||
rows = [];
|
||
filteredRows = [];
|
||
structure = { chapters: [] };
|
||
currentIndex = -1;
|
||
currentRow = null;
|
||
currentChapter = null;
|
||
currentPart = null;
|
||
currentImageItem = null;
|
||
showTouchedOnly = false;
|
||
dirty = false;
|
||
quickDirty = false;
|
||
expandedChapters = new Set();
|
||
sidePanelMode = null;
|
||
searchScope = "current";
|
||
gptCandidateHtml = "";
|
||
gptConfigLoaded = false;
|
||
glossaryLoaded = false;
|
||
glossaryEntries = [];
|
||
glossaryDirty = false;
|
||
savedReadingPosition = null;
|
||
restoringReadingPosition = false;
|
||
pendingReadingPosition = null;
|
||
readingPositionInFlight = false;
|
||
readingPositionSavePromise = null;
|
||
readingPositionReady = false;
|
||
clearTimeout(readingPositionSaveTimer);
|
||
readingPositionSaveTimer = null;
|
||
dom.showTouchedBtn.classList.remove("primary");
|
||
dom.searchScopeCurrentBtn.classList.add("active");
|
||
dom.searchScopeBookBtn.classList.remove("active");
|
||
dom.searchInput.value = "";
|
||
if (dom.glossarySearchInput) dom.glossarySearchInput.value = "";
|
||
if (dom.glossaryList) dom.glossaryList.innerHTML = "";
|
||
if (dom.glossaryMeta) dom.glossaryMeta.textContent = "未读取术语表";
|
||
dom.sidebar.hidden = true;
|
||
dom.tocPanel.hidden = true;
|
||
dom.searchPanel.hidden = true;
|
||
dom.tocPanelBtn.classList.remove("active");
|
||
dom.searchPanelBtn.classList.remove("active");
|
||
if (dom.quickEditor) {
|
||
dom.quickEditor.hidden = true;
|
||
}
|
||
document.body.classList.remove("quickOpen");
|
||
if (dom.reviewToolsBtn) dom.reviewToolsBtn.classList.remove("active");
|
||
}
|
||
|
||
function closeReviewPanels() {
|
||
closeSidePanel();
|
||
if (dom.quickEditor) dom.quickEditor.hidden = true;
|
||
if (dom.reviewToolsBtn) dom.reviewToolsBtn.classList.remove("active");
|
||
document.body.classList.remove("quickOpen");
|
||
}
|
||
|
||
function clearTranslationPoll() {
|
||
if (translationPollTimer) {
|
||
clearTimeout(translationPollTimer);
|
||
translationPollTimer = null;
|
||
}
|
||
}
|
||
|
||
function setShellMode(active) {
|
||
hasSession = active;
|
||
document.body.classList.remove("bookshelfOpen");
|
||
document.body.classList.remove("translationOpen");
|
||
if (dom.bookshelfBtn) dom.bookshelfBtn.classList.remove("active");
|
||
dom.startScreen.hidden = active;
|
||
if (active && dom.bookshelfScreen) dom.bookshelfScreen.hidden = true;
|
||
if (active && dom.translationScreen) dom.translationScreen.hidden = true;
|
||
dom.reviewLayout.hidden = !active;
|
||
dom.readingModeBtn.disabled = !active;
|
||
dom.polishModeBtn.disabled = !active;
|
||
dom.bookshelfBtn.disabled = false;
|
||
dom.openLibraryBtn.disabled = false;
|
||
dom.reviewToolsBtn.disabled = !active;
|
||
dom.showTouchedBtn.disabled = !active;
|
||
dom.feedbackBtn.disabled = !active;
|
||
dom.applyBtn.disabled = !active;
|
||
dom.exportBtn.disabled = !active;
|
||
dom.tocPanelBtn.disabled = !active;
|
||
dom.searchPanelBtn.disabled = !active;
|
||
dom.closeSidebarBtn.disabled = !active;
|
||
dom.expandTocBtn.disabled = !active;
|
||
dom.collapseTocBtn.disabled = !active;
|
||
document.body.classList.toggle("startOpen", !active);
|
||
document.body.classList.remove("chromeVisible");
|
||
if (!active) closeSidePanel();
|
||
if (!active) {
|
||
dom.sessionMeta.textContent = "未打开 EPUB";
|
||
}
|
||
}
|
||
|
||
async function leaveReviewShell() {
|
||
if (!hasSession) return true;
|
||
if (!(await maybeSaveBeforeSwitch())) return false;
|
||
await flushReadingPosition().catch(() => {});
|
||
closeReviewPanels();
|
||
return true;
|
||
}
|
||
|
||
function setVersionBadge(value) {
|
||
if (!value) return;
|
||
dom.appVersion.textContent = `v${value}`;
|
||
}
|
||
|
||
function formatDateTime(value) {
|
||
if (!value) return "";
|
||
const date = new Date(value);
|
||
if (Number.isNaN(date.getTime())) return value;
|
||
return date.toLocaleString("zh-CN", { hour12: false });
|
||
}
|
||
|
||
function bookTitle(session) {
|
||
return session.title || (session.metadata && session.metadata.title) || session.source_name || session.id || "未命名书籍";
|
||
}
|
||
|
||
function bookSeries(session) {
|
||
return session.series || (session.metadata && session.metadata.series) || "未分类";
|
||
}
|
||
|
||
function bookSeriesId(session) {
|
||
return session.series_id || (session.metadata && session.metadata.series_id) || "uncategorized";
|
||
}
|
||
|
||
function seriesTitleById(seriesId) {
|
||
const item = (librarySeries || []).find((series) => series.id === seriesId);
|
||
return item ? item.title : seriesId || "未分类";
|
||
}
|
||
|
||
function bookAuthors(session) {
|
||
return Array.isArray(session.authors) ? session.authors : [];
|
||
}
|
||
|
||
function formatBookSubtitle(session) {
|
||
const parts = [];
|
||
const authors = bookAuthors(session);
|
||
if (authors.length) parts.push(authors.join(" / "));
|
||
if (session.publisher) parts.push(session.publisher);
|
||
if (session.volume) parts.push(`第 ${session.volume} 卷`);
|
||
return parts.join(" · ") || bookSeries(session);
|
||
}
|
||
|
||
function matchesBookshelfSearch(session) {
|
||
const query = bookshelfSearch.trim().toLowerCase();
|
||
if (!query) return true;
|
||
const haystack = [
|
||
bookTitle(session),
|
||
bookSeries(session),
|
||
...(bookAuthors(session)),
|
||
session.publisher || "",
|
||
session.source_name || "",
|
||
].join(" ").toLowerCase();
|
||
return haystack.includes(query);
|
||
}
|
||
|
||
function sessionMatchesFilter(session) {
|
||
if (!matchesBookshelfSearch(session)) return false;
|
||
if (bookshelfFilter.type === "series") return bookSeriesId(session) === bookshelfFilter.value;
|
||
if (bookshelfFilter.type === "author") return bookAuthors(session).includes(bookshelfFilter.value);
|
||
if (bookshelfFilter.type === "publisher") return (session.publisher || "未填写") === bookshelfFilter.value;
|
||
if (bookshelfFilter.type === "language") return (session.language || "未知") === bookshelfFilter.value;
|
||
return true;
|
||
}
|
||
|
||
function facetCountMap(sessions, getter) {
|
||
const map = new Map();
|
||
sessions.forEach((session) => {
|
||
const values = getter(session);
|
||
(Array.isArray(values) ? values : [values]).forEach((value) => {
|
||
const key = value || "未填写";
|
||
map.set(key, (map.get(key) || 0) + 1);
|
||
});
|
||
});
|
||
return [...map.entries()].sort((a, b) => b[1] - a[1] || String(a[0]).localeCompare(String(b[0]), "zh-CN"));
|
||
}
|
||
|
||
function setBookshelfFilter(type, value = "") {
|
||
bookshelfFilter = { type, value };
|
||
renderBookshelfFromState(activeBookshelfSessionId);
|
||
}
|
||
|
||
function renderSessions(sessions = [], activeId = "") {
|
||
dom.sessionList.innerHTML = "";
|
||
dom.sessionListMeta.textContent = sessions.length ? `${sessions.length} 个会话` : "暂无会话";
|
||
if (!sessions.length) {
|
||
dom.sessionList.innerHTML = '<div class="emptySession">还没有审校会话。上传 EPUB 后会自动创建。</div>';
|
||
return;
|
||
}
|
||
const frag = document.createDocumentFragment();
|
||
sessions.forEach((session) => {
|
||
const card = document.createElement("article");
|
||
card.className = "sessionItem";
|
||
if (session.id === activeId) card.classList.add("active");
|
||
card.innerHTML = `
|
||
<div class="sessionInfo">
|
||
<h3>${escapeHtml(session.source_name || session.id)}</h3>
|
||
<p>${escapeHtml(session.session_root || "")}</p>
|
||
<div class="sessionFacts">
|
||
<span>${session.row_count || 0} 段</span>
|
||
<span>记录 ${session.touched_count || 0}</span>
|
||
<span>标记 ${session.marked_count || 0}</span>
|
||
${session.updated_at ? `<span>${escapeHtml(formatDateTime(session.updated_at))}</span>` : ""}
|
||
</div>
|
||
</div>
|
||
<button type="button" data-session-id="${escapeHtml(session.id)}">${session.id === activeId ? "继续审校" : "打开"}</button>
|
||
`;
|
||
card.querySelector("button").addEventListener("click", () => openSession(session.id));
|
||
frag.appendChild(card);
|
||
});
|
||
dom.sessionList.appendChild(frag);
|
||
}
|
||
|
||
async function refreshSessions() {
|
||
const data = await api("/api/sessions");
|
||
setVersionBadge(data.version);
|
||
renderSessions(data.sessions || [], data.active_session_id || "");
|
||
return data;
|
||
}
|
||
|
||
function readingPositionLabel(position = {}) {
|
||
if (!position || !position.scope || position.scope === "none") return "尚无阅读记录";
|
||
if (position.scope === "image") return "上次阅读：插图";
|
||
if (position.part_id) return `上次阅读：${position.part_id}`;
|
||
if (position.chapter_id) return `上次阅读：${position.chapter_id}`;
|
||
if (position.row_id) return `上次阅读：${position.row_id}`;
|
||
return "已有阅读记录";
|
||
}
|
||
|
||
function renderBookshelf(sessions = [], activeId = "") {
|
||
librarySessions = sessions || [];
|
||
activeBookshelfSessionId = activeId || activeBookshelfSessionId || "";
|
||
renderBookshelfFromState(activeId);
|
||
}
|
||
|
||
function renderBookshelfFacets(sessions) {
|
||
if (!dom.bookshelfFacetList) return;
|
||
const authorCount = facetCountMap(sessions, (session) => bookAuthors(session));
|
||
const publisherCount = facetCountMap(sessions, (session) => session.publisher || "未填写");
|
||
const languageCount = facetCountMap(sessions, (session) => session.language || "未知");
|
||
const seriesItems = (librarySeries || []).map((item) => [item.title, item.count, item.id]);
|
||
const activeKey = `${bookshelfFilter.type}:${bookshelfFilter.value}`;
|
||
|
||
function group(title, items, type, limit = 12) {
|
||
const rows = items.slice(0, limit).map((item) => {
|
||
const label = item[0];
|
||
const count = item[1];
|
||
const value = item[2] || label;
|
||
const key = `${type}:${value}`;
|
||
return `
|
||
<button class="facetButton ${activeKey === key ? "active" : ""}" type="button" data-facet-type="${escapeHtml(type)}" data-facet-value="${escapeHtml(value)}">
|
||
<span>${escapeHtml(label)}</span>
|
||
<b>${count}</b>
|
||
</button>
|
||
`;
|
||
}).join("");
|
||
return `
|
||
<section class="facetGroup">
|
||
<div class="facetGroupTitle">${escapeHtml(title)}</div>
|
||
${rows || '<div class="facetEmpty">暂无</div>'}
|
||
</section>
|
||
`;
|
||
}
|
||
|
||
dom.bookshelfFacetList.innerHTML = `
|
||
<button class="facetButton primaryFacet ${bookshelfFilter.type === "all" ? "active" : ""}" type="button" data-facet-type="all" data-facet-value="">
|
||
<span>全部书籍</span>
|
||
<b>${sessions.length}</b>
|
||
</button>
|
||
${group("同系列", seriesItems, "series", 18)}
|
||
${group("作者", authorCount, "author", 10)}
|
||
${group("出版社", publisherCount, "publisher", 10)}
|
||
${group("语言", languageCount, "language", 8)}
|
||
`;
|
||
dom.bookshelfFacetList.querySelectorAll("[data-facet-type]").forEach((button) => {
|
||
button.addEventListener("click", () => {
|
||
setBookshelfFilter(button.dataset.facetType || "all", button.dataset.facetValue || "");
|
||
});
|
||
});
|
||
}
|
||
|
||
function renderBookshelfFromState(activeId = "") {
|
||
dom.bookshelfList.innerHTML = "";
|
||
const sessions = librarySessions || [];
|
||
renderBookshelfFacets(sessions);
|
||
const filtered = sessions.filter(sessionMatchesFilter);
|
||
const filterText = bookshelfFilter.type === "all"
|
||
? "全部书籍"
|
||
: bookshelfFilter.type === "series"
|
||
? seriesTitleById(bookshelfFilter.value)
|
||
: bookshelfFilter.value || "筛选结果";
|
||
activeSeriesId = bookshelfFilter.type === "series" ? bookshelfFilter.value : "";
|
||
dom.bookshelfTitle.textContent = filterText;
|
||
dom.bookshelfDescription.textContent = activeSeriesId
|
||
? "同系列书籍可以共用翻译提示词、角色口吻和术语表。"
|
||
: "按 EPUB 元数据建立书架，封面悬停可直接进入审校或翻译。";
|
||
if (dom.seriesConfigBtn) {
|
||
dom.seriesConfigBtn.disabled = !activeSeriesId;
|
||
}
|
||
dom.bookshelfMeta.textContent = sessions.length
|
||
? `显示 ${filtered.length} / ${sessions.length} 本 · ${librarySeries.length || 0} 个系列`
|
||
: "暂无历史书籍";
|
||
if (!sessions.length) {
|
||
dom.bookshelfList.innerHTML = `
|
||
<div class="emptyBookshelf">
|
||
<h3>书架还是空的</h3>
|
||
<p>上传第一本中日双语 EPUB 后，它会出现在这里，之后可以直接回到上次阅读位置。</p>
|
||
<button type="button" class="primary" data-bookshelf-upload>打开新的 EPUB</button>
|
||
</div>
|
||
`;
|
||
dom.bookshelfList.querySelector("[data-bookshelf-upload]").addEventListener("click", () => showStartScreen());
|
||
return;
|
||
}
|
||
if (!filtered.length) {
|
||
dom.bookshelfList.innerHTML = `
|
||
<div class="emptyBookshelf">
|
||
<h3>没有匹配书籍</h3>
|
||
<p>换个分类或搜索词试试。</p>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
const frag = document.createDocumentFragment();
|
||
filtered.forEach((session) => {
|
||
const card = document.createElement("article");
|
||
card.className = "bookshelfItem";
|
||
card.tabIndex = 0;
|
||
if (session.id === activeId) card.classList.add("active");
|
||
const title = bookTitle(session);
|
||
const updatedAt = session.updated_at || session.created_at;
|
||
const initial = String(title || "").trim().slice(0, 1) || "书";
|
||
const coverUrl = session.cover_url || "";
|
||
const subtitle = formatBookSubtitle(session);
|
||
card.innerHTML = `
|
||
<div class="bookCover">
|
||
${coverUrl ? `<img src="${escapeHtml(coverUrl)}" alt="">` : `<div class="bookSpine">${escapeHtml(initial)}</div>`}
|
||
<div class="bookOverlay">
|
||
<h3>${escapeHtml(title)}</h3>
|
||
<p>${escapeHtml(subtitle)}</p>
|
||
<div class="bookFacts overlayFacts">
|
||
<span>${session.row_count || 0} 审校段</span>
|
||
<span>${session.volume ? `第 ${escapeHtml(session.volume)} 卷` : escapeHtml(session.language || "未知语言")}</span>
|
||
${updatedAt ? `<span>${escapeHtml(formatDateTime(updatedAt))}</span>` : ""}
|
||
</div>
|
||
<div class="bookActions">
|
||
<button type="button" data-open-review>${session.id === activeId ? "继续校对" : "校对"}</button>
|
||
<button type="button" data-open-translation>翻译</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bookCaption">
|
||
<h3>${escapeHtml(title)}</h3>
|
||
<p>${escapeHtml(bookSeries(session))}</p>
|
||
</div>
|
||
`;
|
||
const open = () => openSession(session.id);
|
||
const reviewButton = card.querySelector("[data-open-review]");
|
||
const translateButton = card.querySelector("[data-open-translation]");
|
||
reviewButton.addEventListener("click", (event) => {
|
||
event.stopPropagation();
|
||
open();
|
||
});
|
||
translateButton.addEventListener("click", (event) => {
|
||
event.stopPropagation();
|
||
showTranslationScreen(session.id).catch((error) => toast(`打开翻译页失败：${error.message}`, 7000));
|
||
});
|
||
card.addEventListener("click", (event) => {
|
||
if (event.target.closest("button")) return;
|
||
open();
|
||
});
|
||
card.addEventListener("keydown", (event) => {
|
||
if (event.target.closest("button")) return;
|
||
if (event.key !== "Enter" && event.key !== " ") return;
|
||
event.preventDefault();
|
||
open();
|
||
});
|
||
frag.appendChild(card);
|
||
});
|
||
dom.bookshelfList.appendChild(frag);
|
||
}
|
||
|
||
async function refreshBookshelf() {
|
||
dom.bookshelfMeta.textContent = "正在读取书架……";
|
||
const data = await api("/api/sessions");
|
||
setVersionBadge(data.version);
|
||
librarySeries = data.series || [];
|
||
renderBookshelf(data.sessions || [], data.active_session_id || "");
|
||
return data;
|
||
}
|
||
|
||
async function showBookshelf() {
|
||
if (!(await leaveReviewShell())) return;
|
||
clearTranslationPoll();
|
||
resetReviewState();
|
||
setShellMode(false);
|
||
dom.startScreen.hidden = true;
|
||
if (dom.translationScreen) dom.translationScreen.hidden = true;
|
||
dom.bookshelfScreen.hidden = false;
|
||
document.body.classList.add("bookshelfOpen");
|
||
dom.bookshelfBtn.classList.add("active");
|
||
dom.sessionMeta.textContent = "书架 · 历史审校书籍";
|
||
try {
|
||
await refreshBookshelf();
|
||
} catch (error) {
|
||
dom.bookshelfMeta.textContent = "书架读取失败";
|
||
dom.bookshelfList.innerHTML = `<div class="emptyBookshelf">读取书架失败：${escapeHtml(error.message)}</div>`;
|
||
}
|
||
}
|
||
|
||
async function showStartScreen(sessionPayload = null) {
|
||
clearTranslationPoll();
|
||
resetReviewState();
|
||
setShellMode(false);
|
||
dom.bookshelfScreen.hidden = true;
|
||
if (dom.translationScreen) dom.translationScreen.hidden = true;
|
||
dom.startScreen.hidden = false;
|
||
if (sessionPayload && Array.isArray(sessionPayload.sessions)) {
|
||
renderSessions(sessionPayload.sessions, "");
|
||
} else {
|
||
try {
|
||
await refreshSessions();
|
||
} catch (error) {
|
||
dom.sessionList.innerHTML = `<div class="emptySession">读取会话失败：${escapeHtml(error.message)}</div>`;
|
||
}
|
||
}
|
||
}
|
||
|
||
function renderTranslationSource(payload) {
|
||
const session = payload.session || {};
|
||
const sourceCount = payload.source_count || 0;
|
||
dom.translationBookMeta.textContent = `${session.source_name || translationSessionId} · 可翻译日文正文块 ${sourceCount} 个`;
|
||
dom.translationSourceMeta.textContent = sourceCount ? `检测到 ${sourceCount} 个可翻译日文正文块` : "没有检测到可翻译日文正文块";
|
||
const stats = payload.stats || {};
|
||
if (dom.translationStats) {
|
||
const chips = [
|
||
["可翻译", sourceCount],
|
||
["HTML", stats.html_file_count],
|
||
["文本块", stats.total_blocks],
|
||
["正文段", stats.total_paragraphs],
|
||
["标题", stats.total_headings],
|
||
["图片块", stats.image_blocks],
|
||
["目录跳过", stats.skipped_nav_blocks],
|
||
["空白跳过", stats.skipped_blank],
|
||
["非日文跳过", stats.skipped_no_japanese],
|
||
].filter((item) => item[1] !== undefined && item[1] !== null && item[1] !== "");
|
||
dom.translationStats.innerHTML = `
|
||
<div class="statChipRow">
|
||
${chips.map(([label, value]) => `<span class="statChip"><b>${escapeHtml(value)}</b>${escapeHtml(label)}</span>`).join("")}
|
||
</div>
|
||
${stats.note ? `<p>${escapeHtml(stats.note)}</p>` : ""}
|
||
`;
|
||
}
|
||
dom.translationLimitInput.max = String(Math.max(1, Math.min(5000, sourceCount || 5000)));
|
||
const sample = payload.sample || [];
|
||
if (!sample.length) {
|
||
dom.translationSample.innerHTML = '<div class="translationEmpty">暂无可预览段落。请确认这本书是日语 EPUB。</div>';
|
||
return;
|
||
}
|
||
dom.translationSample.innerHTML = sample
|
||
.map((item) => `
|
||
<div class="translationSampleItem">
|
||
<strong>${escapeHtml(item.id)} · ${escapeHtml(item.file || "")}</strong>
|
||
<p>${escapeHtml(item.text || "")}</p>
|
||
</div>
|
||
`)
|
||
.join("");
|
||
}
|
||
|
||
async function showTranslationScreen(sessionId) {
|
||
if (!(await leaveReviewShell())) return;
|
||
clearTranslationPoll();
|
||
resetReviewState();
|
||
setShellMode(false);
|
||
translationSessionId = sessionId;
|
||
activeSeriesId = "";
|
||
activeSeriesConfig = null;
|
||
translationUsesSeriesConfig = false;
|
||
translationJobId = "";
|
||
translationOutputSessionId = "";
|
||
dom.startScreen.hidden = true;
|
||
dom.bookshelfScreen.hidden = true;
|
||
dom.reviewLayout.hidden = true;
|
||
dom.translationScreen.hidden = false;
|
||
dom.translationOpenReviewBtn.disabled = true;
|
||
dom.translationOutput.hidden = true;
|
||
dom.translationOutput.textContent = "";
|
||
dom.translationProgressBar.style.width = "0%";
|
||
dom.translationProgressText.textContent = "正在读取源书与 API 配置……";
|
||
dom.translationJobMeta.textContent = "尚未开始";
|
||
dom.translationLogs.innerHTML = "";
|
||
document.body.classList.add("translationOpen");
|
||
dom.bookshelfBtn.classList.remove("active");
|
||
dom.sessionMeta.textContent = "AI 翻译 EPUB";
|
||
const [sourcePayload, defaultsPayload] = await Promise.all([
|
||
api(`/api/session/${encodeURIComponent(sessionId)}/translation-source`),
|
||
api("/api/translation/defaults"),
|
||
]);
|
||
activeSeriesId = (sourcePayload.session && bookSeriesId(sourcePayload.session)) || "";
|
||
setVersionBadge(defaultsPayload.version);
|
||
renderTranslationGptConfig(defaultsPayload.gpt || {});
|
||
const defaults = defaultsPayload.defaults || {};
|
||
dom.translationOutputModeInput.value = defaults.output_mode || "bilingual";
|
||
dom.translationRangeModeInput.value = defaults.range_mode || "limit";
|
||
dom.translationLimitInput.value = defaults.limit || 20;
|
||
dom.translationTemperatureInput.value = defaults.temperature ?? 0.2;
|
||
applySeriesConfigToTranslation(sourcePayload.series_config || {});
|
||
renderTranslationSource(sourcePayload);
|
||
dom.translationProgressText.textContent = "配置完成后可以开始翻译。默认先做前 20 段试译。";
|
||
}
|
||
|
||
function collectTranslationOptions() {
|
||
return {
|
||
session_id: translationSessionId,
|
||
output_mode: dom.translationOutputModeInput.value,
|
||
range_mode: dom.translationRangeModeInput.value,
|
||
limit: dom.translationLimitInput.value,
|
||
temperature: dom.translationTemperatureInput.value,
|
||
base_url: dom.translationBaseUrlInput.value,
|
||
model: dom.translationModelInput.value,
|
||
glossary_path: dom.translationGlossaryPathInput.value,
|
||
translation_prompt: dom.translationPromptInput.value,
|
||
format_prompt: dom.translationFormatPromptInput.value,
|
||
character_prompt: dom.translationCharacterPromptInput.value,
|
||
use_series_glossary_path: translationUsesSeriesConfig && activeSeriesConfig && activeSeriesConfig.glossary_path === dom.translationGlossaryPathInput.value,
|
||
use_series_translation_prompt: translationUsesSeriesConfig && activeSeriesConfig && activeSeriesConfig.translation_prompt === dom.translationPromptInput.value,
|
||
use_series_format_prompt: translationUsesSeriesConfig && activeSeriesConfig && activeSeriesConfig.format_prompt === dom.translationFormatPromptInput.value,
|
||
use_series_character_prompt: translationUsesSeriesConfig && activeSeriesConfig && activeSeriesConfig.character_prompt === dom.translationCharacterPromptInput.value,
|
||
};
|
||
}
|
||
|
||
function renderTranslationJob(job) {
|
||
const progress = job.progress || {};
|
||
const percent = Math.max(0, Math.min(100, Number(progress.percent || 0)));
|
||
dom.translationProgressBar.style.width = `${percent}%`;
|
||
dom.translationJobMeta.textContent = job.id ? `${job.status || "unknown"} · ${percent.toFixed(percent % 1 ? 1 : 0)}%` : "尚未开始";
|
||
const total = progress.total || 0;
|
||
const current = progress.current || 0;
|
||
const failed = progress.failed || 0;
|
||
dom.translationProgressText.textContent = [
|
||
progress.message || "正在处理……",
|
||
total ? `进度：${current}/${total}` : "",
|
||
progress.current_file ? `当前文件：${progress.current_file}` : "",
|
||
failed ? `失败段落：${failed}` : "",
|
||
job.error ? `错误：${job.error}` : "",
|
||
].filter(Boolean).join("\n");
|
||
const logs = (job.logs || []).slice(-12).reverse();
|
||
dom.translationLogs.innerHTML = logs.map((log) => `
|
||
<div class="translationLog ${escapeHtml(log.level || "info")}">
|
||
<span>${escapeHtml(formatDateTime(log.ts) || log.ts || "")}</span>
|
||
<p>${escapeHtml(log.message || "")}</p>
|
||
</div>
|
||
`).join("");
|
||
if (job.status === "completed") {
|
||
translationOutputSessionId = job.output_session_id || "";
|
||
dom.translationOpenReviewBtn.disabled = !translationOutputSessionId;
|
||
dom.translationOutput.hidden = false;
|
||
dom.translationOutput.innerHTML = `
|
||
<strong>已生成 EPUB 并加入书架</strong>
|
||
<p>${escapeHtml(job.output_epub || "")}</p>
|
||
`;
|
||
refreshBookshelf().catch(() => {});
|
||
}
|
||
}
|
||
|
||
async function openSeriesConfigDrawer(seriesId = activeSeriesId) {
|
||
if (!seriesId) {
|
||
toast("请先在左侧选择一个系列。");
|
||
return null;
|
||
}
|
||
activeSeriesId = seriesId;
|
||
const title = seriesTitleById(seriesId);
|
||
dom.seriesConfigTitle.textContent = `${title} · 系列设置`;
|
||
dom.seriesConfigMeta.textContent = "同系列书籍会优先共用这里的术语表和提示词。API Key 仍保存在全局 API 设置里。";
|
||
dom.seriesConfigDrawer.hidden = false;
|
||
const config = await api(`/api/series/${encodeURIComponent(seriesId)}/config`);
|
||
activeSeriesConfig = config;
|
||
dom.seriesGlossaryPathInput.value = config.glossary_path || "";
|
||
dom.seriesTranslationPromptInput.value = config.translation_prompt || "";
|
||
dom.seriesFormatPromptInput.value = config.format_prompt || "";
|
||
dom.seriesCharacterPromptInput.value = config.character_prompt || "";
|
||
return config;
|
||
}
|
||
|
||
function closeSeriesConfigDrawer() {
|
||
if (dom.seriesConfigDrawer) dom.seriesConfigDrawer.hidden = true;
|
||
}
|
||
|
||
async function saveActiveSeriesConfig(showToast = true) {
|
||
const seriesId = activeSeriesId || (activeSeriesConfig && activeSeriesConfig.series_id) || "";
|
||
if (!seriesId) return null;
|
||
if (showToast === false && activeSeriesConfig) {
|
||
updateSeriesDrawerFromTranslation();
|
||
}
|
||
const payload = {
|
||
glossary_path: dom.seriesGlossaryPathInput.value,
|
||
translation_prompt: dom.seriesTranslationPromptInput.value,
|
||
format_prompt: dom.seriesFormatPromptInput.value,
|
||
character_prompt: dom.seriesCharacterPromptInput.value,
|
||
};
|
||
const config = await api(`/api/series/${encodeURIComponent(seriesId)}/config`, {
|
||
method: "POST",
|
||
body: JSON.stringify(payload),
|
||
});
|
||
activeSeriesConfig = config;
|
||
if (showToast) toast("系列设置已保存，同系列翻译会优先使用它。");
|
||
return config;
|
||
}
|
||
|
||
async function pollTranslationProgress() {
|
||
if (!translationJobId) return;
|
||
try {
|
||
const payload = await api(`/api/translation/jobs/${encodeURIComponent(translationJobId)}`);
|
||
const job = payload.job || {};
|
||
renderTranslationJob(job);
|
||
if (["completed", "failed", "cancelled"].includes(job.status)) {
|
||
clearTranslationPoll();
|
||
dom.translationStartBtn.disabled = false;
|
||
dom.translationStartBtn.textContent = "开始翻译";
|
||
if (job.status === "completed") toast("翻译完成，输出 EPUB 已加入书架。", 7000);
|
||
if (job.status === "failed") toast(`翻译失败：${job.error || "未知错误"}`, 9000);
|
||
return;
|
||
}
|
||
translationPollTimer = setTimeout(pollTranslationProgress, 1200);
|
||
} catch (error) {
|
||
clearTranslationPoll();
|
||
dom.translationProgressText.textContent = `读取进度失败：${error.message}`;
|
||
dom.translationStartBtn.disabled = false;
|
||
dom.translationStartBtn.textContent = "开始翻译";
|
||
}
|
||
}
|
||
|
||
async function startTranslationJob(event) {
|
||
event.preventDefault();
|
||
if (!translationSessionId) return;
|
||
if (dom.translationRangeModeInput.value === "all" && !window.confirm("全书翻译可能消耗较长时间和较多 API 额度。确认开始吗？")) {
|
||
return;
|
||
}
|
||
try {
|
||
dom.translationStartBtn.disabled = true;
|
||
dom.translationStartBtn.textContent = "启动中……";
|
||
dom.translationProgressText.textContent = "正在保存设置并创建翻译任务……";
|
||
await saveTranslationGptConfig();
|
||
const payload = await api("/api/translation/start", {
|
||
method: "POST",
|
||
body: JSON.stringify(collectTranslationOptions()),
|
||
});
|
||
translationJobId = payload.job_id;
|
||
renderTranslationJob(payload.job || {});
|
||
dom.translationStartBtn.textContent = "翻译运行中……";
|
||
clearTranslationPoll();
|
||
translationPollTimer = setTimeout(pollTranslationProgress, 600);
|
||
toast("翻译任务已启动。");
|
||
} catch (error) {
|
||
dom.translationStartBtn.disabled = false;
|
||
dom.translationStartBtn.textContent = "开始翻译";
|
||
dom.translationProgressText.textContent = `启动失败：${error.message}`;
|
||
toast(`启动翻译失败：${error.message}`, 9000);
|
||
}
|
||
}
|
||
|
||
function rowCurrentText(row) {
|
||
return stripTags(row.current_html || row.cn_html || row.cn_text || "");
|
||
}
|
||
|
||
function rowById(rowId) {
|
||
return rows.find((item) => item.id === rowId) || null;
|
||
}
|
||
|
||
function itemKind(item) {
|
||
return item && item.kind === "image" ? "image" : "text";
|
||
}
|
||
|
||
function isImageItem(item) {
|
||
return itemKind(item) === "image";
|
||
}
|
||
|
||
function allParts() {
|
||
return (structure.chapters || []).flatMap((chapter) => chapter.parts || []);
|
||
}
|
||
|
||
function isImageChapter(chapter) {
|
||
return chapterKind(chapter) === "image";
|
||
}
|
||
|
||
function chapterItems(chapter) {
|
||
if (!chapter) return [];
|
||
if (Array.isArray(chapter.items) && chapter.items.length) return chapter.items;
|
||
if (isImageChapter(chapter)) return [{ ...chapter, id: `${chapter.id}:image`, parent_chapter_id: chapter.id, display_level: 1 }];
|
||
return chapter.parts || [];
|
||
}
|
||
|
||
function chapterImages(chapter) {
|
||
if (!chapter) return [];
|
||
if (isImageChapter(chapter)) return chapter.images || [];
|
||
return chapterItems(chapter)
|
||
.filter(isImageItem)
|
||
.flatMap((item) => item.images || []);
|
||
}
|
||
|
||
function allChapterScopes() {
|
||
return (structure.chapters || []).map((chapter) => ({
|
||
type: "chapter",
|
||
id: chapter.id,
|
||
chapter,
|
||
}));
|
||
}
|
||
|
||
function activeChapterScopeId() {
|
||
if (currentImageItem && currentChapter) return currentChapter.id;
|
||
return currentChapter ? currentChapter.id : chapterForPart(currentPart)?.id;
|
||
}
|
||
|
||
function readingScopeId(chapter, item = null) {
|
||
if (!chapter) return "";
|
||
if (!item) return `chapter:${chapter.id}`;
|
||
return isImageItem(item) ? `image:${chapter.id}:${item.id}` : `part:${item.id}`;
|
||
}
|
||
|
||
function scopeForItem(chapter, item) {
|
||
if (!item) return null;
|
||
if (isImageItem(item)) {
|
||
return { type: "image", id: readingScopeId(chapter, item), chapter, item };
|
||
}
|
||
return { type: "part", id: readingScopeId(chapter, item), chapter, part: item };
|
||
}
|
||
|
||
function allReadingScopes() {
|
||
const scopes = [];
|
||
for (const chapter of structure.chapters || []) {
|
||
const items = chapterItems(chapter);
|
||
if (!items.length) {
|
||
scopes.push({ type: "chapter", id: readingScopeId(chapter), chapter });
|
||
continue;
|
||
}
|
||
for (const item of items) {
|
||
scopes.push(scopeForItem(chapter, item));
|
||
}
|
||
}
|
||
return scopes;
|
||
}
|
||
|
||
function visibleReadingScopeId(chapter) {
|
||
if (!chapter || !dom.readerPane || dom.readerPane.hidden) return "";
|
||
const paneRect = dom.readerPane.getBoundingClientRect();
|
||
const top = readerViewportTop(paneRect);
|
||
const items = Array.from(dom.readingFlow.querySelectorAll("[data-reading-scope-id]"));
|
||
let active = null;
|
||
for (const item of items) {
|
||
const rect = item.getBoundingClientRect();
|
||
if (rect.bottom >= top) {
|
||
active = item;
|
||
break;
|
||
}
|
||
}
|
||
return active?.dataset.readingScopeId || "";
|
||
}
|
||
|
||
function activeReadingScopeId() {
|
||
if (currentImageItem && currentChapter) return readingScopeId(currentChapter, currentImageItem);
|
||
if (currentPart) return readingScopeId(chapterForPart(currentPart), currentPart);
|
||
if (currentChapter) {
|
||
const visibleScope = visibleReadingScopeId(currentChapter);
|
||
if (visibleScope) return visibleScope;
|
||
const anchor = readerAnchor();
|
||
const anchorRow = anchor && anchor.rowId ? rowById(anchor.rowId) : null;
|
||
const anchorPart = partForRow(anchorRow);
|
||
if (anchorPart && chapterForPart(anchorPart)?.id === currentChapter.id) {
|
||
return readingScopeId(currentChapter, anchorPart);
|
||
}
|
||
const firstItem = chapterItems(currentChapter)[0] || null;
|
||
if (firstItem) return readingScopeId(currentChapter, firstItem);
|
||
return readingScopeId(currentChapter);
|
||
}
|
||
return "";
|
||
}
|
||
|
||
function chapterIsExpanded(chapter) {
|
||
if (!chapter) return false;
|
||
return expandedChapters.has(chapter.id);
|
||
}
|
||
|
||
function chapterHasChildren(chapter) {
|
||
return chapterItems(chapter).length > 0;
|
||
}
|
||
|
||
function toggleChapterExpanded(chapter) {
|
||
if (!chapter) return;
|
||
if (expandedChapters.has(chapter.id)) {
|
||
expandedChapters.delete(chapter.id);
|
||
} else {
|
||
expandedChapters.add(chapter.id);
|
||
}
|
||
renderToc();
|
||
}
|
||
|
||
function expandAllChapters() {
|
||
expandedChapters = new Set((structure.chapters || []).map((chapter) => chapter.id));
|
||
renderToc();
|
||
}
|
||
|
||
function collapseAllChapters() {
|
||
expandedChapters = new Set();
|
||
const activeId = activeChapterScopeId();
|
||
if (activeId) expandedChapters.add(activeId);
|
||
renderToc();
|
||
}
|
||
|
||
function partById(partId) {
|
||
return allParts().find((part) => part.id === partId) || null;
|
||
}
|
||
|
||
function chapterById(chapterId) {
|
||
return (structure.chapters || []).find((chapter) => chapter.id === chapterId) || null;
|
||
}
|
||
|
||
function chapterKind(chapter) {
|
||
return chapter && chapter.kind === "image" ? "image" : "text";
|
||
}
|
||
|
||
function partRows(part) {
|
||
if (!part) return [];
|
||
const ids = new Set(part.row_ids || []);
|
||
return rows.filter((row) => ids.has(row.id));
|
||
}
|
||
|
||
function partForRow(row) {
|
||
if (!row) return null;
|
||
return allParts().find((part) => (part.row_ids || []).includes(row.id)) || null;
|
||
}
|
||
|
||
function chapterForPart(part) {
|
||
if (!part) return null;
|
||
return (structure.chapters || []).find((chapter) => (chapter.parts || []).some((item) => item.id === part.id)) || null;
|
||
}
|
||
|
||
function chapterRows(chapter) {
|
||
if (!chapter) return [];
|
||
if (isImageChapter(chapter)) return [];
|
||
const ids = new Set((chapter.parts || []).flatMap((part) => part.row_ids || []));
|
||
return rows.filter((row) => ids.has(row.id));
|
||
}
|
||
|
||
function searchBaseRows() {
|
||
return searchScope === "book" ? rows : scopeRows();
|
||
}
|
||
|
||
function visibleRowsForScope() {
|
||
return filteredRows;
|
||
}
|
||
|
||
function updateSearchScopeButtons() {
|
||
dom.searchScopeCurrentBtn.classList.toggle("active", searchScope === "current");
|
||
dom.searchScopeBookBtn.classList.toggle("active", searchScope === "book");
|
||
}
|
||
|
||
function setSearchScope(scope) {
|
||
searchScope = scope === "book" ? "book" : "current";
|
||
updateSearchScopeButtons();
|
||
if (searchScope === "current" && (currentImageItem || (isImageChapter(currentChapter) && !currentPart))) {
|
||
currentRow = null;
|
||
currentIndex = -1;
|
||
}
|
||
applyFilter(true);
|
||
}
|
||
|
||
function scopeCoversRow(row) {
|
||
if (!row) return false;
|
||
if (currentPart) return (currentPart.row_ids || []).includes(row.id);
|
||
if (currentChapter) {
|
||
return (currentChapter.parts || []).some((part) => (part.row_ids || []).includes(row.id));
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function syncScopeToRow(row, forcePart = false) {
|
||
const nextPart = partForRow(row);
|
||
if (!nextPart) return;
|
||
const nextChapter = chapterForPart(nextPart);
|
||
if (!nextChapter) return;
|
||
currentImageItem = null;
|
||
if (forcePart || !currentChapter || currentChapter.id !== nextChapter.id || !scopeCoversRow(row)) {
|
||
currentChapter = nextChapter;
|
||
currentPart = nextPart;
|
||
expandedChapters.add(nextChapter.id);
|
||
return;
|
||
}
|
||
if (currentPart && currentPart.id !== nextPart.id) {
|
||
currentPart = nextPart;
|
||
}
|
||
}
|
||
|
||
function partVisibleRows(part) {
|
||
const ids = new Set((part && part.row_ids) || []);
|
||
return filteredRows.filter((row) => ids.has(row.id));
|
||
}
|
||
|
||
function chapterVisibleRowsInFilter(chapter) {
|
||
if (!chapter) return filteredRows;
|
||
const ids = new Set((chapter.parts || []).flatMap((part) => part.row_ids || []));
|
||
return filteredRows.filter((row) => ids.has(row.id));
|
||
}
|
||
|
||
function chapterVisibleRows(chapter) {
|
||
if (!chapter) return filteredRows;
|
||
if (searchScope === "book") {
|
||
return chapterVisibleRowsInFilter(chapter);
|
||
}
|
||
return filteredRows;
|
||
}
|
||
|
||
function scopeRows() {
|
||
if (currentPart) return partRows(currentPart);
|
||
if (currentChapter) return chapterRows(currentChapter);
|
||
return rows;
|
||
}
|
||
|
||
function scopeVisibleRows() {
|
||
if (searchScope === "book") {
|
||
if (currentPart) return partVisibleRows(currentPart);
|
||
if (currentChapter) return chapterVisibleRows(currentChapter);
|
||
return filteredRows;
|
||
}
|
||
return filteredRows;
|
||
}
|
||
|
||
function imageChapterMatchesSearch(chapter) {
|
||
if (!isImageChapter(chapter) && !isImageItem(chapter)) return false;
|
||
if (showTouchedOnly) return false;
|
||
const q = dom.searchInput.value.trim().toLowerCase();
|
||
if (!q) return true;
|
||
const haystack = [
|
||
chapter.id,
|
||
chapter.title,
|
||
chapter.file_label,
|
||
...(chapter.images || []).flatMap((image) => [image.asset_name, image.alt, image.asset_path]),
|
||
]
|
||
.join("\n")
|
||
.toLowerCase();
|
||
return haystack.includes(q);
|
||
}
|
||
|
||
async function loadSession() {
|
||
const session = await api("/api/session");
|
||
setVersionBadge(session.version);
|
||
if (!session.has_session) {
|
||
await showStartScreen(session);
|
||
return session;
|
||
}
|
||
savedReadingPosition = session.reading_position || null;
|
||
setShellMode(true);
|
||
const chapterCount = structure.chapter_count || (structure.chapters || []).length;
|
||
const partCount = structure.part_count || allParts().length;
|
||
const imageCount = structure.image_count || 0;
|
||
const sourceName = session.source_name || session.source_epub;
|
||
dom.sessionMeta.textContent = `${sourceName} · ${session.row_count} 段 · ${chapterCount} 章 / ${partCount} part / ${imageCount} 张图 · 已记录 ${session.touched_count} 段`;
|
||
return session;
|
||
}
|
||
|
||
async function loadStructure() {
|
||
structure = await api("/api/structure");
|
||
}
|
||
|
||
async function loadRows(keepSelection = false) {
|
||
const oldId = currentRow && currentRow.id;
|
||
const payload = await api("/api/rows");
|
||
rows = payload.rows || [];
|
||
applyFilter(false);
|
||
|
||
if (keepSelection && oldId) {
|
||
const nextRow = rowById(oldId);
|
||
if (nextRow) {
|
||
currentRow = nextRow;
|
||
currentIndex = filteredRows.findIndex((row) => row.id === nextRow.id);
|
||
if (currentPart && !(currentPart.row_ids || []).includes(nextRow.id)) {
|
||
syncScopeToRow(nextRow);
|
||
}
|
||
renderAll();
|
||
return;
|
||
}
|
||
}
|
||
|
||
if (!currentPart) {
|
||
currentChapter = (structure.chapters || [])[0] || null;
|
||
currentPart = currentChapter
|
||
&& !isImageChapter(currentChapter)
|
||
&& (currentChapter.parts || []).length === 1
|
||
&& chapterImages(currentChapter).length === 0
|
||
? currentChapter.parts[0]
|
||
: null;
|
||
applyFilter(false);
|
||
}
|
||
if (filteredRows.length > 0 && currentIndex < 0) {
|
||
currentRow = filteredRows[0];
|
||
currentIndex = 0;
|
||
}
|
||
renderAll();
|
||
}
|
||
|
||
function applySavedReadingPosition(position) {
|
||
if (!position || !(structure.chapters || []).length) return false;
|
||
restoringReadingPosition = true;
|
||
try {
|
||
const row = position.row_id ? rowById(position.row_id) : null;
|
||
const chapter = chapterById(position.chapter_id);
|
||
const part = partById(position.part_id);
|
||
const imageItem = imageItemById(chapter, position.image_item_id);
|
||
if (position.scope === "image" && chapter && imageItem) {
|
||
currentChapter = chapter;
|
||
currentPart = null;
|
||
currentImageItem = imageItem;
|
||
currentRow = null;
|
||
currentIndex = -1;
|
||
expandedChapters.add(chapter.id);
|
||
} else if (part) {
|
||
currentPart = part;
|
||
currentChapter = chapterForPart(part) || chapter;
|
||
currentImageItem = null;
|
||
if (currentChapter) expandedChapters.add(currentChapter.id);
|
||
currentRow = row && (part.row_ids || []).includes(row.id) ? row : partRows(part)[0] || null;
|
||
currentIndex = currentRow ? filteredRows.findIndex((item) => item.id === currentRow.id) : -1;
|
||
} else if (chapter) {
|
||
currentChapter = chapter;
|
||
currentPart = null;
|
||
currentImageItem = null;
|
||
expandedChapters.add(chapter.id);
|
||
const scopedRows = chapterRows(chapter);
|
||
currentRow = row && scopedRows.some((item) => item.id === row.id) ? row : scopedRows[0] || null;
|
||
currentIndex = currentRow ? filteredRows.findIndex((item) => item.id === currentRow.id) : -1;
|
||
} else if (row) {
|
||
currentRow = row;
|
||
syncScopeToRow(row);
|
||
currentIndex = filteredRows.findIndex((item) => item.id === row.id);
|
||
} else {
|
||
return false;
|
||
}
|
||
currentMode = position.mode === "polish" && currentRow ? "polish" : "reading";
|
||
applyFilter(false);
|
||
currentIndex = currentRow ? filteredRows.findIndex((item) => item.id === currentRow.id) : -1;
|
||
renderAll();
|
||
return true;
|
||
} finally {
|
||
restoringReadingPosition = false;
|
||
}
|
||
}
|
||
|
||
function restoreReadingPositionScroll(position) {
|
||
if (!position || currentMode !== "reading") return;
|
||
requestAnimationFrame(() => {
|
||
requestAnimationFrame(() => {
|
||
const rowId = position.row_id || "";
|
||
const target = rowId ? dom.readingFlow.querySelector(`[data-row-id="${CSS.escape(rowId)}"]`) : null;
|
||
if (target) {
|
||
const paneRect = dom.readerPane.getBoundingClientRect();
|
||
const nextOffset = target.getBoundingClientRect().top - paneRect.top;
|
||
dom.readerPane.scrollTop += nextOffset - (position.offset || 0);
|
||
} else {
|
||
dom.readerPane.scrollTop = Math.max(0, position.scroll_top || 0);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
async function loadActiveSession(options = {}) {
|
||
resetReviewState();
|
||
currentMode = "reading";
|
||
setShellMode(true);
|
||
await loadStructure();
|
||
await loadRows(Boolean(options.keepSelection));
|
||
const session = await loadSession();
|
||
const restored = applySavedReadingPosition(session.reading_position);
|
||
if (restored) restoreReadingPositionScroll(session.reading_position);
|
||
readingPositionReady = true;
|
||
await refreshSessions().catch(() => {});
|
||
if (options.message) toast(options.message, 4200);
|
||
}
|
||
|
||
async function uploadEpub(event) {
|
||
event.preventDefault();
|
||
const file = dom.epubFileInput.files && dom.epubFileInput.files[0];
|
||
if (!file) {
|
||
toast("请先选择一个 EPUB 文件。");
|
||
return;
|
||
}
|
||
const formData = new FormData();
|
||
formData.append("epub", file);
|
||
dom.uploadBtn.disabled = true;
|
||
dom.uploadBtn.textContent = "正在解析……";
|
||
try {
|
||
await apiForm("/api/upload", formData);
|
||
dom.epubFileInput.value = "";
|
||
dom.selectedFileName.textContent = "尚未选择文件";
|
||
await loadActiveSession({ message: "EPUB 已载入，可以开始审校。" });
|
||
} catch (error) {
|
||
toast(`上传失败：${error.message}`, 9000);
|
||
} finally {
|
||
dom.uploadBtn.disabled = false;
|
||
dom.uploadBtn.textContent = "上传并开始审校";
|
||
}
|
||
}
|
||
|
||
async function openSession(sessionId) {
|
||
if (!sessionId) return;
|
||
if (hasSession && !(await maybeSaveBeforeSwitch())) return;
|
||
try {
|
||
await api("/api/session/open", {
|
||
method: "POST",
|
||
body: JSON.stringify({ session_id: sessionId }),
|
||
});
|
||
await loadActiveSession({ message: "已打开审校会话。" });
|
||
} catch (error) {
|
||
toast(`打开会话失败：${error.message}`, 9000);
|
||
}
|
||
}
|
||
|
||
function updateStructureCountsFromRows() {
|
||
for (const chapter of structure.chapters || []) {
|
||
chapter.row_count = 0;
|
||
chapter.touched_count = 0;
|
||
chapter.marked_count = 0;
|
||
if (isImageChapter(chapter)) {
|
||
chapter.row_count = 0;
|
||
chapter.touched_count = 0;
|
||
chapter.marked_count = 0;
|
||
chapter.items = chapterItems(chapter);
|
||
continue;
|
||
}
|
||
for (const part of chapter.parts || []) {
|
||
const partItems = partRows(part);
|
||
part.row_count = partItems.length;
|
||
part.touched_count = partItems.filter(rowTouched).length;
|
||
part.marked_count = partItems.filter((row) => row.marked).length;
|
||
chapter.row_count += part.row_count;
|
||
chapter.touched_count += part.touched_count;
|
||
chapter.marked_count += part.marked_count;
|
||
}
|
||
for (const item of chapter.items || []) {
|
||
if (!isImageItem(item)) {
|
||
const match = (chapter.parts || []).find((part) => part.id === item.id);
|
||
if (match) Object.assign(item, match);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function rowMatchesSearch(row, q) {
|
||
if (showTouchedOnly && !rowTouched(row)) return false;
|
||
if (!q) return true;
|
||
const haystack = [
|
||
row.id,
|
||
row.file_label,
|
||
row.document_title,
|
||
row.jp_text,
|
||
row.cn_text,
|
||
rowCurrentText(row),
|
||
row.comment,
|
||
row.learn_note,
|
||
row.tags,
|
||
row.issue_type,
|
||
]
|
||
.join("\n")
|
||
.toLowerCase();
|
||
return haystack.includes(q);
|
||
}
|
||
|
||
function applyFilter(shouldRender = true) {
|
||
const q = dom.searchInput.value.trim().toLowerCase();
|
||
filteredRows = searchBaseRows().filter((row) => rowMatchesSearch(row, q));
|
||
if (currentRow) {
|
||
currentIndex = filteredRows.findIndex((row) => row.id === currentRow.id);
|
||
}
|
||
if (shouldRender) renderAll();
|
||
}
|
||
|
||
function renderAll() {
|
||
if (!hasSession) return;
|
||
updateStructureCountsFromRows();
|
||
renderToc();
|
||
renderList();
|
||
renderMode();
|
||
if (currentMode === "reading") {
|
||
renderReading();
|
||
} else {
|
||
renderEditor();
|
||
}
|
||
}
|
||
|
||
function renderMode() {
|
||
dom.readerPane.hidden = currentMode !== "reading";
|
||
dom.editorPane.hidden = currentMode !== "polish";
|
||
dom.readingModeBtn.classList.toggle("active", currentMode === "reading");
|
||
dom.polishModeBtn.classList.toggle("active", currentMode === "polish");
|
||
dom.polishModeBtn.disabled = !hasSession || ((currentImageItem || isImageChapter(currentChapter)) && !currentPart);
|
||
document.body.classList.toggle("quickOpen", currentMode === "reading" && !dom.quickEditor.hidden);
|
||
if (sidePanelMode) {
|
||
dom.tocPanel.hidden = sidePanelMode !== "toc";
|
||
dom.searchPanel.hidden = sidePanelMode !== "search";
|
||
}
|
||
}
|
||
|
||
function renderToc() {
|
||
dom.toc.innerHTML = "";
|
||
const frag = document.createDocumentFragment();
|
||
for (const chapter of structure.chapters || []) {
|
||
const items = chapterItems(chapter);
|
||
const parts = chapter.parts || [];
|
||
const imageItems = items.filter(isImageItem);
|
||
const chapterIsImage = isImageChapter(chapter);
|
||
const isCurrentChapter = currentChapter && chapter.id === currentChapter.id;
|
||
const containsCurrentPart = parts.some((part) => currentPart && part.id === currentPart.id);
|
||
const expanded = chapterIsExpanded(chapter) || containsCurrentPart || (isCurrentChapter && (!currentPart || currentImageItem));
|
||
const group = document.createElement("section");
|
||
group.className = "tocChapter";
|
||
if (chapterIsImage) group.classList.add("imageChapter");
|
||
if (expanded) group.classList.add("expanded");
|
||
|
||
const row = document.createElement("div");
|
||
row.className = "tocChapterRow";
|
||
if ((isCurrentChapter && !currentPart) || containsCurrentPart) {
|
||
row.classList.add("active");
|
||
}
|
||
|
||
const toggle = document.createElement("button");
|
||
toggle.type = "button";
|
||
toggle.className = "tocToggle";
|
||
toggle.textContent = expanded ? "▾" : "▸";
|
||
toggle.disabled = !chapterHasChildren(chapter);
|
||
toggle.setAttribute("aria-label", expanded ? "收起章节" : "展开章节");
|
||
toggle.setAttribute("aria-expanded", expanded ? "true" : "false");
|
||
toggle.addEventListener("click", (event) => {
|
||
event.stopPropagation();
|
||
toggleChapterExpanded(chapter);
|
||
});
|
||
row.appendChild(toggle);
|
||
|
||
const title = document.createElement("button");
|
||
title.type = "button";
|
||
title.className = "tocChapterButton";
|
||
if (
|
||
(isCurrentChapter && !currentPart)
|
||
|| containsCurrentPart
|
||
) {
|
||
title.classList.add("active");
|
||
}
|
||
title.innerHTML = `
|
||
<span class="tocTitle">${escapeHtml(chapter.title || chapter.id)}</span>
|
||
<span class="tocCount">${chapterIsImage ? `${chapterImages(chapter).length || 1} 图` : `${chapter.row_count || 0} 段${imageItems.length ? ` · ${imageItems.length} 图` : ""}`}</span>
|
||
`;
|
||
title.addEventListener("click", () => selectChapter(chapter));
|
||
row.appendChild(title);
|
||
group.appendChild(row);
|
||
|
||
const partList = document.createElement("div");
|
||
partList.className = "tocParts";
|
||
partList.hidden = !expanded;
|
||
for (const item of items) {
|
||
if (isImageItem(item)) {
|
||
const button = document.createElement("button");
|
||
button.type = "button";
|
||
button.className = "tocImageButton";
|
||
const imageActive = isCurrentChapter && !currentPart && (
|
||
currentImageItem ? currentImageItem.id === item.id : chapterIsImage
|
||
);
|
||
if (imageActive) button.classList.add("active");
|
||
button.innerHTML = `
|
||
<span class="tocTitle">${escapeHtml(item.toc_title || item.title || item.file_label || "插图")}</span>
|
||
<span class="tocCount">${(item.images || []).length || 1} 图</span>
|
||
`;
|
||
button.addEventListener("click", () => selectImageItem(chapter, item));
|
||
partList.appendChild(button);
|
||
} else {
|
||
const part = item;
|
||
const button = document.createElement("button");
|
||
button.type = "button";
|
||
button.className = "tocPartButton";
|
||
if (currentPart && part.id === currentPart.id) button.classList.add("active");
|
||
const badges = [];
|
||
if (part.touched_count) badges.push(`记 ${part.touched_count}`);
|
||
if (part.marked_count) badges.push(`标 ${part.marked_count}`);
|
||
button.innerHTML = `
|
||
<span class="tocTitle">${escapeHtml(part.title || part.file_label || part.id)}</span>
|
||
<span class="tocCount">${part.row_count || 0}${badges.length ? " · " + escapeHtml(badges.join(" · ")) : ""}</span>
|
||
`;
|
||
button.addEventListener("click", () => selectPart(part));
|
||
partList.appendChild(button);
|
||
}
|
||
}
|
||
group.appendChild(partList);
|
||
frag.appendChild(group);
|
||
}
|
||
dom.toc.appendChild(frag);
|
||
requestAnimationFrame(() => {
|
||
dom.toc.querySelector(".tocPartButton.active, .tocImageButton.active, .tocChapterButton.active")?.scrollIntoView({ block: "nearest" });
|
||
});
|
||
}
|
||
|
||
function renderList() {
|
||
const touched = rows.filter(rowTouched).length;
|
||
const marked = rows.filter((row) => row.marked).length;
|
||
const visibleRows = visibleRowsForScope();
|
||
const visibleInScope = scopeVisibleRows();
|
||
const imageCount = structure.image_count || 0;
|
||
const isBrowsingImage = !dom.searchInput.value.trim() && !showTouchedOnly;
|
||
const isCurrentImage = searchScope !== "book" && isBrowsingImage && !currentPart && (Boolean(currentImageItem) || isImageChapter(currentChapter));
|
||
const scopeLabel = searchScope === "book" ? "全书" : "当前范围";
|
||
dom.stats.textContent = `${scopeLabel}显示 ${visibleRows.length} / ${rows.length} 段 · 当前 ${isCurrentImage ? `${(currentImageItem ? currentImageItem.images || [] : chapterImages(currentChapter)).length} 图` : `${visibleInScope.length} 段`} · 插图 ${imageCount} · 已记录 ${touched} · 标记 ${marked}`;
|
||
dom.rowList.innerHTML = "";
|
||
|
||
const frag = document.createDocumentFragment();
|
||
if (isCurrentImage) {
|
||
const item = document.createElement("div");
|
||
item.className = "rowItem imageRowItem active";
|
||
item.innerHTML = `
|
||
<div class="rowMeta">
|
||
<span>${escapeHtml(currentChapter.id)}</span>
|
||
<span class="rowBadge">插图</span>
|
||
<span>${escapeHtml(currentChapter.file_label || "")}</span>
|
||
</div>
|
||
<div class="rowPreview">${escapeHtml((currentImageItem ? currentImageItem.images || [] : chapterImages(currentChapter)).map((image) => image.asset_name || image.asset_path).join(" / ") || "插图章节")}</div>
|
||
`;
|
||
frag.appendChild(item);
|
||
dom.rowList.appendChild(frag);
|
||
return;
|
||
}
|
||
if (!visibleRows.length) {
|
||
const item = document.createElement("div");
|
||
item.className = "rowItem emptyRowItem";
|
||
item.textContent = dom.searchInput.value || showTouchedOnly ? "当前检索范围没有命中段落。" : "当前范围没有可检索段落。";
|
||
frag.appendChild(item);
|
||
dom.rowList.appendChild(frag);
|
||
return;
|
||
}
|
||
visibleRows.forEach((row) => {
|
||
const button = document.createElement("button");
|
||
button.type = "button";
|
||
button.className = "rowItem";
|
||
if (currentRow && row.id === currentRow.id) button.classList.add("active");
|
||
if (rowTouched(row)) button.classList.add("touched");
|
||
if (row.marked) button.classList.add("marked");
|
||
|
||
const badge = row.marked ? "已标记" : row.edited ? "已编辑" : row.comment ? "有备注" : "未记录";
|
||
button.innerHTML = `
|
||
<div class="rowMeta">
|
||
<span>${escapeHtml(row.id)}</span>
|
||
<span class="rowBadge">${escapeHtml(badge)}</span>
|
||
<span>${escapeHtml(row.file_label)} · #${row.file_row_index || row.cn_p_index}</span>
|
||
</div>
|
||
<div class="rowPreview">${escapeHtml(rowCurrentText(row))}</div>
|
||
`;
|
||
button.addEventListener("click", () => maybeSelectRow(row, { openEditor: currentMode === "polish", openQuick: currentMode === "reading", scroll: true }));
|
||
frag.appendChild(button);
|
||
});
|
||
dom.rowList.appendChild(frag);
|
||
}
|
||
|
||
function renderImageChapter(chapter) {
|
||
const items = chapterItems(chapter).filter(isImageItem);
|
||
if (items.length > 1) {
|
||
renderMixedChapterImages(chapter, items);
|
||
return;
|
||
}
|
||
const imageScopeItem = items[0] || null;
|
||
const images = chapterImages(chapter);
|
||
dom.chapterKicker.textContent = chapter.file_label || "插图";
|
||
dom.readerTitle.textContent = chapter.title || "插图";
|
||
dom.readingFlow.innerHTML = "";
|
||
if (!imageChapterMatchesSearch(chapter)) {
|
||
dom.readingFlow.innerHTML = '<div class="emptyState">当前筛选条件下没有插图。</div>';
|
||
return;
|
||
}
|
||
const frag = document.createDocumentFragment();
|
||
images.forEach((image, index) => {
|
||
const figure = document.createElement("figure");
|
||
figure.className = "imageChapterFigure";
|
||
figure.dataset.readingScopeId = imageScopeItem ? readingScopeId(chapter, imageScopeItem) : readingScopeId(chapter);
|
||
figure.innerHTML = `
|
||
<img src="${escapeHtml(image.asset_url || "")}" alt="${escapeHtml(image.alt || chapter.title || "")}" loading="lazy">
|
||
<figcaption>
|
||
<span>${escapeHtml(chapter.title || `插图 ${index + 1}`)}</span>
|
||
<span>${escapeHtml(image.asset_name || image.asset_path || "")}</span>
|
||
</figcaption>
|
||
`;
|
||
frag.appendChild(figure);
|
||
});
|
||
dom.readingFlow.appendChild(frag);
|
||
}
|
||
|
||
function createImageFigure(item) {
|
||
const frag = document.createDocumentFragment();
|
||
(item.images || []).forEach((image, index) => {
|
||
const figure = document.createElement("figure");
|
||
figure.className = "imageChapterFigure inlineImageFigure";
|
||
const parentChapter = chapterById(item.parent_chapter_id) || currentChapter;
|
||
if (parentChapter) figure.dataset.readingScopeId = readingScopeId(parentChapter, item);
|
||
figure.innerHTML = `
|
||
<img src="${escapeHtml(image.asset_url || "")}" alt="${escapeHtml(image.alt || item.title || "")}" loading="lazy">
|
||
<figcaption>
|
||
<span>${escapeHtml(item.title || `插图 ${index + 1}`)}</span>
|
||
<span>${escapeHtml(image.asset_name || image.asset_path || "")}</span>
|
||
</figcaption>
|
||
`;
|
||
frag.appendChild(figure);
|
||
});
|
||
return frag;
|
||
}
|
||
|
||
function renderMixedChapterImages(chapter, imageItems, forceShow = false) {
|
||
dom.chapterKicker.textContent = chapter ? chapter.title : "插图";
|
||
dom.readerTitle.textContent = imageItems.length === 1
|
||
? imageItems[0].title || "插图"
|
||
: chapter ? chapter.title : "插图";
|
||
dom.readingFlow.innerHTML = "";
|
||
const frag = document.createDocumentFragment();
|
||
imageItems.forEach((item) => {
|
||
if (forceShow || imageChapterMatchesSearch(item)) frag.appendChild(createImageFigure(item));
|
||
});
|
||
if (!frag.childNodes.length) {
|
||
dom.readingFlow.innerHTML = '<div class="emptyState">当前筛选条件下没有插图。</div>';
|
||
return;
|
||
}
|
||
dom.readingFlow.appendChild(frag);
|
||
}
|
||
|
||
function rowPassesCurrentFilters(row) {
|
||
const q = dom.searchInput.value.trim().toLowerCase();
|
||
return rowMatchesSearch(row, q);
|
||
}
|
||
|
||
function rowsForReadingPart(part) {
|
||
const visible = searchScope === "book"
|
||
? partRows(part).filter(rowPassesCurrentFilters)
|
||
: partVisibleRows(part);
|
||
if (visible.length || dom.searchInput.value || showTouchedOnly) return visible;
|
||
return partRows(part);
|
||
}
|
||
|
||
function appendReadBlock(frag, row) {
|
||
const block = document.createElement("section");
|
||
block.className = "readBlock";
|
||
block.dataset.rowId = row.id;
|
||
const part = partForRow(row);
|
||
if (part) block.dataset.readingScopeId = readingScopeId(chapterForPart(part), part);
|
||
if (currentRow && row.id === currentRow.id) block.classList.add("active");
|
||
if (rowTouched(row)) block.classList.add("touched");
|
||
if (row.marked) block.classList.add("marked");
|
||
|
||
block.innerHTML = `
|
||
<div class="readText">
|
||
<div class="readSource">${row.jp_html || escapeHtml(row.jp_text)}</div>
|
||
<div class="readCn">${row.current_html || row.cn_html || escapeHtml(row.cn_text)}</div>
|
||
</div>
|
||
`;
|
||
block.addEventListener("click", () => {
|
||
maybeSelectRow(row, { openQuick: true, scroll: false });
|
||
});
|
||
frag.appendChild(block);
|
||
}
|
||
|
||
function renderReading() {
|
||
const selectedChapter = currentChapter || chapterForPart(currentPart);
|
||
if (!currentPart && !selectedChapter) {
|
||
dom.chapterKicker.textContent = "目录";
|
||
dom.readerTitle.textContent = "选择章节开始阅读";
|
||
dom.readingFlow.innerHTML = '<div class="emptyState">没有可阅读段落。</div>';
|
||
return;
|
||
}
|
||
|
||
const selectedPart = currentPart;
|
||
if (!selectedPart && currentImageItem) {
|
||
renderMixedChapterImages(selectedChapter, [currentImageItem], true);
|
||
return;
|
||
}
|
||
if (!selectedPart && isImageChapter(selectedChapter)) {
|
||
renderImageChapter(selectedChapter);
|
||
return;
|
||
}
|
||
dom.chapterKicker.textContent = selectedChapter ? selectedChapter.title : selectedPart.file_label || "";
|
||
dom.readerTitle.textContent = selectedPart
|
||
? selectedPart.title || selectedPart.file_label || "未命名 part"
|
||
: selectedChapter.title || "未命名章节";
|
||
dom.readingFlow.innerHTML = "";
|
||
|
||
const frag = document.createDocumentFragment();
|
||
|
||
if (selectedPart) {
|
||
rowsForReadingPart(selectedPart).forEach((row) => appendReadBlock(frag, row));
|
||
} else {
|
||
for (const item of chapterItems(selectedChapter)) {
|
||
if (isImageItem(item)) {
|
||
if (imageChapterMatchesSearch(item)) frag.appendChild(createImageFigure(item));
|
||
continue;
|
||
}
|
||
const partRowsToRender = rowsForReadingPart(item);
|
||
if (!partRowsToRender.length) continue;
|
||
const divider = document.createElement("h3");
|
||
divider.className = "partDivider";
|
||
divider.textContent = item.title || item.file_label || item.file || "part";
|
||
frag.appendChild(divider);
|
||
partRowsToRender.forEach((row) => appendReadBlock(frag, row));
|
||
}
|
||
}
|
||
if (!frag.childNodes.length) {
|
||
dom.readingFlow.innerHTML = '<div class="emptyState">当前筛选条件下没有内容。</div>';
|
||
return;
|
||
}
|
||
dom.readingFlow.appendChild(frag);
|
||
if (!restoringReadingPosition) saveReadingPositionSoon();
|
||
}
|
||
|
||
function renderEditor() {
|
||
if ((currentImageItem || isImageChapter(currentChapter)) && !currentPart) {
|
||
dom.emptyState.hidden = false;
|
||
dom.emptyState.textContent = "插图章节没有可编辑译文，请切回阅读模式查看图片。";
|
||
dom.editorCard.hidden = true;
|
||
return;
|
||
}
|
||
if (currentRow && !scopeCoversRow(currentRow)) {
|
||
const visible = scopeVisibleRows();
|
||
const fallback = scopeRows();
|
||
currentRow = visible[0] || fallback[0] || null;
|
||
}
|
||
if (!currentRow) {
|
||
dom.emptyState.hidden = false;
|
||
dom.emptyState.textContent = "选择左侧段落开始审校。";
|
||
dom.editorCard.hidden = true;
|
||
return;
|
||
}
|
||
dom.emptyState.hidden = true;
|
||
dom.editorCard.hidden = false;
|
||
fillFullEditor(currentRow);
|
||
}
|
||
|
||
function fillFullEditor(row) {
|
||
dom.rowId.textContent = row.id;
|
||
dom.rowPath.textContent = `${row.file} · 日文 P${row.ja_p_index} / 中文 P${row.cn_p_index}`;
|
||
dom.markedInput.checked = Boolean(row.marked);
|
||
dom.jpText.innerHTML = row.jp_html || escapeHtml(row.jp_text);
|
||
dom.cnEditor.innerHTML = row.current_html || row.cn_html || "";
|
||
dom.issueTypeInput.value = row.issue_type || "";
|
||
dom.severityInput.value = row.severity || "";
|
||
dom.tagsInput.value = row.tags || "";
|
||
dom.commentInput.value = row.comment || "";
|
||
dom.learnNoteInput.value = row.learn_note || "";
|
||
}
|
||
|
||
function fillQuickEditor(row) {
|
||
const hasRow = Boolean(row);
|
||
dom.quickRowId.textContent = hasRow ? row.id : "未选择段落";
|
||
dom.quickRowPath.textContent = hasRow ? `${row.file_label} · #${row.file_row_index || row.cn_p_index}` : "可先配置 AI、术语表或执行反馈与交付操作";
|
||
dom.quickJpText.innerHTML = hasRow ? row.jp_html || escapeHtml(row.jp_text) : '<div class="emptyState">在阅读区点击段落后，这里会显示日文原文。</div>';
|
||
dom.quickCnEditor.innerHTML = hasRow ? row.current_html || row.cn_html || "" : "";
|
||
dom.quickMarkedInput.checked = hasRow ? Boolean(row.marked) : false;
|
||
dom.quickIssueTypeInput.value = hasRow ? row.issue_type || "" : "";
|
||
dom.quickSeverityInput.value = hasRow ? row.severity || "" : "";
|
||
dom.quickTagsInput.value = hasRow ? row.tags || "" : "";
|
||
dom.quickCommentInput.value = hasRow ? row.comment || "" : "";
|
||
dom.quickLearnNoteInput.value = hasRow ? row.learn_note || "" : "";
|
||
[
|
||
dom.quickCnEditor,
|
||
dom.quickMarkedInput,
|
||
dom.quickIssueTypeInput,
|
||
dom.quickSeverityInput,
|
||
dom.quickTagsInput,
|
||
dom.quickCommentInput,
|
||
dom.quickLearnNoteInput,
|
||
dom.quickMarkSelectionBtn,
|
||
dom.quickSaveBtn,
|
||
dom.quickOpenFullBtn,
|
||
dom.gptInstructionInput,
|
||
dom.retranslateBtn,
|
||
].forEach((el) => {
|
||
if (el) el.disabled = !hasRow;
|
||
if (el === dom.quickCnEditor) el.contentEditable = hasRow ? "true" : "false";
|
||
});
|
||
gptCandidateHtml = "";
|
||
dom.gptCandidate.hidden = true;
|
||
dom.gptCandidate.innerHTML = "";
|
||
dom.applyRetranslationBtn.disabled = true;
|
||
quickDirty = false;
|
||
}
|
||
|
||
function collectCurrent() {
|
||
if (!currentRow) return null;
|
||
if (!dom.quickEditor.hidden && (currentMode === "reading" || quickDirty)) {
|
||
return collectQuick();
|
||
}
|
||
return collectFull();
|
||
}
|
||
|
||
function collectFull() {
|
||
return {
|
||
current_html: dom.cnEditor.innerHTML,
|
||
marked: dom.markedInput.checked,
|
||
issue_type: dom.issueTypeInput.value,
|
||
severity: dom.severityInput.value,
|
||
tags: dom.tagsInput.value,
|
||
comment: dom.commentInput.value,
|
||
learn_note: dom.learnNoteInput.value,
|
||
};
|
||
}
|
||
|
||
function collectQuick() {
|
||
return {
|
||
current_html: dom.quickCnEditor.innerHTML,
|
||
marked: dom.quickMarkedInput.checked,
|
||
issue_type: dom.quickIssueTypeInput.value,
|
||
severity: dom.quickSeverityInput.value,
|
||
tags: dom.quickTagsInput.value,
|
||
comment: dom.quickCommentInput.value,
|
||
learn_note: dom.quickLearnNoteInput.value,
|
||
};
|
||
}
|
||
|
||
function applyRowData(row, data, updatedAt = "") {
|
||
row.current_html = data.current_html;
|
||
row.marked = data.marked;
|
||
row.issue_type = data.issue_type;
|
||
row.severity = data.severity;
|
||
row.tags = data.tags;
|
||
row.comment = data.comment;
|
||
row.learn_note = data.learn_note;
|
||
row.edited = data.current_html !== row.cn_html;
|
||
row.updated_at = updatedAt || row.updated_at || "";
|
||
}
|
||
|
||
async function saveRow(row, data, silent = false) {
|
||
if (!row) return true;
|
||
try {
|
||
const result = await api(`/api/row/${encodeURIComponent(row.id)}`, {
|
||
method: "POST",
|
||
body: JSON.stringify(data),
|
||
});
|
||
const target = rowById(row.id);
|
||
if (target) applyRowData(target, data, result.updated_at);
|
||
currentRow = target || row;
|
||
dirty = false;
|
||
quickDirty = false;
|
||
applyFilter(false);
|
||
withReaderAnchor(() => renderAll());
|
||
await loadSession();
|
||
if (!silent) toast("已保存本段记录。");
|
||
return true;
|
||
} catch (error) {
|
||
toast(`保存失败：${error.message}`, 7000);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function saveCurrent(silent = false) {
|
||
if (!hasSession) return true;
|
||
if ((currentImageItem || isImageChapter(currentChapter)) && !currentPart) return true;
|
||
if (!currentRow) return true;
|
||
return saveRow(currentRow, collectCurrent(), silent);
|
||
}
|
||
|
||
async function maybeSaveBeforeSwitch() {
|
||
await flushReadingPosition();
|
||
if (quickDirty && currentRow && !dom.quickEditor.hidden) {
|
||
return saveCurrent(true);
|
||
}
|
||
if (currentMode === "polish" && dirty && currentRow) {
|
||
return saveCurrent(true);
|
||
}
|
||
return true;
|
||
}
|
||
|
||
async function maybeSelectRow(row, options = {}) {
|
||
const ok = await maybeSaveBeforeSwitch();
|
||
if (!ok) return;
|
||
selectRow(row, options);
|
||
}
|
||
|
||
function selectRow(row, options = {}) {
|
||
if (!row) return;
|
||
currentRow = row;
|
||
if (isImageChapter(currentChapter) && !currentPart) currentChapter = null;
|
||
currentImageItem = null;
|
||
syncScopeToRow(row, Boolean(options.forcePart));
|
||
applyFilter(false);
|
||
currentIndex = filteredRows.findIndex((item) => item.id === row.id);
|
||
dirty = false;
|
||
|
||
if (options.openEditor) {
|
||
setMode("polish", false);
|
||
} else if (options.openQuick) {
|
||
openQuickEditor(row);
|
||
} else {
|
||
renderAll();
|
||
}
|
||
|
||
if (options.scroll) scrollRowIntoView(row.id);
|
||
saveReadingPositionSoon();
|
||
}
|
||
|
||
async function selectChapter(chapter) {
|
||
if (!chapter) return;
|
||
const ok = await maybeSaveBeforeSwitch();
|
||
if (!ok) return;
|
||
currentChapter = chapter;
|
||
currentPart = null;
|
||
currentImageItem = null;
|
||
expandedChapters.add(chapter.id);
|
||
applyFilter(false);
|
||
if (isImageChapter(chapter)) {
|
||
currentRow = null;
|
||
currentIndex = -1;
|
||
await closeQuickEditor(true);
|
||
currentMode = "reading";
|
||
} else {
|
||
const visible = searchScope === "book" ? chapterVisibleRowsInFilter(chapter) : filteredRows;
|
||
const fallback = scopeRows();
|
||
currentRow = visible[0] || fallback[0] || null;
|
||
currentIndex = currentRow ? filteredRows.findIndex((row) => row.id === currentRow.id) : -1;
|
||
}
|
||
renderAll();
|
||
if (currentMode === "reading") {
|
||
dom.readerPane.scrollTo({ top: 0, behavior: "smooth" });
|
||
}
|
||
saveReadingPositionSoon();
|
||
}
|
||
|
||
async function selectPart(part) {
|
||
if (!part) return;
|
||
const ok = await maybeSaveBeforeSwitch();
|
||
if (!ok) return;
|
||
currentChapter = chapterForPart(part);
|
||
currentPart = part;
|
||
currentImageItem = null;
|
||
if (currentChapter) expandedChapters.add(currentChapter.id);
|
||
applyFilter(false);
|
||
const visible = partVisibleRows(part);
|
||
const fallback = partRows(part);
|
||
currentRow = visible[0] || fallback[0] || null;
|
||
currentIndex = currentRow ? filteredRows.findIndex((row) => row.id === currentRow.id) : -1;
|
||
renderAll();
|
||
if (currentMode === "reading") {
|
||
dom.readerPane.scrollTo({ top: 0, behavior: "smooth" });
|
||
}
|
||
saveReadingPositionSoon();
|
||
}
|
||
|
||
async function selectImageItem(chapter, item) {
|
||
if (!chapter || !item) return;
|
||
const ok = await maybeSaveBeforeSwitch();
|
||
if (!ok) return;
|
||
currentChapter = chapter;
|
||
currentPart = null;
|
||
currentImageItem = item;
|
||
currentRow = null;
|
||
currentIndex = -1;
|
||
if (chapter) expandedChapters.add(chapter.id);
|
||
applyFilter(false);
|
||
await closeQuickEditor(true);
|
||
currentMode = "reading";
|
||
renderAll();
|
||
dom.readerPane.scrollTo({ top: 0, behavior: "smooth" });
|
||
saveReadingPositionSoon();
|
||
}
|
||
|
||
function scrollRowIntoView(rowId) {
|
||
if (currentMode === "reading") {
|
||
requestAnimationFrame(() => {
|
||
const target = dom.readingFlow.querySelector(`[data-row-id="${CSS.escape(rowId)}"]`);
|
||
if (target) target.scrollIntoView({ block: "center", behavior: "smooth" });
|
||
});
|
||
}
|
||
}
|
||
|
||
async function setMode(mode, saveBefore = true) {
|
||
if (saveBefore) {
|
||
const ok = await maybeSaveBeforeSwitch();
|
||
if (!ok) return;
|
||
}
|
||
if (mode === "polish" && (currentImageItem || isImageChapter(currentChapter)) && !currentPart) {
|
||
toast("插图章节没有可编辑译文，已保持阅读模式。");
|
||
mode = "reading";
|
||
}
|
||
currentMode = mode;
|
||
if (mode === "reading" && currentPart && isImageChapter(currentChapter)) {
|
||
currentPart = null;
|
||
}
|
||
if (mode === "polish") {
|
||
await closeQuickEditor(true);
|
||
if (!scopeCoversRow(currentRow)) currentRow = null;
|
||
if (!currentRow) currentRow = visibleRowsForScope()[0] || scopeRows()[0] || filteredRows[0] || null;
|
||
}
|
||
withReaderAnchor(() => renderAll());
|
||
if (mode === "reading" && currentRow) scrollRowIntoView(currentRow.id);
|
||
saveReadingPositionSoon();
|
||
}
|
||
|
||
function openQuickEditor(row) {
|
||
withReaderAnchor(() => {
|
||
if (row) {
|
||
currentRow = row;
|
||
if (isImageChapter(currentChapter) && !currentPart) currentChapter = null;
|
||
currentImageItem = null;
|
||
syncScopeToRow(row);
|
||
applyFilter(false);
|
||
currentIndex = filteredRows.findIndex((item) => item.id === row.id);
|
||
}
|
||
fillQuickEditor(row);
|
||
dom.quickEditor.hidden = false;
|
||
document.body.classList.add("quickOpen");
|
||
dom.reviewToolsBtn.classList.add("active");
|
||
renderAll();
|
||
});
|
||
loadGptConfig().catch(() => {});
|
||
saveReadingPositionSoon();
|
||
}
|
||
|
||
async function closeQuickEditor(save = false) {
|
||
if (quickDirty && currentRow) {
|
||
if (save) {
|
||
const ok = await saveCurrent(true);
|
||
if (!ok) return;
|
||
} else if (!window.confirm("当前段有未保存修改，关闭审校工具会放弃这些修改。继续吗？")) {
|
||
return;
|
||
}
|
||
}
|
||
withReaderAnchor(() => {
|
||
dom.quickEditor.hidden = true;
|
||
document.body.classList.remove("quickOpen");
|
||
dom.reviewToolsBtn.classList.remove("active");
|
||
quickDirty = false;
|
||
renderAll();
|
||
});
|
||
saveReadingPositionSoon();
|
||
}
|
||
|
||
function markDirty() {
|
||
dirty = true;
|
||
}
|
||
|
||
function markQuickDirty() {
|
||
quickDirty = true;
|
||
}
|
||
|
||
function renderGptConfig(config) {
|
||
dom.gptBaseUrlInput.value = config.base_url || "https://api.openai.com/v1";
|
||
dom.gptModelInput.value = config.model || "gpt-4o-mini";
|
||
dom.gptApiKeyInput.value = "";
|
||
dom.glossaryPathInput.value = config.glossary_path || "";
|
||
dom.gptTranslationPromptInput.value = config.translation_prompt || (config.prompt_defaults && config.prompt_defaults.translation_prompt) || "";
|
||
dom.gptFormatPromptInput.value = config.format_prompt || (config.prompt_defaults && config.prompt_defaults.format_prompt) || "";
|
||
dom.gptCharacterPromptInput.value = config.character_prompt || (config.prompt_defaults && config.prompt_defaults.character_prompt) || "";
|
||
dom.resetGptPromptsBtn.dataset.translationPrompt = (config.prompt_defaults && config.prompt_defaults.translation_prompt) || "";
|
||
dom.resetGptPromptsBtn.dataset.formatPrompt = (config.prompt_defaults && config.prompt_defaults.format_prompt) || "";
|
||
dom.resetGptPromptsBtn.dataset.characterPrompt = (config.prompt_defaults && config.prompt_defaults.character_prompt) || "";
|
||
const source = config.key_source === "env" ? "环境变量" : config.key_source === "config" ? "本地配置" : "未配置";
|
||
dom.gptStatus.textContent = config.configured ? `已配置 · ${source} · ${config.model}` : "未配置 API Key，保存设置后可重翻。";
|
||
}
|
||
|
||
function renderTranslationGptConfig(config) {
|
||
if (!dom.translationBaseUrlInput) return;
|
||
dom.translationBaseUrlInput.value = config.base_url || "https://api.openai.com/v1";
|
||
dom.translationModelInput.value = config.model || "gpt-4o-mini";
|
||
dom.translationApiKeyInput.value = "";
|
||
dom.translationGlossaryPathInput.value = config.glossary_path || "";
|
||
dom.translationPromptInput.value = config.translation_prompt || (config.prompt_defaults && config.prompt_defaults.translation_prompt) || "";
|
||
dom.translationFormatPromptInput.value = config.format_prompt || (config.prompt_defaults && config.prompt_defaults.format_prompt) || "";
|
||
dom.translationCharacterPromptInput.value = config.character_prompt || (config.prompt_defaults && config.prompt_defaults.character_prompt) || "";
|
||
translationPromptDefaults = {
|
||
translation_prompt: (config.prompt_defaults && config.prompt_defaults.translation_prompt) || "",
|
||
format_prompt: (config.prompt_defaults && config.prompt_defaults.format_prompt) || "",
|
||
character_prompt: (config.prompt_defaults && config.prompt_defaults.character_prompt) || "",
|
||
};
|
||
const source = config.key_source === "env" ? "环境变量" : config.key_source === "config" ? "本地配置" : "未配置";
|
||
dom.translationGptStatus.textContent = config.configured ? `已配置 · ${source} · ${config.model}` : "未配置 API Key。";
|
||
}
|
||
|
||
function updateSeriesDrawerFromTranslation() {
|
||
if (!activeSeriesConfig) return;
|
||
dom.seriesGlossaryPathInput.value = dom.translationGlossaryPathInput.value;
|
||
dom.seriesTranslationPromptInput.value = dom.translationPromptInput.value;
|
||
dom.seriesFormatPromptInput.value = dom.translationFormatPromptInput.value;
|
||
dom.seriesCharacterPromptInput.value = dom.translationCharacterPromptInput.value;
|
||
}
|
||
|
||
function applySeriesConfigToTranslation(seriesConfig = {}) {
|
||
activeSeriesConfig = seriesConfig || {};
|
||
const applied = [];
|
||
if (activeSeriesConfig.glossary_path) {
|
||
dom.translationGlossaryPathInput.value = activeSeriesConfig.glossary_path;
|
||
applied.push("术语表");
|
||
}
|
||
if (activeSeriesConfig.translation_prompt) {
|
||
dom.translationPromptInput.value = activeSeriesConfig.translation_prompt;
|
||
applied.push("翻译提示词");
|
||
}
|
||
if (activeSeriesConfig.format_prompt) {
|
||
dom.translationFormatPromptInput.value = activeSeriesConfig.format_prompt;
|
||
applied.push("格式提示词");
|
||
}
|
||
if (activeSeriesConfig.character_prompt) {
|
||
dom.translationCharacterPromptInput.value = activeSeriesConfig.character_prompt;
|
||
applied.push("角色口吻");
|
||
}
|
||
translationUsesSeriesConfig = applied.length > 0;
|
||
if (translationUsesSeriesConfig) {
|
||
dom.translationGptStatus.textContent = `${dom.translationGptStatus.textContent} · 已套用系列${applied.join("、")}`;
|
||
}
|
||
}
|
||
|
||
async function loadGptConfig(force = false) {
|
||
if (gptConfigLoaded && !force) {
|
||
if (!glossaryLoaded) loadGlossary(false).catch(() => {});
|
||
return;
|
||
}
|
||
try {
|
||
const config = await api("/api/gpt/config");
|
||
renderGptConfig(config);
|
||
gptConfigLoaded = true;
|
||
loadGlossary(force).catch((error) => {
|
||
dom.glossaryMeta.textContent = `读取术语表失败：${error.message}`;
|
||
});
|
||
} catch (error) {
|
||
dom.gptStatus.textContent = `读取 GPT 配置失败：${error.message}`;
|
||
}
|
||
}
|
||
|
||
async function saveGptConfig() {
|
||
try {
|
||
const config = await api("/api/gpt/config", {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
base_url: dom.gptBaseUrlInput.value,
|
||
model: dom.gptModelInput.value,
|
||
api_key: dom.gptApiKeyInput.value,
|
||
glossary_path: dom.glossaryPathInput.value,
|
||
translation_prompt: dom.gptTranslationPromptInput.value,
|
||
format_prompt: dom.gptFormatPromptInput.value,
|
||
character_prompt: dom.gptCharacterPromptInput.value,
|
||
keep_existing: true,
|
||
}),
|
||
});
|
||
renderGptConfig(config);
|
||
gptConfigLoaded = true;
|
||
glossaryLoaded = false;
|
||
await loadGlossary(true);
|
||
toast("AI 设置已保存。");
|
||
} catch (error) {
|
||
toast(`保存 GPT 设置失败：${error.message}`, 7000);
|
||
}
|
||
}
|
||
|
||
async function saveTranslationGptConfig() {
|
||
try {
|
||
const pageConfig = {
|
||
glossary_path: dom.translationGlossaryPathInput.value,
|
||
translation_prompt: dom.translationPromptInput.value,
|
||
format_prompt: dom.translationFormatPromptInput.value,
|
||
character_prompt: dom.translationCharacterPromptInput.value,
|
||
};
|
||
const config = await api("/api/gpt/config", {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
base_url: dom.translationBaseUrlInput.value,
|
||
model: dom.translationModelInput.value,
|
||
api_key: dom.translationApiKeyInput.value,
|
||
keep_existing: true,
|
||
}),
|
||
});
|
||
renderTranslationGptConfig(config);
|
||
dom.translationGlossaryPathInput.value = pageConfig.glossary_path;
|
||
dom.translationPromptInput.value = pageConfig.translation_prompt;
|
||
dom.translationFormatPromptInput.value = pageConfig.format_prompt;
|
||
dom.translationCharacterPromptInput.value = pageConfig.character_prompt;
|
||
if (translationUsesSeriesConfig) {
|
||
dom.translationGptStatus.textContent = `${dom.translationGptStatus.textContent} · 已套用系列配置`;
|
||
}
|
||
renderGptConfig(config);
|
||
gptConfigLoaded = true;
|
||
glossaryLoaded = false;
|
||
toast("AI 设置已保存，整书翻译会使用这套配置。");
|
||
return config;
|
||
} catch (error) {
|
||
toast(`保存 API 设置失败：${error.message}`, 7000);
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
function resetTranslationPrompts() {
|
||
if (activeSeriesConfig && (
|
||
activeSeriesConfig.translation_prompt
|
||
|| activeSeriesConfig.format_prompt
|
||
|| activeSeriesConfig.character_prompt
|
||
|| activeSeriesConfig.glossary_path
|
||
)) {
|
||
applySeriesConfigToTranslation(activeSeriesConfig);
|
||
toast("已恢复同系列配置。");
|
||
return;
|
||
}
|
||
dom.translationPromptInput.value = translationPromptDefaults.translation_prompt || "";
|
||
dom.translationFormatPromptInput.value = translationPromptDefaults.format_prompt || "";
|
||
dom.translationCharacterPromptInput.value = translationPromptDefaults.character_prompt || "";
|
||
translationUsesSeriesConfig = false;
|
||
toast("已恢复翻译页预设提示词。");
|
||
}
|
||
|
||
function glossaryFilteredEntries() {
|
||
const q = (dom.glossarySearchInput.value || "").trim().toLowerCase();
|
||
if (!q) return glossaryEntries.map((entry, index) => ({ entry, index }));
|
||
return glossaryEntries
|
||
.map((entry, index) => ({ entry, index }))
|
||
.filter(({ entry }) => {
|
||
return [entry.source, entry.target, entry.clean_target]
|
||
.join("\n")
|
||
.toLowerCase()
|
||
.includes(q);
|
||
});
|
||
}
|
||
|
||
function updateGlossaryMeta(shownCount = null, matchCount = null) {
|
||
const matches = shownCount === null || matchCount === null ? glossaryFilteredEntries() : null;
|
||
const shown = shownCount === null ? Math.min(80, matches.length) : shownCount;
|
||
const matched = matchCount === null ? matches.length : matchCount;
|
||
const path = dom.glossaryPathInput.value || "未设置";
|
||
const dirtyText = glossaryDirty ? " · 有未保存修改" : "";
|
||
dom.glossaryMeta.textContent = `当前术语表：${path} · ${glossaryEntries.length} 条 · 显示 ${shown}/${matched}${dirtyText}`;
|
||
}
|
||
|
||
function setGlossaryDirty(value) {
|
||
glossaryDirty = value;
|
||
dom.saveGlossaryBtn.disabled = !glossaryDirty;
|
||
if (glossaryLoaded) updateGlossaryMeta();
|
||
}
|
||
|
||
function renderGlossary(payload = null) {
|
||
if (payload) {
|
||
glossaryEntries = (payload.entries || []).map((entry) => ({
|
||
source: entry.source || "",
|
||
target: entry.target || "",
|
||
clean_target: entry.clean_target || "",
|
||
}));
|
||
glossaryLoaded = true;
|
||
setGlossaryDirty(false);
|
||
if (payload.path) dom.glossaryPathInput.value = payload.path;
|
||
}
|
||
|
||
const matches = glossaryFilteredEntries();
|
||
const shown = matches.slice(0, 80);
|
||
updateGlossaryMeta(shown.length, matches.length);
|
||
dom.glossaryList.innerHTML = "";
|
||
if (!glossaryLoaded) {
|
||
dom.glossaryList.innerHTML = '<div class="glossaryEmpty">展开后会读取术语表。</div>';
|
||
return;
|
||
}
|
||
if (!shown.length) {
|
||
dom.glossaryList.innerHTML = '<div class="glossaryEmpty">没有匹配的术语。</div>';
|
||
return;
|
||
}
|
||
|
||
const frag = document.createDocumentFragment();
|
||
shown.forEach(({ entry, index }) => {
|
||
const row = document.createElement("div");
|
||
row.className = "glossaryRow";
|
||
row.dataset.index = String(index);
|
||
row.innerHTML = `
|
||
<input class="glossarySource" type="text" value="${escapeHtml(entry.source)}" aria-label="术语原文">
|
||
<input class="glossaryTarget" type="text" value="${escapeHtml(entry.target)}" aria-label="术语译名">
|
||
<button class="glossaryDelete" type="button" aria-label="删除术语">删除</button>
|
||
`;
|
||
row.querySelector(".glossarySource").addEventListener("input", (event) => {
|
||
glossaryEntries[index].source = event.target.value;
|
||
setGlossaryDirty(true);
|
||
});
|
||
row.querySelector(".glossaryTarget").addEventListener("input", (event) => {
|
||
glossaryEntries[index].target = event.target.value;
|
||
glossaryEntries[index].clean_target = event.target.value.split("#", 1)[0].trim();
|
||
setGlossaryDirty(true);
|
||
});
|
||
row.querySelector(".glossaryDelete").addEventListener("click", () => {
|
||
glossaryEntries.splice(index, 1);
|
||
setGlossaryDirty(true);
|
||
renderGlossary();
|
||
});
|
||
frag.appendChild(row);
|
||
});
|
||
dom.glossaryList.appendChild(frag);
|
||
}
|
||
|
||
async function loadGlossary(force = false) {
|
||
if (glossaryLoaded && !force) return;
|
||
const payload = await api("/api/glossary");
|
||
renderGlossary(payload);
|
||
}
|
||
|
||
function addGlossaryEntry() {
|
||
glossaryEntries.unshift({ source: "", target: "", clean_target: "" });
|
||
dom.glossarySearchInput.value = "";
|
||
glossaryLoaded = true;
|
||
setGlossaryDirty(true);
|
||
renderGlossary();
|
||
requestAnimationFrame(() => dom.glossaryList.querySelector(".glossarySource")?.focus());
|
||
}
|
||
|
||
async function saveGlossary() {
|
||
try {
|
||
const payload = await api("/api/glossary", {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
path: dom.glossaryPathInput.value,
|
||
entries: glossaryEntries,
|
||
}),
|
||
});
|
||
renderGlossary(payload);
|
||
toast("术语表已保存，下一次重翻会实时使用最新术语。");
|
||
} catch (error) {
|
||
toast(`保存术语表失败：${error.message}`, 9000);
|
||
}
|
||
}
|
||
|
||
function glossaryMatchedText(data) {
|
||
const matches = data.glossary_matches || [];
|
||
if (!matches.length) return "";
|
||
return `<div class="gptCandidateMeta">术语命中：${escapeHtml(matches.slice(0, 10).join("； "))}${matches.length > 10 ? ` 等 ${matches.length} 条` : ""}</div>`;
|
||
}
|
||
|
||
function resetGptPrompts() {
|
||
dom.gptTranslationPromptInput.value = dom.resetGptPromptsBtn.dataset.translationPrompt || "";
|
||
dom.gptFormatPromptInput.value = dom.resetGptPromptsBtn.dataset.formatPrompt || "";
|
||
dom.gptCharacterPromptInput.value = dom.resetGptPromptsBtn.dataset.characterPrompt || "";
|
||
toast("已恢复预设提示词，保存后生效。");
|
||
}
|
||
|
||
async function retranslateCurrentRow() {
|
||
if (!currentRow) return;
|
||
if (quickDirty) {
|
||
const ok = await saveCurrent(true);
|
||
if (!ok) return;
|
||
}
|
||
dom.retranslateBtn.disabled = true;
|
||
dom.retranslateBtn.textContent = "重翻中……";
|
||
dom.applyRetranslationBtn.disabled = true;
|
||
dom.gptCandidate.hidden = false;
|
||
dom.gptCandidate.textContent = "正在请求 GPT……";
|
||
try {
|
||
const data = await api(`/api/row/${encodeURIComponent(currentRow.id)}/retranslate`, {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
instruction: dom.gptInstructionInput.value,
|
||
}),
|
||
});
|
||
gptCandidateHtml = data.candidate_html || "";
|
||
dom.gptCandidate.innerHTML = `${glossaryMatchedText(data)}${gptCandidateHtml || escapeHtml(data.candidate_text || "")}`;
|
||
dom.applyRetranslationBtn.disabled = !gptCandidateHtml;
|
||
toast("已生成重翻候选，可确认后应用。");
|
||
} catch (error) {
|
||
dom.gptCandidate.textContent = `重翻失败：${error.message}`;
|
||
toast(`重翻失败：${error.message}`, 9000);
|
||
} finally {
|
||
dom.retranslateBtn.disabled = false;
|
||
dom.retranslateBtn.textContent = "重翻本段";
|
||
}
|
||
}
|
||
|
||
function applyRetranslation() {
|
||
if (!gptCandidateHtml) return;
|
||
dom.quickCnEditor.innerHTML = gptCandidateHtml;
|
||
quickDirty = true;
|
||
dom.applyRetranslationBtn.disabled = true;
|
||
toast("已应用到编辑框，保存后才会写入审校记录。");
|
||
}
|
||
|
||
function resetCurrentText() {
|
||
if (!currentRow) return;
|
||
dom.cnEditor.innerHTML = currentRow.cn_html || "";
|
||
markDirty();
|
||
}
|
||
|
||
function markSelectionInEditor(editor, markedInput, issueInput) {
|
||
const selection = window.getSelection();
|
||
if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
|
||
toast("请先在中文译文中选中要标记的文字。");
|
||
return false;
|
||
}
|
||
const range = selection.getRangeAt(0);
|
||
if (!editor.contains(range.commonAncestorContainer)) {
|
||
toast("只能标记中文译文区域内的文字。");
|
||
return false;
|
||
}
|
||
const mark = document.createElement("mark");
|
||
mark.className = "review-mark";
|
||
mark.setAttribute("data-review-mark", "bad-translation");
|
||
try {
|
||
range.surroundContents(mark);
|
||
} catch (_error) {
|
||
const fragment = range.extractContents();
|
||
mark.appendChild(fragment);
|
||
range.insertNode(mark);
|
||
}
|
||
selection.removeAllRanges();
|
||
markedInput.checked = true;
|
||
if (!issueInput.value) issueInput.value = "翻译腔";
|
||
return true;
|
||
}
|
||
|
||
function markSelection() {
|
||
if (markSelectionInEditor(dom.cnEditor, dom.markedInput, dom.issueTypeInput)) markDirty();
|
||
}
|
||
|
||
function markQuickSelection() {
|
||
if (markSelectionInEditor(dom.quickCnEditor, dom.quickMarkedInput, dom.quickIssueTypeInput)) markQuickDirty();
|
||
}
|
||
|
||
function clearMarks() {
|
||
dom.cnEditor.querySelectorAll("mark, .review-mark, [data-review-mark]").forEach((node) => {
|
||
const parent = node.parentNode;
|
||
while (node.firstChild) parent.insertBefore(node.firstChild, node);
|
||
parent.removeChild(node);
|
||
parent.normalize();
|
||
});
|
||
markDirty();
|
||
}
|
||
|
||
async function go(delta) {
|
||
const candidates = visibleRowsForScope();
|
||
if (!candidates.length) return;
|
||
const index = Math.max(0, candidates.findIndex((row) => currentRow && row.id === currentRow.id));
|
||
const next = Math.max(0, Math.min(candidates.length - 1, index + delta));
|
||
if (next === index) return;
|
||
await maybeSelectRow(candidates[next], { openEditor: currentMode === "polish", openQuick: currentMode === "reading" && !dom.quickEditor.hidden, scroll: true });
|
||
}
|
||
|
||
async function goPart(delta) {
|
||
const scopes = allReadingScopes();
|
||
if (!scopes.length) return;
|
||
const currentScopeId = activeReadingScopeId();
|
||
const index = Math.max(0, scopes.findIndex((scope) => scope.id === currentScopeId));
|
||
const next = Math.max(0, Math.min(scopes.length - 1, index + delta));
|
||
if (next === index) return;
|
||
const scope = scopes[next];
|
||
if (scope.type === "part") {
|
||
await selectPart(scope.part);
|
||
} else if (scope.type === "image") {
|
||
await selectImageItem(scope.chapter, scope.item);
|
||
} else {
|
||
await selectChapter(scope.chapter);
|
||
}
|
||
}
|
||
|
||
async function generateFeedback() {
|
||
if (!hasSession) return;
|
||
if (!(await maybeSaveBeforeSwitch())) return;
|
||
const data = await api("/api/feedback");
|
||
const downloadText = data.feedback_md_url ? `\n可在当前浏览器下载：${data.feedback_md_url}` : "";
|
||
toast(`已生成反馈文件：\n${data.feedback_md}\n${data.feedback_jsonl}${downloadText}`, 9000);
|
||
}
|
||
|
||
async function applyBack() {
|
||
if (!hasSession) return;
|
||
if (!(await maybeSaveBeforeSwitch())) return;
|
||
const data = await api("/api/apply", { method: "POST", body: "{}" });
|
||
toast(`已写回 EPUB 解包内容。\n修改文件数：${data.modified_files.length}\n反馈：${data.feedback_md}`, 9000);
|
||
}
|
||
|
||
async function exportEpub() {
|
||
if (!hasSession) return;
|
||
if (!(await maybeSaveBeforeSwitch())) return;
|
||
const data = await api("/api/export", { method: "POST", body: "{}" });
|
||
toast(`已导出审校 EPUB：\n${data.output}${data.download_url ? `\n可在当前浏览器下载：${data.download_url}` : ""}`, 10000);
|
||
}
|
||
|
||
function initEvents() {
|
||
readStoredReaderSettings();
|
||
applyReaderSettings(false);
|
||
initChromeMetrics();
|
||
|
||
[
|
||
dom.markedInput,
|
||
dom.cnEditor,
|
||
dom.issueTypeInput,
|
||
dom.severityInput,
|
||
dom.tagsInput,
|
||
dom.commentInput,
|
||
dom.learnNoteInput,
|
||
].forEach((el) => {
|
||
el.addEventListener("input", markDirty);
|
||
el.addEventListener("change", markDirty);
|
||
});
|
||
|
||
[
|
||
dom.quickMarkedInput,
|
||
dom.quickCnEditor,
|
||
dom.quickIssueTypeInput,
|
||
dom.quickSeverityInput,
|
||
dom.quickTagsInput,
|
||
dom.quickCommentInput,
|
||
dom.quickLearnNoteInput,
|
||
].forEach((el) => {
|
||
el.addEventListener("input", markQuickDirty);
|
||
el.addEventListener("change", markQuickDirty);
|
||
});
|
||
|
||
dom.searchInput.addEventListener("input", () => {
|
||
currentIndex = -1;
|
||
applyFilter(true);
|
||
});
|
||
dom.searchScopeCurrentBtn.addEventListener("click", () => setSearchScope("current"));
|
||
dom.searchScopeBookBtn.addEventListener("click", () => setSearchScope("book"));
|
||
dom.tocPanelBtn.addEventListener("click", () => {
|
||
if (sidePanelMode === "toc") {
|
||
closeSidePanel();
|
||
} else {
|
||
openSidePanel("toc");
|
||
}
|
||
});
|
||
dom.searchPanelBtn.addEventListener("click", () => {
|
||
if (sidePanelMode === "search") {
|
||
closeSidePanel();
|
||
} else {
|
||
openSidePanel("search");
|
||
}
|
||
});
|
||
dom.reviewToolsBtn.addEventListener("click", async () => {
|
||
if (!hasSession) return;
|
||
if (!dom.quickEditor.hidden) {
|
||
await closeQuickEditor(false);
|
||
return;
|
||
}
|
||
const ok = await maybeSaveBeforeSwitch();
|
||
if (!ok) return;
|
||
openQuickEditor(null);
|
||
});
|
||
dom.closeSidebarBtn.addEventListener("click", closeSidePanel);
|
||
dom.bookshelfBtn.addEventListener("click", () => {
|
||
showBookshelf().catch((error) => toast(`打开书架失败：${error.message}`, 7000));
|
||
});
|
||
dom.showTouchedBtn.addEventListener("click", () => {
|
||
showTouchedOnly = !showTouchedOnly;
|
||
dom.showTouchedBtn.classList.toggle("primary", showTouchedOnly);
|
||
applyFilter(true);
|
||
});
|
||
dom.expandTocBtn.addEventListener("click", expandAllChapters);
|
||
dom.collapseTocBtn.addEventListener("click", collapseAllChapters);
|
||
dom.readingModeBtn.addEventListener("click", () => setMode("reading"));
|
||
dom.polishModeBtn.addEventListener("click", () => setMode("polish"));
|
||
dom.openLibraryBtn.addEventListener("click", async () => {
|
||
if (!(await leaveReviewShell())) return;
|
||
await showStartScreen();
|
||
});
|
||
[
|
||
dom.themeDefaultBtn,
|
||
dom.themeEyeBtn,
|
||
dom.themeNightBtn,
|
||
].forEach((button) => {
|
||
button.addEventListener("click", () => setReaderTheme(button.dataset.readerTheme));
|
||
});
|
||
dom.readerFontSizeInput.addEventListener("input", () => setReaderFontSize(dom.readerFontSizeInput.value));
|
||
dom.readerLineHeightInput.addEventListener("input", () => setReaderLineHeight(dom.readerLineHeightInput.value));
|
||
dom.prevPartBtn.addEventListener("click", () => goPart(-1));
|
||
dom.nextPartBtn.addEventListener("click", () => goPart(1));
|
||
dom.resetTextBtn.addEventListener("click", resetCurrentText);
|
||
dom.markSelectionBtn.addEventListener("click", markSelection);
|
||
dom.clearMarksBtn.addEventListener("click", clearMarks);
|
||
dom.saveBtn.addEventListener("click", () => saveCurrent(false));
|
||
dom.prevBtn.addEventListener("click", () => go(-1));
|
||
dom.nextBtn.addEventListener("click", () => go(1));
|
||
dom.feedbackBtn.addEventListener("click", generateFeedback);
|
||
dom.applyBtn.addEventListener("click", applyBack);
|
||
dom.exportBtn.addEventListener("click", exportEpub);
|
||
dom.uploadForm.addEventListener("submit", uploadEpub);
|
||
dom.epubFileInput.addEventListener("change", () => {
|
||
const file = dom.epubFileInput.files && dom.epubFileInput.files[0];
|
||
dom.selectedFileName.textContent = file ? file.name : "尚未选择文件";
|
||
});
|
||
dom.refreshSessionsBtn.addEventListener("click", () => {
|
||
refreshSessions().catch((error) => toast(`刷新失败：${error.message}`, 7000));
|
||
});
|
||
dom.bookshelfRefreshBtn.addEventListener("click", () => {
|
||
refreshBookshelf().catch((error) => toast(`刷新书架失败：${error.message}`, 7000));
|
||
});
|
||
dom.bookshelfOpenUploadBtn.addEventListener("click", async () => {
|
||
if (!(await leaveReviewShell())) return;
|
||
await showStartScreen();
|
||
});
|
||
if (dom.bookshelfOpenUploadBtnInline) {
|
||
dom.bookshelfOpenUploadBtnInline.addEventListener("click", async () => {
|
||
if (!(await leaveReviewShell())) return;
|
||
await showStartScreen();
|
||
});
|
||
}
|
||
if (dom.bookshelfSearchInput) {
|
||
dom.bookshelfSearchInput.addEventListener("input", () => {
|
||
bookshelfSearch = dom.bookshelfSearchInput.value || "";
|
||
renderBookshelfFromState(activeBookshelfSessionId);
|
||
});
|
||
}
|
||
if (dom.seriesConfigBtn) {
|
||
dom.seriesConfigBtn.addEventListener("click", () => {
|
||
openSeriesConfigDrawer().catch((error) => toast(`读取系列设置失败：${error.message}`, 7000));
|
||
});
|
||
}
|
||
if (dom.closeSeriesConfigBtn) {
|
||
dom.closeSeriesConfigBtn.addEventListener("click", closeSeriesConfigDrawer);
|
||
}
|
||
if (dom.saveSeriesConfigBtn) {
|
||
dom.saveSeriesConfigBtn.addEventListener("click", () => {
|
||
saveActiveSeriesConfig(true).catch((error) => toast(`保存系列设置失败：${error.message}`, 9000));
|
||
});
|
||
}
|
||
dom.translationBackBookshelfBtn.addEventListener("click", () => {
|
||
showBookshelf().catch((error) => toast(`返回书架失败：${error.message}`, 7000));
|
||
});
|
||
dom.translationOpenReviewBtn.addEventListener("click", () => {
|
||
if (!translationOutputSessionId) return;
|
||
openSession(translationOutputSessionId).catch((error) => toast(`打开输出审校失败：${error.message}`, 7000));
|
||
});
|
||
dom.translationSaveConfigBtn.addEventListener("click", () => {
|
||
saveTranslationGptConfig().catch(() => {});
|
||
});
|
||
dom.translationResetPromptsBtn.addEventListener("click", resetTranslationPrompts);
|
||
dom.translationForm.addEventListener("submit", startTranslationJob);
|
||
dom.translationRangeModeInput.addEventListener("change", () => {
|
||
dom.translationLimitInput.disabled = dom.translationRangeModeInput.value === "all";
|
||
});
|
||
dom.closeQuickEditorBtn.addEventListener("click", () => {
|
||
closeQuickEditor(false).catch((error) => toast(`关闭失败：${error.message}`, 7000));
|
||
});
|
||
dom.quickSaveBtn.addEventListener("click", () => saveCurrent(false));
|
||
dom.quickMarkSelectionBtn.addEventListener("click", markQuickSelection);
|
||
dom.saveGptConfigBtn.addEventListener("click", saveGptConfig);
|
||
dom.resetGptPromptsBtn.addEventListener("click", resetGptPrompts);
|
||
dom.reloadGlossaryBtn.addEventListener("click", () => {
|
||
if (glossaryDirty && !window.confirm("术语表有未保存修改，重新读取会丢失这些修改。继续吗？")) return;
|
||
loadGlossary(true)
|
||
.then(() => toast("术语表已重新读取。"))
|
||
.catch((error) => toast(`读取术语表失败：${error.message}`, 9000));
|
||
});
|
||
dom.addGlossaryEntryBtn.addEventListener("click", addGlossaryEntry);
|
||
dom.saveGlossaryBtn.addEventListener("click", saveGlossary);
|
||
dom.glossarySearchInput.addEventListener("input", () => renderGlossary());
|
||
dom.glossaryPathInput.addEventListener("change", async () => {
|
||
if (glossaryDirty && !window.confirm("术语表有未保存修改，切换路径会丢失这些修改。继续吗？")) return;
|
||
try {
|
||
await api("/api/glossary", {
|
||
method: "POST",
|
||
body: JSON.stringify({ path: dom.glossaryPathInput.value }),
|
||
});
|
||
glossaryLoaded = false;
|
||
await loadGlossary(true);
|
||
toast("已切换术语表路径。");
|
||
} catch (error) {
|
||
toast(`切换术语表失败：${error.message}`, 9000);
|
||
}
|
||
});
|
||
dom.retranslateBtn.addEventListener("click", retranslateCurrentRow);
|
||
dom.applyRetranslationBtn.addEventListener("click", applyRetranslation);
|
||
dom.quickOpenFullBtn.addEventListener("click", async () => {
|
||
if (quickDirty) {
|
||
const ok = await saveCurrent(true);
|
||
if (!ok) return;
|
||
}
|
||
await setMode("polish", false);
|
||
});
|
||
|
||
document.addEventListener("keydown", async (event) => {
|
||
if (event.ctrlKey && event.key.toLowerCase() === "s") {
|
||
event.preventDefault();
|
||
await saveCurrent(false);
|
||
return;
|
||
}
|
||
if (event.target && ["INPUT", "TEXTAREA"].includes(event.target.tagName)) return;
|
||
if (event.altKey && event.key === "ArrowLeft") {
|
||
event.preventDefault();
|
||
go(-1);
|
||
}
|
||
if (event.altKey && event.key === "ArrowRight") {
|
||
event.preventDefault();
|
||
go(1);
|
||
}
|
||
if (event.altKey && event.key === "ArrowUp") {
|
||
event.preventDefault();
|
||
goPart(-1);
|
||
}
|
||
if (event.altKey && event.key === "ArrowDown") {
|
||
event.preventDefault();
|
||
goPart(1);
|
||
}
|
||
if (event.key === "Escape" && !dom.quickEditor.hidden) {
|
||
event.preventDefault();
|
||
closeQuickEditor(false).catch((error) => toast(`关闭失败：${error.message}`, 7000));
|
||
return;
|
||
}
|
||
if (event.key === "Escape" && sidePanelMode) {
|
||
event.preventDefault();
|
||
closeSidePanel();
|
||
}
|
||
});
|
||
|
||
document.addEventListener("mousemove", updateChromeVisibility, { passive: true });
|
||
document.addEventListener("focusin", (event) => {
|
||
if (event.target && (event.target.closest(".topbar") || event.target.closest(".readerHeader"))) {
|
||
showChromeBriefly();
|
||
}
|
||
});
|
||
window.addEventListener("beforeunload", (event) => {
|
||
sendReadingPositionBeacon();
|
||
if (!dirty && !quickDirty) return;
|
||
event.preventDefault();
|
||
event.returnValue = "";
|
||
});
|
||
document.addEventListener("visibilitychange", () => {
|
||
if (document.visibilityState === "hidden") {
|
||
sendReadingPositionBeacon();
|
||
} else {
|
||
saveReadingPositionSoon();
|
||
}
|
||
});
|
||
dom.readerPane.addEventListener("scroll", saveReadingPositionSoon, { passive: true });
|
||
}
|
||
|
||
async function main() {
|
||
initEvents();
|
||
try {
|
||
const session = await loadSession();
|
||
if (!session || !session.has_session) {
|
||
return;
|
||
}
|
||
await loadActiveSession({ message: "阅读模式已就绪。可连续阅读，点击段落即可打开精修与重翻面板。" });
|
||
} catch (error) {
|
||
await showStartScreen();
|
||
toast(`启动时未载入 EPUB：${error.message}`, 7000);
|
||
}
|
||
}
|
||
|
||
main();
|