feat: 默认仅显示均线MA(5/10/20)，MACD默认关闭；图表增加线颜色图例

- 默认指标改为只开 MA（MACD 默认关）
- MA 周期改为 5/10/20（去掉 30）
- 图表下方新增颜色图例：按启用的指标显示对应颜色线（MA各周期/DIF/DEA/RSI/K/D/J）

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_COLORS = ["#f59e0b", "#3b82f6", "#a855f7"];
-const MA_PERIODS = [5, 10, 20, 30];
+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 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>
   );
 }
 

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);