322 lines
14 KiB
TypeScript
322 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { ExternalLink, RefreshCcw, Search, TrendingUp } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { opsApi } from "@/lib/ops-api";
|
|
|
|
type MarketOpportunityRow = {
|
|
id?: string;
|
|
city?: string;
|
|
display_name?: string;
|
|
target_date?: string;
|
|
bucket_label?: string;
|
|
side?: string;
|
|
ask_price?: number;
|
|
model_probability?: number;
|
|
edge?: number;
|
|
liquidity?: number | null;
|
|
volume?: number | null;
|
|
market_url?: string;
|
|
current_max_so_far?: number | null;
|
|
deb_prediction?: number | null;
|
|
model_median?: number | null;
|
|
model_spread?: number | null;
|
|
local_time?: string;
|
|
region?: string;
|
|
};
|
|
|
|
type MarketOpportunitiesPayload = {
|
|
generated_at?: string;
|
|
summary?: {
|
|
opportunity_count?: number;
|
|
positive_edge_count?: number;
|
|
min_price?: number | null;
|
|
max_edge?: number | null;
|
|
quote_status?: string;
|
|
scanned_city_count?: number;
|
|
matched_event_count?: number;
|
|
error?: string | null;
|
|
};
|
|
rows?: MarketOpportunityRow[];
|
|
};
|
|
|
|
function percent(value?: number | null) {
|
|
if (typeof value !== "number" || !Number.isFinite(value)) return "—";
|
|
return `${Math.round(value * 100)}%`;
|
|
}
|
|
|
|
function cents(value?: number | null) {
|
|
if (typeof value !== "number" || !Number.isFinite(value)) return "—";
|
|
return `${(value * 100).toFixed(value * 100 < 1 ? 1 : 0)}¢`;
|
|
}
|
|
|
|
function numberLabel(value?: number | null) {
|
|
if (typeof value !== "number" || !Number.isFinite(value)) return "—";
|
|
if (Math.abs(value) >= 1000) return value.toLocaleString(undefined, { maximumFractionDigits: 0 });
|
|
return value.toFixed(1);
|
|
}
|
|
|
|
function tempLabel(value?: number | null) {
|
|
if (typeof value !== "number" || !Number.isFinite(value)) return "—";
|
|
return value.toFixed(1);
|
|
}
|
|
|
|
function generatedLabel(value?: string) {
|
|
if (!value) return "—";
|
|
return value.slice(0, 19).replace("T", " ");
|
|
}
|
|
|
|
function sideTone(side?: string) {
|
|
return String(side).toLowerCase() === "no"
|
|
? "border-red-200 bg-red-50 text-red-700"
|
|
: "border-emerald-200 bg-emerald-50 text-emerald-700";
|
|
}
|
|
|
|
function Stat({
|
|
label,
|
|
value,
|
|
sub,
|
|
}: {
|
|
label: string;
|
|
value: string | number;
|
|
sub: string;
|
|
}) {
|
|
return (
|
|
<div className="rounded-lg border border-slate-200 bg-white px-4 py-3 shadow-sm">
|
|
<div className="text-xs font-bold uppercase tracking-wide text-slate-500">{label}</div>
|
|
<div className="mt-1 text-2xl font-black text-slate-950">{value}</div>
|
|
<div className="mt-1 text-xs text-slate-500">{sub}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function MarketOpportunitiesPageClient() {
|
|
const [payload, setPayload] = useState<MarketOpportunitiesPayload | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
const [query, setQuery] = useState("");
|
|
const [side, setSide] = useState("both");
|
|
const [maxPrice, setMaxPrice] = useState("0.20");
|
|
const [minEdge, setMinEdge] = useState("0");
|
|
const [showAllLowPrice, setShowAllLowPrice] = useState(false);
|
|
|
|
const positive_edge_only = !showAllLowPrice;
|
|
|
|
const load = async () => {
|
|
setLoading(true);
|
|
setError("");
|
|
try {
|
|
const data = await opsApi.marketOpportunities({
|
|
q: query.trim(),
|
|
side,
|
|
max_price: maxPrice,
|
|
min_edge: showAllLowPrice ? "-1" : minEdge,
|
|
positive_edge_only,
|
|
limit: 200,
|
|
});
|
|
setPayload(data as MarketOpportunitiesPayload);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "加载市场机会失败");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [side, showAllLowPrice]);
|
|
|
|
const rows = useMemo(() => payload?.rows ?? [], [payload]);
|
|
const summary = payload?.summary ?? {};
|
|
const quoteStatus = summary.quote_status || "unknown";
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<h1 className="flex items-center gap-2 text-2xl font-bold text-white">
|
|
<TrendingUp className="h-5 w-5 text-blue-300" />
|
|
市场机会
|
|
</h1>
|
|
<p className="mt-1 text-sm text-slate-300">
|
|
仅 Ops 内部使用，按价格上限扫描 Yes/No 选项，并按模型概率与市场价格差排序。
|
|
</p>
|
|
</div>
|
|
<Button variant="outline" size="sm" onClick={load} className="gap-1.5">
|
|
<RefreshCcw className="h-3.5 w-3.5" /> 刷新
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3 md:grid-cols-5">
|
|
<Stat label="机会数" value={summary.opportunity_count ?? rows.length} sub="当前筛选结果" />
|
|
<Stat label="正边际" value={summary.positive_edge_count ?? 0} sub="模型概率高于买入价" />
|
|
<Stat label="最低价格" value={cents(summary.min_price)} sub="低价合约下限" />
|
|
<Stat label="最大 Edge" value={percent(summary.max_edge)} sub="模型概率 - 市场价" />
|
|
<Stat label="报价状态" value={quoteStatus} sub={`${summary.matched_event_count ?? 0}/${summary.scanned_city_count ?? 0} 城市匹配`} />
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader className="gap-3">
|
|
<CardTitle>低价选项扫描</CardTitle>
|
|
<div className="grid items-end gap-2 md:grid-cols-[minmax(180px,1fr)_120px_132px_132px_auto]">
|
|
<label className="relative block">
|
|
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
|
<input
|
|
value={query}
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") void load();
|
|
}}
|
|
className="h-9 w-full rounded-md border border-slate-300 bg-white pl-8 pr-3 text-sm font-semibold text-slate-800 outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
|
|
placeholder="搜索城市或选项"
|
|
/>
|
|
</label>
|
|
<label className="block">
|
|
<span className="sr-only">方向</span>
|
|
<select
|
|
value={side}
|
|
onChange={(event) => setSide(event.target.value)}
|
|
className="h-9 w-full rounded-md border border-slate-300 bg-white px-2 text-sm font-semibold text-slate-700"
|
|
>
|
|
<option value="both">Yes / No</option>
|
|
<option value="yes">仅 Yes</option>
|
|
<option value="no">仅 No</option>
|
|
</select>
|
|
</label>
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] font-black uppercase tracking-wide text-slate-500">
|
|
最高买入价
|
|
</span>
|
|
<input
|
|
value={maxPrice}
|
|
onChange={(event) => setMaxPrice(event.target.value)}
|
|
className="h-9 w-full rounded-md border border-slate-300 bg-white px-2 text-sm font-semibold text-slate-700"
|
|
inputMode="decimal"
|
|
aria-label="最高买入价"
|
|
/>
|
|
</label>
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] font-black uppercase tracking-wide text-slate-500">
|
|
最小 Edge
|
|
</span>
|
|
<input
|
|
value={minEdge}
|
|
onChange={(event) => setMinEdge(event.target.value)}
|
|
className="h-9 w-full rounded-md border border-slate-300 bg-white px-2 text-sm font-semibold text-slate-700"
|
|
inputMode="decimal"
|
|
aria-label="最小 Edge"
|
|
/>
|
|
</label>
|
|
<Button variant="outline" size="sm" onClick={load}>
|
|
应用筛选
|
|
</Button>
|
|
</div>
|
|
<label className="flex w-fit items-center gap-2 text-sm font-semibold text-slate-600">
|
|
<input
|
|
type="checkbox"
|
|
checked={showAllLowPrice}
|
|
onChange={(event) => setShowAllLowPrice(event.target.checked)}
|
|
className="h-4 w-4 rounded border-slate-300"
|
|
/>
|
|
显示全部低价
|
|
</label>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{error ? (
|
|
<div className="mb-3 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm font-semibold text-red-700">
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
{summary.error ? (
|
|
<div className="mb-3 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm font-semibold text-amber-700">
|
|
报价不可用：{summary.error}
|
|
</div>
|
|
) : null}
|
|
<div className="overflow-x-auto rounded-lg border border-slate-200">
|
|
<table className="min-w-[1320px] w-full border-collapse text-sm">
|
|
<thead className="bg-slate-50 text-left text-xs font-black uppercase tracking-wide text-slate-500">
|
|
<tr>
|
|
<th className="px-3 py-2">城市</th>
|
|
<th className="px-3 py-2">选项</th>
|
|
<th className="px-3 py-2">方向</th>
|
|
<th className="px-3 py-2 text-right">买入价</th>
|
|
<th className="px-3 py-2 text-right">模型概率</th>
|
|
<th className="px-3 py-2 text-right">Edge</th>
|
|
<th className="px-3 py-2 text-right">当前最高</th>
|
|
<th className="px-3 py-2 text-right">DEB</th>
|
|
<th className="px-3 py-2 text-right">模型中位数</th>
|
|
<th className="px-3 py-2 text-right">分歧</th>
|
|
<th className="px-3 py-2 text-right">流动性</th>
|
|
<th className="px-3 py-2 text-right">成交量</th>
|
|
<th className="px-3 py-2">市场链接</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100 bg-white">
|
|
{loading ? (
|
|
<tr>
|
|
<td colSpan={13} className="px-3 py-10 text-center text-sm font-semibold text-slate-400">
|
|
加载中...
|
|
</td>
|
|
</tr>
|
|
) : rows.length ? (
|
|
rows.map((row) => (
|
|
<tr key={row.id || `${row.city}-${row.bucket_label}-${row.side}`} className="hover:bg-blue-50/40">
|
|
<td className="px-3 py-2 font-black text-slate-900">
|
|
<div>{row.display_name || row.city || "—"}</div>
|
|
<div className="mt-0.5 text-[11px] font-semibold text-slate-400">
|
|
{row.local_time || "—"} · {row.target_date || "—"}
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-2 font-bold text-slate-800">{row.bucket_label || "—"}</td>
|
|
<td className="px-3 py-2">
|
|
<span className={`inline-flex min-w-10 justify-center rounded-md border px-2 py-1 text-xs font-black uppercase ${sideTone(row.side)}`}>
|
|
{row.side || "—"}
|
|
</span>
|
|
</td>
|
|
<td className="px-3 py-2 text-right font-black text-slate-950">{cents(row.ask_price)}</td>
|
|
<td className="px-3 py-2 text-right font-bold text-blue-700">{percent(row.model_probability)}</td>
|
|
<td className="px-3 py-2 text-right font-black text-emerald-700">{percent(row.edge)}</td>
|
|
<td className="px-3 py-2 text-right font-semibold text-slate-700">{tempLabel(row.current_max_so_far)}</td>
|
|
<td className="px-3 py-2 text-right font-semibold text-orange-700">{tempLabel(row.deb_prediction)}</td>
|
|
<td className="px-3 py-2 text-right font-semibold text-slate-700">{tempLabel(row.model_median)}</td>
|
|
<td className="px-3 py-2 text-right font-semibold text-slate-700">{tempLabel(row.model_spread)}</td>
|
|
<td className="px-3 py-2 text-right text-slate-600">{numberLabel(row.liquidity)}</td>
|
|
<td className="px-3 py-2 text-right text-slate-600">{numberLabel(row.volume)}</td>
|
|
<td className="px-3 py-2">
|
|
{row.market_url ? (
|
|
<a
|
|
href={row.market_url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center gap-1 text-xs font-black text-blue-700 hover:text-blue-900"
|
|
>
|
|
打开 <ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
) : (
|
|
<span className="text-slate-400">—</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan={13} className="px-3 py-10 text-center text-sm font-semibold text-slate-400">
|
|
当前筛选下没有低价市场机会。
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="mt-3 text-xs font-semibold text-slate-400">
|
|
生成时间：{generatedLabel(payload?.generated_at)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|