1. 引言在前几篇实战笔记中我们探讨了生产车间多智能体系统的架构设计、Agent协作机制和核心算法。本篇将聚焦于系统的前端原型UI设计展示如何通过统一的响应式界面支撑车间主管、计划员、班组长等不同角色的日常工作。我们将详细介绍从计划驾驶舱到工单详情页的完整页面清单和设计原则。2. 前端设计原则PC端和移动端使用同一套代码不为移动端单独开发页面。页面基于 Ant Design 组件体系实现布局使用Row、Col、Grid.useBreakpoint和 CSS Media Queries 做响应式适配。原则要求统一代码PC端、平板、手机共用同一套路由和组件响应式布局大屏使用多列布局小屏折叠为单列卡片信息优先级移动端优先展示状态、风险、待处理动作弱化复杂表格表格适配表格在移动端使用横向滚动或卡片化摘要不另写移动端页面操作一致采纳、修改、驳回、审批等关键动作在各端保持一致3. 路由总览与页面清单系统包含以下核心页面按优先级从P0到P1排列页面路由菜单名称主要角色页面定位优先级计划驾驶舱/dashboard计划驾驶舱车间主管、计划员查看今日计划、交期风险、异常汇总和待确认事项P0工单管理列表/work-orders工单管理车间主管、班组长、计划员按状态、优先级、齐套情况筛选工单点击进入工单详情P0工单详情页/work-orders/:id工单详情车间主管、班组长、计划员聚合单个工单的计划、执行、物料、设备、质量和事件P0物料齐套页/materials/kitting物料齐套物控、仓库、班组长、主管查看齐套状态、缺料、领料、挪料和归还影响P0异常处置页/exceptions/:id异常处置车间主管、计划员、质量员查看Agent建议并执行采纳、修改、驳回或审批P0反馈记录页/feedback反馈记录主管、计划员、管理员查看人工反馈、原因沉淀和规则优化线索P1轻量预排页/scheduling/lightweight轻量预排计划员、车间主管未上 APS 场景下手动选择生产订单点击预排生成草稿调整并确认正式排程P1规则配置页/settings/rules规则配置管理员、计划员配置缺料、延期、质量、挪料审批等规则P14. 全局布局设计系统采用统一的全局布局确保在不同设备上提供一致的用户体验区域PC端移动端组件建议顶部栏展示系统名称、场景标识、当前计划版本、用户信息展示系统名称、场景标识和用户入口Layout.Header、Tag、Dropdown侧边菜单左侧固定菜单折叠为抽屉菜单Layout.Sider、Drawer、Menu内容区最大宽度自适应支持多列卡片单列卡片流Grid、Row、Col、Card指标卡片区PC端按2-5列紧凑展示不因预览面板较窄就过早变成单列手机端单列展示保证阅读顺序Card、Statistic、Row、Col筛选区下拉选择项横向紧凑排列按宽度自动换行不允许单个选择项无故独占整行窄屏折叠为单列或筛选抽屉Form、Select、DatePicker、Row、Col子页面表单按钮打开的详情页、抽屉和弹窗在PC端优先使用两列紧凑表单长文本和说明类字段可独占整行移动端单列展示避免横向挤压Drawer、Modal、Form、Grid全局提醒顶部消息、右侧通知列表顶部消息、底部动作入口Alert、Notification、Badge操作确认弹窗或抽屉底部抽屉优先Modal、Drawer、Form5. 核心页面设计详解5.1 计划驾驶舱/dashboard页面目标让主管和计划员在一个页面看到今日计划是否能执行、哪些工单有风险、哪些异常需要确认。页面结构区块内容组件建议数据接口优先级顶部筛选日期、车间、产线、计划来源、APS版本DatePicker、Select、SegmentedGET /api/v1/dashboard/summaryP0指标卡片今日工单、已开工、已完工、延期风险、待确认异常Card、StatisticGET /api/v1/dashboard/summaryP0计划执行概览按工单状态展示计划进度Progress、TableGET /api/v1/work-ordersP0异常风险列表异常类型、影响工单、影响等级、建议动作Table、Tag、ButtonGET /api/v1/exceptionsP0待确认事项重排建议、挪料审批、暂停恢复、质量暂停List、Badge、ButtonGET /api/v1/approval-tasksP0场景说明未上APS/已有APS处理路径说明AlertGET /api/v1/system/scenarioP1响应式要求≥1200px指标卡片5列风险列表和待确认事项左右布局768px-1199px指标卡片2-3列列表上下布局768px指标卡片单列或双列异常表格改为摘要卡片筛选项折叠5.2 工单管理列表/work-orders页面目标提供工单的统一浏览和筛选入口支撑主管和计划员快速定位需要关注的工单点击进入工单详情。页面结构区块内容组件建议数据接口优先级筛选区工单状态、优先级、齐套状态、产线、计划日期Form、Select、DatePickerGET /api/v1/work-ordersP0工单列表工单号、订单号、产品、工序、状态、优先级、计划时段、齐套状态、偏差Table、Tag、ButtonGET /api/v1/work-ordersP0状态统计待开工、执行中、执行风险、已暂停、已完工数量汇总Card、StatisticGET /api/v1/work-orders/summaryP1响应式要求PC端表格保留完整列移动端优先展示工单号、状态、齐套、偏差、操作其他字段折叠到详情抽屉。5.3 工单详情页/work-orders/:id页面目标把单个工单的计划、执行、物料、设备、质量、现场事件放在一个页面支撑主管快速判断工单是否能继续执行。页面结构区块内容组件建议数据接口优先级工单头部工单号、订单号、产品、工序、状态、优先级Descriptions、TagGET /api/v1/work-orders/{id}P0排产信息绑定来源、设备机台、工作小组、计划时段、绑定校验说明Card、Descriptions、ButtonGET /api/v1/work-orders/{id}/scheduleP0计划与实际计划开始、计划结束、实际开始、实际结束、偏差分钟Timeline、ProgressGET /api/v1/work-orders/{id}/executionP0综合状态卡物料齐套、设备可用、质量状态、异常数量Card、Badge多接口聚合P0物料需求需求数量、已领数量、缺口、齐套状态TableGET /api/v1/work-orders/{id}/materialsP0设备状态当前设备、设备状态、维修窗口、降速情况DescriptionsGET /api/v1/equipment/{id}/statusP0质量记录不良率、批次异常、返工数量、暂停建议TableGET /api/v1/work-orders/{id}/quality-eventsP1现场事件领料、挪料、归还、暂停、恢复、故障、返工TimelineGET /api/v1/work-orders/{id}/eventsP0响应式要求PC端使用左右布局左侧基础信息与执行进度右侧状态卡和事件时间线。移动端按状态摘要、关键动作、详情区块、事件时间线顺序单列展示。6. 总结本文详细介绍了生产车间多智能体系统的前端原型UI设计涵盖了从设计原则、路由总览到核心页面的完整设计方案。通过统一的响应式布局和组件化设计系统能够在不同设备上为车间主管、计划员、班组长等角色提供一致且高效的操作体验。后续篇章将继续深入探讨系统的后端实现、Agent调度算法和实际部署案例。