2026-04-18-16-55-47 - 报告编辑器field-value点击联动、字段动态排序、默认模板手术图片表格替换

src/pages/ReportEditor.tsx

@@ -377,6 +377,27 @@ export default function ReportEditor() {
       const targetEl = node as HTMLElement | null;
       if (!targetEl) return;
 
+      // Handle click on field-value: switch to info tab and focus corresponding input
+      const fieldValue = targetEl.closest('.field-value') as HTMLElement | null;
+      if (fieldValue) {
+        const bindKey = fieldValue.getAttribute('data-bind');
+        if (bindKey) {
+          setActiveTab('info');
+          stateRef.current = { ...stateRef.current, activeTab: 'info' };
+          setTimeout(() => {
+            const inputEl = document.getElementById(`input-${bindKey}`);
+            if (inputEl) {
+              inputEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+              const focusable = inputEl.querySelector('input, select') as HTMLElement | null;
+              if (focusable) {
+                focusable.focus();
+              }
+            }
+          }, 100);
+        }
+        return;
+      }
+
       const placeholder = targetEl.closest('.image-placeholder') as HTMLElement | null;
       if (!placeholder) return;
 
@@ -1366,14 +1387,30 @@ export default function ReportEditor() {
             <div className="flex-1 overflow-y-auto p-6 space-y-8">
               {activeTab === 'info' && (
                 <div className="report-info-form space-y-4">
-                  {formFields.filter(f => f.visibleInForm).map(field => {
+                  {(() => {
+                    const topKeys = ['patientName', 'hospitalId', 'title'];
+                    const contentHtml = contentRef.current || editorRef.current?.innerHTML || '';
+                    return [...formFields.filter(f => f.visibleInForm)].sort((a, b) => {
+                      const aTop = topKeys.indexOf(a.key);
+                      const bTop = topKeys.indexOf(b.key);
+                      if (aTop !== -1 && bTop !== -1) return aTop - bTop;
+                      if (aTop !== -1) return -1;
+                      if (bTop !== -1) return 1;
+                      const aIndex = contentHtml.indexOf(`data-bind="${a.key}"`);
+                      const bIndex = contentHtml.indexOf(`data-bind="${b.key}"`);
+                      if (aIndex === -1 && bIndex === -1) return 0;
+                      if (aIndex === -1) return 1;
+                      if (bIndex === -1) return -1;
+                      return aIndex - bIndex;
+                    });
+                  })().map(field => {
                     const isRequired = field.isSystemLocked;
                     const hasError = isRequired && touched[field.key] && !(reportData as any)[field.key];
 
                     if (field.type === 'text' || field.type === 'date') {
                       const inputType = field.type === 'date' ? 'date' : 'text';
                       return (
-                        <div key={field.key} className={field.category === '填空' && formFields.filter(f2 => f2.visibleInForm && f2.type === 'text' && f2.isSystemLocked).length > 1 && (field.key === 'patientName' || field.key === 'hospitalId') ? 'flex-1 space-y-1' : 'space-y-1'}>
+                        <div key={field.key} id={`input-${field.key}`} className={field.category === '填空' && formFields.filter(f2 => f2.visibleInForm && f2.type === 'text' && f2.isSystemLocked).length > 1 && (field.key === 'patientName' || field.key === 'hospitalId') ? 'flex-1 space-y-1' : 'space-y-1'}>
                           <label className="block text-xs font-bold text-text-main">
                             {field.label} {isRequired && <span className="text-red-500">*</span>}
                           </label>
@@ -1393,7 +1430,7 @@ export default function ReportEditor() {
                       const isOpen = openDropdown === field.key;
                       const opts = field.options || (field.key === 'anesthesiaType' ? anesthesiaOptions : []);
                       return (
-                        <div key={field.key} className="space-y-1 select-dropdown-root relative">
+                        <div key={field.key} id={`input-${field.key}`} className="space-y-1 select-dropdown-root relative">
                           <label className="block text-xs font-bold text-text-main">{field.label}</label>
                           <div
                             className="w-full px-3 py-2 border border-border rounded-lg bg-white flex items-center min-h-[42px] cursor-text"
@@ -1502,7 +1539,7 @@ export default function ReportEditor() {
                       const currentInputText = multiInputText[field.key] !== undefined ? multiInputText[field.key] : displayText;
 
                       return (
-                        <div key={field.key} className="space-y-1 select-dropdown-root relative">
+                        <div key={field.key} id={`input-${field.key}`} className="space-y-1 select-dropdown-root relative">
                           <label className="block text-xs font-bold text-text-main">{field.label}（可多选）</label>
                           <div
                             className="w-full px-3 py-2 border border-border rounded-lg bg-white flex flex-wrap gap-1 items-center min-h-[42px] cursor-text"
@@ -1583,7 +1620,7 @@ export default function ReportEditor() {
                         const { h: h12, isPM } = from24h(h24val);
 
                         return (
-                          <div key={field.key} className="space-y-1">
+                          <div key={field.key} id={`input-${field.key}`} className="space-y-1">
                             <label className="block text-xs font-bold text-text-main">{field.label}</label>
                             <div className="flex items-center gap-2">
                               <select
@@ -1640,7 +1677,7 @@ export default function ReportEditor() {
                       const { h: h12g, isPM: isPMg } = from24h(h24);
 
                       return (
-                        <div key={field.key} className="space-y-1">
+                        <div key={field.key} id={`input-${field.key}`} className="space-y-1">
                           <label className="block text-xs font-bold text-text-main">{field.label}</label>
                           <div className="flex items-center gap-2">
                             <select