feat(web): 按原型调整响应式研究工作台

2026-08-10 10:07:55 +08:00
parent 5b650166b5
commit ed7bdda515
16 changed files with 1319 additions and 350 deletions
@@ -0,0 +1,92 @@
+import { Database, Search } from "lucide-react"
+
+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"
+
+interface SignalDetailPanelProps {
+  signal: SelectionSignal | undefined
+}
+
+export function SignalDetailPanel({ signal }: SignalDetailPanelProps) {
+  if (!signal) {
+    return (
+      <Card
+        aria-label="当前股票详情"
+        className="hidden min-h-0 overflow-auto rounded-lg border-border/80 bg-card p-4 md:flex md:flex-col md:justify-center"
+      >
+        <div className="space-y-2 text-center">
+          <Search
+            className="mx-auto size-5 text-muted-foreground"
+            aria-hidden="true"
+          />
+          <p className="font-medium">暂无选中信号</p>
+          <p className="text-xs leading-5 text-muted-foreground">
+            从左侧列表选择一条信号查看详情。
+          </p>
+        </div>
+      </Card>
+    )
+  }
+
+  return (
+    <aside
+      aria-label="当前股票详情"
+      className="hidden min-h-0 overflow-auto rounded-lg border border-border/80 bg-card p-4 md:block"
+    >
+      <p className="text-[10px] font-bold tracking-[0.08em] text-muted-foreground uppercase">
+        Selected signal
+      </p>
+      <div className="mt-2 flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h2 className="truncate text-xl font-semibold tracking-tight">
+            {signal.name}
+          </h2>
+          <p className="font-mono text-xs text-muted-foreground">
+            {signal.ts_code}
+          </p>
+        </div>
+        <Database
+          className="mt-1 size-4 shrink-0 text-muted-foreground"
+          aria-hidden="true"
+        />
+      </div>
+
+      <p className="mt-5 text-3xl font-semibold tabular-nums tracking-tight">
+        ¥ {signal.close.toFixed(2)}
+      </p>
+
+      <Badge
+        className={`mt-3 ${categoryToneClass(signal.category)}`}
+        variant="outline"
+      >
+        {getCategoryLabel(signal.category)}
+      </Badge>
+
+      <dl className="mt-5 divide-y divide-border/60 border-t 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">
+            {signal.target_trade_date}
+          </dd>
+        </div>
+        <div className="flex items-center justify-between gap-3 py-2.5">
+          <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>
+    </aside>
+  )
+}