42 lines
2.3 KiB
Markdown
42 lines
2.3 KiB
Markdown
# 需求分析 —— 2026-04-18-19-08-43
|
||
|
||
## 需求来源
|
||
用户基于实际使用体验，提出六项界面交互和排版优化需求。
|
||
|
||
## 需求概述
|
||
|
||
### 需求 1：基础信息字段默认无下划线
|
||
默认模板中的「姓名、性别、年龄、科别、床号、住院号」6 个基础信息字段，在打印时默认不显示下划线。通过在 `smartField()` 函数中根据 key 自动注入 `.no-underline` 类实现。
|
||
|
||
### 需求 2：点击 field-value 联动高亮并居中滚动
|
||
在 `report-editor` 中点击正文 `class="field-value"` 时：
|
||
- 右侧基本信息对应输入框高亮显示蓝色背景（类似 `template-manage` 中的字段高亮效果）
|
||
- 自动滚动到屏幕可视区域的 1/3~2/3 位置（使用 `block: 'center'`）
|
||
|
||
### 需求 3：视频上传按钮整合进缩略图列表
|
||
将 `report-editor` 右侧「视频分析」Tab 中原本独立占据一行的「上传视频」大按钮，缩小并移入水平滚动的视频缩略图列表首位（`flex gap-2 overflow-x-auto`），尺寸与视频卡片保持一致（约 `w-24 h-[68px]`），节省垂直空间。
|
||
|
||
### 需求 4：视频模块间距紧凑化
|
||
缩减「视频分析」面板中以下间距：
|
||
- 视频缩略图列表与下方视频播放器之间的距离
|
||
- 视频播放器与播放控制按钮之间的距离
|
||
- 播放控制按钮与「关键帧摘取」标题之间的距离
|
||
为下方关键帧列表腾出更多展示空间。
|
||
|
||
### 需求 5：签名与日期之间增加空行
|
||
在 `defaultContent.ts` 中，「手术者签名」行与「撰写时间」行之间插入一个空段落 `<p> </p>`，使排版更美观。
|
||
|
||
### 需求 6：图片占位符填充后高度自适应
|
||
当图片占位符被填充图片后，若图片实际高度小于占位符预设高度（如 200px），占位符仍保留固定高度导致下方出现大片空白。需在填充图片后，将占位符的 `height`、`width`、`line-height` 重置为 `auto` / `normal`，让高度由图片实际尺寸决定。
|
||
|
||
## 涉及文件
|
||
- `src/utils/defaultContent.ts`（需求 1、5）
|
||
- `src/pages/ReportEditor.tsx`（需求 2、3、4、6）
|
||
- `src/pages/TemplateManage.tsx`（需求 6）
|
||
|
||
## 需求影响范围
|
||
- 默认模板打印样式
|
||
- 编辑器交互体验
|
||
- 视频分析面板布局
|
||
- 图片占位符自适应行为
|