feat: 详情页K线改用 TradingView Lightweight Charts，蜡烛图原生支持

- 新增 KLineChart 组件（lightweight-charts v5）：原生蜡烛图/折线切换、成交量副图（涨红跌绿）、自选日标记、双指缩放拖动
- 保留时间范围切换（3月/6月/1年，默认3月，一次性拉取365天前端切片）
- 修复 lightweight-charts 无法解析 CSS 变量/oklch 颜色的问题（改用固定 hex）
- 替换原 recharts K线（recharts Bar 自定义 shape 无法渲染蜡烛的问题彻底解决）

src/routes/stock.$code.tsx

@@ -11,6 +11,7 @@ import { Button } from "@/components/ui/button";
 import { ArrowLeft, TrendingUp, TrendingDown, Calendar, ExternalLink, Newspaper } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Link } from "@tanstack/react-router";
+import KLineChart from "@/components/kline-chart";
 import {
   ComposedChart,
   Line,
@@ -21,8 +22,6 @@ import {
   ResponsiveContainer,
   Bar,
   Cell,
-  Scatter,
-  Brush,
   ReferenceLine,
   PieChart,
   Pie,
@@ -87,6 +86,7 @@ function StockDetail() {
   const [fundFlowPeriod, setFundFlowPeriod] = useState(21);
   const [dailyTableDays, setDailyTableDays] = useState<number>(7);
   const [chartRange, setChartRange] = useState(90); // 默认近3月
+  const [chartMode, setChartMode] = useState<"line" | "candle">("candle"); // 折线/蜡烛，默认蜡烛
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [inCollection, setInCollection] = useState(false);
@@ -528,6 +528,20 @@ function StockDetail() {
                 </span>
               </CardTitle>
               <div className="flex items-center gap-1.5 flex-wrap">
+                {/* 显示方式切换：折线 / 蜡烛 */}
+                <div className="flex gap-0.5 text-xs border rounded-md overflow-hidden">
+                  {(["line", "candle"] as const).map((m) => (
+                    <button
+                      key={m}
+                      onClick={() => setChartMode(m)}
+                      className={`px-2.5 py-1 transition-colors ${
+                        chartMode === m ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+                      }`}
+                    >
+                      {m === "line" ? "折线" : "蜡烛"}
+                    </button>
+                  ))}
+                </div>
                 {/* 时间范围：3月 / 6月 / 1年 */}
                 <div className="flex gap-0.5 text-xs border rounded-md overflow-hidden">
                   {[
@@ -547,7 +561,7 @@ function StockDetail() {
                   ))}
                 </div>
                 <span className="text-xs text-muted-foreground hidden sm:inline">
-                  双指缩放 · 拖动选区查看
+                  双指缩放 · 拖动查看
                 </span>
               </div>
             </div>
@@ -562,151 +576,19 @@ function StockDetail() {
               </div>
             ) : (
             <>
-            <div
-              className="h-[320px] sm:h-[380px] md:h-[440px] w-full touch-none select-none"
-              style={{ touchAction: "none", overscrollBehavior: "none", WebkitOverflowScrolling: "auto" }}
-            >
-              <ResponsiveContainer width="100%" height="100%">
-                <ComposedChart
-                  data={displayData}
-                  margin={{ top: 10, right: 8, left: 0, bottom: 0 }}
-                >
-                  <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" opacity={0.5} />
-                  <XAxis
-                    dataKey="date"
-                    stroke="var(--muted-foreground)"
-                    fontSize={10}
-                    ticks={tickDates}
-                    angle={-45}
-                    textAnchor="end"
-                    height={56}
-                    tick={(props: any) => {
-                      const { x, y, payload } = props;
-                      const dataPoint = displayData.find(d => d.date === payload.value);
-                      const isAddedDate = inCollection && dataPoint?.isAddedDate;
-
-                      return (
-                        <text
-                          x={x}
-                          y={y}
-                          dy={16}
-                          textAnchor="end"
-                          fill={isAddedDate ? '#f59e0b' : 'var(--muted-foreground)'}
-                          fontWeight={isAddedDate ? 'bold' : 'normal'}
-                          fontSize={isAddedDate ? 11 : 10}
-                        >
-                          {payload.value}
-                        </text>
-                      );
-                    }}
-                  />
-                  <YAxis
-                    yAxisId="left"
-                    stroke="var(--muted-foreground)"
-                    fontSize={10}
-                    domain={["auto", "auto"]}
-                    tickCount={5}
-                    width={42}
-                  />
-                  <YAxis
-                    yAxisId="right"
-                    orientation="right"
-                    stroke="var(--muted-foreground)"
-                    fontSize={10}
-                    tickCount={5}
-                    width={42}
-                  />
-                  <Tooltip
-                    contentStyle={{
-                      backgroundColor: "var(--card)",
-                      border: "1px solid var(--border)",
-                      borderRadius: "8px",
-                      fontSize: "12px",
-                      padding: "8px 12px",
-                    }}
-                    labelFormatter={(label) => `日期: ${label}`}
-                    formatter={(value: any, name: string) => {
-                      if (name === 'close') return [`¥${Number(value).toFixed(2)}`, '收盘价'];
-                      if (name === 'volume') return [Number(value).toLocaleString(), '成交量'];
-                      return [value, name];
-                    }}
-                  />
-                  <Bar
-                    yAxisId="right"
-                    dataKey="volume"
-                    fill="var(--primary)"
-                    opacity={0.2}
-                  />
-                  <Line
-                    yAxisId="left"
-                    type="monotone"
-                    dataKey="close"
-                    stroke="var(--primary)"
-                    strokeWidth={2}
-                    dot={false}
-                  />
-                  {/* 高亮添加日期的K线点 */}
-                  <Scatter
-                    yAxisId="left"
-                    dataKey="close"
-                    fill="#fbbf24"
-                    shape={(props: any) => {
-                      const { cx, cy, payload } = props;
-                      if (!payload.isAddedDate) {
-                        return <circle cx={cx} cy={cy} r={0} fill="transparent" />;
-                      }
-                      return (
-                        <circle
-                          cx={cx}
-                          cy={cy}
-                          r={7}
-                          fill="#fbbf24"
-                          stroke="#f59e0b"
-                          strokeWidth={2.5}
-                        />
-                      );
-                    }}
-                  />
-                  {/* 添加日期参考线 */}
-                  {addedDataPoint && (
-                    <ReferenceLine
-                      yAxisId="left"
-                      x={addedDataPoint.date}
-                      stroke="#f59e0b"
-                      strokeDasharray="4 4"
-                      opacity={0.7}
-                    />
-                  )}
-                  {/* 缩放/滑动控件：移动端可双指缩放，拖动选区查看局部 */}
-                  <Brush
-                    dataKey="date"
-                    height={24}
-                    stroke="var(--primary)"
-                    fill="var(--muted)"
-                    travellerWidth={8}
-                    gap={8}
-                  />
-                </ComposedChart>
-              </ResponsiveContainer>
-            </div>
-
-            {/* Legend */}
-            <div className="flex flex-wrap justify-center gap-3 md:gap-6 mt-2 md:mt-4 text-xs md:text-sm">
-              <div className="flex items-center gap-1.5 md:gap-2">
-                <div className="w-2.5 h-2.5 md:w-3 md:h-3 rounded-full bg-primary"></div>
-                <span>收盘价</span>
-              </div>
-              <div className="flex items-center gap-1.5 md:gap-2">
-                <div className="w-2.5 h-2.5 md:w-3 md:h-3 rounded-full bg-primary opacity-20"></div>
-                <span>成交量</span>
-              </div>
-              {inCollection && (
-              <div className="flex items-center gap-1.5 md:gap-2">
-                <div className="w-2.5 h-2.5 md:w-3 md:h-3 rounded-full" style={{ backgroundColor: '#fbbf24' }}></div>
-                <span>自选日期</span>
-              </div>
-              )}
-            </div>
+            <KLineChart
+              data={displayData.map((d) => ({
+                time: d.dateObj.toISOString().slice(0, 10),
+                open: d.open,
+                close: d.close,
+                high: d.high,
+                low: d.low,
+                volume: d.volume,
+                isAddedDate: d.isAddedDate,
+              }))}
+              mode={chartMode}
+              hasAddedDate={inCollection}
+            />
             </>
             )}
           </CardContent>