feat(selection): 重构选股结果筛选与状态入口

zhixing-web/src/features/selection/components/selection-results-workbench.tsx

@@ -1,10 +1,19 @@
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState, type RefObject } from "react"
 import { useNavigate, useSearch } from "@tanstack/react-router"
 
 import { Input } from "@/shared/ui/input"
 import { Pagination } from "@/shared/ui/pagination"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/ui/select"
 
 import type { SelectionResults, SelectionSignal } from "../api/selection.types"
+import { ExecutionStatusTrigger } from "./execution-status-trigger"
 import { SignalDetailPanel } from "./signal-detail-panel"
 import { SignalRecordList } from "./signal-record-list"
 import {
@@ -18,11 +27,17 @@ import { SignalTable } from "./signal-table"
 const PAGE_SIZE_OPTIONS = [5, 10, 15] as const
 
 interface SelectionResultsWorkbenchProps {
+  drawerOpen: boolean
+  onOpenExecutionStatus: () => void
   result: SelectionResults
+  triggerRef: RefObject<HTMLButtonElement | null>
 }
 
 export function SelectionResultsWorkbench({
+  drawerOpen,
+  onOpenExecutionStatus,
   result,
+  triggerRef,
 }: SelectionResultsWorkbenchProps) {
   const search = useSearch({ from: "/_workspace/selection" })
   const navigate = useNavigate({ from: "/selection" })
@@ -53,7 +68,6 @@ export function SelectionResultsWorkbench({
   const selectedSignal =
     currentSignals.find((signal) => getSignalKey(signal) === selectedKey) ??
     currentSignals[0]
-
   useEffect(() => {
     if (page > pageCount) {
       void navigate({
@@ -92,32 +106,49 @@ export function SelectionResultsWorkbench({
   return (
     <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-visible md:grid md:grid-cols-[minmax(0,1fr)_260px] md:overflow-hidden lg:grid-cols-[minmax(0,1.55fr)_minmax(280px,0.72fr)]">
       <section className="flex min-h-0 min-w-0 flex-1 flex-col overflow-visible rounded-lg border border-border/80 bg-card md:overflow-hidden">
-        <div className="grid shrink-0 gap-1.5 border-b border-border/60 p-2.5 sm:grid-cols-[minmax(0,260px)_auto_1fr] sm:items-center">
+        <div className="flex shrink-0 flex-wrap items-center gap-1.5 border-b border-border/60 p-2.5">
           <Input
             aria-label="搜索命中信号"
-            className="h-11 bg-background text-sm md:h-8"
+            className="h-11 min-w-0 flex-1 bg-background text-sm sm:max-w-[260px] md:h-8"
             onChange={(event) => handleQueryChange(event.target.value)}
             placeholder="搜索股票名称或代码"
             type="search"
             value={query}
           />
-          <select
-            aria-label="筛选信号分类"
-            className="h-11 rounded-lg border border-input bg-background px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 md:h-8"
-            onChange={(event) =>
-              handleCategoryChange(event.target.value as SignalCategoryFilter)
-            }
+          <Select
+            items={signalCategoryOptions}
+            onValueChange={(value) => {
+              if (typeof value === "string") {
+                handleCategoryChange(value as SignalCategoryFilter)
+              }
+            }}
             value={category}
           >
-            {signalCategoryOptions.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-          <span className="text-xs tabular-nums text-muted-foreground sm:justify-self-end">
+            <SelectTrigger
+              aria-label="筛选信号分类"
+              className="h-11 w-full bg-background text-sm sm:w-auto sm:min-w-36 md:h-8"
+            >
+              <SelectValue placeholder="筛选信号分类" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                {signalCategoryOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          <span className="text-xs tabular-nums text-muted-foreground sm:ml-auto">
             筛选结果 {signalsTotal} 条
           </span>
+          <ExecutionStatusTrigger
+            drawerOpen={drawerOpen}
+            onOpen={onOpenExecutionStatus}
+            result={result}
+            triggerRef={triggerRef}
+          />
         </div>
 
         <div className="flex min-h-0 min-w-0 flex-col md:flex-1 md:overflow-hidden">