智能工单协作平台产品系统

面向售后支持和内部运维团队的工单协作平台，支持工单创建、流转审批、IM 评论、附件上传、数据检索和 SLA 看板。项目重点在于多角色权限、长列表性能、实时状态同步和复杂状态管理。

技术栈
React、TypeScript、Vite、React Router、Redux Toolkit、Ant Design、React Query、Axios、WebSocket、react-window
负责基于 React 的智能工单协作平台前端开发，覆盖工单列表、详情流转、附件上传、评论协作和 SLA 数据看板等模块。重点解决复杂状态管理、实时协作、权限控制和长列表渲染性能问题，提升中后台业务系统的稳定性与可维护性。

负责工单列表页、工单详情页、审批流转页和统计看板页开发。
基于 Redux Toolkit 设计全局状态管理方案，统一管理用户信息、筛选条件、工单详情缓存和全局消息状态。
基于 React Query 管理服务端状态，处理列表缓存、详情预取、失效刷新和请求去重。
封装工单权限模型，支持客服、组长、管理员、审计员等不同角色的页面和操作差异。
负责长列表、附件上传、实时评论等复杂交互场景的性能优化与稳定性处理。
核心解决方案
1. 复杂权限模型
不同角色不仅能看到不同菜单，还会在同一页面中拥有不同操作权限，例如指派、关闭、升级、导出、撤回。
将权限点抽象为 action code，并统一注入到页面配置和操作栏渲染逻辑中。
对工单状态和角色做组合判断，例如“待审核 + 组长角色”才能审批，“已关闭”状态下只允许管理员重新打开。
这种实现方式比单纯 if else 分散写在组件里更容易维护，也便于新增角色和状态流转规则。
2. 长列表与检索性能优化
工单列表支持高频筛选、排序、分页和关键词搜索，数据量较大时容易出现渲染和请求双重压力。
使用 react-window 优化长列表渲染，控制 DOM 节点规模。
对搜索输入和筛选条件变更增加防抖处理，并结合 React Query 做请求缓存与取消重复请求。
对详情页采用数据预取，用户从列表进入详情时可以更快看到核心内容。
3. 实时协作与状态一致性
评论区和工单状态流转通过 WebSocket 接收实时消息，保证多人协作时页面信息同步。
对消息做类型拆分和去重处理，避免重复推送导致页面重复插入评论或状态闪动。
页面切换或组件卸载时及时清理订阅，防止连接泄漏和无效渲染。