Simplify relation card body part tags
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user