| | <!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> |
| |
|
