mirror of
https://github.com/Youzini-afk/ST-Bionic-Memory-Ecology.git
synced 2026-05-15 22:30:38 +08:00
style(panel): memory list as full-width cards with chips
Made-with: Cursor
This commit is contained in:
Youzini-afk
47
panel.js
47
panel.js
@@ -1074,20 +1074,21 @@ function _refreshMemoryBrowser() {
|
||||
li.className = "bme-memory-item";
|
||||
li.dataset.nodeId = String(node.id || "");
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.className = "bme-memory-card";
|
||||
|
||||
const head = document.createElement("div");
|
||||
head.className = "bme-memory-card-head";
|
||||
|
||||
const badge = document.createElement("span");
|
||||
badge.className = `bme-type-badge ${_safeCssToken(node.type)}`;
|
||||
badge.textContent = _typeLabel(node.type);
|
||||
|
||||
const scopeBadge = document.createElement("span");
|
||||
scopeBadge.className = "bme-type-badge";
|
||||
scopeBadge.textContent = buildScopeBadgeText(node.scope);
|
||||
const scopeChip = document.createElement("span");
|
||||
scopeChip.className = "bme-memory-scope-chip";
|
||||
scopeChip.textContent = buildScopeBadgeText(node.scope);
|
||||
|
||||
const badgesWrap = document.createElement("div");
|
||||
badgesWrap.className = "bme-memory-badges";
|
||||
badgesWrap.append(badge, scopeBadge);
|
||||
|
||||
const body = document.createElement("div");
|
||||
body.className = "bme-memory-body";
|
||||
head.append(badge, scopeChip);
|
||||
|
||||
const titleEl = document.createElement("div");
|
||||
titleEl.className = "bme-memory-name";
|
||||
@@ -1097,39 +1098,43 @@ function _refreshMemoryBrowser() {
|
||||
snippetEl.className = "bme-memory-content";
|
||||
snippetEl.textContent = snippetText;
|
||||
|
||||
const meta = document.createElement("div");
|
||||
meta.className = "bme-memory-meta";
|
||||
const foot = document.createElement("div");
|
||||
foot.className = "bme-memory-foot";
|
||||
|
||||
const stats = document.createElement("div");
|
||||
stats.className = "bme-memory-stats";
|
||||
|
||||
const impSpan = document.createElement("span");
|
||||
impSpan.className = "bme-memory-metric";
|
||||
impSpan.className = "bme-memory-stat-pill";
|
||||
impSpan.textContent = `重要度 ${_formatMemoryMetricNumber(node.importance, {
|
||||
fallback: 5,
|
||||
maxFrac: 2,
|
||||
})}`;
|
||||
|
||||
const accSpan = document.createElement("span");
|
||||
accSpan.className = "bme-memory-metric";
|
||||
accSpan.className = "bme-memory-stat-pill";
|
||||
accSpan.textContent = `访问 ${_formatMemoryInt(node.accessCount, 0)}`;
|
||||
|
||||
const seqSpan = document.createElement("span");
|
||||
seqSpan.className = "bme-memory-metric";
|
||||
seqSpan.className = "bme-memory-stat-pill";
|
||||
seqSpan.textContent = `序列 ${_formatMemoryInt(
|
||||
node.seqRange?.[1] ?? node.seq,
|
||||
0,
|
||||
)}`;
|
||||
|
||||
meta.append(impSpan, accSpan, seqSpan);
|
||||
stats.append(impSpan, accSpan, seqSpan);
|
||||
foot.appendChild(stats);
|
||||
|
||||
const regionMeta = _buildScopeMetaText(node);
|
||||
if (regionMeta) {
|
||||
const scopeSpan = document.createElement("span");
|
||||
scopeSpan.className = "bme-memory-regionline";
|
||||
scopeSpan.textContent = regionMeta;
|
||||
meta.appendChild(scopeSpan);
|
||||
const regionEl = document.createElement("div");
|
||||
regionEl.className = "bme-memory-region";
|
||||
regionEl.textContent = regionMeta;
|
||||
foot.appendChild(regionEl);
|
||||
}
|
||||
|
||||
body.append(titleEl, snippetEl, meta);
|
||||
li.append(badgesWrap, body);
|
||||
card.append(head, titleEl, snippetEl, foot);
|
||||
li.appendChild(card);
|
||||
fragment.appendChild(li);
|
||||
});
|
||||
listEl.replaceChildren(fragment);
|
||||
|
||||
150
style.css
150
style.css
@@ -752,101 +752,131 @@
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bme-memory-badges {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
max-width: min(11rem, 42%);
|
||||
}
|
||||
|
||||
.bme-memory-badges .bme-type-badge {
|
||||
margin-top: 0;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bme-memory-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bme-memory-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
border: 1px solid transparent;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.bme-memory-item:hover {
|
||||
background: var(--bme-surface-high);
|
||||
border-color: var(--bme-border);
|
||||
.bme-memory-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
padding: 11px 12px;
|
||||
border-radius: 10px;
|
||||
background: var(--bme-surface-low, #1b1b1e);
|
||||
border: 1px solid var(--bme-border);
|
||||
transition:
|
||||
background 0.15s,
|
||||
border-color 0.15s,
|
||||
box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.bme-memory-item.selected {
|
||||
.bme-memory-item:hover .bme-memory-card {
|
||||
background: var(--bme-surface-container, #1f1f22);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.bme-memory-item.selected .bme-memory-card {
|
||||
background: var(--bme-primary-dim);
|
||||
border-color: var(--bme-primary);
|
||||
box-shadow: 0 0 0 1px rgba(233, 69, 96, 0.12);
|
||||
}
|
||||
|
||||
.bme-memory-card-head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.bme-memory-card-head .bme-type-badge {
|
||||
margin-top: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bme-memory-scope-chip {
|
||||
display: inline-block;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--bme-on-surface-dim);
|
||||
background: var(--bme-surface-high, #2a2a2d);
|
||||
border: 1px solid var(--bme-border);
|
||||
line-height: 1.3;
|
||||
max-width: 100%;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.bme-memory-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
color: var(--bme-on-surface);
|
||||
line-height: 1.35;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.01em;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.bme-memory-content {
|
||||
font-size: 11px;
|
||||
color: var(--bme-on-surface-dim);
|
||||
line-height: 1.45;
|
||||
font-size: 11.5px;
|
||||
color: rgba(228, 225, 230, 0.72);
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-webkit-line-clamp: 4;
|
||||
line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.bme-memory-meta {
|
||||
.bme-memory-foot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 2px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.bme-memory-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 6px 10px;
|
||||
margin-top: 2px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.bme-memory-stat-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px 9px;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--bme-on-surface-dim);
|
||||
}
|
||||
|
||||
.bme-memory-metric {
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
background: var(--bme-surface-lowest, #0e0e11);
|
||||
border: 1px solid var(--bme-border);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bme-memory-regionline {
|
||||
flex: 1 1 100%;
|
||||
min-width: 0;
|
||||
white-space: normal;
|
||||
line-height: 1.35;
|
||||
opacity: 0.92;
|
||||
.bme-memory-region {
|
||||
font-size: 10px;
|
||||
line-height: 1.45;
|
||||
color: var(--bme-on-surface-dim);
|
||||
opacity: 0.95;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user