Refine study controls and slice rail

PACS_DICOM处理/数据处理网页端/static/app.js

@@ -24,7 +24,7 @@ const app = {
   saving: false,
   pendingImage: null,
   drag: null,
-  studySortField: "time",
+  studySortField: "modified",
   studySortDir: "desc",
   studyFilter: "all",
   studyPartFilter: "all",
@@ -117,6 +117,11 @@ function studyTimeKey(study) {
   return `${date}${time}`;
 }
 
+function studyModifiedKey(study) {
+  const raw = String(study.modified_at || study.annotation_updated_at || study.completion_updated_at || study.completed_at || "");
+  return raw ? raw.replace(/\D/g, "").padEnd(14, "0") : studyTimeKey(study);
+}
+
 function sortArrow(direction) {
   return direction === "asc" ? "↑" : "↓";
 }
@@ -240,8 +245,8 @@ function sortStudies(list) {
     const timeResult =
       studyTimeKey(a).localeCompare(studyTimeKey(b)) ||
       String(a.ct_number || "").localeCompare(String(b.ct_number || ""), undefined, { numeric: true });
-    const unannotatedResult = Number(a.unannotated_series || 0) - Number(b.unannotated_series || 0) || timeResult;
-    const result = app.studySortField === "unannotated" ? unannotatedResult : timeResult;
+    const modifiedResult = studyModifiedKey(a).localeCompare(studyModifiedKey(b)) || timeResult;
+    const result = app.studySortField === "study_time" ? timeResult : modifiedResult;
     return app.studySortDir === "desc" ? -result : result;
   });
 }
@@ -509,16 +514,21 @@ function renderStudies() {
 
 function applyStudyCompletion(data) {
   const completed = Boolean(data.completed);
+  const modifiedAt = data.completion_updated_at || data.modified_at || data.completed_at || "";
   const study = app.studies.find((item) => item.ct_number === data.ct_number);
   if (study) {
     study.completed = completed;
     study.completed_by = data.completed_by || "";
     study.completed_at = data.completed_at || "";
+    study.completion_updated_at = data.completion_updated_at || study.completion_updated_at || "";
+    if (modifiedAt) study.modified_at = modifiedAt;
   }
   if (app.study?.ct_number === data.ct_number) {
     app.study.completed = completed;
     app.study.completed_by = data.completed_by || "";
     app.study.completed_at = data.completed_at || "";
+    app.study.completion_updated_at = data.completion_updated_at || app.study.completion_updated_at || "";
+    if (modifiedAt) app.study.modified_at = modifiedAt;
   }
 }
 
@@ -993,6 +1003,16 @@ function updateLocalAnnotation(annotation, targetSeriesUid = app.activeSeries?.s
     if (options.updateNotes !== false) $("annotationNotes").value = normalized.notes || "";
   }
   refreshStudyAnnotationSummary();
+  const modifiedAt = normalized.updated_at || new Date().toISOString();
+  if (app.study && modifiedAt) {
+    app.study.modified_at = modifiedAt;
+    app.study.annotation_updated_at = modifiedAt;
+    const study = app.studies.find((item) => item.ct_number === app.study.ct_number);
+    if (study) {
+      study.modified_at = modifiedAt;
+      study.annotation_updated_at = modifiedAt;
+    }
+  }
   renderSeries();
   renderStudies();
   if (isActive && applyToActive) applyAnnotationControls();
@@ -1353,7 +1373,11 @@ function changeZoom(multiplier) {
 
 function wireImageGestures() {
   const wrap = document.querySelector(".image-wrap");
-  document.querySelector(".slice-rail").addEventListener("pointerdown", (event) => event.stopPropagation());
+  const sliceRail = document.querySelector(".slice-rail");
+  ["pointerdown", "pointermove", "pointerup", "pointercancel", "click"].forEach((name) => {
+    sliceRail.addEventListener(name, (event) => event.stopPropagation());
+  });
+  sliceRail.addEventListener("wheel", (event) => event.stopPropagation(), { passive: true });
   wrap.addEventListener(
     "wheel",
     (event) => {

PACS_DICOM处理/数据处理网页端/static/index.html

@@ -45,8 +45,8 @@
           <div class="pane-head">
             <h2>检查列表</h2>
             <div class="sort-tools study-head-tools">
-              <button class="sort-btn active" data-study-sort="time">时间 <span class="sort-arrow">↓</span></button>
-              <button class="sort-btn" data-study-sort="unannotated">未标注 <span class="sort-arrow">↓</span></button>
+              <button class="sort-btn active" data-study-sort="modified">修改时间 <span class="sort-arrow">↓</span></button>
+              <button class="sort-btn" data-study-sort="study_time">检查时间 <span class="sort-arrow">↓</span></button>
               <span id="studyCount">0</span>
             </div>
           </div>

PACS_DICOM处理/数据处理网页端/static/styles.css

@@ -308,13 +308,14 @@ button:disabled {
 
 .sort-btn {
   height: 26px;
-  min-width: 68px;
+  min-width: 78px;
   padding: 0 8px;
   border: 1px solid var(--stroke);
   border-radius: 7px;
   background: #0b0f16;
   color: var(--muted);
   font-size: 11px;
+  white-space: nowrap;
 }
 
 .sort-arrow {
@@ -501,7 +502,7 @@ button:disabled {
 }
 
 .study-summary-line:has(.study-export-btn) {
-  grid-template-columns: minmax(0, 1fr) 28px;
+  grid-template-columns: minmax(0, 1fr) 22px;
 }
 
 .study-summary-line .study-export-btn {
@@ -509,29 +510,28 @@ button:disabled {
 }
 
 .study-export-btn {
-  width: 28px;
-  min-width: 28px;
-  height: 28px;
+  width: 22px;
+  min-width: 22px;
+  height: 22px;
   display: inline-grid;
   place-items: center;
-  border: 1px solid var(--stroke);
-  border-radius: 50%;
-  background: rgba(21, 28, 39, 0.92);
-  color: #dbe8ff;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #9fb1cb;
   font-size: 11px;
   font-style: normal;
   font-weight: 800;
 }
 
 .study-export-btn:hover {
-  border-color: rgba(25, 212, 194, 0.68);
   color: #baf8ee;
-  background: rgba(25, 212, 194, 0.1);
+  background: transparent;
 }
 
 .study-export-btn svg {
-  width: 15px;
-  height: 15px;
+  width: 18px;
+  height: 18px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2.2;
@@ -768,7 +768,7 @@ button:disabled {
 }
 
 #dicomImage {
-  max-width: calc(100% - 64px);
+  max-width: calc(100% - 82px);
   max-height: 100%;
   object-fit: contain;
   transform-origin: center center;
@@ -822,7 +822,7 @@ button:disabled {
 
 .ov-right-top {
   top: 12px;
-  right: 54px;
+  right: 72px;
   text-align: right;
 }
 
@@ -832,7 +832,7 @@ button:disabled {
 }
 
 .ov-right-bottom {
-  right: 54px;
+  right: 72px;
   bottom: 12px;
   text-align: right;
 }
@@ -840,22 +840,25 @@ button:disabled {
 .slice-rail {
   position: absolute;
   top: 16px;
-  right: 12px;
+  right: 10px;
   bottom: 16px;
-  width: 38px;
+  z-index: 4;
+  width: 52px;
   display: grid;
   grid-template-rows: 1fr auto;
   justify-items: center;
   align-items: center;
-  padding: 10px 0;
+  padding: 10px 4px;
   border: 1px solid rgba(146, 163, 186, 0.24);
   border-radius: 8px;
   background: rgba(8, 12, 18, 0.86);
   backdrop-filter: blur(6px);
+  cursor: ns-resize;
+  touch-action: none;
 }
 
 #sliceSlider {
-  width: 28px;
+  width: 44px;
   height: 100%;
   writing-mode: vertical-lr;
   direction: ltr;
@@ -873,9 +876,9 @@ button:disabled {
 }
 
 #sliceSlider::-webkit-slider-thumb {
-  width: 16px;
-  height: 16px;
-  margin-left: -6px;
+  width: 22px;
+  height: 22px;
+  margin-left: -9px;
   border: 2px solid #d8fbff;
   border-radius: 999px;
   background: var(--cyan);
@@ -896,8 +899,8 @@ button:disabled {
 }
 
 #sliceSlider::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
+  width: 20px;
+  height: 20px;
   border: 2px solid #d8fbff;
   border-radius: 999px;
   background: var(--cyan);