活动页:每个节点卡片底部渲染参与人(头像 + 名字)
之前节点卡片上只有「👥 N」计数,要看是谁参加得点进节点详情。
现在卡片底部直接列出参与人:头像(缺头像用首字母兜底)+ 名字,
有心情顺带一个小 emoji;点任一人跳到该节点的参与区。
数据侧 Members::forNodes() 一条 IN 查询带回全部节点的参与人
(与 attachCounts 同样的防 N+1 思路),计划列与执行列共用。
无参与人的节点不渲染这一行。
已验证:本地全链 11 步全绿(渲染检查 292 项、表单交互 73 项);
远端 e2e 299 项 0 失败(新增活动页卡片参与人行专项断言);
部署后双 PHP 渲染逐字节一致、60 文件哈希一致。
This commit is contained in:
@@ -1159,3 +1159,36 @@ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; padding
|
||||
.lightbox-next { right: 8px; }
|
||||
.lightbox-img { max-height: 66vh; }
|
||||
}
|
||||
|
||||
/* ── 18. 活动页节点卡片:参与人(头像 + 名字) ────────────────────────────── */
|
||||
.node-members {
|
||||
display: flex; flex-wrap: wrap; gap: 5px;
|
||||
margin-top: 8px; padding-top: 8px;
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
.node-member-chip {
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
padding: 2px 9px 2px 3px;
|
||||
background: var(--bg-soft);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
font-size: 12px; color: var(--text-soft);
|
||||
text-decoration: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
.node-member-chip:hover { border-color: var(--accent); color: var(--accent); }
|
||||
.node-member-chip img,
|
||||
.node-member-avatar-fallback {
|
||||
width: 20px; height: 20px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.node-member-avatar-fallback {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
background: var(--accent-soft, var(--bg-soft));
|
||||
color: var(--accent);
|
||||
font-size: 11px; font-weight: 650;
|
||||
}
|
||||
.node-member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.node-member-emotion { font-size: 13px; line-height: 1; }
|
||||
|
||||
Reference in New Issue
Block a user