kefu/wechat_rpa/assets/ui/_orig_script.js

    const icon=n=>`<svg class="ico"><use href="#i-${n}"/></svg>`;
    const people=[["高","高瑞@微信","处理中","00:00:12",""],["小","一个小迷糊@微信","等待中","00:01:45","green"],["李","李先生@微信","等待中","00:02:10",""] ,["陈","陈女士@微信","待重试","—","violet"],["张","张小明@微信","等待中","00:03:22","cyan"]];
    let listening=true;
    const head=(title,sub,actions)=>`<header class="page-head"><div><h1>${title}</h1><p>${sub}</p></div><div class="head-actions">${actions}</div></header>`;
    const connected=(extra="",primary="")=>`<span class="btn"><i class="led"></i>企业微信已连接</span><span class="btn"><i class="led"></i>AI 服务正常</span>${extra}<button class="btn ${primary}" data-action="toggle-listen">Ⅱ&nbsp; 暂停监听</button>`;
    const ribbon=items=>`<section class="panel wave-ribbon">${items.map(x=>`<div class="metric"><div class="metric-icon ${x[3]||""}">${icon(x[2])}</div><div class="metric-copy"><span>${x[0]}</span><strong class="${x[4]||x[3]||""}">${x[1]}</strong></div></div>`).join("")}</section>`;
    const queueList=(archive=false)=>`<div class="queue-list">${people.map((p,i)=>`<div class="queue-row ${i===0?"active":""}"><div class="avatar ${p[4]}">${p[0]}</div><div class="q-copy"><strong>${p[1]}</strong><span>${archive?(i===0?"请问你们的灵芝孢子粉怎么服用…":i===1?"每天吃几次比较合适？":i===2?"有不良反应吗？":"会话已归档"):`<i class="${i===3?"orange":i?"gray":""}"></i>${p[2]}`}</span></div><div class="q-meta"><span>${archive?["16:31","16:18","15:42","14:20","13:35"][i]:p[3]}</span>${archive?`<span class="badge ${i===2?"orange":""}">${i===2?"已转人工":"AI 已回复"}</span>`:`<span class="bubble-count">${icon("message")} ${i===3?1:0}</span>`}</div></div>`).join("")}</div>`;
    const activities=(more="查看完整日志")=>`<div class="activity-strip">${[["16:33:27","扫描未读","检测到客户未读消息","activity","成功",""],["16:33:28","提取聊天记录","已提取最近 6 条聊天记录","log","成功",""],["16:33:29","AI 服务","正在请求 AI 生成回复","brain","进行中","blue"],["16:33:31","人工保护","检测到人工鼠标操作，暂停 5 秒","user","警告","orange"]].map(x=>`<div class="activity-card"><div class="activity-icon ${x[5]}">${icon(x[3])}</div><time>${x[0]}</time><strong>${x[1]}</strong><p>${x[2]}</p><span class="activity-state" style="color:${x[5]==="orange"?"var(--orange)":x[5]==="blue"?"var(--blue)":"var(--green)"}">● ${x[4]}</span></div>`).join("")}<button class="btn blue activity-more" data-action="logs">${more}　›</button></div>`;
    const journey=()=>`<div class="journey">${[["扫描未读","已完成","0.3s"],["提取聊天记录","已完成","1.2s"],["合并连续消息","已完成","0.4s"],["发送至 AI","已完成","0.6s"],["生成回复","进行中","2.4s"],["回填企业微信","等待","—"],["自动发送与归档","等待","—"]].map((x,i)=>`<div class="j-step ${i===4?"active":i>4?"wait":""}"><div class="j-dot">${i<4?"✓":i+1}</div><div class="j-copy"><strong>${x[0]}</strong><span>${x[1]}</span></div><div class="j-time">${x[2]}</div></div>`).join("")}</div>`;
    const statusCells=items=>`<div class="status-cells">${items.map(x=>`<div class="status-cell"><div class="metric-icon">${icon(x[0])}</div><div><strong>${x[1]}</strong><span>${x[2]}</span></div></div>`).join("")}</div>`;
    function autoView(){return `<div class="screen">${head("桌面自动化控制台","监听企业微信未读消息，并由 AI 自动生成与发送回复",connected(`<span class="btn blue">${icon("send")}自动发送</span>`,"danger"))}${ribbon([["监听状态","运行中","activity","green"],["排队","3","users"],["今日回复","128","message"],["失败","1","alert","red"]])}<div class="auto-grid"><section class="panel panel-pad queue-card"><div class="panel-title"><h2>任务队列</h2><div class="toolbar"><span class="badge">3</span>${icon("filter")}${icon("sort")}</div></div>${queueList()}<div class="queue-footer"><span>共 5 个会话</span><button class="round-btn" data-action="toast">${icon("refresh")}</button></div></section><section class="panel panel-pad task-card"><div class="panel-title"><h2>当前处理任务</h2><div class="task-head-meta"><span class="badge">${icon("user")}高瑞@微信</span><span class="badge">已读取 6 条消息</span><span class="badge">AI 生成中</span></div></div><div class="subhead">复制的聊天内容</div><div class="copy-block"><div class="message-line"><time>16:32:11</time><span>请问你们的灵芝孢子粉怎么服用？</span></div><div class="message-line"><time>16:32:18</time><span>每天吃几次比较合适？</span></div><div class="message-line"><time>16:32:26</time><span>有什么注意事项吗？</span></div></div><div class="subhead">AI 回复预览</div><div class="answer-block">您好！灵芝孢子粉建议每日 1–2 次，每次 2–3 克，温水冲服，饭前半小时或睡前服用效果更佳。<br>如有特殊体质或正在服药，建议咨询专业医生后再服用哦。</div><div class="answer-meta"><span>${icon("shield")}置信度 <b>96%</b></span><span>${icon("clock")}模型耗时 2.4s</span></div><div class="task-actions"><button class="btn small danger" data-action="toast">${icon("stop")}终止本任务</button><button class="btn small orange" data-action="toast">${icon("user")}转人工</button></div></section><section class="panel panel-pad journey-card"><div class="panel-title"><h2>自动化执行状态</h2><small>总耗时 5.01s</small></div>${journey()}</section><section class="panel panel-pad window-card"><div class="panel-title"><h2>企业微信窗口状态</h2></div><div class="window-status">${[["folder","窗口","已识别"],["message","当前会话","高瑞@微信"],["monitor","DPI","200%"],["shield","人工保护","5 秒"],["refresh","最小化恢复","已开启"]].map(x=>`<div class="window-stat">${icon(x[0])}<strong>${x[1]}</strong><span>${x[2]}</span></div>`).join("")}</div></section></div><section class="panel activity-panel"><div class="panel-title"><h2>实时事件</h2></div>${activities()}</section></div>`}
    function queueView(){return `<div class="screen">${head("任务队列","查看排队、处理中与待重试的自动回复任务",connected(`<span class="btn blue">${icon("send")}自动发送</span>`,"danger"))}${ribbon([["处理中","1","check","","blue"],["等待中","3","clock"],["待重试","1","refresh","orange"],["平均等待","12s","clock","green"]])}<div class="queue-view-grid"><section class="panel panel-pad"><div class="panel-title"><h2>全部任务</h2></div><div class="queue-filters"><button class="filter-pill active">全部</button><button class="filter-pill">处理中</button><button class="filter-pill">等待中</button><button class="filter-pill">待重试</button></div>${queueList()}<div class="queue-footer"><span>共 5 个任务</span>${icon("refresh")}</div></section><section class="panel panel-pad"><div class="panel-title"><h2>任务详情</h2></div><div class="detail-stats"><div class="detail-stat"><span>客户</span><b>高瑞@微信</b></div><div class="detail-stat"><span>会话 ID</span><b>7bc26546…　${icon("copy")}</b></div><div class="detail-stat"><span>已等待</span><b>12 秒</b></div><div class="detail-stat"><span>重试</span><b>0 次</b></div></div><div class="subhead">来源消息</div><div class="copy-block"><div class="message-line"><time>16:32:11</time><span>请问你们的灵芝孢子粉怎么服用？</span></div></div><div class="process-title">✦　AI 生成回复中</div><div class="process-line">${[["入队","16:32:11"],["读取消息","16:32:11"],["请求 AI","16:32:12"],["生成回复","进行中"],["回填发送","等待中"],["完成","等待中"]].map((x,i)=>`<div class="process-step ${i<3?"done":i===3?"active":""}"><div class="process-dot">${i<3?"✓":i+1}</div><strong>${x[0]}</strong><span>${x[1]}</span></div>`).join("")}</div><div class="task-actions" style="margin-top:17px;justify-content:center"><button class="btn danger" data-action="toast">×　取消任务</button><button class="btn blue" data-action="toast">${icon("refresh")}立即重试</button><button class="btn orange" data-action="toast">${icon("users")}转人工</button></div></section><section class="panel panel-pad"><div class="panel-title"><h2>调度信息</h2></div><div class="stack"><div class="side-stat"><div class="metric-icon">⚑</div><div><span>优先级</span><b>普通</b></div></div><div class="side-stat"><div class="metric-icon">${icon("clock")}</div><div><span>预计完成</span><b>3 秒</b></div></div><div class="side-stat"><div class="metric-icon green">${icon("shield")}</div><div><span>人工保护</span><b style="color:var(--green)">已开启</b></div></div><div class="side-stat"><div class="metric-icon">${icon("refresh")}</div><div><span>下次重试</span><b>—</b></div></div></div></section></div><section class="panel activity-panel"><div class="panel-title"><h2>任务执行记录</h2></div>${activities()}</section></div>`}
    function archiveView(){return `<div class="screen">${head("会话归档","保存客户上下文、自动回复与回访线索",`<span class="btn"><i class="led"></i>企业微信已连接</span><span class="btn"><i class="led"></i>AI 服务正常</span><button class="btn blue" data-action="toast">${icon("download")}导出记录</button>`)}<section class="panel filter-row"><label class="search">${icon("search")}<input placeholder="搜索客户或会话 ID"></label><button class="filter-pill active">全部会话⌄</button><button class="filter-pill">今日</button><button class="filter-pill">AI 已回复</button><button class="filter-pill">已转人工</button><button class="filter-pill">2026-08-18　□</button></section><div class="archive-grid"><section class="panel panel-pad"><div class="panel-title"><h2>最近会话</h2></div>${queueList(true)}<div class="queue-footer"><span>共 21 个会话</span><button class="round-btn">${icon("refresh")}</button></div></section><section class="panel panel-pad"><div class="panel-title"><h2>会话记录</h2></div><div class="toolbar" style="margin-bottom:12px"><span class="badge">${icon("user")}高瑞@微信</span><span class="badge">6 条消息</span><span class="badge">AI 已回复</span><span class="badge">${icon("clock")}16:31 更新</span></div><div class="chat"><div class="chat-line"><span class="mini-avatar">${icon("user")}</span><div class="chat-bubble"><time>16:32:11</time>请问你们的灵芝孢子粉怎么服用？</div></div><div class="chat-line ai"><span class="mini-avatar">${icon("bot")}</span><div class="chat-bubble"><time>16:32:18</time>每天吃几次比较合适？</div></div><div class="chat-line"><span class="mini-avatar">${icon("user")}</span><div class="chat-bubble"><time>16:32:26</time>有什么注意事项吗？</div></div><div class="chat-line ai"><span class="mini-avatar">${icon("bot")}</span><div class="chat-bubble"><time>16:32:42</time>温水冲服，饭前半小时或睡前服用效果更佳。<br>如有特殊体质或正在服药，建议咨询专业医生后再服用哦。</div></div><div class="chat-line"><span class="mini-avatar">${icon("user")}</span><div class="chat-bubble"><time>16:33:05</time>好的，谢谢！</div></div><div class="chat-line ai"><span class="mini-avatar">${icon("bot")}</span><div class="chat-bubble"><time>16:33:12</time>不客气！如有其他问题，随时为您服务～</div></div></div></section><div class="stack"><section class="panel panel-pad memory-card"><div class="panel-title"><h2>客户记忆</h2></div><div class="toolbar"><span class="tag">饮食控制</span><span class="tag violet">体重管理</span><span class="tag blue">长期回访</span></div><div class="memory-copy">客户关注灵芝孢子粉的服用方法与注意事项，希望优化服用时间与剂量，同时注重产品安全性与体质适配。</div><span class="badge" style="margin-top:10px">◔ 上下文 8 轮</span></section><section class="panel panel-pad settle-card"><div class="panel-title"><h2>业务沉淀</h2></div><div class="stack" style="gap:8px"><div class="settle-row"><div class="settle-icon">▣</div><div><strong>挂号登记</strong><small>已登记潜在客户</small></div><b>1 次　✓</b></div><div class="settle-row"><div class="settle-icon" style="background:linear-gradient(145deg,#9d7cff,#6e5be5)">☎</div><div><strong>回访线索</strong><small>创建回访计划</small></div><b>1 条　✓</b></div><div class="settle-row"><div class="settle-icon" style="background:linear-gradient(145deg,#ffc65a,#ff941f)">${icon("user")}</div><div><strong>人工跟进</strong><small>未分配客服</small></div><b>0 次　·</b></div></div></section></div></div><section class="panel panel-pad archive-bottom"><div class="panel-title"><h2>最近更新</h2></div>${activities("复制全部记录")}</section></div>`}
    function aiView(){return `<div class="screen">${head("AI 设置","配置模型、客服人格、知识库与工具能力",`<span class="btn"><i class="led"></i>配置已同步</span><button class="btn" data-action="toast">▷　测试 AI</button><button class="btn primary" data-action="toast">${icon("send")}保存并发布</button>`)}<div class="tabs"><button class="tab active">基础设置</button><button class="tab">知识与工具</button><button class="tab">安全策略</button></div><div class="ai-top"><section class="panel panel-pad"><div class="panel-title"><h2>客服人格</h2></div><div class="ai-profile"><div class="ai-ball">AI</div><div class="stack"><div class="field"><label>客服名称：</label><input class="input" value="贴心管家"></div><div class="toolbar"><b style="font-size:13px">服务风格：</b><span class="badge green">温和</span><span class="badge">专业</span><span class="badge" style="color:#7657e7;background:rgba(125,91,236,.08)">简洁</span></div><div class="field"><label>人格提示词：</label><textarea class="textarea">你是甄养堂的贴心管家，温和专业、耐心解答用户关于健康管理与产品服务的问题。表达清晰简洁，关注用户需求，提供实用建议，必要时引导用户转人工客服。</textarea></div></div><div class="preview-box"><b>✧　实时预览</b><p>您好！我是甄养堂贴心管家，<br>很高兴为您服务 😊</p><p>请问有什么可以帮您的吗？</p></div></div></section><section class="panel panel-pad"><div class="panel-title"><h2>✣ 模型引擎</h2></div><div class="field"><label>当前模型</label><select class="select model"><option>✦　Qwen 3.6 35B</option></select></div><div class="form-grid" style="margin-top:17px"><div class="field"><label>备用模型</label><select class="select"><option>Qwen 3.1 14B</option></select></div><div class="field"><label>上下文</label><select class="select"><option>8 轮</option></select></div><div class="field"><label>最大回复</label><select class="select"><option>500 tokens</option></select></div></div><div class="form-grid two" style="margin-top:18px"><div class="field"><label>温度　0.35</label><input class="range" type="range" value="35"></div><div class="field"><label>回复长度　中等</label><input class="range" type="range" value="55"></div></div></section></div><div class="ai-bottom"><section class="panel panel-pad"><div class="panel-title"><h2>▰ 企业知识库</h2></div><div class="knowledge"><div class="donut"><strong>1,284<small>个知识片段</small></strong></div><div class="stack"><span class="badge green">●　刚刚同步</span><span class="badge green">✓　已连接</span><button class="btn small primary" data-action="toast">${icon("refresh")}立即同步</button><button class="btn small" data-action="toast">${icon("folder")}管理知识</button></div></div></section><section class="panel panel-pad"><div class="panel-title"><h2>◇ MCP 工具</h2><small>单次最多调用 5 个工具　ⓘ</small></div><div class="tool-grid"><div class="tool-card"><div class="tool-icon">▣</div><b>挂号登记</b><div class="row"><small>已启用</small><div class="switch on"></div></div></div><div class="tool-card"><div class="tool-icon">⌕</div><b>客户查询</b><div class="row"><small>已启用</small><div class="switch on"></div></div></div><div class="tool-card"><div class="tool-icon">▤</div><b>回访记录</b><div class="row"><small>已启用</small><div class="switch on"></div></div></div></div></section><section class="panel panel-pad"><div class="panel-title"><h2>${icon("shield")} 安全边界</h2></div><div class="stack"><div class="setting-line"><span>🛡　不做医疗诊断</span></div><div class="setting-line"><span>💊　不修改用药方案</span></div><div class="setting-line"><span>♙　高风险转人工</span></div></div><div class="row" style="margin-top:10px;justify-content:flex-end"><span>当前模式：</span><span class="badge green">${icon("shield")}严格模式</span></div></section></div><section class="panel panel-pad config-strip"><div class="panel-title"><h2>配置状态</h2></div>${statusCells([["cloud","云端模型正常","最后检查：刚刚"],["folder","知识库已同步","1,284 个知识片段"],["folder","3 个工具可用","全部运行正常"],["shield","安全策略已生效","严格模式"]])}</section></div>`}
    function automationView(){return `<div class="screen">${head("自动化设置","配置企业微信监听、消息合并与自动发送规则",`<span class="btn"><i class="led"></i>企业微信已识别</span><span class="btn"><i class="led"></i>规则已生效</span><button class="btn primary" data-action="toast">${icon("save")}保存设置</button>`)}<div class="tabs"><button class="tab active">${icon("send")}　自动发送</button><button class="tab">${icon("users")}　审核后发送</button></div><div class="automation-top"><section class="panel panel-pad"><div class="panel-title"><h2>监听与发送策略</h2></div><span class="badge green">${icon("activity")} ● 规则运行中</span><div class="auto-flow">${[["activity","扫描未读"],["log","提取消息"],["folder","合并消息"],["brain","请求 AI"],["send","回填发送"]].map(x=>`<div class="flow-step"><div class="flow-circle">${icon(x[0])}</div><strong>${x[1]}</strong></div>`).join("")}</div><div class="form-grid"><div class="flow-pill">${icon("clock")}扫描间隔　<b style="color:#2d65f0">2 秒</b></div><div class="flow-pill">⌛ 连续消息等待　<b style="color:#2d65f0">20 秒</b></div><div class="flow-pill">${icon("clock")}发送前等待　<b style="color:#2d65f0">1 秒</b></div></div></section><section class="panel panel-pad"><div class="panel-title"><h2>企业微信窗口</h2></div><div class="wechat-graphic"><div class="fake-window"><div class="fake-check">✓</div></div><div class="stack"><div class="row"><span>▣　主窗口：</span><b style="color:var(--green)">● 已识别</b></div><div class="row"><span>${icon("user")}　当前账号：</span><b>甄养堂客服</b></div><div class="row"><span>◎　DPI：</span><b>200%</b></div><div class="row"><span>${icon("monitor")}　最小化恢复：</span><b style="color:var(--green)">● 已开启</b></div></div></div><div class="task-actions"><button class="btn small blue" data-action="toast">${icon("refresh")}重新检测</button></div></section></div><div class="automation-mid"><section class="panel panel-pad"><div class="panel-title"><h2>人机共存</h2></div><div class="setting-line"><span>启用人工操作保护</span><div class="switch on"></div></div><div style="text-align:center;margin-top:8px">鼠标静止　<b style="color:#2562ed">5 秒</b> 后恢复</div><div class="mouse-orb"><span style="color:#315fec">${icon("bot")}<br><small>AI 运行中</small></span><div class="mouse-pointer">➤</div><span style="color:var(--orange)">Ⅱ<br><small>检测到人工操作<br>AI 暂停</small></span></div></section><section class="panel panel-pad"><div class="panel-title"><h2>消息处理</h2></div><div class="stack"><div class="setting-line"><span>✓　同一客户连续消息自动合并</span></div><div class="setting-line"><span>✓　保留最近 8 轮上下文</span><span class="badge">8 轮</span></div><div class="setting-line"><span>✓　一次只处理 1 个会话</span><span class="badge">1 个</span></div></div></section><section class="panel panel-pad"><div class="panel-title"><h2>异常与兜底</h2></div><div class="stack"><div class="setting-line"><span style="color:var(--orange)">${icon("clock")}</span><span style="flex:1">AI 超时：重试 2 次</span><span class="badge">2 次</span></div><div class="setting-line"><span style="color:var(--orange)">${icon("alert")}</span><span style="flex:1">发送失败：自动重试</span><span class="badge green">已开启</span></div><div class="setting-line"><span style="color:#3c69f4">${icon("message")}</span><span style="flex:1">固定回复：在的，请稍等</span><span class="badge">编辑</span></div></div></section><section class="panel panel-pad"><div class="panel-title"><h2>高风险转人工</h2><span class="badge green">● 已开启</span></div><div class="risk-tags"><span class="risk-tag">⚕　诊断</span><span class="risk-tag">◇　用药调整</span><span class="risk-tag">￥　投诉退款</span></div><button class="btn small blue" style="margin:11px auto 0;display:flex" data-action="toast">${icon("settings")}规则管理</button></section></div><section class="panel panel-pad check-strip"><div class="panel-title"><h2>启动前检查</h2></div>${statusCells([["check","企业微信已登录","检查完成"],["cloud","AI 服务正常","检查完成"],["activity","窗口坐标已校准","检查完成"],["shield","规则配置有效","检查完成"]])}</section></div>`}
    function logsView(){return `<div class="screen">${head("运行日志","实时追踪连接、消息识别、AI 调用与自动发送事件",`<button class="btn" data-action="toast">${icon("refresh")}实时刷新</button><button class="btn" data-action="toast">${icon("download")}导出日志</button><button class="btn danger" data-action="clear-logs">▱　清空日志</button><span class="btn" style="color:var(--green)"><span class="orb" style="width:31px;height:31px"></span>监控中</span>`)}${ribbon([["企业微信","99.9%","message","green"],["AI 成功率","98.6%","brain","","blue"],["平均响应","2.4s","clock","","blue"],["警告","1","alert","red"]])}<div class="logs-grid"><section class="panel panel-pad event-flow"><div class="panel-title"><h2>实时事件流</h2></div><div class="toolbar" style="margin-bottom:7px"><button class="filter-pill active" style="height:34px;padding:0 17px">全部</button><button class="filter-pill" style="height:34px;padding:0 17px">连接</button><button class="filter-pill" style="height:34px;padding:0 17px">识别</button><button class="filter-pill" style="height:34px;padding:0 17px">AI</button><button class="filter-pill" style="height:34px;padding:0 17px">发送</button><button class="filter-pill" style="height:34px;padding:0 17px">警告</button><label class="search" style="height:34px;width:180px;margin-left:auto">${icon("search")}<input placeholder="搜索事件内容"></label></div><div class="event-list" id="log-list">${[["16:33:27","未读扫描","检测到客户未读消息","activity","成功","green"],["16:33:28","提取聊天记录","已读取最近 6 条消息","message","成功","green"],["16:33:29","AI 服务","正在生成回复","brain","进行中",""],["16:33:31","人工保护","检测到鼠标操作，暂停 5 秒","user","警告","orange"],["16:33:36","自动发送","回复发送成功","send","成功","green"]].map(x=>`<div class="event-row"><div class="event-node">✓</div><time>${x[0]}　●</time><div class="event-kind" style="color:${x[5]==="orange"?"var(--orange)":x[5]==="green"?"var(--green)":"var(--blue)"}">${icon(x[3])}</div><div class="event-copy"><strong>${x[1]}</strong><span>${x[2]}</span></div><span class="badge ${x[5]}">${x[4]}</span></div>`).join("")}</div></section><section class="panel panel-pad"><div class="panel-title"><h2>系统健康</h2></div><div class="health-rings">${[["企业微信连接","正常"],["AI 服务","正常"],["窗口识别","正常"]].map(x=>`<div><div class="health-ring">${icon("check")}</div><strong>${x[0]}</strong><span>${x[1]}</span></div>`).join("")}</div><div class="btn small" style="display:flex;margin:10px auto 0;width:350px">${icon("clock")}运行时长　<b style="color:#2b62f2">02:18:46</b></div></section><section class="panel panel-pad"><div class="panel-title"><h2>当前回复链路</h2></div><div class="chain">${[["activity","扫描未读","0.3s"],["message","读取消息","1.2s"],["brain","请求 AI","2.4s"],["send","回填发送","0.6s"]].map(x=>`<div class="chain-step"><div class="flow-circle">${icon(x[0])}</div><strong>${x[1]}</strong><span>${x[2]}</span></div>`).join("")}</div></section></div><div class="log-mid"><section class="panel panel-pad" style="background:linear-gradient(130deg,rgba(255,253,250,.82),rgba(255,245,239,.72))"><div class="panel-title"><h2>事件详情</h2></div><div class="row" style="justify-content:flex-start;gap:16px"><div class="metric-icon orange">${icon("user")}</div><div><b>人工保护</b><p style="margin:4px 0 7px;font-size:12px">检测到人工鼠标操作，自动回复暂停 5 秒</p><div class="toolbar"><span class="badge orange">模块：人机共存</span><span class="badge orange">会话：高瑞@微信</span><span class="badge green">已自动恢复</span></div></div></div></section><section class="panel panel-pad"><div class="panel-title"><h2>异常追踪</h2></div><div class="exception-grid"><div class="exception"><div class="metric-icon red">${icon("alert")}</div><div>发送失败<b>1</b></div></div><div class="exception"><div class="metric-icon" style="color:#785cf1">${icon("clock")}</div><div>模型超时<b>0</b></div></div><div class="exception"><div class="metric-icon orange">${icon("monitor")}</div><div>窗口丢失<b>0</b></div></div><button class="btn blue" data-action="toast">查看异常　›</button></div></section></div><section class="panel activity-panel recent-activity"><div class="panel-title"><h2>最近活动</h2></div>${activities("查看完整记录")}</section></div>`}
    function systemView(){return `<div class="screen">${head("系统设置","管理软件启动、数据存储、通知与系统维护",`<span class="btn">当前版本　v2.0　ⓘ</span><button class="btn" data-action="toast">${icon("refresh")}检查更新</button><button class="btn primary" data-action="toast">${icon("save")}保存设置</button>`)}<div class="system-top"><section class="panel panel-pad"><div class="panel-title"><h2>基础设置</h2></div><div class="stack" style="gap:8px"><div class="system-line">${icon("power")}<span>开机自动启动</span><div class="switch on"></div></div><div class="system-line">${icon("activity")}<span>启动后自动监听</span><div class="switch on"></div></div><div class="system-line">▰<span>最小化到系统托盘</span><div class="switch on"></div></div><div class="system-line">${icon("log")}<span>关闭窗口时保持后台运行</span><div class="switch on"></div></div><div class="system-line">◎<span>界面语言：　简体中文</span>⌄</div><div class="system-line">${icon("monitor")}<span>缩放比例：　自动</span>⌄</div></div></section><section class="panel panel-pad"><div class="panel-title"><h2>数据与存储</h2></div><div class="storage-grid"><div class="donut" style="width:145px;height:145px"><strong>286<small>MB 已使用</small></strong></div><div class="stack"><div class="row"><span>●　会话归档</span><span>128 MB</span></div><div class="row"><span>●　运行日志</span><span>86 MB</span></div><div class="row"><span>●　缓存数据</span><span>72 MB</span></div></div></div><div class="row" style="justify-content:center;margin-top:7px"><span>数据保留</span><span class="btn small">90 天　⌄</span></div><div class="storage-actions"><button class="btn small blue" data-action="toast">${icon("folder")}打开目录</button><button class="btn small blue" data-action="toast">${icon("cloud")}立即备份</button><button class="btn small blue" data-action="toast">⌁　清理缓存</button></div></section><section class="panel panel-pad"><div class="panel-title"><h2>通知提醒</h2></div><div class="stack" style="gap:8px"><div class="system-line">${icon("send")}<span>发送失败提醒</span><div class="switch on"></div></div><div class="system-line">⌛<span>模型超时提醒</span><div class="switch on"></div></div><div class="system-line">${icon("user")}<span>需要人工跟进</span><div class="switch on"></div></div><div class="system-line">⌁<span>企业微信连接中断</span><div class="switch on"></div></div><div class="notice-preview"><div class="metric-icon">♟</div><div><b>发送失败提醒</b><small style="display:block">消息发送失败，已加入重试队列</small></div><time>16:33<br><span style="color:#3772ff">●</span></time></div></div></section></div><div class="system-mid"><section class="panel panel-pad"><div class="panel-title"><h2>安全与隐私</h2></div><div class="stack" style="gap:6px"><div class="system-line">${icon("shield")}<span>敏感信息脱敏：</span><b>已开启　●</b></div><div class="system-line">${icon("lock")}<span>本地数据加密：</span><b>已开启　●</b></div><div class="system-line">${icon("lock")}<span>日志隐藏聊天正文：</span><b>已开启　●</b></div><div class="system-line">${icon("log")}<span>退出时清理剪贴板：</span><b>已开启　●</b></div></div></section><section class="panel panel-pad"><div class="panel-title"><h2>网络与服务</h2></div><div class="stack" style="gap:7px"><div class="system-line">${icon("cloud")}<span>云端 AI：</span><b>已连接　●</b></div><div class="system-line">${icon("folder")}<span>企业知识库：</span><b>已连接　●</b></div><div class="system-line">⌁<span>网络延迟：</span><b>28ms　●</b></div></div><button class="btn small blue" style="margin:10px auto 0;display:flex" data-action="toast">⌁　连接测试</button></section><section class="panel panel-pad"><div class="panel-title"><h2>维护与诊断</h2></div><div class="maintenance"><div class="maint-card"><div class="metric-icon">${icon("refresh")}</div><div><strong>检查更新</strong><small>已是最新版本</small></div></div><div class="maint-card"><div class="metric-icon">▣</div><div><strong>导出诊断</strong><small>导出系统诊断报告</small></div></div><div class="maint-card"><div class="metric-icon">↻</div><div><strong>恢复默认设置</strong><small>重置所有设置项</small></div></div><div class="maint-card"><div class="metric-icon">${icon("shield")}</div><div><strong>查看许可信息</strong><small>查看软件许可详情</small></div></div></div></section></div><section class="panel panel-pad system-status"><div class="panel-title"><h2>系统状态</h2></div>${statusCells([["shield","配置已保存","所有设置已生效"],["cloud","数据已备份","最近备份：16:33:28"],["shield","安全策略正常","所有安全策略已启用"],["monitor","后台服务运行中","系统运行状态良好"]])}</section></div>`}
    const views={auto:autoView,queue:queueView,archive:archiveView,ai:aiView,automation:automationView,logs:logsView,system:systemView};
    const glyphIcons=[["✦","sparkles"],["✧","sparkles"],["✣","brain"],["⚑","flag"],["▣","clipboard"],["☎","phone"],["⌕","search"],["▤","clipboard"],["◇","package"],["🛡","shield"],["💊","pill"],["♙","users"],["⌛","hourglass"],["◎","globe"],["⚕","shield"],["￥","coins"],["⌁","wifi"],["♟","bell"],["▰","tray"],["▷","play"],["↻","refresh"],["➤","cursor"],["Ⅱ","pause"],["◔","clock"],["ⓘ","info"],["⌄","chevron"]];
    function polishedIcons(html){return glyphIcons.reduce((value,[glyph,name])=>value.replaceAll(glyph,icon(name)),html)}
    function render(name){
      if(!views[name])name="auto";
      document.querySelectorAll("[data-view]").forEach(b=>b.classList.toggle("active",b.dataset.view===name));
      document.getElementById("main").innerHTML=polishedIcons(views[name]());
      const listen=document.querySelector('[data-action="toggle-listen"]');
      if(listen)listen.innerHTML=listening?`${icon("pause")}暂停监听`:`${icon("play")}恢复监听`;
      location.hash=name;
    }
    function toast(msg="操作已完成"){const t=document.getElementById("toast");t.textContent=msg;t.classList.add("show");clearTimeout(window.__toast);window.__toast=setTimeout(()=>t.classList.remove("show"),1600)}
    document.addEventListener("click",e=>{const nav=e.target.closest("[data-view]");if(nav){render(nav.dataset.view);return}const action=e.target.closest("[data-action]");if(action){const a=action.dataset.action;if(a==="toggle-listen"){listening=!listening;document.getElementById("orb").classList.toggle("paused",!listening);document.getElementById("orb-label").textContent=listening?"监听中":"已暂停";render(location.hash.slice(1));toast(listening?"已恢复监听":"监听已暂停")}else if(a==="logs")render("logs");else if(a==="clear-logs"){const list=document.getElementById("log-list");if(list)list.innerHTML='<div class="soft" style="height:170px;display:grid;place-items:center;color:var(--muted)">日志已清空</div>';toast("日志已清空")}else toast()}const sw=e.target.closest(".switch");if(sw)sw.classList.toggle("on");const pill=e.target.closest(".filter-pill,.tab");if(pill){[...pill.parentElement.children].forEach(x=>x.classList.remove("active"));pill.classList.add("active")}});
    function fit(){const s=Math.min(innerWidth/1630,innerHeight/965);document.getElementById("stage").style.setProperty("--scale",String(s))}addEventListener("resize",fit);fit();render((location.hash||"#auto").slice(1));