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/index.css

@@ -127,6 +127,24 @@
   .smart-field-wrapper .field-value:empty::before {
     content: '\200b';
   }
+  .smart-field-wrapper .delete-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    margin-right: 2px;
+    background: #ef4444;
+    color: white;
+    border-radius: 50%;
+    font-size: 10px;
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+  }
+  .smart-field-wrapper .delete-btn:hover {
+    background: #dc2626;
+  }
 }
 
 @media print {
@@ -163,4 +181,7 @@
     background: transparent !important;
     padding: 0 2px !important;
   }
+  .print-content .smart-field-wrapper .delete-btn {
+    display: none !important;
+  }
 }

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>
   );
 }

src/pages/TemplateManage.tsx

@@ -112,7 +112,7 @@ export default function TemplateManage() {
     input.click();
   };
 
-  // Handle image placeholder interactions via click capture for reliable contenteditable behavior
+  // Handle image placeholder and smart field delete interactions via click capture
   useEffect(() => {
     const handleEditorClick = (e: MouseEvent) => {
       // e.target may be a text node; safely resolve to an Element
@@ -121,6 +121,15 @@ export default function TemplateManage() {
       const targetEl = node as HTMLElement | null;
       if (!targetEl) return;
 
+      const smartField = targetEl.closest('.smart-field-wrapper') as HTMLElement | null;
+      if (smartField && targetEl.closest('.delete-btn')) {
+        e.stopPropagation();
+        e.preventDefault();
+        smartField.remove();
+        saveTemplateContent();
+        return;
+      }
+
       const placeholder = targetEl.closest('.image-placeholder') as HTMLElement | null;
       if (!placeholder) return;
 
@@ -173,34 +182,43 @@ export default function TemplateManage() {
       if (!sel || !sel.isCollapsed || sel.rangeCount === 0) return;
       const range = sel.getRangeAt(0);
       const node = range.startContainer;
-      if (node.nodeType !== Node.TEXT_NODE) return;
       const offset = range.startOffset;
 
-      if (e.key === 'Backspace' && offset === 0) {
-        const prev = node.previousSibling;
-        if (prev && prev.nodeType === Node.ELEMENT_NODE && (prev as Element).classList?.contains('smart-field-wrapper')) {
-          e.preventDefault();
-          prev.remove();
-          const allTemplates = storage.get<Template[]>('templates', []);
-          const updated = allTemplates.map(t =>
-            t.id === currentTemplateId ? { ...t, content: editorRef.current!.innerHTML, updatedAt: new Date().toISOString() } : t
-          );
-          setTemplates(prevTemplates => prevTemplates.map(t => updated.find(u => u.id === t.id) || t));
-          storage.set('templates', updated);
+      let target: Element | null = null;
+
+      if (node.nodeType === Node.TEXT_NODE) {
+        if (e.key === 'Backspace' && offset === 0) {
+          const prev = node.previousSibling;
+          if (prev && prev.nodeType === Node.ELEMENT_NODE && (prev as Element).classList?.contains('smart-field-wrapper')) {
+            target = prev as Element;
+          }
+        } else if (e.key === 'Delete' && offset === (node.textContent?.length || 0)) {
+          const next = node.nextSibling;
+          if (next && next.nodeType === Node.ELEMENT_NODE && (next as Element).classList?.contains('smart-field-wrapper')) {
+            target = next as Element;
+          }
         }
-      } else if (e.key === 'Delete' && offset === (node.textContent?.length || 0)) {
-        const next = node.nextSibling;
-        if (next && next.nodeType === Node.ELEMENT_NODE && (next as Element).classList?.contains('smart-field-wrapper')) {
-          e.preventDefault();
-          next.remove();
-          const allTemplates = storage.get<Template[]>('templates', []);
-          const updated = allTemplates.map(t =>
-            t.id === currentTemplateId ? { ...t, content: editorRef.current!.innerHTML, updatedAt: new Date().toISOString() } : t
-          );
-          setTemplates(prevTemplates => prevTemplates.map(t => updated.find(u => u.id === t.id) || t));
-          storage.set('templates', updated);
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        // Cursor is directly inside a block element (e.g. <p>) at a boundary
+        const el = node as Element;
+        if (e.key === 'Backspace' && offset > 0) {
+          const prev = el.childNodes[offset - 1];
+          if (prev && prev.nodeType === Node.ELEMENT_NODE && (prev as Element).classList?.contains('smart-field-wrapper')) {
+            target = prev as Element;
+          }
+        } else if (e.key === 'Delete' && offset < el.childNodes.length) {
+          const next = el.childNodes[offset];
+          if (next && next.nodeType === Node.ELEMENT_NODE && (next as Element).classList?.contains('smart-field-wrapper')) {
+            target = next as Element;
+          }
         }
       }
+
+      if (target) {
+        e.preventDefault();
+        target.remove();
+        saveTemplateContent();
+      }
     };
 
     editor.addEventListener('keydown', handleKeyDown, true);
@@ -215,9 +233,23 @@ export default function TemplateManage() {
     editorRef.current?.focus();
   };
 
+  const saveTemplateContent = () => {
+    if (!currentTemplateId || !editorRef.current) return;
+    const allTemplates = storage.get<Template[]>('templates', []);
+    const updated = allTemplates.map(t =>
+      t.id === currentTemplateId ? { ...t, content: editorRef.current!.innerHTML, updatedAt: new Date().toISOString() } : t
+    );
+    setTemplates(prevTemplates => prevTemplates.map(t => updated.find(u => u.id === t.id) || t));
+    storage.set('templates', updated);
+  };
+
   const insertSmartField = (field: FormField) => {
     editorRef.current?.focus();
-    const html = `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;"><span class="field-value" data-bind="${field.key}" contenteditable="true" style="min-width:32px;padding:0 4px;margin:0 2px;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:1.2;font-size:inherit;vertical-align:text-bottom;box-sizing:border-box;min-height:1.2em;"> </span></span>`;
+    if (editorRef.current?.querySelector(`[data-bind="${field.key}"]`)) {
+      alert(`字段 "${field.label}" 已存在，请勿重复插入。`);
+      return;
+    }
+    const html = `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;"><span class="delete-btn" contenteditable="false">×</span><span class="field-value" data-bind="${field.key}" contenteditable="true" style="min-width:32px;padding:0 4px;margin:0 2px;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:1.2;font-size:inherit;vertical-align:text-bottom;box-sizing:border-box;min-height:1.2em;"> </span></span>`;
     document.execCommand('insertHTML', false, html);
     editorRef.current?.focus();
   };

src/utils/defaultContent.ts

@@ -1,4 +1,4 @@
-const smartField = (key: string) => `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;"><span class="field-value" data-bind="${key}" contenteditable="true" style="min-width:32px;padding:0 4px;margin:0 2px;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:1.2;font-size:inherit;vertical-align:text-bottom;box-sizing:border-box;min-height:1.2em;"> </span></span>`;
+const smartField = (key: string) => `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;"><span class="delete-btn" contenteditable="false">×</span><span class="field-value" data-bind="${key}" contenteditable="true" style="min-width:32px;padding:0 4px;margin:0 2px;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:1.2;font-size:inherit;vertical-align:text-bottom;box-sizing:border-box;min-height:1.2em;"> </span></span>`;
 
 export const defaultReportContent = `
 <!-- 医院Logo -->