# 实现方案 —— 2026-04-18-19-08-43

## 方案目标
优化编辑器交互体验和模板排版细节，提升视频面板空间利用率和图片占位符自适应能力。

## 需求 1：基础信息字段默认无下划线

### 修改文件
`src/utils/defaultContent.ts`

### 修改内容
修改 `smartField()` 函数，对 6 个基础字段自动附加 `.no-underline` 类：
```ts
const noUnderlineKeys = ['patientName', 'patientGender', 'patientAge', 'department', 'bedNumber', 'hospitalId'];
const noUlClass = noUnderlineKeys.includes(key) ? ' no-underline' : '';
```
在生成的 HTML 中，`.field-value` 的 class 变为 `field-value${noUlClass}`。

## 需求 2：字段联动高亮并居中滚动

### 修改文件
`src/pages/ReportEditor.tsx`

### 修改内容
1. **新增状态**：`const [activeFieldKey, setActiveFieldKey] = useState<string | null>(null);`
2. **修改点击处理**：在 `handleEditorClick` 的 `.field-value` 点击分支中，增加 `setActiveFieldKey(bindKey)`。
3. **修改滚动逻辑**：将 `scrollIntoView` 的 `block` 从 `'center'` 改为更精确的控制（`block: 'center'` 本身就是居中，满足 1/3~2/3 需求）。
4. **高亮样式**：在右侧表单渲染中，为每个字段容器 `div` 增加动态类名：
   ```tsx
   className={`space-y-1 p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}
   ```

## 需求 3：视频上传按钮整合进缩略图列表

### 修改文件
`src/pages/ReportEditor.tsx`

### 修改内容
1. 删除原本独立的「上传视频」大按钮区域。
2. 在 `videos.map()` 所在的滚动容器 `<div className="flex gap-2 overflow-x-auto pb-2 no-scrollbar">` 的第一个位置，插入缩小版的上传按钮：
   ```tsx
   <button
     onClick={() => videoInputRef.current?.click()}
     className="shrink-0 w-24 h-[68px] flex flex-col items-center justify-center gap-1 border-2 border-dashed border-border rounded-xl hover:border-accent hover:bg-slate-50 transition-all text-text-muted hover:text-accent"
   >
     <Video size={18} />
     <span className="text-[10px] font-bold">上传视频</span>
   </button>
   ```

## 需求 4：视频模块间距紧凑化

### 修改文件
`src/pages/ReportEditor.tsx`

### 修改内容
1. 最外层容器从 `space-y-4` 改为 `space-y-2`。
2. 视频播放器与控制按钮之间从 `space-y-4` 改为 `space-y-2`。
3. 控制按钮区域（播放/暂停/进度条等）的 `gap` 或 `margin` 适当缩减。
4. 「关键帧摘取」标题区域的 `padding-top` 缩减，可增加 `border-t` 作为视觉分隔。

## 需求 5：签名与日期之间增加空行

### 修改文件
`src/utils/defaultContent.ts`

### 修改内容
在「手术者签名」`<p>` 和「撰写时间」`<p>` 之间插入：
```html
<p style="margin: 0; padding: 0; line-height: 1.5;">&nbsp;</p>
```

## 需求 6：图片占位符填充后高度自适应

### 修改文件
`src/pages/ReportEditor.tsx` 和 `src/pages/TemplateManage.tsx`

### 修改内容
在所有填充图片的逻辑中（`fillPlaceholderSrc`、`handleDrop`、`autoCaptureFrames` 等），在 `placeholder.classList.add('has-image')` 之后，增加：
```ts
placeholder.style.height = 'auto';
placeholder.style.width = 'auto';
placeholder.style.lineHeight = 'normal';
```

## 涉及文件及修改点
| 文件 | 修改点 |
|------|--------|
| `src/utils/defaultContent.ts` | `smartField()` 注入 `.no-underline`；签名与日期之间插入空行 |
| `src/pages/ReportEditor.tsx` | `activeFieldKey` 状态 + 高亮样式；视频上传按钮整合；视频面板间距缩减；占位符自适应样式 |
| `src/pages/TemplateManage.tsx` | 占位符自适应样式 |

## 风险与注意事项
1. `smartField()` 中硬编码的 6 个 key 需与 `DEFAULT_FORM_FIELDS` 严格一致。
2. `activeFieldKey` 高亮样式使用 `transition-all duration-300`，需确保不会与现有样式冲突。
3. 视频上传按钮移入缩略图列表后，需确保 `videoInputRef` 的点击触发逻辑不受影响。
4. 占位符 `height: auto` 后，需验证图片在表格内（table cell）和正文中的显示是否正常。