🛠️Antd多标签页后台管理模板🛠️
由于业务上有多页签需求,网上找了一圈,都是基于antd pro的模板,太重了,不喜欢😒。
于是自己从以前的框架上改造,搭了这么一个精简版框架,用得也舒服,原创🤪。
于是自己从以前的框架上改造,搭了这么一个精简版框架,用得也舒服,原创🤪。
- 📐: 代码规模:使用 TS,原创精简版脚手架,不臃肿
- 💎: 优雅美观:基于 Ant Design 体系精心设计
- 🚀: 最新技术栈:使用 React/Redux/Antd 等前端前沿技术开发
- 🎨: 主题:使用流行的暗黑模式主题,支持深/浅色主题切换
- 多 tab 页签➕右键菜单,提升效率
- Redux 状态管理➕持久化
- 封装实用 axios 请求
- 动态链式面包屑导航
- 菜单页面路由权限控制
- less➕css module 样式隔离
- 列表➕分页➕多选➕搜索联动组件
- 可自定义 webpack 配置➕优化打包
- 集成单元测试 jest + enzyme,争取覆盖率100%💪🏻💪🏻(学习中🤫)
$ npm install -g typescript
$ git clone https://github.com/hsl947/react-antd-multi-tabs-admin.git
$ yarn install
$ yarn start # 访问 http://localhost:666
如果不需要权限控制,可自行注释去掉权限功能。
# src/components/common/menu/index.tsx
// 创建可展开的第一级子菜单
const creatSubMenu = (data: any): JSX.Element => {
// const menuItemList = []
// data.routes.map((item: any) => {
// const arr = permission.filter((ele: any) => item.key === ele.code)
// if (arr.length > 0) {
// menuItemList.push(renderMenu(item))
// }
// return arr
// })
const menuItemList = data.routes.reduce(
(prev: any, next: any) => [...prev, renderMenu(next)],
[]
)
return menuItemList.length > 0 ? (
<SubMenu key={data.key} title={subMenuTitle(data)}>
{menuItemList}
</SubMenu>
) : null
}
# src/pages/container/index.tsx
// 检查权限
const checkAuth = (newPathname: string): boolean => {
// 不需要检查权限的
// if (noCheckAuth.includes(newPathname)) {
// return true
// }
// const { tabKey: currentKey } = getKeyName(newPathname)
// return isAuthorized(currentKey)
// 一定返回 true
return !!newPathname
}
# 在/src/store/actionTypes/index.tsx 定义新字段,格式如下
export default {
...,
SET_ACTION: {
name: 'SET_ACTION',
field: 'action'
}
}
# 在/src/store/state/index.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 |
![]() Firefox |
![]() Chrome |
![]() Safari |
![]() Opera |
---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
我们非常欢迎你的贡献,你可以通过以下方式和我们一起共建 😃:
- 通过 Issue 报告 bug。
- 提交 Pull Request 一起改进。