前端手记（一）：项目启动与前端任务拆分

所属项目：面向全场景用药安全的医师助手 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