v1.3.0 release - Docker-deployable production build
This commit is contained in:
27
src/App.tsx
Normal file
27
src/App.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import Login from './pages/Login';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import ReportEditor from './pages/ReportEditor';
|
||||
import ReportManage from './pages/ReportManage';
|
||||
import ReportView from './pages/ReportView';
|
||||
import TemplateManage from './pages/TemplateManage';
|
||||
import UserManage from './pages/UserManage';
|
||||
import SystemSettings from './pages/SystemSettings';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<Login />} />
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/report-editor" element={<ReportEditor />} />
|
||||
<Route path="/report-manage" element={<ReportManage />} />
|
||||
<Route path="/report-view/:id" element={<ReportView />} />
|
||||
<Route path="/template-manage" element={<TemplateManage />} />
|
||||
<Route path="/user-manage" element={<UserManage />} />
|
||||
<Route path="/system-settings" element={<SystemSettings />} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
81
src/components/Sidebar.tsx
Normal file
81
src/components/Sidebar.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import React from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
FileEdit,
|
||||
FileText,
|
||||
Layout,
|
||||
Users,
|
||||
Settings,
|
||||
LogOut
|
||||
} from 'lucide-react';
|
||||
import { User } from '../types';
|
||||
import { storage } from '../utils/storage';
|
||||
|
||||
export default function Sidebar() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const currentUser = storage.get<User>('currentUser', {} as User);
|
||||
|
||||
const logout = () => {
|
||||
storage.remove('currentUser');
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ path: '/dashboard', icon: <LayoutDashboard size={18} />, title: '工作台', roles: ['super', 'admin', 'user'] },
|
||||
{ path: '/report-editor', icon: <FileEdit size={18} />, title: '图文报告生成', roles: ['super', 'admin', 'user'] },
|
||||
{ path: '/report-manage', icon: <FileText size={18} />, title: '报告管理', roles: ['super', 'admin', 'user'] },
|
||||
{ path: '/template-manage', icon: <Layout size={18} />, title: '模板管理', roles: ['super', 'admin'] },
|
||||
{ path: '/user-manage', icon: <Users size={18} />, title: '用户管理', roles: ['super', 'admin'] },
|
||||
{ path: '/system-settings', icon: <Settings size={18} />, title: '系统设置', roles: ['super', 'admin', 'user'] },
|
||||
];
|
||||
|
||||
const filteredNavItems = navItems.filter(item => item.roles.includes(currentUser.role));
|
||||
const isCollapsed = location.pathname === '/report-editor' || location.pathname === '/template-manage';
|
||||
|
||||
return (
|
||||
<aside className={`${isCollapsed ? 'w-20 px-3' : 'w-60 px-6'} bg-sidebar-bg border-r border-border flex flex-col py-8 shrink-0 h-screen sticky top-0 transition-all`}>
|
||||
<div className={`flex items-center gap-3 mb-12 h-12 ${isCollapsed ? 'justify-center' : ''}`}>
|
||||
<img src="/logo_square.png" alt="Logo" className="w-10 h-10 object-contain shrink-0" />
|
||||
<div className={`font-bold text-lg text-text-main leading-tight ${isCollapsed ? 'hidden' : ''}`}>
|
||||
<div>图文手术病历</div>
|
||||
<div>报告生成终端</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex flex-col gap-1 flex-1">
|
||||
{filteredNavItems.map((item) => (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
title={item.title}
|
||||
className={`flex items-center rounded-lg text-sm font-medium transition-all ${
|
||||
isCollapsed ? 'justify-center px-2 py-2.5' : 'gap-3 px-3 py-2.5'
|
||||
} ${
|
||||
location.pathname === item.path
|
||||
? 'bg-[#EFF6FF] text-accent'
|
||||
: 'text-text-muted hover:bg-bg hover:text-text-main'
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
<span className={isCollapsed ? 'hidden' : ''}>{item.title}</span>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className={`mt-auto pt-5 border-t border-border ${isCollapsed ? 'text-center' : ''}`}>
|
||||
<div className={`text-[12px] text-text-muted mb-1 ${isCollapsed ? 'hidden' : ''}`}>当前用户</div>
|
||||
<div className={`font-semibold text-sm text-text-main mb-4 ${isCollapsed ? 'hidden' : ''}`}>{currentUser.name || '未登录'}</div>
|
||||
<button
|
||||
onClick={logout}
|
||||
title="退出登录"
|
||||
className={`flex items-center rounded-lg text-sm font-medium text-text-muted hover:bg-red-50 hover:text-red-600 transition-all ${isCollapsed ? 'justify-center w-full px-2 py-2.5' : 'gap-3 px-3 py-2.5 w-full'}`}
|
||||
>
|
||||
<LogOut size={18} />
|
||||
<span className={isCollapsed ? 'hidden' : ''}>退出登录</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
216
src/index.css
Normal file
216
src/index.css
Normal file
@@ -0,0 +1,216 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
--color-bg: #F8FAFC;
|
||||
--color-sidebar-bg: #FFFFFF;
|
||||
--color-accent: #2563EB;
|
||||
--color-text-main: #1E293B;
|
||||
--color-text-muted: #64748B;
|
||||
--color-border: #E2E8F0;
|
||||
--color-card-bg: #FFFFFF;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply bg-bg text-text-main antialiased;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-accent {
|
||||
@apply bg-accent text-white px-5 py-2.5 rounded-lg font-semibold text-sm transition-all hover:opacity-90 active:scale-95;
|
||||
}
|
||||
|
||||
.card-minimal {
|
||||
@apply bg-card-bg border border-border rounded-xl shadow-[0_1px_3px_rgba(0,0,0,0.05)] p-6;
|
||||
}
|
||||
|
||||
.input-minimal {
|
||||
@apply w-full px-4 py-2.5 border border-border rounded-lg text-sm transition-colors focus:outline-hidden focus:border-accent;
|
||||
}
|
||||
|
||||
/* Editor Styles */
|
||||
.editor-content-wrapper {
|
||||
@apply flex-1 overflow-auto flex justify-center min-w-fit bg-[#e2e8f0] p-6;
|
||||
}
|
||||
.editor-content {
|
||||
@apply w-[210mm] min-h-[297mm] h-auto bg-white p-[40px_48px] shadow-[0_2px_8px_rgba(0,0,0,0.15)] outline-hidden leading-relaxed text-text-main text-sm flex-shrink-0 overflow-visible relative;
|
||||
}
|
||||
.editor-content:focus { outline: none; }
|
||||
.editor-content p { margin: 0; padding: 4px 0; }
|
||||
.editor-content h1 { font-size: 22px; margin: 16px 0 12px; font-weight: 600; text-align: center; }
|
||||
.editor-content strong, .editor-content b { font-weight: 600; }
|
||||
.editor-content u { text-decoration: underline; }
|
||||
.editor-content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 16px 0;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.editor-content td {
|
||||
padding: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.editor-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
@apply border-2 border-dashed border-[#cbd5e1] rounded-lg p-4 mb-2 bg-[#f8fafc] cursor-pointer min-h-[70px] flex flex-col items-center justify-center transition-all relative;
|
||||
}
|
||||
.image-placeholder:hover {
|
||||
@apply border-accent bg-[#f0f7ff];
|
||||
}
|
||||
.image-placeholder.has-image {
|
||||
@apply border-none bg-transparent p-0 min-h-0 cursor-default;
|
||||
}
|
||||
.image-placeholder .delete-btn {
|
||||
@apply absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full items-center justify-center text-[10px] cursor-pointer z-10;
|
||||
display: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.image-placeholder:hover .delete-btn {
|
||||
display: flex;
|
||||
}
|
||||
.image-placeholder .placeholder-text {
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.image-placeholder.has-image .placeholder-text {
|
||||
display: none !important;
|
||||
}
|
||||
.template-info-section {
|
||||
@apply relative mb-4;
|
||||
}
|
||||
|
||||
.manual-frame-badge {
|
||||
@apply absolute top-1 left-1 px-1.5 py-0.5 bg-yellow-400 text-yellow-900 text-[9px] font-bold rounded shadow-sm pointer-events-none;
|
||||
}
|
||||
|
||||
/* Smart Field Bindable Controls */
|
||||
.smart-field-wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0 2px;
|
||||
vertical-align: text-bottom;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.smart-field-wrapper .field-label {
|
||||
color: #64748b;
|
||||
user-select: none;
|
||||
}
|
||||
.smart-field-wrapper .field-value {
|
||||
min-width: 32px;
|
||||
padding: 0 4px;
|
||||
margin: 0 2px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
background: #f8fafc;
|
||||
color: #0f172a;
|
||||
line-height: 1.2;
|
||||
font-size: inherit;
|
||||
vertical-align: text-bottom;
|
||||
box-sizing: border-box;
|
||||
min-height: 1.2em;
|
||||
outline: none;
|
||||
}
|
||||
.smart-field-wrapper .field-value:empty::before {
|
||||
content: '\200b';
|
||||
}
|
||||
.smart-field-wrapper .field-value:focus {
|
||||
background-color: #e2e8f0;
|
||||
border-color: #94a3b8;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
.smart-field-wrapper .delete-btn {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
}
|
||||
.smart-field-wrapper .delete-btn:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
.template-editor-mode .smart-field-wrapper:hover .delete-btn,
|
||||
.template-editor-mode .smart-field-wrapper:focus-within .delete-btn {
|
||||
display: block;
|
||||
}
|
||||
.report-signature-img {
|
||||
max-width: 120px;
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
@page { size: A4; margin: 0; }
|
||||
body * { visibility: hidden !important; }
|
||||
.print-content, .print-content * { visibility: visible !important; }
|
||||
.print-wrapper {
|
||||
position: static !important;
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
overflow: visible !important;
|
||||
background: white !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.print-content {
|
||||
position: static !important;
|
||||
width: 210mm !important;
|
||||
min-height: auto !important;
|
||||
height: auto !important;
|
||||
box-shadow: none !important;
|
||||
padding: 10mm !important;
|
||||
margin: 0 !important;
|
||||
overflow: visible !important;
|
||||
background: white !important;
|
||||
}
|
||||
.print-content .image-placeholder:not(.has-image) {
|
||||
display: none !important;
|
||||
}
|
||||
.print-content .smart-field-wrapper .field-value {
|
||||
border: none !important;
|
||||
border-bottom: 1px solid #000 !important;
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
padding: 0 2px !important;
|
||||
}
|
||||
.print-content .smart-field-wrapper .delete-btn {
|
||||
display: none !important;
|
||||
}
|
||||
.report-signature-img {
|
||||
max-width: 120px !important;
|
||||
max-height: 40px !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
object-fit: contain !important;
|
||||
vertical-align: middle !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import {StrictMode} from 'react';
|
||||
import {createRoot} from 'react-dom/client';
|
||||
import App from './App.tsx';
|
||||
import './index.css';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
);
|
||||
285
src/pages/Dashboard.tsx
Normal file
285
src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import { FileText, Layout, Plus, Settings, TrendingUp, ArrowRight } from 'lucide-react';
|
||||
import { User, Report, Template } from '../types';
|
||||
import { storage } from '../utils/storage';
|
||||
|
||||
export default function Dashboard() {
|
||||
const navigate = useNavigate();
|
||||
const [stats, setStats] = useState({
|
||||
totalCount: 0,
|
||||
monthCount: 0,
|
||||
templateCount: 0,
|
||||
userCount: 0,
|
||||
todayCount: 0,
|
||||
trend: [0,0,0,0,0,0,0],
|
||||
trendLabels: ['','','','','','',''],
|
||||
trendFullDates: ['','','','','','',''],
|
||||
maxTrend: 1
|
||||
});
|
||||
const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; date: string; count: number }>({ visible: false, x: 0, y: 0, date: '', count: 0 });
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
const [timeRange, setTimeRange] = useState<'7days' | '1month'>('7days');
|
||||
|
||||
useEffect(() => {
|
||||
const user = storage.get<User | null>('currentUser', null);
|
||||
if (!user) {
|
||||
navigate('/');
|
||||
return;
|
||||
}
|
||||
setCurrentUser(user);
|
||||
|
||||
// Load stats
|
||||
const reports = storage.get<Report[]>('reports', []);
|
||||
const templates = storage.get<Template[]>('templates', []);
|
||||
const users = storage.get<User[]>('users', []);
|
||||
|
||||
const userReports = user.role === 'user'
|
||||
? reports.filter(r => r.author === user.username)
|
||||
: reports;
|
||||
|
||||
const now = new Date();
|
||||
const today = now.toISOString().split('T')[0];
|
||||
const todayReports = userReports.filter(r => r.createdAt === today);
|
||||
|
||||
// 本月报告数
|
||||
const currentMonth = today.slice(0, 7);
|
||||
const thisMonthReports = userReports.filter(r => r.createdAt && r.createdAt.startsWith(currentMonth));
|
||||
|
||||
// 动态趋势数据
|
||||
const daysCount = timeRange === '7days' ? 7 : 30;
|
||||
const trend: number[] = [];
|
||||
const labels: string[] = [];
|
||||
const fullDates: string[] = [];
|
||||
for (let i = daysCount - 1; i >= 0; i--) {
|
||||
const d = new Date(now);
|
||||
d.setDate(d.getDate() - i);
|
||||
const dateStr = d.toISOString().split('T')[0];
|
||||
const label = timeRange === '7days' ? `${d.getMonth() + 1}/${d.getDate()}` : `${d.getDate()}`;
|
||||
labels.push(label);
|
||||
fullDates.push(dateStr);
|
||||
trend.push(userReports.filter(r => r.createdAt === dateStr).length);
|
||||
}
|
||||
const maxTrend = Math.max(...trend, 1);
|
||||
|
||||
setStats({
|
||||
totalCount: userReports.length,
|
||||
monthCount: thisMonthReports.length,
|
||||
templateCount: templates.length,
|
||||
userCount: users.length,
|
||||
todayCount: todayReports.length,
|
||||
trend,
|
||||
trendLabels: labels,
|
||||
trendFullDates: fullDates,
|
||||
maxTrend
|
||||
});
|
||||
}, [navigate, timeRange]);
|
||||
|
||||
if (!currentUser) return null;
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-bg">
|
||||
<Sidebar />
|
||||
|
||||
<main className="flex-1 p-10 overflow-y-auto">
|
||||
<header className="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-text-main">工作台概览</h1>
|
||||
<p className="text-text-muted text-sm mt-1">实时报告动态与系统状态追踪。</p>
|
||||
</div>
|
||||
<Link to="/report-editor" className="btn-accent inline-flex items-center gap-2">
|
||||
<Plus size={18} />
|
||||
新建报告
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<div className="card-minimal">
|
||||
<div className="text-[11px] text-text-muted mb-2 uppercase tracking-wider font-bold">全部报告总数</div>
|
||||
<div className="text-3xl font-bold text-text-main">{stats.totalCount}</div>
|
||||
</div>
|
||||
|
||||
<div className="card-minimal">
|
||||
<div className="text-[11px] text-text-muted mb-2 uppercase tracking-wider font-bold">本月报告总数</div>
|
||||
<div className="text-3xl font-bold text-text-main">{stats.monthCount}</div>
|
||||
</div>
|
||||
|
||||
<div className="card-minimal">
|
||||
<div className="text-[11px] text-text-muted mb-2 uppercase tracking-wider font-bold">今日新增报告</div>
|
||||
<div className="text-3xl font-bold text-text-main">{stats.todayCount}</div>
|
||||
</div>
|
||||
|
||||
<div className="card-minimal">
|
||||
<div className="text-[11px] text-text-muted mb-2 uppercase tracking-wider font-bold">系统总用户</div>
|
||||
<div className="text-3xl font-bold text-text-main">{stats.userCount}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-6">
|
||||
<div className="card-minimal flex flex-col">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<span className="font-bold text-sm uppercase tracking-wider text-text-main flex items-center gap-2">
|
||||
<TrendingUp size={16} className="text-accent" />
|
||||
报告增长趋势
|
||||
</span>
|
||||
<div className="flex bg-slate-100 p-1 rounded-lg">
|
||||
<button
|
||||
onClick={() => setTimeRange('7days')}
|
||||
className={`px-3 py-1 text-xs font-bold rounded-md transition-colors ${timeRange === '7days' ? 'bg-white text-accent shadow-sm' : 'text-text-muted hover:text-text-main'}`}
|
||||
>最近 7 天</button>
|
||||
<button
|
||||
onClick={() => setTimeRange('1month')}
|
||||
className={`px-3 py-1 text-xs font-bold rounded-md transition-colors ${timeRange === '1month' ? 'bg-white text-accent shadow-sm' : 'text-text-muted hover:text-text-main'}`}
|
||||
>最近 30 天</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 bg-slate-50 rounded-xl p-6 min-h-[240px] relative">
|
||||
{/* SVG Area Chart */}
|
||||
<svg
|
||||
viewBox="0 0 300 135"
|
||||
className="w-full h-full overflow-visible"
|
||||
onMouseMove={(e) => {
|
||||
const svg = e.currentTarget;
|
||||
const rect = svg.getBoundingClientRect();
|
||||
const mouseX = ((e.clientX - rect.left) / rect.width) * 300;
|
||||
const paddingX = 10;
|
||||
const chartW = 300 - paddingX * 2;
|
||||
const n = stats.trend.length;
|
||||
if (n <= 1) return;
|
||||
let idx = Math.round(((mouseX - paddingX) / chartW) * (n - 1));
|
||||
idx = Math.max(0, Math.min(n - 1, idx));
|
||||
const ptX = paddingX + (idx / (n - 1)) * chartW;
|
||||
const ptY = 8 + (120 - 16) - (stats.maxTrend > 0 ? (stats.trend[idx] / stats.maxTrend) * (120 - 16) : 0);
|
||||
setTooltip({
|
||||
visible: true,
|
||||
x: (ptX / 300) * rect.width,
|
||||
y: (ptY / 135) * rect.height,
|
||||
date: stats.trendFullDates[idx] || '',
|
||||
count: stats.trend[idx]
|
||||
});
|
||||
}}
|
||||
onMouseLeave={() => setTooltip(prev => ({ ...prev, visible: false }))}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="trendGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#2563EB" stopOpacity="0.35" />
|
||||
<stop offset="100%" stopColor="#2563EB" stopOpacity="0.02" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{/* Grid lines */}
|
||||
{[0, 1, 2, 3].map((i) => (
|
||||
<line
|
||||
key={i}
|
||||
x1="0"
|
||||
y1={i * 30}
|
||||
x2="300"
|
||||
y2={i * 30}
|
||||
stroke="#E2E8F0"
|
||||
strokeWidth="1"
|
||||
strokeDasharray="2 2"
|
||||
/>
|
||||
))}
|
||||
{/* Area path */}
|
||||
{stats.trend.length > 0 && (() => {
|
||||
const paddingX = 10;
|
||||
const paddingY = 8;
|
||||
const chartW = 300 - paddingX * 2;
|
||||
const chartH = 120 - paddingY * 2;
|
||||
const points = stats.trend.map((count, i) => {
|
||||
const x = paddingX + (i / (stats.trend.length - 1)) * chartW;
|
||||
const y = paddingY + chartH - (stats.maxTrend > 0 ? (count / stats.maxTrend) * chartH : 0);
|
||||
return { x, y, count, label: stats.trendLabels[i] };
|
||||
});
|
||||
const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
|
||||
const areaPath = `${linePath} L ${points[points.length - 1].x} ${120 - paddingY} L ${points[0].x} ${120 - paddingY} Z`;
|
||||
return (
|
||||
<g>
|
||||
<path d={areaPath} fill="url(#trendGradient)" />
|
||||
<path d={linePath} fill="none" stroke="#2563EB" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
{/* Transparent capture layer for reliable mouse events */}
|
||||
<rect x="0" y="0" width="300" height="135" fill="transparent" />
|
||||
{points.map((p, i) => (
|
||||
<g key={i}>
|
||||
{/* 7天模式显示圆点和数值；30天模式隐藏 */}
|
||||
{stats.trend.length <= 10 && (
|
||||
<>
|
||||
<circle cx={p.x} cy={p.y} r="3.5" fill="#2563EB" stroke="#fff" strokeWidth="2" />
|
||||
<text x={p.x} y={p.y - 10} textAnchor="middle" fontSize="8" fill="#64748B" fontWeight="bold">{p.count}</text>
|
||||
</>
|
||||
)}
|
||||
{/* 标签稀疏化：7天每天显示，30天每隔5天显示 */}
|
||||
{(stats.trend.length <= 10 || i % 5 === 0) && (
|
||||
<text x={p.x} y={128} textAnchor="middle" fontSize={stats.trendLabels.length > 10 ? '7' : '8'} fill="#94A3B8" fontWeight="bold">{p.label}</text>
|
||||
)}
|
||||
</g>
|
||||
))}
|
||||
</g>
|
||||
);
|
||||
})()}
|
||||
</svg>
|
||||
{/* Tooltip */}
|
||||
{tooltip.visible && (
|
||||
<div
|
||||
className="absolute pointer-events-none bg-slate-800 text-white text-xs rounded-lg px-3 py-2 shadow-lg z-10"
|
||||
style={{ left: tooltip.x, top: tooltip.y - 40, transform: 'translateX(-50%)' }}
|
||||
>
|
||||
<div className="font-bold">{tooltip.date}</div>
|
||||
<div className="text-slate-300">报告数: {tooltip.count}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-minimal">
|
||||
<div className="font-bold text-sm uppercase tracking-wider text-text-main mb-6">快捷入口</div>
|
||||
<div className="space-y-2">
|
||||
<Link to="/report-manage" className="flex items-center justify-between p-4 bg-slate-50 rounded-xl hover:bg-white hover:shadow-md border border-transparent hover:border-border transition-all group">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-text-muted group-hover:bg-accent group-hover:text-white transition-colors shadow-sm">
|
||||
<FileText size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-bold text-text-main">报告管理</div>
|
||||
<div className="text-[11px] text-text-muted">查看与搜索所有报告</div>
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRight size={16} className="text-text-muted group-hover:text-accent group-hover:translate-x-1 transition-all" />
|
||||
</Link>
|
||||
|
||||
{(currentUser.role === 'super' || currentUser.role === 'admin') && (
|
||||
<Link to="/template-manage" className="flex items-center justify-between p-4 bg-slate-50 rounded-xl hover:bg-white hover:shadow-md border border-transparent hover:border-border transition-all group">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-text-muted group-hover:bg-accent group-hover:text-white transition-colors shadow-sm">
|
||||
<Layout size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-bold text-text-main">模板管理</div>
|
||||
<div className="text-[11px] text-text-muted">配置报告标准模板</div>
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRight size={16} className="text-text-muted group-hover:text-accent group-hover:translate-x-1 transition-all" />
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{currentUser.role === 'super' && (
|
||||
<Link to="/system-settings" className="flex items-center justify-between p-4 bg-slate-50 rounded-xl hover:bg-white hover:shadow-md border border-transparent hover:border-border transition-all group">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-text-muted group-hover:bg-accent group-hover:text-white transition-colors shadow-sm">
|
||||
<Settings size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-bold text-text-main">系统设置</div>
|
||||
<div className="text-[11px] text-text-muted">配置抽帧与API参数</div>
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRight size={16} className="text-text-muted group-hover:text-accent group-hover:translate-x-1 transition-all" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
230
src/pages/Login.tsx
Normal file
230
src/pages/Login.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { User, Template, SystemSettings, FormField, DEFAULT_FORM_FIELDS } from '../types';
|
||||
import { defaultReportContent } from '../utils/defaultContent';
|
||||
import { storage } from '../utils/storage';
|
||||
import { User as UserIcon, Lock } from 'lucide-react';
|
||||
|
||||
export default function Login() {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const initData = () => {
|
||||
const existingUsers = storage.get<User[]>('users', []);
|
||||
const hasAdmin = existingUsers.some((u) => u.username === 'admin' && u.password === '123456');
|
||||
|
||||
let savedTemplates = storage.get<Template[]>('templates', []);
|
||||
if (savedTemplates.length === 0) {
|
||||
const initialTemplate: Template = {
|
||||
id: 'surgery',
|
||||
name: '腹腔镜胆囊切除术报告',
|
||||
desc: '标准手术记录模板',
|
||||
content: defaultReportContent,
|
||||
createdAt: new Date().toISOString(),
|
||||
author: 'admin'
|
||||
};
|
||||
savedTemplates = [initialTemplate];
|
||||
storage.set('templates', savedTemplates);
|
||||
}
|
||||
|
||||
if (!hasAdmin) {
|
||||
const allTplIds = savedTemplates.map(t => t.id);
|
||||
const defaultUsers: User[] = [
|
||||
{ username: 'admin', password: '123456', role: 'super', name: '超级管理员', status: 'active', createdAt: '2024-01-01', department: 'admin', visibleTemplates: allTplIds, manageableTemplates: allTplIds },
|
||||
{ username: 'manager', password: '123456', role: 'admin', name: '管理员', status: 'active', createdAt: '2024-01-01', department: '外科', visibleTemplates: allTplIds, manageableTemplates: allTplIds },
|
||||
{ username: '0001', password: '123456', role: 'user', name: '张医生', status: 'active', createdAt: '2024-01-01', department: '外科', visibleTemplates: allTplIds, manageableTemplates: [] }
|
||||
];
|
||||
storage.set('users', defaultUsers);
|
||||
console.log('Default users initialized');
|
||||
}
|
||||
|
||||
const fieldsConfig = storage.get<FormField[]>('formFieldsConfig', []);
|
||||
if (fieldsConfig.length === 0) {
|
||||
storage.set('formFieldsConfig', DEFAULT_FORM_FIELDS);
|
||||
}
|
||||
|
||||
const savedAssets = storage.get<{id: string; name: string; dataUrl: string}[]>('imageAssets', []);
|
||||
if (savedAssets.length === 0) {
|
||||
fetch('/logo_square.png')
|
||||
.then(res => res.blob())
|
||||
.then(blob => {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
const dataUrl = reader.result as string;
|
||||
storage.set('imageAssets', [{ id: 'asset_logo', name: '医院Logo', dataUrl }]);
|
||||
};
|
||||
reader.readAsDataURL(blob);
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
const settingsRaw = storage.get<SystemSettings>('systemSettings', {} as SystemSettings);
|
||||
if (!settingsRaw.frameCount) {
|
||||
const round1 = (n: number) => Math.round(n * 10) / 10;
|
||||
const positions: number[] = [];
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
positions.push(round1((100 / 13) * i));
|
||||
}
|
||||
const defaultSettings = {
|
||||
frameCount: 12,
|
||||
framePositions: positions,
|
||||
apiEndpoint: '',
|
||||
apiKey: '',
|
||||
defaultTemplate: savedTemplates[0]?.id || '',
|
||||
frameMode: 'uniform',
|
||||
autoInsertFrames: true,
|
||||
autoInsertDelay: 1,
|
||||
autoInsertFrameIndices: [0, 2, 4, 6, 8, 10]
|
||||
};
|
||||
storage.set('systemSettings', defaultSettings);
|
||||
}
|
||||
};
|
||||
|
||||
initData();
|
||||
}, []);
|
||||
|
||||
const handleLogin = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const u = username.trim();
|
||||
const p = password.trim();
|
||||
|
||||
const users = storage.get<User[]>('users', []);
|
||||
let user = users.find(user => user.username === u && user.password === p);
|
||||
|
||||
// Fallback for default accounts if localStorage is messed up
|
||||
if (!user) {
|
||||
const defaults = [
|
||||
{ u: 'admin', p: '123456', r: 'super', n: '超级管理员' },
|
||||
{ u: 'manager', p: '123456', r: 'admin', n: '管理员' },
|
||||
{ u: '0001', p: '123456', r: 'user', n: '张医生' }
|
||||
];
|
||||
const d = defaults.find(item => item.u === u && item.p === p);
|
||||
if (d) {
|
||||
const allTemplates = storage.get<Template[]>('templates', []);
|
||||
const allTplIds = allTemplates.map(t => t.id);
|
||||
user = { username: d.u, password: d.p, role: d.r as any, name: d.n, status: 'active', createdAt: '2024-01-01', visibleTemplates: allTplIds, manageableTemplates: d.r === 'user' ? [] : allTplIds, department: d.r === 'super' ? 'admin' : '外科' };
|
||||
// Sync back to localStorage
|
||||
const updatedUsers = [...users.filter(item => item.username !== u), user];
|
||||
storage.set('users', updatedUsers);
|
||||
}
|
||||
}
|
||||
|
||||
if (user) {
|
||||
if (user.status === 'inactive') {
|
||||
setError('该账号已被禁用');
|
||||
return;
|
||||
}
|
||||
storage.set('currentUser', user);
|
||||
navigate('/dashboard');
|
||||
} else {
|
||||
setError('用户ID或密码错误');
|
||||
console.log('Login failed for:', u);
|
||||
}
|
||||
};
|
||||
|
||||
const fillLogin = (u: string, p: string) => {
|
||||
setUsername(u);
|
||||
setPassword(p);
|
||||
setTimeout(() => {
|
||||
// Trigger the robust login logic manually
|
||||
const users = storage.get<User[]>('users', []);
|
||||
let user = users.find(user => user.username === u && user.password === p);
|
||||
|
||||
if (!user) {
|
||||
const defaults = [
|
||||
{ u: 'admin', p: '123456', r: 'super', n: '超级管理员' },
|
||||
{ u: 'manager', p: '123456', r: 'admin', n: '管理员' },
|
||||
{ u: '0001', p: '123456', r: 'user', n: '张医生' }
|
||||
];
|
||||
const d = defaults.find(item => item.u === u && item.p === p);
|
||||
if (d) {
|
||||
user = { username: d.u, password: d.p, role: d.r as any, name: d.n, status: 'active', createdAt: '2024-01-01' };
|
||||
const updatedUsers = [...users.filter(item => item.username !== u), user];
|
||||
storage.set('users', updatedUsers);
|
||||
}
|
||||
}
|
||||
|
||||
if (user) {
|
||||
storage.set('currentUser', user);
|
||||
navigate('/dashboard');
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-bg p-6">
|
||||
<div className="bg-white rounded-3xl shadow-[0_20px_50px_-12px_rgba(0,0,0,0.08)] p-12 w-full max-w-[460px] border border-border">
|
||||
<div className="text-center mb-10">
|
||||
<div className="flex flex-col items-center">
|
||||
<img src="/logo_square.png" alt="Logo" className="w-16 h-16 object-contain mb-6" />
|
||||
<h1 className="text-2xl font-bold text-text-main tracking-tight mb-1">手术图文病历报告生成终端</h1>
|
||||
<p className="text-xs text-text-muted uppercase tracking-widest font-bold">智能图文报告管理系统</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-[10px] font-bold text-text-main uppercase tracking-wider">用户ID</label>
|
||||
<div className="relative">
|
||||
<UserIcon className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-muted" size={18} />
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="请输入您的用户ID"
|
||||
required
|
||||
className="input-minimal pl-11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-[10px] font-bold text-text-main uppercase tracking-wider">密码</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-muted" size={18} />
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="请输入您的登录密码"
|
||||
required
|
||||
className="input-minimal pl-11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-accent w-full py-4 text-base shadow-[0_8px_20px_-4px_rgba(37,99,235,0.2)]"
|
||||
>
|
||||
进入系统
|
||||
</button>
|
||||
{error && <div className="text-red-500 text-xs text-center font-bold animate-pulse">{error}</div>}
|
||||
</form>
|
||||
|
||||
<div className="mt-10 pt-8 border-t border-border">
|
||||
<h3 className="text-[10px] text-text-muted mb-4 uppercase tracking-widest font-bold text-center">快捷登录测试账号</h3>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{[
|
||||
{ u: 'admin', p: '123456', r: '超级管理员', c: 'bg-amber-100 text-amber-700' },
|
||||
{ u: 'manager', p: '123456', r: '管理员', c: 'bg-blue-100 text-blue-700' },
|
||||
{ u: '0001', p: '123456', r: '医生', c: 'bg-green-100 text-green-700' }
|
||||
].map(test => (
|
||||
<div
|
||||
key={test.u}
|
||||
onClick={() => fillLogin(test.u, test.p)}
|
||||
className="flex justify-between items-center p-3 bg-slate-50 rounded-xl cursor-pointer transition-all hover:bg-white hover:shadow-md border border-transparent hover:border-border group"
|
||||
>
|
||||
<span className="text-xs font-bold text-text-main">{test.u} / {test.p}</span>
|
||||
<span className={`text-[9px] px-2 py-0.5 rounded-full font-bold uppercase tracking-wider ${test.c}`}>
|
||||
{test.r}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
2224
src/pages/ReportEditor.tsx
Normal file
2224
src/pages/ReportEditor.tsx
Normal file
File diff suppressed because it is too large
Load Diff
476
src/pages/ReportManage.tsx
Normal file
476
src/pages/ReportManage.tsx
Normal file
@@ -0,0 +1,476 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import { Search, Eye, Edit, Trash2, FileText, History, X, Download, Printer } from 'lucide-react';
|
||||
import { User, Report, DEFAULT_FORM_FIELDS } from '../types';
|
||||
import { storage } from '../utils/storage';
|
||||
import { printDocument } from '../utils/print';
|
||||
|
||||
const formatDateTime = (iso: string) => {
|
||||
if (!iso) return '-';
|
||||
const d = new Date(iso);
|
||||
if (isNaN(d.getTime())) return iso;
|
||||
const pad = (n: number) => n.toString().padStart(2, '0');
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
};
|
||||
|
||||
export default function ReportManage() {
|
||||
const navigate = useNavigate();
|
||||
const [reports, setReports] = useState<Report[]>([]);
|
||||
const [filteredReports, setFilteredReports] = useState<Report[]>([]);
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('');
|
||||
const [dateFilter, setDateFilter] = useState('');
|
||||
const [historyModalOpen, setHistoryModalOpen] = useState(false);
|
||||
const [historyReport, setHistoryReport] = useState<Report | null>(null);
|
||||
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
||||
const [exportModalOpen, setExportModalOpen] = useState(false);
|
||||
const [exportTarget, setExportTarget] = useState<Report | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const user = storage.get<User | null>('currentUser', null);
|
||||
if (!user) {
|
||||
navigate('/');
|
||||
return;
|
||||
}
|
||||
setCurrentUser(user);
|
||||
|
||||
const savedReports = storage.get<Report[]>('reports', []);
|
||||
setReports(savedReports);
|
||||
}, [navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentUser) return;
|
||||
|
||||
let filtered = [...reports];
|
||||
|
||||
if (currentUser.role === 'user') {
|
||||
filtered = filtered.filter(r => r.author === currentUser.username);
|
||||
}
|
||||
|
||||
if (searchTerm) {
|
||||
const term = searchTerm.toLowerCase();
|
||||
filtered = filtered.filter(r =>
|
||||
r.title.toLowerCase().includes(term) ||
|
||||
r.patientName.toLowerCase().includes(term) ||
|
||||
r.hospitalId.toLowerCase().includes(term)
|
||||
);
|
||||
}
|
||||
|
||||
if (statusFilter) {
|
||||
filtered = filtered.filter(r => r.status === statusFilter);
|
||||
}
|
||||
|
||||
if (dateFilter) {
|
||||
const now = new Date();
|
||||
filtered = filtered.filter(r => {
|
||||
const reportDate = new Date(r.createdAt);
|
||||
if (dateFilter === 'today') {
|
||||
return reportDate.toDateString() === now.toDateString();
|
||||
} else if (dateFilter === 'week') {
|
||||
const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
|
||||
return reportDate >= weekAgo;
|
||||
} else if (dateFilter === 'month') {
|
||||
return reportDate.getMonth() === now.getMonth() && reportDate.getFullYear() === now.getFullYear();
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
setFilteredReports(filtered);
|
||||
}, [reports, currentUser, searchTerm, statusFilter, dateFilter]);
|
||||
|
||||
const deleteReport = (id: string) => {
|
||||
if (window.confirm('确定要删除此报告吗？')) {
|
||||
const updatedReports = reports.filter(r => r.id !== id);
|
||||
setReports(updatedReports);
|
||||
storage.set('reports', updatedReports);
|
||||
setSelectedIds(prev => prev.filter(pid => pid !== id));
|
||||
}
|
||||
};
|
||||
|
||||
const viewReport = (id: string) => {
|
||||
navigate(`/report-view/${id}`);
|
||||
};
|
||||
|
||||
const editReport = (id: string) => {
|
||||
navigate(`/report-editor?id=${id}`);
|
||||
};
|
||||
|
||||
const openHistory = (report: Report) => {
|
||||
setHistoryReport(report);
|
||||
setHistoryModalOpen(true);
|
||||
};
|
||||
|
||||
const restoreHistory = (content: string) => {
|
||||
if (!historyReport) return;
|
||||
if (!window.confirm('确定要恢复此历史版本到编辑器吗？当前未保存的内容将丢失。')) return;
|
||||
navigate(`/report-editor?id=${historyReport.id}&restore=1`);
|
||||
storage.setSession(`restore_${historyReport.id}`, content);
|
||||
setHistoryModalOpen(false);
|
||||
};
|
||||
|
||||
const toggleSelect = (id: string) => {
|
||||
setSelectedIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
|
||||
};
|
||||
|
||||
const toggleSelectAll = () => {
|
||||
if (selectedIds.length === filteredReports.length && filteredReports.length > 0) {
|
||||
setSelectedIds([]);
|
||||
} else {
|
||||
setSelectedIds(filteredReports.map(r => r.id));
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkDelete = () => {
|
||||
if (!window.confirm(`确定要删除选中的 ${selectedIds.length} 份报告吗？`)) return;
|
||||
const updated = reports.filter(r => !selectedIds.includes(r.id));
|
||||
setReports(updated);
|
||||
storage.set('reports', updated);
|
||||
setSelectedIds([]);
|
||||
};
|
||||
|
||||
const buildExportData = (report: Report) => {
|
||||
const fields: Record<string, any> = {};
|
||||
DEFAULT_FORM_FIELDS.forEach(f => {
|
||||
fields[f.key] = (report as any)[f.key];
|
||||
});
|
||||
return {
|
||||
meta: {
|
||||
id: report.id,
|
||||
title: report.title,
|
||||
createdAt: report.createdAt,
|
||||
updatedAt: report.updatedAt,
|
||||
author: report.author,
|
||||
authorName: report.authorName,
|
||||
status: report.status
|
||||
},
|
||||
fields
|
||||
};
|
||||
};
|
||||
|
||||
const downloadJSON = (data: any, filename: string) => {
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const exportSinglePDF = (report: Report) => {
|
||||
printDocument(report.content);
|
||||
};
|
||||
|
||||
const exportSingleJSON = (report: Report) => {
|
||||
const data = buildExportData(report);
|
||||
downloadJSON(data, `报告_${report.patientName || '未命名'}_${report.id}.json`);
|
||||
};
|
||||
|
||||
const exportBulkPDF = () => {
|
||||
const selectedReports = reports.filter(r => selectedIds.includes(r.id));
|
||||
const mergedHTML = selectedReports.map(r => r.content).join('<div style="page-break-after: always;"></div>');
|
||||
printDocument(mergedHTML);
|
||||
};
|
||||
|
||||
const exportBulkJSON = () => {
|
||||
const selectedReports = reports.filter(r => selectedIds.includes(r.id));
|
||||
const data = selectedReports.map(r => buildExportData(r));
|
||||
const timestamp = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
|
||||
downloadJSON(data, `reports_export_${timestamp}.json`);
|
||||
};
|
||||
|
||||
const openExportModal = (report: Report) => {
|
||||
setExportTarget(report);
|
||||
setExportModalOpen(true);
|
||||
};
|
||||
|
||||
if (!currentUser) return null;
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-bg">
|
||||
<Sidebar />
|
||||
|
||||
<main className="flex-1 p-10 overflow-y-auto">
|
||||
<header className="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-text-main">报告管理</h1>
|
||||
<p className="text-text-muted text-sm mt-1">
|
||||
{currentUser.role === 'user' ? '查看、编辑、打印自己创建的报告' : '查看/检索全院所有已撰写的报告'}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex flex-wrap gap-4 mb-4">
|
||||
<div className="relative flex-1 min-w-[240px] max-w-[400px]">
|
||||
<Search className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-muted" size={18} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索报告标题或患者姓名..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="input-minimal pl-11"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className="input-minimal max-w-[160px] bg-white"
|
||||
>
|
||||
<option value="">全部状态</option>
|
||||
<option value="draft">草稿</option>
|
||||
<option value="completed">已完成</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={dateFilter}
|
||||
onChange={(e) => setDateFilter(e.target.value)}
|
||||
className="input-minimal max-w-[160px] bg-white"
|
||||
>
|
||||
<option value="">全部时间</option>
|
||||
<option value="today">今天</option>
|
||||
<option value="week">本周</option>
|
||||
<option value="month">本月</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{selectedIds.length > 0 && (
|
||||
<div className="flex items-center gap-3 mb-4 p-3 bg-slate-50 border border-border rounded-lg">
|
||||
<span className="text-sm font-semibold text-text-main">已选择 {selectedIds.length} 项</span>
|
||||
<div className="flex-1"></div>
|
||||
<button
|
||||
onClick={exportBulkPDF}
|
||||
className="px-3 py-1.5 text-sm font-medium rounded-lg bg-white border border-border hover:bg-slate-100 transition-colors flex items-center gap-1"
|
||||
>
|
||||
<Printer size={14} /> 批量导出 PDF
|
||||
</button>
|
||||
<button
|
||||
onClick={exportBulkJSON}
|
||||
className="px-3 py-1.5 text-sm font-medium rounded-lg bg-white border border-border hover:bg-slate-100 transition-colors flex items-center gap-1"
|
||||
>
|
||||
<Download size={14} /> 批量导出 JSON
|
||||
</button>
|
||||
<button
|
||||
onClick={handleBulkDelete}
|
||||
className="px-3 py-1.5 text-sm font-medium rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition-colors"
|
||||
>
|
||||
批量删除
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedIds([])}
|
||||
className="px-3 py-1.5 text-sm font-medium rounded-lg text-text-muted hover:bg-slate-100 transition-colors"
|
||||
>
|
||||
取消选择
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card-minimal p-0 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-slate-50">
|
||||
<th className="px-4 py-4 text-left border-b border-border w-10">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="w-4 h-4 rounded border-border text-accent focus:ring-accent"
|
||||
checked={filteredReports.length > 0 && selectedIds.length === filteredReports.length}
|
||||
onChange={toggleSelectAll}
|
||||
/>
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">报告信息</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">患者</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">住院号</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">创建者</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border w-40">时间</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border w-24">状态</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{filteredReports.length > 0 ? (
|
||||
filteredReports.map((report) => (
|
||||
<tr key={report.id} className="hover:bg-slate-50 transition-colors group">
|
||||
<td className="px-4 py-4 border-b border-border">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="w-4 h-4 rounded border-border text-accent focus:ring-accent"
|
||||
checked={selectedIds.includes(report.id)}
|
||||
onChange={() => toggleSelect(report.id)}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="text-sm font-semibold text-text-main">{report.title}</div>
|
||||
<div className="text-xs text-text-muted font-mono mt-1">{report.id}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-text-main">{report.patientName}</td>
|
||||
<td className="px-6 py-4 text-sm text-text-main">{report.hospitalId}</td>
|
||||
<td className="px-6 py-4 text-sm text-text-main">{report.authorName}</td>
|
||||
<td className="px-6 py-4 text-sm text-text-muted leading-relaxed">
|
||||
<div>创建: {formatDateTime(report.createdAt)}</div>
|
||||
<div>修改: {formatDateTime(report.updatedAt || report.createdAt)}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold ${
|
||||
report.status === 'draft'
|
||||
? 'bg-amber-100 text-amber-700'
|
||||
: 'bg-green-100 text-green-700'
|
||||
}`}>
|
||||
{report.status === 'draft' ? '草稿' : '已完成'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => viewReport(report.id)}
|
||||
className="p-2 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition-colors"
|
||||
title="查看"
|
||||
>
|
||||
<Eye size={16} />
|
||||
</button>
|
||||
{(currentUser.role !== 'user' || report.author === currentUser.username) && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => editReport(report.id)}
|
||||
className="p-2 rounded-lg bg-slate-100 text-slate-600 hover:bg-slate-200 transition-colors"
|
||||
title="编辑"
|
||||
>
|
||||
<Edit size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteReport(report.id)}
|
||||
className="p-2 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition-colors"
|
||||
title="删除"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={() => openHistory(report)}
|
||||
className="p-2 rounded-lg bg-amber-50 text-amber-600 hover:bg-amber-100 transition-colors"
|
||||
title="历史版本"
|
||||
>
|
||||
<History size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openExportModal(report)}
|
||||
className="p-2 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition-colors"
|
||||
title="导出"
|
||||
>
|
||||
<Download size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={8} className="px-6 py-24 text-center">
|
||||
<div className="flex flex-col items-center text-text-muted">
|
||||
<FileText size={48} className="mb-4 opacity-20" />
|
||||
<h3 className="text-base font-semibold text-text-main mb-1">暂无报告</h3>
|
||||
<p className="text-sm">点击"新建报告"开始撰写您的第一份报告</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{historyModalOpen && historyReport && (
|
||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-2xl p-8 w-full max-w-[600px] max-h-[80vh] overflow-y-auto shadow-2xl border border-border">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-text-main">操作历史</h3>
|
||||
<p className="text-sm text-text-muted">报告: {historyReport.title}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setHistoryModalOpen(false)}
|
||||
className="p-2 rounded-lg hover:bg-slate-100 text-text-muted transition-colors"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{[...(historyReport.history || [])].reverse().map((item, idx) => (
|
||||
<div key={idx} className="border border-border rounded-lg p-4 bg-slate-50">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className={`text-xs font-bold uppercase tracking-wider px-2 py-0.5 rounded ${
|
||||
item.action === 'complete_report'
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-amber-100 text-amber-700'
|
||||
}`}>
|
||||
{item.action === 'complete_report' ? '完成报告' : '保存草稿'}
|
||||
</span>
|
||||
<span className="text-xs text-text-muted">{formatDateTime(item.updatedAt)}</span>
|
||||
</div>
|
||||
<p className="text-sm text-text-main mb-3">由 {item.updatedBy} {item.action === 'complete_report' ? '完成' : '保存'}</p>
|
||||
<button
|
||||
onClick={() => restoreHistory(item.content)}
|
||||
className="text-xs font-bold text-accent hover:underline"
|
||||
>
|
||||
恢复此版本
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<div className="border border-border rounded-lg p-4 bg-white">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-xs font-bold text-accent uppercase tracking-wider">当前版本</span>
|
||||
<span className="text-xs text-text-muted">{formatDateTime(historyReport.updatedAt || historyReport.createdAt)}</span>
|
||||
</div>
|
||||
<p className="text-sm text-text-main">当前显示内容</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{exportModalOpen && exportTarget && (
|
||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-2xl p-6 w-full max-w-[360px] shadow-2xl border border-border">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-bold text-text-main">导出报告</h3>
|
||||
<button
|
||||
onClick={() => setExportModalOpen(false)}
|
||||
className="p-2 rounded-lg hover:bg-slate-100 text-text-muted transition-colors"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-text-muted mb-4">选择导出格式：</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
<button
|
||||
onClick={() => { exportSinglePDF(exportTarget); setExportModalOpen(false); }}
|
||||
className="w-full px-4 py-3 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors flex items-center gap-3"
|
||||
>
|
||||
<Printer size={18} className="text-text-muted" />
|
||||
<div className="text-left">
|
||||
<div className="text-sm font-semibold text-text-main">导出 PDF</div>
|
||||
<div className="text-xs text-text-muted">调用浏览器打印并保存为 PDF</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { exportSingleJSON(exportTarget); setExportModalOpen(false); }}
|
||||
className="w-full px-4 py-3 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors flex items-center gap-3"
|
||||
>
|
||||
<Download size={18} className="text-text-muted" />
|
||||
<div className="text-left">
|
||||
<div className="text-sm font-semibold text-text-main">导出 JSON</div>
|
||||
<div className="text-xs text-text-muted">下载结构化字段数据</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
117
src/pages/ReportView.tsx
Normal file
117
src/pages/ReportView.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import { Printer, Edit, ChevronLeft } from 'lucide-react';
|
||||
import { User, Report } from '../types';
|
||||
import { storage } from '../utils/storage';
|
||||
|
||||
export default function ReportView() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [report, setReport] = useState<Report | null>(null);
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const user = storage.get<User | null>('currentUser', null);
|
||||
if (!user) {
|
||||
navigate('/');
|
||||
return;
|
||||
}
|
||||
setCurrentUser(user);
|
||||
|
||||
const reports = storage.get<Report[]>('reports', []);
|
||||
const found = reports.find(r => r.id === id);
|
||||
|
||||
if (!found) {
|
||||
alert('报告不存在');
|
||||
navigate('/report-manage');
|
||||
return;
|
||||
}
|
||||
|
||||
if (user.role === 'user' && found.author !== user.username) {
|
||||
alert('您没有权限查看此报告');
|
||||
navigate('/report-manage');
|
||||
return;
|
||||
}
|
||||
|
||||
setReport(found);
|
||||
}, [id, navigate]);
|
||||
|
||||
if (!report || !currentUser) return null;
|
||||
|
||||
const canEdit = currentUser.role !== 'user' || report.author === currentUser.username;
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-bg">
|
||||
<Sidebar />
|
||||
|
||||
<main className="flex-1 p-10 overflow-y-auto">
|
||||
<div className="flex justify-between items-center mb-8 print:hidden">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => navigate('/report-manage')}
|
||||
className="p-2 rounded-lg hover:bg-slate-100 text-text-muted transition-colors"
|
||||
>
|
||||
<ChevronLeft size={24} />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-text-main">查看报告</h1>
|
||||
<p className="text-text-muted text-sm mt-1 uppercase tracking-wider font-bold">报告编号: {report.id}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
{canEdit && (
|
||||
<button
|
||||
onClick={() => navigate(`/report-editor?id=${report.id}`)}
|
||||
className="px-6 py-2.5 bg-slate-100 text-text-muted rounded-lg text-sm font-semibold hover:bg-slate-200 transition-colors inline-flex items-center gap-2"
|
||||
>
|
||||
<Edit size={16} />
|
||||
编辑报告
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => window.print()}
|
||||
className="btn-accent inline-flex items-center gap-2"
|
||||
>
|
||||
<Printer size={16} />
|
||||
打印报告
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-[0_10px_25px_-5px_rgba(0,0,0,0.05)] p-12 max-w-[900px] mx-auto print:shadow-none print:p-0 print:m-0">
|
||||
<div className="text-center pb-10 border-b border-border mb-10">
|
||||
<h2 className="text-3xl font-bold text-text-main mb-6">{report.title}</h2>
|
||||
<div className="flex justify-center gap-8 flex-wrap">
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-[10px] font-bold text-text-muted uppercase tracking-wider">患者姓名</span>
|
||||
<span className="text-sm font-bold text-text-main">{report.patientName}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-[10px] font-bold text-text-muted uppercase tracking-wider">创建者</span>
|
||||
<span className="text-sm font-bold text-text-main">{report.authorName}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-[10px] font-bold text-text-muted uppercase tracking-wider">创建时间</span>
|
||||
<span className="text-sm font-bold text-text-main">{report.createdAt}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-[10px] font-bold text-text-muted uppercase tracking-wider">报告状态</span>
|
||||
<span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider ${
|
||||
report.status === 'draft' ? 'bg-amber-100 text-amber-700' : 'bg-green-100 text-green-700'
|
||||
}`}>
|
||||
{report.status === 'draft' ? '草稿' : '已完成'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="report-content leading-relaxed text-text-main text-sm"
|
||||
dangerouslySetInnerHTML={{ __html: report.content }}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
422
src/pages/SystemSettings.tsx
Normal file
422
src/pages/SystemSettings.tsx
Normal file
@@ -0,0 +1,422 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import { Video, Globe, Layout, Check, Plus, X } from 'lucide-react';
|
||||
import { User, SystemSettings as ISystemSettings, Template } from '../types';
|
||||
import { storage } from '../utils/storage';
|
||||
|
||||
export default function SystemSettings() {
|
||||
const navigate = useNavigate();
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
const [settings, setSettings] = useState<ISystemSettings & { frameMode?: 'uniform' | 'keep' }>({
|
||||
frameCount: 12,
|
||||
framePositions: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60],
|
||||
apiEndpoint: '',
|
||||
apiKey: '',
|
||||
defaultTemplate: '',
|
||||
frameMode: 'uniform'
|
||||
});
|
||||
const [templates, setTemplates] = useState<Template[]>([]);
|
||||
const [isSaved, setIsSaved] = useState(false);
|
||||
const [pendingFrameCount, setPendingFrameCount] = useState<number | null>(null);
|
||||
const [modeModalOpen, setModeModalOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const user = storage.get<User | null>('currentUser', null);
|
||||
if (!user) {
|
||||
navigate('/');
|
||||
return;
|
||||
}
|
||||
setCurrentUser(user);
|
||||
|
||||
const savedSettings = storage.get<ISystemSettings & { frameMode?: 'uniform' | 'keep' }>('systemSettings', {} as ISystemSettings & { frameMode?: 'uniform' | 'keep' });
|
||||
const savedTemplates = storage.get<Template[]>('templates', []);
|
||||
if (savedSettings.frameCount) {
|
||||
if (!savedSettings.defaultTemplate && savedTemplates.length > 0) {
|
||||
savedSettings.defaultTemplate = savedTemplates[0].id;
|
||||
}
|
||||
if (!savedSettings.frameMode) savedSettings.frameMode = 'uniform';
|
||||
if (typeof savedSettings.autoInsertFrames !== 'boolean') savedSettings.autoInsertFrames = false;
|
||||
if (typeof savedSettings.autoInsertDelay !== 'number') savedSettings.autoInsertDelay = 0;
|
||||
setSettings(savedSettings);
|
||||
} else if (savedTemplates.length > 0) {
|
||||
setSettings(prev => ({ ...prev, defaultTemplate: savedTemplates[0].id, frameMode: prev.frameMode || 'uniform', autoInsertFrames: typeof prev.autoInsertFrames === 'boolean' ? prev.autoInsertFrames : false, autoInsertDelay: typeof prev.autoInsertDelay === 'number' ? prev.autoInsertDelay : 0 }));
|
||||
}
|
||||
setTemplates(savedTemplates);
|
||||
}, [navigate]);
|
||||
|
||||
const round1 = (n: number) => Math.round(n * 10) / 10;
|
||||
|
||||
const computeFramePositions = (count: number, mode: 'uniform' | 'keep', currentPositions: number[]) => {
|
||||
if (mode === 'uniform') {
|
||||
const positions: number[] = [];
|
||||
for (let i = 1; i <= count; i++) {
|
||||
positions.push(round1((100 / (count + 1)) * i));
|
||||
}
|
||||
return positions;
|
||||
}
|
||||
const sorted = [...currentPositions].sort((a, b) => a - b);
|
||||
if (count <= sorted.length) {
|
||||
return sorted.slice(0, count);
|
||||
}
|
||||
const need = count - sorted.length;
|
||||
const last = sorted[sorted.length - 1] || 0;
|
||||
const range = 100 - last;
|
||||
for (let i = 1; i <= need; i++) {
|
||||
sorted.push(round1(last + (range / (need + 1)) * i));
|
||||
}
|
||||
return sorted;
|
||||
};
|
||||
|
||||
const handleSave = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const sortedPositions = [...settings.framePositions].sort((a, b) => a - b);
|
||||
const finalSettings = { ...settings, framePositions: sortedPositions, frameCount: sortedPositions.length };
|
||||
storage.set('systemSettings', finalSettings);
|
||||
setSettings(finalSettings);
|
||||
setIsSaved(true);
|
||||
setTimeout(() => setIsSaved(false), 3000);
|
||||
};
|
||||
|
||||
const testApi = async () => {
|
||||
if (!settings.apiEndpoint) {
|
||||
alert('请先输入 API 接口地址');
|
||||
return;
|
||||
}
|
||||
alert(`正在测试连接到: ${settings.apiEndpoint}\n(模拟测试: 连接成功)`);
|
||||
};
|
||||
|
||||
const resetToDefault = () => {
|
||||
if (window.confirm('确定要恢复系统设置出厂设置吗？所有自定义配置将被清除。')) {
|
||||
const defaultSettings: ISystemSettings & { frameMode?: 'uniform' | 'keep' } = {
|
||||
frameCount: 12,
|
||||
framePositions: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60],
|
||||
apiEndpoint: '',
|
||||
apiKey: '',
|
||||
defaultTemplate: templates[0]?.id || '',
|
||||
frameMode: 'uniform',
|
||||
autoInsertFrames: true,
|
||||
autoInsertDelay: 1,
|
||||
autoInsertFrameIndices: [0, 2, 4, 6, 8, 10]
|
||||
};
|
||||
setSettings(defaultSettings);
|
||||
storage.set('systemSettings', defaultSettings);
|
||||
}
|
||||
};
|
||||
|
||||
const resetAllData = () => {
|
||||
if (window.confirm('确定要重置全部数据吗？这将清除所有报告、模板和用户设置。')) {
|
||||
localStorage.clear();
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
if (!currentUser) return null;
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-bg">
|
||||
<Sidebar />
|
||||
|
||||
<main className="flex-1 p-10 overflow-y-auto">
|
||||
<header className="flex justify-between items-center mb-10">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-text-main">系统设置</h1>
|
||||
<p className="text-text-muted text-sm mt-1">
|
||||
{currentUser.role === 'super' ? '配置全局参数，包括视频抽帧策略与外部 AI API 对接。' : '设置您的默认报告模板。'}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<form onSubmit={handleSave} className="max-w-[800px] space-y-8 pb-20">
|
||||
{currentUser.role === 'super' && (
|
||||
<div className="card-minimal">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-bold text-text-main flex items-center gap-2">
|
||||
<Video size={20} className="text-accent" />
|
||||
视频抽帧配置
|
||||
</h3>
|
||||
<span className="text-[10px] font-bold bg-slate-100 text-text-muted px-2 py-1 rounded-full uppercase tracking-wider">
|
||||
当前共 {settings.framePositions.length} 帧
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">抽取帧数</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={100}
|
||||
value={settings.frameCount}
|
||||
onChange={(e) => {
|
||||
const count = Math.max(1, Math.min(100, parseInt(e.target.value) || 1));
|
||||
setSettings({ ...settings, frameCount: count });
|
||||
}}
|
||||
className="input-minimal bg-white"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setPendingFrameCount(settings.frameCount);
|
||||
setModeModalOpen(true);
|
||||
}}
|
||||
className="px-4 py-2 bg-accent text-white rounded-lg text-xs font-semibold hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
确认
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">当前抽帧方式</label>
|
||||
<div className="flex items-center h-[42px]">
|
||||
<span className="text-sm text-text-main">
|
||||
{settings.frameMode === 'uniform' ? '整体均匀抽取' : '保持当前抽帧'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="autoInsertFrames"
|
||||
checked={settings.autoInsertFrames || false}
|
||||
onChange={(e) => setSettings({ ...settings, autoInsertFrames: e.target.checked })}
|
||||
className="w-4 h-4 accent-accent cursor-pointer"
|
||||
/>
|
||||
<label htmlFor="autoInsertFrames" className="text-sm text-text-main cursor-pointer">开启自动帧插入</label>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">自动帧插入延迟 (s)</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
step={0.1}
|
||||
value={settings.autoInsertDelay || 0}
|
||||
onChange={(e) => setSettings({ ...settings, autoInsertDelay: Math.max(0, parseFloat(e.target.value) || 0) })}
|
||||
className="input-minimal bg-white w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] text-text-muted">开启后，选中的视频自动抽帧位置将按顺序自动插入到报告的空置图片占位符中，插满后不再提示。</p>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">抽帧位置百分比 (%)</label>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-3">
|
||||
{settings.framePositions.map((pos, idx) => (
|
||||
<div key={idx} className="relative group">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
step="0.1"
|
||||
value={pos}
|
||||
onChange={(e) => {
|
||||
const newPos = [...settings.framePositions];
|
||||
newPos[idx] = Math.min(100, Math.max(0, parseFloat(e.target.value) || 0));
|
||||
setSettings({ ...settings, framePositions: newPos });
|
||||
}}
|
||||
className="input-minimal w-full pr-6 text-center"
|
||||
/>
|
||||
<span className="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-text-muted">%</span>
|
||||
{settings.autoInsertFrames && (
|
||||
<span
|
||||
onClick={() => {
|
||||
const current = settings.autoInsertFrameIndices || [];
|
||||
const next = current.includes(idx)
|
||||
? current.filter(i => i !== idx)
|
||||
: [...current, idx].sort((a, b) => a - b);
|
||||
setSettings({ ...settings, autoInsertFrameIndices: next });
|
||||
}}
|
||||
className={`absolute top-1 left-1 cursor-pointer transition-colors ${
|
||||
(settings.autoInsertFrameIndices || []).includes(idx) ? 'text-green-500' : 'text-slate-300'
|
||||
}`}
|
||||
>
|
||||
<Check size={12} />
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const newPos = settings.framePositions.filter((_, i) => i !== idx);
|
||||
const newIndices = (settings.autoInsertFrameIndices || [])
|
||||
.filter(i => i !== idx)
|
||||
.map(i => i > idx ? i - 1 : i);
|
||||
setSettings({ ...settings, framePositions: newPos, frameCount: newPos.length, autoInsertFrameIndices: newIndices });
|
||||
}}
|
||||
className="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center text-[10px] opacity-0 group-hover:opacity-100 transition-all shadow-sm"
|
||||
>
|
||||
<X size={10} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const newPos = [...settings.framePositions, 50];
|
||||
setSettings({ ...settings, framePositions: newPos, frameCount: newPos.length });
|
||||
}}
|
||||
className="w-full h-10 rounded-xl border-2 border-dashed border-border flex items-center justify-center text-text-muted hover:border-accent hover:text-accent hover:bg-slate-50 transition-all"
|
||||
>
|
||||
<Plus size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[11px] text-text-muted mt-2">指定视频进度的百分比位置进行自动抽帧。系统将按照这些位置提取关键帧供 AI 分析。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentUser.role === 'super' && (
|
||||
<div className="card-minimal">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-bold text-text-main flex items-center gap-2">
|
||||
<Globe size={20} className="text-accent" />
|
||||
AI 接口集成
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={testApi}
|
||||
className="text-[10px] font-bold text-accent uppercase tracking-wider hover:underline"
|
||||
>
|
||||
测试连接
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">报告生成 API 接口 (Endpoint)</label>
|
||||
<input
|
||||
type="url"
|
||||
value={settings.apiEndpoint}
|
||||
onChange={(e) => setSettings({ ...settings, apiEndpoint: e.target.value })}
|
||||
placeholder="https://api.example.com/v1/generate"
|
||||
className="input-minimal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">API 密钥 (Secret Key)</label>
|
||||
<input
|
||||
type="password"
|
||||
value={settings.apiKey}
|
||||
onChange={(e) => setSettings({ ...settings, apiKey: e.target.value })}
|
||||
placeholder="sk-xxxxxxxxxxxxxxxx"
|
||||
className="input-minimal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card-minimal">
|
||||
<h3 className="text-lg font-bold text-text-main mb-6 flex items-center gap-2">
|
||||
<Layout size={20} className="text-accent" />
|
||||
默认报告模板
|
||||
</h3>
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">图文报告生成默认模板</label>
|
||||
<select
|
||||
value={settings.defaultTemplate}
|
||||
onChange={(e) => setSettings({ ...settings, defaultTemplate: e.target.value })}
|
||||
className="input-minimal bg-white"
|
||||
>
|
||||
<option value="">未设置 (手动选择)</option>
|
||||
{templates.map(tpl => (
|
||||
<option key={tpl.id} value={tpl.id}>{tpl.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<p className="text-[11px] text-text-muted">新建报告时将自动加载此模板内容，减少重复操作。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-6 border-t border-border">
|
||||
{currentUser.role === 'super' && (
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={resetToDefault}
|
||||
className="text-xs font-bold text-red-500 hover:text-red-600 transition-colors uppercase tracking-wider"
|
||||
>
|
||||
恢复系统设置出厂设置
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={resetAllData}
|
||||
className="text-xs font-bold text-red-500 hover:text-red-600 transition-colors uppercase tracking-wider"
|
||||
>
|
||||
重置全部数据
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-4">
|
||||
{isSaved && (
|
||||
<span className="text-xs text-green-600 font-bold flex items-center gap-1">
|
||||
<Check size={14} />
|
||||
设置已保存
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-accent px-12"
|
||||
>
|
||||
保存全局配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{modeModalOpen && (
|
||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-2xl p-8 w-full max-w-[420px] shadow-2xl border border-border">
|
||||
<h3 className="text-lg font-bold text-text-main mb-2">选择抽帧方式</h3>
|
||||
<p className="text-sm text-text-muted mb-6">
|
||||
您将抽取帧数设置为 <strong className="text-accent">{pendingFrameCount}</strong> 帧，请选择重新计算抽帧位置的方式：
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-3 mb-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (pendingFrameCount !== null) {
|
||||
const newPositions = computeFramePositions(pendingFrameCount, 'uniform', settings.framePositions);
|
||||
setSettings({ ...settings, frameCount: pendingFrameCount, frameMode: 'uniform', framePositions: newPositions });
|
||||
}
|
||||
setModeModalOpen(false);
|
||||
setPendingFrameCount(null);
|
||||
}}
|
||||
className="px-4 py-3 border border-border rounded-xl text-sm font-semibold text-text-main hover:border-accent hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
整体均匀抽取
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (pendingFrameCount !== null) {
|
||||
const newPositions = computeFramePositions(pendingFrameCount, 'keep', settings.framePositions);
|
||||
setSettings({ ...settings, frameCount: pendingFrameCount, frameMode: 'keep', framePositions: newPositions });
|
||||
}
|
||||
setModeModalOpen(false);
|
||||
setPendingFrameCount(null);
|
||||
}}
|
||||
className="px-4 py-3 border border-border rounded-xl text-sm font-semibold text-text-main hover:border-accent hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
保持当前抽帧
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setModeModalOpen(false); setPendingFrameCount(null); }}
|
||||
className="w-full px-4 py-2.5 bg-slate-100 text-text-muted rounded-lg text-sm font-semibold hover:bg-slate-200 transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1680
src/pages/TemplateManage.tsx
Normal file
1680
src/pages/TemplateManage.tsx
Normal file
File diff suppressed because it is too large
Load Diff
741
src/pages/UserManage.tsx
Normal file
741
src/pages/UserManage.tsx
Normal file
@@ -0,0 +1,741 @@
|
||||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import { UserPlus, Edit, Trash2, Upload, X } from 'lucide-react';
|
||||
import { User, Template } from '../types';
|
||||
import { storage } from '../utils/storage';
|
||||
|
||||
const ADMIN_DISABLE_AUTH_KEY = 'DISABLE_ADMIN_2024';
|
||||
|
||||
export default function UserManage() {
|
||||
const navigate = useNavigate();
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [formData, setFormData] = useState<Partial<User>>({
|
||||
username: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
password: '',
|
||||
role: 'user',
|
||||
department: '',
|
||||
status: 'active',
|
||||
visibleTemplates: [],
|
||||
manageableTemplates: []
|
||||
});
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [authKey, setAuthKey] = useState('');
|
||||
const [allTemplates, setAllTemplates] = useState<Template[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const user = storage.get<User | null>('currentUser', null);
|
||||
if (!user || (user.role !== 'super' && user.role !== 'admin')) {
|
||||
navigate('/dashboard');
|
||||
return;
|
||||
}
|
||||
setCurrentUser(user);
|
||||
|
||||
const savedUsers = storage.get<User[]>('users', []).filter(Boolean);
|
||||
setUsers(savedUsers);
|
||||
|
||||
const savedTemplates = storage.get<Template[]>('templates', []).filter(Boolean);
|
||||
setAllTemplates(savedTemplates);
|
||||
}, [navigate]);
|
||||
|
||||
const displayUsers = useMemo(() => {
|
||||
if (!currentUser) return [];
|
||||
const safeUsers = (Array.isArray(users) ? users : []).filter(Boolean);
|
||||
if (currentUser.role === 'super') return safeUsers;
|
||||
return safeUsers.filter(u => u.department === currentUser.department && (u.role === 'user' || u.username === currentUser.username));
|
||||
}, [users, currentUser]);
|
||||
|
||||
const saveToLocalStorage = (updatedUsers: User[]) => {
|
||||
setUsers(updatedUsers);
|
||||
storage.set('users', updatedUsers);
|
||||
};
|
||||
|
||||
const compressImage = (file: File, maxSize: number = 500): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = (e) => {
|
||||
const img = new Image();
|
||||
img.src = e.target?.result as string;
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement('canvas');
|
||||
let { width, height } = img;
|
||||
if (width > height && width > maxSize) {
|
||||
height = Math.round((height * maxSize) / width);
|
||||
width = maxSize;
|
||||
} else if (height > maxSize) {
|
||||
width = Math.round((width * maxSize) / height);
|
||||
height = maxSize;
|
||||
}
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) {
|
||||
ctx.fillStyle = '#FFFFFF';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
ctx.drawImage(img, 0, 0, width, height);
|
||||
}
|
||||
resolve(canvas.toDataURL('image/jpeg', 0.8));
|
||||
};
|
||||
img.onerror = reject;
|
||||
};
|
||||
reader.onerror = reject;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSignatureUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
try {
|
||||
const compressed = await compressImage(file);
|
||||
setFormData(prev => ({ ...prev, signature: compressed }));
|
||||
} catch {
|
||||
alert('图片压缩失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (username: string) => {
|
||||
if (username === 'admin') {
|
||||
alert('不能删除默认超级管理员');
|
||||
return;
|
||||
}
|
||||
if (username === currentUser?.username) {
|
||||
alert('不能删除当前登录账号');
|
||||
return;
|
||||
}
|
||||
if (window.confirm(`确定要删除用户 "${username}" 吗？`)) {
|
||||
const updated = users.filter(u => u.username !== username);
|
||||
saveToLocalStorage(updated);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (user: User) => {
|
||||
if (currentUser?.role === 'admin') {
|
||||
if ((user.role !== 'user' && user.username !== currentUser.username) || user.department !== currentUser.department) {
|
||||
alert('您只能管理同部门的医生或您自己');
|
||||
return;
|
||||
}
|
||||
}
|
||||
setIsEditing(true);
|
||||
const allTplIds = allTemplates.map(t => t.id);
|
||||
let manageable: string[] = [];
|
||||
let visible: string[] = [];
|
||||
|
||||
if (user.role === 'super') {
|
||||
manageable = allTplIds;
|
||||
visible = allTplIds;
|
||||
} else if (user.role === 'admin') {
|
||||
manageable = Array.isArray(user.manageableTemplates) ? user.manageableTemplates : allTplIds;
|
||||
visible = (Array.isArray(user.visibleTemplates) ? user.visibleTemplates : manageable)
|
||||
.filter(id => manageable.includes(id));
|
||||
} else {
|
||||
manageable = [];
|
||||
const deptAdmin = users.find(u => u.role === 'admin' && u.department === user.department);
|
||||
const adminManageable = deptAdmin?.manageableTemplates || [];
|
||||
visible = (Array.isArray(user.visibleTemplates) ? user.visibleTemplates : [])
|
||||
.filter(id => adminManageable.includes(id));
|
||||
}
|
||||
|
||||
setFormData({
|
||||
...user,
|
||||
password: '',
|
||||
visibleTemplates: visible,
|
||||
manageableTemplates: manageable
|
||||
});
|
||||
setConfirmPassword('');
|
||||
setAuthKey('');
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setIsEditing(false);
|
||||
const defaultDept = currentUser?.role === 'admin' ? currentUser.department || '' : '';
|
||||
const defaultRole = 'user';
|
||||
let defaultVisible: string[] = [];
|
||||
let defaultManageable: string[] = [];
|
||||
|
||||
if (currentUser?.role === 'admin') {
|
||||
defaultManageable = [];
|
||||
defaultVisible = currentUser.manageableTemplates || [];
|
||||
}
|
||||
|
||||
setFormData({
|
||||
username: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
password: '',
|
||||
role: defaultRole,
|
||||
department: defaultDept,
|
||||
status: 'active',
|
||||
visibleTemplates: defaultVisible,
|
||||
manageableTemplates: defaultManageable
|
||||
});
|
||||
setConfirmPassword('');
|
||||
setAuthKey('');
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
if (!formData.username) {
|
||||
alert('用户ID不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isEditing && formData.role === 'super') {
|
||||
alert('系统中只能存在一个超级管理员，无法新增');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isEditing && users.find(u => u.username === formData.username)) {
|
||||
alert('用户ID已存在');
|
||||
return;
|
||||
}
|
||||
|
||||
if (isEditing && formData.password && formData.password !== confirmPassword) {
|
||||
alert('两次输入的密码不一致');
|
||||
return;
|
||||
}
|
||||
|
||||
let finalRole = formData.role as any;
|
||||
if (currentUser?.role === 'admin') {
|
||||
if (!isEditing) finalRole = 'user';
|
||||
else if (formData.username !== currentUser.username) finalRole = 'user';
|
||||
}
|
||||
const finalDepartment = currentUser?.role === 'admin' ? currentUser.department || '' : (formData.department || '');
|
||||
|
||||
if (finalRole === 'admin') {
|
||||
const existingAdmin = users.find(u => u.role === 'admin' && u.department === finalDepartment && u.username !== formData.username);
|
||||
if (existingAdmin) {
|
||||
alert('该部门已存在管理员，一个部门只能有一个管理员');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (finalRole === 'user') {
|
||||
const hasAdminInDept = users.some(u => u.role === 'admin' && u.department === finalDepartment);
|
||||
if (!hasAdminInDept) {
|
||||
alert('该部门暂无管理员，请先建立一个部门管理员再创建医生');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (finalRole !== 'user' && formData.status === 'inactive') {
|
||||
if (authKey.trim() !== ADMIN_DISABLE_AUTH_KEY) {
|
||||
alert('禁用管理员账号需要输入正确的授权密钥');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const allTplIds = allTemplates.map(t => t.id);
|
||||
let manageableTemplates: string[] = [];
|
||||
let visibleTemplates: string[] = [];
|
||||
|
||||
if (finalRole === 'super') {
|
||||
manageableTemplates = allTplIds;
|
||||
visibleTemplates = allTplIds;
|
||||
} else if (finalRole === 'admin') {
|
||||
manageableTemplates = (formData.manageableTemplates || []).filter(id => allTplIds.includes(id));
|
||||
visibleTemplates = (formData.visibleTemplates || [])
|
||||
.filter(id => manageableTemplates.includes(id));
|
||||
} else if (finalRole === 'user') {
|
||||
manageableTemplates = [];
|
||||
const deptAdmin = users.find(u => u.role === 'admin' && u.department === finalDepartment);
|
||||
const adminManageable = deptAdmin?.manageableTemplates || [];
|
||||
visibleTemplates = (formData.visibleTemplates || [])
|
||||
.filter(id => adminManageable.includes(id));
|
||||
}
|
||||
|
||||
const oldUser = isEditing ? users.find(u => u.username === formData.username) : undefined;
|
||||
let updatedUsers: User[];
|
||||
|
||||
if (isEditing && finalRole === 'admin' && oldUser && oldUser.role === 'admin' && currentUser && currentUser.role === 'super') {
|
||||
const oldManageable = Array.isArray(oldUser.manageableTemplates) ? oldUser.manageableTemplates : allTplIds;
|
||||
const removed = oldManageable.filter(id => !manageableTemplates.includes(id));
|
||||
const added = manageableTemplates.filter(id => !oldManageable.includes(id));
|
||||
|
||||
// Ensure admin's own visible gets new templates too
|
||||
let adminVisible = [...visibleTemplates];
|
||||
added.forEach(id => {
|
||||
if (!adminVisible.includes(id)) adminVisible.push(id);
|
||||
});
|
||||
|
||||
updatedUsers = users.map(u => {
|
||||
if (u.username === formData.username) {
|
||||
return { ...u, role: finalRole, department: finalDepartment, manageableTemplates, visibleTemplates: adminVisible, password: formData.password || u.password, signature: formData.signature } as User;
|
||||
}
|
||||
if (u.role === 'user' && u.department === (oldUser.department || finalDepartment)) {
|
||||
const currentVisible = Array.isArray(u.visibleTemplates) ? u.visibleTemplates : [];
|
||||
const nextVisible = currentVisible.filter(id => !removed.includes(id));
|
||||
added.forEach(id => {
|
||||
if (!nextVisible.includes(id)) nextVisible.push(id);
|
||||
});
|
||||
return { ...u, visibleTemplates: nextVisible };
|
||||
}
|
||||
return u;
|
||||
});
|
||||
} else {
|
||||
const payload: Partial<User> = {
|
||||
...formData,
|
||||
role: finalRole,
|
||||
department: finalDepartment,
|
||||
manageableTemplates,
|
||||
visibleTemplates
|
||||
};
|
||||
if (!formData.password) {
|
||||
delete payload.password;
|
||||
}
|
||||
if (isEditing) {
|
||||
updatedUsers = users.map(u => {
|
||||
if (u.username === formData.username) {
|
||||
return { ...u, ...payload } as User;
|
||||
}
|
||||
return u;
|
||||
});
|
||||
} else {
|
||||
const newUser: User = {
|
||||
...(payload as User),
|
||||
createdAt: new Date().toISOString().split('T')[0]
|
||||
};
|
||||
updatedUsers = [...users, newUser];
|
||||
}
|
||||
}
|
||||
|
||||
saveToLocalStorage(updatedUsers);
|
||||
// 如果编辑的是当前登录用户，同步更新 currentUser
|
||||
const currentCached = updatedUsers.find(u => u.username === currentUser?.username);
|
||||
if (currentCached) {
|
||||
storage.set('currentUser', currentCached);
|
||||
setCurrentUser(currentCached);
|
||||
}
|
||||
setIsModalOpen(false);
|
||||
} catch (err: any) {
|
||||
alert('保存失败: ' + (err?.message || String(err)));
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTemplate = (templateId: string, field: 'visibleTemplates' | 'manageableTemplates') => {
|
||||
const current = (formData[field] || []) as string[];
|
||||
if (current.includes(templateId)) {
|
||||
setFormData({ ...formData, [field]: current.filter(id => id !== templateId) });
|
||||
} else {
|
||||
setFormData({ ...formData, [field]: [...current, templateId] });
|
||||
}
|
||||
};
|
||||
|
||||
// Real-time sync: when manageableTemplates changes for admin, ensure visibleTemplates stay within it
|
||||
useEffect(() => {
|
||||
if (!isModalOpen || !currentUser) return;
|
||||
const isAdminEditingSelf = currentUser.role === 'admin' && formData.username === currentUser.username;
|
||||
const isManageableReadonly = formData.role === 'super' || isAdminEditingSelf;
|
||||
if (formData.role === 'admin' && !isManageableReadonly) {
|
||||
const m = formData.manageableTemplates || [];
|
||||
const prevVisible = formData.visibleTemplates || [];
|
||||
const nextVisible = prevVisible.filter(id => m.includes(id));
|
||||
if (nextVisible.length !== prevVisible.length) {
|
||||
setFormData(prev => ({ ...prev, visibleTemplates: nextVisible }));
|
||||
}
|
||||
}
|
||||
}, [formData.manageableTemplates, formData.role, isModalOpen, currentUser, formData.username]);
|
||||
|
||||
if (!currentUser) return null;
|
||||
|
||||
const roleNames = {
|
||||
'super': '超级管理员',
|
||||
'admin': '管理员',
|
||||
'user': '医生'
|
||||
};
|
||||
|
||||
const isAdminLogin = currentUser.role === 'admin';
|
||||
const needAuthKey = formData.role !== 'user' && formData.status === 'inactive';
|
||||
|
||||
// 模板权限显示规则
|
||||
const isSuperEditingAdmin = currentUser.role === 'super' && formData.role === 'admin';
|
||||
const isSuperEditingUser = currentUser.role === 'super' && formData.role === 'user';
|
||||
const isAdminEditingSelf = currentUser.role === 'admin' && formData.username === currentUser.username;
|
||||
const isAdminEditingUser = currentUser.role === 'admin' && formData.role === 'user';
|
||||
|
||||
const showManageableTemplates = isSuperEditingAdmin || isAdminEditingSelf || formData.role === 'super';
|
||||
const isManageableReadonly = formData.role === 'super' || isAdminEditingSelf;
|
||||
const showVisibleTemplates = true;
|
||||
|
||||
// 可视模板候选
|
||||
let visibleCandidates = allTemplates;
|
||||
if (isSuperEditingAdmin) {
|
||||
visibleCandidates = allTemplates.filter(t => (formData.manageableTemplates || []).includes(t.id));
|
||||
} else if (isSuperEditingUser) {
|
||||
const deptAdmin = users.find(u => u.role === 'admin' && u.department === formData.department);
|
||||
const adminManageable = deptAdmin?.manageableTemplates || [];
|
||||
visibleCandidates = allTemplates.filter(t => adminManageable.includes(t.id));
|
||||
} else if (isAdminEditingSelf) {
|
||||
const adminManageable = currentUser.manageableTemplates || [];
|
||||
visibleCandidates = allTemplates.filter(t => adminManageable.includes(t.id));
|
||||
} else if (isAdminEditingUser) {
|
||||
const adminManageable = currentUser.manageableTemplates || [];
|
||||
visibleCandidates = allTemplates.filter(t => adminManageable.includes(t.id));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-bg">
|
||||
<Sidebar />
|
||||
|
||||
<main className="flex-1 p-10 overflow-y-auto">
|
||||
<header className="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-text-main">用户管理</h1>
|
||||
<p className="text-text-muted text-sm mt-1">
|
||||
{isAdminLogin ? '管理同部门的医生用户' : '管理系统用户，仅超级管理员可赋予管理员权限'}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="btn-accent inline-flex items-center gap-2"
|
||||
>
|
||||
<UserPlus size={18} />
|
||||
新增用户
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="card-minimal p-0 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-slate-50">
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">用户ID</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">姓名</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">邮箱</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">联系电话</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">角色</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">部门</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">签名状态</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">状态</th>
|
||||
<th className="px-6 py-4 text-left text-[11px] font-bold text-text-muted uppercase tracking-wider border-b border-border">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{displayUsers.map((user) => (
|
||||
<tr key={user.username} className="hover:bg-slate-50 transition-colors group">
|
||||
<td className="px-6 py-4 text-sm text-text-main font-mono">{user.username}</td>
|
||||
<td className="px-6 py-4 text-sm text-text-main font-semibold">{user.name}</td>
|
||||
<td className="px-6 py-4 text-sm text-text-main">{user.email || '-'}</td>
|
||||
<td className="px-6 py-4 text-sm text-text-main">{user.phone || '-'}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`inline-block px-2.5 py-1 rounded-full text-[11px] font-bold ${
|
||||
user.role === 'super' ? 'bg-amber-100 text-amber-700' :
|
||||
user.role === 'admin' ? 'bg-blue-100 text-blue-700' :
|
||||
'bg-green-100 text-green-700'
|
||||
}`}>
|
||||
{roleNames[user.role]}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-text-main">{user.department || '-'}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`inline-block px-2.5 py-1 rounded-full text-[11px] font-bold ${
|
||||
user.signature ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-500'
|
||||
}`}>
|
||||
{user.signature ? '已上传' : '未上传'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`inline-block px-2.5 py-1 rounded-full text-[11px] font-bold ${
|
||||
user.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
|
||||
}`}>
|
||||
{user.status === 'active' ? '启用' : '禁用'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex gap-2 transition-opacity">
|
||||
<button
|
||||
onClick={() => handleEdit(user)}
|
||||
className="p-2 rounded-lg bg-slate-100 text-slate-600 hover:bg-slate-200 transition-colors"
|
||||
title="编辑"
|
||||
>
|
||||
<Edit size={16} />
|
||||
</button>
|
||||
{user.username !== 'admin' && user.username !== currentUser.username && (
|
||||
<button
|
||||
onClick={() => handleDelete(user.username)}
|
||||
className="p-2 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition-colors"
|
||||
title="删除"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-2xl p-10 w-full max-w-[500px] max-h-[90vh] overflow-y-auto shadow-2xl border border-border">
|
||||
<h3 className="text-xl font-bold text-text-main mb-2">{isEditing ? '编辑用户' : '新增用户'}</h3>
|
||||
<p className="text-sm text-text-muted mb-8">填写用户信息并分配系统权限。</p>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">用户ID *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData({ ...formData, username: e.target.value })}
|
||||
disabled={isEditing}
|
||||
required
|
||||
className="input-minimal disabled:bg-slate-50 disabled:text-text-muted"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">姓名 *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
required
|
||||
className="input-minimal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">电话</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||||
className="input-minimal"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">邮箱</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
className="input-minimal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">
|
||||
{isEditing ? '修改密码 (留空则不修改)' : '密码 *'}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
||||
required={!isEditing}
|
||||
className="input-minimal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isEditing && formData.password && (
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">确认新密码 *</label>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
className="input-minimal"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">角色 *</label>
|
||||
<select
|
||||
value={formData.role}
|
||||
onChange={(e) => {
|
||||
const newRole = e.target.value as any;
|
||||
const allTplIds = allTemplates.map(t => t.id);
|
||||
setFormData({
|
||||
...formData,
|
||||
role: newRole,
|
||||
manageableTemplates: newRole === 'user' ? [] : allTplIds,
|
||||
visibleTemplates: newRole === 'user' ? [] : allTplIds
|
||||
});
|
||||
}}
|
||||
required
|
||||
disabled={isAdminLogin || (isEditing && formData.username === 'admin')}
|
||||
className="input-minimal bg-white disabled:bg-slate-50 disabled:text-text-muted"
|
||||
>
|
||||
<option value="user">医生</option>
|
||||
{!isAdminLogin && <option value="admin">管理员</option>}
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">部门 *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.department}
|
||||
onChange={(e) => setFormData({ ...formData, department: e.target.value })}
|
||||
disabled={isAdminLogin}
|
||||
required
|
||||
className="input-minimal disabled:bg-slate-50 disabled:text-text-muted"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">状态</label>
|
||||
<select
|
||||
value={formData.status}
|
||||
onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
|
||||
className="input-minimal bg-white"
|
||||
>
|
||||
<option value="active">启用</option>
|
||||
<option value="inactive">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{needAuthKey && (
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">授权密钥 *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={authKey}
|
||||
onChange={(e) => setAuthKey(e.target.value)}
|
||||
required
|
||||
placeholder="请输入授权密钥以禁用管理员"
|
||||
className="input-minimal"
|
||||
/>
|
||||
<p className="text-[10px] text-text-muted">禁用管理员账号需要输入系统授权密钥进行验证。</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">电子签名</label>
|
||||
{formData.signature ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src={formData.signature}
|
||||
alt="电子签名预览"
|
||||
className="h-16 border border-border rounded bg-white object-contain"
|
||||
/>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="px-3 py-1.5 text-xs font-medium rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors cursor-pointer inline-flex items-center gap-1">
|
||||
<Upload size={12} />
|
||||
重新上传
|
||||
<input type="file" accept="image/*" className="hidden" onChange={handleSignatureUpload} />
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormData(prev => ({ ...prev, signature: undefined }))}
|
||||
className="px-3 py-1.5 text-xs font-medium rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition-colors inline-flex items-center gap-1"
|
||||
>
|
||||
<X size={12} />
|
||||
清除签名
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="px-4 py-2 text-sm font-medium rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors cursor-pointer inline-flex items-center gap-2">
|
||||
<Upload size={14} />
|
||||
上传签名
|
||||
<input type="file" accept="image/*" className="hidden" onChange={handleSignatureUpload} />
|
||||
</label>
|
||||
<span className="text-xs text-text-muted">支持 JPG、PNG，自动压缩至 500px 以内</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showManageableTemplates && (
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">
|
||||
{formData.role === 'super' ? '可管理模板' : '可管理模板'}
|
||||
</label>
|
||||
<div className="max-h-[150px] overflow-y-auto border border-border rounded-lg p-3 space-y-2 bg-slate-50">
|
||||
{allTemplates.map(tpl => (
|
||||
<label key={tpl.id} className={`flex items-center gap-2 p-1 rounded-md transition-colors ${isManageableReadonly ? '' : 'cursor-pointer hover:bg-white'}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={(formData.manageableTemplates || []).includes(tpl.id)}
|
||||
onChange={() => toggleTemplate(tpl.id, 'manageableTemplates')}
|
||||
disabled={isManageableReadonly}
|
||||
className="w-4 h-4 rounded-sm border-border text-accent focus:ring-accent disabled:opacity-50"
|
||||
/>
|
||||
<span className={`text-sm ${isManageableReadonly ? 'text-text-muted' : 'text-text-main'}`}>{tpl.name}</span>
|
||||
</label>
|
||||
))}
|
||||
{allTemplates.length === 0 && <p className="text-xs text-text-muted italic">暂无模板</p>}
|
||||
</div>
|
||||
{isManageableReadonly && (
|
||||
<p className="text-[10px] text-text-muted">
|
||||
{formData.role === 'super' ? '超级管理员默认可管理所有模板，不可更改。' : '管理员的模板管理权限由超级管理员设定，不可自行更改。'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showVisibleTemplates && (
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">
|
||||
{formData.role === 'super' ? '可视模板 (全部)' : '可视模板'}
|
||||
</label>
|
||||
<div className="max-h-[150px] overflow-y-auto border border-border rounded-lg p-3 space-y-2 bg-slate-50">
|
||||
{visibleCandidates.map(tpl => (
|
||||
<label key={tpl.id} className="flex items-center gap-2 cursor-pointer hover:bg-white p-1 rounded-md transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={(formData.visibleTemplates || []).includes(tpl.id)}
|
||||
onChange={() => toggleTemplate(tpl.id, 'visibleTemplates')}
|
||||
disabled={formData.role === 'super'}
|
||||
className="w-4 h-4 rounded-sm border-border text-accent focus:ring-accent disabled:opacity-50"
|
||||
/>
|
||||
<span className={`text-sm ${formData.role === 'super' ? 'text-text-muted' : 'text-text-main'}`}>{tpl.name}</span>
|
||||
</label>
|
||||
))}
|
||||
{visibleCandidates.length === 0 && <p className="text-xs text-text-muted italic">暂无可视模板</p>}
|
||||
</div>
|
||||
{formData.role === 'super' && (
|
||||
<p className="text-[10px] text-text-muted">超级管理员默认可视所有模板。</p>
|
||||
)}
|
||||
{(isSuperEditingAdmin || isAdminEditingSelf) && (
|
||||
<p className="text-[10px] text-text-muted">管理员的可视模板只能从其可管理模板中选择。</p>
|
||||
)}
|
||||
{(isSuperEditingUser || isAdminEditingUser) && (
|
||||
<p className="text-[10px] text-text-muted">医生的可视模板只能从其部门管理员的可管理模板中选择。</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-3 pt-4 border-t border-border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
className="px-6 py-2.5 bg-slate-100 text-text-muted rounded-lg text-sm font-semibold hover:bg-slate-200 transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-accent"
|
||||
>
|
||||
保存用户
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
145
src/types.ts
Normal file
145
src/types.ts
Normal file
@@ -0,0 +1,145 @@
|
||||
export interface User {
|
||||
username: string;
|
||||
password?: string;
|
||||
role: 'super' | 'admin' | 'user';
|
||||
name: string;
|
||||
phone?: string;
|
||||
email?: string;
|
||||
department?: string;
|
||||
status?: 'active' | 'inactive';
|
||||
createdAt?: string;
|
||||
visibleTemplates?: string[];
|
||||
manageableTemplates?: string[];
|
||||
signature?: string;
|
||||
}
|
||||
|
||||
export interface Report {
|
||||
id: string;
|
||||
title: string;
|
||||
patientName: string;
|
||||
hospitalId: string;
|
||||
patientGender?: string;
|
||||
patientAge?: string;
|
||||
department?: string;
|
||||
bedNumber?: string;
|
||||
surgeryDate?: string;
|
||||
startHour?: string;
|
||||
startMinute?: string;
|
||||
endHour?: string;
|
||||
endMinute?: string;
|
||||
surgeon?: string[];
|
||||
assistant?: string[];
|
||||
anesthesiologist?: string[];
|
||||
anesthesiaType?: string;
|
||||
reportNote?: string;
|
||||
content: string;
|
||||
videos?: {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
duration: number;
|
||||
}[];
|
||||
capturedFrames?: CapturedFrame[];
|
||||
author: string;
|
||||
authorName: string;
|
||||
createdAt: string;
|
||||
updatedAt?: string;
|
||||
status: 'draft' | 'completed';
|
||||
history?: { content: string; updatedAt: string; updatedBy: string; action: 'save_draft' | 'complete_report' }[];
|
||||
}
|
||||
|
||||
export interface CapturedFrame {
|
||||
id: number;
|
||||
videoIndex: number;
|
||||
videoName: string;
|
||||
time: number;
|
||||
timeFormatted: string;
|
||||
dataUrl: string;
|
||||
isManual?: boolean;
|
||||
manualOrder?: number;
|
||||
}
|
||||
|
||||
export interface Template {
|
||||
id: string;
|
||||
name: string;
|
||||
desc?: string;
|
||||
content: string;
|
||||
createdAt: string;
|
||||
updatedAt?: string;
|
||||
author: string;
|
||||
fields?: FormField[];
|
||||
}
|
||||
|
||||
export interface SystemSettings {
|
||||
frameCount: number;
|
||||
framePositions: number[];
|
||||
apiEndpoint: string;
|
||||
apiKey: string;
|
||||
defaultTemplate?: string;
|
||||
frameMode?: 'uniform' | 'keep';
|
||||
autoInsertFrames?: boolean;
|
||||
autoInsertFrameIndices?: number[];
|
||||
autoInsertDelay?: number;
|
||||
}
|
||||
|
||||
export interface BindableField {
|
||||
key: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export const BINDABLE_FIELDS: BindableField[] = [
|
||||
{ key: 'patientName', label: '姓名' },
|
||||
{ key: 'patientGender', label: '性别' },
|
||||
{ key: 'patientAge', label: '年龄' },
|
||||
{ key: 'department', label: '科别' },
|
||||
{ key: 'bedNumber', label: '床号' },
|
||||
{ key: 'hospitalId', label: '住院号' },
|
||||
{ key: 'surgeryDate', label: '手术日期' },
|
||||
{ key: 'title', label: '手术名称' },
|
||||
{ key: 'startTime', label: '手术开始时间' },
|
||||
{ key: 'endTime', label: '手术终止时间' },
|
||||
{ key: 'surgeon', label: '手术者' },
|
||||
{ key: 'assistant', label: '助手' },
|
||||
{ key: 'anesthesiologist', label: '麻醉师' },
|
||||
{ key: 'anesthesiaType', label: '麻醉方式' },
|
||||
];
|
||||
|
||||
export type FieldType = 'text' | 'single_select' | 'multi_select' | 'time' | 'date' | 'signature' | 'image';
|
||||
|
||||
export interface FormField {
|
||||
key: string;
|
||||
label: string;
|
||||
category: string;
|
||||
type: FieldType;
|
||||
visibleInForm: boolean;
|
||||
isSystemLocked: boolean;
|
||||
options?: string[];
|
||||
timeFormat?: string;
|
||||
timeDefault?: 'current' | 'specific';
|
||||
fixedTimeValue?: string;
|
||||
hasUnderline?: boolean;
|
||||
}
|
||||
|
||||
export const DEFAULT_FORM_FIELDS: FormField[] = [
|
||||
{ key: 'patientName', label: '患者姓名', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: true, hasUnderline: false },
|
||||
{ key: 'hospitalId', label: '住院号', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: true, hasUnderline: false },
|
||||
{ key: 'title', label: '手术名称', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
|
||||
{ key: 'patientGender', label: '患者性别', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: false, options: ['男', '女'] },
|
||||
{ key: 'patientAge', label: '患者年龄', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
|
||||
{ key: 'department', label: '科别', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
|
||||
{ key: 'bedNumber', label: '床号', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
|
||||
{ key: 'surgeryDate', label: '手术日期', category: '时间', type: 'date', visibleInForm: true, isSystemLocked: true, timeFormat: 'YYYY-MM-DD', timeDefault: 'specific' },
|
||||
{ key: 'startTime', label: '手术开始时间', category: '时间', type: 'time', visibleInForm: true, isSystemLocked: true, timeFormat: 'HH:mm', timeDefault: 'specific' },
|
||||
{ key: 'endTime', label: '手术终止时间', category: '时间', type: 'time', visibleInForm: true, isSystemLocked: true, timeFormat: 'HH:mm', timeDefault: 'specific' },
|
||||
{ key: 'reportDate', label: '撰写时间', category: '时间', type: 'date', visibleInForm: true, isSystemLocked: true, timeFormat: 'YYYY年MM月DD日', timeDefault: 'current' },
|
||||
{ key: 'surgeon', label: '手术者', category: '多选', type: 'multi_select', visibleInForm: true, isSystemLocked: true, options: ['张医生', '李医生', '王医生'] },
|
||||
{ key: 'assistant', label: '助手', category: '多选', type: 'multi_select', visibleInForm: true, isSystemLocked: true, options: ['赵医生', '钱医生', '孙医生'] },
|
||||
{ key: 'anesthesiologist', label: '麻醉师', category: '多选', type: 'multi_select', visibleInForm: true, isSystemLocked: true, options: ['周医生', '吴医生', '郑医生'] },
|
||||
{ key: 'anesthesiaType', label: '麻醉方式', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: false, options: ['全麻', '局麻', '腰麻', '硬膜外麻醉', '静脉麻醉', '吸入麻醉'] },
|
||||
{ key: 'preoperativeDiagnosis', label: '术前诊断', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: true, options: ['胆囊结石伴慢性胆囊炎', '急性胆囊炎'] },
|
||||
{ key: 'postoperativeDiagnosis', label: '术后诊断', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: true, options: ['胆囊结石伴慢性胆囊炎', '急性胆囊炎'] },
|
||||
{ key: 'postOpCondition', label: '手术后情况', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: true, options: ['患者麻醉恢复后安返病房'] },
|
||||
{ key: 'specimenDescription', label: '切除标本描述', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: true, options: ['胆囊一枚，壁厚约0.3cm，内含数枚结石'] },
|
||||
{ key: 'pathologyCheck', label: '是否送病理检查', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: true, options: ['是', '否'] },
|
||||
{ key: 'frozenPathology', label: '冰冻病理结果', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: true, options: ['未见恶性', '待石蜡'] },
|
||||
];
|
||||
158
src/utils/defaultContent.ts
Normal file
158
src/utils/defaultContent.ts
Normal file
@@ -0,0 +1,158 @@
|
||||
const smartField = (key: string) => {
|
||||
return `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;position:relative;"><span class="field-value no-underline" data-bind="${key}" contenteditable="true" style="min-width:24px;padding:0 2px;margin:0;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:inherit;font-size:inherit;vertical-align:baseline;box-sizing:border-box;outline:none;text-align:center;"> </span><span class="delete-btn" contenteditable="false">×</span></span>​`;
|
||||
};
|
||||
|
||||
export const defaultReportContent = `
|
||||
<div style="display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 4px;">
|
||||
<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="display:inline-block;text-align:center;width:65px;height:65px;line-height:65px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;position:relative;transform:translate(-5px,-5px);">
|
||||
<span class="delete-btn" contenteditable="false">×</span>
|
||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">LOGO</span>
|
||||
</span>
|
||||
<div style="text-align: center;">
|
||||
<div style="font-size: 14pt; font-family: SimSun; border-bottom: 1px solid #000; padding-bottom: 1px; margin-bottom: 2px; display: inline-block; line-height: 1;">西 安 交 通 大 学 第 一 附 属 医 院</div>
|
||||
<div style="font-size: 16pt; font-family: SimSun;">手术记录</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="font-family: SimSun; font-size: 11pt; font-weight: normal; margin: 0; padding: 0; line-height: 1; border-bottom: 1px solid #000;">
|
||||
姓名：${smartField('patientName')}
|
||||
性别：${smartField('patientGender')}
|
||||
年龄：${smartField('patientAge')}
|
||||
科别：${smartField('department')}
|
||||
床号：${smartField('bedNumber')}
|
||||
住院号：${smartField('hospitalId')}
|
||||
</p>
|
||||
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
<strong>手术日期：</strong>${smartField('surgeryDate')}
|
||||
</p>
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
<strong>术前诊断：</strong>${smartField('preoperativeDiagnosis')}
|
||||
</p>
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
<strong>术中诊断：</strong>${smartField('postoperativeDiagnosis')}
|
||||
</p>
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
<strong>手术名称：</strong>${smartField('title')}
|
||||
</p>
|
||||
|
||||
<table style="width: 100%; border: none; font-family: SimSun; font-size: 12pt; margin-top: 0; margin-bottom: 0;">
|
||||
<tr>
|
||||
<td style="border: none; padding: 0; width: 50%; line-height: 1.5;">手术开始时间：${smartField('startTime')}</td>
|
||||
<td style="border: none; padding: 0; width: 50%; line-height: 1.5;">手术终止时间：${smartField('endTime')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border: none; padding: 0; line-height: 1.5;">手术者：${smartField('surgeon')}</td>
|
||||
<td style="border: none; padding: 0; line-height: 1.5;">助手：${smartField('assistant')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border: none; padding: 0; line-height: 1.5;">麻醉师：${smartField('anesthesiologist')}</td>
|
||||
<td style="border: none; padding: 0; line-height: 1.5;">麻醉方式：${smartField('anesthesiaType')}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
<strong>手术步骤、术中出现的情况及处理：</strong>
|
||||
</p>
|
||||
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
1．患者仰卧位，麻醉成功后，常规消毒术野、铺无菌巾，于脐下穿刺建立CO2气腹，气腹压力为12mmHg，进镜探查无穿刺损伤，分别于剑突下2.0cm、右锁中线肋缘下2.0cm各点穿刺置穿刺器，插入相应手术器械。
|
||||
</p>
|
||||
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
2．腹腔镜探查：腹腔内无腹水形成，无明显粘连，肝脏色红质软，无明显结节硬化改变，胆囊大小约 cm× cm× cm，壁轻度水肿，张力可，胆囊三角解剖关系清楚，胆囊管及胆总管无明显扩张。胃、十二指肠、小肠、结肠、脾脏及盆腔未见明显异常。术中诊断：胆囊结石伴慢性胆囊炎。遂行腹腔镜胆囊切除术。
|
||||
</p>
|
||||
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
3.切除胆囊：钳夹胆囊颈部并解剖胆囊三角，游离出胆囊动脉及胆囊管，明确胆囊与胆总管的关系，距胆总管0.3cm处近端以一枚可吸收夹，远端夹一枚钛夹夹闭胆囊管，两夹间以剪刀剪断胆囊管，另用一枚可吸收夹夹闭胆囊动脉后离断。顺行游离胆囊浆膜，完整切除胆囊后装入标本袋取出。胆囊床严密止血并覆盖止血材料。
|
||||
</p>
|
||||
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
4.检查腹腔内无活动性出血及漏胆后，清点器械纱布无误，拔除腔镜器械，排出腹腔残余气体，缝合各刺孔，术毕。
|
||||
</p>
|
||||
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
5.手术顺利，麻醉满意。切除的标本经家属过目后送病理。术中出血约 ml，术中输血成分，输血量，是否有输血不良反应。
|
||||
</p>
|
||||
|
||||
<!-- 手术图片说明表格 -->
|
||||
<table style="width: 100%; border-collapse: collapse; margin: 20px 0; table-layout: fixed;">
|
||||
<tbody><tr>
|
||||
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
||||
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
||||
<span class="delete-btn" contenteditable="false">×</span>
|
||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
||||
</div>
|
||||
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图A 腹腔镜探查</p>
|
||||
</td>
|
||||
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
||||
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
||||
<span class="delete-btn" contenteditable="false">×</span>
|
||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
||||
</div>
|
||||
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图B 胆囊管夹闭与离断</p>
|
||||
</td>
|
||||
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
||||
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
||||
<span class="delete-btn" contenteditable="false">×</span>
|
||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
||||
</div>
|
||||
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图C 胆囊动脉夹闭与离断</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
||||
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
||||
<span class="delete-btn" contenteditable="false">×</span>
|
||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
||||
</div>
|
||||
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图D 胆囊剥离与床面止血</p>
|
||||
</td>
|
||||
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
||||
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
||||
<span class="delete-btn" contenteditable="false">×</span>
|
||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
||||
</div>
|
||||
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图E 胆囊取出与钛夹确认</p>
|
||||
</td>
|
||||
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
|
||||
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
||||
<span class="delete-btn" contenteditable="false">×</span>
|
||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
||||
</div>
|
||||
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图F 止血材料覆盖及检查</p>
|
||||
</td>
|
||||
</tr></tbody>
|
||||
</table>
|
||||
|
||||
<div class="template-info-section">
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
<strong>手术后情况</strong>：${smartField('postOpCondition')}
|
||||
</p>
|
||||
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
<strong>切除标本描述</strong>：${smartField('specimenDescription')}
|
||||
</p>
|
||||
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
<strong>是否送病理检查</strong>：${smartField('pathologyCheck')}
|
||||
</p>
|
||||
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
<strong>冰冻病理结果</strong>：${smartField('frozenPathology')}
|
||||
</p>
|
||||
|
||||
<p style="text-align: right; font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0; white-space: nowrap;">
|
||||
手术者签名：<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="display:inline-block;text-align:center;width:200px;height:40px;line-height:40px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;position:relative;"><span class="delete-btn" contenteditable="false">×</span><span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span></span>
|
||||
</p>
|
||||
|
||||
<p style="margin: 0; padding: 0; line-height: 1.5;"> </p>
|
||||
|
||||
<p style="text-align: right; font-family: SimSun; line-height: 1.5; margin: 0; padding: 0;">
|
||||
${smartField('reportDate')}
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Backward compatibility alias
|
||||
export const defaultContent = defaultReportContent;
|
||||
65
src/utils/print.ts
Normal file
65
src/utils/print.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
export const printDocument = (htmlContent: string, docTitle: string = '图文报告') => {
|
||||
const originalTitle = document.title;
|
||||
document.title = docTitle;
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.style.position = 'fixed';
|
||||
iframe.style.right = '0';
|
||||
iframe.style.bottom = '0';
|
||||
iframe.style.width = '0';
|
||||
iframe.style.height = '0';
|
||||
iframe.style.border = '0';
|
||||
document.body.appendChild(iframe);
|
||||
|
||||
const win = iframe.contentWindow;
|
||||
const doc = iframe.contentDocument || win?.document;
|
||||
if (doc && win) {
|
||||
doc.open();
|
||||
doc.write(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>${docTitle}</title>
|
||||
<style>
|
||||
@page { size: A4; margin: 15mm 10mm; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; padding: 0; font-family: SimSun, "Microsoft YaHei", serif; color: #1E293B; background: white; }
|
||||
.content { width: 100%; min-height: 277mm; margin: 0 auto; }
|
||||
img { max-width: 100%; height: auto; display: block; margin: 8px auto; }
|
||||
p { margin: 0; padding: 0; line-height: 1.5; }
|
||||
h1 { font-size: 20px; margin: 16px 0 12px; font-weight: 600; text-align: center; }
|
||||
strong, b { font-weight: 600; }
|
||||
u { text-decoration: underline; }
|
||||
table { width: 100%; border-collapse: collapse; margin: 16px 0; table-layout: fixed; }
|
||||
td { padding: 8px; border: 1px solid #e2e8f0; vertical-align: top; }
|
||||
.image-placeholder { border: 2px dashed #cbd5e1; border-radius: 8px; padding: 16px; margin-bottom: 8px; background: #f8fafc; min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
|
||||
.image-placeholder.has-image { border: none; background: transparent; padding: 0; min-height: 0; }
|
||||
.delete-btn { display: none !important; }
|
||||
.image-placeholder:not(.has-image) { display: none !important; }
|
||||
.template-info-section { position: relative; margin-bottom: 16px; }
|
||||
.smart-field-wrapper { display: inline-flex; align-items: baseline; margin: 0; vertical-align: baseline; }
|
||||
.smart-field-wrapper .field-label { color: #64748b; user-select: none; }
|
||||
.smart-field-wrapper .field-value { min-width: 24px; padding: 0 2px; margin: 0; border: 1px solid #cbd5e1; border-radius: 2px; display: inline-block; background: #f8fafc; color: #0f172a; line-height: inherit; font-size: inherit; vertical-align: baseline; box-sizing: border-box; outline: none; text-align: center; }
|
||||
.report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; }
|
||||
@media print {
|
||||
.smart-field-wrapper .field-value { outline: none !important; box-shadow: none !important; border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; padding: 0 2px 0px 2px !important; line-height: 1 !important; }
|
||||
.smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">${htmlContent}</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
doc.close();
|
||||
win.focus();
|
||||
setTimeout(() => {
|
||||
win.print();
|
||||
document.title = originalTitle;
|
||||
setTimeout(() => {
|
||||
if (iframe.parentNode) document.body.removeChild(iframe);
|
||||
}, 1000);
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
43
src/utils/storage.ts
Normal file
43
src/utils/storage.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
export const storage = {
|
||||
get<T>(key: string, fallback: T): T {
|
||||
try {
|
||||
const raw = localStorage.getItem(key);
|
||||
return raw ? (JSON.parse(raw) as T) : fallback;
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
},
|
||||
|
||||
set<T>(key: string, value: T): void {
|
||||
try {
|
||||
localStorage.setItem(key, JSON.stringify(value));
|
||||
} catch (e) {
|
||||
console.error('Storage save failed (possibly quota exceeded):', e);
|
||||
}
|
||||
},
|
||||
|
||||
remove(key: string): void {
|
||||
localStorage.removeItem(key);
|
||||
},
|
||||
|
||||
getSession<T>(key: string, fallback: T): T {
|
||||
try {
|
||||
const raw = sessionStorage.getItem(key);
|
||||
return raw ? (JSON.parse(raw) as T) : fallback;
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
},
|
||||
|
||||
setSession<T>(key: string, value: T): void {
|
||||
try {
|
||||
sessionStorage.setItem(key, JSON.stringify(value));
|
||||
} catch (e) {
|
||||
console.error('Session storage save failed:', e);
|
||||
}
|
||||
},
|
||||
|
||||
removeSession(key: string): void {
|
||||
sessionStorage.removeItem(key);
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user