// plan-detail-views.jsx — Two redesigns of the right-hand Plan Detail area. // Both are READ-ONLY preview + a top-right "编辑 / 删除" action, matching // the existing ConfigPage pattern. Shell (left nav + Plans tree) is mocked // statically so the detail area reads in context. // ───────── sample plans (unified demo data) ───────── // Each sequence carries a deterministic tokens[] generated from the plan's // stage weights — stones inserted at even intervals, never in first 4 slots. const PLAN_A = { id: 'bdbe684e-681c-4452-b5a6-291b55f79928', name: 'planA', note: '基础方案 · 从小数字起步', stagesCount: 4, maxLen: 118, createdAt: '2026-04-21 18:22:23', updatedAt: '2026-04-21 18:22:23', stages: [ { id: 'a_s1', name: 'Stage 1 · 暖场', length: 30, weights: { 2: 18.1, 4: 18.3, 8: 23.9, 16: 24.9, 32: 14.8 } }, { id: 'a_s2', name: 'Stage 2 · 合成练习', length: 30, weights: { 64: 60, 128: 28, 256: 7, stone: 5 } }, { id: 'a_s3', name: 'Stage 3 · 中期', length: 30, weights: { 64: 18, 128: 18, 256: 18, 512: 18, 1024: 18, stone: 10 } }, { id: 'a_s4', name: 'Stage 4 · 终盘', length: 28, weights: { 512: 25, 1024: 25, 2048: 20, 4096: 15, 8192: 10, stone: 5 } }, ], sequences: [], }; PLAN_A.sequences = [ { id: '34025f32-a2c1-4da8-9312-1a8f2c7e0a11', name: 'planA_seq_1a8f', displayName: 'planA版本1', note: '默认配置首轮采样', status: 'enabled', length: 118, createdAt: '2026-04-21 18:22:08', tokens: genTokens(PLAN_A, 1001) }, { id: '92e9a3d4-b018-4c22-b010-9e210b3f2c44', name: 'planA_seq_9e21', displayName: 'planA版本2', note: '提高后期概率测试', status: 'enabled', length: 118, createdAt: '2026-04-21 18:25:14', tokens: genTokens(PLAN_A, 1002) }, { id: '31d10fb0-c410-4e88-9400-7c4d10aa8820', name: 'planA_seq_7c4d', displayName: 'planA版本3', note: '', status: 'disabled', length: 118, createdAt: '2026-04-21 18:28:40', tokens: genTokens(PLAN_A, 1003) }, { id: '8640e23a-4a20-4c00-82cc-2f06a10bb044', name: 'planA_seq_2f06', displayName: 'planA版本4', note: '对照组', status: 'disabled', length: 118, createdAt: '2026-04-21 18:31:02', tokens: genTokens(PLAN_A, 1004) }, ]; const PLAN_B = { id: '7a210ff8-c42e-4812-a6c0-5514f88b0a12', name: 'planB', note: '扩展方案 · 均衡权重', stagesCount: 4, maxLen: 120, createdAt: '2026-04-20 23:53:29', updatedAt: '2026-04-21 14:02:18', stages: [ { id: 'b_s1', name: 'Stage 1', length: 30, weights: { 2: 16.7, 4: 16.7, 8: 16.7, 16: 16.7, 32: 16.7, 64: 16.7 } }, { id: 'b_s2', name: 'Stage 2', length: 30, weights: { 2: 14.3, 4: 14.3, 8: 14.3, 16: 14.3, 32: 14.3, 64: 14.3, 128: 14.3 } }, { id: 'b_s3', name: 'Stage 3', length: 30, weights: { 2: 13.2, 4: 14.3, 8: 16.5, 16: 14.5, 32: 14.5, 64: 14.2, 128: 12.8 } }, { id: 'b_s4', name: 'Stage 4', length: 30, weights: { 2: 16.7, 4: 16.7, 8: 16.7, 16: 16.7, 32: 16.7, 64: 16.7 } }, ], sequences: [], }; PLAN_B.sequences = [ { id: 'a12fe842-b004-4122-9e00-4b811a22cc08', name: 'planB_seq_4b81', displayName: 'planB版本1', note: '基线', status: 'enabled', length: 120, createdAt: '2026-04-20 23:53:29', tokens: genTokens(PLAN_B, 2001) }, { id: 'b73ff9c2-0880-4e22-bc40-c09110884a11', name: 'planB_seq_c091', displayName: 'planB版本2', note: '扩展权重', status: 'enabled', length: 120, createdAt: '2026-04-21 08:14:27', tokens: genTokens(PLAN_B, 2002) }, ]; const ALL_PLANS = [PLAN_A, PLAN_B]; const DETAIL_PLAN = PLAN_B; // back-compat alias for AdminShell preview // ───────── shell chrome (left nav + tree + header) ───────── function AdminShell({ children }) { const nav = [ { k: 'stats', label: '统计', icon: '▦' }, { k: 'analysis', label: '样本分析', icon: '◈' }, { k: 'games', label: '游戏局', icon: '◐' }, { k: 'config', label: '配置', icon: '⚙', active: true }, ]; return (
{/* left nav */}
Giant 2048
Admin · v0.1.2
{nav.map((n) => (
{n.icon} {n.label}
))}
退出
{/* main column */}
{/* top bar */}
配置
{/* plans tree */}
Plans 1 +
planB4
{DETAIL_PLAN.sequences.map((s) => (
• {s.id}
))}
{/* detail slot */}
{children}
); } // ───────── small bits shared by both detail variants ───────── // Normalize a weight-map key — 'stone' → 0 (STONE_VALUE); numeric keys → Number. const keyNum = (k) => (k === 'stone' ? 0 : Number(k)); function Dominant(weights, n = 3) { const entries = Object.entries(weights).map(([k, w]) => [keyNum(k), w]).sort((a, b) => b[1] - a[1]); return entries.slice(0, n); } function MiniProbBar({ weights, height = 10 }) { const entries = Object.entries(weights).map(([k, w]) => [keyNum(k), w]); const total = entries.reduce((a, [, w]) => a + w, 0) || 1; return (
{entries.map(([k, w]) => { const c = COLOR_MAP[k] || COLOR_MAP[0]; return (
); })}
); } function SeqStatusPill({ status }) { const ok = status === 'enabled'; return ( {ok ? 'enabled' : 'disabled'} ); } // ─── sequence list row — encapsulates per-row copy state ─── // 5 columns: 序列 ID (+ inline copy) / 序列名称 / 备注 / 日期 / 操作 (编辑 + 删除) function SequenceRow({ seq, isLast, onOpen, onEdit, onDelete }) { const [copied, setCopied] = React.useState(false); const copyId = async (e) => { e.stopPropagation(); try { await navigator.clipboard.writeText(seq.name); } catch (_) {} setCopied(true); setTimeout(() => setCopied(false), 1500); }; const stop = (fn) => (e) => { e.stopPropagation(); if (fn) fn(seq); }; return (
(e.currentTarget.style.background = '#fafafc')} onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}> {/* 序列 ID + inline copy */}
{seq.name}
{/* 序列名称 (displayName) */}
{seq.displayName || —}
{/* 备注 */}
{seq.note || —}
{/* 日期 */}
{seq.createdAt}
{/* 操作 */}
); } // ═══════════════════════════════════════════════════════════════════ // VARIANT A — 紧凑表格式 (compact table-style stages) // · Overview bar at top: meta reduced to one horizontal strip // · Stages as a dense table: order · name · length · dominant tokens // · mini prob bar · percent pills · chevron // · Bottom: generated sequences list // ═══════════════════════════════════════════════════════════════════ function DetailVariantA({ plan, onEdit, onSelectSequence, onSelectStage, onEditSequence, onDeleteSequence } = {}) { const p = plan || DETAIL_PLAN; const [tab, setTab] = React.useState('stages'); const totalLen = p.stages.reduce((a, s) => a + s.length, 0); return (
{/* header card */}
{p.name}
{p.note && ( {p.note} )}
{/* meta strip */}
{/* tabs */}
{[ { k: 'stages', label: '阶段顺序', n: p.stages.length }, { k: 'sequences', label: '已生成序列', n: p.sequences.length }, ].map((t) => ( ))}
{/* STAGES tab */} {tab === 'stages' && (
阶段顺序
{p.stages.length} 个阶段 · 共 {totalLen} 方块
#
名称
长度
概率分布
主导
{p.stages.map((s, i) => { const dom = Dominant(s.weights, 4); return (
onSelectStage && onSelectStage(s, i)} style={{ display: 'grid', gridTemplateColumns: '36px 1fr 60px minmax(0, 1.6fr) minmax(0, 1.2fr) 24px', padding: '14px 20px', borderBottom: i === p.stages.length - 1 ? 'none' : '1px solid #f4f4f8', alignItems: 'center', gap: 14, fontSize: '0.7812rem', cursor: 'pointer', }} onMouseEnter={(e) => (e.currentTarget.style.background = '#fafafc')} onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}>
{i + 1}
{s.name}
{s.length}
{Object.keys(s.weights).length} 种 · 最大 {Math.max(...Object.values(s.weights)).toFixed(1)}%
{dom.map(([k, w]) => { const c = COLOR_MAP[k] || COLOR_MAP[0]; return ( {w.toFixed(0)}% ); })}
); })}
)} {/* SEQUENCES tab */} {tab === 'sequences' && (
已生成序列
{p.sequences.length} 条
序列 ID
序列名称
备注
日期
操作
{p.sequences.length === 0 ? (
暂无已生成序列
) : p.sequences.map((s, i) => ( onSelectSequence && onSelectSequence(s)} onEdit={onEditSequence} onDelete={onDeleteSequence} /> ))}
)}
); } // ═══════════════════════════════════════════════════════════════════ // TokenPill — single token chip used in the sequence detail grid. // Colored by value via COLOR_MAP; stone renders as a grey metal chip. // ═══════════════════════════════════════════════════════════════════ function TokenPill({ index, token }) { const isStone = token === 'stone'; const v = isStone ? 0 : Number(token); const c = COLOR_MAP[v] || COLOR_MAP[0]; const textColor = '#fff'; return ( #{index + 1} {labelOf(v)} ); } // ═══════════════════════════════════════════════════════════════════ // SequenceDetailSheet — nested right-drawer showing the full token list // of a single generated sequence. Narrower than PlanEditSheet (70vw) // and higher z-index so it stacks on top if both ever coexist. // ═══════════════════════════════════════════════════════════════════ function SequenceDetailSheet({ open, onClose, plan, sequence, onSelectStage, zLevel = 0 }) { const [copied, setCopied] = React.useState(false); const [viewMode, setViewMode] = React.useState('sections'); React.useEffect(() => { if (!open) return; const h = (e) => { if (e.key === 'Escape') { e.stopPropagation(); onClose(); } }; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, [open, onClose]); React.useEffect(() => { setCopied(false); }, [sequence && sequence.id]); if (!open || !sequence) return null; const overlayZ = 60 + zLevel * 20; const panelZ = 70 + zLevel * 20; const copyId = async () => { try { await navigator.clipboard.writeText(sequence.name); } catch (_) {} setCopied(true); setTimeout(() => setCopied(false), 1500); }; const statusEnabled = sequence.status === 'enabled'; const tokens = sequence.tokens || []; return (
{sequence.name}
{sequence.note &&
{sequence.note}
}
ID
{sequence.id}
方案
{plan ? plan.name : '—'}
长度
{sequence.length}
状态
{statusEnabled ? '启用' : '禁用'}
创建时间
{sequence.createdAt}
{/* 完整序列 title row + view-mode toggle */}
完整序列
（{tokens.length} 个）
{plan && plan.stages && plan.stages.length > 0 && (
{[ { k: 'sections', label: '分段', icon: 'StretchHorizontal' }, { k: 'dividers', label: '分隔', icon: 'StretchVertical' }, { k: 'timeline', label: '时间轴', icon: 'ChartNoAxesGantt' }, ].map((t) => ( ))}
)}
{/* 分段 mode — grouped by stage with per-stage header */} {plan && plan.stages && plan.stages.length > 0 && viewMode === 'sections' && (
{plan.stages.map((stage, stageIdx) => { const startPos = plan.stages.slice(0, stageIdx).reduce((a, s) => a + s.length, 0); const stageTokens = tokens.slice(startPos, startPos + stage.length); const clickable = !!onSelectStage; return (
{stageIdx + 1}
#{startPos + 1}–#{startPos + stage.length}
· {stage.length} 个
{stageTokens.map((tok, i) => ( ))}
); })}
)} {/* 分隔 mode — flat wrap with full-width dividers at stage boundaries */} {plan && plan.stages && plan.stages.length > 0 && viewMode === 'dividers' && (
{(() => { const out = []; let cursor = 0; plan.stages.forEach((stage, sIdx) => { if (sIdx > 0) { out.push(
Stage {sIdx + 1} · {stage.name}
); } for (let i = 0; i < stage.length; i++) { if (cursor < tokens.length) { out.push(); } cursor++; } }); return out; })()}
)} {/* 时间轴 mode — top segmented bar + flat token grid */} {(viewMode === 'timeline' || !plan || !plan.stages || plan.stages.length === 0) && ( {plan && plan.stages && plan.stages.length > 0 && (
{plan.stages.map((stage, i) => { const totalLen = plan.stages.reduce((a, s) => a + s.length, 0) || 1; const pct = (stage.length / totalLen) * 100; const hues = ['#5a7cff', '#4ecd7a', '#ffb93c', '#c83a3a']; const hue = hues[i % hues.length]; return (
Stage {i + 1} · {stage.length}
); })}
)}
{tokens.map((tok, i) => )}
)}
); } function MetaCell({ label, value, mono, last }) { return (
{label}
{value}
); } // ═══════════════════════════════════════════════════════════════════ // VARIANT B — 信息分层式 (information hierarchy) // · Big plan header with name + key KPI pills in a single line // · Collapsed meta: ID/timestamps hidden behind a ⓘ popover // · Stages rendered as a vertical list, but with clear hierarchy: // big numbered pill · stage title · prob bar fills row width · // muted token chips + length on the right. // · Sequences relegated to a sidebar on the right. // ═══════════════════════════════════════════════════════════════════ function DetailVariantB() { const p = DETAIL_PLAN; return (
{/* main column */}
{/* hero header */}
{p.name}
{p.desc}
{/* stages list */}
阶段顺序
{p.stages.length} 个 · 共 {p.stages.reduce((a, s) => a + s.length, 0)} 方块
{p.stages.map((s, i) => { const dom = Dominant(s.weights, 5); const tokenCount = Object.keys(s.weights).length; return (
{/* order pill */}
{i + 1}
{s.name}
{tokenCount} 种 token
长度
{s.length}
{dom.map(([k, w]) => (
{labelOf(k)} {w.toFixed(1)}%
))} {tokenCount > dom.length && (
+{tokenCount - dom.length}
)}
); })}
{/* right sidebar — generated sequences */}
已生成序列
{p.sequences.length}
{p.sequences.map((s, i) => (
{s.id}
长度 {s.len} {s.createdAt}
))}
{/* quick actions */}
操作
); } function KpiInline({ label, value, muted }) { return (
{label}
{value}
); } // ═══════════════════════════════════════════════════════════════════ // StageDetailSheet — nested right-drawer showing full read-only Stage // info: EV + difficulty, meta, big probability bar, full 14-row weights // table, and a 30-token sample grid generated from just this stage. // ═══════════════════════════════════════════════════════════════════ function StageDetailSheet({ open, onClose, plan, stage, stageIndex = 0, zLevel = 0 }) { React.useEffect(() => { if (!open) return; const h = (e) => { if (e.key === 'Escape') { e.stopPropagation(); onClose(); } }; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, [open, onClose]); if (!open || !stage) return null; const overlayZ = 60 + zLevel * 20; const panelZ = 70 + zLevel * 20; const ev = expectedValue(stage.weights); const log = ev > 0 ? Math.log2(ev) : 0; const bucket = log < 5 ? ['easy', '#4ecd7a'] : log < 8 ? ['medium', '#ffb93c'] : log < 11 ? ['hard', '#ff6a3c'] : ['extreme', '#c14dff']; let startPos = 1; if (plan && plan.stages) { for (let i = 0; i < stageIndex; i++) startPos += plan.stages[i].length; } const endPos = startPos + stage.length - 1; const sampleCount = Math.min(30, stage.length); const sampleTokens = genTokens( { stages: [{ ...stage, length: sampleCount }] }, (stageIndex + 1) * 1000 + stage.length * 7 + 101, ); const ALL_KEYS = [...ALL_VALUES.map(String), 'stone']; const total = Object.values(stage.weights).reduce((a, b) => a + b, 0) || 1; return (
{/* header */}
{stageIndex + 1}
{stage.name}
EV {ev < 10 ? ev.toFixed(1) : Math.round(ev).toLocaleString()} {bucket[0]}
{/* meta */}
Stage ID
{stage.id}
所属 Plan
{plan ? plan.name : '—'}
顺序
第 {stageIndex + 1} / {plan ? plan.stages.length : '—'} 阶段
长度
{stage.length} 方块 序列位置 #{startPos}–#{endPos}
{/* big probability bar */}
概率分布
{/* full weights table */}
完整权重表
方块
占比
百分比
贡献
{ALL_KEYS.map((key) => { const has = key in stage.weights; const w = has ? stage.weights[key] : 0; const numKey = key === 'stone' ? 0 : Number(key); const contrib = has ? numKey * (w / total) : 0; const c = COLOR_MAP[numKey] || COLOR_MAP[0]; return (
{labelOf(numKey)}
{has ? (
) : —}
{has ? w.toFixed(1) + '%' : ''}
{has ? (contrib < 10 ? contrib.toFixed(1) : Math.round(contrib)) : ''}
); })}
{/* sample */}
采样示例
从该 Stage 按概率采样 {sampleCount} 个方块
{sampleTokens.map((tok, i) => )}
); } // ═══════════════════════════════════════════════════════════════════ // SequenceEditSheet — minimal edit drawer for a single sequence. // Editable: 序列名称 (displayName) + 备注 (note). 序列 ID readonly. // Demo-only — "保存" just closes the drawer (no persistence). // ═══════════════════════════════════════════════════════════════════ function SequenceEditSheet({ open, onClose, sequence }) { const [displayName, setDisplayName] = React.useState(''); const [note, setNote] = React.useState(''); React.useEffect(() => { if (!open) return; const h = (e) => { if (e.key === 'Escape') { e.stopPropagation(); onClose(); } }; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, [open, onClose]); React.useEffect(() => { if (sequence) { setDisplayName(sequence.displayName || ''); setNote(sequence.note || ''); } }, [sequence && sequence.id]); if (!open || !sequence) return null; return (
编辑序列
{/* readonly 序列 ID */}
序列 ID
{sequence.name}
{/* 序列名称 input */}
序列名称
setDisplayName(e.target.value)} placeholder="给这条序列取一个易记的名字" style={{ width: '100%', padding: '9px 12px', fontSize: '0.875rem', border: '1px solid #e6e6ec', borderRadius: 6, background: '#fff', outline: 'none', fontFamily: 'inherit', boxSizing: 'border-box', }} />
{/* 备注 input */}
备注