Simplify relation card body part tags

This commit is contained in:
Codex
2026-05-28 09:29:32 +08:00
parent 92ca5e5b38
commit 5aabb300f2
2 changed files with 32 additions and 24 deletions

View File

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

View File

@@ -397,30 +397,19 @@ button {
font-size: 12px; font-size: 12px;
} }
.card-layout { .card-topline {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) minmax(112px, 0.72fr); grid-template-columns: minmax(0, 1fr) auto;
gap: 10px; gap: 10px;
align-items: start; align-items: start;
} }
.card-main, .card-main {
.card-side {
min-width: 0; min-width: 0;
display: grid; display: grid;
gap: 7px; gap: 7px;
} }
.card-side {
justify-items: end;
}
.important-tags {
max-width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
}
.mini-badge { .mini-badge {
flex: 0 0 auto; flex: 0 0 auto;
padding: 2px 7px; padding: 2px 7px;
@@ -454,7 +443,8 @@ button {
overflow: hidden; overflow: hidden;
} }
.inline-tags em { .inline-tags em,
.card-tag-rail em {
max-width: 96px; max-width: 96px;
padding: 2px 7px; padding: 2px 7px;
overflow: hidden; overflow: hidden;
@@ -468,6 +458,26 @@ button {
white-space: nowrap; 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 { .subtle {
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 12px;