企业后台与审批流

组件库管理系统

基于 Next.js App Router 与 NestJS BFF 的组件库管理中台，覆盖 SSR、权限系统、组件资产管理和复杂后台交互。

技术栈

Next.js App RouterReact 18TypeScriptAnt DesignRedux ToolkitNestJS BFF

素材与示意

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

cover

当前没有公开截图，这里先保留结构，后面再补图。

背景

问题背景

项目同时要处理 SSR、业务组件复用、动态权限、多租户和中台类复杂列表交互。难点不只是技术栈切换，而是要让数据、权限和页面状态在后台场景里长期稳定运行。

参与 Next.js App Router 管理中台整体开发与页面交互实现

二次封装通用业务组件并建设文档站，沉淀团队复用资产

设计 RBAC 动态权限与多租户细粒度控制模型

通过 RTK Query 和性能优化策略降低首屏和列表压力

拆解

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

问题

前端如果直接对接多后端服务，鉴权、字段转换和数据拼装会散在各个页面里，权限策略也很难统一管理。

方案

我用 NestJS BFF 做接口聚合和数据转换，前端围绕权限模型、页面状态和组件复用来组织逻辑。

结果

减少了前端直接拼装多服务接口的分散问题，权限控制和页面状态也更容易统一收口。

问题

后台系统页面类型高度重复，如果没有一层业务组件沉淀，团队会不断重复搭列表、搜索、权限和树形选择交互。

方案

我封装高级搜索、数据表格、权限按钮、树形选择器等业务组件，并配合文档站沉淀使用方式。

结果

团队复用率达到 80%，新页面搭建时间明显缩短，后续改动也不需要每个页面重复修。