所属项目面向全场景用药安全的医师助手 Agent团队ColdX · 山东大学软件学院 2026年春季项目实训个人分工前端开发 界面设计目录一、本阶段进展二、前端任务拆分三、界面风格初步确定四、AI交互过程五、本阶段产出相关链接一、本阶段进展项目启动后我这边首先做的不是直接写页面而是和团队一起把前端需要承接的功能边界确定下来。本项目 的核心不是普通问答而是围绕用药安全做审查、解释和追溯因此前端要展示的内容会比传统表单系统复杂很多。本阶段我主要完成了三件事明确前端需要支持的页面入口整理多智能体会诊结果的展示层级用 AI辅助拆分前端开发任务。当前确定的前端方向是以 Vue 3 TypeScript Vite 为基础把后端的用药安全能力组织成可演示的 Web 页面。二、前端任务拆分结合项目实际功能我把前端任务先拆成几个模块1. 首页展示系统状态和主要功能入口 2. 多智能体会诊页承接用药安全主流程 3. 智能问答页支持医生/患者双角色问答 4. 规则审查页展示确定性规则审查结果 5. 影像报告页承接影像分割和报告生成 6. Case 页面保存和回放会诊过程这样拆分以后前端工作不再是一句“做一个页面”而是每个页面都有明确目标。比如/consult负责展示完整会诊链路/rule-review负责强调规则底线/chat负责提供自然语言交互入口。三、界面风格初步确定由于项目是医疗用药安全方向界面不能做得太花哨。前端风格上我更倾向于临床工具感信息清晰、层级明确、颜色克制。本阶段定下来的基本原则是高风险内容要醒目但不夸张最终建议要放在结果区前面规则证据和专家意见要分区展示信息缺失和保守降级要有明确提示页面优先服务演示稳定性和信息清晰度。这也影响了后续组件设计比如风险徽章、规则证据面板、专家意见卡片和 Clarify 面板。四、AI交互过程项目刚开始时我用 AI 帮助做了开发任务拆分。提示词大致如下这是一个 Vue3 FastAPI 的用药安全项目。 后端包含多智能体会诊、规则审查、智能问答、影像报告和 Case 回放。 请帮我从前端开发角度拆分页面模块和阶段任务。 要求输出适合实训项目推进的任务列表不要直接生成代码。AI 给出的建议是先确定页面路由再对每个页面明确输入、输出和核心展示内容。我根据这个建议整理了前端阶段计划先做接口联调再处理状态管理之后集中推进/consult主流程页面。这次使用 AI 的感受是它适合帮我把模糊任务拆成可推进的 SPEC但具体页面怎么做还需要结合团队实际接口和项目代码继续调整。五、本阶段产出本阶段主要产出如下明确了前端整体技术栈和页面结构初步确定了医疗工具型界面风格梳理了多智能体会诊、规则审查、智能问答等页面分工用 AI辅助完成了第一版前端任务拆解为后续接口联调和页面开发建立了方向。下一阶段我会开始对接后端接口重点整理medsafeApi的请求封装和多智能体会诊接口。相关链接项目地址https://gitee.com/aemond/innovation-training/tree/master团队博客https://blog.csdn.net/curufin/category_13140668.html