first commit
This commit is contained in:
super
214
app/(shell)/recommendations/page.tsx
Normal file
214
app/(shell)/recommendations/page.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user