98 lines
4.1 KiB
Markdown
98 lines
4.1 KiB
Markdown
# 实现方案 —— 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;"> </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）和正文中的显示是否正常。
|