90 lines
6.2 KiB
HTML
90 lines
6.2 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>WxAgent 工作台</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header class="hero">
|
|
<div>
|
|
<p class="eyebrow">DESKTOP AGENT</p>
|
|
<h1>WxAgent 工作台</h1>
|
|
<p class="subtitle">连接 Agent，查看消息、联系人和执行任务。</p>
|
|
</div>
|
|
<span id="connectionBadge" class="badge neutral">未连接</span>
|
|
</header>
|
|
<p class="warning">HTTP 明文不会保护 Token、消息或附件；仅在可信隔离网络使用。</p>
|
|
|
|
<section id="login" class="panel login-panel">
|
|
<h2>连接 Agent</h2>
|
|
<p class="muted">本机打开会自动进入；远程访问请输入连接 Token。Token 不会保存到页面或 URL。</p>
|
|
<form id="loginForm" class="login-form">
|
|
<label for="token">连接 Token</label>
|
|
<div class="input-row"><input id="token" type="password" autocomplete="off" required placeholder="粘贴 Token"><button id="loginButton">连接</button></div>
|
|
</form>
|
|
</section>
|
|
|
|
<section id="app" class="app-shell" hidden>
|
|
<div class="toolbar panel">
|
|
<div class="toolbar-group"><button id="refresh">刷新</button><label class="toggle"><input id="autoRefresh" type="checkbox"> 自动刷新 <span class="muted">15 秒</span></label><span id="lastUpdated" class="muted">尚未刷新</span></div>
|
|
<div class="toolbar-group account-picker"><label for="accountSelect">当前账号</label><select id="accountSelect"><option value="">选择已绑定账号</option></select></div>
|
|
<button id="logout" class="secondary">退出</button>
|
|
</div>
|
|
|
|
<nav class="workbench-nav panel" aria-label="工作台导航">
|
|
<button class="nav-button active" data-view="messages">消息</button>
|
|
<button class="nav-button" data-view="contacts">联系人</button>
|
|
<button class="nav-button" data-view="broadcast">群发</button>
|
|
<button class="nav-button" data-view="operations">任务</button>
|
|
<button class="nav-button" data-view="settings">连接与设置</button>
|
|
</nav>
|
|
|
|
<p id="error" class="error" role="alert" aria-live="assertive"></p>
|
|
|
|
<section class="view-panel" data-view-panel="messages">
|
|
<section class="panel intro-panel">
|
|
<div><p class="eyebrow">消息</p><h2>从已确认账号开始</h2><p class="muted">先在“连接与设置”确认账号和微信窗口，再加载会话与消息。</p></div>
|
|
<label class="toggle"><input id="content" type="checkbox"> 显示正文 <span class="muted">需要 content 权限</span></label>
|
|
</section>
|
|
<section class="panel"><div class="section-heading"><h2>会话</h2><span class="muted">当前账号</span></div><div id="sessions" class="list"></div></section>
|
|
<section class="panel reply-panel"><div class="section-heading"><h2>回复</h2><span id="replyCapability" class="muted">发送能力检查中…</span></div><div class="reply-form"><label for="replyTarget">目标会话</label><select id="replyTarget"><option value="">先选择会话</option></select><label for="replyText">文本</label><textarea id="replyText" rows="4" maxlength="4000" placeholder="输入要发送的文本" disabled></textarea><div class="reply-actions"><button id="sendReply" disabled>发送</button><span id="replyState" class="muted">写能力尚未开放。</span></div></div></section>
|
|
<section class="panel"><div class="section-heading"><h2>可见消息</h2><span class="muted">只显示当前可读取的数据</span></div><div id="messages" class="list"></div></section>
|
|
</section>
|
|
|
|
<section class="view-panel" data-view-panel="contacts" hidden>
|
|
<section class="panel intro-panel"><div><p class="eyebrow">联系人</p><h2>联系人和群</h2><p class="muted">当前阶段只读；群发会在目标确认和任务能力完成后开放。</p></div></section>
|
|
<section class="panel"><div class="section-heading"><h2>联系人 / 群</h2><span class="muted">稳定 ID 去重</span></div><div id="contacts" class="list"></div></section>
|
|
</section>
|
|
|
|
<section class="view-panel" data-view-panel="broadcast" hidden>
|
|
<section class="panel placeholder"><p class="eyebrow">群发</p><h2>逐项确认后发送</h2><p class="muted">群发任务尚未开放。开放后会显示目标清单、幂等键、逐项结果和停止任务入口；当前不会发送消息。</p><button disabled>暂未开放</button></section>
|
|
</section>
|
|
|
|
<section class="view-panel" data-view-panel="operations" hidden>
|
|
<section class="panel"><div class="section-heading"><h2>任务中心</h2><span class="muted">当前登录身份的任务</span></div><div id="operations" class="list"></div></section>
|
|
<section class="panel"><div class="section-heading"><h2>技术详情</h2><span class="muted">用于反馈和诊断</span></div><pre id="operation"></pre></section>
|
|
</section>
|
|
|
|
<section class="view-panel" data-view-panel="settings" hidden>
|
|
<div class="status-grid" aria-live="polite">
|
|
<div class="metric panel"><span>服务</span><strong id="serviceState">—</strong></div>
|
|
<div class="metric panel"><span>微信 UI</span><strong id="wechatState">—</strong></div>
|
|
<div class="metric panel"><span>当前绑定</span><strong id="bindingState">—</strong></div>
|
|
<div class="metric panel"><span>默认模式</span><strong id="modeState">只读</strong></div>
|
|
</div>
|
|
<details class="panel details"><summary>诊断详情</summary><pre id="status" role="status"></pre></details>
|
|
<section class="panel"><div class="section-heading"><h2>能力</h2><span class="muted">按当前凭据显示</span></div><div id="capabilities" class="list"></div></section>
|
|
<div class="dashboard-grid">
|
|
<section class="panel"><div class="section-heading"><h2>账号绑定</h2><span class="muted">数据库账号 ↔ 微信窗口</span></div><div id="accounts" class="list"></div></section>
|
|
<section class="panel"><div class="section-heading"><h2>微信窗口</h2><span class="muted">自动匹配；失败时手动绑定</span></div><div id="uiTargets" class="list"></div></section>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|