+ {isSidebarCollapsed && (
+
+ )}
+
+ + {currentPage === 'overview' && '控制台总览'} + {currentPage === 'library' && '临床数据存档'} + {currentPage === 'workspace' && '影像变换工作站'} + {currentPage === 'users' && '系统访问权限管理'} +
+
+
+
+
+ 算网协同系统 :: 稳定
+
+
+
+ {/* --- WORKSPACE VIEW --- */}
+ {currentPage === 'workspace' && (
+
+
+
+ )}
+
+ {/* --- OVERVIEW VIEW --- */}
+ {currentPage === 'overview' && (
+
+
+
+
+
+
+
+ {backendOnline ?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 仰头角度{cervicalRotation.toFixed(1)}°
+ 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" />
+
+
+ 过渡平滑宽度{transitionWidth}
+ 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" />
+
+
+
+
+
+
+
+
+ {deformationJob?.message || 'head_extension_app.py / run_deformation'}
+ {deformationJob?.status === 'completed' ? '100%' : `${progress}%`}
+
+
+
+
+ {deformationJob?.error && {deformationJob.error}
} + {deformationJob?.status === 'completed' && deformationJob.result?.zip?.path && ( + +
+
+
+
+
+
+
+
+ {videoJob?.status === 'completed' && videoJob.result?.video?.path ? (
+
+
+ 最大角度{videoMaxAngle}°
+ setVideoMaxAngle(parseInt(e.target.value, 10))} className="w-full accent-blue-600" />
+
+
+ 时长{videoDuration}s
+ setVideoDuration(parseInt(e.target.value, 10))} className="w-full accent-blue-600" />
+
+
+ ) : (
+
+
+
+
+ {videoJob?.message || 'generate_head_extension_video.py / generate_video'}
+ )} + {videoJob?.error &&{videoJob.error}
} +
+
+
+
+
+
+
+
+
+ {cervicalRotation.toFixed(1)} DEG
+ 快速 2D 预览
+对应 head_extension_app.py 的 preview_deform_2d
+
+ {previewImage ? (
+ 
+ ) : (
+
+
+
+ )}
+ 点击“更新预览”读取影像库 DICOM
+
+ {[
+ { 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 (
+
+
+ {deformationJob?.result?.previews?.comparison && (
+
+
+ );
+ })}
+
+ {t.label}
+ {t.sub}
+
+
+ {imagePath ? (
+ })
+ ) : (
+
+
+
+ )}
+ 等待 Python 输出
+
+ })
+
+ )}
+
+
+ 四状态过程对比图
+ {deformationJob.result.previews.comparison} +
+
+ )}
+
+ {/* --- LIBRARY VIEW (Card Grid) --- */}
+ {currentPage === 'library' && (
+
+ {[
+ { 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) => (
+
+
+
+
+ ))}
+ {s.l}
{s.v}
+
+
+
+ 近期活跃影像流
+ +
+ {libraryData.slice(0, 4).map(item => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ {item.patientId}
+{item.date} · {item.size}MB
+
+
+ {item.status === 'processed' ? 'COMPLETED' : 'QUEUEING'}
+
+
+
+
+
+
+ )}
+
+ {/* --- USERS VIEW --- */}
+ {currentPage === 'users' && (
+
+
+
+
+
+ 影像资产引擎
+网页影像库中的 DICOM 3D 序列数据集
+
+
+
+
+
+ {libraryData.map(item => (
+
+
+ {/* Simulated Preview Box */}
+
+ ))}
+
+ {/* Empty Upload Slot */}
+
+
+
+
+
+
+
+ {/* Abstract DICOM Scan Visualization */}
+
+
+
+
+
+
+
+ Axial View :: ID_{item.id.toUpperCase()}
+
+
+
+ {item.status.toUpperCase()}
+
+
+
+
+
+
+
+
+
+ 病例标识码
+{item.patientId}
+
+
+ SIZE
+{item.size}MB
+
+
+
+
+
+
+
+
+
+ 新增影像数据
+支持 DICOM 文件夹和 ZIP 压缩包
+
+
+
+
+
+
+ {/* My Profile */}
+
+ )}
+
+
+
+
+ {isChangingOwnPass && (
+
+
+
+ {currentUser?.username[0].toUpperCase()}
+
+
+ {currentUser?.username}
+
+ {currentUser?.role} ACCESS
+
+
+
+ )}
+
+ {/* User List Header */}
+ 密钥重置通道
+
+ 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" />
+
+
+
+
+
+ {/* Add User Inline Form */}
+ {showAddUser && currentUser?.role === 'admin' && (
+ 系统权限生命周期管理
+ {currentUser?.role === 'admin' && ( + + )} +
+
+
+ )}
+
+ {/* Improved User List with Gear Actions */}
+
+
+
+
+
+ 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" />
+
+
+
+ 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" />
+
+
+
+
+
+
+ {users.map(u => (
+
+
+
+ ))}
+
+
+
+
+ {u.username[0].toUpperCase()}
+
+
+
+
+
+ {u.username}
+ {u.role === 'admin' &&{u.role} · 接入于 {u.createdAt}
+
+ {currentUser?.role === 'admin' || u.id === currentUser?.id ? (
+
+
+
+
+ {activeUserMenu === u.id && (
+
+ ) : (
+
+
+ )}
+
+
+
+ {currentUser?.role === 'admin' && u.id !== currentUser.id && (
+
+ )}
+ 操作选单
+无权操作
+ )}
+