Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itroads/react-admin-ts-starter
react-admin-typescript-starter
https://github.com/itroads/react-admin-ts-starter
admin pages react react-router redux tabs typescript
Last synced: 1 day ago
JSON representation
react-admin-typescript-starter
- Host: GitHub
- URL: https://github.com/itroads/react-admin-ts-starter
- Owner: Itroads
- Created: 2019-06-14T02:49:15.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T21:10:55.000Z (about 2 years ago)
- Last Synced: 2023-03-10T00:09:12.128Z (almost 2 years ago)
- Topics: admin, pages, react, react-router, redux, tabs, typescript
- Language: JavaScript
- Size: 1.86 MB
- Stars: 11
- Watchers: 4
- Forks: 5
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-admin-ts-starter
React + Typescript 开发的后端多页脚手架
![react-admin-scaffold](https://github.com/Itroads/assets/blob/master/react-admin-scaffold/README/rast-show.png "react-admin-scaffold")# 前言
关于这个脚手架项目:
1. 为了公司多个产品模块能够统一,这样维护起来比较轻松
2. 公司产品的上一个版本用 layui 开发,有 Tab 多页(所以...)
3. 为了和市面上大众UI区分开(虽然可以用 Antd,然后覆盖样式,个人不推荐),内置了需要的组件和部分特色功能
4. 内置皮肤(与内置组件结合),继承原来产品的意志如果发现不妥之处,麻烦 `issues` 指出。
# 如何使用?
`git clone https://github.com/Itroads/react-admin-ts-starter.git`
`cd react-admin-ts-starter`
`yarn`
`yarn start`
# 有哪些特别之处?
* 多 Tab 页,灵活切换
* 内置部分组件(其中 Modal 组件,可拖动,范围可设定)
* 内置皮肤,也可以自定义
* 可支持,左中右结构,就像 win 上的很多应用那样,当然这是可选项# 内置组件说明
## Modal
### Params 参数说明| 参数名称 | 类型 | 说明 | 是否必须 |
|:----|:-----:|:-----:| :-------:|
| `Component` | `Component` | 弹窗显示的组件内容 | 必须 |
| `options` | `Object` | width?:string, height?:string, imgSrc:any, title:string |必须 |
| `ParentFn` | `Function` | 父组件传入的方法,如:点击确定,所触发的方法 | 必须 |
| `dataToChildren` | `Any` | 父组件传递给子组件的值 | 必须 |
| `localDialog` | `Object` | ref:React.RefObject, tabId:string, addFn:Fn, delFn:Fn。不传则为全局弹窗 | 可选 |``` javascript
import React, { Component } from 'react'
import createModal from '../../components/modal'
import CreatNewRole from './creatNewRole'class Demo extends Component {
constructor(props: any) {
super(props)
this.container = React.createRef();
}
public container: React.RefObject;
showNewModal () {
createModal(CreatNewRole,{
width: '650px',
height: '360px',
imgSrc: require('../../assets/logo.png'),
title: '添加角色'
},this.creatRole, '',{
ref: this.container,
tabId: this.props.activeTabId, // 来自 store
addFn: this.props.addDialogData, // 来自 store
delFn: this.props.deleteDialogData // 来自 store
})
}
render() {
return (
...
)
}
}
```**注意**:包裹弹出组件的父节点,要设置 `position: relative;` ,因为遮罩层采用绝对定位。所以,遮罩范围,取决于设置了相对位置的父节点。
**弹窗内部的组件,可通过调用 `this.props.close()` 来关闭弹窗**## Alert
### Params
一共包含四个子组件:
`createConfirm` `createInfo` `createWarning` `createError`
和一个供外部调用的关闭方法 `clearAlert`,直接调用即可 `clearAlert()`| 属性名称 | 类型 | 说明 | 是否必须 | 范围 |
|:----|:-----:|:-----:| :-------:|:---:|
| `msg` | `String` | 弹窗的文字描述信息 | 必须 | 通用 |
| `cb` | `Function` | `Confirm` 弹窗,点击确定的回调方法 | 必须 | `Confirm` |``` javascript
import React, { Component } from 'react'
import { createConfirm, createInfo, createWarning, createError, clearAllAlert } from '@components/alert/alert'class Demo extends Component {
/**
* confirm 点击确认按钮的回调
* @param {any} params
*/
confirmCallBack (params) {
console.log('test', params)
clearAllAlert()
}showNewConfirm () {
createConfirm('确定要删除xxx ?', this.confirmCallBack.bind(this, 123))
}showNewInfo () {
createInfo('确定要删除xxx ?')
}showNewWarning () {
createWarning('警告信息')
}showNewError () {
createError('错误信息')
}
render() {
return (
...
)
}}
```## Toast
### Params
| 属性名称 | 类型 | 说明 | 是否必须 |
|:----|:-----:|:-----:| :-------:|
| `text` | `String` | 弹窗的文字描述信息 | 必须 |
| `time` | `Number` | `Toast` 弹窗,指定时间后消失,默认1500毫秒 | 可选 |### Demo
``` javascript
import React, { Component } from 'react'
import Modal from '@components/modal/modal'class Demo extends Component {
showToast () {
createToast('账号或密码错误账号或密码错误', 2000)
}
render() {
return (
...
)
}
}```
## Menu
### Params
| 属性名称 | 类型 | 说明 | 是否必须 |
|:----|:-----:|:-----:| :-------:|
| `data` | `Array` | 菜单数据 | 必须 |
| `activeTabId` | `String` | 当前页面的ID,来自 Store | 可选 |
| `openOrToggleTabBox` | `Function` | 左侧菜单导航,处理 tabBox 方法,来自 store | 可选 |
| `operateCallBack` | `Function ` | 右侧操作菜单回调函数 | 可选 |
| `tabModalCount` | `Number` | 当前 tab 页的弹窗数量 | 可选 |### Demo
#### 左侧菜单
``` javascript
import * as React from 'react'
import { connect } from 'react-redux'
import { addTabBox, setDefaultTab } from '../../reducers/tabBoxReducer'class Demo extends Component {
render() {
return (
)
}
}const mapStateToProps = (state: any) => ({
activeTabId: state.tabBoxState.activeTabId
})const mapDispatchToProps = (dispatch: any) => ({
addTabBox: (tabItem: ITabItem) => dispatch(addTabBox(tabItem)),
setDefaultTab: (tabItem: ITabItem) => dispatch(setDefaultTab(tabItem))
})export default connect(mapStateToProps, mapDispatchToProps)(Demo)
```
#### 右侧菜单
``` javascript
import * as React from 'react'
import { connect } from 'react-redux'
import { addDialogData, deleteDialogData } from '../../../../reducers/modalReducer'class Demo extends Component {
render() {
return (
this.menuOperate(value)} tabModalCount={this.props.modalState ? this.props.modalState[this.props.activeTabId] : null}
/>
)
}
}const mapStateToProps = (state: any) => ({
activeTabId: state.adminTabBoxState.activeTabId,
modalState: state.modalState
})const mapDispatchToProps = (dispatch: any) => ({
addDialogData: (key: string) => dispatch(addDialogData(key)),
deleteDialogData: (key: string) => dispatch(deleteDialogData(key))
})export default connect(mapStateToProps, mapDispatchToProps)(Demo)
```
# 你可能存在的疑惑?
## 皮肤设置?
打开 `/src/utils````
-utils
-skin-files
-darkBlack.ts // 输出皮肤样式的对象
-darkBlue.ts
...
-skin.ts // 输出全局的,皮肤样式```
发挥你的设计灵感吧!:smiling_imp:
## 哪里控制 Tab 页面?
打开 `/src/pages/home/pageBox.tsx` 我想,里面的注释,应该足够解释了
## 如何实现的多Tab页?
核心就是 redux 状态管理,尽在 `/src/reducers`,里面的注释可以帮你解惑**特别报道:** 爝神的 Node 框架 [Daruk](https://github.com/darukjs/daruk) 震撼登场!