229 lines
7.9 KiB
TypeScript
229 lines
7.9 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import ReactECharts from "echarts-for-react";
|
||
|
||
type OverviewResponse = {
|
||
schema: any;
|
||
metrics: Record<string, any>;
|
||
};
|
||
|
||
type Winner = {
|
||
product_id: string;
|
||
title?: string | null;
|
||
category?: string | null;
|
||
units?: number;
|
||
gmv?: number;
|
||
potential_score?: number;
|
||
burst_score?: number;
|
||
follow_score?: number;
|
||
lifecycle?: string;
|
||
};
|
||
|
||
async function getJSON<T>(path: string): Promise<T> {
|
||
const r = await fetch(path, { cache: "no-store" });
|
||
if (!r.ok) throw new Error(await r.text());
|
||
return (await r.json()) as T;
|
||
}
|
||
|
||
async function postJSON<T>(path: string, body: any): Promise<T> {
|
||
const r = await fetch(path, {
|
||
method: "POST",
|
||
headers: { "content-type": "application/json" },
|
||
body: JSON.stringify(body)
|
||
});
|
||
if (!r.ok) throw new Error(await r.text());
|
||
return (await r.json()) as T;
|
||
}
|
||
|
||
export default function Dashboard() {
|
||
const [overview, setOverview] = React.useState<OverviewResponse | null>(null);
|
||
const [winners, setWinners] = React.useState<Winner[]>([]);
|
||
const [productId, setProductId] = React.useState("");
|
||
const [series, setSeries] = React.useState<{ ds: string; units: number; gmv: number }[]>([]);
|
||
const [forecast, setForecast] = React.useState<{ ds: string; units_hat: number }[]>([]);
|
||
const [aiQuery, setAiQuery] = React.useState("给我当前最值得跟卖的3个品类/商品，并说明理由与风险。");
|
||
const [aiAnswer, setAiAnswer] = React.useState<string>("");
|
||
const [err, setErr] = React.useState<string>("");
|
||
|
||
React.useEffect(() => {
|
||
(async () => {
|
||
try {
|
||
const o = await getJSON<OverviewResponse>("/api/metrics/overview");
|
||
setOverview(o);
|
||
const w = await getJSON<{ items: Winner[] }>("/api/trend/potential-winners?days=14&limit=30");
|
||
setWinners(w.items);
|
||
} catch (e: any) {
|
||
setErr(String(e?.message || e));
|
||
}
|
||
})();
|
||
}, []);
|
||
|
||
async function loadProduct(p: string) {
|
||
setErr("");
|
||
if (!p.trim()) {
|
||
setErr("请输入 product_id（不能为空）");
|
||
return;
|
||
}
|
||
try {
|
||
const ts = await getJSON<{ product_id: string; points: any[] }>(
|
||
`/api/metrics/sales/timeseries?product_id=${encodeURIComponent(p)}&days=60`
|
||
);
|
||
setSeries(ts.points as any);
|
||
const fc = await getJSON<{ forecast: any[] }>(
|
||
`/api/trend/forecast?product_id=${encodeURIComponent(p)}&days=60&horizon=14`
|
||
);
|
||
setForecast(fc.forecast as any);
|
||
} catch (e: any) {
|
||
setErr(String(e?.message || e));
|
||
}
|
||
}
|
||
|
||
async function runAI() {
|
||
setErr("");
|
||
try {
|
||
const r = await postJSON<{ answer: string }>("/api/ai/insight", {
|
||
query: aiQuery,
|
||
product_id: productId || undefined,
|
||
top_k: 6
|
||
});
|
||
setAiAnswer(r.answer || "");
|
||
} catch (e: any) {
|
||
setErr(String(e?.message || e));
|
||
}
|
||
}
|
||
|
||
const chartOption = {
|
||
tooltip: { trigger: "axis" },
|
||
legend: { data: ["units", "gmv", "forecast_units"] },
|
||
xAxis: { type: "category", data: series.map((p) => p.ds.slice(0, 10)) },
|
||
yAxis: [{ type: "value" }, { type: "value" }],
|
||
series: [
|
||
{ name: "units", type: "line", smooth: true, data: series.map((p) => p.units) },
|
||
{ name: "gmv", type: "line", smooth: true, yAxisIndex: 1, data: series.map((p) => p.gmv) },
|
||
{
|
||
name: "forecast_units",
|
||
type: "line",
|
||
smooth: true,
|
||
lineStyle: { type: "dashed" },
|
||
data: new Array(Math.max(0, series.length - 1)).fill(null).concat(forecast.map((f) => f.units_hat))
|
||
}
|
||
]
|
||
};
|
||
|
||
return (
|
||
<div style={{ padding: 18, maxWidth: 1200, margin: "0 auto" }}>
|
||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
|
||
<h2 style={{ margin: 0 }}>爆款闭环 BI 看板</h2>
|
||
<div />
|
||
</div>
|
||
|
||
{err ? (
|
||
<pre style={{ background: "#fff2f0", border: "1px solid #ffccc7", padding: 12, whiteSpace: "pre-wrap" }}>
|
||
{err}
|
||
</pre>
|
||
) : null}
|
||
|
||
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginTop: 16 }}>
|
||
<Card title="产品数">{overview?.metrics?.products ?? "-"}</Card>
|
||
<Card title="近30天销量">{overview?.metrics?.units_30d ?? "-"}</Card>
|
||
<Card title="近30天GMV">{overview?.metrics?.gmv_30d ?? "-"}</Card>
|
||
<Card title="近30天记录数">{overview?.metrics?.rows_30d ?? "-"}</Card>
|
||
</div>
|
||
|
||
<div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 12, marginTop: 16 }}>
|
||
<div style={{ border: "1px solid #eee", borderRadius: 10, padding: 12 }}>
|
||
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
|
||
<strong>实时曲线 + 趋势预测</strong>
|
||
<input
|
||
value={productId}
|
||
onChange={(e) => setProductId(e.target.value)}
|
||
placeholder="输入 product_id"
|
||
style={{ flex: 1, padding: "8px 10px", borderRadius: 8, border: "1px solid #ddd" }}
|
||
/>
|
||
<button onClick={() => loadProduct(productId)} style={btn}>
|
||
加载
|
||
</button>
|
||
</div>
|
||
<div style={{ marginTop: 12 }}>
|
||
<ReactECharts option={chartOption} style={{ height: 320 }} />
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ border: "1px solid #eee", borderRadius: 10, padding: 12 }}>
|
||
<strong>发现爆款（Potential Winners）</strong>
|
||
<div style={{ marginTop: 10, maxHeight: 360, overflow: "auto" }}>
|
||
{winners.map((w) => (
|
||
<div
|
||
key={w.product_id}
|
||
style={{
|
||
padding: "10px 10px",
|
||
border: "1px solid #f0f0f0",
|
||
borderRadius: 10,
|
||
marginBottom: 10,
|
||
cursor: "pointer"
|
||
}}
|
||
onClick={() => {
|
||
setProductId(w.product_id);
|
||
loadProduct(w.product_id);
|
||
}}
|
||
>
|
||
<div style={{ display: "flex", justifyContent: "space-between", gap: 10 }}>
|
||
<div style={{ fontWeight: 600 }}>{w.title || w.product_id}</div>
|
||
<div style={{ fontSize: 12, opacity: 0.8 }}>{w.lifecycle}</div>
|
||
</div>
|
||
<div style={{ fontSize: 12, opacity: 0.85, marginTop: 6 }}>
|
||
units={fmt(w.units)} gmv={fmt(w.gmv)} · potential={fmt(w.potential_score)} · burst={fmt(w.burst_score)} ·
|
||
follow={fmt(w.follow_score)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ border: "1px solid #eee", borderRadius: 10, padding: 12, marginTop: 16 }}>
|
||
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
|
||
<strong>AI 分析与决策辅助</strong>
|
||
<button onClick={runAI} style={btn}>
|
||
生成建议
|
||
</button>
|
||
</div>
|
||
<textarea
|
||
value={aiQuery}
|
||
onChange={(e) => setAiQuery(e.target.value)}
|
||
rows={3}
|
||
style={{ width: "100%", marginTop: 10, padding: 10, borderRadius: 10, border: "1px solid #ddd" }}
|
||
/>
|
||
<pre style={{ marginTop: 10, background: "#0b1220", color: "#e6edf3", padding: 12, borderRadius: 10, whiteSpace: "pre-wrap" }}>
|
||
{aiAnswer || "（未生成）"}
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Card({ title, children }: { title: string; children: React.ReactNode }) {
|
||
return (
|
||
<div style={{ border: "1px solid #eee", borderRadius: 10, padding: 12 }}>
|
||
<div style={{ fontSize: 12, opacity: 0.75 }}>{title}</div>
|
||
<div style={{ fontSize: 20, fontWeight: 700, marginTop: 6 }}>{children}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const btn: React.CSSProperties = {
|
||
padding: "8px 12px",
|
||
borderRadius: 10,
|
||
border: "1px solid #ddd",
|
||
background: "#fff",
|
||
cursor: "pointer"
|
||
};
|
||
|
||
function fmt(v: any) {
|
||
if (v === null || v === undefined) return "-";
|
||
if (typeof v === "number") return Number.isFinite(v) ? v.toFixed(3).replace(/\.?0+$/, "") : "-";
|
||
return String(v);
|
||
}
|
||
|