{"id":16580799,"url":"https://github.com/southliu/react-admin","last_synced_at":"2025-05-16T05:06:24.950Z","repository":{"id":58500988,"uuid":"524017613","full_name":"southliu/react-admin","owner":"southliu","description":"react19+vite6+antd5+react-router7+zustand5后台管理系统模版，适配手机端，支持keepalive功能、UnoCSS、动态菜单、国际化i18n、虚拟滚动表格。","archived":false,"fork":false,"pushed_at":"2025-05-06T07:32:04.000Z","size":4404,"stargazers_count":373,"open_issues_count":1,"forks_count":65,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-06T08:44:13.050Z","etag":null,"topics":["admin","antd","react","typescript","vite"],"latest_commit_sha":null,"homepage":"https://southliu.github.io","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/southliu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2022-08-12T08:49:33.000Z","updated_at":"2025-05-06T07:32:09.000Z","dependencies_parsed_at":"2023-08-12T09:46:40.090Z","dependency_job_id":"7d54dbb3-9e61-402e-ae7b-00d6e88945a4","html_url":"https://github.com/southliu/react-admin","commit_stats":null,"previous_names":["southliu/south-admin","southliu/react-admin"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/southliu%2Freact-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/southliu%2Freact-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/southliu%2Freact-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/southliu%2Freact-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/southliu","download_url":"https://codeload.github.com/southliu/react-admin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254471061,"owners_count":22076585,"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","antd","react","typescript","vite"],"created_at":"2024-10-11T22:27:10.517Z","updated_at":"2025-05-16T05:06:19.940Z","avatar_url":"https://github.com/southliu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\t\u003ch1\u003eReact Admin\u003c/h1\u003e\n\u003c/div\u003e\n\n[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE) ![](https://img.shields.io/github/stars/southliu/south-admin)\n\n## ✨ 简介\n\n使用`React18`,`Typescript`,`Vite`,`Antd5.0`等主流技术开发的开箱即用的中后台前端项目，`Vite`实现自动生成路由，支持`KeepAlive`功能，`zustand`状态管理，支持虚拟滚动表格，`UnoCss`开发样式。\n\n## 🚀 项目演示\n[演示地址](https://southliu.github.io/)\n\n![01.gif](https://github.com/southliu/github-static/blob/main/react-admin/01.gif)\n\n![02.gif](https://github.com/southliu/github-static/blob/main/react-admin/02.gif)\n\n| ![03.gif](https://github.com/southliu/github-static/blob/main/react-admin/03.gif) | ![04.gif](https://github.com/southliu/github-static/blob/main/react-admin/04.gif) |\n| --- | --- |\n\n## 💻 安装使用\n\n- 获取项目代码\n\n```bash\ngit clone https://github.com/southliu/react-admin.git\n```\n\n- 选择目录\n\n```bash\ncd react-admin\n```\n\n- 安装全局依赖依赖，存在则不用安装\n\n```bash\nnpm i -g pnpm\n```\n\n- 安装依赖\n```bash\npnpm install -w\n```\n##### 如果使用pnpm安装依赖出现安装失败问题，请使用梯子、yarn安装或切换淘宝源。\n```bash\npnpm config set registry https://registry.npmmirror.com\n```\n\n- 运行\n\n```bash\npnpm dev\n```\n\n- 打包\n\n```bash\npnpm build\n```\n\n## 📁 项目结构\n\n```tree\nreact-admin\n├── build                     # 构建相关配置\n│   ├── utils                 # 构建工具函数\n│   └── vite                  # vite 配置\n├── packages                  # monorepo子包\n│   ├── message               # 消息模块\n│   ├── request               # 请求模块\n│   ├── stylelint-config      # stylelint配置\n│   └── utils                 # 工具函数\n├── public                    # 静态资源\n├── src                       # 源代码\n│   ├── assets                # 静态资源\n│   │   ├── css               # 样式文件\n│   │   └── fonts             # 字体文件\n│   ├── components            # 公共组件\n│   │   ├── Form              # 表单组件\n│   │   └── Table             # 表格组件\n│   ├── layouts               # 布局组件\n│   │   └── components        # 布局子组件\n│   ├── locales               # 国际化配置\n│   ├── menus                 # 菜单配置\n│   ├── pages                 # 页面\n│   │   ├── content           # 内容管理\n│   │   └── system            # 系统管理\n│   ├── router                # 路由配置\n│   ├── servers               # API 接口\n│   ├── stores                # 状态管理\n│   └── utils                 # 工具函数\n├── types                     # TS类型定义\n├── .eslintrc.cjs             # ESLint 配置\n├── .gitignore                # Git 忽略文件\n├── index.html                # HTML 模板\n├── package.json              # 项目依赖\n├── tsconfig.json             # TypeScript 配置\n└── vite.config.ts            # Vite 配置\n```\n\n## 🧩 图标(iconify)\n\n- 参考 [iconify官方地址](https://icon-sets.iconify.design/)\n- VS Code安装Iconify IntelliSense - 图标内联显示和自动补全\n\n## 🎗️ Git 提交示例\n### Git提交不规范会导致无法提交，`feat`关键字可以按照下面`Git 贡献提交规范`来替换。\n```\ngit add .\ngit commit -m \"feat: 新增功能\"\ngit push\n```\n### 按照以上规范依旧无法提交代码，请在终端执行`npx husky install`之后重新提交。\n\n## 🎯 Git 贡献提交规范\n\n- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范\n\n  - `feat` 增加新功能\n  - `fix` 修复问题/BUG\n  - `style` 代码风格相关无影响运行结果的\n  - `perf` 优化/性能提升\n  - `refactor` 重构\n  - `revert` 撤销修改\n  - `test` 测试相关\n  - `docs` 文档/注释\n  - `chore` 依赖更新/脚手架配置修改等\n  - `workflow` 工作流改进\n  - `ci` 持续集成\n  - `types` 类型定义文件更改\n  - `wip` 开发中\n\n## 🐵 关于封装\n  1. 功能扩展，在原有的api上拓展。\n  2. 功能整合，合并两个或两个以上组件的api。\n  3. 样式统一，避免后期样式变动，导致牵一发而动全身。\n  4. 公共组件二次封装或常用组件使用**Base**开头，便于区分。\n\n## 📕 Q\u0026A常见问题\n#### 1. 页面权限如何配置？\n1. 通过登录接(/user/login)或重新授权接口(/user/refresh-permissions)获取permissions权限数据。\n2. 通过菜单接口(/menu/list)获取data中的rule权限数据，这个rule数据影响菜单显示，如果没返回rule则一直都显示。\n3. 页面内权限参考src/pages/system/menu.index.tsx文件内的pagePermission数据，pagePermission.page是显示页面的权限，根据第一点返回的permissions进行匹配。\n\n#### 2. 路由如何配置？\n路由根据文件夹路径自动生成，路径包含以下文件名或文件夹名称则不生成：\n\n* components\n* utils\n* lib\n* hooks\n* model.tsx\n* 404.tsx\n\n可自行在 src/router/utils/config.ts 修改路由生成规则。\n\n#### 3. 菜单如何配置？\n提供了两种方式配置菜单：\n1. 动态菜单，通过菜单接口(/menu/list)获取菜单数据。\n2. 静态菜单，需要静态菜单将/src/hooks/useCommonStore.ts中的useCommonStore中的menuList改为defaultMenus。\n```js\n// src/hooks/useCommonStore.ts\nimport { defaultMenus } from '@/menus';\n\n// const menuList = useMenuStore(state =\u003e state.menuList);\n// 菜单数据\nconst menuList = defaultMenus;\n```\n\n#### 4. @south/xxx依赖在哪查看？\n通过根目录`packages`文件中查看对于xxx文件的源码进行修改。\n\n#### 5. 安装新依赖时报错？\n使用了monorepo项目安装新依赖时需要在后面添加`-w`或`--workspace`，否则会报错，比如：`pnpm i mobx -w`。\n\n## 🧡 捐赠\n如果您觉得这个项目对您有帮助，您可以帮作者买一杯咖啡表示支持!\n\n| 微信 | 支付宝 |\n| --- | --- |\n| \u003cimg src=\"https://github.com/southliu/github-static/blob/main/pay/wechat.jpg\" width=\"250\" alt=\"wechat\"\u003e | \u003cimg src=\"https://github.com/southliu/github-static/blob/main/pay/alipay.jpg\" width=\"250\" alt=\"alipay\"\u003e  |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsouthliu%2Freact-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsouthliu%2Freact-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsouthliu%2Freact-admin/lists"}