MiMo AI 能力扩展：TAF解读、概率分布解读、异常检测、市场概览
AI 解读字段扩展:
- 新增 taf_read_zh/en：解读机场预报中影响今日峰值窗口的变化
- 新增 probability_read_zh/en：描述概率分布形态（最高桶、偏左/偏右）
- stream max_tokens 900→1200 容纳新输出字段
- 缓存 key 简化为 METAR原文+观测时间，大幅提升命中率
- 兜底函数补全 TAF 和概率字段的确定性生成
异常检测:
- 纯数学计算，零 AI 延迟：实测温度 vs 全部模型预测上下限
- 三级告警：breakout_above / breakout_below / deviation
市场概览:
- 新增 POST /api/scan/terminal/overview（MiMo 批量解读，缓存10分钟）
- 前端 MarketOverviewBanner 可折叠横幅（顶栏与标签栏之间）
- 移动端适配 640px/768px 断点，暗色/亮色双主题
Scope-risk: MEDIUM — 170 测试通过，TypeScript 零错误，ruff 零告警
Tested: python -m pytest -q (170 passed), npx tsc --noEmit (0 errors), ruff check .
This commit is contained in:
2569718930@qq.com
@@ -46,6 +46,14 @@ import {
|
||||
useUserLocalClock,
|
||||
} from "@/components/dashboard/scan-terminal/use-scan-terminal-ui-state";
|
||||
import { useRelativeTime } from "@/hooks/useRelativeTime";
|
||||
const MarketOverviewBanner = dynamic(
|
||||
() =>
|
||||
import(
|
||||
"@/components/dashboard/scan-terminal/MarketOverviewBanner"
|
||||
).then((m) => m.MarketOverviewBanner),
|
||||
{ ssr: false },
|
||||
);
|
||||
|
||||
const MonitorPanel = dynamic(
|
||||
() => import("@/components/dashboard/monitoring/MonitorPanel"),
|
||||
{ ssr: false },
|
||||
@@ -423,6 +431,12 @@ function ScanTerminalScreen() {
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<MarketOverviewBanner
|
||||
isEn={isEn}
|
||||
isPro={isPro}
|
||||
rows={timeSortedRows}
|
||||
/>
|
||||
|
||||
<section className="scan-list-section">
|
||||
<div className="scan-list-header">
|
||||
<div className="scan-list-tabs" role="tablist" aria-label={isEn ? "Content view" : "内容视图"}>
|
||||
|
||||
@@ -0,0 +1,192 @@
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--color-border-default, rgba(159, 178, 199, 0.16));
|
||||
border-radius: var(--radius-md, 10px);
|
||||
background: var(--color-bg-card, rgba(17, 26, 46, 0.88));
|
||||
backdrop-filter: var(--glass-blur-1, blur(10px));
|
||||
margin: 0 0 var(--space-3, 12px) 0;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.root.loading {
|
||||
opacity: 0.7;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary, #9FB2C7);
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: var(--color-accent-primary, #4DA3FF);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-text-primary, #E6EDF3);
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header:hover {
|
||||
background: rgba(77, 163, 255, 0.04);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: var(--color-accent-primary, #4DA3FF);
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.03em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preview {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text-secondary, #9FB2C7);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
flex-shrink: 0;
|
||||
color: var(--color-text-muted, #7D8FA3);
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 0 14px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
color: var(--color-text-primary, #E6EDF3);
|
||||
}
|
||||
|
||||
.highlights {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.highlightItem {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 5px;
|
||||
padding: 5px 10px;
|
||||
border-radius: var(--radius-sm, 6px);
|
||||
background: rgba(77, 163, 255, 0.08);
|
||||
border: 1px solid rgba(77, 163, 255, 0.14);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: var(--color-text-secondary, #9FB2C7);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.highlightItem strong {
|
||||
color: var(--color-accent-primary, #4DA3FF);
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-muted, #7D8FA3);
|
||||
}
|
||||
|
||||
/* Mobile < 768px */
|
||||
@media (max-width: 768px) {
|
||||
.header {
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.highlights {
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.highlightItem {
|
||||
font-size: 11px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile < 640px */
|
||||
@media (max-width: 640px) {
|
||||
.header {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 0 8px 8px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
font-size: 11px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
}
|
||||
|
||||
/* Light theme */
|
||||
:global(.scan-terminal.light) .root {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border-color: rgba(15, 23, 42, 0.1);
|
||||
}
|
||||
|
||||
:global(.scan-terminal.light) .summary {
|
||||
color: #0F172A;
|
||||
}
|
||||
|
||||
:global(.scan-terminal.light) .preview,
|
||||
:global(.scan-terminal.light) .highlightItem {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
:global(.scan-terminal.light) .highlightItem {
|
||||
background: rgba(77, 163, 255, 0.06);
|
||||
border-color: rgba(77, 163, 255, 0.18);
|
||||
}
|
||||
|
||||
:global(.scan-terminal.light) .header:hover {
|
||||
background: rgba(77, 163, 255, 0.05);
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
"use client";
|
||||
|
||||
import clsx from "clsx";
|
||||
import { ChevronDown, ChevronUp, Sparkles } from "lucide-react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
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 resp = await fetch("/api/scan/terminal/overview", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
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.badge}>
|
||||
<Sparkles size={13} />
|
||||
{isEn ? "AI Overview" : "AI 概览"}
|
||||
</span>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user