某医疗大模型智能助手产品系统Vibe Coding

基于大模型的医疗智能助手项目，支持病情分析、医疗报告解读、药品识别等AI能力产品化

1. 智能医疗识读（单图/多图模式）
单图精读：用户上传药品说明书、化验单等图片，前端完成本地压缩与预检后，调用后端 AI 视觉理解接口，返回结构化识读结果
多图交叉分析：支持同时上传最多 3 张图片，前端维护图片队列并并行调用识读接口，后端返回关联分析结果
前端图片预处理：基于 Canvas 实现压缩（控制单图

我负责的具体任务：
独立负责该医疗AI助手的前端全链路开发，包括Nuxt 3工程搭建与静态导出配置、核心交互组件开发（多图上传/流式对话/双语对照/删除弹窗/健康小便签）、AI接口对接（识读接口与Streamable HTTP流式问答接口）、前端状态机设计与实现、图片压缩与EXIF校正逻辑、医疗内容安全渲染与术语统一后处理、IndexedDB本地缓存层、登录态与个人信息页开发，以及移动端适配与性能优化。
技术栈、架构与实现亮点：
技术栈为Nuxt 3 + Vue 3 + TypeScript + TailwindCSS + Pinia，采用组件化+Composables逻辑复用架构，按医疗场景抽象出上传、识读、问答、翻译四大模块。实现亮点包括：采用Streamable HTTP（fetch ReadableStream）替代SSE对接后端流式接口，自主封装流式解码、中断与降级逻辑；基于Canvas + EXIF解析实现前端图片压缩与自动旋转校正，单图压缩率80%以上；设计严格的状态机驱动UI（idle/上传中/识别中/回答中/已回答），禁止非法状态跳转；通过前端医学术语映射表保障翻译对照的术语一致性；使用DOMPurify白名单过滤实现医疗内容安全渲染；利用IndexedDB实现会话与图片本地持久化，弱网或刷新后状态可恢复。
实现难点：
难点一是Streamable HTTP流式数据的稳定接收与实时渲染，需处理ReadableStream逐块解码、UTF-8字符截断、网络中断后的异常恢复，并通过虚拟缓冲区+requestAnimationFrame批量flush，避免高频DOM操作导致页面抖动；难点二是多图并行上传的并发控制与体验优化，3张医疗图片需前端队列调度（限制并行数）、Canvas压缩降积、Base64预览内存管理，并与后端识读接口聚合返回结果；难点三是医疗场景下的