企业后台与审批流

智能工单调度平台

围绕工单全生命周期、审批流、看板协作和实时同步构建的复杂业务平台，重点解决状态流转复杂、角色多、实时反馈要求高的问题。

技术栈

React 18TypeScriptZustandAnt Design ProEChartsWebSocket

素材与示意

没有完整截图的项目，会先用结构化占位保证阅读不断档。

gallery

后续适合补 Kanban、审批流和图表截图。

背景

问题背景

工单创建、分配、执行、验收、归档涉及多角色参与、审批链长、状态转换复杂、实时性要求高。用传统 CRUD 思路硬堆页面，很快就会出现状态分散、规则难改和协同体验割裂的问题。

负责工单全生命周期的前端交互设计与页面实现

封装 Zustand + Hook 的状态管理方案，统一工单流转入口

实现 Kanban 看板、审批流视图和图表数据看板

通过 WebSocket 处理实时更新、状态同步和多人协作反馈

拆解

下面按问题、方案和结果来写，方便直接看我在项目里做了什么。

问题

工单会跨多个页面、多个角色和多个阶段流转。如果状态定义松散，页面各自维护一套逻辑，后续流程调整几乎每次都要改一大片。

方案

我用 Zustand + 自定义 Hook 抽象统一状态入口，把流转规则和关键业务判断收进可复用逻辑层，而不是散在页面组件里。

结果

页面层逻辑明显收敛，后续流程调整和角色变更时不会反复牵一发动全身。

问题

业务方既要实时看到工单处理进度，也要快速判断效率、堆积和热点问题。只做列表录入满足不了管理和调度场景。

方案

我用 WebSocket 推送关键状态变更，再结合 ECharts 构建趋势、热力和效率视图，把实时处理和经营视角放到同一套界面里。

结果

系统不只是录入工具，业务方可以直接在平台里看处理进度、趋势变化和效率表现。