Code Monkey home page Code Monkey logo

react-antd-admin's Introduction

React Antd Admin 管理后台

react + antd + typescript 集成轻量级管理后台

预览

based on hsl947

功能

  • 多页标签
  • 动态权限
  • 主题配置

使用

用户名:admin 密码:123456

服务端

使用Golang + Gin + Gorm搭建

地址:https://github.com/bigfool-cn/go-antd-admin-api

使用命令行

npm install -g typescript

git clone https://github.com/bigfool-cn/react-antd-admin.git

yarn install

yarn start

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 底部添加深浅主题对应的样式,具体参考主题文件内额外配置。

支持环境

现代浏览器及 IE11。

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.