9 |
13 | );
14 | };
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/nginx.conf:
--------------------------------------------------------------------------------
1 | server {
2 | listen 80;
3 | # gzip config
4 | gzip on;
5 | gzip_min_length 1k;
6 | gzip_comp_level 6;
7 | gzip_types text/plain text/css test/xml text/javascript application/javascript application/x-javascript application/xml application/json;
8 | gzip_vary on;
9 | gzip_proxied any;
10 | gzip_disable "MSIE [1-6]\.";
11 |
12 | root /usr/share/nginx/html;
13 |
14 | location / {
15 | try_files $uri $uri/ /index.html;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/pages/settings/user/data.d.ts:
--------------------------------------------------------------------------------
1 | export interface UserListItem {
2 | id: number;
3 | username: string;
4 | email: string;
5 | group_id: number;
6 | group_name: string;
7 | role_id: number;
8 | role_name: string;
9 | status: number;
10 | }
11 |
12 | export interface UserCreateInfo {
13 | username: string;
14 | email: string;
15 | group_id: number;
16 | role_id: number;
17 | }
18 |
19 | export interface UserUpdateInfo {
20 | id?: number;
21 | username?: string;
22 | email?: string;
23 | group_id?: number;
24 | role_id?: number;
25 | status?: number;
26 | }
27 |
--------------------------------------------------------------------------------
/src/utils/auth.tsx:
--------------------------------------------------------------------------------
1 | export function getToken() {
2 | return localStorage.getItem('token') || ''
3 | }
4 |
5 | export function setToken(token: string) {
6 | localStorage.setItem('token', token)
7 | }
8 |
9 | export function loggedIn(): boolean {
10 | return !!localStorage.getItem('token');
11 | }
12 |
13 | export function deleteToken() {
14 | localStorage.removeItem('token')
15 | localStorage.removeItem('username')
16 | }
17 |
18 | export function getCurrentUser() {
19 | return localStorage.getItem('username')
20 | }
21 |
22 | export function setCurrentUser(username: string) {
23 | localStorage.setItem('username', username)
24 | }
25 |
--------------------------------------------------------------------------------
/src/utils/icons.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ApartmentOutlined,
3 | ContactsOutlined,
4 | ControlOutlined,
5 | HomeOutlined,
6 | LockOutlined,
7 | ProjectOutlined,
8 | SettingOutlined,
9 | TeamOutlined,
10 | UserOutlined,
11 | } from "@ant-design/icons";
12 |
13 |
14 | export const menuIcons: any = {
15 | HomeOutlined: 确定退出登录?
40 |
47 |
50 |
82 |
83 |
84 | );
85 | };
86 | export default Login;
87 |
--------------------------------------------------------------------------------
/public/icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | [](/LICENSE)
3 | [](https://github.com/basefas/react-antd-admin/releases)
4 | 
5 |
6 |
7 | 8 | 20 | 21 | 22 | 23 | ## 简介 24 | 25 | react-antd-admin 使用 vite 与 antd v5 开发，包含常用后台使用的基本模块，依赖项少，结构简单，同时提供完整功能的后端程序，可快速用于二次开发及功能扩展。 26 | 27 | 28 | | | url | introduction | 29 | |-----------|---------------------------------------------|--------------------------------------------| 30 | | backend | https://github.com/basefas/admin-go | 使用 Go & Gin 开发的后台管理系统后端 | 31 | | frontend | https://github.com/basefas/react-antd-admin | 使用 react & vite & antd 开发的后台管理系统前端| 32 | 33 | 34 | ## 页面截图 35 | 36 | ### 登录页面 37 | 38 |  39 | 40 | ### 用户管理 41 | 42 |  43 | 44 | ### 分组管理 45 | 46 |  47 | 48 | ### 菜单管理 49 | 50 |  51 | 52 | ### 角色及权限管理 53 | 54 |  55 | 56 | 57 | 58 | 59 | ## 快速开始 60 | 61 | 1. 克隆项目到本地 62 | 63 | ``` 64 | git clone https://github.com/basefas/react-antd-admin 65 | ``` 66 | 67 | 2. 安装依赖 68 | 69 | ``` 70 | npm install 71 | ``` 72 | 73 | 3. 运行 74 | 75 | ``` 76 | npm run dev 77 | ``` 78 | 79 | 80 | 81 | ## Build 82 | 83 | 1. 本地编译 84 | 85 | ``` 86 | npm run build 87 | ``` 88 | 89 | 2. 本地查看编译结果 90 | 91 | ``` 92 | npm run preview 93 | ``` 94 | 95 | 96 | 2. 使用 docker 编译并打包 docker 镜像 97 | 98 | ``` 99 | docker build -f Dockerfile -t react-antd-admin:
11 |
63 |
66 | ),
67 | onClick: () => {
68 | setLogoutModalVisible(true)
69 | }
70 | },
71 | ];
72 | return (
73 | {
83 | setPathname(item.path || "/dashboard");
84 | navigate(item.path || "/dashboard");
85 | }}>
86 | {dom}
87 |
88 | )}
89 | avatarProps={{
90 | icon: user.slice(0, 1).toUpperCase(),
91 | size: 'small',
92 | title: user,
93 | render: (_props, dom) => {
94 | return (
95 |
140 |
141 | groups.id}
145 | loading={loading}
146 | pagination={{
147 | hideOnSinglePage: true,
148 | pageSize: 10
149 | }}
150 | />
151 |
152 |
153 | {createFormVisible ?
154 |