qlib/frontend/web/app/signals/page.tsx

"use client";

/** 交易信号（v2 §15）：基于选股评分排名 + 趋势规则生成 BUY / WATCH / SELL，
 * 每条带理由（为什么）；支持当前/历史 as_of，历史记录点击回看。
 */
import { useEffect, useState } from "react";
import { apiGet, apiPost } from "@/lib/api";
import { SymbolLink } from "@/lib/symbols";
import { factorOptionLabel, pickableFactors } from "@/lib/factors";
import type {
  FactorMeta,
  SelectionQuery,
  SignalMeta,
  SignalResult,
  SignalRun,
} from "@/lib/types";
import {
  PageHeader,
  Card,
  Pill,
  Field,
  Btn,
  Banner,
  Empty,
  SkeletonLines,
} from "@/components/ui";

/**
 * 读取后端 payload 里的 name（若存在）。
 *
 * 为什么用宽松读取而非直接 `e.name`：`lib/types.ts` 的 SignalEvent 目前没有声明 name
 * 字段（该文件由其他改动维护）；后端可能已返回更权威的中文名。取不到就交给 SymbolLink
 * 渲染占位「—」，不编造名称（AGENT §24）。
 */
function payloadName(row: unknown): string | undefined {
  if (row && typeof row === "object" && "name" in row) {
    const n = (row as { name?: unknown }).name;
    if (typeof n === "string" && n.trim()) return n;
  }
  return undefined;
}

export default function SignalsPage() {
  const [factors, setFactors] = useState<FactorMeta[]>([]);
  const [factor, setFactor] = useState("momentum_60");
  const [asOf, setAsOf] = useState("");
  const [symbols, setSymbols] = useState("600519.SH,000001.SZ,300750.SZ,601318.SH,000858.SZ");
  const [buyRank, setBuyRank] = useState(2);
  const [sellRank, setSellRank] = useState(5);
  const [result, setResult] = useState<SignalResult | null>(null);
  const [signalId, setSignalId] = useState("");
  const [running, setRunning] = useState(false);
  const [error, setError] = useState("");
  const [history, setHistory] = useState<SignalMeta[] | null>(null);

  useEffect(() => {
    let alive = true;
    apiGet<FactorMeta[]>("/factors")
      // 停用/算不出来的因子不摆进候选（停用仍可被既有策略解析，只是不该再被选中）
      .then((list) => alive && list.length > 0 && setFactors(pickableFactors(list)))
      .catch((e: Error) => alive && setError(e.message));
    apiGet<SignalMeta[]>("/signals?limit=8").then(setHistory).catch(() => alive && setHistory([]));
    return () => {
      alive = false;
    };
  }, []);

  function buildQuery(): SelectionQuery {
    return {
      universe: { exclude_st: true, min_listing_days: 0, symbols: symbols.split(/[,，]/).map((s) => s.trim()).filter(Boolean) },
      as_of: asOf || null,
      method: "score",
      factors: [{ name: factor, weight: 1 }],
      conditions: [],
      top_n: sellRank + 10,
    };
  }

  async function run() {
    setRunning(true);
    setError("");
    setResult(null);
    try {
      const run = await apiPost<SignalRun>("/signals", {
        query: buildQuery(),
        rules: { buy_rank_threshold: buyRank, sell_rank_threshold: sellRank, max_output_rank: 60 },
      });
      setSignalId(run.signal_id);
      setResult(run.result);
      apiGet<SignalMeta[]>("/signals?limit=8").then(setHistory).catch(() => undefined);
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setRunning(false);
    }
  }

  async function openHistory(id: string) {
    try {
      const detail = await apiGet<SignalResult>(`/signals/${id}`);
      setSignalId(id);
      setResult(detail);
    } catch (e) {
      setError((e as Error).message);
    }
  }

  return (
    <>
      <PageHeader
        title="交易信号"
        sub="基于选股综合分排名与趋势规则输出 BUY / WATCH / SELL，每条带触发理由；与回测共用同一评分引擎。"
        actions={signalId ? <Pill tone="violet" icon="check">{signalId}</Pill> : null}
      />

      <Card title="信号参数" icon="scale">
        <div className="form-grid">
          <Field label="评分因子">
            <select className="input" value={factor} onChange={(e) => setFactor(e.target.value)}>
              {factors.map((f) => (
                <option key={f.name} value={f.name}>{factorOptionLabel(f)}</option>
              ))}
            </select>
          </Field>
          <Field label="买入排名阈值 (≤)">
            <input className="input" type="number" min={1} value={buyRank} onChange={(e) => setBuyRank(Number(e.target.value))} />
          </Field>
          <Field label="卖出/警示排名阈值 (>)">
            <input className="input" type="number" min={1} value={sellRank} onChange={(e) => setSellRank(Number(e.target.value))} />
          </Field>
          <Field label="时点 as_of" hint="留空 = 最近交易日">
            <input type="date" className="input" value={asOf} onChange={(e) => setAsOf(e.target.value)} />
          </Field>
          <Field label="股票白名单" hint="逗号分隔（≤60）">
            <input className="input" value={symbols} onChange={(e) => setSymbols(e.target.value)} />
          </Field>
          <Btn variant="primary" icon="play" loading={running} disabled={running} onClick={run}>
            {running ? "生成中…" : "生成信号"}
          </Btn>
        </div>

        {/*
          为什么这里没有 JobProgress：`POST /signals` 是**同步**接口（backend/app/api/signals.py
          只有 POST ""，没有 /signals/jobs），拿不到 job_id，也就无从轮询阶段 —— 套 useJobRunner
          会去 GET /jobs/{signal_id} 撞 404，而合成一个假的 JobRunState 更是「看似有数据的假象」。
          所以这里如实说清三件事：同步连接、没有作业号/阶段/取消、出错时显示后端原文。
        */}
        {running ? (
          <div className="hint" style={{ marginTop: 12 }} role="status" aria-live="polite">
            同步请求已发出：请求期间浏览器一直连着后端（这条路径不是后台作业，不能关页离开）。
            因为是同步接口，<b>没有作业号与执行阶段，也没有取消按钮</b>。
            该请求通常在数秒内返回；若后端报错或连接中断，下方会显示后端原文。
          </div>
        ) : null}

        {error ? <div style={{ marginTop: 12 }}><Banner tone="error">{error}</Banner></div> : null}
      </Card>

      {!result && !running && history === null ? <SkeletonLines n={4} /> : null}

      {result ? <ResultView result={result} /> : null}

      {history && history.length > 0 ? (
        <Card title="最近信号记录" icon="archive">
          <div className="chips">
            {history.map((m) => (
              <button key={m.id} className="chip" style={{ cursor: "pointer" }} onClick={() => openHistory(m.id)} title={m.id}>
                <b className="mono">{m.as_of}</b>
                买 {m.buy} / 观 {m.watch} / 卖 {m.sell}
              </button>
            ))}
          </div>
        </Card>
      ) : null}
    </>
  );
}

function ResultView({ result }: { result: SignalResult }) {
  const st = result.statistics;
  return (
    <Card
      icon="scale"
      title={`信号 · ${result.as_of_date}`}
      tools={
        <>
          <Pill tone="pos">BUY {st.buy}</Pill>
          <Pill>WATCH {st.watch}</Pill>
          <Pill tone="neg">SELL {st.sell}</Pill>
        </>
      }
    >
      {result.events.length === 0 ? (
        <Empty icon="scale" title="无信号输出" hint="放宽排名阈值或检查白名单数据。" />
      ) : (
        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>类型</th>
                <th>代码 / 名称</th>
                <th>得分</th>
                <th>价格</th>
                <th>触发理由</th>
              </tr>
            </thead>
            <tbody>
              {result.events.map((e) => (
                <tr key={e.symbol}>
                  <td>
                    <Pill tone={e.signal_type === "BUY" ? "pos" : e.signal_type === "SELL" ? "neg" : undefined}>
                      {e.signal_type}
                    </Pill>
                  </td>
                  <td><SymbolLink symbol={e.symbol} name={payloadName(e)} /></td>
                  <td className="mono">{e.score?.toFixed(4)}</td>
                  <td className="mono">{e.price ?? "-"}</td>
                  <td style={{ fontSize: 12 }}>
                    <div className="chips">
                      {e.trigger_reason.map((r) => (
                        <span className="chip" key={r}>{r}</span>
                      ))}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </Card>
  );
}