2344 lines
111 KiB
TypeScript
2344 lines
111 KiB
TypeScript
/**
|
||
* @license
|
||
* SPDX-License-Identifier: Apache-2.0
|
||
*/
|
||
|
||
import React, { useState, useEffect, useRef } from 'react';
|
||
import {
|
||
Activity,
|
||
Check,
|
||
Download,
|
||
Layers,
|
||
MonitorPlay,
|
||
Save,
|
||
LayoutDashboard,
|
||
Database,
|
||
Image as ImageIcon,
|
||
Users,
|
||
LogOut,
|
||
UserPlus,
|
||
Key,
|
||
ChevronRight,
|
||
ShieldCheck,
|
||
Search,
|
||
Settings,
|
||
Plus,
|
||
Play as PlayIcon,
|
||
RefreshCw,
|
||
Film,
|
||
FolderOpen,
|
||
Server,
|
||
AlertCircle,
|
||
Info,
|
||
Eye,
|
||
EyeOff,
|
||
X
|
||
} from 'lucide-react';
|
||
|
||
// --- Types ---
|
||
type User = {
|
||
id: string;
|
||
username: string;
|
||
password: string;
|
||
role: 'admin' | 'user';
|
||
createdAt: string;
|
||
};
|
||
|
||
type Page = 'overview' | 'library' | 'workspace' | 'users';
|
||
|
||
type BackendJob = {
|
||
id: string;
|
||
kind: 'deformation' | 'video' | 'zip';
|
||
owner?: string;
|
||
status: 'running' | 'completed' | 'failed';
|
||
message: string;
|
||
progress?: number;
|
||
params?: any;
|
||
result?: any;
|
||
error?: string;
|
||
};
|
||
|
||
type ZipJobsByTarget = Record<string, BackendJob>;
|
||
|
||
type PackageOptions = {
|
||
dicom: string[];
|
||
images: string[];
|
||
};
|
||
|
||
const DICOM_PACKAGE_OPTIONS = [
|
||
{ key: 'original', label: '原始序列 DICOM' },
|
||
{ key: 'hard_boundary', label: '硬边界 DICOM' },
|
||
{ key: 'gaussian_smooth', label: '高斯平滑 DICOM' },
|
||
{ key: 'soft_transition', label: '软过渡重建 DICOM' },
|
||
];
|
||
|
||
const IMAGE_PACKAGE_OPTIONS = [
|
||
{ key: 'comparison', label: '原始图片四状态过程对比图' },
|
||
{ key: 'original', label: '原始序列' },
|
||
{ key: 'hard_boundary', label: '硬边界' },
|
||
{ key: 'gaussian_smooth', label: '高斯平滑' },
|
||
{ key: 'soft_transition', label: '软过渡重建' },
|
||
];
|
||
|
||
const DEFAULT_PACKAGE_OPTIONS: PackageOptions = {
|
||
dicom: DICOM_PACKAGE_OPTIONS.map(option => option.key),
|
||
images: IMAGE_PACKAGE_OPTIONS.map(option => option.key),
|
||
};
|
||
|
||
const VIDEO_SOURCE_OPTIONS = [
|
||
{ key: 'hard_boundary', label: '硬边界', mode: 'hard_boundary' },
|
||
{ key: 'gaussian_smooth', label: '高斯平滑', mode: 'gaussian_smooth' },
|
||
{ key: 'soft_transition', label: '软过渡重建', mode: 'soft_transition' },
|
||
];
|
||
|
||
const PREVIEW_ALGORITHM_OPTIONS = VIDEO_SOURCE_OPTIONS;
|
||
|
||
const VIEWER_PLANE_OPTIONS = [
|
||
{ key: 'coronal', label: '冠状位' },
|
||
{ key: 'sagittal', label: '矢状位' },
|
||
];
|
||
|
||
const VIEWER_WINDOW_OPTIONS = [
|
||
{ key: 'default', label: '默认' },
|
||
{ key: 'bone', label: '骨窗' },
|
||
{ key: 'soft_tissue', label: '软组织' },
|
||
{ key: 'brain', label: '脑窗' },
|
||
{ key: 'lung', label: '肺窗' },
|
||
];
|
||
|
||
type LibraryItem = {
|
||
id: string;
|
||
patientId: string;
|
||
date: string;
|
||
version: string;
|
||
status: 'processed' | 'pending';
|
||
size: number;
|
||
previewColor: string;
|
||
dicomPath: string;
|
||
fileCount?: number;
|
||
source?: 'seed' | 'upload';
|
||
};
|
||
|
||
type LibraryInfo = {
|
||
id: string;
|
||
patientId: string;
|
||
fileCount: number;
|
||
groups: {
|
||
title: string;
|
||
items: { label: string; value: string }[];
|
||
}[];
|
||
};
|
||
|
||
type LibraryViewerPreview = {
|
||
imageUrl: string;
|
||
index: number;
|
||
count: number;
|
||
plane: string;
|
||
window: string;
|
||
windowLabel: string;
|
||
patientId: string;
|
||
modelId?: string;
|
||
maskPixels?: number;
|
||
};
|
||
|
||
type StlModel = {
|
||
modelId: string;
|
||
name: string;
|
||
triangleCount: number;
|
||
};
|
||
|
||
type StoredDeformationJob = {
|
||
job: BackendJob;
|
||
progress: number;
|
||
renderVersion?: string;
|
||
};
|
||
|
||
const DEFORMATION_JOB_STORAGE_KEY = 'head_ct_morph_deformation_job';
|
||
const DEFORMATION_RESULT_RENDER_VERSION = 'quick-preview-cutoff-only-v1';
|
||
const LIBRARY_SLICE_STORAGE_KEY = 'head_ct_morph_library_slice_index';
|
||
|
||
const API_BASE = typeof window === 'undefined'
|
||
? 'http://127.0.0.1:8787'
|
||
: `${window.location.protocol}//${window.location.hostname}:8787`;
|
||
|
||
function progressFromJob(job: BackendJob, fallback = 0) {
|
||
if (job.status === 'completed') return 100;
|
||
if (typeof job.progress === 'number') {
|
||
return Math.max(0, Math.min(100, job.progress));
|
||
}
|
||
return Math.max(0, Math.min(95, fallback));
|
||
}
|
||
|
||
function formatProgress(value: number) {
|
||
const bounded = Math.max(0, Math.min(100, value));
|
||
return Number.isInteger(bounded) ? `${bounded}` : bounded.toFixed(1);
|
||
}
|
||
|
||
function readStoredDeformationJob(): StoredDeformationJob | null {
|
||
if (typeof window === 'undefined') return null;
|
||
try {
|
||
const rawValue = window.localStorage.getItem(DEFORMATION_JOB_STORAGE_KEY);
|
||
if (!rawValue) return null;
|
||
const parsed = JSON.parse(rawValue) as StoredDeformationJob;
|
||
if (!parsed?.job?.id) return null;
|
||
if (parsed.renderVersion !== DEFORMATION_RESULT_RENDER_VERSION) {
|
||
window.localStorage.removeItem(DEFORMATION_JOB_STORAGE_KEY);
|
||
return null;
|
||
}
|
||
return {
|
||
job: parsed.job,
|
||
progress: Math.max(0, Math.min(100, parsed.progress || 0)),
|
||
};
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function readStoredLibrarySliceIndexes(): Record<string, number> {
|
||
if (typeof window === 'undefined') return {};
|
||
try {
|
||
const rawValue = window.localStorage.getItem(LIBRARY_SLICE_STORAGE_KEY);
|
||
if (!rawValue) return {};
|
||
const parsed = JSON.parse(rawValue);
|
||
return parsed && typeof parsed === 'object' ? parsed : {};
|
||
} catch {
|
||
return {};
|
||
}
|
||
}
|
||
|
||
function readStoredLibrarySliceIndex(itemId: string, fallback: number, count: number) {
|
||
const value = readStoredLibrarySliceIndexes()[itemId];
|
||
const numericValue = typeof value === 'number' ? value : fallback;
|
||
return Math.max(0, Math.min(Math.max(0, count - 1), Math.round(numericValue)));
|
||
}
|
||
|
||
function storeLibrarySliceIndex(itemId: string, index: number) {
|
||
if (typeof window === 'undefined') return;
|
||
try {
|
||
const current = readStoredLibrarySliceIndexes();
|
||
current[itemId] = index;
|
||
window.localStorage.setItem(LIBRARY_SLICE_STORAGE_KEY, JSON.stringify(current));
|
||
} catch {
|
||
// 保存失败不影响影像预览使用。
|
||
}
|
||
}
|
||
|
||
function LibraryDicomPreview({ item }: { item: LibraryItem }) {
|
||
const count = Math.max(1, item.fileCount || 1);
|
||
const middleIndex = Math.max(0, Math.floor(count / 2));
|
||
const [sliceIndex, setSliceIndex] = useState(() => readStoredLibrarySliceIndex(item.id, middleIndex, count));
|
||
const [requestedSliceIndex, setRequestedSliceIndex] = useState(sliceIndex);
|
||
const [previewImage, setPreviewImage] = useState('');
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
|
||
useEffect(() => {
|
||
const nextCount = Math.max(1, item.fileCount || 1);
|
||
const nextMiddleIndex = Math.max(0, Math.floor(nextCount / 2));
|
||
const storedIndex = readStoredLibrarySliceIndex(item.id, nextMiddleIndex, nextCount);
|
||
setSliceIndex(storedIndex);
|
||
setRequestedSliceIndex(storedIndex);
|
||
}, [item.id, item.fileCount]);
|
||
|
||
useEffect(() => {
|
||
storeLibrarySliceIndex(item.id, Math.min(sliceIndex, count - 1));
|
||
}, [item.id, sliceIndex, count]);
|
||
|
||
useEffect(() => {
|
||
const timer = window.setTimeout(() => {
|
||
setRequestedSliceIndex(sliceIndex);
|
||
}, 120);
|
||
return () => window.clearTimeout(timer);
|
||
}, [sliceIndex]);
|
||
|
||
useEffect(() => {
|
||
const controller = new AbortController();
|
||
setIsLoading(true);
|
||
setError('');
|
||
fetch(`${API_BASE}/api/library/preview?id=${encodeURIComponent(item.id)}&index=${requestedSliceIndex}`, {
|
||
signal: controller.signal
|
||
})
|
||
.then(async response => {
|
||
const data = await response.json();
|
||
if (!response.ok) throw new Error(data.error || '预览生成失败');
|
||
setPreviewImage(`${API_BASE}${data.imageUrl}`);
|
||
(data.neighbors || []).forEach((url: string) => {
|
||
fetch(`${API_BASE}${url}`, { signal: controller.signal }).catch(() => {});
|
||
});
|
||
})
|
||
.catch(error => {
|
||
if ((error as Error).name !== 'AbortError') setError((error as Error).message);
|
||
})
|
||
.finally(() => {
|
||
if (!controller.signal.aborted) setIsLoading(false);
|
||
});
|
||
return () => controller.abort();
|
||
}, [item.id, requestedSliceIndex]);
|
||
|
||
return (
|
||
<div className="h-52 bg-slate-950 relative flex items-center justify-center border-b border-slate-100 shadow-inner overflow-hidden">
|
||
<div className="absolute top-3 left-4 flex gap-1.5 z-10">
|
||
<div className="w-1.5 h-1.5 rounded-full bg-white/25"></div>
|
||
<div className="w-1.5 h-1.5 rounded-full bg-white/25"></div>
|
||
</div>
|
||
<div className="absolute top-3 right-4 z-10">
|
||
<span className={`text-[8px] font-black px-2 py-0.5 rounded border ${item.status === 'processed' ? 'bg-green-500/20 text-green-400 border-green-500/30' : 'bg-amber-500/20 text-amber-400 border-amber-500/30'}`}>
|
||
{item.status.toUpperCase()}
|
||
</span>
|
||
</div>
|
||
|
||
{previewImage && !error ? (
|
||
<img src={previewImage} className="w-full h-full object-contain" />
|
||
) : (
|
||
<div className="text-center text-white/35">
|
||
<ImageIcon size={34} className="mx-auto mb-2" />
|
||
<p className="text-[10px] font-bold">{error || (isLoading ? '正在生成预览...' : '等待预览')}</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="absolute inset-x-0 bottom-0 p-3 bg-gradient-to-t from-black/85 via-black/45 to-transparent">
|
||
<div className="flex items-center justify-between text-[8px] font-mono text-white/65 mb-2 uppercase tracking-[0.18em]">
|
||
<span>Axial DICOM</span>
|
||
<span>{sliceIndex + 1} / {count}</span>
|
||
</div>
|
||
<input
|
||
type="range"
|
||
min="0"
|
||
max={count - 1}
|
||
value={Math.min(sliceIndex, count - 1)}
|
||
onChange={event => setSliceIndex(parseInt(event.target.value, 10))}
|
||
className="w-full h-1 accent-blue-500 cursor-pointer"
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function OverviewDicomThumbnail({ item }: { item: LibraryItem }) {
|
||
const [previewImage, setPreviewImage] = useState('');
|
||
const [error, setError] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const controller = new AbortController();
|
||
const count = Math.max(1, item.fileCount || 1);
|
||
const middleIndex = Math.max(0, Math.floor(count / 2));
|
||
const index = readStoredLibrarySliceIndex(item.id, middleIndex, count);
|
||
|
||
setError(false);
|
||
fetch(`${API_BASE}/api/library/preview?id=${encodeURIComponent(item.id)}&index=${index}`, {
|
||
signal: controller.signal
|
||
})
|
||
.then(async response => {
|
||
const data = await response.json();
|
||
if (!response.ok) throw new Error(data.error || '预览生成失败');
|
||
setPreviewImage(`${API_BASE}${data.imageUrl}`);
|
||
})
|
||
.catch(error => {
|
||
if ((error as Error).name !== 'AbortError') setError(true);
|
||
});
|
||
|
||
return () => controller.abort();
|
||
}, [item.id, item.fileCount]);
|
||
|
||
return (
|
||
<div className="w-16 h-12 rounded-xl flex items-center justify-center bg-slate-950 border border-slate-700/50 overflow-hidden relative shadow-inner">
|
||
{previewImage && !error ? (
|
||
<img src={previewImage} className="w-full h-full object-contain" />
|
||
) : (
|
||
<ImageIcon size={18} className="text-white/35" />
|
||
)}
|
||
<div className="absolute inset-0 bg-blue-500/10 pointer-events-none"></div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function App() {
|
||
const restoredDeformationJob = useRef(readStoredDeformationJob()).current;
|
||
const downloadedZipJobIds = useRef<Set<string>>(new Set());
|
||
|
||
// --- Authentication State ---
|
||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||
const [loginUsername, setLoginUsername] = useState('admin');
|
||
const [loginPassword, setLoginPassword] = useState('123456');
|
||
const [loginError, setLoginError] = useState('');
|
||
|
||
// --- App Flow State ---
|
||
const [currentPage, setCurrentPage] = useState<Page>('workspace');
|
||
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
||
|
||
useEffect(() => {
|
||
// Automatically collapse sidebar when on workspace page to give more space
|
||
if (currentPage === 'workspace') {
|
||
setIsSidebarCollapsed(true);
|
||
} else {
|
||
setIsSidebarCollapsed(false);
|
||
}
|
||
}, [currentPage]);
|
||
|
||
const [users, setUsers] = useState<User[]>([
|
||
{ id: '1', username: 'admin', password: '123456', role: 'admin', createdAt: '2024-01-01' },
|
||
{ id: '2', username: 'doctor1', password: 'password123', role: 'user', createdAt: '2024-05-01' }
|
||
]);
|
||
|
||
const [libraryData, setLibraryData] = useState<LibraryItem[]>([]);
|
||
const [selectedLibraryId, setSelectedLibraryId] = useState('');
|
||
const [isUploadingDicom, setIsUploadingDicom] = useState(false);
|
||
const [libraryInfo, setLibraryInfo] = useState<LibraryInfo | null>(null);
|
||
const [isLibraryInfoLoading, setIsLibraryInfoLoading] = useState(false);
|
||
const [libraryViewerItem, setLibraryViewerItem] = useState<LibraryItem | null>(null);
|
||
const [viewerPlane, setViewerPlane] = useState('coronal');
|
||
const [viewerWindow, setViewerWindow] = useState('default');
|
||
const [viewerSliceIndex, setViewerSliceIndex] = useState<number | 'middle'>('middle');
|
||
const [debouncedViewerSliceIndex, setDebouncedViewerSliceIndex] = useState<number | 'middle'>('middle');
|
||
const [viewerPreview, setViewerPreview] = useState<LibraryViewerPreview | null>(null);
|
||
const [isViewerLoading, setIsViewerLoading] = useState(false);
|
||
const [viewerError, setViewerError] = useState('');
|
||
const [stlModel, setStlModel] = useState<StlModel | null>(null);
|
||
const [isUploadingStl, setIsUploadingStl] = useState(false);
|
||
const [isModelSlicingEnabled, setIsModelSlicingEnabled] = useState(false);
|
||
const [modelClipStart, setModelClipStart] = useState(0);
|
||
const [modelClipEnd, setModelClipEnd] = useState(0);
|
||
const [modelStartPreview, setModelStartPreview] = useState<LibraryViewerPreview | null>(null);
|
||
const [modelEndPreview, setModelEndPreview] = useState<LibraryViewerPreview | null>(null);
|
||
const [isModelMaskLoading, setIsModelMaskLoading] = useState(false);
|
||
const [modelMaskError, setModelMaskError] = useState('');
|
||
const folderUploadInputRef = useRef<HTMLInputElement | null>(null);
|
||
const zipUploadInputRef = useRef<HTMLInputElement | null>(null);
|
||
const stlUploadInputRef = useRef<HTMLInputElement | null>(null);
|
||
|
||
// --- Simulation State (Workspace) ---
|
||
const [cervicalRotation, setCervicalRotation] = useState(14.5);
|
||
const [transitionWidth, setTransitionWidth] = useState(90);
|
||
const [previewGaussianSigma, setPreviewGaussianSigma] = useState(3);
|
||
const [previewAlgorithm, setPreviewAlgorithm] = useState('soft_transition');
|
||
const [showPreviewCutoffLine, setShowPreviewCutoffLine] = useState(true);
|
||
const [isSimulating, setIsSimulating] = useState(restoredDeformationJob?.job.status === 'running');
|
||
const [progress, setProgress] = useState(restoredDeformationJob ? progressFromJob(restoredDeformationJob.job, restoredDeformationJob.progress) : 0);
|
||
const [toastMessage, setToastMessage] = useState("");
|
||
const [backendOnline, setBackendOnline] = useState(false);
|
||
const [backendMessage, setBackendMessage] = useState('正在连接本地 Python 后端...');
|
||
const [previewImage, setPreviewImage] = useState('');
|
||
const [processPreviewImage, setProcessPreviewImage] = useState('');
|
||
const [isPreviewLoading, setIsPreviewLoading] = useState(false);
|
||
const [deformationJob, setDeformationJob] = useState<BackendJob | null>(restoredDeformationJob?.job || null);
|
||
const [videoJob, setVideoJob] = useState<BackendJob | null>(null);
|
||
const [zipJobs, setZipJobs] = useState<ZipJobsByTarget>({});
|
||
const [isPackageDialogOpen, setIsPackageDialogOpen] = useState(false);
|
||
const [packageOptions, setPackageOptions] = useState<PackageOptions>(DEFAULT_PACKAGE_OPTIONS);
|
||
const [videoMaxAngle, setVideoMaxAngle] = useState(20);
|
||
const [videoDuration, setVideoDuration] = useState(6);
|
||
const [videoSource, setVideoSource] = useState('hard_boundary');
|
||
const [showVideoArrow, setShowVideoArrow] = useState(true);
|
||
|
||
// --- User Management Shared State ---
|
||
const [newUsername, setNewUsername] = useState('');
|
||
const [newPassword, setNewPassword] = useState('');
|
||
const [isChangingOwnPass, setIsChangingOwnPass] = useState(false);
|
||
const [pwChangeInput, setPwChangeInput] = useState('');
|
||
const [showAddUser, setShowAddUser] = useState(false);
|
||
const [activeUserMenu, setActiveUserMenu] = useState<string | null>(null);
|
||
const [isResettingDemo, setIsResettingDemo] = useState(false);
|
||
|
||
const selectedDataset = libraryData.find(item => item.id === selectedLibraryId) || libraryData[0];
|
||
const selectedInputDir = selectedDataset?.dicomPath || '';
|
||
const selectedVideoSource = VIDEO_SOURCE_OPTIONS.find(option => option.key === videoSource) || VIDEO_SOURCE_OPTIONS[0];
|
||
const videoSourceInputDir = selectedInputDir;
|
||
const isVideoSourceReady = Boolean(videoSourceInputDir);
|
||
const viewerFrameCount = Math.max(1, viewerPreview?.count || modelStartPreview?.count || modelEndPreview?.count || libraryViewerItem?.fileCount || 1);
|
||
const clampedModelStart = Math.max(0, Math.min(viewerFrameCount - 1, modelClipStart));
|
||
const clampedModelEnd = Math.max(0, Math.min(viewerFrameCount - 1, modelClipEnd));
|
||
|
||
useEffect(() => {
|
||
if (!activeUserMenu) return;
|
||
|
||
const closeUserMenuOnOutsideClick = (event: PointerEvent) => {
|
||
const target = event.target as HTMLElement | null;
|
||
if (!target?.closest('[data-user-menu-root="true"]')) {
|
||
setActiveUserMenu(null);
|
||
}
|
||
};
|
||
|
||
document.addEventListener('pointerdown', closeUserMenuOnOutsideClick);
|
||
return () => document.removeEventListener('pointerdown', closeUserMenuOnOutsideClick);
|
||
}, [activeUserMenu]);
|
||
|
||
const showToast = (message: string) => {
|
||
setToastMessage(message);
|
||
setTimeout(() => setToastMessage(""), 3000);
|
||
};
|
||
|
||
const apiRequest = async (path: string, options?: RequestInit) => {
|
||
const response = await fetch(`${API_BASE}${path}`, {
|
||
...options,
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
...(options?.headers || {})
|
||
}
|
||
});
|
||
const data = await response.json();
|
||
if (!response.ok) {
|
||
throw new Error(data.error || '本地 Python 后端请求失败');
|
||
}
|
||
return data;
|
||
};
|
||
|
||
const fileUrl = (path?: string) => path ? `${API_BASE}/api/file?path=${encodeURIComponent(path)}` : '';
|
||
|
||
const triggerDownload = async (path?: string, name?: string) => {
|
||
if (!path) return;
|
||
const directUrl = fileUrl(path);
|
||
try {
|
||
const response = await fetch(directUrl);
|
||
if (!response.ok) throw new Error('下载文件读取失败');
|
||
const blob = await response.blob();
|
||
const objectUrl = URL.createObjectURL(blob);
|
||
const link = document.createElement('a');
|
||
link.href = objectUrl;
|
||
link.download = name || path.split('/').pop() || 'download';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
link.remove();
|
||
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
|
||
return;
|
||
} catch {
|
||
showToast('浏览器安全策略阻止直接下载时，将尝试备用下载方式');
|
||
}
|
||
|
||
const link = document.createElement('a');
|
||
link.href = directUrl;
|
||
if (name) link.download = name;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
link.remove();
|
||
};
|
||
|
||
const downloadPreviewImage = () => {
|
||
if (!previewImage) return;
|
||
const link = document.createElement('a');
|
||
link.href = previewImage;
|
||
link.download = `quick_2d_preview_${previewAlgorithm}_${cervicalRotation.toFixed(1)}deg.png`;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
link.remove();
|
||
};
|
||
|
||
const downloadProcessPreviewImage = () => {
|
||
if (!processPreviewImage) return;
|
||
const link = document.createElement('a');
|
||
link.href = processPreviewImage;
|
||
link.download = `four_state_process_preview_${cervicalRotation.toFixed(1)}deg.png`;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
link.remove();
|
||
};
|
||
|
||
const clearDeformationTask = () => {
|
||
setDeformationJob(null);
|
||
setProgress(0);
|
||
setIsSimulating(false);
|
||
setZipJobs({});
|
||
if (typeof window !== 'undefined') {
|
||
window.localStorage.removeItem(DEFORMATION_JOB_STORAGE_KEY);
|
||
}
|
||
};
|
||
|
||
const applyDeformationJob = (job: BackendJob) => {
|
||
setDeformationJob(job);
|
||
setProgress(current => progressFromJob(job, current));
|
||
setIsSimulating(job.status === 'running');
|
||
};
|
||
|
||
const handlePackageDownload = async (target: string, selectedPackageOptions?: PackageOptions) => {
|
||
if (!deformationJob?.id || zipJobs[target]?.status === 'running') return;
|
||
try {
|
||
const job = await apiRequest('/api/deformation/package', {
|
||
method: 'POST',
|
||
body: JSON.stringify({
|
||
username: currentUser?.username || 'anonymous',
|
||
jobId: deformationJob.id,
|
||
target,
|
||
packageOptions: selectedPackageOptions
|
||
})
|
||
}) as BackendJob;
|
||
setZipJobs(current => ({ ...current, [target]: job }));
|
||
showToast(target === 'all' ? '四状态 ZIP 开始打包' : '本状态 ZIP 开始打包');
|
||
} catch (error) {
|
||
setZipJobs(current => ({
|
||
...current,
|
||
[target]: {
|
||
id: `failed_${Date.now()}`,
|
||
kind: 'zip',
|
||
status: 'failed',
|
||
message: '打包失败。',
|
||
error: (error as Error).message,
|
||
}
|
||
}));
|
||
showToast((error as Error).message);
|
||
}
|
||
};
|
||
|
||
const togglePackageOption = (group: keyof PackageOptions, key: string) => {
|
||
setPackageOptions(current => {
|
||
const exists = current[group].includes(key);
|
||
return {
|
||
...current,
|
||
[group]: exists
|
||
? current[group].filter(value => value !== key)
|
||
: [...current[group], key],
|
||
};
|
||
});
|
||
};
|
||
|
||
const setPackageGroupSelection = (group: keyof PackageOptions, keys: string[]) => {
|
||
setPackageOptions(current => ({ ...current, [group]: keys }));
|
||
};
|
||
|
||
const invertPackageGroupSelection = (group: keyof PackageOptions, allKeys: string[]) => {
|
||
setPackageOptions(current => ({
|
||
...current,
|
||
[group]: allKeys.filter(key => !current[group].includes(key)),
|
||
}));
|
||
};
|
||
|
||
const confirmPackageDownload = () => {
|
||
if (!packageOptions.dicom.length && !packageOptions.images.length) {
|
||
showToast('请至少选择一个打包内容');
|
||
return;
|
||
}
|
||
setIsPackageDialogOpen(false);
|
||
handlePackageDownload('all', packageOptions);
|
||
};
|
||
|
||
const downloadFourStateDicomZip = () => {
|
||
handlePackageDownload('all', {
|
||
dicom: DICOM_PACKAGE_OPTIONS.map(option => option.key),
|
||
images: [],
|
||
});
|
||
};
|
||
|
||
const loadLibrary = async () => {
|
||
const data = await apiRequest('/api/library');
|
||
const items = data.items || [];
|
||
setLibraryData(items);
|
||
setSelectedLibraryId(current => items.some((item: LibraryItem) => item.id === current) ? current : items[0]?.id || '');
|
||
return items;
|
||
};
|
||
|
||
const resetDemoEnvironment = async () => {
|
||
if (isResettingDemo) return;
|
||
if (!confirm('确定恢复演示环境出厂设置吗？影像数据库将只保留 Ori_Head_CT，并清空当前任务结果。')) return;
|
||
|
||
setIsResettingDemo(true);
|
||
try {
|
||
const data = await apiRequest('/api/demo/reset', { method: 'POST' }) as { items?: LibraryItem[] };
|
||
const items = data.items?.length ? data.items : await loadLibrary();
|
||
setLibraryData(items);
|
||
setSelectedLibraryId(items[0]?.id || '');
|
||
setLibraryInfo(null);
|
||
setPreviewImage('');
|
||
setProcessPreviewImage('');
|
||
setVideoJob(null);
|
||
setZipJobs({});
|
||
clearDeformationTask();
|
||
setBackendOnline(true);
|
||
setBackendMessage('演示环境已恢复出厂设置');
|
||
showToast('已恢复演示环境出厂设置');
|
||
} catch (error) {
|
||
showToast((error as Error).message);
|
||
} finally {
|
||
setIsResettingDemo(false);
|
||
}
|
||
};
|
||
|
||
const refreshBackendDefaults = async () => {
|
||
try {
|
||
const data = await apiRequest('/api/defaults');
|
||
await loadLibrary();
|
||
setBackendOnline(true);
|
||
setBackendMessage('本地 Python 后端已连接');
|
||
} catch (error) {
|
||
setBackendOnline(false);
|
||
setBackendMessage('未连接：请先运行 python web_backend.py');
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
refreshBackendDefaults();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!isLoggedIn || !currentUser?.username) return;
|
||
|
||
let isActive = true;
|
||
const restoreUserDeformationJob = async () => {
|
||
try {
|
||
const data = await apiRequest(
|
||
`/api/user/job?username=${encodeURIComponent(currentUser.username)}&kind=deformation`
|
||
) as { job?: BackendJob | null };
|
||
if (!isActive || !data.job) return;
|
||
applyDeformationJob(data.job);
|
||
if (data.job.status === 'running') {
|
||
showToast('已恢复当前账号的四状态任务进度');
|
||
}
|
||
} catch {
|
||
// 账号任务恢复失败不影响正常使用工作站。
|
||
}
|
||
};
|
||
|
||
restoreUserDeformationJob();
|
||
return () => {
|
||
isActive = false;
|
||
};
|
||
}, [isLoggedIn, currentUser?.username]);
|
||
|
||
useEffect(() => {
|
||
if (typeof window === 'undefined') return;
|
||
if (!deformationJob) {
|
||
window.localStorage.removeItem(DEFORMATION_JOB_STORAGE_KEY);
|
||
return;
|
||
}
|
||
|
||
window.localStorage.setItem(
|
||
DEFORMATION_JOB_STORAGE_KEY,
|
||
JSON.stringify({
|
||
job: deformationJob,
|
||
progress: deformationJob.status === 'completed' ? 100 : progress,
|
||
renderVersion: DEFORMATION_RESULT_RENDER_VERSION,
|
||
})
|
||
);
|
||
}, [deformationJob, progress]);
|
||
|
||
useEffect(() => {
|
||
if (!deformationJob || deformationJob.status !== 'running') return;
|
||
|
||
let isActive = true;
|
||
const pollDeformationJob = async () => {
|
||
try {
|
||
const job = await apiRequest(`/api/job?id=${deformationJob.id}`) as BackendJob;
|
||
if (!isActive) return;
|
||
setDeformationJob(job);
|
||
setProgress(value => progressFromJob(job, Math.min(value + 8, 95)));
|
||
if (job.status === 'completed') {
|
||
setIsSimulating(false);
|
||
showToast('四状态 DICOM 与过程图已生成');
|
||
}
|
||
if (job.status === 'failed') {
|
||
setIsSimulating(false);
|
||
showToast(job.error || '形变任务失败');
|
||
}
|
||
} catch (error) {
|
||
if (!isActive) return;
|
||
setIsSimulating(false);
|
||
setDeformationJob(job => job ? { ...job, status: 'failed', error: (error as Error).message } : null);
|
||
}
|
||
};
|
||
|
||
pollDeformationJob();
|
||
const timer = setInterval(pollDeformationJob, 1500);
|
||
return () => {
|
||
isActive = false;
|
||
clearInterval(timer);
|
||
};
|
||
}, [deformationJob?.id, deformationJob?.status]);
|
||
|
||
useEffect(() => {
|
||
if (!videoJob || videoJob.status !== 'running') return;
|
||
const timer = setInterval(async () => {
|
||
try {
|
||
const job = await apiRequest(`/api/job?id=${videoJob.id}`) as BackendJob;
|
||
setVideoJob(job);
|
||
if (job.status === 'completed') showToast('仰头变化视频已生成');
|
||
if (job.status === 'failed') showToast(job.error || '视频生成失败');
|
||
} catch (error) {
|
||
setVideoJob(job => job ? { ...job, status: 'failed', error: (error as Error).message } : null);
|
||
}
|
||
}, 1500);
|
||
return () => clearInterval(timer);
|
||
}, [videoJob?.id, videoJob?.status]);
|
||
|
||
useEffect(() => {
|
||
const runningEntries = (Object.entries(zipJobs) as [string, BackendJob][])
|
||
.filter(([, job]) => job.status === 'running');
|
||
if (!runningEntries.length) return;
|
||
|
||
let isActive = true;
|
||
const pollZipJobs = async () => {
|
||
await Promise.all(runningEntries.map(async ([target, currentJob]) => {
|
||
try {
|
||
const job = await apiRequest(`/api/job?id=${currentJob.id}`) as BackendJob;
|
||
if (!isActive) return;
|
||
const zipProgressStep = target === 'all' ? 0.4 : 2;
|
||
const displayJob = job.status === 'running'
|
||
? {
|
||
...job,
|
||
progress: Math.min(
|
||
95,
|
||
Math.max(progressFromJob(currentJob, 10) + zipProgressStep, progressFromJob(job, 10))
|
||
)
|
||
}
|
||
: job;
|
||
setZipJobs(current => ({ ...current, [target]: displayJob }));
|
||
if (job.status === 'completed') {
|
||
if (!downloadedZipJobIds.current.has(job.id)) {
|
||
downloadedZipJobIds.current.add(job.id);
|
||
await triggerDownload(job.result?.file?.path, job.result?.file?.name);
|
||
showToast('ZIP 打包完成，已开始下载');
|
||
}
|
||
}
|
||
if (job.status === 'failed') {
|
||
showToast(job.error || 'ZIP 打包失败');
|
||
}
|
||
} catch (error) {
|
||
if (!isActive) return;
|
||
setZipJobs(current => ({
|
||
...current,
|
||
[target]: { ...currentJob, status: 'failed', error: (error as Error).message }
|
||
}));
|
||
}
|
||
}));
|
||
};
|
||
|
||
pollZipJobs();
|
||
const timer = setInterval(pollZipJobs, 1500);
|
||
return () => {
|
||
isActive = false;
|
||
clearInterval(timer);
|
||
};
|
||
}, [zipJobs]);
|
||
|
||
const handleLogin = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
const user = users.find(u => u.username === loginUsername && u.password === loginPassword);
|
||
if (user) {
|
||
setIsLoggedIn(true);
|
||
setCurrentUser(user);
|
||
setLoginError('');
|
||
showToast(`欢迎, ${user.username}`);
|
||
} else {
|
||
setLoginError('用户名或密码错误');
|
||
}
|
||
};
|
||
|
||
const handleLogout = () => {
|
||
setIsLoggedIn(false);
|
||
setCurrentUser(null);
|
||
setCurrentPage('workspace');
|
||
};
|
||
|
||
const addUser = () => {
|
||
if (!newUsername || !newPassword) return;
|
||
if (users.find(u => u.username === newUsername)) {
|
||
showToast('用户名已存在');
|
||
return;
|
||
}
|
||
const newUser: User = {
|
||
id: Date.now().toString(),
|
||
username: newUsername,
|
||
password: newPassword,
|
||
role: 'user',
|
||
createdAt: new Date().toISOString().split('T')[0]
|
||
};
|
||
setUsers([...users, newUser]);
|
||
setNewUsername('');
|
||
setNewPassword('');
|
||
setShowAddUser(false);
|
||
showToast('用户创建成功');
|
||
};
|
||
|
||
const uploadImage = () => {
|
||
folderUploadInputRef.current?.click();
|
||
};
|
||
|
||
const uploadZip = () => {
|
||
zipUploadInputRef.current?.click();
|
||
};
|
||
|
||
const handleLibraryFilesSelected = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
const selectedFiles: File[] = [];
|
||
const fileList = event.currentTarget.files;
|
||
if (fileList) {
|
||
for (let index = 0; index < fileList.length; index += 1) {
|
||
const file = fileList.item(index);
|
||
if (file) selectedFiles.push(file);
|
||
}
|
||
}
|
||
const files = selectedFiles.filter(file => {
|
||
const name = file.name.toLowerCase();
|
||
return name.endsWith('.dcm') || name.endsWith('.zip');
|
||
});
|
||
event.currentTarget.value = '';
|
||
if (!files.length) {
|
||
showToast('请选择 .dcm 文件或 .zip 压缩包');
|
||
return;
|
||
}
|
||
|
||
setIsUploadingDicom(true);
|
||
try {
|
||
const formData = new FormData();
|
||
const firstRelativePath = (files[0] as any).webkitRelativePath || files[0].name;
|
||
const patientId = firstRelativePath.includes('/')
|
||
? firstRelativePath.split('/')[0]
|
||
: files[0].name.replace(/\.(dcm|zip)$/i, '') || `WEB_${new Date().getTime()}`;
|
||
formData.append('patientId', patientId);
|
||
files.forEach(file => {
|
||
formData.append('files', file, (file as any).webkitRelativePath || file.name);
|
||
});
|
||
|
||
const response = await fetch(`${API_BASE}/api/library/upload`, {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
const data = await response.json();
|
||
if (!response.ok) throw new Error(data.error || '上传失败');
|
||
|
||
const items = await loadLibrary();
|
||
setSelectedLibraryId(data.id || items[0]?.id || '');
|
||
setCurrentPage('workspace');
|
||
setPreviewImage('');
|
||
setProcessPreviewImage('');
|
||
clearDeformationTask();
|
||
showToast(`已上传 ${data.fileCount || files.length} 张 DICOM`);
|
||
} catch (error) {
|
||
const message = (error as Error).message === 'Failed to fetch'
|
||
? `无法连接 Python 后端：${API_BASE}`
|
||
: (error as Error).message;
|
||
showToast(message);
|
||
} finally {
|
||
setIsUploadingDicom(false);
|
||
}
|
||
};
|
||
|
||
const deleteImage = async (id: string) => {
|
||
try {
|
||
const response = await fetch(`${API_BASE}/api/library?id=${encodeURIComponent(id)}`, {
|
||
method: 'DELETE'
|
||
});
|
||
const data = await response.json();
|
||
if (!response.ok) throw new Error(data.error || '删除失败');
|
||
setLibraryData(data.items || []);
|
||
if (selectedLibraryId === id) {
|
||
setSelectedLibraryId(data.items?.[0]?.id || '');
|
||
setPreviewImage('');
|
||
setProcessPreviewImage('');
|
||
clearDeformationTask();
|
||
}
|
||
showToast('影像已删除');
|
||
} catch (error) {
|
||
showToast((error as Error).message);
|
||
}
|
||
};
|
||
|
||
const showLibraryInfo = async (item: LibraryItem) => {
|
||
setIsLibraryInfoLoading(true);
|
||
setLibraryInfo(null);
|
||
try {
|
||
const data = await apiRequest(`/api/library/info?id=${encodeURIComponent(item.id)}`) as LibraryInfo;
|
||
setLibraryInfo(data);
|
||
} catch (error) {
|
||
showToast((error as Error).message);
|
||
} finally {
|
||
setIsLibraryInfoLoading(false);
|
||
}
|
||
};
|
||
|
||
const openLibraryViewer = (item: LibraryItem) => {
|
||
setLibraryViewerItem(item);
|
||
setViewerPlane('coronal');
|
||
setViewerWindow('default');
|
||
setViewerSliceIndex('middle');
|
||
setDebouncedViewerSliceIndex('middle');
|
||
setViewerPreview(null);
|
||
setViewerError('');
|
||
setIsModelSlicingEnabled(false);
|
||
setModelClipStart(0);
|
||
setModelClipEnd(Math.max(0, (item.fileCount || 1) - 1));
|
||
setModelStartPreview(null);
|
||
setModelEndPreview(null);
|
||
setModelMaskError('');
|
||
};
|
||
|
||
const closeLibraryViewer = () => {
|
||
setLibraryViewerItem(null);
|
||
setViewerPreview(null);
|
||
setViewerError('');
|
||
setIsViewerLoading(false);
|
||
setIsModelSlicingEnabled(false);
|
||
setModelStartPreview(null);
|
||
setModelEndPreview(null);
|
||
setModelMaskError('');
|
||
};
|
||
|
||
useEffect(() => {
|
||
const timer = window.setTimeout(() => {
|
||
setDebouncedViewerSliceIndex(viewerSliceIndex);
|
||
}, typeof viewerSliceIndex === 'number' ? 180 : 0);
|
||
return () => window.clearTimeout(timer);
|
||
}, [viewerSliceIndex]);
|
||
|
||
useEffect(() => {
|
||
if (!libraryViewerItem) return;
|
||
|
||
const controller = new AbortController();
|
||
setIsViewerLoading(true);
|
||
setViewerError('');
|
||
fetch(
|
||
`${API_BASE}/api/library/reformat-preview?id=${encodeURIComponent(libraryViewerItem.id)}&plane=${encodeURIComponent(viewerPlane)}&index=${encodeURIComponent(String(debouncedViewerSliceIndex))}&window=${encodeURIComponent(viewerWindow)}`,
|
||
{ signal: controller.signal }
|
||
)
|
||
.then(async response => {
|
||
const data = await response.json();
|
||
if (!response.ok) throw new Error(data.error || '阅览图像生成失败');
|
||
setViewerPreview(data);
|
||
})
|
||
.catch(error => {
|
||
if ((error as Error).name !== 'AbortError') setViewerError((error as Error).message);
|
||
})
|
||
.finally(() => {
|
||
if (!controller.signal.aborted) setIsViewerLoading(false);
|
||
});
|
||
|
||
return () => controller.abort();
|
||
}, [libraryViewerItem?.id, viewerPlane, debouncedViewerSliceIndex, viewerWindow]);
|
||
|
||
useEffect(() => {
|
||
if (!libraryViewerItem || !viewerPreview?.count) return;
|
||
setModelClipStart(current => Math.max(0, Math.min(viewerPreview.count - 1, current)));
|
||
setModelClipEnd(current => {
|
||
if (current <= 0) return viewerPreview.count - 1;
|
||
return Math.max(0, Math.min(viewerPreview.count - 1, current));
|
||
});
|
||
}, [libraryViewerItem?.id, viewerPreview?.count]);
|
||
|
||
useEffect(() => {
|
||
if (!libraryViewerItem || !isModelSlicingEnabled || !stlModel) return;
|
||
|
||
const controller = new AbortController();
|
||
const makeUrl = (index: number) => (
|
||
`${API_BASE}/api/library/reformat-preview?id=${encodeURIComponent(libraryViewerItem.id)}&plane=${encodeURIComponent(viewerPlane)}&index=${index}&window=${encodeURIComponent(viewerWindow)}&modelId=${encodeURIComponent(stlModel.modelId)}`
|
||
);
|
||
|
||
setIsModelMaskLoading(true);
|
||
setModelMaskError('');
|
||
Promise.all([
|
||
fetch(makeUrl(clampedModelStart), { signal: controller.signal }).then(async response => {
|
||
const data = await response.json();
|
||
if (!response.ok) throw new Error(data.error || '起点帧 mask 生成失败');
|
||
return data as LibraryViewerPreview;
|
||
}),
|
||
fetch(makeUrl(clampedModelEnd), { signal: controller.signal }).then(async response => {
|
||
const data = await response.json();
|
||
if (!response.ok) throw new Error(data.error || '终点帧 mask 生成失败');
|
||
return data as LibraryViewerPreview;
|
||
}),
|
||
])
|
||
.then(([startPreview, endPreview]) => {
|
||
setModelStartPreview(startPreview);
|
||
setModelEndPreview(endPreview);
|
||
})
|
||
.catch(error => {
|
||
if ((error as Error).name !== 'AbortError') setModelMaskError((error as Error).message);
|
||
})
|
||
.finally(() => {
|
||
if (!controller.signal.aborted) setIsModelMaskLoading(false);
|
||
});
|
||
|
||
return () => controller.abort();
|
||
}, [libraryViewerItem?.id, isModelSlicingEnabled, stlModel?.modelId, viewerPlane, viewerWindow, clampedModelStart, clampedModelEnd]);
|
||
|
||
const uploadStlModel = () => {
|
||
stlUploadInputRef.current?.click();
|
||
};
|
||
|
||
const handleStlSelected = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = event.target.files?.[0];
|
||
event.target.value = '';
|
||
if (!file) return;
|
||
setIsUploadingStl(true);
|
||
try {
|
||
const response = await fetch(`${API_BASE}/api/model/upload`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/sla',
|
||
'x-file-name': encodeURIComponent(file.name),
|
||
},
|
||
body: await file.arrayBuffer(),
|
||
});
|
||
const data = await response.json();
|
||
if (!response.ok) throw new Error(data.error || 'STL 上传失败');
|
||
setStlModel(data);
|
||
setIsModelSlicingEnabled(true);
|
||
showToast(`已载入 STL：${data.triangleCount || 0} 个三角面`);
|
||
} catch (error) {
|
||
showToast((error as Error).message);
|
||
} finally {
|
||
setIsUploadingStl(false);
|
||
}
|
||
};
|
||
|
||
const changePassword = (userId: string, newPass: string) => {
|
||
setUsers(users.map(u => u.id === userId ? { ...u, password: newPass } : u));
|
||
setPwChangeInput('');
|
||
setIsChangingOwnPass(false);
|
||
showToast('密码更新成功');
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (currentPage !== 'workspace' || !selectedInputDir) return;
|
||
|
||
const controller = new AbortController();
|
||
const timer = window.setTimeout(async () => {
|
||
setIsPreviewLoading(true);
|
||
try {
|
||
const response = await fetch(`${API_BASE}/api/preview`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
inputDir: selectedInputDir,
|
||
angleDegrees: cervicalRotation,
|
||
transitionWidth,
|
||
gaussianSigma: previewGaussianSigma,
|
||
mode: previewAlgorithm,
|
||
showCutoffLine: showPreviewCutoffLine
|
||
}),
|
||
signal: controller.signal
|
||
});
|
||
const data = await response.json();
|
||
if (!response.ok) throw new Error(data.error || '预览生成失败');
|
||
setPreviewImage(data.image);
|
||
setProcessPreviewImage(data.processImage || '');
|
||
setBackendOnline(true);
|
||
setBackendMessage('预览已自动更新');
|
||
} catch (error) {
|
||
if ((error as Error).name !== 'AbortError') {
|
||
setBackendOnline(false);
|
||
setBackendMessage((error as Error).message);
|
||
}
|
||
} finally {
|
||
if (!controller.signal.aborted) setIsPreviewLoading(false);
|
||
}
|
||
}, 300);
|
||
|
||
return () => {
|
||
controller.abort();
|
||
window.clearTimeout(timer);
|
||
};
|
||
}, [currentPage, selectedInputDir, cervicalRotation, transitionWidth, previewGaussianSigma, previewAlgorithm, showPreviewCutoffLine]);
|
||
|
||
const handleRunSimulation = async () => {
|
||
if (isSimulating) return;
|
||
setIsSimulating(true);
|
||
setProgress(0);
|
||
try {
|
||
const job = await apiRequest('/api/deformation', {
|
||
method: 'POST',
|
||
body: JSON.stringify({
|
||
username: currentUser?.username || 'anonymous',
|
||
inputDir: selectedInputDir,
|
||
angleDegrees: cervicalRotation,
|
||
transitionWidth
|
||
})
|
||
}) as BackendJob;
|
||
applyDeformationJob(job);
|
||
setBackendOnline(true);
|
||
setBackendMessage('run_deformation 任务已提交');
|
||
showToast('形变任务已提交');
|
||
} catch (error) {
|
||
setIsSimulating(false);
|
||
setBackendOnline(false);
|
||
showToast((error as Error).message);
|
||
}
|
||
};
|
||
|
||
const handleGenerateVideo = async () => {
|
||
if (videoJob?.status === 'running') return;
|
||
if (!videoSourceInputDir) {
|
||
showToast('请选择影像库数据源');
|
||
return;
|
||
}
|
||
try {
|
||
const job = await apiRequest('/api/video', {
|
||
method: 'POST',
|
||
body: JSON.stringify({
|
||
inputDir: videoSourceInputDir,
|
||
maxAngle: videoMaxAngle,
|
||
durationSeconds: videoDuration,
|
||
showArrow: showVideoArrow,
|
||
mode: selectedVideoSource.mode,
|
||
})
|
||
}) as BackendJob;
|
||
setVideoJob(job);
|
||
setBackendOnline(true);
|
||
setBackendMessage(`generate_head_extension_video.py / ${selectedVideoSource.label} 任务已提交`);
|
||
showToast(`${selectedVideoSource.label} 视频任务已提交`);
|
||
} catch (error) {
|
||
setBackendOnline(false);
|
||
showToast((error as Error).message);
|
||
}
|
||
};
|
||
|
||
// --- Login Screen ---
|
||
if (!isLoggedIn) {
|
||
return (
|
||
<div className="w-screen h-screen bg-[#f1f5f9] flex items-center justify-center">
|
||
<div className="w-[450px] bg-white p-10 rounded-2xl shadow-xl border border-slate-200">
|
||
<div className="flex flex-col items-center mb-8">
|
||
<div className="w-20 h-20 rounded-2xl flex items-center justify-center mb-4 overflow-hidden">
|
||
<img src="/logo_square.png" alt="头颈CT变形平台" className="w-full h-full object-contain" />
|
||
</div>
|
||
<h1 className="text-xl font-bold text-slate-800 text-center">颅颈特定体位CT影像智慧变形平台</h1>
|
||
<p className="text-slate-400 text-sm mt-2">头部CT变形平台</p>
|
||
</div>
|
||
<form onSubmit={handleLogin} className="space-y-4">
|
||
<div className="space-y-1">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase ml-1">用户名</label>
|
||
<input
|
||
type="text" placeholder="admin" value={loginUsername}
|
||
onChange={e => setLoginUsername(e.target.value)}
|
||
className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase ml-1">密码</label>
|
||
<input
|
||
type="password" placeholder="123456" value={loginPassword}
|
||
onChange={e => setLoginPassword(e.target.value)}
|
||
className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all"
|
||
/>
|
||
</div>
|
||
{loginError && <p className="text-red-500 text-xs text-center font-medium">{loginError}</p>}
|
||
<button type="submit" className="w-full py-3.5 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700 transition-all shadow-lg shadow-blue-500/20 active:scale-95">登 录</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// --- Sidebar Component ---
|
||
const NavItem = ({ icon: Icon, label, page }: { icon: any, label: string, page: Page }) => (
|
||
<button
|
||
onClick={() => setCurrentPage(page)}
|
||
title={isSidebarCollapsed ? label : ""}
|
||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group ${
|
||
currentPage === page ? 'bg-blue-600 text-white shadow-lg' : 'text-slate-600 hover:bg-slate-100'
|
||
} ${isSidebarCollapsed ? 'justify-center px-0' : ''}`}
|
||
>
|
||
<Icon size={20} className={isSidebarCollapsed ? 'shrink-0' : ''} />
|
||
{!isSidebarCollapsed && <span className="flex-1 text-left text-sm font-medium">{label}</span>}
|
||
{isSidebarCollapsed && (
|
||
<div className="absolute left-16 bg-slate-800 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
|
||
{label}
|
||
</div>
|
||
)}
|
||
</button>
|
||
);
|
||
|
||
return (
|
||
<div className="w-screen h-screen bg-[#f8fafc] text-[#1e293b] flex overflow-hidden">
|
||
|
||
{/* Sidebar */}
|
||
<aside className={`${isSidebarCollapsed ? 'w-20' : 'w-72'} bg-white border-r p-6 flex flex-col shrink-0 transition-all duration-300 ease-in-out`}>
|
||
<div className={`flex items-center ${isSidebarCollapsed ? 'justify-center' : 'gap-3'} mb-10 transition-all`}>
|
||
<img src="/logo_square.png" alt="头颈CT变形平台" className="w-9 h-9 object-contain shrink-0" />
|
||
{!isSidebarCollapsed && <h2 className="text-base font-bold tracking-tight whitespace-nowrap overflow-hidden">头颈CT变形平台</h2>}
|
||
</div>
|
||
|
||
<nav className="flex-1 space-y-2">
|
||
<NavItem icon={LayoutDashboard} label="总体概况" page="overview" />
|
||
<NavItem icon={Database} label="数据影像库" page="library" />
|
||
<NavItem icon={ImageIcon} label="影像变换工作站" page="workspace" />
|
||
<NavItem icon={Users} label="系统管理工作区" page="users" />
|
||
</nav>
|
||
|
||
<div className="mt-auto pt-6 border-t font-medium">
|
||
<div className={`flex items-center ${isSidebarCollapsed ? 'justify-center flex-col gap-2' : 'gap-3 p-3 bg-slate-50 rounded-xl mb-3'} transition-all`}>
|
||
<div className="w-8 h-8 rounded-full bg-blue-600 border-2 border-white shadow-md flex items-center justify-center text-white text-xs shrink-0">{currentUser?.username[0].toUpperCase()}</div>
|
||
{!isSidebarCollapsed && (
|
||
<div className="flex-1 truncate">
|
||
<p className="text-xs font-bold leading-none text-slate-800">{currentUser?.username}</p>
|
||
<p className="text-[9px] text-slate-400 mt-1 uppercase tracking-widest">{currentUser?.role}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<button
|
||
onClick={handleLogout}
|
||
title="退出登录"
|
||
aria-label="退出登录"
|
||
className={`w-full flex items-center gap-3 text-sm transition-all ${
|
||
isSidebarCollapsed
|
||
? 'justify-center w-10 h-10 mx-auto rounded-2xl bg-slate-50 text-slate-500 hover:bg-red-50 hover:text-red-500'
|
||
: 'px-4 py-3 text-slate-400 hover:text-red-500'
|
||
}`}
|
||
>
|
||
<LogOut size={isSidebarCollapsed ? 20 : 18} className="shrink-0" />
|
||
{!isSidebarCollapsed && <span>退出登录</span>}
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
{/* Main Content */}
|
||
<main className="flex-1 flex flex-col overflow-hidden bg-slate-50">
|
||
<header className="h-16 bg-white border-b px-8 flex items-center justify-between shadow-sm z-10 shrink-0">
|
||
<div className="flex items-center gap-4">
|
||
{isSidebarCollapsed && (
|
||
<button
|
||
onClick={() => setIsSidebarCollapsed(false)}
|
||
className="p-1.5 hover:bg-slate-100 rounded-lg text-slate-400 transition-colors"
|
||
>
|
||
<ChevronRight size={18} />
|
||
</button>
|
||
)}
|
||
<h3 className="font-bold text-slate-800">
|
||
{currentPage === 'overview' && '控制台总览'}
|
||
{currentPage === 'library' && '数据影像库'}
|
||
{currentPage === 'workspace' && '影像变换工作站'}
|
||
{currentPage === 'users' && '系统管理工作区'}
|
||
</h3>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="flex-1 p-8 overflow-y-auto">
|
||
|
||
{/* --- WORKSPACE VIEW --- */}
|
||
{currentPage === 'workspace' && (
|
||
<div className="min-h-full flex gap-6 animate-in fade-in zoom-in-95 duration-300">
|
||
<div className="w-[380px] space-y-4 shrink-0">
|
||
<div className={`flex items-center gap-3 text-xs font-bold px-4 py-3 rounded-2xl border ${backendOnline ? 'bg-green-50 text-green-700 border-green-100' : 'bg-amber-50 text-amber-700 border-amber-100'}`}>
|
||
{backendOnline ? <Server size={16} /> : <AlertCircle size={16} />}
|
||
<span>{backendMessage}</span>
|
||
</div>
|
||
|
||
<div className="bg-white p-5 rounded-2xl border shadow-sm space-y-4">
|
||
<div className="space-y-3">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-widest block">影像库数据源</label>
|
||
<div className="space-y-2">
|
||
<div className="flex items-center justify-between text-[10px] font-bold text-slate-500">
|
||
<span className="flex items-center gap-2"><Database size={12} /> 当前 DICOM 数据集</span>
|
||
<button onClick={() => setCurrentPage('library')} className="text-blue-600 hover:text-blue-800">切换</button>
|
||
</div>
|
||
<select
|
||
value={selectedDataset?.id || ''}
|
||
onChange={event => {
|
||
setSelectedLibraryId(event.target.value);
|
||
setPreviewImage('');
|
||
setProcessPreviewImage('');
|
||
clearDeformationTask();
|
||
}}
|
||
className="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 text-xs font-bold text-slate-700"
|
||
>
|
||
{libraryData.map(item => (
|
||
<option key={item.id} value={item.id}>{item.patientId} · {item.fileCount || 0} DICOM</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white p-5 rounded-2xl border shadow-sm space-y-5">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-widest block">仰头数据处理及结果输出</label>
|
||
|
||
<div className="space-y-4 pt-2">
|
||
<div>
|
||
<div className="flex justify-between text-xs font-bold mb-2 text-slate-600"><span>快速预览算法</span><span className="text-blue-600 font-mono">{PREVIEW_ALGORITHM_OPTIONS.find(option => option.key === previewAlgorithm)?.label}</span></div>
|
||
<select
|
||
value={previewAlgorithm}
|
||
onChange={event => setPreviewAlgorithm(event.target.value)}
|
||
className="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 text-xs font-bold text-slate-700"
|
||
>
|
||
{PREVIEW_ALGORITHM_OPTIONS.map(option => (
|
||
<option key={option.key} value={option.key}>{option.label}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<div className="flex justify-between text-xs font-bold mb-2 text-slate-600"><span>仰头角度</span><span className="text-blue-600 font-mono">{cervicalRotation.toFixed(1)}°</span></div>
|
||
<input type="range" min="0" max="45" step="0.5" value={cervicalRotation} onChange={e => setCervicalRotation(parseFloat(e.target.value))} className="w-full h-1.5 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-blue-600 opacity-80 hover:opacity-100 transition-opacity" />
|
||
</div>
|
||
{previewAlgorithm === 'gaussian_smooth' && (
|
||
<div>
|
||
<div className="flex justify-between text-xs font-bold mb-2 text-slate-600"><span>高斯平滑强度</span><span className="text-blue-600 font-mono">{previewGaussianSigma.toFixed(1)}</span></div>
|
||
<input type="range" min="1" max="12" step="0.5" value={previewGaussianSigma} onChange={e => setPreviewGaussianSigma(parseFloat(e.target.value))} className="w-full h-1.5 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-blue-600 opacity-80 hover:opacity-100 transition-opacity" />
|
||
</div>
|
||
)}
|
||
{previewAlgorithm === 'soft_transition' && (
|
||
<div>
|
||
<div className="flex justify-between text-xs font-bold mb-2 text-slate-600"><span>软过渡宽度</span><span className="text-blue-600 font-mono">{transitionWidth}</span></div>
|
||
<input type="range" min="50" max="160" step="10" value={transitionWidth} onChange={e => setTransitionWidth(parseInt(e.target.value, 10))} className="w-full h-1.5 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-blue-600 opacity-80 hover:opacity-100 transition-opacity" />
|
||
</div>
|
||
)}
|
||
<button
|
||
onClick={() => setShowPreviewCutoffLine(value => !value)}
|
||
className={`w-full py-2.5 rounded-xl text-xs font-black transition-all flex items-center justify-center gap-2 border ${
|
||
showPreviewCutoffLine
|
||
? 'bg-yellow-50 text-yellow-700 border-yellow-200 hover:bg-yellow-100'
|
||
: 'bg-slate-50 text-slate-500 border-slate-200 hover:bg-slate-100'
|
||
}`}
|
||
>
|
||
{showPreviewCutoffLine ? <Eye size={14} /> : <EyeOff size={14} />}
|
||
{showPreviewCutoffLine ? '隐藏预览分界线' : '显示预览分界线'}
|
||
</button>
|
||
</div>
|
||
|
||
<div>
|
||
<button onClick={handleRunSimulation} disabled={isSimulating || !selectedInputDir} className="w-full py-3 bg-blue-600 text-white rounded-xl text-xs font-bold hover:bg-blue-700 transition-all flex items-center justify-center gap-2 active:scale-95 disabled:opacity-50">
|
||
<PlayIcon className="fill-white" size={14} /> {isSimulating ? '生成中' : '四状态输出'}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="pt-3 border-t">
|
||
<div className="flex justify-between text-[10px] text-slate-400 font-bold uppercase mb-2">
|
||
<span>{deformationJob?.message || 'head_extension_app.py / run_deformation'}</span>
|
||
<span>{deformationJob?.status === 'completed' ? '100%' : `${progress}%`}</span>
|
||
</div>
|
||
<div className="h-1.5 bg-slate-100 rounded-full overflow-hidden">
|
||
<div className={`h-full ${deformationJob?.status === 'failed' ? 'bg-red-500' : 'bg-blue-600'} transition-all`} style={{ width: `${deformationJob?.status === 'completed' ? 100 : progress}%` }} />
|
||
</div>
|
||
{deformationJob?.error && <p className="text-[10px] text-red-500 font-bold mt-2 break-all">{deformationJob.error}</p>}
|
||
{deformationJob?.status === 'completed' && deformationJob.result?.outputs && (
|
||
<button
|
||
onClick={() => {
|
||
setPackageOptions(DEFAULT_PACKAGE_OPTIONS);
|
||
setIsPackageDialogOpen(true);
|
||
}}
|
||
disabled={zipJobs.all?.status === 'running'}
|
||
className="mt-3 w-full py-3 bg-green-600 text-white rounded-xl text-xs font-bold hover:bg-green-700 transition-all flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-wait"
|
||
>
|
||
<Download size={14} />
|
||
{zipJobs.all?.status === 'running'
|
||
? `四状态 ZIP 打包中 ${formatProgress(progressFromJob(zipJobs.all, 0))}%`
|
||
: '下载结果'}
|
||
</button>
|
||
)}
|
||
{zipJobs.all?.status === 'failed' && <p className="text-[10px] text-red-500 font-bold mt-2 break-all">{zipJobs.all.error || '四状态 ZIP 打包失败'}</p>}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white p-5 rounded-2xl border shadow-sm space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">视频生成</label>
|
||
<Film size={16} className="text-blue-600" />
|
||
</div>
|
||
<div>
|
||
<div className="flex justify-between text-[10px] font-bold mb-2 text-slate-500">
|
||
<span>视频形变方式</span>
|
||
{!isVideoSourceReady && <span className="text-amber-500">请选择影像库数据源</span>}
|
||
</div>
|
||
<select
|
||
value={videoSource}
|
||
onChange={event => {
|
||
setVideoSource(event.target.value);
|
||
setVideoJob(null);
|
||
}}
|
||
className="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 text-xs font-bold text-slate-700"
|
||
>
|
||
{VIDEO_SOURCE_OPTIONS.map(option => (
|
||
<option key={option.key} value={option.key}>{option.label}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<div className="flex justify-between text-[10px] font-bold mb-2 text-slate-500"><span>最大角度</span><span>{videoMaxAngle}°</span></div>
|
||
<input type="range" min="5" max="45" step="1" value={videoMaxAngle} onChange={e => setVideoMaxAngle(parseInt(e.target.value, 10))} className="w-full accent-blue-600" />
|
||
</div>
|
||
<div>
|
||
<div className="flex justify-between text-[10px] font-bold mb-2 text-slate-500"><span>时长</span><span>{videoDuration}s</span></div>
|
||
<input type="range" min="3" max="12" step="1" value={videoDuration} onChange={e => setVideoDuration(parseInt(e.target.value, 10))} className="w-full accent-blue-600" />
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => setShowVideoArrow(value => !value)}
|
||
className={`w-full py-2.5 rounded-xl text-xs font-black transition-all flex items-center justify-center gap-2 border ${
|
||
showVideoArrow
|
||
? 'bg-yellow-50 text-yellow-700 border-yellow-200 hover:bg-yellow-100'
|
||
: 'bg-slate-50 text-slate-500 border-slate-200 hover:bg-slate-100'
|
||
}`}
|
||
>
|
||
{showVideoArrow ? <Eye size={14} /> : <EyeOff size={14} />}
|
||
{showVideoArrow ? '隐藏视频黄色箭头' : '显示视频黄色箭头'}
|
||
</button>
|
||
<button onClick={handleGenerateVideo} disabled={videoJob?.status === 'running' || !isVideoSourceReady} className="w-full py-3 bg-slate-100 text-slate-700 rounded-xl text-xs font-bold hover:bg-blue-600 hover:text-white transition-all flex items-center justify-center gap-2 disabled:opacity-50">
|
||
<RefreshCw size={14} className={videoJob?.status === 'running' ? 'animate-spin' : ''} /> {videoJob?.status === 'running' ? '正在生成视频' : `生成${selectedVideoSource.label}视频`}
|
||
</button>
|
||
{videoJob?.status === 'completed' && videoJob.result?.video?.path ? (
|
||
<div className="space-y-3">
|
||
<div className="bg-slate-950 rounded-xl overflow-hidden border border-slate-800">
|
||
<video
|
||
src={fileUrl(videoJob.result.video.path)}
|
||
controls
|
||
preload="metadata"
|
||
className="w-full aspect-video bg-black"
|
||
/>
|
||
</div>
|
||
<a
|
||
href={fileUrl(videoJob.result.video.path)}
|
||
download={videoJob.result.video.name}
|
||
className="w-full py-3 bg-green-600 text-white rounded-xl text-xs font-bold hover:bg-green-700 transition-all flex items-center justify-center gap-2"
|
||
>
|
||
<Download size={14} /> 下载视频 MP4
|
||
</a>
|
||
</div>
|
||
) : (
|
||
<p className="text-[10px] text-slate-400 font-medium break-all">{videoJob?.message || 'generate_head_extension_video.py / generate_video'}</p>
|
||
)}
|
||
{videoJob?.error && <p className="text-[10px] text-red-500 font-bold break-all">{videoJob.error}</p>}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex-1 space-y-6 pb-8">
|
||
<div className="bg-white rounded-2xl border shadow-sm overflow-hidden">
|
||
<div className="px-5 py-4 border-b flex items-center justify-between">
|
||
<div>
|
||
<h4 className="font-black text-slate-800">快速 2D 预览</h4>
|
||
<p className="text-[10px] text-slate-400 font-bold mt-1">对应 head_extension_app.py 的 preview_deform_2d</p>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<div className="text-right">
|
||
<span className="text-[10px] font-mono text-slate-400">{cervicalRotation.toFixed(1)} DEG</span>
|
||
{isPreviewLoading && <p className="text-[9px] font-bold text-blue-500 mt-1">自动更新中...</p>}
|
||
</div>
|
||
<button
|
||
onClick={downloadPreviewImage}
|
||
disabled={!previewImage}
|
||
className="w-9 h-9 rounded-xl bg-slate-100 text-slate-500 hover:bg-blue-600 hover:text-white transition-all flex items-center justify-center disabled:opacity-40 disabled:hover:bg-slate-100 disabled:hover:text-slate-500"
|
||
title="下载当前快速 2D 预览图"
|
||
>
|
||
<Download size={15} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="h-[360px] bg-slate-950 flex items-center justify-center">
|
||
{previewImage ? (
|
||
<img src={previewImage} className="max-w-full max-h-full object-contain" />
|
||
) : (
|
||
<div className="text-center text-slate-500">
|
||
<ImageIcon size={42} className="mx-auto mb-3 opacity-40" />
|
||
<p className="text-xs font-bold">{isPreviewLoading ? '正在自动生成预览...' : '选择影像库数据后自动生成预览'}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-2xl border shadow-sm overflow-hidden">
|
||
<div className="px-5 py-4 border-b flex items-center justify-between">
|
||
<div>
|
||
<h4 className="font-black text-slate-800">四状态过程对比图</h4>
|
||
<p className="text-[10px] text-slate-400 font-bold mt-1">随仰头角度与算法参数自动更新</p>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
{isPreviewLoading && <span className="text-[9px] font-bold text-blue-500">同步更新中...</span>}
|
||
<button
|
||
onClick={downloadProcessPreviewImage}
|
||
disabled={!processPreviewImage}
|
||
className="w-9 h-9 rounded-xl bg-slate-100 text-slate-500 hover:bg-blue-600 hover:text-white transition-all flex items-center justify-center disabled:opacity-40 disabled:hover:bg-slate-100 disabled:hover:text-slate-500"
|
||
title="下载当前四状态过程对比图"
|
||
>
|
||
<Download size={15} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="h-[300px] bg-slate-950 flex items-center justify-center">
|
||
{processPreviewImage ? (
|
||
<img src={processPreviewImage} className="max-w-full max-h-full object-contain" />
|
||
) : (
|
||
<div className="text-center text-slate-500">
|
||
<Layers size={42} className="mx-auto mb-3 opacity-40" />
|
||
<p className="text-xs font-bold">{isPreviewLoading ? '正在生成四状态对比图...' : '选择影像库数据后自动生成对比图'}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-2xl border shadow-sm overflow-hidden">
|
||
<div className="px-5 py-4 border-b flex items-center justify-between gap-4">
|
||
<div>
|
||
<h4 className="font-black text-slate-800">四状态 DICOM 输出结果</h4>
|
||
<p className="text-[10px] text-slate-400 font-bold mt-1">本区域显示已生成的四状态输出截图</p>
|
||
</div>
|
||
<div className="flex items-center gap-3 text-center">
|
||
<div className="px-3 py-2 rounded-xl bg-slate-50 border border-slate-100 min-w-24">
|
||
<p className="text-[8px] font-black text-slate-300 uppercase">仰头角度</p>
|
||
<p className="text-xs font-black text-blue-600 font-mono">
|
||
{(deformationJob?.params?.angleDegrees ?? cervicalRotation).toFixed(1)}°
|
||
</p>
|
||
</div>
|
||
<div className="px-3 py-2 rounded-xl bg-slate-50 border border-slate-100 min-w-28">
|
||
<p className="text-[8px] font-black text-slate-300 uppercase">软过渡宽度</p>
|
||
<p className="text-xs font-black text-blue-600 font-mono">
|
||
{deformationJob?.params?.transitionWidth ?? transitionWidth}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={downloadFourStateDicomZip}
|
||
disabled={deformationJob?.status !== 'completed' || !deformationJob.result?.outputs || zipJobs.all?.status === 'running'}
|
||
className="px-5 py-3 bg-green-600 text-white rounded-xl text-[11px] font-black hover:bg-green-700 transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-wait"
|
||
>
|
||
<Download size={14} />
|
||
{zipJobs.all?.status === 'running'
|
||
? `打包中 ${formatProgress(progressFromJob(zipJobs.all, 0))}%`
|
||
: '下载结果'}
|
||
</button>
|
||
</div>
|
||
<div className="grid grid-cols-4 gap-4 p-4">
|
||
{[
|
||
{ key: 'original', label: '原始序列', sub: 'ct_original' },
|
||
{ key: 'hard_boundary', label: '硬边界', sub: 'ct_hard_boundary' },
|
||
{ key: 'gaussian_smooth', label: '高斯平滑', sub: 'ct_gaussian_smooth' },
|
||
{ key: 'soft_transition', label: '软过渡重建', sub: 'ct_soft_transition' }
|
||
].map(t => {
|
||
const screenshotDir = deformationJob?.result?.previews?.screenshots;
|
||
const imagePath = screenshotDir ? `${screenshotDir}/${t.key}.png` : '';
|
||
return (
|
||
<div key={t.key} className="min-w-0">
|
||
<div className="flex justify-between items-center mb-3">
|
||
<div className="flex items-center gap-2 min-w-0">
|
||
<span className={`text-[10px] font-bold px-2 py-0.5 rounded transition-colors ${t.key === 'original' ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-500'}`}>{t.label}</span>
|
||
<button
|
||
onClick={() => handlePackageDownload(t.key)}
|
||
disabled={deformationJob?.status !== 'completed' || !deformationJob.result?.outputs || zipJobs[t.key]?.status === 'running'}
|
||
className="w-7 h-7 rounded-lg bg-slate-100 text-slate-500 hover:bg-green-600 hover:text-white transition-all flex items-center justify-center disabled:opacity-40 disabled:hover:bg-slate-100 disabled:hover:text-slate-500"
|
||
title={`下载${t.label} DICOM`}
|
||
>
|
||
<Download size={13} />
|
||
</button>
|
||
</div>
|
||
<span className="text-[8px] font-mono text-slate-300">{t.sub}</span>
|
||
</div>
|
||
{zipJobs[t.key]?.status === 'running' && (
|
||
<p className="mb-2 text-[9px] font-bold text-green-600">
|
||
打包中 {formatProgress(progressFromJob(zipJobs[t.key], 0))}%
|
||
</p>
|
||
)}
|
||
{zipJobs[t.key]?.status === 'failed' && (
|
||
<p className="mb-2 text-[9px] font-bold text-red-500 break-all">{zipJobs[t.key].error || '本状态 DICOM ZIP 打包失败'}</p>
|
||
)}
|
||
<div className="h-44 bg-slate-900 rounded-xl relative flex justify-center items-center overflow-hidden border border-slate-800">
|
||
{imagePath ? (
|
||
<img src={fileUrl(imagePath)} className="w-full h-full object-contain" />
|
||
) : (
|
||
<div className="text-center text-white/25">
|
||
<Layers size={30} className="mx-auto mb-3" />
|
||
<p className="text-[10px] font-mono uppercase">等待 Python 输出</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
{zipJobs.all?.status === 'failed' && <p className="px-5 pb-4 text-[10px] text-red-500 font-bold break-all">{zipJobs.all.error || '四状态 DICOM ZIP 打包失败'}</p>}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* --- OVERVIEW VIEW --- */}
|
||
{currentPage === 'overview' && (
|
||
<div className="flex flex-col gap-10 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||
<div className="grid grid-cols-4 gap-6">
|
||
{[
|
||
{ l: '已存储影像数', v: libraryData.length, i: Database, c: 'blue' },
|
||
{ l: '存储容量占用', v: `${(libraryData.reduce((acc, curr) => acc + curr.size, 0) / 1024).toFixed(2)} GB`, i: ImageIcon, c: 'indigo' },
|
||
{ l: '待处理任务', v: libraryData.filter(i => i.status === 'pending').length, i: Activity, c: 'amber' },
|
||
{ l: '已完成计算', v: libraryData.filter(i => i.status === 'processed').length, i: Check, c: 'green' }
|
||
].map((s, i) => (
|
||
<div key={i} className="bg-white p-7 rounded-[2.5rem] border flex items-center gap-5 shadow-sm hover:shadow-md transition-shadow">
|
||
<div className={`w-14 h-14 bg-${s.c}-50 rounded-2xl flex items-center justify-center text-${s.c}-600 shrink-0`}><s.i size={28} /></div>
|
||
<div><p className="text-[11px] text-slate-400 font-bold uppercase mb-1">{s.l}</p><p className="text-2xl font-black text-slate-800">{s.v}</p></div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="bg-white p-10 rounded-[3rem] border shadow-sm">
|
||
<div className="flex justify-between items-center mb-8">
|
||
<h4 className="font-bold text-slate-800 text-lg">近期活跃影像流</h4>
|
||
<button onClick={() => setCurrentPage('library')} className="text-xs font-bold text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-xl transition-all">查看全部影像库</button>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{libraryData.slice(0, 4).map(item => (
|
||
<div key={item.id} className="flex items-center justify-between p-5 bg-slate-50/50 rounded-3xl border border-transparent hover:border-blue-100 transition-all group">
|
||
<div className="flex items-center gap-5">
|
||
<OverviewDicomThumbnail item={item} />
|
||
<div>
|
||
<p className="text-sm font-bold text-slate-700">{item.patientId}</p>
|
||
<p className="text-[10px] text-slate-400 font-mono">{item.date} · {item.size}MB</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<span className={`text-[9px] font-black px-3 py-1 rounded-full uppercase tracking-widest ${item.status === 'processed' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>
|
||
{item.status === 'processed' ? 'COMPLETED' : 'QUEUEING'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* --- LIBRARY VIEW (Card Grid) --- */}
|
||
{currentPage === 'library' && (
|
||
<div className="space-y-10 animate-in fade-in duration-500">
|
||
<input
|
||
ref={folderUploadInputRef}
|
||
type="file"
|
||
multiple
|
||
accept=".dcm,application/dicom"
|
||
className="hidden"
|
||
onChange={handleLibraryFilesSelected}
|
||
{...({ webkitdirectory: '', directory: '' } as any)}
|
||
/>
|
||
<input
|
||
ref={zipUploadInputRef}
|
||
type="file"
|
||
accept=".zip,application/zip,application/x-zip-compressed"
|
||
className="hidden"
|
||
onChange={handleLibraryFilesSelected}
|
||
/>
|
||
<div className="flex justify-between items-center">
|
||
<div>
|
||
<h2 className="text-2xl font-black text-slate-800">影像资产引擎</h2>
|
||
<p className="text-xs font-medium text-slate-400 mt-1">网页影像库中的 DICOM 3D 序列数据集</p>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
onClick={uploadImage}
|
||
disabled={isUploadingDicom}
|
||
className="px-6 py-3.5 bg-blue-600 text-white rounded-2xl text-sm font-bold hover:bg-black transition-all flex items-center gap-3 shadow-xl shadow-blue-500/20 active:scale-95 disabled:opacity-50"
|
||
>
|
||
<Plus size={18} /> {isUploadingDicom ? '上传中...' : '上传文件夹'}
|
||
</button>
|
||
<button
|
||
onClick={uploadZip}
|
||
disabled={isUploadingDicom}
|
||
className="px-6 py-3.5 bg-slate-800 text-white rounded-2xl text-sm font-bold hover:bg-blue-600 transition-all flex items-center gap-3 shadow-xl shadow-slate-500/10 active:scale-95 disabled:opacity-50"
|
||
>
|
||
<Download size={18} /> 上传压缩包
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-4 gap-8">
|
||
{libraryData.map(item => (
|
||
<div key={item.id} className="bg-white rounded-[2.5rem] border border-slate-200 overflow-hidden flex flex-col group hover:border-blue-400 hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-300">
|
||
<LibraryDicomPreview item={item} />
|
||
|
||
<div className="p-6 flex flex-col gap-4">
|
||
<div className="flex justify-between items-start">
|
||
<div>
|
||
<p className="text-[10px] font-black text-slate-400 uppercase tracking-tighter mb-0.5">病例标识码</p>
|
||
<h5 className="font-black text-slate-800 text-base font-mono">{item.patientId}</h5>
|
||
</div>
|
||
<div className="bg-slate-50 px-2 py-1 rounded-lg text-center">
|
||
<p className="text-[8px] font-bold text-slate-300">SIZE</p>
|
||
<p className="text-[10px] font-bold text-slate-500">{item.size}MB</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 text-[10px] text-slate-400 font-bold">
|
||
<span className="flex items-center gap-1"><MonitorPlay size={10} /> {item.version}</span>
|
||
<div className="w-1 h-1 rounded-full bg-slate-200"></div>
|
||
<span className="flex items-center gap-1"><Activity size={10} /> {item.date}</span>
|
||
<div className="w-1 h-1 rounded-full bg-slate-200"></div>
|
||
<span>{item.fileCount || 0} 张</span>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-4 gap-2 mt-2">
|
||
<button
|
||
onClick={() => {
|
||
if (item.status === 'processed') {
|
||
setSelectedLibraryId(item.id);
|
||
setPreviewImage('');
|
||
setProcessPreviewImage('');
|
||
clearDeformationTask();
|
||
setCurrentPage('workspace');
|
||
showToast(`已选择 ${item.patientId} 作为工作站数据源`);
|
||
} else {
|
||
showToast('该影像尚在处理队列中，无法载入');
|
||
}
|
||
}}
|
||
className={`py-2.5 text-[11px] font-black rounded-xl transition-all ${item.status === 'processed' ? 'bg-blue-600 text-white hover:bg-black shadow-lg shadow-blue-500/20' : 'bg-slate-100 text-slate-300 cursor-not-allowed'}`}
|
||
>
|
||
变换
|
||
</button>
|
||
<button
|
||
onClick={() => item.status === 'processed' ? openLibraryViewer(item) : showToast('该影像尚在处理队列中，无法阅览')}
|
||
className={`py-2.5 text-[11px] font-black rounded-xl transition-all flex items-center justify-center gap-1 ${item.status === 'processed' ? 'bg-slate-900 text-white hover:bg-blue-600' : 'bg-slate-100 text-slate-300 cursor-not-allowed'}`}
|
||
>
|
||
<Eye size={12} /> 阅览
|
||
</button>
|
||
<button
|
||
onClick={() => showLibraryInfo(item)}
|
||
className="py-2.5 bg-slate-100 text-slate-500 text-[11px] font-black rounded-xl hover:bg-blue-50 hover:text-blue-600 transition-all flex items-center justify-center gap-1"
|
||
>
|
||
<Info size={12} /> 信息
|
||
</button>
|
||
<button
|
||
onClick={() => deleteImage(item.id)}
|
||
className="py-2.5 bg-slate-50 text-slate-400 text-[11px] font-black rounded-xl hover:bg-red-50 hover:text-red-500 transition-all border border-slate-100"
|
||
>
|
||
删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{/* Empty Upload Slot */}
|
||
<div
|
||
className="bg-slate-50/50 rounded-[2.5rem] border-2 border-dashed border-slate-200 flex flex-col items-center justify-center p-8 text-slate-300 hover:bg-white hover:border-blue-400 hover:text-blue-600 transition-all group min-h-[380px]"
|
||
>
|
||
<p className="text-xs font-black uppercase tracking-widest">新增影像数据</p>
|
||
<p className="text-[10px] mt-2 opacity-50">支持 DICOM 文件夹和 ZIP 压缩包</p>
|
||
<div className="grid grid-cols-2 gap-3 w-full mt-6">
|
||
<button
|
||
onClick={uploadImage}
|
||
disabled={isUploadingDicom}
|
||
className="py-3 bg-blue-600 text-white rounded-2xl text-[11px] font-black hover:bg-black transition-all flex items-center justify-center gap-2 disabled:opacity-50"
|
||
>
|
||
<FolderOpen size={14} /> 文件夹
|
||
</button>
|
||
<button
|
||
onClick={uploadZip}
|
||
disabled={isUploadingDicom}
|
||
className="py-3 bg-slate-800 text-white rounded-2xl text-[11px] font-black hover:bg-blue-600 transition-all flex items-center justify-center gap-2 disabled:opacity-50"
|
||
>
|
||
<Download size={14} /> ZIP
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* --- USERS VIEW --- */}
|
||
{currentPage === 'users' && (
|
||
<div className="max-w-4xl space-y-8 animate-in fade-in duration-500">
|
||
|
||
{/* My Profile */}
|
||
<div className="bg-white p-10 rounded-[2.5rem] border shadow-sm flex items-center justify-between">
|
||
<div className="flex items-center gap-8">
|
||
<div className="w-20 h-20 bg-blue-600 rounded-3xl flex items-center justify-center text-white text-3xl font-black shadow-xl shadow-blue-500/20 ring-4 ring-blue-50 transition-transform hover:rotate-6">{currentUser?.username[0].toUpperCase()}</div>
|
||
<div>
|
||
<h4 className="text-2xl font-black text-slate-800">{currentUser?.username}</h4>
|
||
<div className="flex gap-2 mt-2">
|
||
<span className="px-3 py-1 bg-blue-50 text-blue-600 text-[10px] font-black rounded-lg uppercase tracking-widest border border-blue-100">{currentUser?.role} ACCESS</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button onClick={() => setIsChangingOwnPass(!isChangingOwnPass)} className="flex items-center gap-3 text-xs font-black text-slate-400 hover:text-blue-600 transition-all bg-slate-50 px-6 py-3 rounded-2xl"><Key size={14} /> 修改系统密码</button>
|
||
</div>
|
||
|
||
{isChangingOwnPass && (
|
||
<div className="bg-white p-8 rounded-[2.5rem] border border-blue-200 shadow-xl shadow-blue-500/5 animate-in fade-in slide-in-from-top-2 duration-300">
|
||
<p className="text-[10px] font-black text-slate-400 mb-5 uppercase tracking-widest">密钥重置通道</p>
|
||
<div className="flex gap-4">
|
||
<input type="password" placeholder="输入新访问密码..." value={pwChangeInput} onChange={e => setPwChangeInput(e.target.value)} className="flex-1 px-5 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm" />
|
||
<button onClick={() => changePassword(currentUser!.id, pwChangeInput)} className="px-10 py-3.5 bg-blue-600 text-white rounded-2xl text-xs font-black hover:bg-black transition-all shadow-lg shadow-blue-500/10 active:scale-95">确认身份并保存</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{currentUser?.role === 'admin' && (
|
||
<div className="bg-white p-8 rounded-[2.5rem] border border-red-100 shadow-sm flex items-center justify-between gap-6">
|
||
<div>
|
||
<h3 className="font-black text-slate-800">演示环境出厂设置</h3>
|
||
<p className="text-xs text-slate-400 font-bold mt-2">恢复后影像数据库只保留 Ori_Head_CT，并清空当前任务结果。</p>
|
||
</div>
|
||
<button
|
||
onClick={resetDemoEnvironment}
|
||
disabled={isResettingDemo}
|
||
className="px-6 py-3.5 bg-red-50 text-red-600 rounded-2xl text-xs font-black hover:bg-red-600 hover:text-white transition-all flex items-center gap-3 disabled:opacity-60 disabled:cursor-wait"
|
||
>
|
||
<RefreshCw size={15} className={isResettingDemo ? 'animate-spin' : ''} />
|
||
{isResettingDemo ? '正在恢复' : '恢复演示环境出厂设置'}
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* User List Header */}
|
||
<div className="flex items-center justify-between px-4">
|
||
<h3 className="text-xs font-black text-slate-400 uppercase tracking-[0.2em]">系统权限生命周期管理</h3>
|
||
{currentUser?.role === 'admin' && (
|
||
<button
|
||
onClick={() => setShowAddUser(!showAddUser)}
|
||
className="w-10 h-10 rounded-full bg-slate-800 text-white flex items-center justify-center hover:bg-blue-600 transition-all shadow-xl hover:scale-110 active:scale-90"
|
||
>
|
||
<Plus size={20} />
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Add User Inline Form */}
|
||
{showAddUser && currentUser?.role === 'admin' && (
|
||
<div className="bg-white p-10 rounded-[3rem] border-4 border-dashed border-blue-100 animate-in fade-in zoom-in-95 duration-300 flex flex-col gap-6">
|
||
<h3 className="font-black flex items-center gap-3 text-base text-slate-800"><UserPlus size={24} className="text-blue-600" /> 创建新的医疗访问帐户</h3>
|
||
<div className="grid grid-cols-2 gap-6">
|
||
<div className="space-y-1">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase ml-2">账户登录名</label>
|
||
<input type="text" placeholder="e.g. neuro_surgery_01" value={newUsername} onChange={e => setNewUsername(e.target.value)} className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl outline-none focus:ring-2 focus:ring-blue-500 font-medium" />
|
||
</div>
|
||
<div className="space-y-1">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase ml-2">初始访问密码</label>
|
||
<input type="password" placeholder="••••••••" value={newPassword} onChange={e => setNewPassword(e.target.value)} className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl outline-none focus:ring-2 focus:ring-blue-500 font-mono" />
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-end gap-3 mt-2">
|
||
<button onClick={() => setShowAddUser(false)} className="px-8 py-3.5 text-slate-400 font-bold text-xs hover:text-slate-600">取消创建</button>
|
||
<button onClick={addUser} className="px-10 py-3.5 bg-blue-600 text-white rounded-2xl text-xs font-black hover:bg-black transition-all shadow-xl shadow-blue-500/20 active:scale-95">完成账号部署</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Improved User List with Gear Actions */}
|
||
<div className="grid grid-cols-1 gap-4 pb-12">
|
||
{users.map(u => (
|
||
<div key={u.id} className="bg-white p-5 px-8 rounded-[2rem] border border-slate-100 flex items-center justify-between relative group hover:border-blue-200 transition-all shadow-sm">
|
||
<div className="flex items-center gap-6">
|
||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center font-black text-lg shadow-sm border ${u.role === 'admin' ? 'bg-amber-50 text-amber-600 border-amber-100' : 'bg-slate-50 text-slate-600 border-slate-100'}`}>
|
||
{u.username[0].toUpperCase()}
|
||
</div>
|
||
<div>
|
||
<div className="flex items-center gap-3">
|
||
<p className="text-base font-black text-slate-700">{u.username}</p>
|
||
{u.role === 'admin' && <ShieldCheck size={14} className="text-amber-500" />}
|
||
</div>
|
||
<p className="text-[10px] text-slate-400 font-bold tracking-tighter uppercase mt-1">{u.role} · 接入于 {u.createdAt}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-4">
|
||
{currentUser?.role === 'admin' || u.id === currentUser?.id ? (
|
||
<div className="relative" data-user-menu-root="true">
|
||
<button
|
||
onClick={() => setActiveUserMenu(activeUserMenu === u.id ? null : u.id)}
|
||
className={`p-3 rounded-2xl transition-all ${activeUserMenu === u.id ? 'bg-blue-600 text-white shadow-lg' : 'text-slate-300 hover:text-blue-600 hover:bg-blue-50'}`}
|
||
>
|
||
<Settings size={22} className={activeUserMenu === u.id ? 'animate-spin-slow' : ''} />
|
||
</button>
|
||
|
||
{activeUserMenu === u.id && (
|
||
<div className="absolute right-0 mt-3 w-56 bg-white rounded-[1.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.15)] border border-slate-100 p-2.5 z-20 animate-in fade-in slide-in-from-top-2 duration-300">
|
||
<div className="px-4 py-2 border-b border-slate-50 mb-1">
|
||
<p className="text-[9px] font-black text-slate-300 uppercase tracking-widest">操作选单</p>
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
const pass = prompt(`正在为 ${u.username} 重置密码，请输入新密码:`);
|
||
if(pass) changePassword(u.id, pass);
|
||
setActiveUserMenu(null);
|
||
}}
|
||
className="w-full text-left px-4 py-3 text-xs font-bold text-slate-600 hover:bg-blue-50 hover:text-blue-600 rounded-xl flex items-center gap-3 transition-all"
|
||
>
|
||
<Key size={14} /> 修改访问密码
|
||
</button>
|
||
{currentUser?.role === 'admin' && u.id !== currentUser.id && (
|
||
<button
|
||
onClick={() => {
|
||
if(confirm(`警告: 确定永久删除账号 [${u.username}] 及其关联部署吗？`)) {
|
||
setUsers(users.filter(usr => usr.id !== u.id));
|
||
showToast('用户权限已注销');
|
||
}
|
||
setActiveUserMenu(null);
|
||
}}
|
||
className="w-full text-left px-4 py-3 text-xs font-bold text-red-500 hover:bg-red-50 rounded-xl flex items-center gap-3 mt-1 transition-all"
|
||
>
|
||
<LogOut size={14} /> 注销此帐户
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div className="px-4 py-2 bg-slate-50 rounded-xl text-[10px] font-bold text-slate-300">无权操作</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
</main>
|
||
|
||
{isPackageDialogOpen && (
|
||
<div className="fixed inset-0 bg-slate-950/45 backdrop-blur-sm z-40 flex items-center justify-center p-6">
|
||
<div className="w-full max-w-3xl bg-white rounded-2xl shadow-2xl border border-slate-200 overflow-hidden">
|
||
<div className="px-7 py-5 border-b flex items-center justify-between">
|
||
<div>
|
||
<p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">四状态 ZIP 内容选择</p>
|
||
<h3 className="text-xl font-black text-slate-800 mt-1">选择要打包下载的内容</h3>
|
||
</div>
|
||
<button
|
||
onClick={() => setIsPackageDialogOpen(false)}
|
||
className="w-10 h-10 rounded-xl bg-slate-50 text-slate-400 hover:bg-red-50 hover:text-red-500 flex items-center justify-center transition-all"
|
||
>
|
||
<X size={20} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="p-7 space-y-6">
|
||
{[
|
||
{
|
||
key: 'dicom' as keyof PackageOptions,
|
||
title: 'DICOM 类',
|
||
options: DICOM_PACKAGE_OPTIONS,
|
||
allKeys: DICOM_PACKAGE_OPTIONS.map(option => option.key),
|
||
},
|
||
{
|
||
key: 'images' as keyof PackageOptions,
|
||
title: '图片类',
|
||
options: IMAGE_PACKAGE_OPTIONS,
|
||
allKeys: IMAGE_PACKAGE_OPTIONS.map(option => option.key),
|
||
},
|
||
].map(group => (
|
||
<div key={group.key} className="border border-slate-100 rounded-2xl p-5 bg-slate-50/50">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h4 className="text-sm font-black text-slate-800">{group.title}</h4>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={() => setPackageGroupSelection(group.key, group.allKeys)}
|
||
className="px-3 py-1.5 rounded-lg bg-white border border-slate-200 text-[10px] font-black text-slate-500 hover:text-blue-600 hover:border-blue-200 transition-all"
|
||
>
|
||
全选
|
||
</button>
|
||
<button
|
||
onClick={() => invertPackageGroupSelection(group.key, group.allKeys)}
|
||
className="px-3 py-1.5 rounded-lg bg-white border border-slate-200 text-[10px] font-black text-slate-500 hover:text-blue-600 hover:border-blue-200 transition-all"
|
||
>
|
||
反选
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{group.options.map(option => {
|
||
const checked = packageOptions[group.key].includes(option.key);
|
||
return (
|
||
<button
|
||
key={`${group.key}-${option.key}`}
|
||
onClick={() => togglePackageOption(group.key, option.key)}
|
||
className={`flex items-center gap-3 p-3 rounded-xl border text-left transition-all ${
|
||
checked
|
||
? 'bg-blue-50 border-blue-200 text-blue-700'
|
||
: 'bg-white border-slate-100 text-slate-500 hover:border-slate-200'
|
||
}`}
|
||
>
|
||
<span className={`w-5 h-5 rounded-md border flex items-center justify-center shrink-0 ${
|
||
checked ? 'bg-blue-600 border-blue-600 text-white' : 'border-slate-200'
|
||
}`}>
|
||
{checked && <Check size={13} />}
|
||
</span>
|
||
<span className="text-xs font-black">{option.label}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
<div className="flex items-center justify-between pt-2">
|
||
<p className="text-[10px] font-bold text-slate-400">
|
||
已选择 {packageOptions.dicom.length + packageOptions.images.length} 项内容
|
||
</p>
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
onClick={() => setIsPackageDialogOpen(false)}
|
||
className="px-5 py-3 rounded-xl bg-slate-100 text-slate-500 text-xs font-black hover:bg-slate-200 transition-all"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
onClick={confirmPackageDownload}
|
||
className="px-5 py-3 rounded-xl bg-green-600 text-white text-xs font-black hover:bg-green-700 transition-all flex items-center gap-2"
|
||
>
|
||
<Download size={14} /> 开始打包下载
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{libraryViewerItem && (
|
||
<div className="fixed inset-0 bg-slate-950/55 backdrop-blur-sm z-40 flex items-center justify-center p-6">
|
||
<div className="w-full max-w-6xl max-h-[90vh] bg-white rounded-2xl shadow-2xl border border-slate-200 overflow-hidden flex flex-col">
|
||
<div className="px-7 py-5 border-b flex items-center justify-between gap-5">
|
||
<div className="min-w-0">
|
||
<p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">DICOM 阅览</p>
|
||
<h3 className="text-xl font-black text-slate-800 mt-1 truncate">{libraryViewerItem.patientId}</h3>
|
||
</div>
|
||
<button
|
||
onClick={closeLibraryViewer}
|
||
className="w-10 h-10 rounded-xl bg-slate-50 text-slate-400 hover:bg-red-50 hover:text-red-500 flex items-center justify-center transition-all shrink-0"
|
||
>
|
||
<X size={20} />
|
||
</button>
|
||
</div>
|
||
<input
|
||
ref={stlUploadInputRef}
|
||
type="file"
|
||
accept=".stl,model/stl,application/sla"
|
||
className="hidden"
|
||
onChange={handleStlSelected}
|
||
/>
|
||
|
||
<div className="p-6 grid grid-cols-1 lg:grid-cols-[260px_1fr] gap-6 overflow-y-auto min-h-0">
|
||
<div className="space-y-5">
|
||
<div>
|
||
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3">平面</p>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{VIEWER_PLANE_OPTIONS.map(option => (
|
||
<button
|
||
key={option.key}
|
||
onClick={() => {
|
||
setViewerPlane(option.key);
|
||
setViewerSliceIndex('middle');
|
||
setDebouncedViewerSliceIndex('middle');
|
||
}}
|
||
className={`py-3 rounded-xl text-xs font-black transition-all ${
|
||
viewerPlane === option.key
|
||
? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20'
|
||
: 'bg-slate-100 text-slate-500 hover:bg-slate-200'
|
||
}`}
|
||
>
|
||
{option.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3">显示模式</p>
|
||
<select
|
||
value={viewerWindow}
|
||
onChange={event => setViewerWindow(event.target.value)}
|
||
className="w-full px-3 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold text-slate-700 outline-none focus:ring-2 focus:ring-blue-500"
|
||
>
|
||
{VIEWER_WINDOW_OPTIONS.map(option => (
|
||
<option key={option.key} value={option.key}>{option.label}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
{!isModelSlicingEnabled && (
|
||
<div>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">切片</p>
|
||
<span className="text-[10px] font-mono font-black text-blue-600">
|
||
{(viewerPreview?.index ?? 0) + 1} / {viewerPreview?.count || 1}
|
||
</span>
|
||
</div>
|
||
<input
|
||
type="range"
|
||
min="0"
|
||
max={Math.max(0, (viewerPreview?.count || 1) - 1)}
|
||
value={viewerPreview?.index ?? 0}
|
||
onChange={event => setViewerSliceIndex(parseInt(event.target.value, 10))}
|
||
className="w-full h-1.5 accent-blue-600 cursor-pointer"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div className="rounded-2xl border border-slate-100 bg-white p-4 space-y-4">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">模型切分</p>
|
||
<p className="text-[10px] font-bold text-slate-400 mt-1 truncate">
|
||
{stlModel ? `${stlModel.name} · ${stlModel.triangleCount} 面` : '上传 STL 后启用真实 mask'}
|
||
</p>
|
||
</div>
|
||
<button
|
||
onClick={() => setIsModelSlicingEnabled(value => !value)}
|
||
disabled={!stlModel}
|
||
className={`px-3 py-2 rounded-xl text-[10px] font-black transition-all disabled:opacity-40 ${
|
||
isModelSlicingEnabled
|
||
? 'bg-blue-600 text-white'
|
||
: 'bg-slate-100 text-slate-500 hover:bg-slate-200'
|
||
}`}
|
||
>
|
||
{isModelSlicingEnabled ? '已启用' : '启用'}
|
||
</button>
|
||
</div>
|
||
<button
|
||
onClick={uploadStlModel}
|
||
disabled={isUploadingStl}
|
||
className="w-full py-2.5 rounded-xl bg-slate-900 text-white text-xs font-black hover:bg-blue-600 transition-all disabled:opacity-50"
|
||
>
|
||
{isUploadingStl ? '上传解析中...' : '上传 STL 模型'}
|
||
</button>
|
||
|
||
{isModelSlicingEnabled && (
|
||
<div className="space-y-3">
|
||
<div className="flex items-center justify-between text-[10px] font-mono font-black">
|
||
<span className="text-blue-600">起点 {clampedModelStart + 1}</span>
|
||
<span className="text-orange-600">终点 {clampedModelEnd + 1}</span>
|
||
</div>
|
||
<div className="relative h-10 px-1">
|
||
<div className="absolute left-1 right-1 top-4 h-2 rounded-full bg-slate-200"></div>
|
||
<div
|
||
className="absolute top-4 h-2 rounded-full bg-blue-600"
|
||
style={{
|
||
left: `calc(${Math.min(clampedModelStart, clampedModelEnd) / Math.max(1, viewerFrameCount - 1) * 100}% + 4px)`,
|
||
right: `calc(${100 - Math.max(clampedModelStart, clampedModelEnd) / Math.max(1, viewerFrameCount - 1) * 100}% + 4px)`,
|
||
}}
|
||
></div>
|
||
<input
|
||
type="range"
|
||
min="0"
|
||
max={viewerFrameCount - 1}
|
||
value={clampedModelStart}
|
||
onChange={event => setModelClipStart(parseInt(event.target.value, 10))}
|
||
className="dual-range-input dual-range-input-start absolute inset-x-0 top-0 z-20 w-full h-10 bg-transparent cursor-pointer"
|
||
aria-label="模型切分起点帧"
|
||
/>
|
||
<input
|
||
type="range"
|
||
min="0"
|
||
max={viewerFrameCount - 1}
|
||
value={clampedModelEnd}
|
||
onChange={event => setModelClipEnd(parseInt(event.target.value, 10))}
|
||
className="dual-range-input dual-range-input-end absolute inset-x-0 top-0 z-30 w-full h-10 bg-transparent cursor-pointer"
|
||
aria-label="模型切分终点帧"
|
||
/>
|
||
</div>
|
||
<p className="text-[10px] font-bold text-slate-400">
|
||
两个端点可交叉；显示时分别按起点帧和终点帧切 STL。
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="rounded-2xl bg-slate-50 border border-slate-100 p-4 space-y-3">
|
||
<div className="flex items-center justify-between text-xs">
|
||
<span className="font-bold text-slate-400">当前平面</span>
|
||
<span className="font-black text-slate-700">{VIEWER_PLANE_OPTIONS.find(option => option.key === viewerPlane)?.label}</span>
|
||
</div>
|
||
<div className="flex items-center justify-between text-xs">
|
||
<span className="font-bold text-slate-400">窗宽窗位</span>
|
||
<span className="font-black text-slate-700">{viewerPreview?.windowLabel || VIEWER_WINDOW_OPTIONS.find(option => option.key === viewerWindow)?.label}</span>
|
||
</div>
|
||
<div className="flex items-center justify-between text-xs">
|
||
<span className="font-bold text-slate-400">文件数</span>
|
||
<span className="font-black text-slate-700">{libraryViewerItem.fileCount || 0} 张</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="min-h-[360px] lg:min-h-[560px] bg-slate-950 rounded-2xl border border-slate-900 overflow-hidden flex items-center justify-center relative">
|
||
{isModelSlicingEnabled && stlModel ? (
|
||
<div className="w-full h-full grid grid-cols-1 xl:grid-cols-2 gap-0">
|
||
{[
|
||
{ label: '起点帧', preview: modelStartPreview, color: 'text-blue-300' },
|
||
{ label: '终点帧', preview: modelEndPreview, color: 'text-orange-300' },
|
||
].map(item => (
|
||
<div key={item.label} className="relative min-h-[330px] flex items-center justify-center border-slate-800 xl:border-l first:border-l-0">
|
||
{item.preview?.imageUrl && !modelMaskError ? (
|
||
<img src={`${API_BASE}${item.preview.imageUrl}`} className="w-full h-full object-contain" />
|
||
) : (
|
||
<div className="text-center text-white/35">
|
||
<ImageIcon size={38} className="mx-auto mb-3" />
|
||
<p className="text-xs font-bold">{modelMaskError || '等待 STL mask'}</p>
|
||
</div>
|
||
)}
|
||
<div className="absolute left-4 top-4 px-3 py-2 rounded-xl bg-black/60 border border-white/10">
|
||
<p className={`text-[10px] font-black ${item.color}`}>{item.label}</p>
|
||
<p className="text-[10px] font-mono text-white/70 mt-0.5">
|
||
{item.preview ? `${item.preview.index + 1} / ${item.preview.count}` : '-'}
|
||
</p>
|
||
</div>
|
||
<div className="absolute right-4 bottom-4 px-3 py-2 rounded-xl bg-black/60 border border-white/10">
|
||
<p className="text-[10px] font-black text-white/70">
|
||
MASK {item.preview?.maskPixels ? `${item.preview.maskPixels} px` : '无交集'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : viewerPreview?.imageUrl && !viewerError ? (
|
||
<img src={`${API_BASE}${viewerPreview.imageUrl}`} className="w-full h-full object-contain" />
|
||
) : (
|
||
<div className="text-center text-white/35">
|
||
<ImageIcon size={46} className="mx-auto mb-3" />
|
||
<p className="text-xs font-bold">{viewerError || '等待影像载入'}</p>
|
||
</div>
|
||
)}
|
||
{(isViewerLoading || isModelMaskLoading) && (
|
||
<div className="absolute top-4 right-4 px-3 py-1.5 rounded-lg bg-black/60 text-white text-[10px] font-black">
|
||
载入中...
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{(libraryInfo || isLibraryInfoLoading) && (
|
||
<div className="fixed inset-0 bg-slate-950/45 backdrop-blur-sm z-40 flex items-center justify-center p-6">
|
||
<div className="w-full max-w-4xl max-h-[85vh] bg-white rounded-2xl shadow-2xl border border-slate-200 overflow-hidden">
|
||
<div className="px-7 py-5 border-b flex items-center justify-between">
|
||
<div>
|
||
<p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">DICOM 基本信息</p>
|
||
<h3 className="text-xl font-black text-slate-800 mt-1">
|
||
{libraryInfo?.patientId || '正在读取影像信息'}
|
||
</h3>
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
setLibraryInfo(null);
|
||
setIsLibraryInfoLoading(false);
|
||
}}
|
||
className="w-10 h-10 rounded-xl bg-slate-50 text-slate-400 hover:bg-red-50 hover:text-red-500 flex items-center justify-center transition-all"
|
||
>
|
||
<X size={20} />
|
||
</button>
|
||
</div>
|
||
|
||
{isLibraryInfoLoading ? (
|
||
<div className="h-72 flex items-center justify-center text-slate-400 text-sm font-bold">
|
||
正在读取 DICOM 头信息...
|
||
</div>
|
||
) : (
|
||
<div className="p-7 overflow-y-auto max-h-[68vh]">
|
||
<div className="grid grid-cols-2 gap-5">
|
||
{libraryInfo?.groups.map(group => (
|
||
<div key={group.title} className="border border-slate-100 rounded-2xl p-5 bg-slate-50/50">
|
||
<h4 className="text-xs font-black text-slate-700 mb-4">{group.title}</h4>
|
||
<div className="space-y-3">
|
||
{group.items.map(item => (
|
||
<div key={`${group.title}-${item.label}`} className="flex items-start justify-between gap-4 text-xs">
|
||
<span className="text-slate-400 font-bold shrink-0">{item.label}</span>
|
||
<span className="text-slate-700 font-mono text-right break-all">{item.value || '-'}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Toast */}
|
||
{toastMessage && (
|
||
<div className="fixed bottom-10 right-10 bg-slate-900 text-white px-6 py-4 rounded-2xl shadow-2xl z-50 flex items-center gap-3 animate-in fade-in slide-in-from-right-10">
|
||
<Check className="text-green-400" size={18} />
|
||
<span className="text-sm font-bold">{toastMessage}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const Play = (props: any) => (
|
||
<svg viewBox="0 0 24 24" width={props.size} height={props.size} {...props}>
|
||
<path d="M5 3l14 9-14 9V3z" />
|
||
</svg>
|
||
);
|