feat: smart field uniqueness, delete button, bulk export in report manage

- TemplateManage: add uniqueness check for smart fields to prevent duplicate inserts
- Add red circular delete button to smart-field-wrapper (visible on hover via CSS)
- Enhance keydown handler to delete smart fields at block-level boundaries
- Update defaultContent.ts smartField() to include delete-btn
- ReportManage: add per-row checkboxes, select-all, bulk delete
- Add single-report export modal (PDF via printDocument, JSON via Blob)
- Add bulk export actions for PDF and JSON
- Update experience record (#16)

src/pages/ReportManage.tsx

@@ -1,9 +1,10 @@
 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 { 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 '-';
@@ -23,6 +24,9 @@ export default function ReportManage() {
   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);
@@ -82,6 +86,7 @@ export default function ReportManage() {
       const updatedReports = reports.filter(r => r.id !== id);
       setReports(updatedReports);
       storage.set('reports', updatedReports);
+      setSelectedIds(prev => prev.filter(pid => pid !== id));
     }
   };
 
@@ -106,6 +111,82 @@ export default function ReportManage() {
     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 (
@@ -122,7 +203,7 @@ export default function ReportManage() {
           </div>
         </header>
         
-        <div className="flex flex-wrap gap-4 mb-6">
+        <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 
@@ -155,12 +236,51 @@ export default function ReportManage() {
             <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>
@@ -174,6 +294,14 @@ export default function ReportManage() {
                 {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>
@@ -228,13 +356,20 @@ export default function ReportManage() {
                           >
                             <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={7} className="px-6 py-24 text-center">
+                    <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>
@@ -297,6 +432,45 @@ export default function ReportManage() {
           </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>
   );
 }