feat: 界面
This commit is contained in:
mozzie
parent
3540413340
commit
b2c5b581fc
|
|
@ -57,7 +57,7 @@
|
||||||
"react-dropzone": "14.2.3",
|
"react-dropzone": "14.2.3",
|
||||||
"react-hook-form": "7.53.0",
|
"react-hook-form": "7.53.0",
|
||||||
"react-icons": "^5.2.1",
|
"react-icons": "^5.2.1",
|
||||||
"react-resizable-panels": "^2.0.20",
|
"react-resizable-panels": "^2.1.1",
|
||||||
"react-router-dom": "^6.26.0",
|
"react-router-dom": "^6.26.0",
|
||||||
"tailwind-merge": "^2.4.0",
|
"tailwind-merge": "^2.4.0",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
|
|
||||||
|
|
@ -15,8 +15,13 @@ import { ToastAction } from "@/components/ui/toast";
|
||||||
import { useToast } from "@/components/ui/use-toast";
|
import { useToast } from "@/components/ui/use-toast";
|
||||||
import { RocketIcon } from "@radix-ui/react-icons";
|
import { RocketIcon } from "@radix-ui/react-icons";
|
||||||
import { useLocation } from "react-router-dom";
|
import { useLocation } from "react-router-dom";
|
||||||
import { Terminal } from "lucide-react";
|
import { SparkleIcon, Terminal } from "lucide-react";
|
||||||
import { Badge } from "@/components/ui/badge";
|
import {
|
||||||
|
ResizableHandle,
|
||||||
|
ResizablePanel,
|
||||||
|
ResizablePanelGroup,
|
||||||
|
} from "@/components/ui/resizable";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
CardContent,
|
CardContent,
|
||||||
|
|
@ -34,6 +39,7 @@ import {
|
||||||
CarouselPrevious,
|
CarouselPrevious,
|
||||||
} from "@/components/ui/carousel";
|
} from "@/components/ui/carousel";
|
||||||
import { Series } from "../Datasource/SeriesTable";
|
import { Series } from "../Datasource/SeriesTable";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
|
||||||
interface ScanProgress {
|
interface ScanProgress {
|
||||||
percentage: number;
|
percentage: number;
|
||||||
|
|
@ -178,78 +184,71 @@ const Boot = () => {
|
||||||
className="h-full"
|
className="h-full"
|
||||||
>
|
>
|
||||||
<div className="p-4 h-full flex flex-col">
|
<div className="p-4 h-full flex flex-col">
|
||||||
{/* */}
|
<ResizablePanelGroup
|
||||||
<div className="flex flex-col items-center">
|
direction="horizontal"
|
||||||
<div className="w-2/3 mt-8">
|
className="w-full h-full border rounded-lg"
|
||||||
<Alert>
|
>
|
||||||
<Terminal className="h-4 w-4" />
|
<ResizablePanel defaultSize={38.2}>
|
||||||
<AlertTitle>Heads up!</AlertTitle>
|
<div className="flex flex-col h-full pt-4">
|
||||||
<AlertDescription>海量dicom，一键自动测量</AlertDescription>
|
<ScrollArea className="flex-grow w-full h-full px-4 pb-2">
|
||||||
</Alert>
|
<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>
|
||||||
<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>
|
||||||
<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>
|
</Card>
|
||||||
</CarouselItem>
|
|
||||||
))}
|
))}
|
||||||
</CarouselContent>
|
|
||||||
<CarouselPrevious />
|
|
||||||
<CarouselNext />
|
|
||||||
</Carousel>
|
|
||||||
<div className="py-2 text-center text-sm text-muted-foreground">
|
|
||||||
{current} / {count}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ScrollArea>
|
||||||
<div className="w-2/3 mt-4">进度</div>
|
<div className="flex-shrink-0 px-4 py-4 text-right">
|
||||||
</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>
|
|
||||||
<Button
|
<Button
|
||||||
disabled={flaskWaiting}
|
disabled={flaskWaiting}
|
||||||
className={`bg-teal-500 hover:bg-teal-400 ${
|
|
||||||
flaskWaiting ? "bg-teal-700" : ""
|
|
||||||
}`}
|
|
||||||
size={"lg"}
|
|
||||||
onClick={handleBootPythonServer}
|
onClick={handleBootPythonServer}
|
||||||
>
|
>
|
||||||
<IoCheckmarkCircleSharp className={`mr-2 h-4 w-4}`} />
|
<SparkleIcon className="mr-2 h-4 w-4" />
|
||||||
{flaskRunning ? "运行中" : "启动"} python
|
{flaskRunning ? "运行中" : "启动"}
|
||||||
</Button>
|
</Button>
|
||||||
</footer>
|
</div>
|
||||||
</main>
|
</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>
|
</div>
|
||||||
{/* 导入数据dialog */}
|
{/* 导入数据dialog */}
|
||||||
<Dialog open={importDialogVisible} onOpenChange={setImportDialogVisible}>
|
<Dialog open={importDialogVisible} onOpenChange={setImportDialogVisible}>
|
||||||
|
|
|
||||||
|
|
@ -149,7 +149,7 @@ importers:
|
||||||
specifier: ^5.2.1
|
specifier: ^5.2.1
|
||||||
version: 5.3.0(react@18.3.1)
|
version: 5.3.0(react@18.3.1)
|
||||||
react-resizable-panels:
|
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)
|
version: 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||||
react-router-dom:
|
react-router-dom:
|
||||||
specifier: ^6.26.0
|
specifier: ^6.26.0
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user