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.

96 lines
2.1 KiB

12 months ago
  1. # React Antd Admin 管理后台
  2. react + antd + typescript 集成轻量级管理后台
  3. ## 功能
  4. - 多页标签
  5. - 动态权限
  6. - 主题配置
  7. ## 使用
  8. 用户名:admin 密码:123456
  9. ### 使用命令行
  10. ```bash
  11. npm install -g typescript
  12. yarn install
  13. yarn start
  14. cp env .env.development
  15. cp env .env.production
  16. ```
  17. ### Redux 的使用说明
  18. ```
  19. # 在/src/store/actionTypes/index1.tsx 定义新字段,格式如下
  20. export default {
  21. ...,
  22. SET_ACTION: {
  23. name: 'SET_ACTION',
  24. field: 'action'
  25. }
  26. }
  27. # 在/src/store/state/index1.tsx 也定义新字段,格式如下
  28. interface StoreState {
  29. ...;
  30. action: string;
  31. }
  32. const initState: StoreState = {
  33. ...,
  34. action: ''
  35. }
  36. # 在要使用的组件中
  37. import { connect } from 'react-redux'
  38. import * as actions from '@/store/actions'
  39. export default connect(
  40. (state) => state,
  41. actions
  42. )(ComponentName)
  43. # 然后在 props 就有 setStoreData 属性,可用来 dispatch
  44. setStoreData('SET_ACTION', '')
  45. # 只需要定义 type 和 state,不需要写每个action,效率提高了木有有!!!
  46. ```
  47. ### 路由/菜单配置
  48. ```
  49. # 所有路由写在 /src/route/routes.ts (包括菜单栏的路由)
  50. 用于路由权限控制
  51. # 左侧菜单路由写在 /src/config/menu.ts
  52. 仅用于菜单栏展示
  53. # 分两套的原因是,方便维护,如果不嫌麻烦,可以都写在 routes 里,用一个字段标识菜单路由即可
  54. ```
  55. ### 关于换肤配置
  56. > 本框架是使用 less.js 实现动态切换主题,js文件在 /public/less.min.js
  57. ```
  58. # 主题配置文件在 /public/color.less
  59. 引用了 antd 组件后,基本不需要自己额外自定义主题样式,因为主题文件里都有。
  60. 但是!!!
  61. 如果自己写了自定义组件,切换主题后样式显示不正常,
  62. 则需要自己在 color.less 底部添加深浅主题对应的样式,具体参考主题文件内额外配置。
  63. ```
  64. ```bash
  65. # 上传生产环境
  66. yarn deploy:prod:dc
  67. # 访问路径
  68. https://filefast.io/OTUxNDdiZW/#/login
  69. 上传命令:yarn deploy:prod:dc
  70. 代码路径:/data/wwwroot/admin-filefast
  71. 访问路径:
  72. https://filefast.io/OTUxNDdiZW/#/login
  73. ```