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

"use client";

import { useEffect, useState } from "react";
import { apiGet } from "@/lib/api";
import type { Stock } from "@/lib/types";

export default function StocksPage() {
  const [stocks, setStocks] = useState<Stock[]>([]);
  const [q, setQ] = useState("");
  const [error, setError] = useState("");

  useEffect(() => {
    apiGet<Stock[]>(`/stocks?limit=300&q=${encodeURIComponent(q)}`)
      .then(setStocks)
      .catch((e: Error) => setError(e.message));
  }, [q]);

  return (
    <>
      <h1>股票池</h1>
      <div className="row" style={{ marginBottom: 12 }}>
        <input
          placeholder="按代码 / 名称搜索（如 600519 或 茅台）"
          value={q}
          onChange={(e) => setQ(e.target.value)}
        />
        <span className="muted">共 {stocks.length} 条</span>
      </div>
      {error && <div className="error">{error}</div>}
      <div className="card">
        <table>
          <thead>
            <tr>
              <th>代码</th>
              <th>名称</th>
              <th>行业</th>
              <th>地区</th>
              <th>上市日</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            {stocks.map((s) => (
              <tr key={s.symbol}>
                <td>{s.symbol}</td>
                <td>{s.name}</td>
                <td>{s.industry ?? "—"}</td>
                <td>{s.area ?? "—"}</td>
                <td>{s.list_date}</td>
                <td>{s.status}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}