[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "HoloX eVigil - 药物警戒管理平台", description: "现代化药物警戒管理系统", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.7", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* 改为浅色主题，匹配原图的蓝色/紫色主色调 */ :root { --background: oklch(0.98 0.005 270); --foreground: oklch(0.2 0.02 270); --card: oklch(1 0 0); --card-foreground: oklch(0.2 0.02 270); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2 0.02 270); --primary: oklch(0.55 0.2 260); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.96 0.01 270); --secondary-foreground: oklch(0.3 0.02 270); --muted: oklch(0.94 0.01 270); --muted-foreground: oklch(0.5 0.02 270); --accent: oklch(0.65 0.18 320); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.92 0.01 270); --input: oklch(0.94 0.01 270); --ring: oklch(0.55 0.2 260); --radius: 0.625rem; /* Sidebar tokens - 浅色背景 */ --sidebar: oklch(0.97 0.01 270); --sidebar-foreground: oklch(0.4 0.02 270); --sidebar-primary: oklch(0.55 0.2 260); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.94 0.02 260); --sidebar-accent-foreground: oklch(0.25 0.02 270); --sidebar-border: oklch(0.9 0.01 270); --sidebar-ring: oklch(0.55 0.2 260); /* Custom tokens */ --surface-elevated: oklch(1 0 0); --success: oklch(0.55 0.18 145); --warning: oklch(0.7 0.15 85); --purple-gradient-start: oklch(0.6 0.2 280); --purple-gradient-end: oklch(0.55 0.22 320); } @theme inline { --font-sans: "Geist", "Geist Fallback", system-ui, sans-serif; --font-mono: "Geist Mono", "Geist Mono Fallback", monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-surface-elevated: var(--surface-elevated); --color-success: var(--success); --color-warning: var(--warning); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* 浅色滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: oklch(0.85 0 0); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: oklch(0.75 0 0); } [V0_FILE]typescriptreact:file="components/main-header.tsx" isMerged="true" "use client" import { Search, Bell, Globe, Monitor } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" interface MainHeaderProps { activeModule: string activeSubModule: string onCommandOpen: () => void } const topNavItems = [ { id: "对接管理", label: "对接管理" }, { id: "产品维护", label: "产品维护" }, { id: "个例管理", label: "个例管理", active: true }, { id: "业务运营", label: "业务运营" }, { id: "数据湖", label: "数据湖" }, { id: "系统配置", label: "系统配置" }, ] export function MainHeader({ activeModule, activeSubModule, onCommandOpen }: MainHeaderProps) { return (

{/* Left: Logo + Top Navigation */}

{/* Brand */}

HoloX eVigil 药物警戒管理平台

{/* Top Level Navigation */}

{/* Right: Actions */}

{/* 任务中心 */} {/* 编号中心 */} {/* 单屏模式 */}

{/* 搜索 */} {/* 通知 */} {/* 语言 */} {/* 用户头像 */}

) } [V0_FILE]typescriptreact:file="components/command-palette.tsx" isEdit="true" isMerged="true" "use client" import { useEffect } from "react" import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "@/components/ui/command" import { Settings, Database, BarChart3, Users, Package, FileText, Globe, FileSignature } from "lucide-react" interface CommandPaletteProps { open: boolean onOpenChange: (open: boolean) => void onNavigate: (module: string, subModule: string) => void } const navigationItems = [ { category: "功能配置", items: [ { icon: Settings, label: "通用设置", module: "功能配置", sub: "通用设置" }, { icon: Globe, label: "国际化配置", module: "功能配置", sub: "通用设置" }, { icon: FileSignature, label: "电子签名", module: "功能配置", sub: "通用设置" }, { icon: FileText, label: "个例配置", module: "功能配置", sub: "个例配置" }, ], }, { category: "数据管理", items: [ { icon: Database, label: "数据导入", module: "数据管理", sub: "数据导入" }, { icon: Database, label: "数据导出", module: "数据管理", sub: "数据导出" }, ], }, { category: "分析与报告", items: [ { icon: BarChart3, label: "统计报表", module: "数据分析", sub: "统计报表" }, { icon: BarChart3, label: "趋势分析", module: "数据分析", sub: "趋势分析" }, ], }, { category: "系统管理", items: [ { icon: Users, label: "用户管理", module: "用户管理", sub: "用户列表" }, { icon: Package, label: "产品管理", module: "产品管理", sub: "产品列表" }, ], }, ] export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPaletteProps) { useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key === "k" && (e.metaKey || e.ctrlKey)) { e.preventDefault() onOpenChange(!open) } } document.addEventListener("keydown", down) return () => document.removeEventListener("keydown", down) }, [open, onOpenChange]) return ( 未找到相关结果 {navigationItems.map((group, index) => (

{index > 0 && } {group.items.map((item) => ( { onNavigate(item.module, item.sub) onOpenChange(false) }} className="gap-3" > {item.label} ))}

))} ) } [V0_FILE]typescriptreact:file="components/collapsible-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { cn } from "@/lib/utils" import { Settings, Database, BarChart3, Users, Package, FileText, Command, Shield } from "lucide-react" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" interface CollapsibleSidebarProps { activeModule: string onModuleChange: (module: string) => void onSubModuleChange: (subModule: string) => void onCommandOpen: () => void } export const modules = [ { id: "功能配置", icon: Settings, label: "功能配置", subModules: ["通用配置", "个例配置"], }, { id: "数据管理", icon: Database, label: "数据管理", subModules: ["数据导入", "数据导出", "数据清洗"], }, { id: "个例管理", icon: FileText, label: "个例管理", subModules: ["个例列表", "个例录入", "个例审核"], }, { id: "产品管理", icon: Package, label: "产品管理", subModules: ["产品列表", "产品分类"], }, { id: "数据分析", icon: BarChart3, label: "数据分析", subModules: ["统计报表", "趋势分析", "合规分析"], }, { id: "用户管理", icon: Users, label: "用户管理", subModules: ["用户列表", "角色管理", "权限设置"], }, ] export function CollapsibleSidebar({ activeModule, onModuleChange, onSubModuleChange, onCommandOpen, }: CollapsibleSidebarProps) { return (

{/* Logo */}

{/* 快速导航按钮 */}

快速导航 ⌘K

{/* 模块导航 - 纯图标 */}

{modules.map((module) => { const isActive = activeModule === module.id return (

{module.label}

{module.subModules.slice(0, 3).join(" · ")} {module.subModules.length > 3 && " ..."}

) })}

{/* 用户头像 */}

管理员

admin@holox.com

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { CollapsibleSidebar } from "@/components/collapsible-sidebar" import { CommandPalette } from "@/components/command-palette" import { MainHeader } from "@/components/main-header" import { ConfigPanel } from "@/components/config-panel" export default function Dashboard() { const [commandOpen, setCommandOpen] = useState(false) const [activeModule, setActiveModule] = useState("功能配置") const [activeSubModule, setActiveSubModule] = useState("通用配置") const [activeTab, setActiveTab] = useState("电子签名") return (

setCommandOpen(true)} /> {/* 主内容区 - 最大化空间 */}

setCommandOpen(true)} />

{ setActiveModule(module) setActiveSubModule(sub) }} />

) } [V0_FILE]typescriptreact:file="components/config-panel.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useRef, useEffect } from "react" import React from "react" // import React from "react" import { Check, Shield, Settings, Layers, RotateCcw, Building2, KeyRound, Timer, AlertTriangle, PenTool, ClipboardCheck, Stethoscope, FileCheck, Send, Fingerprint, ChevronDown, Users, Lightbulb, Info, Database, Clock, Paperclip, Lock, Bell, Settings2, Languages, ShieldCheck, Calendar, ArrowRight, } from "lucide-react" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { cn } from "@/lib/utils" import { modules } from "@/components/collapsible-sidebar" import { Checkbox } from "@/components/ui/checkbox" import { Input } from "@/components/ui/input" // import { TooltipProvider } from "@/components/ui/tooltip" interface ConfigPanelProps { activeModule: string activeSubModule: string onSubModuleChange: (subModule: string) => void activeTab: string onTabChange: (tab: string) => void } const subModuleData = { 通用配置: { icon: Settings, description: "适用于平台内所有业务的统一全局设置项", label: "通用配置", // Added label for clarity }, 个例配置: { icon: Layers, description: "适用于平台内个例管理业务的专项设置项", label: "个例配置", // Added label for clarity }, } const holders = [ { id: "1", name: "北京洞悉网络产研子公司" }, { id: "2", name: "北京洞悉网络产研子公司2" }, { id: "3", name: "北京洞悉网络产研子公司3" }, { id: "4", name: "北京洞悉网络产研子公司5" }, { id: "5", name: "北京洞悉网络产研子公司1" }, { id: "6", name: "北京洞悉网络产研有限公司" }, { id: "7", name: "多次冲冲冲" }, { id: "8", name: "test22" }, ] const workflowSteps = [ { id: "data_entry", name: "数据录入", description: "录入阶段提交时需进行身份认证", label: "数据录入", icon: , }, { id: "quality_control", name: "数据质控", description: "质控阶段提交时需进行身份认证", label: "数据质控", icon: , }, { id: "medical_review", name: "医学评审", description: "评审阶段提交时需进行身份认证", label: "医学评审", icon: , }, { id: "review", name: "复核", description: "复核阶段提交时需进行身份认证", label: "复核", icon: }, { id: "submit", name: "提交", description: "最终提交时需进行身份认证", label: "提交", icon: }, ] const caseWorkflowSteps = [ { id: "data_entry", name: "数据录入", icon: , desc: "个例数据的初始录入阶段" }, { id: "quality_control", name: "数据质控", icon: , desc: "对录入数据进行质量控制检查" }, { id: "medical_review", name: "医学评审", icon: , desc: "医学专业人员对个例进行评审" }, { id: "review", name: "复核", icon: , desc: "对个例进行最终复核确认" }, { id: "submit", name: "提交", icon: , desc: "向监管机构提交个例报告" }, ] const caseConfigSections = [ { id: "workflow", name: "流程配置", icon: , label: "流程配置" }, { id: "workflowControl", name: "流程控制", icon: , label: "流程控制" }, { id: "translation", name: "翻译配置", icon: , label: "翻译配置" }, { id: "data", name: "数据配置", icon: , label: "数据配置" }, { id: "qualityAudit", name: "质控审核", icon: , label: "质控审核" }, { id: "submitLimit", name: "递交时限", icon: , label: "递交时限" }, { id: "attachment", name: "附件上报", icon: , label: "附件上报" }, { id: "reportLock", name: "报告锁定", icon: , label: "报告锁定" }, { id: "message", name: "消息配置", icon: , label: "消息配置" }, ] interface ConfigItemProps { icon: React.ReactNode title: string description: string checked: boolean onCheckedChange: (checked: boolean) => void variant?: "default" | "purple" | "amber" | "timestamp" // Added timestamp variant children?: React.ReactNode disabled?: boolean } function ConfigItem({ title, description, icon, checked, onCheckedChange, disabled = false, variant = "default", }: ConfigItemProps) { const [isHovered, setIsHovered] = useState(false) const baseClasses = cn( "rounded-lg p-4 transition-all duration-200", disabled && "opacity-50 cursor-not-allowed", !disabled && "cursor-pointer", ) const variantClasses = { default: cn( checked ? "bg-blue-50 border border-blue-200 shadow-sm" : "bg-white border border-slate-200 hover:border-blue-200 hover:shadow-sm", ), timestamp: cn( checked ? "bg-blue-50 border border-blue-200 shadow-sm" : "bg-white border border-slate-200 hover:border-blue-200 hover:shadow-sm", ), } return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{React.cloneElement(icon as React.ReactElement, { className: cn("w-5 h-5", checked ? "text-white" : "text-slate-500"), })}

{title}

{isHovered ? description : description.length > 40 ? description.slice(0, 40) + "..." : description}

) } interface SectionTitleProps { title: string description: string subtitle?: string color?: "blue" | "purple" } function SectionTitle({ title, description, subtitle, color = "blue" }: SectionTitleProps) { const [isHovered, setIsHovered] = useState(false) const colorStyles = { blue: { text: "text-blue-600", bgHover: "bg-blue-50", }, purple: { text: "text-purple-600", bgHover: "bg-purple-50", }, } const styles = colorStyles[color] return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{title} {subtitle && !isHovered && · {subtitle}}

{description}

) } interface HolderSelectProps { options: { id: string; name: string }[] selected: string onSelect: (id: string) => void } function HolderSelect({ options, selected, onSelect }: HolderSelectProps) { const [open, setOpen] = useState(false) const containerRef = useRef(null) useEffect(() => { function handleClickOutside(event: MouseEvent) { if (containerRef.current && !containerRef.current.contains(event.target as Node)) { setOpen(false) } } if (open) { document.addEventListener("mousedown", handleClickOutside) } return () => document.removeEventListener("mousedown", handleClickOutside) }, [open]) const selectedHolder = options.find((h) => h.id === selected) return (

{open && (

{options.map((option) => (

{ onSelect(option.id) setOpen(false) }} className={cn( "flex items-center gap-2 px-3 py-2.5 cursor-pointer text-sm transition-colors", selected === option.id ? "bg-blue-50 text-blue-600 font-medium" : "text-slate-600 hover:bg-slate-50", )} > {selected === option.id && } {option.name}

))}

)}

) } interface ApplyToHoldersFloatingProps { holders: { id: string; name: string }[] currentHolderId: string } function ApplyToHoldersFloating({ holders, currentHolderId }: ApplyToHoldersFloatingProps) { const [open, setOpen] = useState(false) const [selectedHolders, setSelectedHolders] = useState([]) const containerRef = useRef(null) useEffect(() => { function handleClickOutside(event: MouseEvent) { if (containerRef.current && !containerRef.current.contains(event.target as Node)) { setOpen(false) } } if (open) { document.addEventListener("mousedown", handleClickOutside) } return () => document.removeEventListener("mousedown", handleClickOutside) }, [open]) const toggleHolder = (id: string) => { setSelectedHolders((prev) => (prev.includes(id) ? prev.filter((h) => h !== id) : [...prev, id])) } const availableHolders = holders.filter((h) => h.id !== currentHolderId) return (

{open && (

请选择持有人

{availableHolders.map((holder) => (

toggleHolder(holder.id)} className={cn( "flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-sm transition-colors", selectedHolders.includes(holder.id) ? "bg-blue-50 text-blue-600" : "text-slate-600 hover:bg-slate-50", )} > {holder.name}

))}

)}

) } interface FailAttemptConfigProps { maxFailAttempts: string setMaxFailAttempts: (v: string) => void unlockTime: string setUnlockTime: (v: string) => void } function FailAttemptConfig({ maxFailAttempts, setMaxFailAttempts, unlockTime, setUnlockTime }: FailAttemptConfigProps) { const [isHovered, setIsHovered] = useState(false) return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} className="relative rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50/80 to-indigo-50/50 overflow-hidden" >

失败尝试限制

连续认证失败达到上限后，账户将被临时锁定，防止暴力破解攻击

最大失败次数 setMaxFailAttempts(e.target.value)} className="h-8 text-sm bg-white" min="1" max="10" />

解锁时间(分钟) setUnlockTime(e.target.value)} className="h-8 text-sm bg-white" min="1" max="1440" />

) } export function ConfigPanel({ activeModule, activeSubModule, onSubModuleChange, activeTab, onTabChange, }: ConfigPanelProps) { const currentModule = modules.find((m) => m.id === activeModule) const [hoveredTab, setHoveredTab] = useState(null) const [selectedHolder, setSelectedHolder] = useState("2") const [signatureTitleHovered, setSignatureTitleHovered] = useState(false) const commonConfigRef = useRef(null) const caseConfigRef = useRef(null) const [isScrolling, setIsScrolling] = useState(false) // 电子签名配置状态 const [signatureEnabled, setSignatureEnabled] = useState(true) const [selectedWorkflowSteps, setSelectedWorkflowSteps] = useState([]) const [passwordAuthEnabled, setPasswordAuthEnabled] = useState(true) const [recordTimestamp, setRecordTimestamp] = useState(true) const [handwriteSign, setHandwriteSign] = useState(false) const [maxFailAttempts, setMaxFailAttempts] = useState("5") const [unlockTime, setUnlockTime] = useState("30") const hasAnyWorkflowSelected = selectedWorkflowSteps.length > 0 const handlePasswordAuthChange = (checked: boolean) => { if (checked && !hasAnyWorkflowSelected) { // 不允许开启，保持关闭状态 return } setPasswordAuthEnabled(checked) } useEffect(() => { if (!hasAnyWorkflowSelected && passwordAuthEnabled) { setPasswordAuthEnabled(false) } }, [hasAnyWorkflowSelected, passwordAuthEnabled]) // 流程配置 const [caseWorkflow, setCaseWorkflow] = useState>({ data_entry: true, quality_control: true, medical_review: true, review: true, submit: true, }) const [workflowRoles, setWorkflowRoles] = useState>({}) const [workflowUsers, setWorkflowUsers] = useState>({}) // 流程控制 const [allowStepSkip, setAllowStepSkip] = useState(false) // For common config const [allowStepBack, setAllowStepBack] = useState(true) const [allowRevoke, setAllowRevoke] = useState(true) const [revokeTimeLimit, setRevokeTimeLimit] = useState("24") // Updates: specific states for case config workflow control const [allowStepJump, setAllowStepJump] = useState(false) const [allowWithdraw, setAllowWithdraw] = useState(true) const [withdrawTimeLimit, setWithdrawTimeLimit] = useState("30") // in minutes // 翻译配置 const [translationEnabled, setTranslationEnabled] = useState(false) const [translationMode, setTranslationMode] = useState<"realtime" | "manual">("manual") // 数据配置 const [autoSave, setAutoSave] = useState(true) const [saveHistory, setSaveHistory] = useState(true) // 质控审核 const [qualityAuditEnabled, setQualityAuditEnabled] = useState(false) const [qualityAuditRoles, setQualityAuditRoles] = useState([]) const [qualityAuditUsers, setQualityAuditUsers] = useState([]) // 递交时限 // Updates: specific states for case config submit limit const [firstKnowDateLimit, setFirstKnowDateLimit] = useState("15") const [feedbackTimeLimit, setFeedbackTimeLimit] = useState("7") // 附件上报 const [attachmentSync, setAttachmentSync] = useState(false) const [trackingReportSyncAll, setTrackingReportSyncAll] = useState(false) // Updates: specific state for case config attachment const [syncAllAttachments, setSyncAllAttachments] = useState(false) // 报告锁定 const [reportLockEnabled, setReportLockEnabled] = useState(false) const [reportLockTime, setReportLockTime] = useState("24") // Updates: specific states for case config message const [messageNodeNotify, setMessageNodeNotify] = useState(false) const [messageOverdueRemind, setMessageOverdueRemind] = useState(false) const [messageAuditResult, setMessageAuditResult] = useState(false) // 可折叠卡片状态 const [expandedCards, setExpandedCards] = useState>({ workflow: false, workflowControl: false, translation: false, data: false, qualityAudit: false, submitLimit: false, attachment: false, reportLock: false, message: false, }) const toggleCard = (cardId: string) => { setExpandedCards((prev) => ({ ...prev, [cardId]: !prev[cardId] })) } // Updates: Track active section for case config const [activeCaseConfigSection, setActiveCaseConfigSection] = useState("workflow") const workflowRef = useRef(null) const workflowControlRef = useRef(null) const translationRef = useRef(null) const dataRef = useRef(null) const qualityAuditRef = useRef(null) const submitLimitRef = useRef(null) const attachmentRef = useRef(null) const reportLockRef = useRef(null) const messageRef = useRef(null) useEffect(() => { const container = document.getElementById("main-scroll-container") if (!container) return let timeoutId: NodeJS.Timeout const handleScroll = () => { if (isScrolling) return clearTimeout(timeoutId) timeoutId = setTimeout(() => { const commonEl = commonConfigRef.current const caseEl = caseConfigRef.current if (!commonEl || !caseEl) return const scrollTop = container.scrollTop const containerTop = container.getBoundingClientRect().top const caseTop = caseEl.getBoundingClientRect().top - containerTop // 当个例配置区域距离顶部小于150px时，切换到个例配置tab if (caseTop < 150) { if (activeSubModule !== "个例配置") { onSubModuleChange("个例配置") } } else { if (activeSubModule !== "通用配置") { onSubModuleChange("通用配置") } } }, 50) } container.addEventListener("scroll", handleScroll) // 初始化时触发一次 handleScroll() return () => { container.removeEventListener("scroll", handleScroll) clearTimeout(timeoutId) } }, [activeSubModule, onSubModuleChange, isScrolling]) useEffect(() => { if (activeSubModule !== "个例配置") return const rightPanel = document.getElementById("case-config-right-panel") if (!rightPanel) return let timeoutId: NodeJS.Timeout const handleRightPanelScroll = () => { clearTimeout(timeoutId) timeoutId = setTimeout(() => { const sections = [ { id: "workflow", ref: workflowRef }, { id: "workflowControl", ref: workflowControlRef }, { id: "translation", ref: translationRef }, { id: "data", ref: dataRef }, { id: "qualityAudit", ref: qualityAuditRef }, { id: "submitLimit", ref: submitLimitRef }, { id: "attachment", ref: attachmentRef }, { id: "reportLock", ref: reportLockRef }, { id: "message", ref: messageRef }, ] const scrollTop = rightPanel.scrollTop const panelTop = rightPanel.getBoundingClientRect().top let activeSection = sections[0].id for (const section of sections) { const element = section.ref.current if (element) { const elementTop = element.getBoundingClientRect().top - panelTop if (elementTop < 50) { activeSection = section.id } } } if (activeCaseConfigSection !== activeSection) { setActiveCaseConfigSection(activeSection) } }, 50) } rightPanel.addEventListener("scroll", handleRightPanelScroll) handleRightPanelScroll() return () => { rightPanel.removeEventListener("scroll", handleRightPanelScroll) clearTimeout(timeoutId) } }, [activeSubModule, activeCaseConfigSection]) const handleCaseNavClick = (sectionId: string) => { setActiveCaseConfigSection(sectionId) const refMap: Record> = { workflow: workflowRef, workflowControl: workflowControlRef, translation: translationRef, data: dataRef, qualityAudit: qualityAuditRef, submitLimit: submitLimitRef, attachment: attachmentRef, reportLock: reportLockRef, message: messageRef, } const targetRef = refMap[sectionId] const rightPanel = document.getElementById("case-config-right-panel") if (targetRef?.current && rightPanel) { rightPanel.scrollTo({ top: targetRef.current.offsetTop - 10, behavior: "smooth", }) } } const handleSubModuleClick = (subModule: string) => { setIsScrolling(true) onSubModuleChange(subModule) const container = document.getElementById("main-scroll-container") if (!container) return const targetRef = subModule === "通用配置" ? commonConfigRef : caseConfigRef if (targetRef.current) { container.scrollTo({ top: subModule === "通用配置" ? 0 : targetRef.current.offsetTop - 100, behavior: "smooth", }) } setTimeout(() => setIsScrolling(false), 1000) } return ( // 移除TooltipProvider导入，直接使用React.Fragment //

{/* 顶部工具栏 */}

{/* Tab切换器 - 使用胶囊式设计 */}

{currentModule && activeModule === "功能配置" && ( <> {currentModule.subModules.map((sub) => { const isActive = activeSubModule === sub const isHovered = hoveredTab === sub return ( ) })} )}

{/* 主滚动内容区域 */}

{/* 通用配置区域 */}

setSignatureTitleHovered(true)} onMouseLeave={() => setSignatureTitleHovered(false)} className={cn( "flex items-center justify-between px-5 py-3.5 transition-all duration-300", signatureEnabled ? "bg-gradient-to-r from-blue-500 to-indigo-600" : "bg-slate-50", )} >

电子签名配置

{signatureTitleHovered ? "开启后，用户在关键业务流程提交时需进行电子签名认证，系统将记录签名信息用于合规审计和责任追溯" : "符合 21 CFR Part 11 法规要求的电子签名认证配置"}

{signatureEnabled ? "已启用" : "未启用"}

{/* 电子签名详细配置 */} {signatureEnabled && (

{/* 左侧：流程认证节点 */}

{workflowSteps.map((step, index) => (

{ setSelectedWorkflowSteps((prev) => prev.includes(step.id) ? prev.filter((id) => id !== step.id) : [...prev, step.id], ) }} className={cn( "group relative flex items-center gap-3 p-3.5 rounded-xl cursor-pointer transition-all duration-300 overflow-hidden", selectedWorkflowSteps.includes(step.id) ? // 调整选中状态渐变背景，提高不透明度和饱和度，增强阴影效果，使其更醒目而不像禁用状态 "bg-gradient-to-r from-blue-500/75 to-indigo-500/75 shadow-xl shadow-blue-500/25 scale-[1.02]" : "bg-gradient-to-r from-blue-50 to-indigo-50/50 hover:from-blue-100 hover:to-indigo-100/70 hover:shadow-md border border-blue-100/50", )} > {/* 左侧装饰条 */}

{/* 图标 */}

{step.icon && React.cloneElement(step.icon as React.ReactElement, { className: cn( "w-5 h-5 transition-all duration-300", selectedWorkflowSteps.includes(step.id) ? "text-white drop-shadow-sm" : "text-blue-500 group-hover:text-blue-600 group-hover:scale-110", ), })}

{/* 文字内容 */}

{step.label}

{step.description}

{/* 选中状态指示 - 使用渐变圆形徽章带勾选 */} {selectedWorkflowSteps.includes(step.id) && (

)} {!selectedWorkflowSteps.includes(step.id) && (

)}

{/* 连接线（除最后一个） */} {index < workflowSteps.length - 1 && (

)}

))}

{/* 渐变分隔线 */}

{/* 装饰圆点 */}

{/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} {/* */} { // 右侧：认证方式设置

{/* 密码认证主卡片 */}

} title="密码认证" description="签名时需要输入账户密码进行身份验证" checked={passwordAuthEnabled} onCheckedChange={handlePasswordAuthChange} variant="default" disabled={!hasAnyWorkflowSelected} />

{!hasAnyWorkflowSelected && (

请先在左侧选择至少一个流程认证节点，才能开启密码认证功能

)} {passwordAuthEnabled && hasAnyWorkflowSelected && (

{/* 认证选项组 */}

认证选项

} title="记录签名时间戳" description="系统自动记录每次电子签名的精确时间，用于审计追溯" checked={recordTimestamp} onCheckedChange={setRecordTimestamp} variant="timestamp" /> } title="用户手写电子签" description="要求用户在触摸屏或手写板上手写签名" checked={handwriteSign} onCheckedChange={setHandwriteSign} variant="default" />

{/* 安全限制组 */}

安全限制

)}

} {/* */}

)}

{/* */} {/* */}

个例配置

配置个例管理的工作流程和规则

{caseConfigSections.map((section) => ( ))}

{/* 右侧内容区域 */}

{/* 流程配置 */}

流程配置

自定义个例管理的工作流程，为每个流程节点配置相应的角色和人员

{caseWorkflowSteps.map((step) => { const isEnabled = caseWorkflow[step.id] return (

{React.cloneElement(step.icon as React.ReactElement, { className: "w-4 h-4", })}

{step.name}

{step.desc}

setCaseWorkflow((prev) => ({ ...prev, [step.id]: checked }))} />

{isEnabled && (

选择角色

选择人员

)}

) })}

{/* 流程控制 */}

流程控制

配置流程中的操作权限，如步骤跳转、回退和撤回等

} title="允许跳转步骤" description="开启后，用户可以跳过某些流程步骤直接进入下一步" checked={allowStepJump} onCheckedChange={setAllowStepJump} /> } title="允许回退" description="开启后，用户可以将流程回退到上一个步骤重新处理" checked={allowStepBack} onCheckedChange={setAllowStepBack} /> } title="允许撤回" description="开启后，用户可以在指定时间内撤回已提交的流程" checked={allowWithdraw} onCheckedChange={setAllowWithdraw} /> {allowWithdraw && (

撤回时限（分钟） setWithdrawTimeLimit(e.target.value)} className="h-9 max-w-xs" min="1" placeholder="输入撤回时限" />

)}

{/* 翻译配置 */}

翻译配置

配置个例报告的多语言翻译功能

} title="启用翻译" description="开启后，系统将支持个例报告的多语言翻译功能" checked={translationEnabled} onCheckedChange={setTranslationEnabled} /> {translationEnabled && (

翻译模式

)}

{/* 数据配置 */}

数据配置

配置个例数据的保存和历史版本管理

} title="自动保存" description="开启后，系统会定时自动保存用户输入的数据，避免数据丢失" checked={autoSave} onCheckedChange={setAutoSave} /> } title="保存历史版本" description="开启后，每次保存都会创建历史版本，支持版本对比和回溯" checked={saveHistory} onCheckedChange={setSaveHistory} />

{/* 质控审核 */}

质控审核

配置数据质控阶段的审核流程和人员

} title="启用质控审核" description="开启后，数据质控阶段将进行审核流程，由指定人员进行审核" checked={qualityAuditEnabled} onCheckedChange={setQualityAuditEnabled} /> {qualityAuditEnabled && (

审核角色

审核人员

)}

{/* 递交时限 */}

递交时限

设置个例报告的递交时限要求

首次获知日期（天） setFirstKnowDateLimit(e.target.value)} className="h-9" min="1" placeholder="输入天数" />

从首次获知日期起的报告递交时限

反馈时间（天） setFeedbackTimeLimit(e.target.value)} className="h-9" min="1" placeholder="输入天数" />

收到反馈后的报告更新时限

{/* 附件上报 */}

附件上报

配置个例报告中附件的上报规则

} title="同步所有附件" description="开启后，个例报告中的所有附件都将同步上报给监管机构" checked={syncAllAttachments} onCheckedChange={setSyncAllAttachments} /> {!syncAllAttachments && (

关闭后，您需要在每个个例中手动选择要上报的附件

)} } title="跟踪报告同步附件" description="开启后，跟踪报告提交时会自动同步所有相关附件" checked={trackingReportSyncAll} onCheckedChange={setTrackingReportSyncAll} />

{/* 报告锁定 */}

报告锁定

配置个例报告的锁定保护机制

} title="启用报告锁定" description="开启后，报告提交后将被锁定，防止误修改，超过锁定时间后自动解锁" checked={reportLockEnabled} onCheckedChange={setReportLockEnabled} /> {reportLockEnabled && (

锁定时间（小时） setReportLockTime(e.target.value)} className="h-9 max-w-xs" min="1" placeholder="输入锁定时间" />

报告提交后锁定的时长，超时后自动解锁可编辑

)}

{/* 消息配置 */}

消息配置

配置系统消息通知的发送规则

} title="流程节点通知" description="开启后，流程到达关键节点时会发送消息通知相关人员" checked={messageNodeNotify} onCheckedChange={setMessageNodeNotify} /> } title="即将超期提醒" description="开启后，个例报告即将超过递交时限时会发送提醒消息" checked={messageOverdueRemind} onCheckedChange={setMessageOverdueRemind} /> } title="审核结果通知" description="开启后，审核完成时会通知提交人审核结果" checked={messageAuditResult} onCheckedChange={setMessageAuditResult} />

{/* */}

{/* 底部固定操作栏 */}

// 移除TooltipProvider导入，直接使用React.Fragment // ) } interface CollapsibleConfigCardProps { id: string title: string description: string icon: React.ReactNode color: "blue" | "purple" expanded: boolean onToggle: () => void children: React.ReactNode } function CollapsibleConfigCard({ title, description, icon, color, expanded, onToggle, children, }: CollapsibleConfigCardProps) { return (

{icon}

{title}

{description}

{expanded && (

{children}

)}

) }