# 实现方案 — 2026-04-17-00-13-09

## 根因分析

当前系统存在三个核心问题：
1. **时间字段未联动**：`defaultContent.ts` 中手术开始/终止时间是纯文本占位符，无 `data-bind`，导致右侧表单与正文内容无法同步。
2. **表单硬编码不可扩展**：`ReportEditor.tsx` 右侧的基本信息表单是写死的 JSX，每新增一个字段都需要改代码；`TemplateManage.tsx` 的字段库也是静态数组，无法按医院实际需求自定义。
3. **方格 UI 破坏排版**：`field-value` 使用了较大的 `min-width` 和上下 `padding`，在 `inline-block` 布局下撑大了行高，导致段落行间距明显变大。

## 修改文件清单

| 文件 | 修改类型 | 说明 |
|------|---------|------|
| `src/types.ts` | 修改 | 新增 `FieldType`、`FormField`、`FormFieldsConfig` 类型 |
| `src/utils/defaultContent.ts` | 修改 | 手术时间替换为 `startTime`/`endTime` 智能方格 |
| `src/index.css` | 修改 | 优化 `.field-value` 紧凑样式 |
| `src/utils/print.ts` | 修改 | 同步打印样式 |
| `src/pages/TemplateManage.tsx` | 修改 | 字段库重构为 Tab 结构，支持分类、新增、显隐控制 |
| `src/pages/ReportEditor.tsx` | 修改 | 右侧表单动态渲染 + 时间解析拼接双向转换 |
| `src/pages/Login.tsx` | 修改 | 首次登录时初始化默认字段配置到 localStorage |

---

## 具体代码变更

### 变更 1：`src/types.ts` — 动态字段类型定义

**在 `BINDABLE_FIELDS` 之后追加：**

```typescript
export type FieldType = 'text' | 'single_select' | 'multi_select' | 'time' | 'date';

export interface FormField {
  key: string;
  label: string;
  category: string; // 如 '填空'、'单选'、'多选'、'时间'
  type: FieldType;
  visibleInForm: boolean;
  isSystemLocked: boolean;
  options?: string[];
}

export const DEFAULT_FORM_FIELDS: FormField[] = [
  { key: 'patientName', label: '患者姓名', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: true },
  { key: 'hospitalId', label: '住院号', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: true },
  { key: 'title', label: '手术名称', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
  { key: 'patientGender', label: '患者性别', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: false, options: ['男', '女'] },
  { key: 'patientAge', label: '患者年龄', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
  { key: 'department', label: '科别', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
  { key: 'bedNumber', label: '床号', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
  { key: 'surgeryDate', label: '手术日期', category: '时间', type: 'date', visibleInForm: true, isSystemLocked: false },
  { key: 'startTime', label: '手术开始时间', category: '时间', type: 'time', visibleInForm: true, isSystemLocked: false },
  { key: 'endTime', label: '手术终止时间', category: '时间', type: 'time', visibleInForm: true, isSystemLocked: false },
  { key: 'surgeon', label: '手术者', category: '多选', type: 'multi_select', visibleInForm: true, isSystemLocked: false, options: ['张医生', '李医生', '王医生'] },
  { key: 'assistant', label: '助手', category: '多选', type: 'multi_select', visibleInForm: true, isSystemLocked: false, options: ['赵医生', '钱医生', '孙医生'] },
  { key: 'anesthesiologist', label: '麻醉师', category: '多选', type: 'multi_select', visibleInForm: true, isSystemLocked: false, options: ['周医生', '吴医生', '郑医生'] },
  { key: 'anesthesiaType', label: '麻醉方式', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: false, options: ['全麻', '局麻', '腰麻', '硬膜外麻醉', '静脉麻醉', '吸入麻醉'] },
];
```

### 变更 2：`src/utils/defaultContent.ts` — 手术时间方框化

**替换手术时间相关段落：**

```typescript
    <p style="font-family: SimSun;">
        手术开始时间：${smartField('startTime')} 
        手术终止时间：${smartField('endTime')}
    </p>
```

> 注意：同时需要把 `smartField` 函数的样式字符串更新为紧凑版本（见变更 4）。

### 变更 3：`src/utils/defaultContent.ts` — 更新 `smartField` 紧凑样式

**替换现有的 `smartField` 函数：**

```typescript
const smartField = (key: string) => `
  <span class="smart-field-wrapper" contenteditable="false">
    <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>
`;
```

### 变更 4：`src/index.css` — 同步优化 `.field-value` 样式

**在 `.smart-field-wrapper` 相关样式区块中更新 `.field-value`：**

```css
.smart-field-wrapper .field-value {
  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;
  outline: none;
}
```

**打印样式同步更新：**

```css
@media print {
  .smart-field-wrapper .field-value {
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2px !important;
  }
}
```

### 变更 5：`src/utils/print.ts` — 同步打印样式

在 iframe 内联 `<style>` 中，将 `.smart-field-wrapper .field-value` 的默认样式更新为紧凑版本，并保留 `@media print` 下划线样式。

### 变更 6：`src/pages/TemplateManage.tsx` — 字段库重构

**新增状态：**

```tsx
const [fieldLibTab, setFieldLibTab] = useState<'insert' | 'manage'>('insert');
const [formFields, setFormFields] = useState<FormField[]>([]);
const [newFieldForm, setNewFieldForm] = useState({ label: '', category: '填空', type: 'text' as FieldType });
const [newFieldOptions, setNewFieldOptions] = useState('');
```

**初始化（在 `useEffect` 中读取/初始化配置）：**

```tsx
const savedFields = storage.get<FormField[]>('formFieldsConfig', []);
if (savedFields.length > 0) {
  setFormFields(savedFields);
} else {
  setFormFields(DEFAULT_FORM_FIELDS);
  storage.set('formFieldsConfig', DEFAULT_FORM_FIELDS);
}
```

**插入字段 Tab UI：**

```tsx
<div className="space-y-4">
  {['填空', '单选', '多选', '时间'].map(cat => {
    const catFields = formFields.filter(f => f.category === cat);
    if (catFields.length === 0) return null;
    return (
      <div key={cat}>
        <div className="text-[10px] text-slate-400 mb-1">{cat}</div>
        <div className="flex flex-wrap gap-1">
          {catFields.map(field => (
            <button
              key={field.key}
              onClick={() => insertSmartField(field)}
              className="..."
            >
              {field.label}
            </button>
          ))}
        </div>
      </div>
    );
  })}
</div>
```

> `insertSmartField` 函数的参数改为 `FormField`，使用 `field.key` 和 `field.label` 生成 HTML。

**字段管理 Tab UI：**

```tsx
<div className="space-y-3">
  {formFields.filter(f => !f.isSystemLocked).map(field => (
    <div key={field.key} className="flex items-center justify-between p-2 bg-slate-50 rounded border border-slate-200">
      <div className="text-xs">
        <div className="font-medium text-text-main">{field.label}</div>
        <div className="text-[10px] text-slate-400">{field.category} · {field.type}</div>
      </div>
      <div className="flex items-center gap-2">
        <label className="flex items-center gap-1 text-[10px] text-slate-600">
          <input
            type="checkbox"
            checked={field.visibleInForm}
            onChange={() => toggleFieldVisible(field.key)}
          />
          显示
        </label>
        <button onClick={() => deleteField(field.key)} className="text-red-500 text-[10px]">删除</button>
      </div>
    </div>
  ))}

  <div className="pt-2 border-t border-slate-200">
    <div className="text-xs font-semibold mb-2">新增字段</div>
    <input ... />
    <select ... />
    <button onClick={addField}>添加</button>
  </div>
</div>
```

**关键操作函数：**

```tsx
const toggleFieldVisible = (key: string) => {
  const updated = formFields.map(f => f.key === key ? { ...f, visibleInForm: !f.visibleInForm } : f);
  setFormFields(updated);
  storage.set('formFieldsConfig', updated);
};

const deleteField = (key: string) => {
  const updated = formFields.filter(f => f.key !== key);
  setFormFields(updated);
  storage.set('formFieldsConfig', updated);
};

const addField = () => {
  if (!newFieldForm.label.trim()) return;
  const key = 'custom_' + Date.now();
  const newField: FormField = {
    key,
    label: newFieldForm.label.trim(),
    category: newFieldForm.category,
    type: newFieldForm.type,
    visibleInForm: true,
    isSystemLocked: false,
    options: ['单选', '多选'].includes(newFieldForm.category) && newFieldOptions.trim()
      ? newFieldOptions.split(/[,，]/).map(s => s.trim()).filter(Boolean)
      : undefined
  };
  const updated = [...formFields, newField];
  setFormFields(updated);
  storage.set('formFieldsConfig', updated);
  setNewFieldForm({ label: '', category: '填空', type: 'text' });
  setNewFieldOptions('');
};
```

### 变更 7：`src/pages/ReportEditor.tsx` — 动态渲染右侧表单 + 时间联动

**初始化字段配置（在 `useEffect` 中）：**

```tsx
const [formFields, setFormFields] = useState<FormField[]>([]);
// ...
const savedFields = storage.get<FormField[]>('formFieldsConfig', []);
if (savedFields.length > 0) {
  setFormFields(savedFields);
} else {
  setFormFields(DEFAULT_FORM_FIELDS);
}
```

**时间解析/拼接辅助函数：**

```tsx
const formatTimeValue = (hour?: string, minute?: string) => {
  if (!hour && !minute) return '';
  return `${hour || ''}:${minute || ''}`;
};

const parseTimeValue = (value: string) => {
  const parts = value.split(':');
  return { hour: parts[0] || '', minute: parts[1] || '' };
};
```

**表单 → 方格的时间同步（在 `reportData` 的 `useEffect` 中）：**

```tsx
// 对时间字段做特殊拼接
let newValue = '';
if (fieldKey === 'startTime') {
  newValue = formatTimeValue(reportData.startHour, reportData.startMinute);
} else if (fieldKey === 'endTime') {
  newValue = formatTimeValue(reportData.endHour, reportData.endMinute);
} else {
  const rawValue = (reportData as any)[fieldKey];
  if (Array.isArray(rawValue)) newValue = rawValue.join(', ');
  else if (rawValue !== undefined && rawValue !== null) newValue = String(rawValue);
}
```

**方格 → 表单的时间同步（在 `handleEditorInput` 中）：**

```tsx
if (target && target.hasAttribute('data-bind')) {
  const fieldKey = target.getAttribute('data-bind')!;
  const newValue = target.innerText;

  if (fieldKey === 'startTime') {
    const { hour, minute } = parseTimeValue(newValue);
    setReportData(prev => {
      const next = { ...prev, startHour: hour, startMinute: minute };
      stateRef.current = { ...stateRef.current, reportData: next };
      return next;
    });
  } else if (fieldKey === 'endTime') {
    const { hour, minute } = parseTimeValue(newValue);
    setReportData(prev => {
      const next = { ...prev, endHour: hour, endMinute: minute };
      stateRef.current = { ...stateRef.current, reportData: next };
      return next;
    });
  } else {
    setReportData(prev => {
      const next = { ...prev, [fieldKey]: newValue };
      stateRef.current = { ...stateRef.current, reportData: next };
      return next;
    });
  }
}
```

**动态渲染右侧表单（替换现有的硬编码表单区域）：**

将现有的 `activeTab === 'info'` 下的 `<div className="report-info-form space-y-4">...` 整体替换为：

```tsx
{activeTab === 'info' && (
  <div className="report-info-form space-y-4">
    {formFields.filter(f => f.visibleInForm).map(field => {
      if (field.type === 'text' || field.type === 'date') {
        const inputType = field.type === 'date' ? 'date' : 'text';
        return (
          <div key={field.key} className="space-y-1">
            <label className="block text-xs font-bold text-text-main">{field.label}</label>
            <input
              type={inputType}
              value={(reportData as any)[field.key] || ''}
              onChange={(e) => { const next = { ...reportData, [field.key]: e.target.value }; setReportData(next); stateRef.current = { ...stateRef.current, reportData: next }; saveDraftToStorage(); }}
              className="input-minimal"
              placeholder={field.label}
            />
          </div>
        );
      }

      if (field.type === 'single_select') {
        return (
          <div key={field.key} className="space-y-1">
            <label className="block text-xs font-bold text-text-main">{field.label}</label>
            <select
              value={(reportData as any)[field.key] || ''}
              onChange={(e) => { const next = { ...reportData, [field.key]: e.target.value }; setReportData(next); stateRef.current = { ...stateRef.current, reportData: next }; saveDraftToStorage(); }}
              className="input-minimal bg-white"
            >
              <option value="">请选择</option>
              {(field.options || []).map(opt => <option key={opt} value={opt}>{opt}</option>)}
            </select>
          </div>
        );
      }

      if (field.type === 'multi_select') {
        const isOpen = openDropdown === field.key;
        return (
          <div key={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="..." onClick={() => setOpenDropdown(field.key)}>
              {/* 复用现有的多选标签渲染逻辑，字段名用 field.key */}
            </div>
            {/* 下拉选项弹窗 ... */}
          </div>
        );
      }

      if (field.type === 'time') {
        const hourKey = field.key === 'startTime' ? 'startHour' : 'endHour';
        const minuteKey = field.key === 'startTime' ? 'startMinute' : 'endMinute';
        return (
          <div key={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
                value={(reportData as any)[hourKey] || ''}
                onChange={(e) => { const next = { ...reportData, [hourKey]: e.target.value }; setReportData(next); stateRef.current = { ...stateRef.current, reportData: next }; saveDraftToStorage(); }}
                className="input-minimal bg-white flex-1"
              >
                <option value="">--</option>
                {hourOptions.map(h => <option key={h} value={h}>{h}</option>)}
              </select>
              <span className="text-text-muted">:</span>
              <select
                value={(reportData as any)[minuteKey] || ''}
                onChange={(e) => { const next = { ...reportData, [minuteKey]: e.target.value }; setReportData(next); stateRef.current = { ...stateRef.current, reportData: next }; saveDraftToStorage(); }}
                className="input-minimal bg-white flex-1"
              >
                <option value="">--</option>
                {minuteOptions.map(m => <option key={m} value={m}>{m}</option>)}
              </select>
            </div>
          </div>
        );
      }

      return null;
    })}
  </div>
)}
```

> 对于 `multi_select`，可以完全复用现有的 `surgeon`/`assistant`/`anesthesiologist` 的多选组件逻辑，只需将硬编码的字段名替换为 `field.key`，并将 `multiSelectOptions` 的读取逻辑泛化为从 `field.options` 读取。

### 变更 8：`src/pages/Login.tsx` — 首次登录初始化字段配置

在 Login 页面初始化默认数据时（与其他 `storage.set` 一起），增加：

```tsx
if (!storage.get<FormField[]>('formFieldsConfig', null)) {
  storage.set('formFieldsConfig', DEFAULT_FORM_FIELDS);
}
```

## 风险点

| 风险 | 级别 | 应对措施 |
|------|------|---------|
| 老用户的 `localStorage` 中没有 `formFieldsConfig`，首次进入可能显示空白表单 | 中 | `ReportEditor` 和 `TemplateManage` 中都做 fallback：若不存在则使用 `DEFAULT_FORM_FIELDS` 并自动写入 localStorage |
| `ReportEditor` 动态渲染多选字段时，现有 `multiSelectOptions` 状态与新字段体系冲突 | 中 | 多选字段的选项统一从 `field.options` 读取，不再依赖独立的 `multiSelectOptions` 状态（或做兼容映射） |
| 时间方格输入非标准格式（如"930"而非"09:30"）导致解析失败 | 低 | `parseTimeValue` 使用简单 `split(':')`，若格式不对则 `hour`/`minute` 保持原样或空字符串，不影响系统稳定性 |
| 删除自定义字段后，老报告中仍包含该 `data-bind` 节点 | 低 | 老报告中的 orphan 节点只是普通可编辑方格，右侧表单不显示对应输入项，属于预期行为 |

## 回滚策略

本次改动涉及数据结构和多处 UI 渲染。如出现异常，可：
1. `git revert` 回滚代码；
2. 手动在浏览器控制台执行 `localStorage.removeItem('formFieldsConfig')` 恢复默认字段配置。

---

**⚠️ 请审核以上方案，确认无误后回复「确认」或提出修改意见，我将继续编写测试方案。**