Files
Mdeical_Sur_Report/工程分析/需求分析-2026-04-18-19-08-43.md

2.3 KiB
Raw Blame History

需求分析 —— 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>&nbsp;</p>,使排版更美观。

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

当图片占位符被填充图片后,若图片实际高度小于占位符预设高度(如 200px占位符仍保留固定高度导致下方出现大片空白。需在填充图片后将占位符的 heightwidthline-height 重置为 auto / normal,让高度由图片实际尺寸决定。

涉及文件

  • src/utils/defaultContent.ts(需求 1、5
  • src/pages/ReportEditor.tsx(需求 2、3、4、6
  • src/pages/TemplateManage.tsx(需求 6

需求影响范围

  • 默认模板打印样式
  • 编辑器交互体验
  • 视频分析面板布局
  • 图片占位符自适应行为