1 Star 0 Fork 5

codingstudio / react-antd-admin

forked from 郭建强 / react-antd-admin 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

react-antd-admin

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

线上地址 http://g_guojq.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 // 清除所有缓存
}

环境配置

使用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

空文件

简介

使用ts+react+antd构建前端后台管理脚手架 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

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

搜索帮助