You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mac
23ef8f6f02
|
6 days ago | |
---|---|---|
config | 4 months ago | |
public | 4 months ago | |
src | 6 days ago | |
src-tauri | 4 months ago | |
typings | 4 months ago | |
.DS_Store | 4 months ago | |
.editorconfig | 4 months ago | |
.env | 4 months ago | |
.eslintignore | 4 months ago | |
.eslintrc copy.js | 4 months ago | |
.gitattributes | 4 months ago | |
.gitignore | 4 months ago | |
.prettierrc.js | 4 months ago | |
CODE_OF_CONDUCT.md | 4 months ago | |
LICENSE | 4 months ago | |
README.md | 4 months ago | |
config-overrides.js | 4 months ago | |
env | 4 months ago | |
package-lock.json | 4 months ago | |
package.json | 2 months ago | |
paths.json | 4 months ago | |
tsconfig.json | 4 months ago | |
tslint.json | 4 months ago |
README.md
React Antd Admin 管理后台
react + antd + typescript 集成轻量级管理后台
注意
node version require 16.19.0 修改config中的配置 dev 测试,prod生成
功能
- 多页标签
- 动态权限
- 主题配置
使用
用户名:admin 密码:123456
使用命令行
npm install -g typescript
yarn install
yarn start
cp env .env.development
cp env .env.production
Redux 的使用说明
# 在/src/store/actionTypes/index1.tsx 定义新字段,格式如下
export default {
...,
SET_ACTION: {
name: 'SET_ACTION',
field: 'action'
}
}
# 在/src/store/state/index1.tsx 也定义新字段,格式如下
interface StoreState {
...;
action: string;
}
const initState: StoreState = {
...,
action: ''
}
# 在要使用的组件中
import { connect } from 'react-redux'
import * as actions from '@/store/actions'
export default connect(
(state) => state,
actions
)(ComponentName)
# 然后在 props 就有 setStoreData 属性,可用来 dispatch
setStoreData('SET_ACTION', '')
# 只需要定义 type 和 state,不需要写每个action,效率提高了木有有!!!
路由/菜单配置
# 所有路由写在 /src/route/routes.ts (包括菜单栏的路由)
用于路由权限控制
# 左侧菜单路由写在 /src/config/menu.ts
仅用于菜单栏展示
# 分两套的原因是,方便维护,如果不嫌麻烦,可以都写在 routes 里,用一个字段标识菜单路由即可
关于换肤配置
本框架是使用 less.js 实现动态切换主题,js文件在 /public/less.min.js
# 主题配置文件在 /public/color.less
引用了 antd 组件后,基本不需要自己额外自定义主题样式,因为主题文件里都有。
但是!!!
如果自己写了自定义组件,切换主题后样式显示不正常,
则需要自己在 color.less 底部添加深浅主题对应的样式,具体参考主题文件内额外配置。
# 上传生产环境
yarn deploy:prod:dc
# 访问路径
https://filefast.io/OTUxNDdiZW/#/login
上传命令:yarn deploy:prod:dc
代码路径:/data/wwwroot/admin-filefast
访问路径:
https://filefast.io/OTUxNDdiZW/#/login