| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta |
| name="viewport" |
| content="width=device-width, initial-scale=1, viewport-fit=cover" |
| /> |
| <title>狼人杀调试控制台</title> |
| <link rel="stylesheet" href="./assets/styles.css" /> |
| </head> |
| <body> |
| <div class="backdrop"></div> |
| <div class="orb orb-a"></div> |
| <div class="orb orb-b"></div> |
| <div class="orb orb-c"></div> |
|
|
| <div class="app"> |
| <aside class="panel"> |
| <div class="panel-header"> |
| <div class="brand"> |
| <span class="brand-mark">WW</span> |
| <div> |
| <div class="brand-title">调试控制台</div> |
| <div class="brand-sub">从日志实时读取对局</div> |
| </div> |
| </div> |
| <button id="refresh-btn" class="ghost-btn">刷新</button> |
| </div> |
| <div class="panel-body"> |
| <div class="section-title">对局列表</div> |
| <div id="sessions" class="session-list"></div> |
| </div> |
| <div class="panel-footer"> |
| <div class="status-pill" id="log-path">logs/</div> |
| </div> |
| </aside> |
|
|
| <main class="main"> |
| <header class="main-header"> |
| <div> |
| <div class="headline" id="session-title">请选择一个对局</div> |
| <div class="subhead" id="session-meta">尚未加载数据</div> |
| </div> |
| <div class="header-right"> |
| <div class="header-actions"> |
| <button id="copy-md-btn" class="ghost-btn">复制Markdown</button> |
| <button id="download-md-btn" class="ghost-btn">下载Markdown</button> |
| </div> |
| <div class="live-indicator"> |
| <span class="dot"></span> |
| <span id="live-label">未开启</span> |
| </div> |
| </div> |
| </header> |
|
|
| <section class="cards"> |
| <div class="card"> |
| <div class="card-title">事件数</div> |
| <div class="card-value" id="stat-total">-</div> |
| <div class="card-foot">本对局已记录的总事件</div> |
| </div> |
| <div class="card"> |
| <div class="card-title">输入/输出</div> |
| <div class="card-value" id="stat-io">-</div> |
| <div class="card-foot">perceive / interact</div> |
| </div> |
| <div class="card"> |
| <div class="card-title">兜底次数</div> |
| <div class="card-value" id="stat-fallback">-</div> |
| <div class="card-foot">输出不合规触发的纠错/兜底</div> |
| </div> |
| <div class="card"> |
| <div class="card-title">无效次数</div> |
| <div class="card-value" id="stat-roles">-</div> |
| <div class="card-foot">解析失败（例如不在候选列表）</div> |
| </div> |
| </section> |
|
|
| <section class="controls"> |
| <div class="control"> |
| <label for="search">搜索</label> |
| <input id="search" type="text" placeholder="按状态/角色/玩家名/结果/关键字过滤..." /> |
| </div> |
| <div class="control"> |
| <label>状态</label> |
| <div id="status-filters" class="chip-row"></div> |
| </div> |
| <div class="control"> |
| <label>角色</label> |
| <div id="role-filters" class="chip-row"></div> |
| </div> |
| <div class="control"> |
| <label>自动刷新</label> |
| <div class="toggle"> |
| <input id="auto-refresh" type="checkbox" /> |
| <span>5s</span> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="dash"> |
| <div class="dash-card"> |
| <div class="section-title">对局关键</div> |
| <div id="game-key" class="dash-body"></div> |
| </div> |
| <div class="dash-card"> |
| <div class="section-title">投票汇总</div> |
| <div id="vote-board" class="dash-body"></div> |
| </div> |
| <div class="dash-card"> |
| <div class="section-title">技能过程</div> |
| <div id="skill-board" class="dash-body"></div> |
| </div> |
| <div class="dash-card"> |
| <div class="section-title">记忆快照</div> |
| <div id="memory-board" class="dash-body"></div> |
| </div> |
| </section> |
|
|
| <section class="content"> |
| <div class="timeline"> |
| <div class="section-title">事件时间线</div> |
| <div id="events" class="event-list"></div> |
| </div> |
| <div class="detail"> |
| <div class="section-title">事件详情</div> |
| <div id="detail-card" class="detail-card empty"> |
| <div class="detail-empty">点击左侧事件查看详情（Prompt / 候选 / 纠错 / 记忆）。</div> |
| </div> |
| </div> |
| </section> |
| </main> |
| </div> |
|
|
| <script src="./assets/app.js"></script> |
| </body> |
| </html> |
|
|
