Simplify relation card body part tags

数据库Web可视化/static/app.js

@@ -202,21 +202,19 @@ function renderList() {
     card.classList.toggle("active", app.active?.ct_key === row.ct_key);
     card.title = cardTitle(row);
     const stlCount = Number(row.stl_file_count || row.stl_file_count_agg || 0);
-    const labels = annotationLabels(row);
+    const labels = dicomParts(row);
     card.innerHTML = `
-      <div class="card-layout">
+      <div class="card-topline">
         <div class="card-main">
           <strong>${escapeHtml(row.ct_key)}</strong>
           <span>${escapeHtml(row.pacs_patient_name || row.upp_patient_name || "无姓名")} · ${escapeHtml(row.patient_id || row.patient_id_masked || "无ID")}</span>
           <small>DICOM ${Number(row.pacs_series_count || 0)} 序列${stlCount ? ` · STL ${stlCount} 个` : ""}</small>
         </div>
-        <div class="card-side">
-          <i class="mini-badge ${escapeHtml(row.relation_status)}">${escapeHtml(statusLabel(row.relation_status))}</i>
-          <div class="inline-tags important-tags">
-            ${row.algorithm_model ? `<em title="${escapeHtml(row.algorithm_model)}">${escapeHtml(row.algorithm_model)}</em>` : ""}
-            ${renderPartTags(labels)}
-          </div>
-        </div>
+        <i class="mini-badge ${escapeHtml(row.relation_status)}">${escapeHtml(statusLabel(row.relation_status))}</i>
+      </div>
+      <div class="card-tag-rail">
+        ${row.algorithm_model ? `<em class="model-tag" title="${escapeHtml(row.algorithm_model)}">${escapeHtml(row.algorithm_model)}</em>` : ""}
+        ${renderPartTags(labels)}
       </div>
     `;
     card.onclick = () => selectRelation(row.ct_key);

数据库Web可视化/static/styles.css

@@ -397,30 +397,19 @@ button {
   font-size: 12px;
 }
 
-.card-layout {
+.card-topline {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.72fr);
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 10px;
   align-items: start;
 }
 
-.card-main,
-.card-side {
+.card-main {
   min-width: 0;
   display: grid;
   gap: 7px;
 }
 
-.card-side {
-  justify-items: end;
-}
-
-.important-tags {
-  max-width: 100%;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-}
-
 .mini-badge {
   flex: 0 0 auto;
   padding: 2px 7px;
@@ -454,7 +443,8 @@ button {
   overflow: hidden;
 }
 
-.inline-tags em {
+.inline-tags em,
+.card-tag-rail em {
   max-width: 96px;
   padding: 2px 7px;
   overflow: hidden;
@@ -468,6 +458,26 @@ button {
   white-space: nowrap;
 }
 
+.card-tag-rail {
+  display: flex;
+  gap: 6px;
+  min-width: 0;
+  overflow-x: auto;
+  padding: 2px 0 3px;
+  scrollbar-width: thin;
+}
+
+.card-tag-rail em {
+  max-width: 112px;
+  flex: 0 0 auto;
+}
+
+.card-tag-rail .model-tag {
+  border-color: rgba(52, 118, 246, 0.46);
+  color: #cfe0ff;
+  background: rgba(52, 118, 246, 0.1);
+}
+
 .subtle {
   color: var(--muted);
   font-size: 12px;