# 后台管理系统基础框架库 / UI 组件库 / 图表库收藏清单 > 目标：后续做后台管理系统时，优先选择可组合、可长期维护的基础库，而不是 admin template / Pro 脚手架 / 一站式整合版。 > 当前原则：只记录与分类，不安装、不初始化项目、不创建 Git 仓库。 --- ## 0. 选型口径 用户明确要求：**不要整合版，没必要；要基础框架库。** 因此本清单只保留这些类型： - UI 组件库：表格、表单、弹窗、菜单、布局、主题。 - 表格 / 数据网格库：复杂列表、筛选、排序、分页、虚拟滚动。 - 表单库：复杂表单、校验、联动。 - 状态 / 请求库：服务端状态、缓存、请求生命周期。 - 图表 / 可视化库：Dashboard、趋势图、地图、关系图。 - 少量动效增强：只用于局部体验，不作为主框架。 不作为主推荐： - Ant Design Pro - Arco Design Pro - Soybean Admin - vue-vben-admin - Fantastic Admin - vue-pure-admin - 其他 admin template / starter / dashboard template 这些整合版可以作为“看布局和功能参考”，但不作为技术底座。 --- ## 1. React 基础 UI 组件库 ### Ant Design - GitHub: https://github.com/ant-design/ant-design - 定位：企业级 React UI 组件库。 - 优点：表格、表单、弹窗、布局、菜单、树、上传等后台组件非常完整。 - 适合：复杂业务后台、表格表单密集系统。 - 注意：默认视觉偏传统，需要主题定制。 - 推荐度：★★★★★ ### MUI / Material UI - GitHub: https://github.com/mui/material-ui - 定位：React Material Design 组件库。 - 优点：和 Muse UI 的审美源头接近，生态成熟。 - 适合：喜欢 Material 风格的后台、跨平台感产品、工具型系统。 - 注意：高级 Data Grid 属于 MUI X 体系，注意 license。 - 推荐度：★★★★★ ### Semi Design - GitHub: https://github.com/DouyinFE/semi-design - 定位：字节系 React 设计系统和 UI 组件库。 - 优点：视觉更年轻，Design Token 完整，适合做不那么传统的后台。 - 适合：工具型后台、内容平台、AI 管理端、年轻化 B 端产品。 - 推荐度：★★★★☆ ### Arco Design React - GitHub: https://github.com/arco-design/arco-design - 定位：字节系综合 React UI 组件库。 - 优点：中后台组件完整，视觉比传统 AntD 默认风格年轻。 - 适合：中后台、配置平台、运营工具。 - 推荐度：★★★★☆ ### Mantine - GitHub: https://github.com/mantinedev/mantine - 定位：现代 React 组件库。 - 优点：组件完整、主题系统好、开发体验舒服。 - 适合：自定义后台、内部工具、轻量 SaaS 管理端。 - 注意：企业后台常见的复杂表格能力需要另配 TanStack Table 等。 - 推荐度：★★★★☆ ### TDesign React - GitHub: https://github.com/Tencent/tdesign-react - 定位：腾讯系 React UI 组件库。 - 优点：企业级规范化，组件覆盖后台场景。 - 适合：规范化管理端、企业内部系统。 - 推荐度：★★★☆☆ ### PrimeReact - GitHub: https://github.com/primefaces/primereact - 定位：React 组件库，组件非常全。 - 优点：DataTable、表单和企业组件丰富。 - 适合：复杂后台、表格需求重的系统。 - 注意：默认风格需要定制，否则容易有模板感。 - 推荐度：★★★☆☆ ### HeroUI - GitHub: https://github.com/heroui-inc/heroui - 定位：现代 React UI 组件库，原 NextUI。 - 优点：视觉现代，比传统后台库更轻更漂亮。 - 适合：不太复杂的管理端、AI 工具后台、SaaS 控制台。 - 注意：如果是重表格/重表单后台，可能不如 AntD / MUI / PrimeReact 完整。 - 推荐度：★★★☆☆ --- ## 2. Vue 基础 UI 组件库 ### Naive UI - GitHub: https://github.com/tusen-ai/naive-ui - 定位：Vue 3 / TypeScript 组件库。 - 优点：主题能力强，暗色模式好，组件完整，视觉相对现代。 - 适合：想要比 Element Plus 更轻、更现代的 Vue 后台。 - 推荐度：★★★★★ ### Element Plus - GitHub: https://github.com/element-plus/element-plus - 定位：Vue 3 经典企业级组件库。 - 优点：生态大、资料多、后台常见组件完整。 - 适合：传统业务后台、CRUD、多人协作。 - 注意：默认风格偏传统，需要主题和布局设计。 - 推荐度：★★★★☆ ### Arco Design Vue - GitHub: https://github.com/arco-design/arco-design-vue - 定位：Vue 3 版 Arco Design。 - 优点：中后台组件完整，视觉较年轻。 - 适合：Vue 管理端、工具平台、运营后台。 - 推荐度：★★★★☆ ### TDesign Vue Next - GitHub: https://github.com/Tencent/tdesign-vue-next - 定位：腾讯系 Vue 3 UI 组件库。 - 优点：企业级组件，规范化程度高。 - 适合：复杂表单、规范化后台、内部系统。 - 推荐度：★★★★☆ ### PrimeVue - GitHub: https://github.com/primefaces/primevue - 定位：Vue 组件库，组件覆盖非常全。 - 优点：DataTable 和企业组件丰富，主题多。 - 适合：复杂后台、数据密集型系统。 - 推荐度：★★★★☆ ### Vuetify - GitHub: https://github.com/vuetifyjs/vuetify - 定位：Vue Material Design 组件框架。 - 优点：Material 风格，和 Muse UI 审美源头接近。 - 适合：Material 风格后台、工具系统、跨平台感产品。 - 推荐度：★★★★☆ ### Varlet - GitHub: https://github.com/varletjs/varlet - 定位：Vue 3 + Material Design 2/3，支持移动端和桌面。 - 优点：更接近 Muse UI 的 Material 感。 - 适合：轻量后台、移动端管理界面、Material 风格工具。 - 注意：重型企业后台能力可能不如 Naive UI / Element Plus / PrimeVue。 - 推荐度：★★★☆☆ ### Ant Design Vue - GitHub: https://github.com/vueComponent/ant-design-vue - 定位：Ant Design 的 Vue 实现。 - 优点：企业后台组件完整，AntD 体系熟悉。 - 适合：Vue 企业后台、复杂表单表格。 - 注意：默认审美偏传统。 - 推荐度：★★★★☆ --- ## 3. 表格 / 数据网格基础库 ### TanStack Table - GitHub: https://github.com/TanStack/table - 适用：React / Vue / Solid / Svelte 等。 - 定位：Headless table library。 - 优点：灵活、可自定义 UI，不绑定具体设计系统。 - 适合：想自己控制后台表格视觉和交互的项目。 - 推荐度：★★★★★ ### vxe-table - GitHub: https://github.com/x-extends/vxe-table - 适用：Vue。 - 定位：强大的 Vue 表格 / Grid。 - 优点：复杂表格、编辑表格、虚拟滚动、树表等能力强。 - 适合：数据密集型 Vue 后台。 - 推荐度：★★★★☆ ### MUI X Data Grid - GitHub: https://github.com/mui/mui-x - 适用：React / MUI。 - 定位：MUI 的高级数据网格。 - 优点：和 MUI 集成好。 - 注意：高级能力有商业授权边界。 - 推荐度：★★★★☆ ### Ant Design Table / ProTable - GitHub: https://github.com/ant-design/ant-design - ProComponents: https://github.com/ant-design/pro-components - 适用：React / Ant Design。 - 定位：后台常用表格能力。 - 优点：业务后台上手快。 - 注意：ProComponents 属于增强组件，不等同于 Ant Design Pro 脚手架。 - 推荐度：★★★★☆ --- ## 4. 表单基础库 ### React Hook Form - GitHub: https://github.com/react-hook-form/react-hook-form - 适用：React。 - 优点：性能好、生态大，适合复杂表单。 - 推荐度：★★★★★ ### Formik - GitHub: https://github.com/jaredpalmer/formik - 适用：React。 - 优点：经典稳定。 - 注意：新项目可优先看 React Hook Form。 - 推荐度：★★★☆☆ ### VeeValidate - GitHub: https://github.com/logaretm/vee-validate - 适用：Vue。 - 优点：Vue 表单校验成熟方案。 - 推荐度：★★★★☆ ### FormKit - GitHub: https://github.com/formkit/formkit - 适用：Vue。 - 优点：表单构建能力强，适合复杂表单。 - 推荐度：★★★★☆ --- ## 5. 状态 / 请求 / 工程基础库 ### TanStack Query - GitHub: https://github.com/TanStack/query - 适用：React / Vue / Solid / Svelte 等。 - 定位：服务端状态、请求缓存、异步数据管理。 - 适合：后台系统的数据请求层。 - 推荐度：★★★★★ ### SWR - GitHub: https://github.com/vercel/swr - 适用：React。 - 定位：数据请求 hooks。 - 适合：Next.js / React 中轻量数据请求。 - 推荐度：★★★★☆ ### Zustand - GitHub: https://github.com/pmndrs/zustand - 适用：React。 - 定位：轻量客户端状态管理。 - 推荐度：★★★★☆ ### Pinia - GitHub: https://github.com/vuejs/pinia - 适用：Vue。 - 定位：Vue 官方推荐状态管理。 - 推荐度：★★★★★ ### VueUse - GitHub: https://github.com/vueuse/vueuse - 适用：Vue。 - 定位：Vue composables 工具集。 - 适合：后台里大量交互状态、浏览器能力封装。 - 推荐度：★★★★★ --- ## 6. 图表 / 可视化基础库 ### Apache ECharts - GitHub: https://github.com/apache/echarts - 定位：通用图表和数据可视化库。 - 适合：Dashboard、趋势图、地图、复杂可视化。 - 推荐度：★★★★★ ### vue-echarts - GitHub: https://github.com/ecomfe/vue-echarts - 定位：Vue 里的 ECharts 组件。 - 推荐度：★★★★★ ### Nivo - GitHub: https://github.com/plouc/nivo - 适用：React。 - 定位：React + D3 的漂亮图表组件。 - 适合：更注重视觉美感的 React Dashboard。 - 推荐度：★★★★☆ ### Recharts - GitHub: https://github.com/recharts/recharts - 适用：React。 - 定位：React 常用图表库。 - 适合：常规 Dashboard 快速开发。 - 推荐度：★★★★☆ ### ApexCharts - GitHub: https://github.com/apexcharts/apexcharts.js - 适用：React / Vue / JS。 - 定位：SVG 交互图表。 - 适合：SaaS Dashboard、趋势图、指标图。 - 推荐度：★★★★☆ ### visx - GitHub: https://github.com/airbnb/visx - 适用：React。 - 定位：底层可视化组件。 - 适合：高度自定义、设计感强的图表。 - 推荐度：★★★★☆ ### AntV G2 / G6 / S2 - G2: https://github.com/antvis/G2 - G6: https://github.com/antvis/G6 - S2: https://github.com/antvis/S2 - 定位：商业可视化、关系图、多维分析表格。 - 适合：复杂数据分析、关系网络、透视表。 - 推荐度：★★★★☆ --- ## 7. 局部动效增强，不作为主框架 ### React Bits - GitHub: https://github.com/DavidHDev/react-bits - 适合：登录页、欢迎页、空状态、AI 功能入口、Dashboard 重点视觉区。 - 不适合：表格、表单、权限、菜单、业务 CRUD 主体。 ### nyxb-ui - GitHub: https://github.com/nyxb-ui/ui - 适合：React 后台里的局部现代组件、动效卡片、AI 风格入口。 - 不适合：后台主框架。 ### Auto Animate - GitHub: https://github.com/formkit/auto-animate - 适合：列表、卡片、布局变化的轻量动画。 ### Number Flow - GitHub: https://github.com/barvian/number-flow - 适合：Dashboard 指标数字滚动。 --- ## 8. 推荐组合：基础库版本 ### React：重业务后台，稳妥型 ```text Ant Design + TanStack Query + React Hook Form / AntD Form + ECharts / Recharts ``` 适合：复杂表格、表单、权限、CRUD。 ### React：Material / Muse UI 审美接近 ```text MUI + TanStack Query + React Hook Form + MUI X Data Grid / TanStack Table + ECharts / Nivo ``` 适合：Material 风格后台、工具型系统。 ### React：更年轻一点 ```text Semi Design / Arco Design + TanStack Query + ECharts / AntV ``` 适合：不想要传统 AntD 默认风格的管理端。 ### React：自定义设计感更强 ```text Mantine + TanStack Table + TanStack Query + React Hook Form + visx / Nivo ``` 适合：想自己控制视觉系统的后台。 ### Vue：现代好看型 ```text Naive UI + Pinia + VueUse + Vue Query / TanStack Query + ECharts / vue-echarts ``` 适合：希望 Vue 后台不太传统、暗色模式好、主题好调。 ### Vue：稳妥生态型 ```text Element Plus + Pinia + VueUse + ECharts / vue-echarts ``` 适合：传统业务后台、团队熟悉度高。 ### Vue：Material / Muse UI 接近 ```text Vuetify / Varlet + Pinia + VueUse + ECharts ``` 适合：喜欢 Material Design 的后台或轻量管理端。 ### Vue：复杂表格型 ```text Naive UI / Element Plus + vxe-table + Pinia + ECharts ``` 适合：数据密集、表格编辑、复杂筛选。 --- ## 9. 当前优先短名单 如果后续要从基础框架库里选，不看整合模板，优先收藏这些： ### React 1. Ant Design https://github.com/ant-design/ant-design 2. MUI https://github.com/mui/material-ui 3. Semi Design https://github.com/DouyinFE/semi-design 4. Arco Design React https://github.com/arco-design/arco-design 5. Mantine https://github.com/mantinedev/mantine 6. TanStack Table https://github.com/TanStack/table 7. TanStack Query https://github.com/TanStack/query ### Vue 1. Naive UI https://github.com/tusen-ai/naive-ui 2. Element Plus https://github.com/element-plus/element-plus 3. Arco Design Vue https://github.com/arco-design/arco-design-vue 4. TDesign Vue Next https://github.com/Tencent/tdesign-vue-next 5. PrimeVue https://github.com/primefaces/primevue 6. Vuetify https://github.com/vuetifyjs/vuetify 7. vxe-table https://github.com/x-extends/vxe-table ### 图表 1. ECharts https://github.com/apache/echarts 2. vue-echarts https://github.com/ecomfe/vue-echarts 3. Nivo https://github.com/plouc/nivo 4. Recharts https://github.com/recharts/recharts 5. ApexCharts https://github.com/apexcharts/apexcharts.js 6. AntV G2 / G6 / S2 https://github.com/antvis/G2 https://github.com/antvis/G6 https://github.com/antvis/S2 --- ## 10. 结论 - 不再把 admin template / Pro 整合版作为主推荐。 - 后台系统基础库优先级：UI 组件库 > 表格/表单 > 请求状态 > 图表 > 局部动效。 - React 如果要 Material / Muse UI 感：优先 `MUI`。 - Vue 如果要 Muse UI / Material 感：优先 `Vuetify` 或 `Varlet`。 - Vue 如果要现代好看且适合后台：优先 `Naive UI`。 - React 如果要后台稳妥：优先 `Ant Design`；如果要年轻一点看 `Semi Design / Arco Design`。 - React Bits 和 nyxb-ui 继续收藏，但仅用于局部视觉增强。