From 813e5c345ab07e9887aa88d80a1ceb6e468d0260 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Fri, 28 Aug 2026 12:25:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=BB=98=E8=AE=A4=E4=BB=85=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=9D=87=E7=BA=BFMA(5/10/20)=EF=BC=8CMACD=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E5=85=B3=E9=97=AD=EF=BC=9B=E5=9B=BE=E8=A1=A8=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E7=BA=BF=E9=A2=9C=E8=89=B2=E5=9B=BE=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 默认指标改为只开 MA（MACD 默认关）
- MA 周期改为 5/10/20（去掉 30）
- 图表下方新增颜色图例：按启用的指标显示对应颜色线（MA各周期/DIF/DEA/RSI/K/D/J）
---
 src/components/kline-chart.tsx | 39 ++++++++++++++++++++++++++++------
 src/routes/stock.$code.tsx     |  2 +-
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/components/kline-chart.tsx b/src/components/kline-chart.tsx
index 0d7ab16..b9542a0 100644
--- a/src/components/kline-chart.tsx
+++ b/src/components/kline-chart.tsx
@@ -53,8 +53,8 @@ const GRID = "#e4e4e7";
 const MARKER = "#f59e0b";
 
 // MA / 指标线配色
-const MA_COLORS = ["#f59e0b", "#3b82f6", "#a855f7", "#10b981"];
-const MA_PERIODS = [5, 10, 20, 30];
+const MA_COLORS = ["#f59e0b", "#3b82f6", "#a855f7"];
+const MA_PERIODS = [5, 10, 20];
 const MACD_DIF = "#3b82f6";
 const MACD_DEA = "#f59e0b";
 const RSI_COLOR = "#a855f7";
@@ -331,12 +331,37 @@ export function KLineChart({ data, mode, hasAddedDate, indicators }: Props) {
     chart.timeScale().fitContent();
   }
 
+  // 颜色图例：根据启用的指标生成
+  const legend: { color: string; label: string }[] = [];
+  if (indicators.ma) {
+    MA_PERIODS.forEach((p, i) => legend.push({ color: MA_COLORS[i % MA_COLORS.length], label: `MA${p}` }));
+  }
+  if (indicators.macd) {
+    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
-      ref={containerRef}
-      style={{ height: `${chartHeight}px` }}
-      className="w-full transition-[height] duration-200"
-    />
+    <div className="w-full">
+      <div
+        ref={containerRef}
+        style={{ height: `${chartHeight}px` }}
+        className="w-full transition-[height] duration-200"
+      />
+      {legend.length > 0 && (
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-[11px] text-muted-foreground">
+          {legend.map((l) => (
+            <span key={l.label} className="inline-flex items-center gap-1">
+              <span className="h-0.5 w-3 rounded" style={{ backgroundColor: l.color }} />
+              {l.label}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
   );
 }
 
diff --git a/src/routes/stock.$code.tsx b/src/routes/stock.$code.tsx
index 310135c..2a04dd3 100755
--- a/src/routes/stock.$code.tsx
+++ b/src/routes/stock.$code.tsx
@@ -87,7 +87,7 @@ 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: true, rsi: false, kdj: false });
+  const [indicators, setIndicators] = useState({ ma: true, macd: false, rsi: false, kdj: false });
   const toggleIndicator = (key: keyof typeof indicators) =>
     setIndicators((prev) => ({ ...prev, [key]: !prev[key] }));
   const [loading, setLoading] = useState(true);