{"id":13793610,"url":"https://github.com/yezihaohao/react-admin","last_synced_at":"2025-05-14T10:00:28.037Z","repository":{"id":38361119,"uuid":"88002645","full_name":"yezihaohao/react-admin","owner":"yezihaohao","description":":sparkles: react-admin system solution : react 后台管理系统解决方案","archived":false,"fork":false,"pushed_at":"2022-05-16T17:39:14.000Z","size":4489,"stargazers_count":6701,"open_issues_count":20,"forks_count":1875,"subscribers_count":217,"default_branch":"master","last_synced_at":"2025-04-03T23:48:23.366Z","etag":null,"topics":["admin-template","ant-design","antd","html","javascript","react","react-admin"],"latest_commit_sha":null,"homepage":"https://admiring-dijkstra-34cb29.netlify.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yezihaohao.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-12T02:50:56.000Z","updated_at":"2025-04-02T16:56:16.000Z","dependencies_parsed_at":"2022-08-09T03:15:27.736Z","dependency_job_id":null,"html_url":"https://github.com/yezihaohao/react-admin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezihaohao%2Freact-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezihaohao%2Freact-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezihaohao%2Freact-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezihaohao%2Freact-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yezihaohao","download_url":"https://codeload.github.com/yezihaohao/react-admin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248335219,"owners_count":21086538,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin-template","ant-design","antd","html","javascript","react","react-admin"],"created_at":"2024-08-03T23:00:26.864Z","updated_at":"2025-04-11T03:29:27.773Z","avatar_url":"https://github.com/yezihaohao.png","language":"TypeScript","funding_links":[],"categories":["前端开发框架及项目","目录","TypeScript"],"sub_categories":["管理面板","\u003ca id=\"project\"\u003e项目\u003c/a\u003e"],"readme":"# react-admin([尝试一下在线编辑](https://codesandbox.io/s/react-admin-u9kdb))\n\nreact-admin system solution\n\n\u003cimg src=\"https://raw.githubusercontent.com/yezihaohao/react-admin/master/screenshots/logo.png\" alt=\"logo\" width=\"150\" height=\"53\" /\u003e\n\n![travis-ci](https://travis-ci.org/yezihaohao/react-admin.svg?branch=master)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n\u003c!-- ### 🔥🔥🔥 默认主分支切换成 TypeScript 开发，如果你希望继续使用 JS 开发，请使用[JS](https://github.com/yezihaohao/react-admin/tree/js)分支代码(继续维护) --\u003e\n\n### 文档地址：[wiki](https://github.com/yezihaohao/react-admin/wiki)\n\n### 问题和方案汇总：[issue](https://github.com/yezihaohao/react-admin/issues/12)\n\n### 更新日志迁移至[CHANGELOG.md](https://github.com/yezihaohao/react-admin/blob/master/CHANGELOG.md)😁(重要！对于了解项目部分功能和代码很有用！)\n\n### cli 安装和使用 react-admin 🔥\n\n使用 [saigao](https://github.com/yezihaohao/saigao) 快速安装和下载 react-admin 模板来开发项目：\n\n```js\nnpm i -g saigao\n\nsaigao myapp\n// 或者使用npx 下载模板\nnpx saigao myapp\n```\n\n### 前言\n\n\u003e 网上 react 后台管理开源免费的完整版项目比较少，所以利用空余时间集成了一个版本出来，已放到 GitHub\n\u003e 启动和打包的时间都稍长，请耐心等待两分钟\n\n-   [GitHub 地址](https://github.com/yezihaohao/react-admin)\n-   [预览地址](https://admiring-dijkstra-34cb29.netlify.com)(已增加响应式，可手机预览 😄)\n\n### 依赖模块\n\n\u003cspan style=\"color: rgb(184,49,47);\"\u003e项目是用 create-react-app 创建的，主要还是列出新加的功能依赖包\u003c/span\u003e\n\n\u003cspan style=\"color: rgb(184,49,47);\"\u003e点击名称可跳转相关网站 😄😄\u003c/span\u003e\n\n-   [react](https://facebook.github.io/react/)\n-   [react-router](https://react-guide.github.io/react-router-cn/)(\u003cspan style=\"color: rgb(243,121,52);\"\u003ereact 路由，4.x 的版本，如果还使用 3.x 的版本，请切换分支（ps:分支不再维护）\u003c/span\u003e)\n-   [redux](https://redux.js.org/)(基础用法，但是封装了通用 action 和 reducer，demo 中主要用于权限控制（ps：目前可以用 16.x 的 context api 代替），可以简单了解下)\n-   [antd](https://ant.design/index-cn)(\u003cspan style=\"color: rgb(243,121,52);\"\u003e蚂蚁金服开源的 react ui 组件框架\u003c/span\u003e)\n-   [axios](https://github.com/mzabriskie/axios)(\u003cspan style=\"color: rgb(243,121,52);\"\u003ehttp 请求模块，可用于前端任何场景，很强大 👍\u003c/span\u003e)\n-   [echarts-for-react](https://github.com/hustcc/echarts-for-react)(\u003cspan style=\"color: rgb(243,121,52);\"\u003e可视化图表，别人基于 react 对 echarts 的封装，足够用了\u003c/span\u003e)\n-   [recharts](http://recharts.org/#/zh-CN/)(\u003cspan style=\"color: rgb(243,121,52);\"\u003e另一个基于 react 封装的图表，个人觉得是没有 echarts 好用\u003c/span\u003e)\n-   [nprogress](https://github.com/rstacruz/nprogress)(\u003cspan style=\"color: rgb(243,121,52);\"\u003e顶部加载条，蛮好用 👍\u003c/span\u003e)\n-   [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg)(\u003cspan style=\"color: rgb(243,121,52);\"\u003e别人基于 react 的富文本封装，如果找到其他更好的可以替换\u003c/span\u003e)\n-   [react-draggable](https://github.com/mzabriskie/react-draggable)(\u003cspan style=\"color: rgb(243,121,52);\"\u003e拖拽模块，找了个简单版的\u003c/span\u003e)\n-   [screenfull](https://github.com/sindresorhus/screenfull.js/)(\u003cspan style=\"color: rgb(243,121,52);\"\u003e全屏插件\u003c/span\u003e)\n-   [photoswipe](https://github.com/dimsemenov/photoswipe)(\u003cspan style=\"color: rgb(243,121,52);\"\u003e图片弹层查看插件，不依赖 jQuery，还是蛮好用 👍\u003c/span\u003e)\n-   [animate.css](http://daneden.me/animate)(\u003cspan style=\"color: rgb(243,121,52);\"\u003ecss 动画库\u003c/span\u003e)\n-   [react-loadable](https://github.com/jamiebuilds/react-loadable)(代码拆分，按需加载，预加载，样样都行，具体见其文档，推荐使用)\n-   [redux-alita](https://github.com/yezihaohao/redux-alita) 极简的 redux2react 工具\n-   其他小细节省略\n\n### 功能模块\n\n\u003cspan style=\"color: rgb(184,49,47);\"\u003e备注：项目只引入了 ant-design 的部分组件，其他的组件 antd 官网有源码，可以直接复制到项目中使用，后续有时间补上全部组件。\u003c/span\u003e\n\n\u003cspan style=\"color: rgb(184,49,47);\"\u003e项目使用了 antd 的自定义主题功能--\u003e黑色，若想替换其他颜色，具体操作请查看 antd 官网\u003c/span\u003e\n\n\u003c!--more--\u003e\n\n-   首页\n    -   完整布局\n    -   换肤(全局功能，暂时只实现了顶部导航的换肤，后续加上其他模块)\n-   导航菜单\n    -   顶部导航(菜单伸缩，全屏功能)\n    -   左边菜单(增加滚动条以及适配路由的 active 操作)\n-   UI 模块\n    -   按钮(antd 组件)\n    -   图标(antd 组件并增加彩色表情符)\n    -   加载中(antd 组件并增加顶部加载条)\n    -   通知提醒框(antd 组件)\n    -   标签页(antd 组件)\n    -   轮播图(ant 动效组件)\n    -   富文本\n    -   拖拽\n    -   画廊\n-   动画\n    -   基础动画(animate.css 所有动画)\n    -   动画案例\n-   表格\n    -   基础表格(antd 组件)\n    -   高级表格(antd 组件)\n    -   异步表格(数据来自掘金酱的接口)\n-   表单\n    -   基础表单(antd 组件)\n-   图表\n    -   echarts 图表\n    -   recharts 图表\n-   页面\n    -   登录页面(包括 GitHub 第三方登录)\n    -   404 页面\n\n### 功能截图\n\n#### 首页\n\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd1.gif)\n\n#### 按钮图标等\n\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd2.gif)\n\n#### 轮播图\n\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd3.gif)\n\n#### 富文本\n\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd4.gif)\n\n#### 拖拽\n\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd5.gif)\n\n#### 画廊\n\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd6.gif)\n\n#### 动画\n\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd7.gif)\n\n#### 表格\n\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd8.gif)\n\n#### 表单\n\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd9.gif)\n\n#### 图表\n\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd10.gif)\n\n#### 页面\n\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd11.gif)\n\n#### 菜单拖拽\n\n![截图](https://raw.githubusercontent.com/yezihaohao/react-admin/master/screenshots/menu_draggable.gif)\n\n### 代码目录\n\n```js\n+-- build/                                  ---打包的文件目录\n+-- config/                                 ---npm run eject 后的配置文件目录\n+-- node_modules/                           ---npm下载文件目录\n+-- public/\n|   --- index.html\t\t\t\t\t\t\t---首页入口html文件\n|   --- npm.json\t\t\t\t\t\t\t---echarts测试数据\n|   --- weibo.json\t\t\t\t\t\t\t---echarts测试数据\n+-- src/                                    ---核心代码目录\n|   +-- axios                               ---http请求存放目录\n|   |    --- index.js\n|   +-- components                          ---各式各样的组件存放目录\n|   |    +-- animation                      ---动画组件\n|   |    |    --- ...\n|   |    +-- charts                         ---图表组件\n|   |    |    --- ...\n|   |    +-- dashboard                      ---首页组件\n|   |    |    --- ...\n|   |    +-- forms                          ---表单组件\n|   |    |    --- ...\n|   |    +-- pages                          ---页面组件\n|   |    |    --- ...\n|   |    +-- tables                         ---表格组件\n|   |    |    --- ...\n|   |    +-- ui                             ---ui组件\n|   |    |    --- ...\n|   |    --- BreadcrumbCustom.jsx           ---面包屑组件\n|   |    --- HeaderCustom.jsx               ---顶部导航组件\n|   |    --- Page.jsx                       ---页面容器\n|   |    --- SiderCustom.jsx                ---左边菜单组件\n|   +-- style                               ---项目的样式存放目录，主要采用less编写\n|   +-- utils                               ---工具文件存放目录\n|   --- App.js                              ---组件入口文件\n|   --- index.js                            ---项目的整体js入口文件，包括路由配置等\n--- .env                                    ---启动项目自定义端口配置文件\n--- .eslintrc                               ---自定义eslint配置文件，包括增加的react jsx语法限制\n--- package.json\n```\n\n### 安装运行\n\n##### 1.下载或克隆项目源码\n\n##### 2.yarn 安装依赖(国内建议增加淘宝镜像源，不然很慢，你懂的 😁)\n\n\u003e 有些老铁遇到运行时报错，首先确定下是不是最新稳定版的 nodejs 和 yarn，切记不要用 cnpm\n\n```js\n// 首推荐使用yarn装包，避免自动升级依赖包\nyarn;\n```\n\n##### 3.启动项目\n\n```js\nyarn start\n```\n\n##### 4.打包项目\n\n```js\nyarn build\n```\n\n### Q\u0026A(点击问题查看答案)\n\n#### 1.[create-react-app 打包项目 run build 增加进度条信息?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-325383346)\n\n#### 2.[接口跨域了，怎么在本地开发时配置代理?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-326169055)\n\n#### 3.[在使用 hashRouter 的情况下怎么实现类似锚点跳转?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-345127221)\n\n#### 4.[怎么添加多页面配置?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-348088852)\n\n#### 5.[路由传参数接问号怎么传?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-375583089)\n\n#### 6.[如何兼容 IE 浏览器?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-510295292)\n\n### License\n\nMIT\n\n### 结尾\n\n该项目会不定时更新，后续时间会添加更多的模块\n\n欢迎和感谢大家 PR~~👏👏\n\n若有问题，可加 QQ 群与我交流\n\n-   1 群：264591039（已满）\n-   2 群：592688854（已满）\n-   3 群：743490497 (已满)\n-   4 群：150131600 (已满)\n\n如果对你有帮助，给个 star 哟~~❤️❤️❤️❤️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyezihaohao%2Freact-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyezihaohao%2Freact-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyezihaohao%2Freact-admin/lists"}