族谱树收尾:剪贴板永不 settle 修复、elbow 连线、锁定路径与面包屑、窄屏紧凑

clipboard: race navigator.clipboard.writeText with 800ms timeout then fall back (fixes dead copy button); edges: rounded elbow routing; pin path + breadcrumb; three-tier highlight; compact mobile cards; 265 tests green.
This commit is contained in:
2026-10-06 15:11:07 +08:00
parent 87af3bdaf0
commit e2056db146
7 changed files with 371 additions and 41 deletions
@@ -857,6 +857,76 @@
.game-lineage-node--dimmed {
opacity: 0.34;
}
/* 高亮分三档,差异要肉眼可见:路径节点(强调边框 + 淡底)、仅子树节点(淡底 + 中等边框)、
目标节点(外发光 + 强调边框)。全都比「只把别人变淡」更容易看出结构。 */
.game-lineage-node--path {
border-color: var(--platform-accent-strong);
background: rgba(199, 101, 61, 0.08);
}
.game-lineage-node--subtree {
border-color: var(--platform-accent-strong);
border-style: dashed;
background: rgba(199, 101, 61, 0.04);
}
.game-lineage-node--pinned {
border-style: solid;
border-width: 2px;
box-shadow: 0 0 0 3px rgba(199, 101, 61, 0.22);
}
.game-lineage-breadcrumb {
position: absolute;
z-index: 2;
top: 0.4rem;
left: 0.5rem;
right: 0.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.4rem;
border-radius: 999px;
background: var(--platform-surface, #fff);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
font-size: 0.72rem;
}
.game-lineage-breadcrumb__item {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--platform-text-soft);
}
.game-lineage-breadcrumb__crumb,
.game-lineage-breadcrumb__clear {
border: none;
padding: 0.1rem 0.3rem;
border-radius: 999px;
background: transparent;
color: var(--platform-text-base);
font: inherit;
font-size: 0.72rem;
cursor: pointer;
overflow-wrap: anywhere;
}
.game-lineage-breadcrumb__crumb:hover,
.game-lineage-breadcrumb__clear:hover {
color: var(--platform-text-strong);
background: rgba(199, 101, 61, 0.12);
}
.game-lineage-node__pin {
border: 1px solid var(--platform-surface-border);
border-radius: 999px;
padding: 0.14rem 0.6rem;
background: transparent;
color: var(--platform-text-base);
font: inherit;
font-size: 0.72rem;
font-weight: 600;
cursor: pointer;
}
.game-lineage-node__pin[aria-pressed='true'] {
border-color: var(--platform-accent-strong);
color: var(--platform-accent-strong);
}
.game-lineage-node--stub {
border-style: dashed;
cursor: default;