backup at 2026-04-16-16-39-42

src/pages/ReportManage.tsx

@@ -0,0 +1,302 @@
+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 } from 'lucide-react';
+import { User, Report } from '../types';
+import { storage } from '../utils/storage';
+
+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);
+
+  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);
+    }
+  };
+
+  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);
+  };
+
+  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-6">
+          <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>
+        
+        <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">报告信息</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-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>
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan={7} 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>
+      )}
+    </div>
+  );
+}