把一次长记录，整理成可回看的沟通片段

围绕诊疗视频设计移动端工作流，将片段时间、患者归属、原文依据和复盘操作放在连续的交互中。

ReactTypeScriptViteMotionHTML5 Video

01 / THE WORKFLOW

从使用路径开始

DoctorDefender 将医生的操作组织为「今日、档案、我的」三个入口。案例聚焦视频整理与人工复盘的交互实现：先看记录和处理状态，再进入诊疗片段，最后回到患者时间线与原始语境。

02 / INTERFACE & INTERACTION

今日页面将设备状态、视频记录、诊疗片段和待核对事项分层呈现。归属待确认、未归属片段和待核对内容分别提供入口，点击后进入对应处理页面，减少在长列表里寻找任务的操作。

处理结果页面按时间排列诊疗片段，每个片段同时呈现起止时间、患者归属、角色和待核对数量。播放器默认静音，支持播放与拖动；归属操作区分已确认、系统建议和未归属三种状态。

待核对详情把视频时间段、转写原文和核对原因放在一起，提供确认、修改和忽略操作。患者入口连接完整诊疗时间线，使一条待核对内容可以回到更长的记录中理解。

03 / ENGINEERING NOTES

React 与 TypeScript 组织记录、片段、患者和复盘页面。视频时间范围、角色、归属状态与核对事项作为独立信息呈现，避免用一个笼统的「处理中」掩盖不同任务。

HTML5 Video 用于片段与详情播放，界面将播放位置、拖动进度及片段时间联系起来。视频画面与文本信息分别布局，让用户能够边看原文边回放。

系统建议与用户确认在交互上分开：患者可以重新选择，片段可以调整边界，待核对内容可以修改或忽略。案例展示的是这些复核入口与页面状态的连接方式。

把相近的任务带给我们，一起讨论实现方式。了解相关服务

MORE PROJECTS

医学影像 · 三维可视化

从 MRI 与分割标签出发，将三维表面、源切片、剖切控制和自主标注连接起来，让空间中的一个点回到影像中的对应位置。

科研平台 · 信息与证据组织

通过 DOI 连接论文检索、元数据确认和讨论入口，将学术表达、证据材料与身份边界落实到科研平台的界面与工程结构中。