{"id":22650494,"url":"https://github.com/zkboys/react-admin","last_synced_at":"2025-04-12T03:13:38.120Z","repository":{"id":34160071,"uuid":"167696641","full_name":"zkboys/react-admin","owner":"zkboys","description":"基于 Ant Design React 的管理系统架构","archived":false,"fork":false,"pushed_at":"2023-03-04T14:59:10.000Z","size":54376,"stargazers_count":109,"open_issues_count":17,"forks_count":22,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-12T03:13:31.293Z","etag":null,"topics":["ant-design","antd","react","react-router","redux","theme"],"latest_commit_sha":null,"homepage":"https://sxfad.github.io/react-admin","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zkboys.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-26T14:16:34.000Z","updated_at":"2025-03-17T08:56:47.000Z","dependencies_parsed_at":"2024-12-09T08:44:44.509Z","dependency_job_id":null,"html_url":"https://github.com/zkboys/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/zkboys%2Freact-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkboys%2Freact-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkboys%2Freact-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkboys%2Freact-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zkboys","download_url":"https://codeload.github.com/zkboys/react-admin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248510003,"owners_count":21116130,"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":["ant-design","antd","react","react-router","redux","theme"],"created_at":"2024-12-09T08:34:33.160Z","updated_at":"2025-04-12T03:13:38.097Z","avatar_url":"https://github.com/zkboys.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Admin\n\n基于[React17.x](https://reactjs.org)、[Ant Design4.x](https://ant.design/)的管理系统架构。\n\n- [在线预览](https://sxfad.github.io/react-admin/build)\n- [查看文档](https://sxfad.github.io/react-admin/#/)\n- [组件库ra-lib文档](https://sxfad.github.io/ra-lib/)\n\n## 安装依赖\n\n- node v12.14.0\n- yarn 1.22.10\n\n```bash\nyarn\n```\n\n注：如果由于网络等原因安装不成功，可以尝试 `tyarn` 或 `cnpm` 或 `npm` 或 `yarn --registry https://registry.npm.taobao.org`\n\n设置环境变量，windows平台可以使用 [cross-env](https://github.com/kentcdodds/cross-env#)\n\n## 开发启动\n\n如果您是第一次使用，想快速预览效果，可以是用mock方式启动：`REACT_APP_MOCK=true yarn start`\n\n```\n# 正常启动开发模式\nyarn start \n\n# 自定义端口\nPORT=3001 yarn start\n\n# HTTPS 方式启动\nHTTPS=true yarn start\n\n# 开启本地mock\nREACT_APP_MOCK=true yarn start\n```\n\n## 开发代理 \u0026 测试代理\n\n修改`src/setupProxyConfig.json`，页面右上角头部有下拉，可以快速切换代理。\n\n```json\n[\n    {\n        \"name\": \"张三\",\n        \"disabled\": false,\n        \"baseUrl\": \"/zhangsan\",\n        \"target\": \"http://127.0.0.1:8080\"\n    },\n    {\n        \"name\": \"测试环境\",\n        \"baseUrl\": \"/api\",\n        \"target\": \"http://127.0.0.1:8080\"\n    }\n]\n```\n\n## 生产构建\n\n```\n# 正常构建\nyarn build\n\n# 构建到指定目录\nBUILD_PATH=./dist yarn build\n\n# 指定配置环境\nREACT_APP_CONFIG_ENV=test yarn build\n\n# 打包大小分析\nyarn build:analyzer\n\n# 打包时间分析\nyarn build:time\n```\n\n## 样式\n\n- 支持less及css\n- src下less进行css module处理，css不进行css module处理\n- css module 应用样式写法\n    ```jsx\n    import styles from './style.module.less';\n    \n    \u003cdiv className={styles.root}\u003e\n        \u003ch1 className={styles.title}\u003e\u003c/h1\u003e\n    \u003c/div\u003e\n    ```\n- 项目中添加了[classnames](https://github.com/JedWatson/classnames)扩展，可以直接按照[classnames](https://github.com/JedWatson/classnames)方式在className中编写样式；\n    ```jsx\n        import styles from './style.module.less';\n    \n        const isActive = true;\n  \n        \u003cdiv className={[styles.root, isActive \u0026\u0026 styles.active]}\u003e\n            \u003ch1 className={styles.title}\u003e\u003c/h1\u003e\n        \u003c/div\u003e\n    ```\n- 主题变量修改 theme.less [antd 样式变量](https://ant.design/docs/react/customize-theme-cn)\n\n## 代码规范\n\n代码规范使用 [prettier](https://prettier.io/) [参考知乎这片文章](https://zhuanlan.zhihu.com/p/81764012)\n\n团队多人开发，无论使用webstorm还是vscode，都使用prettier（配置文件：.prettierrc.js）进行代码格式化。\n\nIDE格式化快捷键可以配置成prettier\n\ngit commit 时会根据prettier进行代码格式化，确保提交到仓库的代码都符合规范\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkboys%2Freact-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzkboys%2Freact-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkboys%2Freact-admin/lists"}