Upload 2 files

static/app.js

@@ -45,6 +45,7 @@ const PERIOD_PRESETS = [
   { label: "南巡-2012", from: "19920118", to: "20121114" },
   { label: "2012-", from: "20121115", to: "" },
 ];
+const TAG_TYPES = ["文稿大类", "文稿类型", "地点", "人物", "出版方/发行方", "主题/事件", "记录", "审核", "翻译", "翻印/传抄"];
 
 const DOM = {};
 
@@ -582,6 +583,7 @@ function clearPreviewDom() {
   DOM.previewPanel.hidden = true;
   DOM.previewPanel.style.display = "none";
   DOM.previewPanel.innerHTML = "";
+  DOM.previewPanel.classList.remove("proofread-mode");
 }
 
 function closePreview(useHistory = false) {
@@ -1274,6 +1276,7 @@ async function restorePreview(scroll = true) {
       setCachedPreview(docId, item);
     }
     if (requestSeq !== previewRequestSeq || STATE.preview !== docId) return;
+    DOM.previewPanel.classList.remove("proofread-mode");
     DOM.previewPanel.innerHTML = previewHTML(item);
     DOM.previewPanel.hidden = false;
     DOM.previewPanel.style.display = "flex";
@@ -1307,7 +1310,7 @@ function previewHTML(item, compareItem = null) {
     const diff = diffHTML(item.content || "", compareItem.content || "");
     return `<div class="preview-header"><div class="preview-heading">${previewTitleHTML(item)}<div class="preview-compare-note">正在对比：${escapeHTML(item.publication_name)} / ${escapeHTML(compareItem.publication_name)}</div></div><div class="preview-actions">${actions}</div></div><div class="preview-compare-grid"><div>${previewMetaHTML(item)}<pre class="preview-body compare-body">${diff.left}</pre></div><div>${previewMetaHTML(compareItem)}<pre class="preview-body compare-body">${diff.right}</pre></div></div>`;
   }
-  return `<div class="preview-header"><div class="preview-heading">${previewTitleHTML(item)}${previewMetaHTML(item)}</div><div class="preview-actions">${actions}</div></div><pre class="preview-body">${highlightPreviewText(item.content || "")}</pre>`;
+  return `<div class="preview-header"><div class="preview-heading">${previewTitleHTML(item)}${previewMetaHTML(item)}</div><div class="preview-actions">${actions}</div></div><pre class="preview-body" data-proofread-select>${highlightPreviewText(item.content || "")}</pre>`;
 }
 
 function previewDownloadHTML(item) {
@@ -1412,9 +1415,130 @@ function changePreviewTagPage(button) {
 }
 
 function compareSelectHTML(item) {
-  if (!item.variants || !item.variants.length) return "";
+  const proofread = item.article && Array.isArray(item.article.parts) && item.source_files && item.source_files.length
+    ? '<option value="__proofread__">对比原文件并校对</option>'
+    : "";
+  if ((!item.variants || !item.variants.length) && !proofread) return "";
   const options = item.variants.map((variant) => `<option value="${escapeHTML(variant.doc_id)}">${escapeHTML(variant.publication_name)}</option>`).join("");
-  return `<label class="preview-compare-control" title="选择对比版本"><span>对比版本</span><select data-compare-select aria-label="选择对比版本"><option value="">对比版本</option>${options}</select></label>`;
+  return `<label class="preview-compare-control" title="选择对比版本"><span>对比版本</span><select data-compare-select aria-label="选择对比版本"><option value="">对比版本</option>${proofread}${options}</select></label>`;
+}
+
+function textDelta(original, edited) {
+  if (original === edited) return "";
+  const removed = original ? `-${original.length}` : "";
+  const added = edited ? `+${encodeURI(edited).replace(/%20/g, " ")}` : "";
+  return [removed, added].filter(Boolean).join("\t");
+}
+
+function partTextWithPivots(article, partIndex) {
+  const chars = Array.from(String(article.parts[partIndex].text || ""));
+  (article.comment_pivots || [])
+    .filter((pivot) => Number(pivot.part_idx) === partIndex)
+    .sort((a, b) => Number(b.offset) - Number(a.offset))
+    .forEach((pivot) => chars.splice(Number(pivot.offset), 0, `〔${pivot.index}〕`));
+  return chars.join("");
+}
+
+function listEditorHTML(kind, values, fields) {
+  const rows = values.map((value) => {
+    const inputs = fields.map((field) => {
+      const current = typeof value === "object" ? (value[field.key] == null ? "" : value[field.key]) : value;
+      if (field.options) return `<select data-list-field="${field.key}" aria-label="${field.label}"><option value="">${field.label}</option>${field.options.map((option) => `<option value="${escapeHTML(option)}" ${current === option ? "selected" : ""}>${escapeHTML(option)}</option>`).join("")}</select>`;
+      return `<input data-list-field="${field.key}" type="${field.type || "text"}" placeholder="${field.label}" value="${escapeHTML(current)}">`;
+    }).join("");
+    return `<div class="proofread-list-row" data-list-row>${inputs}<button type="button" class="icon-btn-sm" data-remove-list aria-label="删除条目">×</button></div>`;
+  }).join("");
+  return `<div class="proofread-list" data-list="${kind}">${rows}<button type="button" class="text-btn-sm" data-add-list="${kind}">添加</button></div>`;
+}
+
+function proofreadHTML(item) {
+  const article = item.article || {};
+  const sourceFiles = item.source_files || [];
+  const requestedPage = Math.max(1, Number(article.page_start) || 1);
+  const defaultFile = sourceFiles.length > 1 ? Math.min(sourceFiles.length - 1, requestedPage - 1) : 0;
+  const sourceOptions = sourceFiles.map((file) => `<option value="${file.index}" ${Number(file.index) === defaultFile ? "selected" : ""}>${escapeHTML(file.name)}</option>`).join("");
+  const sourcePicker = sourceFiles.length > 1 ? `<select data-proofread-source-file aria-label="选择原文件">${sourceOptions}</select>` : "";
+  const pdfPage = sourceFiles.length === 1 ? `#page=${requestedPage}` : "";
+  const parts = (article.parts || []).map((part, index) => `<label class="proofread-field proofread-part" data-proofread-part="${index}"><span>段落 ${index + 1} / ${escapeHTML(part.type || "正文")}</span><textarea data-proofread-part-input="${index}">${escapeHTML(partTextWithPivots(article, index))}</textarea></label>`).join("");
+  const comments = (article.comments || []).map((comment, index) => `<label class="proofread-field"><span>注释 ${index + 1}</span><textarea data-proofread-comment="${index}">${escapeHTML(comment)}</textarea></label>`).join("");
+  const tags = Array.isArray(article.tags) ? article.tags : [];
+  const actions = `<div class="preview-tools"><button type="button" class="icon-btn-sm" data-close-preview aria-label="关闭预览">×</button></div>`;
+  return `<div class="preview-header"><div class="preview-heading">${previewTitleHTML(item)}<div class="preview-compare-note">对比原文件并校对</div></div><div class="preview-actions">${actions}</div></div><div class="proofread-grid"><section class="proofread-source"><div class="proofread-pane-header"><span>原文件</span>${sourcePicker}</div><iframe data-proofread-source title="原文件" src="/api/download/source/${encodeURIComponent(item.doc_id)}?file=${defaultFile}&inline=true${pdfPage}"></iframe></section><form class="proofread-editor" data-proofread-form><div class="proofread-pane-header"><span>校订内容</span><button type="submit" class="result-action-btn primary">提交校订</button></div><fieldset><legend>文章元数据</legend><label class="proofread-field"><span>标题</span><input data-meta-title value="${escapeHTML(article.title || item.title || "")}"></label><label class="proofread-field"><span>作者</span>${listEditorHTML("authors", article.authors || item.authors || [], [{ key: "value", label: "作者" }])}</label><label class="proofread-field"><span>日期</span>${listEditorHTML("dates", article.dates || [], [{ key: "year", label: "年", type: "number" }, { key: "month", label: "月", type: "number" }, { key: "day", label: "日", type: "number" }])}</label><label class="proofread-field"><span>标签</span>${listEditorHTML("tags", tags, [{ key: "name", label: "名称" }, { key: "type", label: "类型", options: TAG_TYPES }])}</label></fieldset><fieldset><legend>来源元数据</legend><label class="proofread-field"><span>来源名称</span><input data-source-name value="${escapeHTML(item.publication_name || "")}"></label><label class="proofread-field"><span>来源作者</span><input data-source-author value="${escapeHTML(item.publication_author || "")}"></label><label class="proofread-field"><span>来源类型</span><input data-source-type value="${escapeHTML(item.publication_type || "")}"></label><label class="proofread-field"><span>来源文件</span>${listEditorHTML("files", sourceFiles.map((file) => file.url), [{ key: "value", label: "URL" }])}</label></fieldset><fieldset><legend>正文</legend><label class="proofread-field"><span>描述</span><textarea data-proofread-description>${escapeHTML(article.description || "")}</textarea></label>${parts}</fieldset><fieldset><legend>注释</legend>${comments || '<div class="proofread-empty">无注释</div>'}</fieldset><label class="proofread-field"><span>说明</span><textarea data-proofread-note maxlength="2000"></textarea></label></form></div>`;
+}
+
+function openProofread(item, focusPart = null) {
+  if (!item) return;
+  DOM.previewPanel.classList.add("proofread-mode");
+  DOM.previewPanel.innerHTML = proofreadHTML(item);
+  if (focusPart != null) requestAnimationFrame(() => {
+    const input = DOM.previewPanel.querySelector(`[data-proofread-part-input="${focusPart}"]`);
+    if (input) input.focus();
+  });
+}
+
+function readList(form, kind) {
+  return [...form.querySelectorAll(`[data-list="${kind}"] [data-list-row]`)].map((row) => {
+    const values = {};
+    row.querySelectorAll("[data-list-field]").forEach((input) => {
+      if (input.value !== "") values[input.dataset.listField] = input.type === "number" ? Number(input.value) : input.value.trim();
+    });
+    return kind === "authors" || kind === "files" ? (values.value || "") : values;
+  }).filter((value) => typeof value === "string" ? Boolean(value) : Object.keys(value).length);
+}
+
+function proofreadPayload(item, form) {
+  const article = item.article || {};
+  const patch = { version: 2, parts: {}, comments: {}, description: "" };
+  form.querySelectorAll("[data-proofread-part-input]").forEach((input) => {
+    const index = Number(input.dataset.proofreadPartInput);
+    const delta = textDelta(partTextWithPivots(article, index), input.value);
+    if (delta) patch.parts[index] = { diff: delta };
+  });
+  form.querySelectorAll("[data-proofread-comment]").forEach((input) => {
+    const index = Number(input.dataset.proofreadComment);
+    const delta = textDelta(String((article.comments || [])[index] || ""), input.value);
+    if (delta) patch.comments[index + 1] = { diff: delta };
+  });
+  patch.description = textDelta(String(article.description || ""), form.querySelector("[data-proofread-description]").value);
+  const articleMeta = {
+    title: form.querySelector("[data-meta-title]").value.trim(),
+    authors: readList(form, "authors"), dates: readList(form, "dates"), tags: readList(form, "tags"),
+  };
+  const sourceMeta = {
+    name: form.querySelector("[data-source-name]").value.trim(),
+    author: form.querySelector("[data-source-author]").value.trim(),
+    type: form.querySelector("[data-source-type]").value.trim(), files: readList(form, "files"),
+  };
+  const changedPatch = Object.keys(patch.parts).length || Object.keys(patch.comments).length || patch.description;
+  const same = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+  const changedArticle = !same(articleMeta, { title: article.title || item.title || "", authors: article.authors || item.authors || [], dates: article.dates || [], tags: article.tags || [] });
+  const changedSource = !same(sourceMeta, { name: item.publication_name || "", author: item.publication_author || "", type: item.publication_type || "", files: (item.source_files || []).map((file) => file.url) });
+  return {
+    doc_id: item.doc_id,
+    patch: changedPatch ? patch : null,
+    metadata: changedArticle || changedSource ? { ...(changedArticle ? { article: articleMeta } : {}), ...(changedSource ? { source: sourceMeta } : {}) } : null,
+    description: form.querySelector("[data-proofread-note]").value.trim(),
+  };
+}
+
+async function submitProofreadForm(form) {
+  const item = getCachedPreview(STATE.preview);
+  if (!item) return;
+  const payload = proofreadPayload(item, form);
+  if (!payload.patch && !payload.metadata) {
+    showToast("没有需要提交的修改");
+    return;
+  }
+  const submit = form.querySelector('button[type="submit"]');
+  submit.disabled = true;
+  try {
+    await apiWithTimeout("/api/proofread", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) }, 30000);
+    showToast("校订已提交，等待生成 PR");
+  } catch (error) {
+    showToast("校订提交失败");
+  } finally {
+    submit.disabled = false;
+  }
 }
 
 async function comparePreview(docId) {
@@ -1437,6 +1561,7 @@ async function comparePreview(docId) {
     if (!currentCached) setCachedPreview(baseDocId, current);
     if (!targetCached) setCachedPreview(docId, target);
     compareAbortController = null;
+    DOM.previewPanel.classList.remove("proofread-mode");
     DOM.previewPanel.innerHTML = previewHTML(current, target);
   } catch (error) {
     if (error.name === "AbortError" || requestSeq !== compareRequestSeq) return;
@@ -1708,6 +1833,27 @@ function attachEvents() {
     }
   });
   DOM.previewPanel.addEventListener("click", (event) => {
+    const addList = event.target.closest("[data-add-list]");
+    if (addList) {
+      const kind = addList.dataset.addList;
+      const fields = kind === "dates"
+        ? [{ key: "year", label: "年", type: "number" }, { key: "month", label: "月", type: "number" }, { key: "day", label: "日", type: "number" }]
+        : kind === "tags" ? [{ key: "name", label: "名称" }, { key: "type", label: "类型", options: TAG_TYPES }]
+          : [{ key: "value", label: kind === "authors" ? "作者" : "URL" }];
+      const holder = document.createElement("div");
+      holder.innerHTML = listEditorHTML(kind, [kind === "dates" || kind === "tags" ? {} : ""], fields);
+      const row = holder.querySelector("[data-list-row]");
+      addList.before(row);
+      const firstInput = row.querySelector("input");
+      if (firstInput) firstInput.focus();
+      return;
+    }
+    const removeList = event.target.closest("[data-remove-list]");
+    if (removeList) {
+      const row = removeList.closest("[data-list-row]");
+      if (row) row.remove();
+      return;
+    }
     const tagPageButton = event.target.closest("[data-preview-tag-page-change]");
     if (tagPageButton) {
       changePreviewTagPage(tagPageButton);
@@ -1721,8 +1867,31 @@ function attachEvents() {
   });
   DOM.previewPanel.addEventListener("change", (event) => {
     const select = event.target.closest("[data-compare-select]");
-    if (!select || !select.value) return;
-    comparePreview(select.value);
+    if (select && select.value) {
+      if (select.value === "__proofread__") openProofread(getCachedPreview(STATE.preview));
+      else comparePreview(select.value);
+      return;
+    }
+    const sourceFile = event.target.closest("[data-proofread-source-file]");
+    if (sourceFile) {
+      const frame = DOM.previewPanel.querySelector("[data-proofread-source]");
+      if (frame) frame.src = `/api/download/source/${encodeURIComponent(STATE.preview)}?file=${encodeURIComponent(sourceFile.value)}&inline=true`;
+    }
+  });
+  DOM.previewPanel.addEventListener("submit", (event) => {
+    const form = event.target.closest("[data-proofread-form]");
+    if (!form) return;
+    event.preventDefault();
+    submitProofreadForm(form);
+  });
+  DOM.previewPanel.addEventListener("mouseup", (event) => {
+    if (!event.target.closest("[data-proofread-select]")) return;
+    const selection = window.getSelection();
+    const selected = String(selection ? selection.toString() : "").trim();
+    const item = getCachedPreview(STATE.preview);
+    if (!selected || !item || !item.article || !item.article.parts) return;
+    const partIndex = item.article.parts.findIndex((_part, index) => partTextWithPivots(item.article, index).includes(selected));
+    openProofread(item, partIndex >= 0 ? partIndex : null);
   });
   DOM.prevPage.addEventListener("click", () => {
     DOM.pageInput.value = String(STATE.page);

static/style.css

@@ -559,6 +559,126 @@ ul, li {
   border-right: 1px solid var(--outline-variant);
 }
 
+.preview-panel.proofread-mode {
+  max-height: calc(100vh - 110px);
+}
+
+.proofread-grid {
+  display: grid;
+  grid-template-columns: minmax(360px, 1fr) minmax(420px, 1fr);
+  min-height: 0;
+  flex: 1;
+}
+
+.proofread-source,
+.proofread-editor {
+  min-width: 0;
+  min-height: 0;
+}
+
+.proofread-source {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--outline-variant);
+}
+
+.proofread-source iframe {
+  width: 100%;
+  min-height: 520px;
+  flex: 1;
+  border: 0;
+  background: #fff;
+}
+
+.proofread-pane-header {
+  display: flex;
+  min-height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--outline-variant);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.proofread-pane-header select {
+  max-width: 70%;
+}
+
+.proofread-editor {
+  overflow: auto;
+  padding: 12px;
+}
+
+.proofread-editor fieldset {
+  margin: 0 0 14px;
+  padding: 10px;
+  border: 1px solid var(--outline-variant);
+  border-radius: 6px;
+}
+
+.proofread-editor legend {
+  padding: 0 5px;
+  color: var(--on-surface-variant);
+  font-size: 12px;
+}
+
+.proofread-field {
+  display: grid;
+  gap: 5px;
+  margin-bottom: 10px;
+  font-size: 12px;
+  color: var(--on-surface-variant);
+}
+
+.proofread-field input,
+.proofread-field select,
+.proofread-field textarea,
+.proofread-pane-header select {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--outline-variant);
+  border-radius: 4px;
+  background: var(--surface);
+  color: var(--on-surface);
+  padding: 7px 8px;
+  font: inherit;
+}
+
+.proofread-field textarea {
+  min-height: 76px;
+  resize: vertical;
+  line-height: 1.6;
+}
+
+.proofread-part textarea {
+  min-height: 120px;
+  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", var(--font-sans);
+  font-size: 15px;
+}
+
+.proofread-list {
+  display: grid;
+  gap: 6px;
+}
+
+.proofread-list-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) 28px;
+  gap: 5px;
+  align-items: center;
+}
+
+.proofread-list > .text-btn-sm {
+  justify-self: start;
+}
+
+.proofread-empty {
+  color: var(--on-surface-variant);
+  font-size: 12px;
+}
+
 .preview-compare-grid .preview-path {
   padding: 10px 14px 0;
 }
@@ -650,6 +770,26 @@ body.mobile .preview-compare-grid {
   overflow-y: auto;
 }
 
+body.mobile .proofread-grid {
+  display: block;
+  overflow-y: auto;
+}
+
+body.mobile .proofread-source {
+  height: 52vh;
+  border-right: 0;
+  border-bottom: 1px solid var(--reader-divider, var(--outline-variant));
+}
+
+body.mobile .proofread-source iframe {
+  min-height: 0;
+}
+
+body.mobile .proofread-editor {
+  overflow: visible;
+  padding-bottom: max(28px, env(safe-area-inset-bottom));
+}
+
 body.mobile .preview-compare-grid > div:first-child {
   border-right: none;
   border-bottom: 1px solid var(--outline-variant);