// ===================================================================== // Detail panel — selected character (right-bottom) // ===================================================================== function DetailPanel({ selectedCharData, focusPlayData, hoverChar, allThemes, themeFilter, onSetThemeFilter, plays, eraRange, activeGenres }) { // when no character selected, show play summary (or filter summary) const data = selectedCharData; // build face-paint paint card for the selected character function FaceCard({ ch }) { const role = ch.role; const c = roleColor(role); return (
{/* proscenium archway */} {/* face */} {role === "jing" && ( <> )} {role === "dan" && ( <> )} {role === "chou" && ( <> )} {role === "sheng" && ( <> {ch.sub === "老生" && ( )} )} {/* corner cartouche */} {ch.playId.toUpperCase()}
); } return (
06人 物 详 情
{data ? `${roleLabel(data.role)} · ${data.sub}` : "HOVER · CLICK"}
{!data && (
选 一 出 戏 · 点 一 个 人
点击左侧剧目以聚焦视图，
或在网络中点击人物锁定。
── 五 视 图 联 动 ──
① 剧目 · ② 行当 · ③ 关系网络 ·
④ 叙事弧线 · ⑤ 主题构成
{/* filter summary */}
当 前 筛 选
类型 ：{[...activeGenres].map(g => genreLabel(g)).join(" · ") || "—"}
年代 ：{eraRange[0]}–{eraRange[1]}
剧目 ：{plays.length} 出
主题 ：{themeFilter ? {allThemes.find(t=>t.id===themeFilter)?.name} : "—"}
{/* aggregate insights */}
交 叉 发 现
· 历史戏叙事多呈 双峰结构（议事→决战）， 主由生·净承载。
· 家庭戏张力 渐升至四折， 旦角主载亲情·悲离。
· 公案戏呈 三段递进（冤→诉→判）， 净角 (包公·刘瑾) 承担清正动机。
)} {data && (
{data.name}
{roleLabel(data.role)} · {data.sub}
剧目
{data.playTitle || (focusPlayData && focusPlayData.title)}
身份
{data.identity}
性别
{data.gender}
年龄
{data.age}
性格
{(data.traits||[]).join(" · ")}
主 题 承 载
{(data.themes||[]).length === 0 && —} {(data.themes||[]).map(tid => { const t = allThemes.find(x => x.id === tid); if (!t) return null; const sel = themeFilter === tid; return ( onSetThemeFilter(sel ? null : tid)} >{t.name} ); })}
出 场 时 序
)}
); } function PresenceStrip({ presence, acts }) { const n = presence.length || 0; if (!n) return
—
; const cellW = 100 / n; return (
{presence.map((v, i) => (
))}
{acts.map((a, i) => (
{a}
))}
); } window.DetailPanel = DetailPanel;