215 lines
8.8 KiB
TypeScript
215 lines
8.8 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useMemo } from "react";
|
||
|
||
import type { RecommendationSegment } from "@/src/recommendations/types";
|
||
import { useImportedPoolStore } from "@/src/stores/importedPoolStore";
|
||
import { useRecommendationsStore } from "@/src/stores/recommendationsStore";
|
||
|
||
const segmentOptions: { value: RecommendationSegment; label: string }[] = [
|
||
{ value: "OPEN_AUCTION", label: "集合竞价" },
|
||
{ value: "MIDDAY", label: "午盘精选" },
|
||
{ value: "AFTER_HOURS", label: "盘后分析" },
|
||
];
|
||
|
||
export default function RecommendationsPage() {
|
||
const codesText = useImportedPoolStore((s) => s.codesText);
|
||
const poolLoading = useImportedPoolStore((s) => s.loading);
|
||
const poolError = useImportedPoolStore((s) => s.error);
|
||
const loadPool = useImportedPoolStore((s) => s.load);
|
||
const savePool = useImportedPoolStore((s) => s.save);
|
||
const setPoolDraft = useImportedPoolStore((s) => s.setDraft);
|
||
|
||
const date = useRecommendationsStore((s) => s.date);
|
||
const segment = useRecommendationsStore((s) => s.segment);
|
||
const recLoading = useRecommendationsStore((s) => s.loading);
|
||
const recError = useRecommendationsStore((s) => s.error);
|
||
const snapshot = useRecommendationsStore((s) => s.snapshot);
|
||
const setDate = useRecommendationsStore((s) => s.setDate);
|
||
const setSegment = useRecommendationsStore((s) => s.setSegment);
|
||
const loadRec = useRecommendationsStore((s) => s.load);
|
||
const generate = useRecommendationsStore((s) => s.generate);
|
||
|
||
useEffect(() => {
|
||
void loadPool();
|
||
}, [loadPool]);
|
||
|
||
useEffect(() => {
|
||
void loadRec();
|
||
}, [date, segment, loadRec]);
|
||
|
||
const selectedSegmentLabel = useMemo(() => {
|
||
return segmentOptions.find((x) => x.value === segment)?.label ?? segment;
|
||
}, [segment]);
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h1 className="text-xl font-semibold">每日推荐</h1>
|
||
<p className="mt-1 text-sm text-black/60 dark:text-white/60">
|
||
MVP：自选股 + 导入池 作为 Universe，规则 v0.1（突破+均线趋势），每段 Top 10。
|
||
</p>
|
||
</div>
|
||
|
||
<section className="rounded-xl border border-black/10 p-4 dark:border-white/10">
|
||
<div className="grid gap-3 md:grid-cols-12">
|
||
<label className="md:col-span-3">
|
||
<div className="text-xs text-black/60 dark:text-white/60">日期</div>
|
||
<input
|
||
type="date"
|
||
value={date}
|
||
onChange={(e) => setDate(e.target.value)}
|
||
className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
|
||
/>
|
||
</label>
|
||
|
||
<label className="md:col-span-3">
|
||
<div className="text-xs text-black/60 dark:text-white/60">时段</div>
|
||
<select
|
||
value={segment}
|
||
onChange={(e) => setSegment(e.target.value as RecommendationSegment)}
|
||
className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
|
||
>
|
||
{segmentOptions.map((opt) => (
|
||
<option key={opt.value} value={opt.value}>
|
||
{opt.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
|
||
<div className="flex items-end md:col-span-3">
|
||
<button
|
||
type="button"
|
||
disabled={recLoading}
|
||
onClick={() => void loadRec()}
|
||
className="w-full rounded-lg border border-black/10 px-3 py-2 text-sm transition-colors hover:bg-black/[.04] disabled:opacity-50 dark:border-white/10 dark:hover:bg-white/[.06]"
|
||
>
|
||
读取快照
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex items-end md:col-span-3">
|
||
<button
|
||
type="button"
|
||
disabled={recLoading}
|
||
onClick={async () => {
|
||
// save pool first (so generated snapshot is reproducible)
|
||
await savePool();
|
||
await generate(codesText);
|
||
}}
|
||
className="w-full rounded-lg bg-black px-3 py-2 text-sm font-medium text-white transition-opacity disabled:opacity-50 dark:bg-white dark:text-black"
|
||
>
|
||
生成 {selectedSegmentLabel}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{(poolError || recError) ? (
|
||
<div className="mt-3 text-sm text-red-600 dark:text-red-400">
|
||
{poolError ?? recError}
|
||
</div>
|
||
) : null}
|
||
|
||
{(poolLoading || recLoading) ? (
|
||
<div className="mt-3 text-xs text-black/60 dark:text-white/60">加载中…</div>
|
||
) : null}
|
||
</section>
|
||
|
||
<section className="rounded-xl border border-black/10 p-4 dark:border-white/10">
|
||
<div className="text-sm font-medium">导入池（Universe 扩展）</div>
|
||
<p className="mt-1 text-xs text-black/60 dark:text-white/60">
|
||
每行一个代码：支持 600519 或 SH:600519 / SZ:000001 / BJ:8xxxxx。空行会忽略。
|
||
</p>
|
||
|
||
<textarea
|
||
value={codesText}
|
||
onChange={(e) => setPoolDraft(e.target.value)}
|
||
rows={6}
|
||
className="mt-3 w-full rounded-lg border border-black/10 bg-white px-3 py-2 font-mono text-xs outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
|
||
/>
|
||
|
||
<div className="mt-3 flex justify-end">
|
||
<button
|
||
type="button"
|
||
disabled={poolLoading}
|
||
onClick={() => void savePool()}
|
||
className="rounded-lg border border-black/10 px-3 py-2 text-xs transition-colors hover:bg-black/[.04] disabled:opacity-50 dark:border-white/10 dark:hover:bg-white/[.06]"
|
||
>
|
||
保存导入池
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="rounded-xl border border-black/10 p-4 dark:border-white/10">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div className="text-sm font-medium">推荐结果</div>
|
||
<div className="text-xs text-black/60 dark:text-white/60">
|
||
{snapshot ? `版本 ${snapshot.screeningVersion} · ${snapshot.generatedAt}` : "（暂无快照）"}
|
||
</div>
|
||
</div>
|
||
|
||
{snapshot ? (
|
||
<div className="mt-3 space-y-3">
|
||
<div className="text-xs text-black/60 dark:text-white/60">
|
||
Universe：自选股 {snapshot.universe.watchlistCount} · 导入池 {snapshot.universe.importedPoolCount} · 合计 {snapshot.universe.totalCount}
|
||
</div>
|
||
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm">
|
||
<thead className="text-left text-xs text-black/60 dark:text-white/60">
|
||
<tr>
|
||
<th className="py-2">#</th>
|
||
<th className="py-2">代码</th>
|
||
<th className="py-2">市场</th>
|
||
<th className="py-2">Score</th>
|
||
<th className="py-2">理由</th>
|
||
<th className="py-2">风险</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{snapshot.items.map((it) => (
|
||
<tr
|
||
key={`${it.market}:${it.code}`}
|
||
className="border-t border-black/5 dark:border-white/10"
|
||
>
|
||
<td className="py-2 text-xs text-black/60 dark:text-white/60">
|
||
{it.rank}
|
||
</td>
|
||
<td className="py-2 font-mono">{it.code}</td>
|
||
<td className="py-2">{it.market}</td>
|
||
<td className="py-2">{it.score.toFixed(2)}</td>
|
||
<td className="py-2 text-xs">
|
||
<ul className="list-disc pl-4">
|
||
{it.reasons.map((r, idx) => (
|
||
<li key={idx}>{r}</li>
|
||
))}
|
||
</ul>
|
||
</td>
|
||
<td className="py-2 text-xs">
|
||
{it.risks.length === 0 ? (
|
||
<span className="text-black/60 dark:text-white/60">-</span>
|
||
) : (
|
||
<ul className="list-disc pl-4">
|
||
{it.risks.map((r, idx) => (
|
||
<li key={idx}>{r}</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="mt-3 text-sm text-black/60 dark:text-white/60">
|
||
还没有快照。点击右上角“生成”。
|
||
</div>
|
||
)}
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|