feat(admin-web,backend): F1-5b Wave B UI-3 + UI-5 admin-web sandbox 透出补强 (W1)

UI-3 AIDashboard sandbox 提示 + today_calls 分组: - 后端 schemas/admin_ai.py DashboardResponse 加 today_live_calls / today_sandbox_calls 字段(默认 0,向后兼容) - 后端 services/ai/admin_service.py _get_range_stats SELECT 加 2 个 FILTER COUNT 表达式 - 前端 api/adminAI.ts DashboardResponse 类型补 2 字段 - 前端 pages/AIDashboard.tsx - 顶部加 sandbox Alert 提示条,选中 site sandbox 模式下显示业务日 + 实例 ID - today_calls 卡片下方加分组 Tag(实时 X / 沙箱 Y),feature flag 控制 - import fetchRuntimeContext + useEffect 拉 RuntimeContext - apps/admin-web/.env.example 新建,加 VITE_AI_RUNTIME_GROUPING=false 默认值说明 UI-5 AITriggerJobs runtime 列: - 后端 schemas/admin_ai.py TriggerJobItem 加 runtime_mode / sandbox_instance_id 可选字段 - 后端 admin_service.py list_trigger_jobs / get_trigger_job 各加 SELECT 列 - 前端 adminAI.ts TriggerJobItem 类型补 2 字段 - 前端 pages/AITriggerJobs.tsx 列表 columns 加运行模式 + 沙箱实例(同 UI-1 模式),详情 Modal 加 2 项(同 UI-2 模式) 双口径验证(Playwright + DB 直查): - UI-3 4a live: 选中默认门店,无 Alert,today_card 仅显示总数(flag off) - UI-3 4b sandbox=4-20: Alert 显示"沙箱 + 业务日 + sbx_…",today_calls=93(sandbox 当日) - UI-5 4a/4b: SQL INSERT 注入 walkthrough 测试行(id=9 live, id=10 sandbox),列表正确渲染 Tag + 短哈希 trend_7d 双线 / app_distribution 堆叠分布等更深入分组改造延后到 Wave C(§8.3 风险:破坏图表)。审计: - docs/audit/changes/2026-05-05__wave1_f1_5b_ui3_aidashboard_sandbox.md - docs/audit/changes/2026-05-05__wave1_f1_5b_ui5_aitriggerjobs_runtime.md Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-05 19:16:47 +08:00
parent 87a5e3b08e
commit c43375734a
8 changed files with 309 additions and 6 deletions
--- a/apps/admin-web/.env.example
+++ b/apps/admin-web/.env.example
@@ -0,0 +1,8 @@
+# admin-web Vite 环境变量示例
+# 复制为 .env.local 后按需调整(已加入 .gitignore)
+
+# F1-5b UI-3: AIDashboard 是否展示 today_calls 按 runtime_mode 分组数字
+# (实时/沙箱两个 Tag 显示在调用次数卡片下方)
+# - true:启用分组数字,sandbox 走查时一目了然
+# - false(默认):仅显示总数,保持原 UI 不变(防止图表回归)
+VITE_AI_RUNTIME_GROUPING=false
--- a/apps/admin-web/src/api/adminAI.ts
+++ b/apps/admin-web/src/api/adminAI.ts
@@ -78,6 +78,9 @@ export interface DashboardResponse {
  today_success_rate: number;
  today_tokens: number;
  today_avg_latency_ms: number;
+  // F1-5b UI-3: today_calls 按 runtime_mode 分组(live + sandbox = today_calls)
+  today_live_calls: number;
+  today_sandbox_calls: number;
  trend_7d: DailyTrend[];
  app_distribution: AppDistItem[];
  budget: BudgetInfo;
@@ -97,6 +100,9 @@ export interface TriggerJobItem {
  started_at: string | null;
  finished_at: string | null;
  created_at: string;
+  // F1-5b UI-5: runtime 透出
+  runtime_mode?: string | null;
+  sandbox_instance_id?: string | null;
 }

 export interface TriggerJobDetailResponse extends TriggerJobItem {
--- a/apps/admin-web/src/pages/AIDashboard.tsx
+++ b/apps/admin-web/src/pages/AIDashboard.tsx
@@ -11,10 +11,17 @@
 import React, { useEffect, useRef, useState, useCallback } from "react";
 import {
  Card, Row, Col, Statistic, Table, Tag, Badge, Progress,
-  Select, Button, message, Typography, Space, DatePicker,
+  Select, Button, message, Typography, Space, DatePicker, Alert,
 } from "antd";
 import { ReloadOutlined, WifiOutlined } from "@ant-design/icons";
 import type { Dayjs } from "dayjs";
+// F1-5b UI-3: sandbox 提示条复用 UI-4 同款 RuntimeContext fetch
+import { fetchRuntimeContext, type RuntimeContext } from "../api/runtimeContext";
+
+// F1-5b UI-3: feature flag — today_calls 分组数字是否展示。
+// 默认 false(防止图表回归);开启时 today_calls 卡片下方显示 "实时 X / 沙箱 Y"。
+const RUNTIME_GROUPING_ENABLED =
+  String(import.meta.env.VITE_AI_RUNTIME_GROUPING ?? "").toLowerCase() === "true";

 const { RangePicker } = DatePicker;

@@ -105,6 +112,8 @@ const AIDashboard: React.FC = () => {
  const [wsStatus, setWsStatus] = useState<"connecting" | "connected" | "disconnected">("disconnected");
  const [realtimeAlerts, setRealtimeAlerts] = useState<AlertItem[]>([]);
  const wsRef = useRef<WebSocket | null>(null);
+  // F1-5b UI-3: 当前选中 site 的 RuntimeContext,用于顶部 sandbox 提示条
+  const [runtimeCtx, setRuntimeCtx] = useState<RuntimeContext | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
@@ -128,6 +137,19 @@ const AIDashboard: React.FC = () => {

  useEffect(() => { load(); }, [load]);

+  // F1-5b UI-3: 拉取当前 site 的 RuntimeContext。siteId 未选时不显示提示条。
+  useEffect(() => {
+    if (siteId == null) {
+      setRuntimeCtx(null);
+      return;
+    }
+    let cancelled = false;
+    fetchRuntimeContext(siteId)
+      .then((ctx) => { if (!cancelled) setRuntimeCtx(ctx); })
+      .catch(() => { if (!cancelled) setRuntimeCtx(null); });
+    return () => { cancelled = true; };
+  }, [siteId]);
+
  const statLabel = rangeDays === 0
    ? (customRange ? `${customRange[0].format("MM-DD")} ~ ${customRange[1].format("MM-DD")}` : "指定日期")
    : (RANGE_LABEL[rangeDays] || "今日");
@@ -198,10 +220,40 @@ const AIDashboard: React.FC = () => {
        </Space>
      </Row>

+      {/* F1-5b UI-3: sandbox 提示条 — 仅当选中 site 处于 sandbox 模式时显示 */}
+      {runtimeCtx?.is_sandbox && (
+        <Alert
+          type="warning"
+          showIcon
+          style={{ marginBottom: 16 }}
+          message={
+            <Space size={8}>
+              <Tag color="orange" style={{ margin: 0 }}>沙箱</Tag>
+              <span>当前门店处于沙箱模式,数据基于业务日</span>
+              <Tag color="default" style={{ fontFamily: "monospace" }}>{runtimeCtx.business_date}</Tag>
+              {runtimeCtx.sandbox_instance_id && (
+                <span style={{ fontSize: 12, color: "#888", fontFamily: "monospace" }}>
+                  实例 {runtimeCtx.sandbox_instance_id.slice(0, 12)}…
+                </span>
+              )}
+            </Space>
+          }
+        />
+      )}
+
      {/* 第一行：4 个统计卡片 */}
      <Row gutter={16} style={{ marginBottom: 16 }}>
        <Col span={6}>
-          <Card><Statistic title={`${statLabel}调用次数`} value={data?.today_calls ?? 0} /></Card>
+          <Card>
+            <Statistic title={`${statLabel}调用次数`} value={data?.today_calls ?? 0} />
+            {/* F1-5b UI-3: feature flag 控制 — today_calls 按 runtime 分组数字 */}
+            {RUNTIME_GROUPING_ENABLED && data && (
+              <div style={{ marginTop: 4, fontSize: 12, color: "#888" }}>
+                <Tag color="blue" style={{ marginRight: 4 }}>实时 {data.today_live_calls}</Tag>
+                <Tag color="orange" style={{ margin: 0 }}>沙箱 {data.today_sandbox_calls}</Tag>
+              </div>
+            )}
+          </Card>
        </Col>
        <Col span={6}>
          <Card>
--- a/apps/admin-web/src/pages/AITriggerJobs.tsx
+++ b/apps/admin-web/src/pages/AITriggerJobs.tsx
@@ -121,6 +121,22 @@ const AITriggerJobs: React.FC = () => {
      title: "耗时", key: "duration", width: 90,
      render: (_: unknown, r: TriggerJobItem) => calcDuration(r.started_at, r.finished_at),
    },
+    // F1-5b UI-5: 运行模式 + 沙箱实例(同 UI-1 模式)
+    {
+      title: "运行模式", dataIndex: "runtime_mode", key: "runtime_mode", width: 100,
+      render: (v: string | null | undefined) => {
+        if (!v) return "—";
+        return <Tag color={v === "sandbox" ? "orange" : "blue"}>{v}</Tag>;
+      },
+    },
+    {
+      title: "沙箱实例", dataIndex: "sandbox_instance_id", key: "sandbox_instance_id", width: 130,
+      render: (v: string | null | undefined) => {
+        if (!v || v === "live") return "—";
+        const short = v.length > 12 ? v.slice(0, 8) + "…" : v;
+        return <span title={v} style={{ fontFamily: "monospace", fontSize: 12 }}>{short}</span>;
+      },
+    },
    { title: "创建时间", dataIndex: "created_at", key: "created_at", width: 170, render: fmtTime },
    {
      title: "操作", key: "action", width: 160, fixed: "right" as const,
@@ -222,6 +238,21 @@ const AITriggerJobs: React.FC = () => {
            <Descriptions.Item label="连接器">{detail.connector_type}</Descriptions.Item>
            <Descriptions.Item label="强制执行">{detail.is_forced ? "是" : "否"}</Descriptions.Item>
            <Descriptions.Item label="耗时">{calcDuration(detail.started_at, detail.finished_at)}</Descriptions.Item>
+            {/* F1-5b UI-5: runtime 详情(同 UI-2 模式) */}
+            <Descriptions.Item label="运行模式">
+              {detail.runtime_mode ? (
+                <Tag color={detail.runtime_mode === "sandbox" ? "orange" : "blue"}>
+                  {detail.runtime_mode}
+                </Tag>
+              ) : "—"}
+            </Descriptions.Item>
+            <Descriptions.Item label="沙箱实例">
+              {detail.sandbox_instance_id && detail.sandbox_instance_id !== "live" ? (
+                <span style={{ fontFamily: "monospace", fontSize: 12 }}>
+                  {detail.sandbox_instance_id}
+                </span>
+              ) : "—"}
+            </Descriptions.Item>
            <Descriptions.Item label="创建时间" span={2}>{fmtTime(detail.created_at)}</Descriptions.Item>
            {detail.error_message && (
              <Descriptions.Item label="错误信息" span={2}>
--- a/apps/backend/app/schemas/admin_ai.py
+++ b/apps/backend/app/schemas/admin_ai.py
@@ -62,6 +62,10 @@ class DashboardResponse(BaseModel):
    today_success_rate: float           # 0.0 ~ 1.0
    today_tokens: int
    today_avg_latency_ms: float
+    # F1-5b UI-3: today_calls 按 runtime_mode 分组
+    # live + sandbox = today_calls(总计),供前端 feature flag 控制是否展示
+    today_live_calls: int = 0
+    today_sandbox_calls: int = 0
    trend_7d: list[DailyTrend]
    app_distribution: list[AppDistItem]
    budget: BudgetInfo
@@ -84,6 +88,9 @@ class TriggerJobItem(BaseModel):
    started_at: str | None
    finished_at: str | None
    created_at: str
+    # F1-5b UI-5: runtime 透出(同 RunLogItem)
+    runtime_mode: str | None = None
+    sandbox_instance_id: str | None = None


 class TriggerJobListResponse(BaseModel):
--- a/apps/backend/app/services/ai/admin_service.py
+++ b/apps/backend/app/services/ai/admin_service.py
@@ -126,6 +126,8 @@ class AdminAIService:
        conn = get_connection()
        try:
            with conn.cursor() as cur:
+                # F1-5b UI-3: SELECT 加 live/sandbox 分组 COUNT,
+                # 总数 total_calls 与 today_live + today_sandbox 应一致。
                cur.execute(
                    f"""
                    SELECT
@@ -133,7 +135,10 @@ class AdminAIService:
                        COUNT(*) FILTER (WHERE status = 'success')        AS success_count,
                        COALESCE(SUM(tokens_used), 0)                     AS total_tokens,
                        COALESCE(AVG(latency_ms) FILTER (WHERE latency_ms IS NOT NULL), 0)
-                                                                          AS avg_latency
+                                                                          AS avg_latency,
+                        COUNT(*) FILTER (WHERE COALESCE(runtime_mode, 'live') = 'live')
+                                                                          AS live_calls,
+                        COUNT(*) FILTER (WHERE runtime_mode = 'sandbox')  AS sandbox_calls
                    FROM biz.ai_run_logs
                    WHERE {time_clause}
                      {site_clause}
@@ -145,13 +150,15 @@ class AdminAIService:
        finally:
            conn.close()

-        total, success, tokens, avg_lat = row if row else (0, 0, 0, 0)
+        total, success, tokens, avg_lat, live_cnt, sandbox_cnt = row if row else (0, 0, 0, 0, 0, 0)
        rate = round(success / total, 4) if total > 0 else 0.0
        return {
            "today_calls": total,
            "today_success_rate": rate,
            "today_tokens": int(tokens),
            "today_avg_latency_ms": round(float(avg_lat), 2),
+            "today_live_calls": int(live_cnt),
+            "today_sandbox_calls": int(sandbox_cnt),
        }

    async def _get_7d_trend(self, site_id: int | None) -> list[dict]:
@@ -350,10 +357,12 @@ class AdminAIService:
                total = cur.fetchone()[0]

                # 分页数据
+                # F1-5b UI-5: 列表 SELECT 加 runtime_mode + sandbox_instance_id 透出
                cur.execute(
                    f"""
                    SELECT id, event_type, member_id, status, app_chain,
-                           is_forced, site_id, started_at, finished_at, created_at
+                           is_forced, site_id, started_at, finished_at, created_at,
+                           runtime_mode, sandbox_instance_id
                    FROM biz.ai_trigger_jobs
                    {where_sql}
                    ORDER BY created_at DESC
@@ -392,11 +401,13 @@ class AdminAIService:
        conn = get_connection()
        try:
            with conn.cursor() as cur:
+                # F1-5b UI-5: 详情 SELECT 加 runtime_mode + sandbox_instance_id 透出
                cur.execute(
                    """
                    SELECT id, event_type, member_id, status, app_chain,
                           is_forced, site_id, started_at, finished_at,
-                           created_at, payload, error_message, connector_type
+                           created_at, payload, error_message, connector_type,
+                           runtime_mode, sandbox_instance_id
                    FROM biz.ai_trigger_jobs
                    WHERE id = %s
                    """,