feat: 界面

This commit is contained in:
mozzie 2024-09-05 13:01:55 +08:00
parent 3540413340
commit b2c5b581fc
3 changed files with 73 additions and 74 deletions

View File

@ -57,7 +57,7 @@
"react-dropzone": "14.2.3",
"react-hook-form": "7.53.0",
"react-icons": "^5.2.1",
"react-resizable-panels": "^2.0.20",
"react-resizable-panels": "^2.1.1",
"react-router-dom": "^6.26.0",
"tailwind-merge": "^2.4.0",
"tailwindcss-animate": "^1.0.7",

View File

@ -15,8 +15,13 @@ import { ToastAction } from "@/components/ui/toast";
import { useToast } from "@/components/ui/use-toast";
import { RocketIcon } from "@radix-ui/react-icons";
import { useLocation } from "react-router-dom";
import { Terminal } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { SparkleIcon, Terminal } from "lucide-react";
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable";
import {
Card,
CardContent,
@ -34,6 +39,7 @@ import {
CarouselPrevious,
} from "@/components/ui/carousel";
import { Series } from "../Datasource/SeriesTable";
import { ScrollArea } from "@/components/ui/scroll-area";
interface ScanProgress {
percentage: number;
@ -178,78 +184,71 @@ const Boot = () => {
className="h-full"
>
<div className="p-4 h-full flex flex-col">
{/* */}
<div className="flex flex-col items-center">
<div className="w-2/3 mt-8">
<Alert>
<Terminal className="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>dicom</AlertDescription>
</Alert>
<ResizablePanelGroup
direction="horizontal"
className="w-full h-full border rounded-lg"
>
<ResizablePanel defaultSize={38.2}>
<div className="flex flex-col h-full pt-4">
<ScrollArea className="flex-grow w-full h-full px-4 pb-2">
<div className="w-full flex flex-col gap-y-2">
{selectDicoms.map((dicom: Series, index: number) => (
<Card
key={index}
className="flex shadow-none flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent"
>
<div className="flex w-full flex-col gap-1">
<div className="flex items-center">
<div className="flex items-center gap-2">
<div className="font-semibold">
{dicom.PatientName}
</div>
<span className="flex h-2 w-2 rounded-full bg-blue-600"></span>
</div>
<div className="ml-auto text-xs text-foreground">
{dicom.PatientSex}
</div>
</div>
<div className="text-xs font-medium">
{dicom.PatientAge}
</div>
</div>
<div className="line-clamp-2 text-xs text-muted-foreground">
AI的判断结果metadata扔给大语言模型使
</div>
<div className="flex items-center gap-2">
<div className="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80">
</div>
<div className="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
</div>
<div className="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
</div>
<div className="w-2/3 mt-4">
<Button size="sm" className="rounded-full mr-2">
DICOM
</Button>
<Button variant="outline" size="sm" className="rounded-full">
MRI
</Button>
</div>
<div className="w-2/3 mt-8 flex flex-col items-center justify-center">
<Carousel setApi={setApi} className="w-full max-w-xs">
<CarouselContent>
{selectDicoms.map((item: Series, index: number) => (
<CarouselItem key={index}>
<Card>
<CardHeader>
<CardTitle>{item.PatientName}</CardTitle>
<CardDescription>
{item.PatientAge}, {item.PatientSex},{" "}
{item.filePaths.length}
</CardDescription>
</CardHeader>
<CardContent className="flex items-center ">
<span className="text-4xl font-semibold">
{index + 1}
</span>
</CardContent>
<CardFooter className="flex justify-between">
<Button variant="outline">Cancel</Button>
<Button></Button>
</CardFooter>
</Card>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
<div className="py-2 text-center text-sm text-muted-foreground">
{current} / {count}
</div>
</div>
<div className="w-2/3 mt-4"></div>
</div>
{/* card */}
<main className="flex-1 flex flex-col">
<div className="mt-4 flex-1">
<pre className="text-xs">{flaskInfo}</pre>
</div>
<footer className="flex justify-between">
<div className="left"></div>
</ScrollArea>
<div className="flex-shrink-0 px-4 py-4 text-right">
<Button
disabled={flaskWaiting}
className={`bg-teal-500 hover:bg-teal-400 ${
flaskWaiting ? "bg-teal-700" : ""
}`}
size={"lg"}
onClick={handleBootPythonServer}
>
<IoCheckmarkCircleSharp className={`mr-2 h-4 w-4}`} />
{flaskRunning ? "运行中" : "启动"} python
<SparkleIcon className="mr-2 h-4 w-4" />
{flaskRunning ? "运行中" : "启动"}
</Button>
</footer>
</main>
</div>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={61.8}>
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold"></span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</div>
{/* 导入数据dialog */}
<Dialog open={importDialogVisible} onOpenChange={setImportDialogVisible}>

View File

@ -149,7 +149,7 @@ importers:
specifier: ^5.2.1
version: 5.3.0(react@18.3.1)
react-resizable-panels:
specifier: ^2.0.20
specifier: ^2.1.1
version: 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react-router-dom:
specifier: ^6.26.0