63 lines
2.4 KiB
TypeScript
63 lines
2.4 KiB
TypeScript
import Link from "next/link";
|
||
|
||
import { CandlesChart } from "@/src/components/charts/CandlesChart";
|
||
import { mockGetDailyOhlcv, mockGetQuote } from "@/src/market/providers/mockProvider";
|
||
|
||
export default async function StockPage({
|
||
params,
|
||
}: {
|
||
params: Promise<{ code: string }>;
|
||
}) {
|
||
const { code } = await params;
|
||
|
||
const bars = mockGetDailyOhlcv(code, 200);
|
||
const quote = mockGetQuote(code);
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between gap-4">
|
||
<div>
|
||
<div className="text-xs text-black/60 dark:text-white/60">个股</div>
|
||
<h1 className="text-xl font-semibold">
|
||
<span className="font-mono">{code}</span>
|
||
</h1>
|
||
</div>
|
||
<Link
|
||
href="/watchlist"
|
||
className="rounded-lg border border-black/10 px-3 py-2 text-xs transition-colors hover:bg-black/[.04] dark:border-white/10 dark:hover:bg-white/[.06]"
|
||
>
|
||
返回自选股
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="grid gap-3 md:grid-cols-3">
|
||
<div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
|
||
<div className="text-xs text-black/60 dark:text-white/60">最新价</div>
|
||
<div className="mt-1 text-lg font-semibold">{quote.price.toFixed(2)}</div>
|
||
</div>
|
||
<div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
|
||
<div className="text-xs text-black/60 dark:text-white/60">涨跌幅</div>
|
||
<div className="mt-1 text-lg font-semibold">
|
||
{quote.changePct != null ? `${quote.changePct.toFixed(2)}%` : "-"}
|
||
</div>
|
||
</div>
|
||
<div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
|
||
<div className="text-xs text-black/60 dark:text-white/60">更新时间</div>
|
||
<div className="mt-1 text-sm">{new Date(quote.asOf).toLocaleString()}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
|
||
<div className="text-sm font-medium">日线K线（Mock 数据）</div>
|
||
<div className="mt-3">
|
||
<CandlesChart bars={bars} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="text-xs text-black/60 dark:text-white/60">
|
||
注：当前为 Mock 行情。后续 M2 会替换为真实数据源（Next Route Handler 代理）。
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|