Improve study status and sequence loading

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

@@ -258,10 +258,14 @@ button:disabled {
 .series-pane {
   padding: 14px;
   display: grid;
-  grid-template-rows: auto auto 1fr;
+  grid-template-rows: auto auto auto 1fr;
   gap: 12px;
 }
 
+.series-pane {
+  grid-template-rows: auto 1fr;
+}
+
 .pane-head,
 .annotation-head,
 .settings-title {
@@ -322,6 +326,27 @@ button:disabled {
   color: var(--text);
 }
 
+.study-filter {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+
+.study-filter button {
+  height: 30px;
+  border: 1px solid var(--stroke);
+  border-radius: 7px;
+  background: #0b0f16;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.study-filter button.active {
+  border-color: rgba(25, 212, 194, 0.62);
+  color: #baf8ee;
+  background: rgba(25, 212, 194, 0.08);
+}
+
 .study-list,
 .series-grid {
   min-height: 0;
@@ -330,8 +355,9 @@ button:disabled {
 }
 
 .study-card {
+  position: relative;
   width: 100%;
-  padding: 12px;
+  padding: 12px 42px 12px 12px;
   margin-bottom: 10px;
   border: 1px solid transparent;
   border-radius: 8px;
@@ -340,6 +366,42 @@ button:disabled {
   text-align: left;
 }
 
+.study-status-badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  min-width: 24px;
+  height: 22px;
+  display: inline-grid;
+  place-items: center;
+  padding: 0 6px;
+  border: 1px solid rgba(146, 163, 186, 0.25);
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.study-status-badge.status-complete {
+  border-color: rgba(18, 185, 129, 0.62);
+  color: #9af4cf;
+  background: rgba(18, 185, 129, 0.09);
+}
+
+.study-status-badge.status-incomplete {
+  border-color: rgba(240, 181, 78, 0.56);
+  color: #ffe0a3;
+  background: rgba(240, 181, 78, 0.09);
+}
+
+.study-status-badge.status-loading {
+  min-width: 34px;
+  border-color: rgba(52, 116, 246, 0.56);
+  color: #bfd5ff;
+  background: rgba(52, 116, 246, 0.1);
+}
+
 .study-card.active {
   border-color: rgba(52, 116, 246, 0.82);
   background: linear-gradient(180deg, rgba(52, 116, 246, 0.22), #0b0f16);
@@ -410,6 +472,24 @@ button:disabled {
   object-fit: contain;
 }
 
+.thumb-state {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+  font-size: 12px;
+  background: rgba(2, 3, 6, 0.62);
+}
+
+.thumb-ready .thumb-state {
+  display: none;
+}
+
+.thumb-failed .thumb-state {
+  color: #fecdd3;
+}
+
 .thumb b,
 .thumb i {
   position: absolute;
@@ -440,6 +520,11 @@ button:disabled {
   gap: 7px;
 }
 
+.loading-card {
+  pointer-events: none;
+  opacity: 0.78;
+}
+
 .series-copy strong {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -555,6 +640,19 @@ button:disabled {
 }
 
 .image-empty {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+  font-size: 13px;
+  letter-spacing: 0;
+  pointer-events: none;
+  background: rgba(0, 0, 0, 0.22);
+}
+
+.image-empty.hidden {
   display: none;
 }