Refine PACS viewer annotation workflow

2026-05-27 10:25:33 +08:00
parent 9c478ed392
commit ac75c37e3f
5 changed files with 971 additions and 161 deletions
--- a/PACS_DICOM处理/数据处理网页端/static/app.js
+++ b/PACS_DICOM处理/数据处理网页端/static/app.js
@@ -4,6 +4,7 @@ const app = {
  study: null,
  series: [],
  activeSeries: null,
+  draft: null,
  slice: 0,
  plane: "axial",
  window: "default",
@@ -14,12 +15,21 @@ const app = {
  imageUrl: "",
  searchTimer: null,
  statusTimer: null,
+  saveTimer: null,
  pendingImage: null,
  drag: null,
+  seriesSort: "asc",
+  showOverlay: true,
 };

 const $ = (id) => document.getElementById(id);
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const BODY_PARTS = ["head_neck", "chest", "upper_abdomen", "lower_abdomen", "pelvis"];
+const WINDOW_PRESETS = {
+  bone: { wl: 500, ww: 1800 },
+  soft: { wl: 50, ww: 360 },
+  contrast: { wl: 90, ww: 140 },
+};

 function escapeHtml(value) {
  return String(value ?? "")
@@ -80,6 +90,10 @@ function timeRange(series) {
  return first || last || "未记录";
 }

+function timeKey(series) {
+  return String(series.series_time || series.first_time || series.study_time || "").replace(/\D/g, "").padEnd(6, "0");
+}
+
 function phaseLabel(value) {
  return { arterial: "动脉期", portal_venous: "门静脉期", unknown: "无法判别" }[value] || "";
 }
@@ -94,6 +108,28 @@ function partLabel(value) {
  }[value] || value;
 }

+function asList(value) {
+  return Array.isArray(value) ? value : [];
+}
+
+function uniq(list) {
+  return Array.from(new Set(list.filter(Boolean)));
+}
+
+function parseFirstNumber(value) {
+  const match = String(value || "").match(/-?\d+(\.\d+)?/);
+  return match ? Number(match[0]) : null;
+}
+
+function ageText(birthDate, studyDate) {
+  const birth = String(birthDate || "");
+  const study = String(studyDate || "");
+  if (birth.length !== 8 || study.length !== 8) return "";
+  let age = Number(study.slice(0, 4)) - Number(birth.slice(0, 4));
+  if (study.slice(4) < birth.slice(4)) age -= 1;
+  return age > 0 ? `${age}Y` : "";
+}
+
 async function login(event) {
  event.preventDefault();
  $("loginError").textContent = "";
@@ -132,6 +168,22 @@ async function refreshStatus() {
  }
 }

+function sortSeries(list) {
+  return [...list].sort((a, b) => {
+    const skipA = a.annotation?.skipped ? 1 : 0;
+    const skipB = b.annotation?.skipped ? 1 : 0;
+    if (skipA !== skipB) return skipA - skipB;
+    const result = timeKey(a).localeCompare(timeKey(b)) || String(a.series_number || "").localeCompare(String(b.series_number || ""), undefined, { numeric: true });
+    return app.seriesSort === "asc" ? result : -result;
+  });
+}
+
+function setSeries(list) {
+  app.series = sortSeries(list || []);
+  $("seriesCount").textContent = String(app.series.length);
+  renderSeries();
+}
+
 async function loadStudies() {
  const q = encodeURIComponent($("studySearch").value.trim());
  app.studies = await json(`/api/studies?q=${q}&limit=500`);
@@ -163,6 +215,7 @@ async function selectStudy(ctNumber) {
  app.study = app.studies.find((item) => item.ct_number === ctNumber) || { ct_number: ctNumber };
  app.series = [];
  app.activeSeries = null;
+  app.draft = null;
  $("activeStudyLabel").textContent = ctNumber;
  $("seriesCount").textContent = "读取中";
  $("seriesGrid").innerHTML = "";
@@ -171,24 +224,45 @@ async function selectStudy(ctNumber) {
  try {
    const data = await json(`/api/studies/${encodeURIComponent(ctNumber)}/series`);
    app.study = data.study;
-    app.series = data.series || [];
-    $("seriesCount").textContent = String(app.series.length);
-    renderSeries();
+    setSeries(data.series || []);
    if (app.series.length) selectSeries(app.series[0].series_uid);
  } catch (err) {
    $("seriesGrid").innerHTML = `<p class="error-line">${escapeHtml(err.message)}</p>`;
  }
 }

+function sourceTag(value, annotation) {
+  if (asList(annotation.manual_body_parts).includes(value)) return "manual";
+  if (asList(annotation.ai_body_parts).includes(value)) return "ai";
+  return "";
+}
+
+function seriesTags(series) {
+  const annotation = series.annotation || {};
+  if (annotation.skipped) {
+    return [{ label: "略过", source: annotation.ai_skipped ? "ai" : "manual" }];
+  }
+  const tags = [];
+  if (annotation.plain_ct) {
+    tags.push({ label: "平扫CT", source: annotation.manual_plain_ct !== null && annotation.manual_plain_ct !== undefined ? "manual" : "ai" });
+  }
+  for (const part of asList(annotation.body_parts)) {
+    tags.push({ label: partLabel(part), source: sourceTag(part, annotation) });
+  }
+  const phase = phaseLabel(annotation.upper_abdomen_phase);
+  if (phase) {
+    tags.push({ label: phase, source: annotation.manual_upper_abdomen_phase ? "manual" : "ai" });
+  }
+  if (series.body_part_dicom) tags.unshift({ label: series.body_part_dicom, source: "" });
+  return tags;
+}
+
 function renderSeries() {
  const grid = $("seriesGrid");
  grid.innerHTML = "";
  for (const series of app.series) {
    const skipped = Boolean(series.annotation?.skipped);
-    const parts = series.annotation?.body_parts || [];
-    const tags = skipped
-      ? ["略过"]
-      : [series.body_part_dicom, ...parts.map(partLabel), phaseLabel(series.annotation?.upper_abdomen_phase)].filter(Boolean);
+    const tags = seriesTags(series);
    const card = document.createElement("button");
    card.className = "series-card";
    card.classList.toggle("active", app.activeSeries?.series_uid === series.series_uid);
@@ -203,7 +277,7 @@ function renderSeries() {
        <strong>${escapeHtml(series.description || "未命名序列")}</strong>
        <span class="shot-time">拍摄 ${escapeHtml(timeRange(series))}</span>
        <small>序列 ${escapeHtml(series.series_number || "-")} · ${escapeHtml(series.rows || "-")}×${escapeHtml(series.columns || "-")} · ${escapeHtml(series.modality || "")}</small>
-        <div class="tag-line">${tags.length ? tags.map((tag) => `<em>${escapeHtml(tag)}</em>`).join("") : "<em>未标注</em>"}</div>
+        <div class="tag-line">${tags.length ? tags.map((tag) => `<em class="${tag.source ? `tag-${tag.source}` : ""}">${escapeHtml(tag.label)}</em>`).join("") : "<em>未标注</em>"}</div>
      </div>
    `;
    card.onclick = () => selectSeries(series.series_uid);
@@ -262,12 +336,56 @@ function resetViewer() {
  $("dicomImage").removeAttribute("src");
  $("imageEmpty").classList.remove("hidden");
  $("sliceText").textContent = "0 / 0";
-  $("saveState").textContent = "未保存";
+  $("saveState").textContent = "自动保存";
  resetViewState();
+  updateOverlay();
 }

 function applyTransform() {
  $("dicomImage").style.transform = `translate(${app.panX}px, ${app.panY}px) scale(${app.zoom}) rotate(${app.rotate}deg)`;
+  updateOverlay();
+}
+
+function windowInfo() {
+  if (WINDOW_PRESETS[app.window]) return WINDOW_PRESETS[app.window];
+  return {
+    wl: parseFirstNumber(app.activeSeries?.window_center) ?? 50,
+    ww: parseFirstNumber(app.activeSeries?.window_width) ?? 360,
+  };
+}
+
+function orientationLabels() {
+  if (app.plane === "sagittal") return { top: "H", bottom: "F", left: "A", right: "P" };
+  if (app.plane === "coronal") return { top: "H", bottom: "F", left: "R", right: "L" };
+  return { top: "A", bottom: "P", left: "R", right: "L" };
+}
+
+function updateOverlay() {
+  const overlay = $("imageOverlay");
+  overlay.classList.toggle("hidden", !app.showOverlay || !app.activeSeries);
+  $("overlayToggle").textContent = app.showOverlay ? "隐藏信息" : "显示信息";
+  if (!app.activeSeries) return;
+  const s = app.activeSeries;
+  const orient = orientationLabels();
+  const win = windowInfo();
+  const age = ageText(s.patient_birth_date, s.study_date || app.study?.study_date);
+  const sex = s.patient_sex || "";
+  document.querySelector(".ov-left-top").innerHTML = [
+    s.patient_name || app.study?.source_patient_name || "",
+    [fmtDate(s.patient_birth_date), age, sex].filter(Boolean).join(" "),
+    s.patient_id || app.study?.patient_id || "",
+    fmtDate(s.study_date || app.study?.study_date),
+  ].filter(Boolean).map(escapeHtml).join("<br />");
+  document.querySelector(".ov-right-top").innerHTML = [
+    s.institution_name || "",
+    s.manufacturer || "",
+  ].filter(Boolean).map(escapeHtml).join("<br />");
+  document.querySelector(".ov-left-mid").textContent = orient.left;
+  document.querySelector(".ov-right-mid").textContent = orient.right;
+  document.querySelector(".ov-top-mid").textContent = orient.top;
+  document.querySelector(".ov-bottom-mid").textContent = orient.bottom;
+  document.querySelector(".ov-left-bottom").textContent = `Img:${app.slice + 1}/${maxSlice() + 1}`;
+  document.querySelector(".ov-right-bottom").innerHTML = `WW:${Math.round(win.ww)}<br />WL:${Math.round(win.wl)}<br />Zoom:${app.zoom.toFixed(2)}`;
 }

 async function updateImage() {
@@ -278,6 +396,7 @@ async function updateImage() {
  $("sliceSlider").value = String(app.slice);
  $("sliceText").textContent = `${app.slice + 1} / ${max + 1}`;
  $("imageEmpty").classList.add("hidden");
+  updateOverlay();
  const ticket = Symbol("image");
  app.pendingImage = ticket;
  try {
@@ -292,95 +411,186 @@ async function updateImage() {
  }
 }

-function isSkippedChecked() {
-  return Boolean(document.querySelector('.part-grid input[value="skip"]')?.checked);
+function cloneAnnotation(annotation = {}) {
+  return {
+    body_parts: asList(annotation.body_parts),
+    manual_body_parts: asList(annotation.manual_body_parts),
+    ai_body_parts: asList(annotation.ai_body_parts),
+    upper_abdomen_phase: annotation.upper_abdomen_phase || "",
+    manual_upper_abdomen_phase: annotation.manual_upper_abdomen_phase || "",
+    ai_upper_abdomen_phase: annotation.ai_upper_abdomen_phase || "",
+    plain_ct: Boolean(annotation.plain_ct),
+    manual_plain_ct: annotation.manual_plain_ct ?? null,
+    ai_plain_ct: annotation.ai_plain_ct ?? null,
+    skipped: Boolean(annotation.skipped),
+    ai_skipped: Boolean(annotation.ai_skipped),
+    notes: annotation.notes || "",
+    ai_model: annotation.ai_model || "",
+  };
 }

-function selectedParts() {
-  return Array.from(document.querySelectorAll('.part-grid input:checked:not([value="skip"])')).map((input) => input.value);
+function effectiveParts() {
+  if (!app.draft || app.draft.skipped) return [];
+  return uniq([...app.draft.manual_body_parts, ...app.draft.ai_body_parts]);
 }

-function syncPartState() {
-  const skipped = isSkippedChecked();
-  document.querySelectorAll('.part-grid input:not([value="skip"])').forEach((input) => {
-    input.disabled = skipped;
-    if (skipped) input.checked = false;
+function effectivePhase() {
+  if (!effectiveParts().includes("upper_abdomen")) return "";
+  return app.draft.manual_upper_abdomen_phase || app.draft.ai_upper_abdomen_phase || "";
+}
+
+function effectivePlainCt() {
+  if (!app.draft || app.draft.skipped) return false;
+  if (app.draft.manual_plain_ct !== null && app.draft.manual_plain_ct !== undefined) return Boolean(app.draft.manual_plain_ct);
+  if (app.draft.ai_plain_ct !== null && app.draft.ai_plain_ct !== undefined) return Boolean(app.draft.ai_plain_ct);
+  return Boolean(app.draft.plain_ct);
+}
+
+function setLabelSource(input, source) {
+  const label = input.closest("label");
+  label.classList.toggle("manual-selected", source === "manual");
+  label.classList.toggle("ai-selected", source === "ai");
+}
+
+function applyAnnotationControls() {
+  if (!app.draft) return;
+  const parts = new Set(effectiveParts());
+  document.querySelectorAll(".part-grid input").forEach((input) => {
+    const value = input.value;
+    if (value === "skip") {
+      input.checked = app.draft.skipped;
+      input.disabled = false;
+      setLabelSource(input, app.draft.skipped ? (app.draft.ai_skipped ? "ai" : "manual") : "");
+      return;
+    }
+    if (value === "plain_ct") {
+      input.checked = effectivePlainCt();
+      input.disabled = app.draft.skipped;
+      setLabelSource(input, app.draft.manual_plain_ct !== null && app.draft.manual_plain_ct !== undefined ? "manual" : app.draft.ai_plain_ct !== null && app.draft.ai_plain_ct !== undefined ? "ai" : "");
+      return;
+    }
+    input.checked = parts.has(value);
+    input.disabled = app.draft.skipped;
+    setLabelSource(input, app.draft.manual_body_parts.includes(value) ? "manual" : app.draft.ai_body_parts.includes(value) ? "ai" : "");
  });
-  if (skipped) {
-    document.querySelectorAll("input[name=phase]").forEach((input) => {
-      input.checked = false;
-    });
-  }
-  const show = !skipped && selectedParts().includes("upper_abdomen");
-  $("phaseBox").classList.toggle("visible", show);
+
+  const phase = effectivePhase();
+  document.querySelectorAll("input[name=phase]").forEach((input) => {
+    input.checked = input.value === phase;
+    input.disabled = app.draft.skipped;
+    setLabelSource(input, app.draft.manual_upper_abdomen_phase === input.value ? "manual" : app.draft.ai_upper_abdomen_phase === input.value ? "ai" : "");
+  });
+  $("phaseBox").classList.toggle("visible", !app.draft.skipped && parts.has("upper_abdomen"));
 }

 function hydrateAnnotation() {
-  const annotation = app.activeSeries?.annotation || {};
-  const parts = new Set(annotation.body_parts || []);
-  document.querySelectorAll(".part-grid input").forEach((input) => {
-    if (input.value === "skip") {
-      input.checked = Boolean(annotation.skipped);
-      return;
-    }
-    input.checked = !annotation.skipped && parts.has(input.value);
-    input.disabled = Boolean(annotation.skipped);
-  });
-  document.querySelectorAll("input[name=phase]").forEach((input) => {
-    input.checked = !annotation.skipped && input.value === (annotation.upper_abdomen_phase || "");
-  });
-  $("annotationNotes").value = annotation.notes || "";
-  syncPartState();
+  app.draft = cloneAnnotation(app.activeSeries?.annotation || {});
+  $("annotationNotes").value = app.draft.notes || "";
+  applyAnnotationControls();
 }

-async function reloadCurrentStudySeries(keepUid) {
-  const data = await json(`/api/studies/${encodeURIComponent(app.study.ct_number)}/series`);
-  app.study = data.study;
-  app.series = data.series || [];
-  app.activeSeries = app.series.find((item) => item.series_uid === keepUid) || app.series[0] || null;
-  $("seriesCount").textContent = String(app.series.length);
+function updateLocalAnnotation(annotation) {
+  const normalized = cloneAnnotation(annotation);
+  normalized.body_parts = asList(annotation.body_parts);
+  normalized.upper_abdomen_phase = annotation.upper_abdomen_phase || "";
+  app.draft = normalized;
+  app.activeSeries.annotation = normalized;
+  const index = app.series.findIndex((item) => item.series_uid === app.activeSeries.series_uid);
+  if (index >= 0) app.series[index].annotation = normalized;
+  app.series = sortSeries(app.series);
  renderSeries();
-  hydrateAnnotation();
+  applyAnnotationControls();
 }

-async function saveAnnotation() {
-  if (!app.study || !app.activeSeries) return;
-  const skipped = isSkippedChecked();
-  const parts = skipped ? [] : selectedParts();
-  let phase = skipped ? "" : document.querySelector("input[name=phase]:checked")?.value || "";
-  if (parts.includes("upper_abdomen") && !phase) {
-    $("saveState").textContent = "请选择上腹部期相";
-    return;
-  }
-  if (!parts.includes("upper_abdomen")) phase = "";
+function annotationPayload() {
+  const bodyParts = app.draft.skipped ? [] : effectiveParts();
+  return {
+    body_parts: bodyParts,
+    manual_body_parts: app.draft.skipped ? [] : app.draft.manual_body_parts,
+    ai_body_parts: app.draft.skipped ? [] : app.draft.ai_body_parts,
+    upper_abdomen_phase: app.draft.skipped ? "" : effectivePhase(),
+    manual_upper_abdomen_phase: app.draft.skipped ? "" : app.draft.manual_upper_abdomen_phase,
+    ai_upper_abdomen_phase: app.draft.skipped ? "" : app.draft.ai_upper_abdomen_phase,
+    plain_ct: effectivePlainCt(),
+    manual_plain_ct: app.draft.skipped ? null : app.draft.manual_plain_ct,
+    ai_plain_ct: app.draft.skipped ? null : app.draft.ai_plain_ct,
+    skipped: app.draft.skipped,
+    ai_skipped: app.draft.ai_skipped,
+    notes: $("annotationNotes").value,
+  };
+}
+
+async function saveAnnotationNow() {
+  if (!app.study || !app.activeSeries || !app.draft) return;
  $("saveState").textContent = "保存中";
  const uid = app.activeSeries.series_uid;
  try {
-    await json(`/api/series/${encodeURIComponent(app.study.ct_number)}/${encodeURIComponent(uid)}/annotation`, {
+    const data = await json(`/api/series/${encodeURIComponent(app.study.ct_number)}/${encodeURIComponent(uid)}/annotation`, {
      method: "PUT",
-      body: JSON.stringify({ body_parts: parts, upper_abdomen_phase: phase, skipped, notes: $("annotationNotes").value }),
+      body: JSON.stringify(annotationPayload()),
    });
    $("saveState").textContent = "已保存";
-    await reloadCurrentStudySeries(uid);
+    updateLocalAnnotation(data);
  } catch (err) {
    $("saveState").textContent = err.message;
  }
 }

-function applyAiSuggestion(data) {
-  const parts = new Set(data.body_parts || []);
-  document.querySelectorAll(".part-grid input").forEach((input) => {
-    if (input.value === "skip") {
-      input.checked = Boolean(data.skipped);
-      return;
+function queueSave(delay = 450) {
+  clearTimeout(app.saveTimer);
+  $("saveState").textContent = "待保存";
+  app.saveTimer = setTimeout(saveAnnotationNow, delay);
+}
+
+function handlePartChange(event) {
+  if (!app.draft) return;
+  const input = event.target;
+  const value = input.value;
+  if (value === "skip") {
+    app.draft.skipped = input.checked;
+    if (!input.checked) app.draft.ai_skipped = false;
+    if (input.checked) {
+      app.draft.manual_body_parts = [];
+      app.draft.ai_body_parts = [];
+      app.draft.manual_upper_abdomen_phase = "";
+      app.draft.ai_upper_abdomen_phase = "";
+      app.draft.manual_plain_ct = null;
+      app.draft.ai_plain_ct = null;
    }
-    input.checked = !data.skipped && parts.has(input.value);
-  });
-  document.querySelectorAll("input[name=phase]").forEach((input) => {
-    input.checked = !data.skipped && input.value === (data.upper_abdomen_phase || "");
-  });
-  if (data.notes) $("annotationNotes").value = data.notes;
-  syncPartState();
+  } else if (value === "plain_ct") {
+    if (input.checked) {
+      app.draft.manual_plain_ct = true;
+      app.draft.ai_plain_ct = null;
+    } else {
+      app.draft.manual_plain_ct = false;
+      app.draft.ai_plain_ct = null;
+    }
+  } else if (BODY_PARTS.includes(value)) {
+    if (input.checked) {
+      app.draft.manual_body_parts = uniq([...app.draft.manual_body_parts, value]);
+    } else {
+      app.draft.manual_body_parts = app.draft.manual_body_parts.filter((part) => part !== value);
+      app.draft.ai_body_parts = app.draft.ai_body_parts.filter((part) => part !== value);
+      if (value === "upper_abdomen") {
+        app.draft.manual_upper_abdomen_phase = "";
+        app.draft.ai_upper_abdomen_phase = "";
+      }
+    }
+  }
+  app.draft.body_parts = effectiveParts();
+  app.draft.upper_abdomen_phase = effectivePhase();
+  app.draft.plain_ct = effectivePlainCt();
+  applyAnnotationControls();
+  queueSave();
+}
+
+function handlePhaseChange(event) {
+  if (!app.draft) return;
+  app.draft.manual_upper_abdomen_phase = event.target.value;
+  if (app.draft.ai_upper_abdomen_phase !== event.target.value) app.draft.ai_upper_abdomen_phase = "";
+  app.draft.upper_abdomen_phase = effectivePhase();
+  applyAnnotationControls();
+  queueSave();
 }

 async function runAI() {
@@ -393,8 +603,9 @@ async function runAI() {
      method: "POST",
      body: JSON.stringify({ sample_count: 3 }),
    });
-    applyAiSuggestion(data);
-    $("saveState").textContent = "AI 建议已填入，确认后保存";
+    updateLocalAnnotation(data);
+    $("annotationNotes").value = data.notes || "";
+    $("saveState").textContent = "AI 结果已保存";
  } catch (err) {
    $("saveState").textContent = err.message;
  } finally {
@@ -530,7 +741,7 @@ function wireImageGestures() {
    { passive: false },
  );
  wrap.addEventListener("pointerdown", (event) => {
-    if (!app.activeSeries) return;
+    if (!app.activeSeries || event.target.closest(".slice-rail")) return;
    app.drag = { x: event.clientX, y: event.clientY, panX: app.panX, panY: app.panY };
    wrap.classList.add("dragging");
    wrap.setPointerCapture(event.pointerId);
@@ -549,6 +760,17 @@ function wireImageGestures() {
  });
 }

+function setSort(direction) {
+  app.seriesSort = direction;
+  $("sortAsc").classList.toggle("active", direction === "asc");
+  $("sortDesc").classList.toggle("active", direction === "desc");
+  app.series = sortSeries(app.series);
+  renderSeries();
+  if (app.activeSeries) {
+    app.activeSeries = app.series.find((item) => item.series_uid === app.activeSeries.series_uid) || app.activeSeries;
+  }
+}
+
 function wire() {
  $("loginForm").addEventListener("submit", login);
  $("logoutBtn").addEventListener("click", logout);
@@ -557,6 +779,12 @@ function wire() {
  $("aiClassify").addEventListener("click", runAI);
  $("zoomIn").addEventListener("click", () => changeZoom(1.18));
  $("zoomOut").addEventListener("click", () => changeZoom(1 / 1.18));
+  $("overlayToggle").addEventListener("click", () => {
+    app.showOverlay = !app.showOverlay;
+    updateOverlay();
+  });
+  $("sortAsc").addEventListener("click", () => setSort("asc"));
+  $("sortDesc").addEventListener("click", () => setSort("desc"));
  $("studySearch").addEventListener("input", () => {
    clearTimeout(app.searchTimer);
    app.searchTimer = setTimeout(loadStudies, 250);
@@ -589,8 +817,13 @@ function wire() {
    applyTransform();
  });
  $("resetView").addEventListener("click", resetViewState);
-  document.querySelectorAll(".part-grid input").forEach((input) => input.addEventListener("change", syncPartState));
-  $("saveAnnotation").addEventListener("click", saveAnnotation);
+  document.querySelectorAll(".part-grid input").forEach((input) => input.addEventListener("change", handlePartChange));
+  document.querySelectorAll("input[name=phase]").forEach((input) => input.addEventListener("change", handlePhaseChange));
+  $("annotationNotes").addEventListener("input", () => {
+    if (!app.draft) return;
+    app.draft.notes = $("annotationNotes").value;
+    queueSave(900);
+  });
  document.querySelectorAll("[data-close]").forEach((button) => {
    button.addEventListener("click", () => $(button.dataset.close).classList.add("hidden"));
  });
--- a/PACS_DICOM处理/数据处理网页端/static/index.html
+++ b/PACS_DICOM处理/数据处理网页端/static/index.html
@@ -53,7 +53,11 @@
        <section class="series-pane">
          <div class="pane-head">
            <h2>序列</h2>
-            <span id="seriesCount">0</span>
+            <div class="series-head-tools">
+              <button id="sortAsc" class="sort-btn active">时间 ↑</button>
+              <button id="sortDesc" class="sort-btn">时间 ↓</button>
+              <span id="seriesCount">0</span>
+            </div>
          </div>
          <div id="seriesGrid" class="series-grid"></div>
        </section>
@@ -61,9 +65,9 @@
        <section class="viewer-pane">
          <div class="viewer-toolbar">
            <div class="segmented" data-group="plane">
-              <button data-plane="axial" class="active">横断面</button>
-              <button data-plane="sagittal">矢状面</button>
-              <button data-plane="coronal">冠状面</button>
+              <button data-plane="axial" class="active">轴位原始</button>
+              <button data-plane="sagittal">矢状位重建</button>
+              <button data-plane="coronal">冠状位重建</button>
            </div>
            <div class="segmented" data-group="window">
              <button data-window="default" class="active">默认</button>
@@ -77,6 +81,7 @@
              <button id="zoomOut">− 缩小</button>
              <button id="zoomIn">+ 放大</button>
              <button id="resetView">↺ 复位</button>
+              <button id="overlayToggle">隐藏信息</button>
              <button id="infoBtn">DICOM 信息</button>
            </div>
          </div>
@@ -84,6 +89,18 @@
          <div class="viewer-stage">
            <div class="image-wrap">
              <img id="dicomImage" alt="" />
+              <div id="imageOverlay" class="image-overlay">
+                <div class="crosshair crosshair-v"></div>
+                <div class="crosshair crosshair-h"></div>
+                <div class="ov ov-left-top"></div>
+                <div class="ov ov-right-top"></div>
+                <div class="ov ov-left-mid"></div>
+                <div class="ov ov-right-mid"></div>
+                <div class="ov ov-top-mid"></div>
+                <div class="ov ov-bottom-mid"></div>
+                <div class="ov ov-left-bottom"></div>
+                <div class="ov ov-right-bottom"></div>
+              </div>
              <div id="imageEmpty" class="image-empty"></div>
              <div class="slice-rail">
                <input id="sliceSlider" type="range" min="0" max="0" value="0" orient="vertical" />
@@ -95,12 +112,17 @@
              <div class="annotation-head">
                <div>
                  <h2>部位标注</h2>
-                  <span id="saveState">未保存</span>
+                  <span id="saveState">自动保存</span>
                </div>
                <button id="aiClassify" class="ghost-btn ai-btn">AI 识别</button>
              </div>
+              <div class="source-legend">
+                <span><i class="manual-dot"></i>人工</span>
+                <span><i class="ai-dot"></i>AI</span>
+              </div>
              <div class="part-grid">
                <label class="skip-option"><input type="checkbox" value="skip" />略过</label>
+                <label class="plain-option"><input type="checkbox" value="plain_ct" />平扫CT</label>
                <label><input type="checkbox" value="head_neck" />头颈部</label>
                <label><input type="checkbox" value="chest" />胸部</label>
                <label><input type="checkbox" value="upper_abdomen" />上腹部</label>
@@ -117,7 +139,6 @@
              </div>
              <div class="annotation-actions">
                <input id="annotationNotes" class="note-input" placeholder="备注" />
-                <button id="saveAnnotation" class="primary-btn">保存标注</button>
              </div>
            </aside>
          </div>
--- a/PACS_DICOM处理/数据处理网页端/static/styles.css
+++ b/PACS_DICOM处理/数据处理网页端/static/styles.css
@@ -284,6 +284,28 @@ button:disabled {
  font-size: 12px;
 }

+.series-head-tools {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sort-btn {
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid var(--stroke);
+  border-radius: 7px;
+  background: #0b0f16;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.sort-btn.active {
+  border-color: var(--blue);
+  background: rgba(52, 116, 246, 0.2);
+  color: var(--text);
+}
+
 .study-list,
 .series-grid {
  min-height: 0;
@@ -433,6 +455,18 @@ button:disabled {
  white-space: nowrap;
 }

+.tag-line .tag-manual {
+  border-color: rgba(25, 212, 194, 0.58);
+  color: #baf8ee;
+  background: rgba(25, 212, 194, 0.08);
+}
+
+.tag-line .tag-ai {
+  border-color: rgba(240, 181, 78, 0.65);
+  color: #ffe0a3;
+  background: rgba(240, 181, 78, 0.1);
+}
+
 .viewer-pane {
  min-width: 0;
  display: grid;
@@ -502,6 +536,95 @@ button:disabled {
  display: none;
 }

+.image-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  color: rgba(245, 248, 255, 0.86);
+  font-family: "Consolas", "Cascadia Mono", monospace;
+  font-size: 14px;
+  line-height: 1.25;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
+}
+
+.image-overlay.hidden {
+  display: none;
+}
+
+.crosshair {
+  position: absolute;
+  opacity: 0.72;
+}
+
+.crosshair-v {
+  top: 4%;
+  bottom: 4%;
+  left: 50%;
+  width: 1px;
+  background: #ff3b30;
+}
+
+.crosshair-h {
+  left: 3%;
+  right: 3%;
+  top: 50%;
+  height: 1px;
+  background: #21c55d;
+}
+
+.ov {
+  position: absolute;
+  max-width: 42%;
+  white-space: pre-line;
+}
+
+.ov-left-top {
+  top: 12px;
+  left: 14px;
+}
+
+.ov-right-top {
+  top: 12px;
+  right: 54px;
+  text-align: right;
+}
+
+.ov-left-mid {
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.ov-right-mid {
+  right: 54px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.ov-top-mid {
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.ov-bottom-mid {
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.ov-left-bottom {
+  left: 14px;
+  bottom: 12px;
+}
+
+.ov-right-bottom {
+  right: 54px;
+  bottom: 12px;
+  text-align: right;
+}
+
 .slice-rail {
  position: absolute;
  top: 16px;
@@ -550,9 +673,39 @@ button:disabled {
  color: #baf8ee;
 }

+.source-legend {
+  display: flex;
+  gap: 12px;
+  margin: -2px 0 10px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.source-legend span {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.manual-dot,
+.ai-dot {
+  width: 9px;
+  height: 9px;
+  display: inline-block;
+  border-radius: 999px;
+}
+
+.manual-dot {
+  background: var(--cyan);
+}
+
+.ai-dot {
+  background: var(--amber);
+}
+
 .part-grid {
  display: grid;
-  grid-template-columns: repeat(6, minmax(82px, 1fr));
+  grid-template-columns: repeat(7, minmax(78px, 1fr));
  gap: 8px;
 }

@@ -577,11 +730,29 @@ button:disabled {
  background: rgba(25, 212, 194, 0.1);
 }

+.part-grid label.manual-selected,
+.phase-options label.manual-selected {
+  border-color: rgba(25, 212, 194, 0.72);
+  box-shadow: inset 3px 0 0 rgba(25, 212, 194, 0.95);
+}
+
+.part-grid label.ai-selected,
+.phase-options label.ai-selected {
+  border-color: rgba(240, 181, 78, 0.72);
+  background: rgba(240, 181, 78, 0.1);
+  box-shadow: inset 3px 0 0 rgba(240, 181, 78, 0.95);
+}
+
 .part-grid .skip-option:has(input:checked) {
  border-color: rgba(240, 181, 78, 0.72);
  background: rgba(240, 181, 78, 0.12);
 }

+.part-grid .plain-option:has(input:checked) {
+  border-color: rgba(52, 116, 246, 0.72);
+  background: rgba(52, 116, 246, 0.12);
+}
+
 .part-grid input:disabled + * {
  color: var(--muted);
 }
@@ -610,9 +781,6 @@ button:disabled {
 }

 .annotation-actions {
-  display: grid;
-  grid-template-columns: minmax(220px, 1fr) 160px;
-  gap: 10px;
  margin-top: 10px;
 }