之家中后台前端解决方案 - 支点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% 的场景
核心功能
| 功能 | 内容 |
|---|---|
| 创建路由 | 1.可视化路由创建和编辑 2. 路由层级结构展示 3.路由排序功能 |
| 选择页面模版 | 加载模板库 模板预览（鼠标经过放大）和选择 |
| 代码生成 | 1.生成路由配置 2.创建页面路径并生成页面代码 3.安装依赖包 |
基于 node 来实现本地项目文件操作能力
效果展示
通过可视化配置方案，将 CRUD、图表、表单 场景开发流程时间压缩到1小时内完成。对 30 个项目 200+ 页面的统计，以及多个后端维护项目的调研 CRUD、图表、表单场景占比 60% 。
支持 30+ 模板，覆盖 60% 业务范围
落地
总结
支点2.0（中后台前端框架）
- 统一框架与工具链： 支点提供了一套统一的开发框架和工具链，减少了各个项目之间环境配置的不一致性。这种统一性不仅提升了开发效率，还增强了系统的一致性。
- 常用功能模块复用： 支点内置了常用功能模块，如权限管理和数据展示等，这些模块可以被多个项目复用，减少了重复开发工作量。
- 提高协作效率： 通过共享框架和模块，各小组之间可以更高效地协作，快速实现功能集成，从而加快项目交付速度。
