feat(observability): Phase2.3 媒体/LLM 可观测面板(后端归因聚合+前端页) 并修复 token_usage_logs trace_id 写入(chat_service/im_llm) [v2026.07.19.5]

VERSION

@@ -1 +1 @@
-v2026.07.19.4
+v2026.07.19.5

backend/python/app/api/admin/observability_admin.py

@@ -0,0 +1,103 @@
+"""调用可观测面板后端 API（媒体/LLM 调用归因）。
+路由前缀: /app/api/admin/observability
+数据来源: token_usage_logs（Phase 2.2 已加 trace_id 列，可经 X-Trace-Id 关联请求链路）。
+"""
+from datetime import datetime, timedelta
+
+from fastapi import APIRouter, Query, Depends
+from ...database import get_db
+from ..auth import get_current_user
+from sqlalchemy import text
+from sqlalchemy.orm import Session
+
+router = APIRouter()
+
+
+@router.get("/summary")
+async def observability_summary(
+    days: int = Query(30, description="统计天数"),
+    db: Session = Depends(get_db),
+    user=Depends(get_current_user),
+):
+    """媒体/LLM 调用归因：总览 + 按模型 + 按用户 + 每日趋势 + 最近调用(trace_id 下钻)。"""
+    since = datetime.now() - timedelta(days=days)
+
+    totals = db.execute(text("""
+        SELECT COUNT(*),
+               COALESCE(SUM(total_tokens), 0),
+               COALESCE(SUM(cost), 0),
+               COUNT(DISTINCT user_id)
+        FROM token_usage_logs WHERE created_at >= :since
+    """), {"since": since}).fetchone()
+
+    by_model = db.execute(text("""
+        SELECT model_name, COUNT(*), COALESCE(SUM(total_tokens), 0), COALESCE(SUM(cost), 0)
+        FROM token_usage_logs WHERE created_at >= :since
+        GROUP BY model_name ORDER BY COALESCE(SUM(total_tokens), 0) DESC
+    """), {"since": since}).fetchall()
+
+    by_user = db.execute(text("""
+        SELECT t.user_id, u.username, COUNT(*), COALESCE(SUM(t.total_tokens), 0), COALESCE(SUM(t.cost), 0)
+        FROM token_usage_logs t LEFT JOIN users u ON u.id = t.user_id
+        WHERE t.created_at >= :since
+        GROUP BY t.user_id, u.username ORDER BY COALESCE(SUM(t.total_tokens), 0) DESC LIMIT 20
+    """), {"since": since}).fetchall()
+
+    daily = db.execute(text("""
+        SELECT DATE(created_at) AS d, COALESCE(SUM(total_tokens), 0), COALESCE(SUM(cost), 0), COUNT(*)
+        FROM token_usage_logs WHERE created_at >= :since
+        GROUP BY DATE(created_at) ORDER BY d
+    """), {"since": since}).fetchall()
+
+    recent = db.execute(text("""
+        SELECT trace_id, model_name, total_tokens, cost, created_at
+        FROM token_usage_logs WHERE created_at >= :since
+        ORDER BY created_at DESC LIMIT 50
+    """), {"since": since}).fetchall()
+
+    return {
+        "totals": {
+            "calls": int(totals[0] or 0),
+            "tokens": int(totals[1] or 0),
+            "cost": float(totals[2] or 0),
+            "users": int(totals[3] or 0),
+        },
+        "by_model": [
+            {
+                "model_name": m[0] or "unknown",
+                "calls": int(m[1] or 0),
+                "tokens": int(m[2] or 0),
+                "cost": float(m[3] or 0),
+            }
+            for m in by_model
+        ],
+        "by_user": [
+            {
+                "user_id": u[0],
+                "username": u[1] or u[0],
+                "calls": int(u[2] or 0),
+                "tokens": int(u[3] or 0),
+                "cost": float(u[4] or 0),
+            }
+            for u in by_user
+        ],
+        "daily": [
+            {
+                "date": str(d[0]),
+                "tokens": int(d[1] or 0),
+                "cost": float(d[2] or 0),
+                "calls": int(d[3] or 0),
+            }
+            for d in daily
+        ],
+        "recent": [
+            {
+                "trace_id": r[0],
+                "model_name": r[1] or "unknown",
+                "tokens": int(r[2] or 0),
+                "cost": float(r[3] or 0),
+                "created_at": r[4].strftime("%Y-%m-%d %H:%M:%S") if r[4] else None,
+            }
+            for r in recent
+        ],
+    }

backend/python/app/api/chat_service.py

@@ -16,7 +16,7 @@ import httpx
 import os
 import logging
 from ..database import get_db, SessionLocal
-from app.core.observability import span
+from app.core.observability import span, get_trace_id
 from ..models import (
 
 
@@ -1743,6 +1743,8 @@ async def _send_message_core(
 
 
             conversation_id=conv_id,
+            trace_id=get_trace_id(),
+
 
 
 

backend/python/app/api/im_llm.py

@@ -25,6 +25,7 @@ from sqlalchemy.orm import Session
 
 from ..capability_registry import resolve_auto_model
 from ..models import AIModel, ModelProvider, TokenUsageLog, gen_uuid
+from app.core.observability import get_trace_id
 
 logger = logging.getLogger(__name__)
 
@@ -95,6 +96,7 @@ def _log_media_usage(db: Session, user_id: str, ai_model, media_type: str, promp
             user_id=user_id,
             model_id=ai_model.id,
             model_name=ai_model.name,
+            trace_id=get_trace_id(),
             prompt_tokens=est,
             completion_tokens=0,
             total_tokens=est,

backend/python/main.py

@@ -17,7 +17,7 @@ sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
 
 from app.api import auth, chat, knowledge, market, token_usage, payment, profile, notifications, assets, evolution
 from app.casdoor_auth import router as casdoor_router
-from app.api.admin import dashboard, users, models, settings, payment_admin, services, membership_admin, ads, market_admin, logs, skills_admin, agents_admin, knowledge_admin, workflow_admin, storage_admin, automation_admin, mcp_admin, developer_admin, apps_admin, distro_admin, code_exec_admin, privacy_admin, im_bot_admin, promotion_admin, achievement_admin, tenant_admin, billing_admin, analytics_admin
+from app.api.admin import dashboard, users, models, settings, payment_admin, services, membership_admin, ads, market_admin, logs, skills_admin, agents_admin, knowledge_admin, workflow_admin, storage_admin, automation_admin, mcp_admin, developer_admin, apps_admin, distro_admin, code_exec_admin, privacy_admin, im_bot_admin, promotion_admin, achievement_admin, tenant_admin, billing_admin, analytics_admin, observability_admin
 from app.api.im_bot_user import router as im_bot_user_router
 from app.api.im_bot_platform import router as im_bot_platform_router
 from app.api.portal import user_portal
@@ -239,6 +239,7 @@ app.include_router(promotion_admin.router, prefix="/app/api/admin/promotion", ta
 app.include_router(tenant_admin.router, prefix="/app/api/admin/tenant", tags=["tenant"])
 app.include_router(billing_admin.router, prefix="/app/api/admin/billing", tags=["billing"])
 app.include_router(analytics_admin.router, prefix="/app/api/admin/analytics", tags=["analytics"])
+app.include_router(observability_admin.router, prefix="/app/api/admin/observability", tags=["后台-调用可观测"])
 app.include_router(user_portal.router, prefix="/app/api/portal", tags=["portal"])
 app.include_router(achievement_admin.router, prefix="/app/api/admin/achievement", tags=["achievement"])
 app.include_router(casdoor_router, prefix="/app/api/auth", tags=["Casdoor SSO"])

frontend/src/App.tsx

@@ -45,6 +45,7 @@ const Achievement = React.lazy(() => import('@/pages/admin/Achievement'));
 const Tenant = React.lazy(() => import('@/pages/admin/Tenant'));
 const Billing = React.lazy(() => import('@/pages/admin/Billing'));
 const Analytics = React.lazy(() => import('@/pages/admin/Analytics'));
+const Observability = React.lazy(() => import('@/pages/admin/Observability'));
 const AdminKnowledge = React.lazy(() => import('@/pages/admin/Knowledge'));
 const AdminWorkflow = React.lazy(() => import('@/pages/admin/Workflow'));
 const AdminStorage = React.lazy(() => import('@/pages/admin/Storage'));
@@ -151,6 +152,7 @@ const App: React.FC = () => {
             <Route path="tenant" element={<Tenant />} />
             <Route path="billing" element={<Billing />} />
             <Route path="analytics" element={<Analytics />} />
+      <Route path="observability" element={<Observability />} />
             <Route path="knowledge" element={<AdminKnowledge />} />
             <Route path="workflow" element={<AdminWorkflow />} />
             <Route path="storage" element={<AdminStorage />} />

frontend/src/api/index.ts

@@ -527,6 +527,7 @@ export const adminAPI = {
   getRecentAudit: () => get<any[]>('/admin/dashboard/recent-audit'),
 
     getDailyStats: (days?: number) => get<{ days: number; data: Array<{ date: string; tokens: number }> }>(`/admin/dashboard/daily-stats${days ? `?days=${days}` : ''}`),
+    getObservabilitySummary: (days?: number) => get<any>(`/admin/observability/summary${days ? `?days=${days}` : ''}`),
 
   // 用户管理
 

frontend/src/components/layout/AdminLayout.tsx

@@ -97,6 +97,7 @@ const adminNavGroups: NavGroup[] = [
     icon: 'developer',
     items: [
       { path: '/admin/analytics', icon: 'analytics', label: '数据分析' },
+      { path: '/admin/observability', icon: 'observability', label: '调用可观测' },
       { path: '/admin/workflow', icon: 'workflow', label: '工作流编排' },
       { path: '/admin/apps', icon: 'apps', label: 'AI 应用管理' },
       { path: '/admin/code-exec', icon: 'code', label: '代码执行沙箱' },
@@ -154,6 +155,7 @@ const adminIconPaths: Record<string, JSX.Element> = {
   billing: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/><line x1="6" y1="15" x2="10" y2="15"/></svg>,
 
   analytics: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="3" y1="20" x2="21" y2="20"/></svg>,
+  observability: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12h4l3 8 4-16 3 8h4"/></svg>,
 
   imbot: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>,
 

frontend/src/pages/admin/Observability.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useState } from 'react';
+import { adminAPI } from '@/api';
+
+interface Summary {
+  totals: { calls: number; tokens: number; cost: number; users: number };
+  by_model: { model_name: string; calls: number; tokens: number; cost: number }[];
+  by_user: { user_id: string; username: string; calls: number; tokens: number; cost: number }[];
+  daily: { date: string; tokens: number; cost: number; calls: number }[];
+  recent: { trace_id: string | null; model_name: string; tokens: number; cost: number; created_at: string | null }[];
+}
+
+const ACCENT = '#5B5FED';
+const ACCENT_HOVER = '#4A4ECC';
+
+export default function Observability() {
+  const [days, setDays] = useState(30);
+  const [data, setData] = useState<Summary | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [err, setErr] = useState('');
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    setErr('');
+    adminAPI.getObservabilitySummary(days)
+      .then((d: Summary) => { if (alive) setData(d); })
+      .catch((e: any) => { if (alive) setErr(e?.message || '加载失败'); })
+      .finally(() => { if (alive) setLoading(false); });
+    return () => { alive = false; };
+  }, [days]);
+
+  const maxTokens = data ? Math.max(1, ...data.daily.map(d => d.tokens)) : 1;
+  const maxModel = data ? Math.max(1, ...data.by_model.map(m => m.tokens)) : 1;
+  const fmt = (n: number) => n.toLocaleString('zh-CN');
+  const fmtCost = (n: number) => `¥${n.toFixed(4)}`;
+
+  const card: React.CSSProperties = {
+    background: '#fff', border: '1px solid #eceef5', borderRadius: 16,
+    padding: 20, boxShadow: '0 1px 3px rgba(20,30,60,0.04)', marginBottom: 18,
+  };
+  const stat: React.CSSProperties = {
+    flex: 1, minWidth: 150, background: '#fff', border: '1px solid #eceef5',
+    borderRadius: 16, padding: 18, boxShadow: '0 1px 3px rgba(20,30,60,0.04)',
+  };
+
+  return (
+    <div style={{ padding: 24, maxWidth: 1160, margin: '0 auto', color: '#1f2330' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20, flexWrap: 'wrap', gap: 12 }}>
+        <div>
+          <h2 style={{ margin: 0, fontSize: 22, fontWeight: 700 }}>调用可观测</h2>
+          <div style={{ color: '#8a90a2', fontSize: 13, marginTop: 4 }}>
+            媒体 / LLM 调用归因 · 基于 trace_id 关联请求链路（Phase 2.2）
+          </div>
+        </div>
+        <div style={{ display: 'flex', gap: 8 }}>
+          {[7, 30, 90].map(d => (
+            <button key={d} onClick={() => setDays(d)}
+              style={{
+                padding: '7px 14px', borderRadius: 10, cursor: 'pointer', fontSize: 13,
+                border: `1px solid ${days === d ? ACCENT : '#e2e5ee'}`,
+                background: days === d ? ACCENT : '#fff',
+                color: days === d ? '#fff' : '#5b6172', fontWeight: 600,
+                transition: 'all .15s',
+              }}>
+              {d} 天
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {err && <div style={{ ...card, borderColor: '#f3c2c2', color: '#c0392b' }}>{err}</div>}
+      {loading && !data && <div style={{ color: '#8a90a2' }}>加载中…</div>}
+
+      {data && (
+        <>
+          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 18 }}>
+            <div style={stat}><div style={{ color: '#8a90a2', fontSize: 12 }}>调用次数</div><div style={{ fontSize: 24, fontWeight: 700, marginTop: 6 }}>{fmt(data.totals.calls)}</div></div>
+            <div style={stat}><div style={{ color: '#8a90a2', fontSize: 12 }}>Token 消耗</div><div style={{ fontSize: 24, fontWeight: 700, marginTop: 6 }}>{fmt(data.totals.tokens)}</div></div>
+            <div style={stat}><div style={{ color: '#8a90a2', fontSize: 12 }}>成本</div><div style={{ fontSize: 24, fontWeight: 700, marginTop: 6, color: ACCENT }}>{fmtCost(data.totals.cost)}</div></div>
+            <div style={stat}><div style={{ color: '#8a90a2', fontSize: 12 }}>活跃用户</div><div style={{ fontSize: 24, fontWeight: 700, marginTop: 6 }}>{fmt(data.totals.users)}</div></div>
+          </div>
+
+          <div style={card}>
+            <h3 style={{ margin: '0 0 14px', fontSize: 16 }}>按模型</h3>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+              {data.by_model.length === 0 && <div style={{ color: '#8a90a2', fontSize: 13 }}>暂无数据</div>}
+              {data.by_model.map(m => (
+                <div key={m.model_name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                  <div style={{ width: 150, fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.model_name}</div>
+                  <div style={{ flex: 1, height: 10, background: '#f1f3f9', borderRadius: 6, overflow: 'hidden' }}>
+                    <div style={{ width: `${(m.tokens / maxModel) * 100}%`, height: '100%', background: ACCENT, borderRadius: 6 }} />
+                  </div>
+                  <div style={{ width: 90, textAlign: 'right', fontSize: 13, color: '#5b6172' }}>{fmt(m.tokens)}</div>
+                  <div style={{ width: 90, textAlign: 'right', fontSize: 13, color: ACCENT }}>{fmtCost(m.cost)}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div style={card}>
+            <h3 style={{ margin: '0 0 14px', fontSize: 16 }}>每日趋势（Token）</h3>
+            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 140, overflowX: 'auto', paddingBottom: 4 }}>
+              {data.daily.length === 0 && <div style={{ color: '#8a90a2', fontSize: 13 }}>暂无数据</div>}
+              {data.daily.map(d => (
+                <div key={d.date} title={`${d.date} · ${fmt(d.tokens)} tokens · ${fmtCost(d.cost)}`}
+                  style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, minWidth: 22 }}>
+                  <div style={{ width: 16, height: `${(d.tokens / maxTokens) * 110}px`, background: ACCENT, borderRadius: '4px 4px 0 0', opacity: 0.85 }} />
+                  <div style={{ fontSize: 9, color: '#aab', transform: 'rotate(-45deg)', whiteSpace: 'nowrap' }}>{d.date.slice(5)}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap' }}>
+            <div style={{ ...card, flex: 1, minWidth: 320 }}>
+              <h3 style={{ margin: '0 0 14px', fontSize: 16 }}>按用户（Top 20）</h3>
+              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+                <thead><tr style={{ color: '#8a90a2', textAlign: 'left' }}>
+                  <th style={th}>用户</th><th style={thR}>调用</th><th style={thR}>Token</th><th style={thR}>成本</th>
+                </tr></thead>
+                <tbody>
+                  {data.by_user.map(u => (
+                    <tr key={u.user_id} style={{ borderTop: '1px solid #f1f3f9' }}>
+                      <td style={td}>{u.username}</td>
+                      <td style={tdR}>{fmt(u.calls)}</td>
+                      <td style={tdR}>{fmt(u.tokens)}</td>
+                      <td style={{ ...tdR, color: ACCENT }}>{fmtCost(u.cost)}</td>
+                    </tr>
+                  ))}
+                  {data.by_user.length === 0 && <tr><td colSpan={4} style={{ ...td, color: '#8a90a2' }}>暂无数据</td></tr>}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div style={card}>
+            <h3 style={{ margin: '0 0 14px', fontSize: 16 }}>最近调用（trace_id 可下钻）</h3>
+            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+              <thead><tr style={{ color: '#8a90a2', textAlign: 'left' }}>
+                <th style={th}>Trace ID</th><th style={th}>模型</th><th style={thR}>Token</th><th style={thR}>成本</th><th style={thR}>时间</th>
+              </tr></thead>
+              <tbody>
+                {data.recent.map((r, i) => (
+                  <tr key={(r.trace_id || '') + i} style={{ borderTop: '1px solid #f1f3f9' }}>
+                    <td style={{ ...td, fontFamily: 'monospace', fontSize: 12, maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.trace_id || '—'}</td>
+                    <td style={td}>{r.model_name}</td>
+                    <td style={tdR}>{fmt(r.tokens)}</td>
+                    <td style={{ ...tdR, color: ACCENT }}>{fmtCost(r.cost)}</td>
+                    <td style={tdR}>{r.created_at || '—'}</td>
+                  </tr>
+                ))}
+                {data.recent.length === 0 && <tr><td colSpan={5} style={{ ...td, color: '#8a90a2' }}>暂无数据</td></tr>}
+              </tbody>
+            </table>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+const th: React.CSSProperties = { padding: '8px 6px', fontWeight: 600, fontSize: 12 };
+const thR: React.CSSProperties = { ...th, textAlign: 'right' };
+const td: React.CSSProperties = { padding: '8px 6px' };
+const tdR: React.CSSProperties = { ...td, textAlign: 'right', color: '#5b6172' };