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

src/components/kline-chart.tsx

@@ -1,7 +1,7 @@
 /**
  * K 线图组件（基于 TradingView Lightweight Charts v5）
  * 主图：蜡烛/折线 + MA(5/10/20/30)；
- * 副图：成交量(pane1)、MACD(pane2)、RSI(pane3)、KDJ(pane4)，可开关。
+ * 副图：成交量(pane1)、MACD(pane2)、RSI(pane3)，可开关。
  */
 import { useEffect, useRef } from "react";
 import {
@@ -18,7 +18,7 @@ import {
   type ISeriesApi as ISeriesAny,
   type Time,
 } from "lightweight-charts";
-import { sma, macd as calcMacd, rsi as calcRsi, kdj as calcKdj, type KBar } from "@/lib/indicators";
+import { sma, macd as calcMacd, rsi as calcRsi, type KBar } from "@/lib/indicators";
 
 export interface KLineItem {
   time: string; // ISO 日期 yyyy-mm-dd（lightweight-charts 必需）
@@ -34,7 +34,6 @@ export interface IndicatorToggles {
   ma: boolean;
   macd: boolean;
   rsi: boolean;
-  kdj: boolean;
 }
 
 interface Props {
@@ -47,6 +46,9 @@ interface Props {
 // lightweight-charts 无法解析 CSS 变量或 oklch() 颜色，直接用具体 hex 色。
 const UP = "#ef4444";
 const DOWN = "#22c55e";
+// 成交量柱：浅色调，避免与 K 线柱体视觉争夺
+const VOL_UP = "#fca5a5";
+const VOL_DOWN = "#86efac";
 const PRIMARY = "#ef4444";
 const TEXT = "#71717a";
 const GRID = "#e4e4e7";
@@ -58,9 +60,6 @@ const MA_PERIODS = [5, 10, 20];
 const MACD_DIF = "#3b82f6";
 const MACD_DEA = "#f59e0b";
 const RSI_COLOR = "#a855f7";
-const KDJ_K = "#3b82f6";
-const KDJ_D = "#f59e0b";
-const KDJ_J = "#a855f7";
 
 export function KLineChart({ data, mode, hasAddedDate, indicators }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -71,10 +70,9 @@ export function KLineChart({ data, mode, hasAddedDate, indicators }: Props) {
   const maSeriesRef = useRef<ISeriesAny<"Line">[]>([]);
   const macdSeriesRef = useRef<ISeriesAny<"Line" | "Histogram">[]>([]);
   const rsiSeriesRef = useRef<ISeriesAny<"Line">[]>([]);
-  const kdjSeriesRef = useRef<ISeriesAny<"Line">[]>([]);
 
   // 容器高度随指标 pane 数量增长，避免主图被压缩
-  const extraPanes = [indicators.macd, indicators.rsi, indicators.kdj].filter(Boolean).length;
+  const extraPanes = [indicators.macd, indicators.rsi].filter(Boolean).length;
   // 固定图表高度：主图+成交量 300，每个指标副图 +95
   const chartHeight = 300 + extraPanes * 95;
 
@@ -101,11 +99,15 @@ export function KLineChart({ data, mode, hasAddedDate, indicators }: Props) {
     });
     chartRef.current = chart;
 
-    const vol = chart.addSeries(HistogramSeries, {
+    // 成交量放到独立 pane1，避免与主图K线重叠
-      priceFormat: { type: "volume" },
+    const vol = chart.addSeries(
-      priceScaleId: "vol",
+      HistogramSeries,
-    });
+      {
-    vol.priceScale().applyOptions({ scaleMargins: { top: 0.8, bottom: 0 } });
+        priceFormat: { type: "volume" },
+        priceScaleId: "vol",
+      },
+      1,
+    );
     volSeriesRef.current = vol;
 
     return () => {
@@ -116,7 +118,6 @@ export function KLineChart({ data, mode, hasAddedDate, indicators }: Props) {
       maSeriesRef.current = [];
       macdSeriesRef.current = [];
       rsiSeriesRef.current = [];
-      kdjSeriesRef.current = [];
     };
   }, []);
 
@@ -222,25 +223,6 @@ export function KLineChart({ data, mode, hasAddedDate, indicators }: Props) {
       );
       rsiSeriesRef.current.push(s);
     }
-
-    // --- KDJ（pane4）---
-    removeGroup(kdjSeriesRef.current, chart);
-    if (indicators.kdj && bars.length > 0) {
-      const { k, d, j } = calcKdj(bars);
-      const mk = (color: string) =>
-        chart.addSeries(
-          LineSeries,
-          { color, lineWidth: 1, priceLineVisible: false, lastValueVisible: false },
-          4,
-        );
-      const kS = mk(KDJ_K);
-      const dS = mk(KDJ_D);
-      const jS = mk(KDJ_J);
-      kS.setData(bars.map((_, i) => ({ time: bars[i].time as Time, value: k[i] })).filter((x) => x.value != null) as { time: Time; value: number }[]);
-      dS.setData(bars.map((_, i) => ({ time: bars[i].time as Time, value: d[i] })).filter((x) => x.value != null) as { time: Time; value: number }[]);
-      jS.setData(bars.map((_, i) => ({ time: bars[i].time as Time, value: j[i] })).filter((x) => x.value != null) as { time: Time; value: number }[]);
-      kdjSeriesRef.current.push(kS, dS, jS);
-    }
   }
 
   // 模式切换：重建价格 series + 指标
@@ -309,7 +291,7 @@ export function KLineChart({ data, mode, hasAddedDate, indicators }: Props) {
       data.map((d) => ({
         time: d.time as Time,
         value: d.volume,
-        color: d.close >= d.open ? UP : DOWN,
+        color: d.close >= d.open ? VOL_UP : VOL_DOWN,
       })),
     );
 
@@ -340,9 +322,6 @@ export function KLineChart({ data, mode, hasAddedDate, indicators }: Props) {
     legend.push({ color: MACD_DIF, label: "DIF" }, { color: MACD_DEA, label: "DEA" });
   }
   if (indicators.rsi) legend.push({ color: RSI_COLOR, label: "RSI14" });
-  if (indicators.kdj) {
-    legend.push({ color: KDJ_K, label: "K" }, { color: KDJ_D, label: "D" }, { color: KDJ_J, label: "J" });
-  }
 
   return (
     <div className="w-full">

src/routes/stock.$code.tsx

@@ -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);
+      if (chartPeriod === "d") {
-      setFundFlowLoading(true);
+        // 日线：获取完整数据用于展示切片
+        setChartLoading(true);
+        setFundFlowLoading(true);
 
-      const [historyResult, fundFlowResult] = await Promise.allSettled([
+        const [historyResult, fundFlowResult] = await Promise.allSettled([
-        fetchStockHistoryV2(code, chartDays),
+          fetchStockHistoryV2(code, 365), // 获取1年数据用于切片
-        fetchStockFundFlow(code, quote.name, 21),
+          fetchStockFundFlow(code, quote.name, 21),
-      ]);
+        ]);
 
-      // 处理历史K线（必需）
+        // 处理历史K线（必需）
-      if (historyResult.status === "fulfilled" && historyResult.value && historyResult.value.length > 0) {
+        if (historyResult.status === "fulfilled" && historyResult.value && historyResult.value.length > 0) {
-        const historyData = convertToStockData(historyResult.value, addedDate);
+          const historyData = convertToStockData(historyResult.value, addedDate);
-        // 如果添加日不是交易日（周末/节假日），标记最接近的K线日期
+          // 如果添加日不是交易日（周末/节假日），标记最接近的K线日期
-        if (stockRecord && !historyData.some(d => d.isAddedDate)) {
+          if (stockRecord && !historyData.some(d => d.isAddedDate)) {
-          const closestIdx = findClosestDateIndex(historyData, addedDate);
+            const closestIdx = findClosestDateIndex(historyData, addedDate);
-          if (historyData[closestIdx]) {
+            if (historyData[closestIdx]) {
-            historyData[closestIdx] = { ...historyData[closestIdx], isAddedDate: true };
+              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线数据");
+        // 分钟/小时线：独立加载，不影响日K数据
-        setError("获取历史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: "d" as const, label: "日" },
-                    { key: 180, label: "6月" },
+                    { key: "m60" as const, label: "60分" },
-                    { key: 365, label: "1年" },
+                    { key: "m30" as const, label: "30分" },
-                  ].map((r) => (
+                    { 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}
+                      key={p.key}
-                      onClick={() => setChartRange(r.key)}
+                      onClick={() => setChartPeriod(p.key)}
-                      className={`px-2.5 py-1 transition-colors ${
+                      className={`px-2 py-1 transition-colors ${
-                        chartRange === r.key ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+                        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,