React + TypeScript 搭建多Tab页脚手架

React + Typescript 开发的后端多页脚手架

前言

关于这个脚手架项目：

1. 为了公司多个产品模块能够统一，这样维护起来比较轻松
2. 公司产品的上一个版本用 layui 开发，有 Tab 多页（所以...）
3. 为了和市面上大众UI区分开（虽然可以用 Antd，然后覆盖样式，个人不喜欢），内置了需要的组件和部分特色功能
4. 内置皮肤（与内置组件结合），继承原来产品的意志
5. 顺便整理一下，拿出来骗星， GitHub地址

由于代码比较简单，注释全面，同时使用了 TypeScript，新手拿来上手和参考，也是不错的。

如果发现不妥之处，麻烦道友 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 参数说明

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<HTMLDivElement>;
   
	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 (
	  		<div ref={this.container}>
	  		...
	  		</div>
	  	)
  }
}
复制代码

注意：包裹弹出组件的父节点，要设置 position: relative; ，因为遮罩层采用绝对定位。所以，遮罩范围，取决于设置了相对位置的父节点。

弹窗内部的组件，可通过调用 this.props.close() 来关闭弹窗

Alert

Params

一共包含四个子组件： createConfirm createInfo createWarning createError
和一个供外部调用的关闭方法 clearAlert ，直接调用即可 clearAlert()

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

Demo

import React, { Component } from 'react'
import Modal from '@components/modal/modal'

class Demo extends Component {
	showToast () {
      createToast('账号或密码错误账号或密码错误', 2000)
  	}
  	
  	render() {
	  	return (
	  		...
	  	)
   }
}

复制代码

Menu

Params

Demo

左侧菜单

import * as React from 'react'
import { connect } from 'react-redux'
import { addTabBox, setDefaultTab } from '../../reducers/tabBoxReducer'

class Demo extends Component {
	
  	render() {
	  	return (
	  		<Menu 
	  		data={this.state.data} 
	  		activeTabId={this.props.activeTabId} 			openOrToggleTabBox={this.props.addTabBox}
	  		/>	  	
	  	)
   }
}

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)


复制代码

右侧菜单

import * as React from 'react'
import { connect } from 'react-redux'
import { addDialogData, deleteDialogData } from '../../../../reducers/modalReducer'

class Demo extends Component {
	
  	render() {
	  	return (
	  		<Menu 
	  		data={this.state.rightMenuData} 
	  		operateCallBack={(value: string) => 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 // 输出全局的，皮肤样式

复制代码

发挥你的设计灵感吧！

哪里控制 Tab 页面？

打开 /src/pages/home/pageBox.tsx 我想，里面的注释，应该足够解释了

如何实现的多Tab页？

核心就是 redux 状态管理，尽在 /src/reducers ，里面的注释可以帮你解惑