之家中后台前端解决方案 - 支点2.0

前言

去年9月份在组织架构变动后我被划分到了前端应用架构组，手里负责的工作也随之变动，之前负责C端业务陆续交接出去，新接手了一些中台类，基建类的项目，其中就包括《支点2.0》的建设。简述一下，支点是之家 23 年启动的基建计划项目之一（当时本人还没来），旨在提升开发效率，降低人力成本，1.0 版本上线推广运行了近一年，发现了诸多问题，下面会写到。我参与到支点建设中去后随即发起了支点2.0 的升级，参与了前期用户调研，发掘使用痛点，功能缺失，以及更多的提效点，中期和几位高 P 进行技术调研，需求评审，到后期功能开发，上线推广整个生命周期。

背景

随着团队业务调整我们即将承接大量的中后台业务需求，这些系统由不同业务线的同学开发和维护，存在交互风格不一致技术架构各异的情况。随着业务体量和业务复杂度的不断增大，如何保证业务快速且高质量交付是我们面临的技术挑战。

目标

定性目标 ：提供一整套平台技术解决方案，确保平台建设的易用性、可扩展性，进而提高平台类产品研发效率
定量目标 ：非前端开发同学可 100% 完成技术平台的建设技术平台的前端单页面开发可在 1 小时内完成，非技术平台的前端单页面开发可在 2 小时内完成
目标人群 前端开发人员，服务端开发人员

基本原则

高效化、高质化、高可维护性
基于 React 技术栈
不造轮子，应用开源社区优秀组件
高用户满意度
风格统一

现状分析

用户调研

结论先行：确认支点组件库的适用性不足以支撑业务的全面发展，需要通过丰富组件库、提升易用性来改善。

24 年 9 月调研了瞭望者前端与后端研发总结如下：根据与后端和前端研发同学的调研反馈，当前支点框架在实际使用中暴露了一些问题，主要体现在以下几个方面：

后端团队反馈

组件样式和风格统一性问题： 后端同学希望在使用过程中能够更灵活地自定义组件样式，同时保持整体风格的统一性，避免在定制过程中破坏视觉一致性。
业务组件功能缺失： 部分业务场景下存在组件缺失的情况，具体表现为：
组件缺失： 包括图表组件、数据展示模块和筛选控件等，无法满足复杂业务需求。基础组件的学习成本：虽然基础 UI 组件已存在，但需要额外配置，部分后端人员对这些组件不熟悉，导致使用时存在一定的学习门槛。

前端团队反馈

技术选型： 前端开发人员对框架中部分技术选型（如请求库、图表库等）感到不熟悉，认为与自身常用的库存在差异，增加了学习和使用成本。

改进方案

升级底层框架

依赖库版本陈旧，部分版本报警告存在安全隐患。 Vite 5.0 带来诸多新功能和构建效率的提升，但需要对框架多处使用方法做调整。

升级基础设施

升级 SSO 登录方案，接入更便捷
升级权限管理方案，实现一套支点的权限管理系统【规划中】
路由使用方式改造，更便捷
配合底层框架升级，上层功能调整
更换数据请求类库到 Axios

支点组件库开发

构建大型组建开发脚手架，统一开发规范。开发缺失业务组件，提升支点组件覆盖度。

重建支点文档站

目录结构调整增强新手引导、缺失文档编写。

建设页面模板站点

提供类型齐全的业务场景，将具有典型特性的场景提取出来，用户可以将页面当成模版，简单的复制和修改就能够快速的搭建一个页面。

整体架构图

技术选型



底层框架	支点采用 React 技术栈，并搭配 Ant Design 作为基础组件库，Vite 作为开发脚手架，组成支点底层功能框架。
基础设施	在此基础提供模板布局、权限管理、SSO 登录、数据管理、埋点方式、mock 数据等多个基础设施构建基础框架。
业务组件	上层业务组件提供社区优秀解决方案与支点定制业务组建，proComponet 高级组件库、AntV 图表库、音视频上传组件等。
开发部署	支点提供了打包优化方案以及之家云部署流程。

升级可视化搭建

提供一整套平台技术解决方案，确保平台建设的易用性、可扩展性，进而提高平台类产品研发效率

目标

可视化配置和 AIGC 方案将单页面全流程开发时间可在 2 小时内完成
可视化覆盖 60% 的场景

方案

通过可视化配置方案，将 CRUD、图表、表单场景开发流程时间压缩到1小时内完成。对 30 个项目 200+ 页面的统计，以及多个后端维护项目的调研 CRUD、图表、表单场景占比 60% 。

落地

总结

支点2.0（中后台前端框架）

统一框架与工具链： 支点提供了一套统一的开发框架和工具链，减少了各个项目之间环境配置的不一致性。这种统一性不仅提升了开发效率，还增强了系统的一致性。
常用功能模块复用： 支点内置了常用功能模块，如权限管理和数据展示等，这些模块可以被多个项目复用，减少了重复开发工作量。
提高协作效率： 通过共享框架和模块，各小组之间可以更高效地协作，快速实现功能集成，从而加快项目交付速度。