feat: K线成交量独立pane、浅色调、移除KDJ

2026-08-28 15:37:17 +08:00
parent 813e5c345a
commit c4ed3346ab
2 changed files with 148 additions and 88 deletions
@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useState, useEffect, useMemo, Fragment } from "react";
 import { collectionsApi } from "@/lib/api-client";
-import { fetchStockQuote, fetchStockFundFlow, fetchCompanyProfile, fetchBusinessSegments, fetchFinancialData, getStockBoard, type StockQuote, type KLineData, type FundFlowData, type FundFlowSummary, type CompanyProfile, type BusinessSegmentsResponse, type FinancialDataResponse } from "@/lib/stock-api";
+import { fetchStockQuote, fetchStockFundFlow, fetchCompanyProfile, fetchBusinessSegments, fetchFinancialData, getStockBoard, type StockQuote, type KLineData, type FundFlowData, type FundFlowSummary, type CompanyProfile, type BusinessSegmentsResponse, type FinancialDataResponse, fetchStockHistoryMinute } from "@/lib/stock-api";
 import { fetchStockHistoryV2 } from "@/lib/fuyao-api";
 import StockProfileTabs from "@/components/stock-profile-tabs";
 import { getUserId } from "@/lib/user-id";
@@ -37,6 +37,15 @@ export const Route = createFileRoute("/stock/$code")({
  },
 });

+// K线周期标签映射
+const PERIOD_LABEL: Record<"m1" | "m5" | "m15" | "m30" | "m60", string> = {
+  m1: "1分",
+  m5: "5分",
+  m15: "15分",
+  m30: "30分",
+  m60: "60分",
+};
+
 interface StockData {
  date: string;
  dateObj: Date;
@@ -87,7 +96,12 @@ function StockDetail() {
  const [dailyTableDays, setDailyTableDays] = useState<number>(7);
  const [chartRange, setChartRange] = useState(90); // 默认近3月
  const [chartMode, setChartMode] = useState<"line" | "candle">("candle"); // 折线/蜡烛，默认蜡烛
-  const [indicators, setIndicators] = useState({ ma: true, macd: false, rsi: false, kdj: false });
+  // K线周期：日(d) / 60分(m60) / 30分(m30) / 15分(m15) / 5分(m5) / 1分(m1)
+  const [chartPeriod, setChartPeriod] = useState<"d" | "m60" | "m30" | "m15" | "m5" | "m1">("d");
+  // 分钟/小时线专用数据（独立于日K chartData，避免数据混用）
+  const [minuteData, setMinuteData] = useState<StockData[]>([]);
+  const [minuteLoading, setMinuteLoading] = useState(false);
+  const [indicators, setIndicators] = useState({ ma: true, macd: false, rsi: false });
  const toggleIndicator = (key: keyof typeof indicators) =>
    setIndicators((prev) => ({ ...prev, [key]: !prev[key] }));
  const [loading, setLoading] = useState(true);
@@ -103,7 +117,7 @@ function StockDetail() {

  useEffect(() => {
    loadStockData();
-  }, [code]);
+  }, [code, chartPeriod]);

  // 加载公司概况、经营分析、财务分析（并行后置加载）
  useEffect(() => {
@@ -124,7 +138,9 @@ function StockDetail() {
    setLoading(true);
    setError(null);
    setChartData([]);
+    setMinuteData([]);
    setChartLoading(false);
+    setMinuteLoading(false);
    setFundFlowData([]);
    setFundFlowSummary(null);
    setFundFlowLoading(false);
@@ -177,46 +193,76 @@ function StockDetail() {
      // 基础信息已就绪，结束主loading，先渲染页面框架
      setLoading(false);

-      // 阶段2：并行加载历史K线 + 资金流向（后置加载，不阻塞首屏）
+      // 阶段2：根据周期加载不同的K线数据（后置加载，不阻塞首屏）
      const addedDate = new Date(addedAt);
-      // 一次性拉取最多 1 年（365天）K线，展示范围由 chartRange 前端切片
-      const chartDays = 365;

-      setChartLoading(true);
-      setFundFlowLoading(true);
+      if (chartPeriod === "d") {
+        // 日线：获取完整数据用于展示切片
+        setChartLoading(true);
+        setFundFlowLoading(true);

-      const [historyResult, fundFlowResult] = await Promise.allSettled([
-        fetchStockHistoryV2(code, chartDays),
-        fetchStockFundFlow(code, quote.name, 21),
-      ]);
+        const [historyResult, fundFlowResult] = await Promise.allSettled([
+          fetchStockHistoryV2(code, 365), // 获取1年数据用于切片
+          fetchStockFundFlow(code, quote.name, 21),
+        ]);

-      // 处理历史K线（必需）
-      if (historyResult.status === "fulfilled" && historyResult.value && historyResult.value.length > 0) {
-        const historyData = convertToStockData(historyResult.value, addedDate);
-        // 如果添加日不是交易日（周末/节假日），标记最接近的K线日期
-        if (stockRecord && !historyData.some(d => d.isAddedDate)) {
-          const closestIdx = findClosestDateIndex(historyData, addedDate);
-          if (historyData[closestIdx]) {
-            historyData[closestIdx] = { ...historyData[closestIdx], isAddedDate: true };
+        // 处理历史K线（必需）
+        if (historyResult.status === "fulfilled" && historyResult.value && historyResult.value.length > 0) {
+          const historyData = convertToStockData(historyResult.value, addedDate);
+          // 如果添加日不是交易日（周末/节假日），标记最接近的K线日期
+          if (stockRecord && !historyData.some(d => d.isAddedDate)) {
+            const closestIdx = findClosestDateIndex(historyData, addedDate);
+            if (historyData[closestIdx]) {
+              historyData[closestIdx] = { ...historyData[closestIdx], isAddedDate: true };
+            }
          }
+          setChartData(historyData);
+          if (historyResult.value.length < 2) {
+            console.warn("历史K线数据过少（新股或上市首日），仅显示有限数据");
+          }
+        } else {
+          console.error("无法获取历史K线数据");
+          setError("获取历史K线数据失败，请稍后重试");
        }
-        setChartData(historyData);
-        if (historyResult.value.length < 2) {
-          console.warn("历史K线数据过少（新股或上市首日），仅显示有限数据");
+
+        // 处理资金流向（非必需，失败不影响主流程）
+        if (fundFlowResult.status === "fulfilled" && fundFlowResult.value) {
+          console.log("[stock-detail] 资金流向数据:", fundFlowResult.value);
+          setFundFlowData(fundFlowResult.value.data);
+          setFundFlowSummary(fundFlowResult.value.summary || null);
+        } else {
+          console.error("获取资金流向数据失败:", fundFlowResult.status === "rejected" ? fundFlowResult.reason : "未知错误");
        }
      } else {
-        console.error("无法获取历史K线数据");
-        setError("获取历史K线数据失败，请稍后重试");
+        // 分钟/小时线：独立加载，不影响日K数据
+        setMinuteLoading(true);
+        const minuteResult = await fetchStockHistoryMinute(
+          code,
+          chartPeriod === "m60" ? "m60" :
+          chartPeriod === "m30" ? "m30" :
+          chartPeriod === "m15" ? "m15" :
+          chartPeriod === "m5" ? "m5" : "m1",
+          320 // 默认320根
+        );
+
+        if (minuteResult && minuteResult.length > 0) {
+          const minuteDataConverted = convertToStockData(minuteResult, addedDate);
+          // 如果添加日不是交易日（周末/节假日），标记最接近的K线
+          if (stockRecord && !minuteDataConverted.some(d => d.isAddedDate)) {
+            const closestIdx = findClosestDateIndex(minuteDataConverted, addedDate);
+            if (minuteDataConverted[closestIdx]) {
+              minuteDataConverted[closestIdx] = { ...minuteDataConverted[closestIdx], isAddedDate: true };
+            }
+          }
+          setMinuteData(minuteDataConverted);
+        } else {
+          console.error("无法获取分钟K线数据");
+          setError("获取分钟K线数据失败，请稍后重试");
+        }
+
+        setMinuteLoading(false);
      }

-      // 处理资金流向（非必需，失败不影响主流程）
-      if (fundFlowResult.status === "fulfilled" && fundFlowResult.value) {
-        console.log("[stock-detail] 资金流向数据:", fundFlowResult.value);
-        setFundFlowData(fundFlowResult.value.data);
-        setFundFlowSummary(fundFlowResult.value.summary || null);
-      } else {
-        console.error("获取资金流向数据失败:", fundFlowResult.status === "rejected" ? fundFlowResult.reason : "未知错误");
-      }
    } catch (err) {
      console.error("加载失败:", err);
      const msg = err instanceof Error ? err.message : "加载股票数据失败";
@@ -224,6 +270,7 @@ function StockDetail() {
    } finally {
      setLoading(false);
      setChartLoading(false);
+      setMinuteLoading(false);
      setFundFlowLoading(false);
    }
  };
@@ -292,12 +339,20 @@ function StockDetail() {
    return typeof roe === "number" ? roe : null;
  }, [financialData]);

-  // 展示数据 = 按 chartRange 切片最近 N 天（chartData 存了全年，这里只取窗口）
+  // 展示数据：日线时按 chartRange 切片，分钟/小时线时直接使用 minuteData
  // 必须在所有 early return 之前调用，保证 hook 顺序一致
  const displayData = useMemo(() => {
+    if (chartPeriod !== "d") {
+      // 分钟/小时线：直接使用后端返回的数据（已经按时间升序）
+      return minuteData;
+    }
+    // 日线：按 chartRange 切片最近 N 天
    if (chartData.length <= chartRange) return chartData;
    return chartData.slice(chartData.length - chartRange);
-  }, [chartData, chartRange]);
+  }, [chartData, chartRange, chartPeriod, minuteData]);
+
+  // 当前 loading 状态：日线和分钟线用不同的 loading 标志
+  const currentChartLoading = chartPeriod === "d" ? chartLoading : minuteLoading;

  if (loading) {
    return (
@@ -527,7 +582,9 @@ function StockDetail() {
              <CardTitle className="text-base md:text-lg">
                K线图
                <span className="text-xs md:text-sm font-normal text-muted-foreground ml-2">
-                  {chartLoading ? "（加载中...）" : `（${displayData.length}个交易日）`}
+                  {currentChartLoading ? "（加载中...）" : (
+                    chartPeriod === "d" ? `（${displayData.length}个交易日）` : `（${displayData.length}根${PERIOD_LABEL[chartPeriod as "m60" | "m30" | "m15" | "m5" | "m1"] || chartPeriod}K线）`
+                  )}
                </span>
              </CardTitle>
              <div className="flex items-center gap-1.5 flex-wrap">
@@ -545,13 +602,12 @@ function StockDetail() {
                    </button>
                  ))}
                </div>
-                {/* 指标开关：MA / MACD / RSI / KDJ */}
+                {/* 指标开关：MA / MACD / RSI */}
                <div className="flex gap-0.5 text-xs border rounded-md overflow-hidden">
                  {([
                    { key: "ma", label: "MA" },
                    { key: "macd", label: "MACD" },
                    { key: "rsi", label: "RSI" },
-                    { key: "kdj", label: "KDJ" },
                  ] as const).map((it) => (
                    <button
                      key={it.key}
@@ -564,24 +620,47 @@ function StockDetail() {
                    </button>
                  ))}
                </div>
-                {/* 时间范围：3月 / 6月 / 1年 */}
+                {/* K线周期：日 / 60分 / 30分 / 15分 / 5分 / 1分 */}
                <div className="flex gap-0.5 text-xs border rounded-md overflow-hidden">
-                  {[
-                    { key: 90, label: "3月" },
-                    { key: 180, label: "6月" },
-                    { key: 365, label: "1年" },
-                  ].map((r) => (
+                  {([
+                    { key: "d" as const, label: "日" },
+                    { key: "m60" as const, label: "60分" },
+                    { key: "m30" as const, label: "30分" },
+                    { key: "m15" as const, label: "15分" },
+                    { key: "m5" as const, label: "5分" },
+                    { key: "m1" as const, label: "1分" },
+                  ] as const).map((p) => (
                    <button
-                      key={r.key}
-                      onClick={() => setChartRange(r.key)}
-                      className={`px-2.5 py-1 transition-colors ${
-                        chartRange === r.key ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+                      key={p.key}
+                      onClick={() => setChartPeriod(p.key)}
+                      className={`px-2 py-1 transition-colors ${
+                        chartPeriod === p.key ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
                      }`}
                    >
-                      {r.label}
+                      {p.label}
                    </button>
                  ))}
                </div>
+                {/* 时间范围：3月 / 6月 / 1年（仅日线显示） */}
+                {chartPeriod === "d" && (
+                  <div className="flex gap-0.5 text-xs border rounded-md overflow-hidden">
+                    {[
+                      { key: 90, label: "3月" },
+                      { key: 180, label: "6月" },
+                      { key: 365, label: "1年" },
+                    ].map((r) => (
+                      <button
+                        key={r.key}
+                        onClick={() => setChartRange(r.key)}
+                        className={`px-2.5 py-1 transition-colors ${
+                          chartRange === r.key ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+                        }`}
+                      >
+                        {r.label}
+                      </button>
+                    ))}
+                  </div>
+                )}
                <span className="text-xs text-muted-foreground hidden sm:inline">
                  双指缩放 · 拖动查看
                </span>
@@ -589,7 +668,7 @@ function StockDetail() {
            </div>
          </CardHeader>
          <CardContent className="px-2 md:px-6 pb-2 md:pb-6">
-            {chartLoading ? (
+            {currentChartLoading ? (
              <div className="h-[320px] sm:h-[380px] md:h-[440px] w-full flex items-center justify-center">
                <div className="flex items-center text-muted-foreground text-sm">
                  <div className="animate-pulse mr-2 h-2 w-2 rounded-full bg-primary"></div>
@@ -600,7 +679,9 @@ function StockDetail() {
            <>
            <KLineChart
              data={displayData.map((d) => ({
-                time: d.dateObj.toISOString().slice(0, 10),
+                time: chartPeriod === "d"
+                  ? d.dateObj.toISOString().slice(0, 10)
+                  : d.date, // 分钟/小时线保留完整日期时间字符串 YYYY-MM-DD HH:MM
                open: d.open,
                close: d.close,
                high: d.high,