Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> | |
| <title>Hermes</title> | |
| <style> | |
| :root{ | |
| --bg:#0a0c10;--card:rgba(255,255,255,.03);--card-h:rgba(255,255,255,.06); | |
| --border:rgba(255,255,255,.06);--border-a:rgba(255,255,255,.12); | |
| --tx:#e8eaf0;--tx2:#7a8394;--tx3:#444d5e; | |
| --accent:#00e5a0;--accent2:rgba(0,229,160,.12); | |
| --blue:#4d9fff;--purple:#a78bfa;--red:#ff5c72;--yellow:#ffbe30;--cyan:#22d3ee;--orange:#fb923c; | |
| --radius:14px;--radius-sm:10px; | |
| --safe-top:env(safe-area-inset-top,0px); | |
| --safe-bot:env(safe-area-inset-bottom,0px); | |
| --tab-h:56px; | |
| } | |
| *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} | |
| html,body{height:100%;overflow:hidden} | |
| body{font-family:-apple-system,"SF Pro Display","Noto Sans SC","PingFang SC","Helvetica Neue",sans-serif;background:var(--bg);color:var(--tx);font-size:15px;-webkit-font-smoothing:antialiased} | |
| ::-webkit-scrollbar{width:3px} | |
| ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px} | |
| /* ── Shell ── */ | |
| .shell{display:flex;flex-direction:column;height:100%;height:100dvh;padding-top:var(--safe-top);padding-bottom:var(--safe-bot)} | |
| /* ── Header ── */ | |
| .hdr{display:flex;align-items:center;padding:10px 16px;gap:10px;flex-shrink:0;border-bottom:1px solid var(--border)} | |
| .hdr-brand{font-weight:700;font-size:17px;letter-spacing:-.3px;display:flex;align-items:center;gap:8px} | |
| .hdr-brand svg{width:20px;height:20px} | |
| .hdr-tag{font-size:10px;padding:2px 7px;border-radius:6px;background:var(--accent2);color:var(--accent);font-weight:600;letter-spacing:.3px} | |
| .hdr-right{margin-left:auto;display:flex;align-items:center;gap:12px} | |
| .hdr-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:blink 2s ease infinite} | |
| .hdr-dot.off{background:var(--red);box-shadow:0 0 6px var(--red)} | |
| @keyframes blink{0%,100%{opacity:1}50%{opacity:.35}} | |
| .hdr-stat{font-size:11px;color:var(--tx2);font-variant-numeric:tabular-nums} | |
| .hdr-stat b{color:var(--tx);font-weight:600} | |
| /* ── Panels ── */ | |
| .panels{flex:1;position:relative;overflow:hidden} | |
| .panel{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;transform:translateY(6px);-webkit-overflow-scrolling:touch} | |
| .panel.on{opacity:1;pointer-events:auto;transform:translateY(0)} | |
| .panel-pad{padding:16px} | |
| /* ── Tab Bar ── */ | |
| .tabs{display:flex;align-items:stretch;height:var(--tab-h);flex-shrink:0;background:rgba(12,14,20,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);padding-bottom:2px} | |
| .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--tx3);transition:color .15s;position:relative} | |
| .tab svg{width:21px;height:21px;transition:transform .15s} | |
| .tab span{font-size:10px;font-weight:500} | |
| .tab.on{color:var(--accent)} | |
| .tab.on svg{transform:scale(1.1)} | |
| .tab::before{content:'';position:absolute;top:-1px;left:25%;right:25%;height:2px;border-radius:1px;background:var(--accent);opacity:0;transition:opacity .15s} | |
| .tab.on::before{opacity:1} | |
| /* ── Cards ── */ | |
| .cards{display:grid;grid-template-columns:1fr 1fr;gap:10px} | |
| .card{padding:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);transition:background .12s} | |
| .card:active{background:var(--card-h)} | |
| .card-label{font-size:11px;color:var(--tx3);font-weight:500;margin-bottom:6px} | |
| .card-val{font-size:15px;font-weight:700;font-family:"SF Mono",Menlo,Monaco,Consolas,monospace;display:flex;align-items:center;gap:6px;word-break:break-all} | |
| .card-sub{font-size:10px;color:var(--tx3);margin-top:4px;font-family:"SF Mono",Menlo,Monaco,Consolas,monospace} | |
| .card.accent .card-val{color:var(--accent)} | |
| .card.blue .card-val{color:var(--blue)} | |
| .card.purple .card-val{color:var(--purple)} | |
| .card.yellow .card-val{color:var(--yellow)} | |
| .card.cyan .card-val{color:var(--cyan)} | |
| .card.orange .card-val{color:var(--orange)} | |
| .card-wide{grid-column:1/-1} | |
| /* ── Section ── */ | |
| .sec-title{font-size:12px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin:20px 0 10px;display:flex;align-items:center;gap:6px} | |
| .sec-title::after{content:'';flex:1;height:1px;background:var(--border)} | |
| /* ── Log Panel ── */ | |
| .log-toolbar{display:flex;align-items:center;gap:6px;padding:8px 16px;flex-shrink:0;border-bottom:1px solid var(--border);flex-wrap:wrap} | |
| .log-chip{height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--tx3);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .12s;display:flex;align-items:center;gap:4px;white-space:nowrap} | |
| .log-chip.on{background:var(--accent2);border-color:rgba(0,229,160,.2);color:var(--accent)} | |
| .log-chip.space{flex:0} | |
| .log-scroll{flex:1;overflow-y:auto;padding:8px 12px;font-family:"SF Mono",Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.8;-webkit-overflow-scrolling:touch} | |
| .log-line{display:flex;gap:8px;padding:1px 4px;border-radius:4px} | |
| .log-line:active{background:rgba(255,255,255,.03)} | |
| .lt{color:var(--tx3);flex-shrink:0;font-size:10px;min-width:52px;padding-top:2px} | |
| .ll{font-weight:600;flex-shrink:0;width:28px;text-align:right;font-size:10px;padding-top:2px} | |
| .ll.I{color:var(--accent)}.ll.W{color:var(--yellow)}.ll.E{color:var(--red)}.ll.D{color:var(--tx3)} | |
| .lm{color:var(--tx2);word-break:break-all;flex:1;line-height:1.7} | |
| .lm.hl{color:var(--cyan)}.lm.err{color:var(--red)} | |
| .log-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--tx3);font-size:13px;gap:12px;font-family:inherit} | |
| .log-empty-ring{width:60px;height:60px;border-radius:50%;border:2px dashed var(--border-a);animation:spin 25s linear infinite;opacity:.5} | |
| @keyframes spin{to{transform:rotate(360deg)}} | |
| .log-footer{display:flex;align-items:center;justify-content:space-between;padding:5px 16px;border-top:1px solid var(--border);flex-shrink:0;font-size:10px;color:var(--tx3);font-family:"SF Mono",Menlo,monospace} | |
| /* ── Model Panel ── */ | |
| .model-pick{width:100%;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--tx);font-size:13px;font-family:"SF Mono",Menlo,Monaco,Consolas,monospace;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237a8394'%3E%3Cpath d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;margin-bottom:10px} | |
| .model-pick:focus{outline:none;border-color:var(--blue)} | |
| .model-pick option{background:#14161c;color:var(--tx)} | |
| .btn{height:44px;border-radius:var(--radius-sm);border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .12s;display:flex;align-items:center;justify-content:center;gap:6px;width:100%} | |
| .btn:active{opacity:.8} | |
| .btn-g{background:var(--accent);color:#0a0c10} | |
| .btn-g:active{background:#00cc8e} | |
| .btn-o{background:transparent;border:1px solid var(--border-a);color:var(--tx2)} | |
| .btn-o:active{background:var(--card-h)} | |
| .btn-r{background:transparent;border:1px solid rgba(255,92,114,.2);color:var(--red)} | |
| .btn-r:active{background:rgba(255,92,114,.06)} | |
| .btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px} | |
| .btn-sm{height:38px;font-size:13px} | |
| /* ── Config List ── */ | |
| .cfg-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border-radius:var(--radius-sm);overflow:hidden} | |
| .cfg-row{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;background:var(--bg);font-size:13px} | |
| .cfg-row:first-child{border-radius:var(--radius-sm) var(--radius-sm) 0 0} | |
| .cfg-row:last-child{border-radius:0 0 var(--radius-sm) var(--radius-sm)} | |
| .cfg-k{color:var(--tx2);font-weight:500} | |
| .cfg-v{color:var(--tx);font-family:"SF Mono",Menlo,Monaco,Consolas,monospace;font-size:12px;text-align:right;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} | |
| /* ── Sessions ── */ | |
| .s-item{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;transition:background .12s} | |
| .s-item:active{background:var(--card-h)} | |
| .s-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;box-shadow:0 0 4px var(--accent)} | |
| .s-dot.idle{background:var(--tx3);box-shadow:none} | |
| .s-info{flex:1;min-width:0} | |
| .s-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} | |
| .s-meta{font-size:11px;color:var(--tx3);margin-top:2px} | |
| .s-count{font-size:12px;color:var(--tx3);font-family:"SF Mono",Menlo,monospace;flex-shrink:0} | |
| .empty{text-align:center;color:var(--tx3);font-size:13px;padding:40px 0} | |
| /* ── Action Sheet ── */ | |
| .actions{display:flex;flex-direction:column;gap:8px;padding:16px} | |
| .actions .sec-title{margin-top:0} | |
| /* ── Toast ── */ | |
| .toast-box{position:fixed;top:calc(var(--safe-top) + 10px);left:16px;right:16px;z-index:100;display:flex;flex-direction:column;gap:6px;pointer-events:none} | |
| .toast{padding:12px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:toastIn .25s ease} | |
| .toast.ok{background:rgba(0,229,160,.12);border:1px solid rgba(0,229,160,.2);color:var(--accent)} | |
| .toast.err{background:rgba(255,92,114,.12);border:1px solid rgba(255,92,114,.2);color:var(--red)} | |
| .toast.info{background:rgba(77,159,255,.12);border:1px solid rgba(77,159,255,.2);color:var(--blue)} | |
| @keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} | |
| /* ── Confirm Dialog ── */ | |
| .dialog-mask{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;padding:0 16px 20px;animation:maskIn .2s ease} | |
| @keyframes maskIn{from{opacity:0}to{opacity:1}} | |
| .dialog-sheet{width:100%;max-width:400px;background:#1a1d26;border:1px solid var(--border-a);border-radius:16px;padding:20px;animation:sheetUp .25s ease} | |
| @keyframes sheetUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}} | |
| .dialog-title{font-size:16px;font-weight:700;margin-bottom:8px} | |
| .dialog-msg{font-size:13px;color:var(--tx2);margin-bottom:20px;line-height:1.6} | |
| .dialog-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px} | |
| /* ── Desktop enhance ── */ | |
| @media(min-width:600px){ | |
| .cards{grid-template-columns:1fr 1fr 1fr} | |
| .panel-pad{max-width:640px;margin:0 auto;padding:20px 0} | |
| .log-scroll{padding:12px 20px} | |
| .log-toolbar{padding:8px 20px} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="toast-box" id="tb"></div> | |
| <div class="shell"> | |
| <!-- Header --> | |
| <div class="hdr"> | |
| <div class="hdr-brand"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg> | |
| Hermes | |
| <span class="hdr-tag">LIVE</span> | |
| </div> | |
| <div class="hdr-right"> | |
| <div class="hdr-dot" id="dot"></div> | |
| <div class="hdr-stat">运行 <b id="uptime">--</b></div> | |
| <div class="hdr-stat">内存 <b id="ram">--</b></div> | |
| </div> | |
| </div> | |
| <!-- Panels --> | |
| <div class="panels"> | |
| <!-- Tab 0: Log --> | |
| <div class="panel on" id="p-log"> | |
| <div class="log-toolbar"> | |
| <button class="log-chip on" id="fI" onclick="togF('I')">● 信息</button> | |
| <button class="log-chip on" id="fW" onclick="togF('W')">● 警告</button> | |
| <button class="log-chip on" id="fE" onclick="togF('E')">● 错误</button> | |
| <button class="log-chip space"></button> | |
| <button class="log-chip on" id="fAuto" onclick="togAuto()">自动滚动</button> | |
| <button class="log-chip" onclick="goBot()">↓ 底部</button> | |
| </div> | |
| <div class="log-scroll" id="log-scroll"> | |
| <div class="log-empty"><div class="log-empty-ring"></div>等待日志…</div> | |
| </div> | |
| <div class="log-footer"> | |
| <span id="log-count">0 条日志</span> | |
| <span id="log-time"></span> | |
| </div> | |
| </div> | |
| <!-- Tab 1: Status --> | |
| <div class="panel" id="p-status"> | |
| <div class="panel-pad"> | |
| <div class="sec-title">系统状态</div> | |
| <div class="cards"> | |
| <div class="card accent"><div class="card-label">运行时间</div><div class="card-val" id="x-up2">--</div></div> | |
| <div class="card blue"><div class="card-label">内存占用</div><div class="card-val" id="x-ram2">--</div></div> | |
| <div class="card purple"><div class="card-label">进程 PID</div><div class="card-val" id="x-pid2">--</div></div> | |
| <div class="card cyan"><div class="card-label">活跃会话</div><div class="card-val" id="x-sess2">0</div></div> | |
| <div class="card cyan"><div class="card-label">连接平台</div><div class="card-val" id="x-plat2">飞书</div><div class="card-sub" id="x-plat-s2">WebSocket</div></div> | |
| <div class="card orange"><div class="card-label">当前模型</div><div class="card-val" id="x-model2">--</div><div class="card-sub" id="x-model-sub">OpenRouter</div></div> | |
| <div class="card" style="border-color:var(--border)"><div class="card-label">备用模型</div><div class="card-val" id="x-fallback">--</div><div class="card-sub">自动回退</div></div> | |
| </div> | |
| <div class="sec-title">配置详情</div> | |
| <div class="cfg-list"> | |
| <div class="cfg-row"><span class="cfg-k">连接模式</span><span class="cfg-v" id="x-conn">WebSocket</span></div> | |
| <div class="cfg-row"><span class="cfg-k">最大轮数</span><span class="cfg-v" id="x-turns">90</span></div> | |
| <div class="cfg-row"><span class="cfg-k">上下文压缩</span><span class="cfg-v" id="x-comp">--</span></div> | |
| <div class="cfg-row"><span class="cfg-k">记忆系统</span><span class="cfg-v" id="x-mem">--</span></div> | |
| <div class="cfg-row"><span class="cfg-k">MCP 服务</span><span class="cfg-v" id="x-mcp">--</span></div> | |
| <div class="cfg-row"><span class="cfg-k">终端类型</span><span class="cfg-v" id="x-term">--</span></div> | |
| <div class="cfg-row"><span class="cfg-k">时区</span><span class="cfg-v" id="x-tz">北京时间 (UTC+8)</span></div> | |
| </div> | |
| <div class="sec-title">快捷操作</div> | |
| <div class="actions"> | |
| <button class="btn btn-g" onclick="doRestart()">↻ 重启网关</button> | |
| <div class="btn-row"> | |
| <button class="btn btn-o btn-sm" onclick="doClear()">清除日志</button> | |
| <button class="btn btn-r btn-sm" onclick="doReset()">重置配置</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tab 2: Model --> | |
| <div class="panel" id="p-model"> | |
| <div class="panel-pad"> | |
| <div class="sec-title">模型选择</div> | |
| <select class="model-pick" id="msel"></select> | |
| <button class="btn btn-g" onclick="doSwitch()">切换模型</button> | |
| <div class="sec-title">模型信息</div> | |
| <div class="cfg-list"> | |
| <div class="cfg-row"><span class="cfg-k">当前模型</span><span class="cfg-v" id="x-cur-model">--</span></div> | |
| <div class="cfg-row"><span class="cfg-k">备用模型</span><span class="cfg-v" id="x-cur-fallback" style="color:var(--tx3)">--</span></div> | |
| <div class="cfg-row"><span class="cfg-k">提供商</span><span class="cfg-v">OpenRouter</span></div> | |
| <div class="cfg-row"><span class="cfg-k">状态</span><span class="cfg-v" id="x-model-status" style="color:var(--accent)">运行中</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tab 3: Sessions --> | |
| <div class="panel" id="p-sess"> | |
| <div class="panel-pad"> | |
| <div class="sec-title" style="margin-top:0">近期会话</div> | |
| <div id="sess-list"><div class="empty">暂无会话记录</div></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tab Bar --> | |
| <div class="tabs"> | |
| <div class="tab on" data-t="0" onclick="switchTab(0)"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/><line x1="8" y1="7" x2="16" y2="7"/><line x1="8" y1="11" x2="14" y2="11"/></svg> | |
| <span>日志</span> | |
| </div> | |
| <div class="tab" data-t="1" onclick="switchTab(1)"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg> | |
| <span>状态</span> | |
| </div> | |
| <div class="tab" data-t="2" onclick="switchTab(2)"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg> | |
| <span>模型</span> | |
| </div> | |
| <div class="tab" data-t="3" onclick="switchTab(3)"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg> | |
| <span>会话</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const A=''; | |
| let autoScroll=true, totalLogs=0; | |
| const filters={I:true,W:true,E:true}; | |
| const logBuf=[]; | |
| const MAX=800; | |
| const MODELS=[ | |
| {v:'inclusionai/ling-2.6-1t:free',l:'Ling 2.6 (免费)'}, | |
| {v:'inclusionai/ling-2.6-flash:free',l:'Ling 2.6 Flash (免费)'}, | |
| {v:'google/gemma-4-31b-it:free',l:'Gemma 4 31B (免费)'}, | |
| {v:'qwen/qwen3-coder:free',l:'Qwen3 Coder (免费)'}, | |
| {v:'qwen/qwen3-next-80b-a3b-instruct:free',l:'Qwen3 Next 80B (免费)'}, | |
| {v:'openai/gpt-oss-120b:free',l:'GPT OSS 120B (免费)'}, | |
| {v:'z-ai/glm-4.5-air:free',l:'GLM 4.5 Air (免费)'}, | |
| {v:'nvidia/nemotron-3-super-120b-a12b:free',l:'Nemotron 3 Super (免费)'}, | |
| ]; | |
| // Init model dropdown | |
| (function(){ | |
| const sel=document.getElementById('msel'); | |
| MODELS.forEach(m=>{const o=document.createElement('option');o.value=m.v;o.textContent=m.l;sel.appendChild(o)}); | |
| })(); | |
| // Tab switching | |
| const panels=['p-log','p-status','p-model','p-sess']; | |
| function switchTab(i){ | |
| document.querySelectorAll('.tab').forEach((t,idx)=>t.classList.toggle('on',idx===i)); | |
| panels.forEach((id,idx)=>document.getElementById(id).classList.toggle('on',idx===i)); | |
| if(i===3)loadSess(); | |
| } | |
| // Toast | |
| function toast(m,t){t=t||'info';const e=document.createElement('div');e.className='toast '+t;e.textContent=m;document.getElementById('tb').appendChild(e);setTimeout(function(){e.remove()},3500)} | |
| // Confirm dialog (replaces native confirm) | |
| function askConfirm(title,msg,onYes){ | |
| const mask=document.createElement('div'); | |
| mask.className='dialog-mask'; | |
| mask.innerHTML='<div class="dialog-sheet"><div class="dialog-title">'+title+'</div><div class="dialog-msg">'+msg+'</div><div class="dialog-btns"><button class="btn btn-o" id="d-no">取消</button><button class="btn btn-r" id="d-yes">确认</button></div></div>'; | |
| document.body.appendChild(mask); | |
| document.getElementById('d-no').onclick=function(){mask.remove()}; | |
| document.getElementById('d-yes').onclick=function(){mask.remove();onYes()}; | |
| mask.onclick=function(e){if(e.target===mask)mask.remove()}; | |
| } | |
| // Format uptime | |
| function fmtUp(ms){var s=Math.floor(ms/1000),d=Math.floor(s/86400),h=Math.floor(s%86400/3600),m=Math.floor(s%3600/60),ss=s%60;if(d>0)return d+'天'+h+'时'+m+'分';if(h>0)return h+'时'+m+'分'+ss+'秒';return m+'分'+ss+'秒'} | |
| // Escape HTML | |
| function esc(s){var d=document.createElement('div');d.textContent=s;return d.innerHTML} | |
| // ── SSE ── | |
| function connectSSE(){ | |
| var es=new EventSource(A+'/api/logs/stream'); | |
| es.onmessage=function(e){try{var a=JSON.parse(e.data);if(Array.isArray(a))a.forEach(addLog)}catch(x){}}; | |
| es.onerror=function(){setTimeout(connectSSE,3000)}; | |
| } | |
| function addLog(l){ | |
| var sc=document.getElementById('log-scroll'); | |
| if(!totalLogs)sc.innerHTML=''; | |
| totalLogs++;logBuf.push(l); | |
| if(logBuf.length>MAX)logBuf.shift(); | |
| var lv=(l.level||'info').toUpperCase(); | |
| var map={INFO:'I',WARN:'W',WARNING:'W',ERROR:'E',DEBUG:'D'}; | |
| var fk=map[lv]||'I'; | |
| var div=document.createElement('div'); | |
| div.className='log-line';div.dataset.f=fk; | |
| if(!filters[fk])div.style.display='none'; | |
| var hl=(l.msg||'').toLowerCase(); | |
| var isHL=hl.indexOf('feishu')>-1||hl.indexOf('\u98de\u4e66')>-1||hl.indexOf('connect')>-1||hl.indexOf('\u6536\u5230')>-1||hl.indexOf('\u56de\u590d')>-1; | |
| var isErr=fk==='E'; | |
| div.innerHTML='<span class="lt">'+esc(l.time||'')+'</span><span class="ll '+fk+'">'+(l.level||'INFO').substring(0,5)+'</span><span class="lm'+(isHL?' hl':'')+(isErr?' err':'')+'">'+esc(l.msg||'')+'</span>'; | |
| sc.appendChild(div); | |
| while(sc.children.length>MAX)sc.removeChild(sc.firstChild); | |
| if(autoScroll)sc.scrollTop=sc.scrollHeight; | |
| document.getElementById('log-count').textContent=totalLogs+' 条日志'; | |
| } | |
| // ── Status Polling ── | |
| async function poll(){ | |
| try{ | |
| var r=await fetch(A+'/api/status');var d=await r.json(); | |
| // Header | |
| document.getElementById('dot').className='hdr-dot'+(d.running?'':' off'); | |
| document.getElementById('uptime').textContent=fmtUp(d.uptime_ms||0); | |
| document.getElementById('ram').textContent=d.ram||'--'; | |
| // Status panel | |
| document.getElementById('x-up2').textContent=fmtUp(d.uptime_ms||0); | |
| document.getElementById('x-ram2').textContent=d.ram||'--'; | |
| document.getElementById('x-pid2').textContent=d.pid||'--'; | |
| document.getElementById('x-sess2').textContent=d.sessions||0; | |
| document.getElementById('x-plat2').textContent=d.platform||'飞书'; | |
| document.getElementById('x-plat-s2').textContent=d.platform_mode||'WebSocket'; | |
| var modelName=(d.model||'--').split('/').pop(); | |
| document.getElementById('x-model2').textContent=modelName.length>25?modelName.substring(0,25)+'…':modelName; | |
| document.getElementById('x-cur-model').textContent=modelName.length>35?modelName.substring(0,35)+'…':modelName; | |
| if(d.fallback_model){ | |
| var fbName=d.fallback_model.split('/').pop(); | |
| document.getElementById('x-fallback').textContent=fbName.length>25?fbName.substring(0,25)+'…':fbName; | |
| document.getElementById('x-cur-fallback').textContent=fbName.length>35?fbName.substring(0,35)+'…':fbName; | |
| } | |
| document.getElementById('x-model-status').textContent=d.running?'运行中':'已停止'; | |
| document.getElementById('x-model-status').style.color=d.running?'var(--accent)':'var(--red)'; | |
| // Config | |
| if(d.config){ | |
| document.getElementById('x-conn').textContent=d.platform_mode||'WebSocket'; | |
| document.getElementById('x-turns').textContent=d.config.max_turns||'90'; | |
| document.getElementById('x-comp').textContent=d.config.compress?'已开启':'已关闭'; | |
| document.getElementById('x-comp').style.color=d.config.compress?'var(--accent)':'var(--tx3)'; | |
| var memNames={holographic:'Holographic',honcho:'Honcho',mem0:'Mem0',hindsight:'Hindsight',openviking:'OpenViking'}; | |
| document.getElementById('x-mem').textContent=memNames[d.config.memory]||(d.config.memory==='none'?'未配置':d.config.memory); | |
| document.getElementById('x-mem').style.color=d.config.memory!=='none'?'var(--accent)':'var(--tx3)'; | |
| var mcpList=d.config.mcp_servers||[]; | |
| document.getElementById('x-mcp').textContent=mcpList.length>0?mcpList.join(', '):'未启用'; | |
| document.getElementById('x-mcp').style.color=mcpList.length>0?'var(--accent)':'var(--tx3)'; | |
| document.getElementById('x-term').textContent=d.config.terminal==='local'?'本地':'云端'; | |
| document.getElementById('x-tz').textContent='北京时间 (UTC+8)'; | |
| // Sync model selector | |
| if(d.model){ | |
| var sel=document.getElementById('msel'); | |
| var found=false; | |
| for(var i=0;i<sel.options.length;i++){if(sel.options[i].value===d.model){found=true;break}} | |
| if(!found){var o=document.createElement('option');o.value=d.model;o.textContent=d.model;sel.prepend(o)} | |
| sel.value=d.model; | |
| } | |
| } | |
| document.getElementById('log-time').textContent=new Date().toLocaleTimeString('zh-CN'); | |
| }catch(x){} | |
| } | |
| // ── Sessions ── | |
| async function loadSess(){ | |
| try{ | |
| var r=await fetch(A+'/api/sessions');var list=await r.json(); | |
| var el=document.getElementById('sess-list'); | |
| if(!list||!list.length){el.innerHTML='<div class="empty">暂无会话记录</div>';return} | |
| el.innerHTML=list.slice(0,10).map(function(s){ | |
| return '<div class="s-item"><span class="s-dot'+(s.active?'':' idle')+'"></span><div class="s-info"><div class="s-name">'+esc(s.name||s.id)+'</div><div class="s-meta">'+esc(s.platform||'')+' · '+s.messages+' 条 · '+esc(s.last||'')+'</div></div><div class="s-count">'+s.messages+'</div></div>'; | |
| }).join(''); | |
| }catch(x){} | |
| } | |
| // ── Actions ── | |
| async function doRestart(){ | |
| toast('正在重启网关…','info'); | |
| try{var r=await fetch(A+'/api/restart',{method:'POST'});var d=await r.json();toast(d.ok?'重启成功':'重启失败: '+(d.error||''),d.ok?'ok':'err')}catch(x){toast('请求失败','err')} | |
| } | |
| async function doClear(){ | |
| totalLogs=0;logBuf.length=0; | |
| document.getElementById('log-scroll').innerHTML='<div class="log-empty"><div class="log-empty-ring"></div>已清除</div>'; | |
| document.getElementById('log-count').textContent='0 条日志'; | |
| toast('日志已清除','ok'); | |
| } | |
| async function doReset(){ | |
| askConfirm('重置配置','所有设置将恢复为默认值，此操作不可撤销。',async function(){ | |
| toast('正在重置…','info'); | |
| try{var r=await fetch(A+'/api/reset',{method:'POST'});var d=await r.json();toast(d.ok?'重置完成':'失败: '+(d.error||''),d.ok?'ok':'err')}catch(x){toast('请求失败','err')} | |
| }); | |
| } | |
| async function doSwitch(){ | |
| var m=document.getElementById('msel').value; | |
| toast('正在切换模型…','info'); | |
| try{ | |
| var r=await fetch(A+'/api/model',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model:m})}); | |
| var d=await r.json(); | |
| toast(d.ok?'已切换至 '+m.split('/').pop():'切换失败: '+(d.error||''),d.ok?'ok':'err'); | |
| if(d.ok)setTimeout(poll,1000); | |
| }catch(x){toast('请求失败','err')} | |
| } | |
| // ── Filters ── | |
| function togF(k){ | |
| filters[k]=!filters[k]; | |
| var btn=document.getElementById('f'+k); | |
| btn.classList.toggle('on',filters[k]); | |
| var lines=document.querySelectorAll('#log-scroll .log-line'); | |
| for(var i=0;i<lines.length;i++){lines[i].style.display=filters[lines[i].dataset.f]?'':'none'} | |
| } | |
| function togAuto(){autoScroll=!autoScroll;document.getElementById('fAuto').classList.toggle('on',autoScroll)} | |
| function goBot(){var s=document.getElementById('log-scroll');s.scrollTop=s.scrollHeight} | |
| // ── Boot ── | |
| poll();setInterval(poll,5000);setInterval(loadSess,30000);loadSess();connectSSE(); | |
| </script> | |
| </body> | |
| </html> | |