feat(web): 完善选股详情图表与案例图

zhixing-web/src/features/selection/components/signal-detail-panel.tsx

@@ -1,4 +1,6 @@
+import { lazy, Suspense } from "react"
 import { Database, Search } from "lucide-react"
+import { useSelectionChart } from "../api/selection.query"
 
 import { Badge } from "@/shared/ui/badge"
 import { Card } from "@/shared/ui/card"
@@ -7,12 +9,21 @@ import type { SelectionStockResult } from "../api/selection.types"
 import { PatternScoreDetails } from "./pattern-score"
 import { categoryToneClass, getCategoryLabel } from "./selection-presentation"
 import { SignalDetails } from "./signal-details"
+import { PatternCaseImage } from "./pattern-case-image"
+
+const SelectionChart = lazy(() =>
+  import("./selection-chart").then((module) => ({
+    default: module.SelectionChart,
+  })),
+)
 
 interface SignalDetailPanelProps {
   stock: SelectionStockResult | undefined
 }
 
 export function SignalDetailPanel({ stock }: SignalDetailPanelProps) {
+  const chartQuery = useSelectionChart(stock?.ts_code, stock?.target_trade_date)
+
   if (!stock) {
     return (
       <Card
@@ -95,6 +106,32 @@ export function SignalDetailPanel({ stock }: SignalDetailPanelProps) {
         <PatternScoreDetails score={stock.score} />
       </section>
 
+      <section className="mt-4" aria-labelledby="technical-chart">
+        <h3
+          className="mb-2 text-xs font-medium text-muted-foreground"
+          id="technical-chart"
+        >
+          技术图表
+        </h3>
+        {chartQuery.isPending ? (
+          <p className="text-xs text-muted-foreground">正在加载行情图表…</p>
+        ) : chartQuery.isError ? (
+          <p className="text-xs text-destructive">行情图表暂时不可用。</p>
+        ) : chartQuery.data?.points.length ? (
+          <Suspense
+            fallback={
+              <p className="text-xs text-muted-foreground">正在加载图表组件…</p>
+            }
+          >
+            <SelectionChart chart={chartQuery.data} />
+          </Suspense>
+        ) : (
+          <p className="text-xs text-muted-foreground">暂无可用行情数据。</p>
+        )}
+      </section>
+
+      <PatternCaseImage score={stock.score} />
+
       <section className="mt-4" aria-labelledby="signal-detail-metrics">
         <h3
           className="mb-2 text-xs font-medium text-muted-foreground"