2569718930@qq.com
133 lines
4.2 KiB
TypeScript
133 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import clsx from "clsx";
|
|
import { ChevronDown, ChevronUp, Sparkles } from "lucide-react";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { fetchBackendApi, buildBrowserBackendHeaders } from "@/lib/backend-api";
|
|
import styles from "./MarketOverviewBanner.module.css";
|
|
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
|
|
interface OverviewPayload {
|
|
overview_zh: string;
|
|
overview_en: string;
|
|
highlights: Array<{ city: string; note_zh: string; note_en: string }>;
|
|
generated_at: string | null;
|
|
}
|
|
|
|
export function MarketOverviewBanner({
|
|
isEn,
|
|
isPro,
|
|
rows,
|
|
}: {
|
|
isEn: boolean;
|
|
isPro: boolean;
|
|
rows: ScanOpportunityRow[];
|
|
}) {
|
|
const [collapsed, setCollapsed] = useState(true);
|
|
const [data, setData] = useState<OverviewPayload | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState(false);
|
|
const fetchedRef = useRef(false);
|
|
|
|
const fetchOverview = useCallback(async () => {
|
|
if (!isPro || !rows.length || fetchedRef.current) return;
|
|
fetchedRef.current = true;
|
|
setLoading(true);
|
|
setError(false);
|
|
try {
|
|
const headers = await buildBrowserBackendHeaders({
|
|
"Content-Type": "application/json",
|
|
});
|
|
const resp = await fetchBackendApi("/api/scan/terminal/overview", {
|
|
method: "POST",
|
|
headers,
|
|
body: JSON.stringify({
|
|
rows: rows.slice(0, 40).map((row) => ({
|
|
city: row.city ?? row.display_name ?? "",
|
|
display_name: row.display_name ?? row.city ?? "",
|
|
local_date: row.local_date ?? "",
|
|
deb_prediction: row.deb_prediction ?? null,
|
|
current_temp: row.current_temp ?? null,
|
|
current_max_so_far: row.current_max_so_far ?? null,
|
|
risk_level: row.risk_level ?? "",
|
|
temp_symbol: row.temp_symbol ?? "°C",
|
|
})),
|
|
}),
|
|
});
|
|
if (resp.ok) {
|
|
const json = await resp.json();
|
|
setData(json);
|
|
} else {
|
|
setError(true);
|
|
}
|
|
} catch {
|
|
setError(true);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [isPro, rows]);
|
|
|
|
useEffect(() => {
|
|
if (isPro && rows.length > 0 && !fetchedRef.current) {
|
|
fetchOverview();
|
|
}
|
|
}, [isPro, rows.length, fetchOverview]);
|
|
|
|
if (!isPro || rows.length === 0) return null;
|
|
if (loading && !data) {
|
|
return (
|
|
<div className={clsx(styles.root, styles.loading)}>
|
|
<Sparkles size={14} className={styles.icon} />
|
|
<span>{isEn ? "AI is generating market overview…" : "AI 正在生成市场概览…"}</span>
|
|
</div>
|
|
);
|
|
}
|
|
if (error && !data) return null;
|
|
|
|
const overviewText = data ? (isEn ? data.overview_en : data.overview_zh) : "";
|
|
const highlights = data?.highlights ?? [];
|
|
|
|
return (
|
|
<div className={clsx(styles.root, collapsed && styles.collapsed)}>
|
|
<button
|
|
type="button"
|
|
className={styles.header}
|
|
onClick={() => setCollapsed((c) => !c)}
|
|
aria-label={isEn ? "Toggle market overview" : "切换市场概览"}
|
|
>
|
|
<span className={styles.preview}>
|
|
{collapsed && overviewText ? overviewText.slice(0, isEn ? 120 : 60) + "…" : ""}
|
|
</span>
|
|
<span className={styles.toggle}>
|
|
{collapsed ? <ChevronDown size={16} /> : <ChevronUp size={16} />}
|
|
</span>
|
|
</button>
|
|
|
|
{!collapsed && (
|
|
<div className={styles.body}>
|
|
<p className={styles.summary}>{overviewText}</p>
|
|
{highlights.length > 0 && (
|
|
<ul className={styles.highlights}>
|
|
{highlights.map((h) => (
|
|
<li key={h.city} className={styles.highlightItem}>
|
|
<strong>{h.city}</strong>
|
|
<span>{isEn ? h.note_en : h.note_zh}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{data?.generated_at && (
|
|
<time className={styles.time} dateTime={data.generated_at}>
|
|
{isEn ? "Generated " : "生成于 "}
|
|
{new Date(data.generated_at).toLocaleTimeString(isEn ? "en-US" : "zh-CN", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</time>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|