feat(selection): 重构信号详情展示，增加指标项和格式化功能

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

@@ -4,11 +4,8 @@ import { Badge } from "@/shared/ui/badge"
 import { Card } from "@/shared/ui/card"
 
 import type { SelectionSignal } from "../api/selection.types"
-import {
-  categoryToneClass,
-  formatDetails,
-  getCategoryLabel,
-} from "./selection-presentation"
+import { categoryToneClass, getCategoryLabel } from "./selection-presentation"
+import { SignalDetails } from "./signal-details"
 
 interface SignalDetailPanelProps {
   signal: SelectionSignal | undefined
@@ -69,7 +66,7 @@ export function SignalDetailPanel({ signal }: SignalDetailPanelProps) {
         {getCategoryLabel(signal.category)}
       </Badge>
 
-      <dl className="mt-4 divide-y divide-border/60 border-t border-border/60 text-xs">
+      <dl className="mt-4 divide-y divide-border/60 border-y border-border/60 text-xs">
         <div className="flex items-center justify-between gap-3 py-2.5">
           <dt className="text-muted-foreground">目标交易日</dt>
           <dd className="font-medium tabular-nums">
@@ -80,13 +77,17 @@ export function SignalDetailPanel({ signal }: SignalDetailPanelProps) {
           <dt className="text-muted-foreground">策略</dt>
           <dd className="font-medium">知行 B1</dd>
         </div>
-        <div className="space-y-1.5 py-2.5">
-          <dt className="text-muted-foreground">关键依据</dt>
-          <dd className="leading-5 text-foreground">
-            {formatDetails(signal.details)}
-          </dd>
-        </div>
       </dl>
+
+      <section className="mt-4" aria-labelledby="signal-detail-metrics">
+        <h3
+          className="mb-2 text-xs font-medium text-muted-foreground"
+          id="signal-detail-metrics"
+        >
+          关键指标
+        </h3>
+        <SignalDetails details={signal.details} />
+      </section>
     </aside>
   )
 }