feat: 累积功能变更 — 聊天集成、租户管理、小程序更新、ETL 增强、迁移脚本
包含多个会话的累积代码变更： - backend: AI 聊天服务、触发器调度、认证增强、WebSocket、调度器最小间隔 - admin-web: ETL 状态页、任务管理、调度配置、登录优化 - miniprogram: 看板页面、聊天集成、UI 组件、导航更新 - etl: DWS 新任务（finance_area_daily/board_cache）、连接器增强 - tenant-admin: 项目初始化 - db: 19 个迁移脚本（etl_feiqiu 11 + zqyy_app 8） - packages/shared: 枚举和工具函数更新 - tools: 数据库工具、报表生成、健康检查 - docs: PRD/架构/部署/合约文档更新 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
217
apps/admin-web/src/pages/AIDashboard.tsx
Normal file
217
apps/admin-web/src/pages/AIDashboard.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
/**
|
||||
* AI 运行总览 Dashboard 页面。
|
||||
*
|
||||
* - 顶部：门店筛选 + 刷新
|
||||
* - 第一行：4 个统计卡片（今日调用、成功率、Token 消耗、平均延迟）
|
||||
* - 第二行：7 天趋势表格 + App 调用占比表格
|
||||
* - 第三行：Token 预算进度条 + App 健康状态
|
||||
* - 第四行：告警列表
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState, useCallback } from "react";
|
||||
import {
|
||||
Card, Row, Col, Statistic, Table, Tag, Badge, Progress,
|
||||
Select, Button, message, Typography, Space,
|
||||
} from "antd";
|
||||
import { ReloadOutlined } from "@ant-design/icons";
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import {
|
||||
getDashboard,
|
||||
type DashboardResponse, type DailyTrend, type AppDistItem,
|
||||
type AlertItem, type AppHealthItem,
|
||||
} from "../api/adminAI";
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
const ALERT_STATUS_COLOR: Record<string, string> = {
|
||||
failed: "red", timeout: "orange", circuit_open: "volcano",
|
||||
};
|
||||
|
||||
const ALERT_MGMT_COLOR: Record<string, string> = {
|
||||
pending: "warning", acknowledged: "success", ignored: "default",
|
||||
};
|
||||
|
||||
const HEALTH_STATUS: Record<string, "success" | "error" | "warning" | "default"> = {
|
||||
success: "success", failed: "error", timeout: "warning", circuit_open: "error",
|
||||
};
|
||||
|
||||
function fmtTime(raw: string | null): string {
|
||||
if (!raw) return "—";
|
||||
const d = new Date(raw);
|
||||
return Number.isNaN(d.getTime()) ? raw : d.toLocaleString("zh-CN");
|
||||
}
|
||||
|
||||
// ---- 表格列定义 ----
|
||||
|
||||
const trendColumns: ColumnsType<DailyTrend> = [
|
||||
{ title: "日期", dataIndex: "date", key: "date", width: 120 },
|
||||
{ title: "调用量", dataIndex: "calls", key: "calls", align: "right" },
|
||||
{
|
||||
title: "成功率", dataIndex: "success_rate", key: "success_rate", align: "right",
|
||||
render: (v: number) => `${(v * 100).toFixed(1)}%`,
|
||||
},
|
||||
];
|
||||
|
||||
const distColumns: ColumnsType<AppDistItem> = [
|
||||
{ title: "App 类型", dataIndex: "app_type", key: "app_type" },
|
||||
{ title: "调用次数", dataIndex: "count", key: "count", align: "right" },
|
||||
{
|
||||
title: "占比", dataIndex: "percentage", key: "percentage", align: "right",
|
||||
render: (v: number) => `${(v * 100).toFixed(1)}%`,
|
||||
},
|
||||
];
|
||||
|
||||
const alertColumns: ColumnsType<AlertItem> = [
|
||||
{ title: "ID", dataIndex: "id", key: "id", width: 80 },
|
||||
{ title: "App", dataIndex: "app_type", key: "app_type", width: 160 },
|
||||
{
|
||||
title: "状态", dataIndex: "status", key: "status", width: 110,
|
||||
render: (v: string) => <Tag color={ALERT_STATUS_COLOR[v] ?? "default"}>{v}</Tag>,
|
||||
},
|
||||
{
|
||||
title: "告警状态", dataIndex: "alert_status", key: "alert_status", width: 110,
|
||||
render: (v: string | null) => v ? <Tag color={ALERT_MGMT_COLOR[v] ?? "default"}>{v}</Tag> : "—",
|
||||
},
|
||||
{
|
||||
title: "错误信息", dataIndex: "error_message", key: "error_message", ellipsis: true,
|
||||
render: (v: string | null) => v ?? "—",
|
||||
},
|
||||
{ title: "时间", dataIndex: "created_at", key: "created_at", width: 170, render: fmtTime },
|
||||
];
|
||||
|
||||
// ---- 页面组件 ----
|
||||
|
||||
const AIDashboard: React.FC = () => {
|
||||
const [data, setData] = useState<DashboardResponse | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [siteId, setSiteId] = useState<number | undefined>(undefined);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getDashboard(siteId);
|
||||
setData(res);
|
||||
} catch {
|
||||
message.error("加载 Dashboard 失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [siteId]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 顶部：门店筛选 + 刷新 */}
|
||||
<Row justify="space-between" align="middle" style={{ marginBottom: 16 }}>
|
||||
<Space>
|
||||
<Title level={4} style={{ margin: 0 }}>AI 运行总览</Title>
|
||||
<Select
|
||||
allowClear placeholder="门店筛选" style={{ width: 200 }}
|
||||
value={siteId} onChange={(v) => setSiteId(v)}
|
||||
options={[{ label: "默认门店", value: 2790685415443269 }]}
|
||||
/>
|
||||
</Space>
|
||||
<Button icon={<ReloadOutlined />} onClick={load} loading={loading}>刷新</Button>
|
||||
</Row>
|
||||
|
||||
{/* 第一行：4 个统计卡片 */}
|
||||
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||||
<Col span={6}>
|
||||
<Card><Statistic title="今日调用次数" value={data?.today_calls ?? 0} /></Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="今日成功率" suffix="%"
|
||||
value={data ? (data.today_success_rate * 100).toFixed(1) : "0.0"}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card><Statistic title="今日 Token 消耗" value={data?.today_tokens ?? 0} /></Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="平均延迟" suffix="ms"
|
||||
value={data ? data.today_avg_latency_ms.toFixed(0) : "0"}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 第二行：7 天趋势 + App 调用占比 */}
|
||||
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||||
<Col span={12}>
|
||||
<Card title="近 7 天趋势" size="small">
|
||||
<Table<DailyTrend>
|
||||
columns={trendColumns}
|
||||
dataSource={data?.trend_7d ?? []}
|
||||
rowKey="date" size="small" pagination={false}
|
||||
loading={loading}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Card title="App 调用占比" size="small">
|
||||
<Table<AppDistItem>
|
||||
columns={distColumns}
|
||||
dataSource={data?.app_distribution ?? []}
|
||||
rowKey="app_type" size="small" pagination={false}
|
||||
loading={loading}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 第三行：Token 预算 + App 健康状态 */}
|
||||
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||||
<Col span={12}>
|
||||
<Card title="Token 预算" size="small">
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<span>日预算：{data?.budget.daily_used ?? 0} / {data?.budget.daily_limit ?? 0}</span>
|
||||
<Progress
|
||||
percent={data ? +(data.budget.daily_pct * 100).toFixed(1) : 0}
|
||||
status={data && data.budget.daily_pct > 0.9 ? "exception" : "active"}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span>月预算：{data?.budget.monthly_used ?? 0} / {data?.budget.monthly_limit ?? 0}</span>
|
||||
<Progress
|
||||
percent={data ? +(data.budget.monthly_pct * 100).toFixed(1) : 0}
|
||||
status={data && data.budget.monthly_pct > 0.9 ? "exception" : "active"}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Card title="App 健康状态" size="small">
|
||||
{(data?.app_health ?? []).map((item: AppHealthItem) => (
|
||||
<div key={item.app_type} style={{ display: "flex", justifyContent: "space-between", padding: "4px 0" }}>
|
||||
<span>{item.app_type}</span>
|
||||
<Space>
|
||||
<Badge status={HEALTH_STATUS[item.last_status ?? ""] ?? "default"} text={item.last_status ?? "无记录"} />
|
||||
<span style={{ fontSize: 12, color: "#999" }}>{fmtTime(item.last_call_at)}</span>
|
||||
</Space>
|
||||
</div>
|
||||
))}
|
||||
{(data?.app_health ?? []).length === 0 && <span style={{ color: "#999" }}>暂无数据</span>}
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 第四行：告警列表 */}
|
||||
<Card title="告警列表" size="small">
|
||||
<Table<AlertItem>
|
||||
columns={alertColumns}
|
||||
dataSource={data?.recent_alerts ?? []}
|
||||
rowKey="id" size="small" pagination={{ pageSize: 10 }}
|
||||
loading={loading}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AIDashboard;
|
||||
Reference in New Issue
Block a user