V1.2.1
This commit is contained in:
Administrator
213
src/pages/Dashboard.tsx
Normal file
213
src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
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({
|
||||
reportCount: 0,
|
||||
templateCount: 0,
|
||||
userCount: 0,
|
||||
todayCount: 0,
|
||||
trend: [0,0,0,0,0,0,0],
|
||||
trendLabels: ['','','','','','',''],
|
||||
maxTrend: 1
|
||||
});
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
|
||||
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 today = new Date().toISOString().split('T')[0];
|
||||
const todayReports = userReports.filter(r => r.createdAt === today);
|
||||
|
||||
// 7-day trend data
|
||||
const trend: number[] = [];
|
||||
const labels: string[] = [];
|
||||
for (let i = 6; i >= 0; i--) {
|
||||
const d = new Date();
|
||||
d.setDate(d.getDate() - i);
|
||||
const dateStr = d.toISOString().split('T')[0];
|
||||
const label = `${d.getMonth() + 1}/${d.getDate()}`;
|
||||
labels.push(label);
|
||||
trend.push(userReports.filter(r => r.createdAt === dateStr).length);
|
||||
}
|
||||
const maxTrend = Math.max(...trend, 1);
|
||||
|
||||
setStats({
|
||||
reportCount: userReports.length,
|
||||
templateCount: templates.length,
|
||||
userCount: users.length,
|
||||
todayCount: todayReports.length,
|
||||
trend,
|
||||
trendLabels: labels,
|
||||
maxTrend
|
||||
});
|
||||
}, [navigate]);
|
||||
|
||||
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-3 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.reportCount}</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>
|
||||
<span className="text-[10px] text-accent font-bold uppercase tracking-wider">最近 7 天</span>
|
||||
</div>
|
||||
<div className="flex-1 bg-slate-50 rounded-xl p-6 min-h-[240px] relative">
|
||||
{/* SVG Area Chart */}
|
||||
<svg viewBox="0 0 300 120" className="w-full h-full overflow-visible">
|
||||
<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" />
|
||||
{points.map((p, i) => (
|
||||
<g key={i}>
|
||||
<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>
|
||||
<text x={p.x} y={120 - 2} textAnchor="middle" fontSize="8" fill="#94A3B8" fontWeight="bold">{p.label}</text>
|
||||
</g>
|
||||
))}
|
||||
</g>
|
||||
);
|
||||
})()}
|
||||
</svg>
|
||||
</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', 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, 1, 2, 3, 4, 5]
|
||||
};
|
||||
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' ? '' : '外科' };
|
||||
// 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>
|
||||
);
|
||||
}
|
||||
2014
src/pages/ReportEditor.tsx
Normal file
2014
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().toISOString().replace(/[:.]/g, '-');
|
||||
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>
|
||||
);
|
||||
}
|
||||
419
src/pages/SystemSettings.tsx
Normal file
419
src/pages/SystemSettings.tsx
Normal file
@@ -0,0 +1,419 @@
|
||||
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'
|
||||
};
|
||||
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>
|
||||
);
|
||||
}
|
||||
1381
src/pages/TemplateManage.tsx
Normal file
1381
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user