Spaces:

a3216
/

xtc-backend

Running

App Files Files Community

a3216 commited on Jun 29

Commit

bc29ff1

verified ·

1 Parent(s): 8fc24d8

sync from GitHub 1383c6c: feat: 增强Web管理日志功能与界面美化

Browse files

Auto-synced from GitHub commit 1383c6c3e047c5be1ad940609d127f8ec7f88a88

Files changed (6) hide show

app/admin_html.py +171 -60
app/api/pseudo_stream.py +14 -17
app/api/request_logs.py +4 -2
app/api/xtc.py +12 -20
app/services/request_log_store.py +36 -11
app/utils/sse.py +32 -2

app/admin_html.py CHANGED Viewed

@@ -113,6 +113,64 @@ _HTML_TEMPLATE = """<!DOCTYPE html>
   .msg-bubble.system { background: rgba(139,143,163,0.15); }
   .msg-bubble .role { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
   .msg-bubble .thought { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
 </style>
 </head>
 <body data-disabled="__DISABLED_ATTR__">
@@ -151,11 +209,11 @@ _HTML_TEMPLATE = """<!DOCTYPE html>
     <div class="tab-content active" data-tab="overview">
       <div class="card">
         <h2>系统概览</h2>
-        <div class="stats-grid" id="overviewStats"><div class="muted">加载中...</div></div>
       </div>
       <div class="card">
-        <h2>最近 24 小时请求趋势</h2>
-        <div id="overviewTimeline"><div class="muted">加载中...</div></div>
       </div>
     </div>
@@ -301,29 +359,35 @@ _HTML_TEMPLATE = """<!DOCTYPE html>
     <div class="tab-content" data-tab="requests">
       <div class="card">
         <h2>请求历史 <span id="reqLogLimit" class="muted" style="font-size:12px;font-weight:normal"></span></h2>
-        <div class="row" style="margin-bottom:12px;gap:6px">
-          <input id="reqPath" placeholder="路径模糊匹配" style="flex:1">
-          <select id="reqMethod">
             <option value="">所有方法</option>
             <option>GET</option><option>POST</option><option>PUT</option><option>DELETE</option><option>OPTIONS</option>
           </select>
-          <select id="reqStatus">
             <option value="">所有状态</option>
             <option value="2xx">2xx 成功</option>
             <option value="3xx">3xx 重定向</option>
             <option value="4xx">4xx 客户端错误</option>
             <option value="5xx">5xx 服务端错误</option>
           </select>
-          <select id="reqOk">
             <option value="">全部</option>
             <option value="1">仅成功</option>
             <option value="0">仅失败</option>
           </select>
-          <input id="reqKeyword" placeholder="关键词（路径/错误）" style="flex:1">
-          <button onclick="loadRequests(1)">查询</button>
-          <button class="ghost" onclick="loadRequests(1)">刷新</button>
-          <button class="ghost" onclick="clearRequests()">清空</button>
         </div>
         <div id="reqList">点查询开始</div>
         <div class="row" style="margin-top:12px;justify-content:space-between">
           <div class="muted" id="reqPageInfo"></div>
@@ -361,7 +425,7 @@ _HTML_TEMPLATE = """<!DOCTYPE html>
       </div>
       <div class="card">
-        <h2>统计（最近 24 小时）</h2>
         <div id="reqStats"><div class="muted">加载中...</div></div>
       </div>
     </div>
@@ -478,19 +542,57 @@ async function loadOverview() {
       api('/admin/api/providers'),
     ]);
     const u = usage;
     $('overviewStats').innerHTML = [
-      ['24h 请求', u.total_requests],
-      ['成功', u.success],
-      ['失败', u.failed],
-      ['Token 总量', u.total_tokens],
-      ['文件数', files.count],
-      ['会话数', sessions.count],
-      ['厂商数', providers.count],
-      ['默认厂商', providers.defaultProviderId || '-'],
-    ].map(([k,v]) => `<div class="stat-box"><div class="label">${k}</div><div class="value">${v}</div></div>`).join('');
-    loadTimeline('overviewTimeline', 24, 'hour');
   } catch (e) { $('overviewStats').innerHTML = '<div class="muted">' + esc(e.message) + '</div>'; }
 }
 async function loadTimeline(elId, hours, gran) {
   try {
     const data = await api(`/admin/api/usage/timeline?hours=${hours}&granularity=${gran}`);
@@ -671,6 +773,18 @@ async function delWebhook(id) {
 // ===== 请求历史 =====
 let _reqPage = 1, _reqPageSize = 50, _reqTotal = 0;
 async function loadReqLimit() {
   try {
@@ -690,7 +804,7 @@ async function saveReqLimit() {
 async function loadRequests(page) {
   _reqPage = page || 1;
   const offset = (_reqPage - 1) * _reqPageSize;
-  const params = new URLSearchParams({ limit: _reqPageSize, offset });
   const path = $('reqPath').value.trim();
   const method = $('reqMethod').value;
   const status = $('reqStatus').value;
@@ -710,12 +824,12 @@ async function loadRequests(page) {
       $('reqList').innerHTML = '<table><tr><th>ID</th><th>时间</th><th>方法</th><th>路径</th><th>状态</th><th>耗时</th><th>Provider/Model</th><th>Key</th><th>错误</th><th>操作</th></tr>' +
         items.map(r => {
           const sc = r.status_code || 0;
-          const scClass = sc >= 500 ? 'err' : sc >= 400 ? 'warn' : sc >= 300 ? 'off' : 'ok';
           const elapsed = r.elapsed_ms == null ? '-' : (r.elapsed_ms + 'ms');
-          const errHtml = r.ok ? '<span class="tag ok">成功</span>' : (r.error_code ? '<span class="tag err" title="' + esc(r.error_message||'') + '">' + esc(r.error_code) + '</span>' : '<span class="tag err">失败</span>');
           const pm = (r.provider || r.model) ? esc(r.provider||'') + '/' + esc(r.model||'') : '<span class="muted">-</span>';
-          const stream = r.stream ? ' <span class="tag off">stream</span>' : '';
-          return '<tr><td>' + r.id + '</td><td>' + fmtTime(r.ts) + '</td><td>' + esc(r.method) + '</td><td class="mono">' + esc(r.path) + (r.query ? '?' + esc(r.query).slice(0,30) : '') + stream + '</td><td><span class="tag ' + scClass + '">' + sc + '</span></td><td>' + elapsed + '</td><td class="mono">' + pm + '</td><td class="mono">' + esc(r.access_key||'-').slice(0,12) + '</td><td>' + errHtml + '</td><td><button class="ghost small" onclick="viewReq(' + r.id + ')">详情</button></td></tr>';
         }).join('') + '</table>';
     }
     const totalPages = Math.max(1, Math.ceil(_reqTotal / _reqPageSize));
@@ -731,43 +845,34 @@ async function viewReq(id) {
     const r = d.record;
     $('reqDetailId').textContent = id;
     $('reqDetailCard').classList.remove('hidden');
-    const scClass = (r.status_code||0) >= 500 ? 'err' : (r.status_code||0) >= 400 ? 'warn' : 'ok';
-    let html = '<div class="stats-grid" style="margin-bottom:12px">';
-    html += '<div class="stat-box"><div class="label">方法</div><div class="value" style="font-size:14px">' + esc(r.method) + '</div></div>';
-    html += '<div class="stat-box"><div class="label">状态码</div><div class="value" style="font-size:14px"><span class="tag ' + scClass + '">' + r.status_code + '</span></div></div>';
-    html += '<div class="stat-box"><div class="label">耗时</div><div class="value" style="font-size:14px">' + (r.elapsed_ms == null ? '-' : r.elapsed_ms + 'ms') + '</div></div>';
-    html += '<div class="stat-box"><div class="label">Provider/Model</div><div class="value" style="font-size:14px">' + esc(r.provider||'-') + ' / ' + esc(r.model||'-') + '</div></div>';
-    html += '<div class="stat-box"><div class="label">客户端 IP</div><div class="value" style="font-size:14px" class="mono">' + esc(r.client_ip||'-') + '</div></div>';
-    html += '<div class="stat-box"><div class="label">Access Key</div><div class="value" style="font-size:14px" class="mono">' + esc(r.access_key||'-') + '</div></div>';
     html += '</div>';
     if (r.error_code || r.error_message) {
-      html += '<div class="card" style="background:rgba(248,113,113,0.1);border-color:var(--err);margin-bottom:12px"><strong>错误：</strong> <span class="tag err">' + esc(r.error_code||'') + '</span> ' + esc(r.error_message||'') + '</div>';
     }
-    html += '<h3 style="margin:12px 0 6px;font-size:14px">完整路径</h3>';
-    html += '<pre>' + esc(r.method) + ' ' + esc(r.path) + (r.query ? '?' + esc(r.query) : '') + '</pre>';
-    html += '<h3 style="margin:12px 0 6px;font-size:14px">请求标头（已脱敏）</h3>';
-    html += '<pre>' + esc(JSON.stringify(r.request_headers, null, 2)) + '</pre>';
-    html += '<h3 style="margin:12px 0 6px;font-size:14px">请求体（已脱敏）</h3>';
-    html += '<pre>' + esc(typeof r.request_body === 'string' ? r.request_body : JSON.stringify(r.request_body, null, 2)) + '</pre>';
-    html += '<h3 style="margin:12px 0 6px;font-size:14px">响应标头</h3>';
-    html += '<pre>' + esc(JSON.stringify(r.response_headers, null, 2)) + '</pre>';
-    html += '<h3 style="margin:12px 0 6px;font-size:14px">响应体</h3>';
     const rb = r.response_body;
     if (rb && typeof rb === 'object' && rb.type === 'streaming') {
-      html += '<div class="card" style="margin-bottom:8px"><strong>流式响应</strong>：共 ' + rb.total_chunks + ' 个 chunk，' + rb.total_bytes + ' 字节</div>';
       html += '<pre>' + esc((rb.sampled_chunks || []).join('\\n--- chunk ---\\n')) + '</pre>';
     } else {
       html += '<pre>' + esc(typeof rb === 'string' ? rb : JSON.stringify(rb, null, 2)) + '</pre>';
     }
-    html += '<h3 style="margin:12px 0 6px;font-size:14px">User-Agent</h3>';
-    html += '<pre>' + esc(r.user_agent || '-') + '</pre>';
     $('reqDetailBody').innerHTML = html;
     $('reqDetailCard').scrollIntoView({behavior:'smooth'});
@@ -795,23 +900,29 @@ async function clearRequests() {
 }
 async function loadReqStats() {
   try {
-    const d = await api('/admin/api/request-log/stats?hours=24');
-    let html = '<div class="stats-grid" style="margin-bottom:12px">';
-    html += '<div class="stat-box"><div class="label">24h 总请求</div><div class="value">' + d.total + '</div></div>';
     for (const [k, v] of Object.entries(d.by_status || {})) {
-      html += '<div class="stat-box"><div class="label">' + k + '</div><div class="value">' + v + '</div></div>';
     }
     html += '</div>';
     const bp = d.by_path || [];
     if (bp.length) {
-      html += '<h3 style="margin:12px 0 6px;font-size:14px">Top 路径</h3><table><tr><th>路径</th><th>次数</th><th>平均耗时</th><th>成功</th></tr>';
-      html += bp.map(p => '<tr><td class="mono">' + esc(p.path) + '</td><td>' + p.count + '</td><td>' + p.avg_ms + 'ms</td><td>' + p.ok + '</td></tr>').join('');
       html += '</table>';
     }
     const be = d.by_error || [];
     if (be.length) {
       html += '<h3 style="margin:12px 0 6px;font-size:14px">错误码 Top</h3><table><tr><th>错误码</th><th>次数</th></tr>';
-      html += be.map(e => '<tr><td class="mono"><span class="tag err">' + esc(e.code) + '</span></td><td>' + e.count + '</td></tr>').join('');
       html += '</table>';
     }
     const slow = d.slowest || [];

   .msg-bubble.system { background: rgba(139,143,163,0.15); }
   .msg-bubble .role { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
   .msg-bubble .thought { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
+  /* ===== 增强样式 ===== */
+  tr:hover td { background: rgba(79,140,255,0.06); }
+  th { white-space: nowrap; }
+  td.mono, .mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12px; word-break: break-all; }
+  /* 分段选择器（请求类别） */
+  .seg { display: inline-flex; background: var(--panel2); border: 1px solid var(--border); border-radius: 6px; padding: 2px; gap: 2px; }
+  .seg button { background: transparent; border: none; color: var(--muted); padding: 5px 12px; font-size: 12px; border-radius: 4px; }
+  .seg button:hover { color: var(--text); }
+  .seg button.active { background: var(--accent); color: #fff; }
+  /* KPI 卡片：左侧强调色条 */
+  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
+  .kpi { position: relative; background: var(--panel2); padding: 12px 16px 12px 18px; border-radius: 8px; overflow: hidden; }
+  .kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
+  .kpi.ok::before { background: var(--ok); }
+  .kpi.err::before { background: var(--err); }
+  .kpi.warn::before { background: var(--warn); }
+  .kpi .label { font-size: 12px; color: var(--muted); }
+  .kpi .value { font-size: 22px; font-weight: 600; margin-top: 4px; }
+  .kpi .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
+  /* 流量趋势卡片 */
+  .traffic-card { background: var(--panel2); border-radius: 8px; padding: 14px 16px; }
+  .traffic-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
+  .traffic-head .big { font-size: 20px; font-weight: 600; }
+  .traffic-head .delta { font-size: 12px; }
+  .bar-chart { gap: 3px; height: 90px; }
+  .bar { background: linear-gradient(180deg, var(--accent2), var(--accent)); min-height: 2px; border-radius: 2px 2px 0 0; transition: height .2s; }
+  .bar.fail { background: linear-gradient(180deg, #f87171, #b91c1c); }
+  .bar-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-top: 4px; }
+  /* 成功率环 */
+  .ring-wrap { display: flex; align-items: center; gap: 14px; }
+  .ring { position: relative; width: 84px; height: 84px; }
+  .ring svg { transform: rotate(-90deg); }
+  .ring .pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; }
+  /* 请求列表行：状态药丸、流式标记 */
+  .pill { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 500; }
+  .pill.s2 { background: rgba(74,222,128,0.16); color: var(--ok); }
+  .pill.s3 { background: rgba(139,143,163,0.16); color: var(--muted); }
+  .pill.s4 { background: rgba(251,191,36,0.16); color: var(--warn); }
+  .pill.s5 { background: rgba(248,113,113,0.16); color: var(--err); }
+  .pill.stream { background: rgba(106,161,255,0.16); color: var(--accent2); margin-left: 4px; }
+  .filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
+  .filter-row input, .filter-row select { flex: 1; min-width: 110px; }
+  .filter-row .grow { flex: 1; }
+  .filter-row .shrink { flex: 0 0 auto; }
+  .hint { font-size: 11px; color: var(--muted); margin-top: 6px; }
+  /* 详情区折叠块 */
+  details.req-block { background: var(--panel2); border: 1px solid var(--border); border-radius: 6px; margin: 8px 0; }
+  details.req-block summary { padding: 8px 12px; cursor: pointer; font-size: 13px; font-weight: 500; }
+  details.req-block[open] summary { border-bottom: 1px solid var(--border); }
+  details.req-block pre { margin: 0; border: none; border-radius: 0; max-height: 320px; }
 </style>
 </head>
 <body data-disabled="__DISABLED_ATTR__">
     <div class="tab-content active" data-tab="overview">
       <div class="card">
         <h2>系统概览</h2>
+        <div class="kpi-grid" id="overviewStats"><div class="muted">加载中...</div></div>
       </div>
       <div class="card">
+        <h2>最近 24 小时流量请求分析</h2>
+        <div id="overviewTraffic"><div class="muted">加载中...</div></div>
       </div>
     </div>
     <div class="tab-content" data-tab="requests">
       <div class="card">
         <h2>请求历史 <span id="reqLogLimit" class="muted" style="font-size:12px;font-weight:normal"></span></h2>
+        <div class="filter-row">
+          <div class="seg shrink" id="reqCategorySeg" role="group" aria-label="请求类别">
+            <button class="active" data-cat="business" onclick="setReqCategory('business')">业务请求 /v1/*</button>
+            <button data-cat="admin" onclick="setReqCategory('admin')">管理面板 /admin/api/*</button>
+            <button data-cat="all" onclick="setReqCategory('all')">全部</button>
+          </div>
+          <input id="reqPath" class="grow" placeholder="路径模糊匹配">
+          <select id="reqMethod" class="shrink">
             <option value="">所有方法</option>
             <option>GET</option><option>POST</option><option>PUT</option><option>DELETE</option><option>OPTIONS</option>
           </select>
+          <select id="reqStatus" class="shrink">
             <option value="">所有状态</option>
             <option value="2xx">2xx 成功</option>
             <option value="3xx">3xx 重定向</option>
             <option value="4xx">4xx 客户端错误</option>
             <option value="5xx">5xx 服务端错误</option>
           </select>
+          <select id="reqOk" class="shrink">
             <option value="">全部</option>
             <option value="1">仅成功</option>
             <option value="0">仅失败</option>
           </select>
+          <input id="reqKeyword" class="grow" placeholder="关键词（路径/错误）">
+          <button class="shrink" onclick="loadRequests(1)">查询</button>
+          <button class="ghost shrink" onclick="loadRequests(1)">刷新</button>
+          <button class="ghost shrink" onclick="clearRequests()">清空</button>
         </div>
+        <div class="hint" id="reqCategoryHint">默认只看业务请求（对话 / 伪流式 / OpenAI 兼容等 <code>/v1/*</code> 接口），管理面板自身的访问不在其中。切换上方分段可查看全部。</div>
         <div id="reqList">点查询开始</div>
         <div class="row" style="margin-top:12px;justify-content:space-between">
           <div class="muted" id="reqPageInfo"></div>
       </div>
       <div class="card">
+        <h2>统计（最近 24 小时）<span id="reqStatsCatLabel" class="muted" style="font-size:12px;font-weight:normal"></span></h2>
         <div id="reqStats"><div class="muted">加载中...</div></div>
       </div>
     </div>
       api('/admin/api/providers'),
     ]);
     const u = usage;
+    const successRate = u.total_requests ? Math.round(u.success / u.total_requests * 100) : 0;
+    const kpi = (cls, label, value, sub) => `<div class="kpi ${cls||''}"><div class="label">${label}</div><div class="value">${value}</div>${sub?`<div class="sub">${sub}</div>`:''}</div>`;
     $('overviewStats').innerHTML = [
+      kpi('', '24h 请求', u.total_requests, '成功 ' + u.success + ' / 失败 ' + u.failed),
+      kpi(successRate>=95?'ok':successRate>=80?'warn':'err', '成功率', successRate + '%'),
+      kpi('ok', '成功', u.success),
+      kpi(u.failed>0?'err':'', '失败', u.failed),
+      kpi('', 'Token 总量', u.total_tokens),
+      kpi('', '文件数', files.count),
+      kpi('', '会话数', sessions.count),
+      kpi('', '厂商数', providers.count),
+    ].join('');
+    loadOverviewTraffic();
   } catch (e) { $('overviewStats').innerHTML = '<div class="muted">' + esc(e.message) + '</div>'; }
 }
+async function loadOverviewTraffic() {
+  const el = $('overviewTraffic');
+  try {
+    const [timeline, usage] = await Promise.all([
+      api('/admin/api/usage/timeline?hours=24&granularity=hour'),
+      api('/admin/api/usage?hours=24'),
+    ]);
+    const items = timeline.items || [];
+    if (!items.length) { el.innerHTML = '<div class="muted">最近 24 小时无请求</div>'; return; }
+    const max = Math.max(...items.map(i => i.requests), 1);
+    const total = items.reduce((s,i) => s + (i.requests||0), 0);
+    const tokens = items.reduce((s,i) => s + (i.tokens||0), 0);
+    const okTotal = usage.success || 0;
+    const failTotal = usage.failed || 0;
+    const rate = total ? Math.round(okTotal / total * 100) : 0;
+    // 成功率环
+    const R = 36, C = 2 * Math.PI * R, off = C * (1 - rate/100);
+    const ringCls = rate >= 95 ? 'var(--ok)' : rate >= 80 ? 'var(--warn)' : 'var(--err)';
+    let html = '<div class="ring-wrap" style="margin-bottom:14px">';
+    html += '<div class="ring"><svg width="84" height="84"><circle cx="42" cy="42" r="' + R + '" fill="none" stroke="var(--border)" stroke-width="8"/><circle cx="42" cy="42" r="' + R + '" fill="none" stroke="' + ringCls + '" stroke-width="8" stroke-linecap="round" stroke-dasharray="' + C + '" stroke-dashoffset="' + off + '"/></svg><div class="pct">' + rate + '%</div></div>';
+    html += '<div><div class="muted">24h 请求成功率</div><div style="font-size:13px;margin-top:4px">成功 <span style="color:var(--ok)">' + okTotal + '</span> · 失败 <span style="color:var(--err)">' + failTotal + '</span> · 共 ' + total + ' 次</div><div class="muted" style="margin-top:4px">Token ' + tokens + '</div></div>';
+    html += '</div>';
+    // 柱状趋势（timeline 未区分成功/失败，统一着色）
+    const bars = items.map(i => {
+      const h = Math.max(2, Math.round(i.requests / max * 80));
+      const t = new Date(i.bucket_start*1000).toLocaleTimeString('zh-CN',{hour:'2-digit',minute:'2-digit'});
+      return `<div class="bar" style="height:${h}px" title="${t} | ${i.requests} 次 | ${i.tokens} tokens"></div>`;
+    }).join('');
+    const first = new Date(items[0].bucket_start*1000).toLocaleTimeString('zh-CN',{hour:'2-digit',minute:'2-digit'});
+    html += `<div class="traffic-card"><div class="traffic-head"><span class="big">${total}</span><span class="delta">次请求 / 峰值 ${max} 每时段</span></div><div class="bar-chart">${bars}</div><div class="bar-axis"><span>${first}</span><span>现在</span></div></div>`;
+    el.innerHTML = html;
+  } catch (e) { el.innerHTML = '<div class="muted">' + esc(e.message) + '</div>'; }
+}
 async function loadTimeline(elId, hours, gran) {
   try {
     const data = await api(`/admin/api/usage/timeline?hours=${hours}&granularity=${gran}`);
 // ===== 请求历史 =====
 let _reqPage = 1, _reqPageSize = 50, _reqTotal = 0;
+let _reqCategory = 'business';  // 默认只看业务请求 /v1/*
+function setReqCategory(cat) {
+  _reqCategory = cat;
+  document.querySelectorAll('#reqCategorySeg button').forEach(b =>
+    b.classList.toggle('active', b.dataset.cat === cat));
+  loadRequests(1);
+  loadReqStats();
+}
+function _catLabel(cat) {
+  return cat === 'admin' ? '（管理面板 /admin/api/*）' : cat === 'all' ? '（全部）' : '（业务请求 /v1/*）';
+}
 async function loadReqLimit() {
   try {
 async function loadRequests(page) {
   _reqPage = page || 1;
   const offset = (_reqPage - 1) * _reqPageSize;
+  const params = new URLSearchParams({ limit: _reqPageSize, offset, category: _reqCategory });
   const path = $('reqPath').value.trim();
   const method = $('reqMethod').value;
   const status = $('reqStatus').value;
       $('reqList').innerHTML = '<table><tr><th>ID</th><th>时间</th><th>方法</th><th>路径</th><th>状态</th><th>耗时</th><th>Provider/Model</th><th>Key</th><th>错误</th><th>操作</th></tr>' +
         items.map(r => {
           const sc = r.status_code || 0;
+          const scCls = sc >= 500 ? 's5' : sc >= 400 ? 's4' : sc >= 300 ? 's3' : 's2';
           const elapsed = r.elapsed_ms == null ? '-' : (r.elapsed_ms + 'ms');
+          const errHtml = r.ok ? '<span class="pill s2">成功</span>' : (r.error_code ? '<span class="pill s5" title="' + esc(r.error_message||'') + '">' + esc(r.error_code) + '</span>' : '<span class="pill s5">失败</span>');
           const pm = (r.provider || r.model) ? esc(r.provider||'') + '/' + esc(r.model||'') : '<span class="muted">-</span>';
+          const stream = r.stream ? '<span class="pill stream">stream</span>' : '';
+          return '<tr><td>' + r.id + '</td><td class="muted">' + fmtTime(r.ts) + '</td><td>' + esc(r.method) + '</td><td class="mono">' + esc(r.path) + (r.query ? '?' + esc(r.query).slice(0,30) : '') + stream + '</td><td><span class="pill ' + scCls + '">' + sc + '</span></td><td>' + elapsed + '</td><td class="mono">' + pm + '</td><td class="mono">' + esc(r.access_key||'-').slice(0,12) + '</td><td>' + errHtml + '</td><td><button class="ghost small" onclick="viewReq(' + r.id + ')">详情</button></td></tr>';
         }).join('') + '</table>';
     }
     const totalPages = Math.max(1, Math.ceil(_reqTotal / _reqPageSize));
     const r = d.record;
     $('reqDetailId').textContent = id;
     $('reqDetailCard').classList.remove('hidden');
+    const scCls = (r.status_code||0) >= 500 ? 's5' : (r.status_code||0) >= 400 ? 's4' : (r.status_code||0) >= 300 ? 's3' : 's2';
+    let html = '<div class="kpi-grid" style="margin-bottom:12px">';
+    html += '<div class="kpi"><div class="label">方法</div><div class="value" style="font-size:14px">' + esc(r.method) + '</div></div>';
+    html += '<div class="kpi ' + ((r.status_code||0)>=500?'err':(r.status_code||0)>=400?'warn':'ok') + '"><div class="label">状态码</div><div class="value" style="font-size:14px"><span class="pill ' + scCls + '">' + r.status_code + '</span></div></div>';
+    html += '<div class="kpi"><div class="label">耗时</div><div class="value" style="font-size:14px">' + (r.elapsed_ms == null ? '-' : r.elapsed_ms + 'ms') + '</div></div>';
+    html += '<div class="kpi"><div class="label">Provider/Model</div><div class="value" style="font-size:14px">' + esc(r.provider||'-') + ' / ' + esc(r.model||'-') + '</div></div>';
+    html += '<div class="kpi"><div class="label">客户端 IP</div><div class="value mono" style="font-size:14px">' + esc(r.client_ip||'-') + '</div></div>';
+    html += '<div class="kpi"><div class="label">Access Key</div><div class="value mono" style="font-size:14px">' + esc(r.access_key||'-') + '</div></div>';
     html += '</div>';
     if (r.error_code || r.error_message) {
+      html += '<div class="card" style="background:rgba(248,113,113,0.1);border-color:var(--err);margin-bottom:12px"><strong>错误：</strong> <span class="pill s5">' + esc(r.error_code||'') + '</span> ' + esc(r.error_message||'') + '</div>';
     }
+    html += '<details class="req-block" open><summary>完整路径</summary><pre>' + esc(r.method) + ' ' + esc(r.path) + (r.query ? '?' + esc(r.query) : '') + '</pre></details>';
+    html += '<details class="req-block"><summary>请求标头（已脱敏）</summary><pre>' + esc(JSON.stringify(r.request_headers, null, 2)) + '</pre></details>';
+    html += '<details class="req-block"><summary>请求体（已脱敏）</summary><pre>' + esc(typeof r.request_body === 'string' ? r.request_body : JSON.stringify(r.request_body, null, 2)) + '</pre></details>';
+    html += '<details class="req-block"><summary>响应标头</summary><pre>' + esc(JSON.stringify(r.response_headers, null, 2)) + '</pre></details>';
     const rb = r.response_body;
+    html += '<details class="req-block"><summary>响应体' + (rb && typeof rb === 'object' && rb.type === 'streaming' ? '（流式，' + rb.total_chunks + ' chunks / ' + rb.total_bytes + ' B）' : '') + '</summary>';
     if (rb && typeof rb === 'object' && rb.type === 'streaming') {
       html += '<pre>' + esc((rb.sampled_chunks || []).join('\\n--- chunk ---\\n')) + '</pre>';
     } else {
       html += '<pre>' + esc(typeof rb === 'string' ? rb : JSON.stringify(rb, null, 2)) + '</pre>';
     }
+    html += '</details>';
+    html += '<details class="req-block"><summary>User-Agent</summary><pre>' + esc(r.user_agent || '-') + '</pre></details>';
     $('reqDetailBody').innerHTML = html;
     $('reqDetailCard').scrollIntoView({behavior:'smooth'});
 }
 async function loadReqStats() {
   try {
+    $('reqStatsCatLabel').textContent = _catLabel(_reqCategory);
+    const d = await api('/admin/api/request-log/stats?hours=24&category=' + _reqCategory);
+    // 成功率
+    const okC = (d.by_status['2xx']||0) + (d.by_status['3xx']||0);
+    const rate = d.total ? Math.round(okC / d.total * 100) : 0;
+    let html = '<div class="kpi-grid" style="margin-bottom:12px">';
+    html += '<div class="kpi"><div class="label">24h 总请求</div><div class="value">' + d.total + '</div><div class="sub">成功 ' + okC + ' / 失败 ' + (d.total - okC) + '</div></div>';
     for (const [k, v] of Object.entries(d.by_status || {})) {
+      const cls = k.startsWith('5') ? 'err' : k.startsWith('4') ? 'warn' : 'ok';
+      html += '<div class="kpi ' + cls + '"><div class="label">' + k + '</div><div class="value">' + v + '</div></div>';
     }
+    html += '<div class="kpi ' + (rate>=95?'ok':rate>=80?'warn':'err') + '"><div class="label">成功率</div><div class="value">' + rate + '%</div></div>';
     html += '</div>';
     const bp = d.by_path || [];
     if (bp.length) {
+      html += '<h3 style="margin:12px 0 6px;font-size:14px">Top 路径</h3><table><tr><th>路径</th><th>次数</th><th>平均耗时</th><th>成功</th><th>成功率</th></tr>';
+      html += bp.map(p => '<tr><td class="mono">' + esc(p.path) + '</td><td>' + p.count + '</td><td>' + p.avg_ms + 'ms</td><td>' + p.ok + '</td><td>' + (p.count ? Math.round(p.ok/p.count*100) : 0) + '%</td></tr>').join('');
       html += '</table>';
     }
     const be = d.by_error || [];
     if (be.length) {
       html += '<h3 style="margin:12px 0 6px;font-size:14px">错误码 Top</h3><table><tr><th>错误码</th><th>次数</th></tr>';
+      html += be.map(e => '<tr><td class="mono"><span class="pill s5">' + esc(e.code) + '</span></td><td>' + e.count + '</td></tr>').join('');
       html += '</table>';
     }
     const slow = d.slowest || [];

app/api/pseudo_stream.py CHANGED Viewed

@@ -5,7 +5,6 @@
 from __future__ import annotations
 import asyncio
-import json
 from typing import Any, Optional
 from fastapi import APIRouter, Depends, Header, Request
@@ -216,24 +215,22 @@ async def _run_pseudo_session(
 async def _openai_passthrough_chunks(base_url: str, api_key: str, body: dict):
-    """把 OpenAI 厂商的原始 SSE 字节流解析为 OpenAI chunk dict。"""
     from ..utils.sse import parse_sse_stream
     chunk_iter = await openai_adapter.chat_completions(
         base_url=base_url, api_key=api_key, body=body, stream=True
     )
-    async for chunk in chunk_iter:
-        if isinstance(chunk, bytes):
-            text = chunk.decode("utf-8", errors="replace")
-        else:
-            text = str(chunk)
-        for line in text.split("\n"):
-            if not line.startswith("data:"):
-                continue
-            payload = line[5:].strip()
-            if payload == "[DONE]":
-                return
-            try:
-                yield json.loads(payload)
-            except Exception:
-                continue

 from __future__ import annotations
 import asyncio
 from typing import Any, Optional
 from fastapi import APIRouter, Depends, Header, Request
 async def _openai_passthrough_chunks(base_url: str, api_key: str, body: dict):
+    """把 OpenAI 厂商的原始 SSE 字节流解析为 OpenAI chunk dict。
+    必须用 parse_sse_stream 按 ``\\n\\n`` 帧分隔符跨 chunk 缓冲解析。
+    httpx 的 aiter_bytes() 字节块边界与 SSE 帧边界无关，若按每个 chunk
+    独立 split('\\n') 解析，跨块切断的 ``data: {...}`` 行会 json.loads
+    失败被静默丢弃，导致回复少字、换行被破坏。
+    """
     from ..utils.sse import parse_sse_stream
     chunk_iter = await openai_adapter.chat_completions(
         base_url=base_url, api_key=api_key, body=body, stream=True
     )
+    async for sse in parse_sse_stream(chunk_iter):
+        if sse.get("__done__"):
+            return
+        if sse.get("__raw__") is not None:
+            # 非 JSON 帧，消费方只关心 OpenAI chunk 结构，跳过
+            continue
+        yield sse

app/api/request_logs.py CHANGED Viewed

@@ -34,13 +34,14 @@ async def list_records(
     ok: Optional[int] = Query(default=None, ge=0, le=1),
     hours: Optional[int] = Query(default=None, ge=1, le=720),
     keyword: Optional[str] = Query(default=None),
 ):
     result = request_log_store.list_records(
         limit=limit, offset=offset,
         path=path, method=method, status=status,
         access_key=access_key,
         ok=bool(ok) if ok is not None else None,
-        hours=hours, keyword=keyword,
     )
     return ok_with_cors(result)
@@ -49,8 +50,9 @@ async def list_records(
 async def stats(
     _admin: str = Depends(_require_admin),
     hours: int = Query(default=24, ge=1, le=720),
 ):
-    return ok_with_cors(request_log_store.stats(hours=hours))
 @router.get("/settings")

     ok: Optional[int] = Query(default=None, ge=0, le=1),
     hours: Optional[int] = Query(default=None, ge=1, le=720),
     keyword: Optional[str] = Query(default=None),
+    category: Optional[str] = Query(default="business"),
 ):
     result = request_log_store.list_records(
         limit=limit, offset=offset,
         path=path, method=method, status=status,
         access_key=access_key,
         ok=bool(ok) if ok is not None else None,
+        hours=hours, keyword=keyword, category=category,
     )
     return ok_with_cors(result)
 async def stats(
     _admin: str = Depends(_require_admin),
     hours: int = Query(default=24, ge=1, le=720),
+    category: Optional[str] = Query(default="business"),
 ):
+    return ok_with_cors(request_log_store.stats(hours=hours, category=category))
 @router.get("/settings")

app/api/xtc.py CHANGED Viewed

@@ -408,29 +408,21 @@ async def _simple_stream_gen(
                     yield sse_data(event)
         else:
             # OpenAI 厂商：直接读原始 SSE
             raw_iter = await openai_adapter.chat_completions(
                 base_url=provider.base_url, api_key=api_key, body=upstream_body, stream=True
             )
-            async for raw in raw_iter:
-                if isinstance(raw, bytes):
-                    text = raw.decode("utf-8", errors="replace")
-                else:
-                    text = str(raw)
-                # 解析 data: 行
-                for line in text.split("\n"):
-                    if not line.startswith("data:"):
-                        continue
-                    payload = line[5:].strip()
-                    if payload == "[DONE]":
-                        yield sse_data({"type": "done", "delta": "", "finish_reason": "stop"})
-                        return
-                    try:
-                        ch = json.loads(payload)
-                    except Exception:
-                        continue
-                    event = _simple_from_openai_chunk(ch)
-                    if event:
-                        yield sse_data(event)
         yield sse_data({"type": "done", "delta": "", "finish_reason": "stop"})
     except HttpError as e:
         yield sse_data(

                     yield sse_data(event)
         else:
             # OpenAI 厂商：直接读原始 SSE
+            # 必须用 parse_sse_stream 跨 chunk 缓冲解析，否则跨块切断的
+            # data: 行会 json.loads 失败被丢弃，导致回复少字、换行被破坏。
+            from ..utils.sse import parse_sse_stream
             raw_iter = await openai_adapter.chat_completions(
                 base_url=provider.base_url, api_key=api_key, body=upstream_body, stream=True
             )
+            async for sse in parse_sse_stream(raw_iter):
+                if sse.get("__done__"):
+                    yield sse_data({"type": "done", "delta": "", "finish_reason": "stop"})
+                    return
+                if sse.get("__raw__") is not None:
+                    continue
+                event = _simple_from_openai_chunk(sse)
+                if event:
+                    yield sse_data(event)
         yield sse_data({"type": "done", "delta": "", "finish_reason": "stop"})
     except HttpError as e:
         yield sse_data(

app/services/request_log_store.py CHANGED Viewed

@@ -169,6 +169,22 @@ def insert(record: dict) -> Optional[int]:
 # ===== 查询 =====
 def list_records(
     *,
     limit: int = 50,
@@ -180,10 +196,15 @@ def list_records(
     ok: Optional[bool] = None,
     hours: Optional[int] = None,
     keyword: Optional[str] = None,
 ) -> dict:
     """列表查询：返回摘要（不含 request_body / response_body / headers）。"""
     sql = "SELECT id, ts, method, path, query, status_code, elapsed_ms, access_key, client_ip, user_agent, provider, model, stream, ok, error_code, error_message FROM request_log WHERE 1=1"
     args: list = []
     if path:
         sql += " AND path LIKE ?"
         args.append(f"%{path}%")
@@ -293,35 +314,39 @@ def _row_to_detail(row) -> dict:
 # ===== 统计 =====
-def stats(hours: int = 24) -> dict:
-    """请求日志统计。"""
     since = int(time.time()) - hours * 3600
     with get_conn() as conn:
         total = conn.execute(
-            "SELECT COUNT(*) AS c FROM request_log WHERE ts >= ?", (since,)
         ).fetchone()
         by_status = conn.execute(
             "SELECT CAST(status_code/100 AS INTEGER) AS bucket, COUNT(*) AS c "
-            "FROM request_log WHERE ts >= ? GROUP BY bucket ORDER BY bucket",
-            (since,),
         ).fetchall()
         by_path = conn.execute(
             "SELECT path, COUNT(*) AS c, AVG(elapsed_ms) AS avg_ms, "
             "SUM(CASE WHEN ok=1 THEN 1 ELSE 0 END) AS ok_c "
-            "FROM request_log WHERE ts >= ? GROUP BY path ORDER BY c DESC LIMIT 20",
-            (since,),
         ).fetchall()
         by_error = conn.execute(
             "SELECT error_code, COUNT(*) AS c FROM request_log "
-            "WHERE ts >= ? AND ok = 0 AND error_code IS NOT NULL "
             "GROUP BY error_code ORDER BY c DESC LIMIT 20",
-            (since,),
         ).fetchall()
         slow = conn.execute(
             "SELECT id, ts, method, path, elapsed_ms, status_code, ok "
-            "FROM request_log WHERE ts >= ? AND elapsed_ms IS NOT NULL "
             "ORDER BY elapsed_ms DESC LIMIT 10",
-            (since,),
         ).fetchall()
     return {
         "hours": hours,

 # ===== 查询 =====
+def _category_filter(category: Optional[str]) -> tuple[str, list]:
+    """返回 (SQL 片段, 参数) 用于按请求类别过滤。
+    - ``business``（默认）：只看业务请求 ``/v1/*``（对话/伪流式/OpenAI 兼容等）
+    - ``admin``：只看管理面板访问 ``/admin/api/*``
+    - ``all`` 或其它：不过滤
+    """
+    cat = str(category or "business").lower()
+    if cat == "admin":
+        return " AND path LIKE '/admin/api/%'", []
+    if cat == "all":
+        return "", []
+    # 默认 business：排除管理面板访问，只保留 /v1/*
+    return " AND path LIKE '/v1/%'", []
 def list_records(
     *,
     limit: int = 50,
     ok: Optional[bool] = None,
     hours: Optional[int] = None,
     keyword: Optional[str] = None,
+    category: Optional[str] = None,
 ) -> dict:
     """列表查询：返回摘要（不含 request_body / response_body / headers）。"""
     sql = "SELECT id, ts, method, path, query, status_code, elapsed_ms, access_key, client_ip, user_agent, provider, model, stream, ok, error_code, error_message FROM request_log WHERE 1=1"
     args: list = []
+    cat_sql, cat_args = _category_filter(category)
+    if cat_sql:
+        sql += cat_sql
+        args += cat_args
     if path:
         sql += " AND path LIKE ?"
         args.append(f"%{path}%")
 # ===== 统计 =====
+def stats(hours: int = 24, category: Optional[str] = None) -> dict:
+    """请求日志统计。``category`` 语义同 :func:`list_records`。"""
     since = int(time.time()) - hours * 3600
+    cat_sql, cat_args = _category_filter(category)
+    base_cond = " WHERE ts >= ?"
+    base_cond += cat_sql
     with get_conn() as conn:
         total = conn.execute(
+            "SELECT COUNT(*) AS c FROM request_log" + base_cond,
+            [since] + cat_args,
         ).fetchone()
         by_status = conn.execute(
             "SELECT CAST(status_code/100 AS INTEGER) AS bucket, COUNT(*) AS c "
+            "FROM request_log" + base_cond + " GROUP BY bucket ORDER BY bucket",
+            [since] + cat_args,
         ).fetchall()
         by_path = conn.execute(
             "SELECT path, COUNT(*) AS c, AVG(elapsed_ms) AS avg_ms, "
             "SUM(CASE WHEN ok=1 THEN 1 ELSE 0 END) AS ok_c "
+            "FROM request_log" + base_cond + " GROUP BY path ORDER BY c DESC LIMIT 20",
+            [since] + cat_args,
         ).fetchall()
         by_error = conn.execute(
             "SELECT error_code, COUNT(*) AS c FROM request_log "
+            + base_cond + " AND ok = 0 AND error_code IS NOT NULL "
             "GROUP BY error_code ORDER BY c DESC LIMIT 20",
+            [since] + cat_args,
         ).fetchall()
         slow = conn.execute(
             "SELECT id, ts, method, path, elapsed_ms, status_code, ok "
+            "FROM request_log" + base_cond + " AND elapsed_ms IS NOT NULL "
             "ORDER BY elapsed_ms DESC LIMIT 10",
+            [since] + cat_args,
         ).fetchall()
     return {
         "hours": hours,

app/utils/sse.py CHANGED Viewed

@@ -1,6 +1,7 @@
 """SSE 流式工具。"""
 from __future__ import annotations
 import json
 from typing import Any, AsyncIterator, Iterable, Optional
@@ -18,11 +19,22 @@ def sse_event(event: str, obj: Any) -> str:
 async def parse_sse_stream(byte_stream: AsyncIterator[bytes]) -> AsyncIterator[dict]:
-    """从字节流解析 SSE，yield 每个 data JSON。"""
     buffer = ""
     async for chunk in byte_stream:
         if isinstance(chunk, (bytes, bytearray)):
-            text = chunk.decode("utf-8", errors="replace")
         else:
             text = str(chunk)
         buffer += text
@@ -43,3 +55,21 @@ async def parse_sse_stream(byte_stream: AsyncIterator[bytes]) -> AsyncIterator[d
                 yield json.loads(data_str)
             except json.JSONDecodeError:
                 yield {"__raw__": data_str}

 """SSE 流式工具。"""
 from __future__ import annotations
+import codecs
 import json
 from typing import Any, AsyncIterator, Iterable, Optional
 async def parse_sse_stream(byte_stream: AsyncIterator[bytes]) -> AsyncIterator[dict]:
+    """从字节流解析 SSE，yield 每个 data JSON。
+    两个关键点（否则中文/长回复会丢字、换行被破坏）：
+    1. 用增量 UTF-8 解码器（codecs.getincrementaldecoder）跨 chunk 组装多字节
+       字符。若每个 chunk 单独 decode(errors="replace")，被 TCP 分段切断的中文
+       字符的前半字节会被替换成 ``?``，造成乱码/丢字。
+    2. 按完整 SSE 帧（``\\n\\n`` 分隔）缓冲后再解析。httpx 的 aiter_bytes()
+       字节块边界与 SSE 帧边界无关，若按每个 chunk 独立 split('\\n') 解析，
+       跨块切断的 ``data: {...}`` 行会 json.loads 失败被静默丢弃。
+    """
+    decoder = codecs.getincrementaldecoder("utf-8")(errors="replace")
     buffer = ""
     async for chunk in byte_stream:
         if isinstance(chunk, (bytes, bytearray)):
+            text = decoder.decode(bytes(chunk))
         else:
             text = str(chunk)
         buffer += text
                 yield json.loads(data_str)
             except json.JSONDecodeError:
                 yield {"__raw__": data_str}
+    # 收尾：flush 增量解码器残余字节，并尝试解析缓冲区里最后一帧
+    tail = decoder.decode(b"", final=True)
+    if tail:
+        buffer += tail
+    if buffer.strip():
+        data_lines = []
+        for line in buffer.split("\n"):
+            if line.startswith("data:"):
+                data_lines.append(line[5:].strip())
+        if data_lines:
+            data_str = "\n".join(data_lines)
+            if data_str == "[DONE]":
+                yield {"__done__": True}
+                return
+            try:
+                yield json.loads(data_str)
+            except json.JSONDecodeError:
+                yield {"__raw__": data_str}