5 Star 17 Fork 5

郭建强 / react-antd-admin

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

react-antd-admin

基于react+ts+antd构建的管理后台脚手架模版

线上地址 http://gjq0208.gitee.io/react-antd-admin

git地址 https://github.com/guo-jianqiang/react-antd-admin

单独使用Layout

详情请查看little-deer-ui

1.ConfigurationDrawer

1-1.可缓存系统配置

记录用户使用的系统配置,缓存浏览器中,记录用户习惯.

1-2.antd换肤(Layout组件未封装)

使用antd-theme-webpack-plugin插件实现导出antd样式文件并绑定cssVariable,通过less.js 浏览器在线编译改变less variable 方法实现主题样式变更

@import "_var";

:root{
	--primary-color: @primary-color;
	--danger-color: red;
}
window.less.modifyVars(vars).then(() => {
    if (vars['@primary-color'] === getItem(SYSTEM_CONFIG).primaryColor) return
    message.success('主题色切换成功')
  })
  window.less.refreshStyles()

2.Tab

2-1.支持可缓存路由

配置只需在routeItems文件中配置参数即可,如下

export interface RouteItem {
  path: string
  exact: boolean
  meta: {
    tabFixed?: boolean // 是否固定tab项
    isCache?: boolean // 是否路由缓存
    name: string
    icon: Function | string
    hidden?: boolean // 是否隐藏菜单
  }
  component: ComponentType
  routes?: Array<RouteItem>
}

2-2.支持清除路由缓存

Layout组件中传入缓存控制函数,更多信息请查看react-router-cache-route

export interface aliveControlInterface {
  dropByCacheKey: (cacheKey: string) => void  // 清除缓存,仅当前页面路由和清除缓存路由不同时可使用
  refreshByCacheKey: (cacheKey: string) => void // 刷新当前路由
  getCachingKeys: () => Array<string> // 或者缓存路由key列表
  clearCache: () => void // 清除所有缓存
}

2-3 支持tab拖拽

layout draggableTab 参数可用于控制是否拖拽

环境配置

使用cross-env设置环境变量,从而实现不同环境下的可配置化,配置获取来源为根目录下的env文件夹中获取(development.json、test.json、producation.json)

案例如下:

// development.json 同其他文件
{
  "SERVER_URL": "www.baidu.com"
}
"scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve --config webpack/webpack.dev.ts",
    "test": "cross-env NODE_ENV=test webpack serve --config webpack/webpack.dev.ts",
    "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.prod.ts"
  },
plugins: [
    new webpack.DefinePlugin({
      "process.env.APP_CONFIG": JSON.stringify(envConfig)
    })
    ....
  ]

初始化

yarn install
or
npm install

运行

npm run dev

http://localhost:8000/

打包

npm run build
MIT License Copyright (c) 2021 郭建强 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

使用ts+react+antd构建前端后台管理脚手架 展开 收起
TypeScript 等 4 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/gjq0208/react-antd-admin.git
git@gitee.com:gjq0208/react-antd-admin.git
gjq0208
react-antd-admin
react-antd-admin
master

搜索帮助