feat(selection): 收紧执行状态交互与页面布局

2026-08-10 13:42:53 +08:00
parent abe4ffc408
commit 17237e01a7
15 changed files with 659 additions and 172 deletions
@@ -0,0 +1,75 @@
+import { XIcon } from "lucide-react"
+import type { RefObject } from "react"
+
+import type { SelectionResults } from "../api/selection.types"
+import { IncompleteEvaluationTable } from "./incomplete-evaluation-table"
+import { getSelectionRunStatusPresentation } from "./selection-presentation"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/ui/dialog"
+import { Button } from "@/shared/ui/button"
+
+interface ExecutionStatusDrawerProps {
+  finalFocus: RefObject<HTMLElement | null>
+  onOpenChange: (open: boolean) => void
+  open: boolean
+  result: SelectionResults
+}
+
+export function ExecutionStatusDrawer({
+  finalFocus,
+  onOpenChange,
+  open,
+  result,
+}: ExecutionStatusDrawerProps) {
+  const statusPresentation = getSelectionRunStatusPresentation(result.status)
+  const statusLabel = statusPresentation?.label ?? result.status
+  const tradeDate = result.target_trade_date ?? "未指定"
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        aria-label="选股执行状态"
+        className="top-0 right-0 left-auto flex h-[100svh] min-h-[100svh] w-[min(600px,100vw)] max-w-none translate-x-full translate-y-0 flex-col grid-cols-1 gap-0 rounded-l-xl rounded-r-none border-y-0 border-r-0 p-4 data-open:translate-x-0 data-closed:translate-x-full sm:max-w-none"
+        finalFocus={finalFocus}
+        id="selection-execution-status-drawer"
+        showCloseButton={false}
+      >
+        <DialogHeader className="shrink-0 gap-1 pr-10">
+          <DialogTitle className="text-lg">知行 B1 执行状态</DialogTitle>
+          <DialogDescription>
+            目标交易日：{tradeDate}；当前状态：{statusLabel}；未完成评估：
+            {result.failures.length} 条。
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="min-h-0 flex-1 overflow-y-auto py-4">
+          <IncompleteEvaluationTable failures={result.failures} />
+        </div>
+
+        <DialogFooter className="shrink-0 -mx-4 -mb-4 rounded-none px-4 py-3">
+          <DialogClose render={<Button variant="outline" />}>关闭</DialogClose>
+        </DialogFooter>
+
+        <DialogClose
+          render={
+            <Button
+              aria-label="关闭执行状态"
+              className="absolute top-3 right-3 size-11 md:size-8"
+              size="icon"
+              variant="ghost"
+            />
+          }
+        >
+          <XIcon aria-hidden="true" />
+        </DialogClose>
+      </DialogContent>
+    </Dialog>
+  )
+}