ToB CRM 低代码平台前端组件库与可视化编辑器研发
- 晓行科技CRM服务中小商家,原定制化依赖代码开发(周期7天/页面),非技术人员无法参与。我的任务是搭建低代码前端基础能力——可配置组件库与可视化编辑器,目标将定制周期缩至1天内,支撑业务人员自主生成表单、列表等页面。
- 项目难点:1)传统组件库缺乏配置能力,无法满足动态业务需求;2)拖拽编辑器延迟达150ms,元素易重叠;3)多租户场景下样式与逻辑冲突。我基于Ant Design二次封装,设计“配置化组件模型”(暴露`required`/`rules`/`dataSource`等属性);用React DnD实现拖拽,结合SVG网格系统(1px精度)+防抖优化流畅度;采用“Shadow DOM+租户ID前缀”做样式隔离,用Namespace隔离JS逻辑避免冲突。
- 我主导15场业务人员访谈,梳理出10个高频组件(表单/列表/弹窗)的配置项;针对拖拽延迟,测试多种方案后用React DnD+requestAnimationFrame将延迟降至30ms内;租户隔离方案对比Shadow DOM与CSS Scoped后,选择前者确保隔离彻底性。过程中,我还设计了“组件配置校验规则”,避免业务人员误操作导致页面错误。
- 组件库覆盖80%CRM常见页面需求,编辑器上线后定制周期从7天缩至1天,非技术人员参与率提至60%,支撑20+客户个性化需求(如某美妆客户自行调整表单3次无需开发)。该平台成为公司核心卖点,带动15%新客户签约,我也因组件库设计能力获得当年“优秀员工”。