feat: 项目成员开发

package.json

@@ -46,6 +46,7 @@
     "jest": "^27.4.3",
     "jest-resolve": "^27.4.2",
     "jest-watch-typeahead": "^1.0.0",
+    "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.4.5",
     "mobx": "^6.5.0",
     "mobx-react": "^7.4.0",

src/api/http.ts

+import axios, { AxiosInstance, AxiosResponse, AxiosRequestConfig } from 'axios';
+import React, { useContext } from 'react';
+import _ from 'lodash';
+import localStorageKey from '@/utils/localStorageKey';
+import { BACKEND_API_URI_PREFIX } from './api_prefix';
+
+
+
+export interface IAxiosRequestConfig extends AxiosRequestConfig {
+    /** 取消全局错误提示 */
+    noToastWarn?: boolean;
+    /** 允许截流 */
+    allowIntercept?: boolean;
+}
+
+export type HttpConfig = IAxiosRequestConfig;
+
+export interface IRequest {
+  method: <T>(config: AxiosRequestConfig) => Promise<T>;
+  config: IAxiosRequestConfig;
+}
+
+export class Http {
+  instance: AxiosInstance;
+
+  /** 请求方法集合
+   * key-唯一标识
+   */
+  requestList: {
+    [key: string]: IRequest[];
+  } = {};
+
+  /** 请求锁 */
+  isRequesting: { [key: string]: boolean } = {};
+
+  constructor(defaultConfig: IAxiosRequestConfig = {}) {
+    this.instance = axios.create(defaultConfig);
+  }
+
+  /** 更新回调函数数组 */
+  setRequestList = (key: string, params: IRequest) => {
+    this.requestList = {
+      [key]: this.requestList[key] ? [...this.requestList[key], params] : [params],
+    };
+  };
+
+    /** 处理成功请求
+   * first-首次请求 last-最后一次请求 key-请求路径
+   */
+     handleSuccess = ({ key, resolve, res: firstRes }: { key: string; resolve: any; res: any }) => {
+        this.isRequesting[key] = false;
+        const requestLen = this.requestList[key]?.length || 0;
+        if (requestLen >= 2) {
+          const first = this.requestList[key][0];
+          const last = this.requestList[key][requestLen - 1];
+          if (!_.isEqual(first.config, last.config)) {
+            // @ts-ignore
+            last.method<T>(last.config).then((lastRes: AxiosResponse<any>) => {
+              resolve(lastRes?.data);
+            });
+          } else {
+            resolve(firstRes.data);
+          }
+        } else {
+          resolve(firstRes.data);
+        }
+        this.requestList[key] = [];
+      };
+
+
+  /** 请求截流
+   * 当多次发起请求并且第一次请求未结束时，若参数完全一致只允许首次请求，不一致在首次结束后，进行最后一次
+   */
+  requestInterception<T>(config: IAxiosRequestConfig): Promise<T> {
+    const requestMethod = this.instance.request;
+    const key: string = config.url || '';
+    return new Promise((resolve, reject) => {
+      if (this.isRequesting[key]) {
+        this.setRequestList(key, { method: requestMethod, config });
+      } else {
+        this.isRequesting[key] = true;
+        this.setRequestList(key, { method: requestMethod, config });
+
+        requestMethod<T>(config)
+          .then((res: AxiosResponse<any>) => {
+              /** 可以接入日志监控 */
+            // const { code, msg = '' } = res.data;
+            // if (code !== 200 && code !== 0) {
+            //   this.handleSentry({
+            //     ...sentryParams,
+            //     msg,
+            //     code,
+            //   });
+            // }
+            this.handleSuccess({
+              res,
+              key,
+              resolve,
+            });
+          })
+          .catch((e) => {
+              /** 可以接入日志监控 */
+            // this.handleSentry({
+            //   ...sentryParams,
+            //   msg: e.error || '',
+            //   code: e.code || '',
+            // });
+            reject(e);
+          });
+      }
+    });
+  }
+  request<T>(config: IAxiosRequestConfig) {
+    const requestMethod = this.instance.request<T>(config);
+    return requestMethod.then((res) => res.data);
+  }
+
+  getConfig(config?: IAxiosRequestConfig) {
+    let Authorization: string =
+    `Bearer ` +
+      JSON.parse(localStorage.getItem(localStorageKey.TOKEN) || "{}")
+        ?.access_token || "";
+
+    return {
+      headers:{'Content-Type': "application/x-www-form-urlencoded",Authorization, ...config?.headers, },...config
+    }
+  }
+
+
+  get<T>(url: string, config?: IAxiosRequestConfig) {
+    if (config?.allowIntercept) {
+      return this.requestInterception<T>({ url: `${BACKEND_API_URI_PREFIX}${url}`, method: 'GET', ...this.getConfig(config) });
+    }
+    return this.request<T>({ url: `${BACKEND_API_URI_PREFIX}${url}`, method: 'GET', ...this.getConfig(config) });
+  }
+
+  patch<T>(url: string, data?: any, config?: IAxiosRequestConfig) {
+    return this.request<T>({ method: 'PATCH', url: `${BACKEND_API_URI_PREFIX}${url}`, data, ...this.getConfig(config) });
+  }
+
+  put<T>(url: string, data?: any, config?: IAxiosRequestConfig) {
+    return this.request<T>({ method: 'PUT', url: `${BACKEND_API_URI_PREFIX}${url}`, data, ...this.getConfig(config) });
+  }
+
+  post<T>(url: string, data?: any, config?: IAxiosRequestConfig) {
+    if (config?.allowIntercept) {
+      return this.requestInterception<T>({ method: 'POST', url: `${BACKEND_API_URI_PREFIX}${url}`, data, ...this.getConfig(config) });
+    }
+    return this.request<T>({ method: 'POST', url: `${BACKEND_API_URI_PREFIX}${url}`, data, ...this.getConfig(config) });
+  }
+
+  del<T>(url: string, config?: IAxiosRequestConfig) {
+    return this.request<T>({ method: 'DELETE', url: `${BACKEND_API_URI_PREFIX}${url}`, ...this.getConfig(config) });
+  }
+}
+
+const rawHttp = new Http();
+
+const HttpContext = React.createContext<Http>(rawHttp);
+
+export const HttpProvider = HttpContext.Provider;
+
+export function useHttp(raw?: boolean) {
+  const httpClient = useContext(HttpContext);
+  return raw ? rawHttp : httpClient;
+}
+
+export default rawHttp;

src/components/Material.Ui/Button.jsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-01 16:53:15
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-04 15:00:09
+ * @FilePath: /bkunyun/src/components/Material.Ui/Button.jsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import React from "react";
 import PropTypes from "prop-types";
-import makeStyles from "@material-ui/styles/makeStyles";
-import { Typography, Button, Menu, MenuItem } from "@material-ui/core";
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { makeStyles } from "@mui/styles";
+import { Typography, Button, Menu, MenuItem } from "@mui/material";
 const useStyles = makeStyles({
     root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#0055D9" } },
     containedSecondary: { backgroundColor: "#D62C1F", boxShadow: "none !important", "&:hover": { backgroundColor: "#D82C1F" } },
@@ -58,7 +65,6 @@ const ButtonComponent = (props) => {
             >
                 {img || ''}
                 <Typography style={{ fontSize: fontSize }}>{text || ""}</Typography>
-                {select && <ExpandMoreIcon fontSize={"small"} />}
             </Button>
             <Menu
                 id="simple-menu"
@@ -91,5 +97,7 @@ ButtonComponent.propTypes = {
     disabled: PropTypes.bool,
     disableElevation: PropTypes.bool,
     disableFocusRipple: PropTypes.bool,
+    text: PropTypes.string,
+    onClick: propTypes.func.isRequired,
 };
 export default ButtonComponent;
\ No newline at end of file

src/components/Material.Ui/Input.jsx

 import React from "react";
-import TextField from '@material-ui/core/TextField';
-import MenuItem from '@material-ui/core/MenuItem';
-import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import { makeStyles } from "@mui/styles";
 import cx from "classnames"
 const useStyles = makeStyles({
     MuiOutlinedInputInputLarge: { padding: "13.5px 15px", MozAppearance: 'textfield' },
-    MuiOutlinedInputInput: { padding: "12px 15px", "&::placeholder": { fontSize: "14px" }, MozAppearance: 'textfield' },
+    MuiOutlinedInputInput: { padding: "6px 15px", "&::placeholder": { fontSize: "14px" }, MozAppearance: 'textfield' },
     MuiOutlinedInputInputSmall: { padding: "10px 15px", "&::placeholder": { fontSize: "13px" }, MozAppearance: 'textfield' },
     MuiOutlinedInputInputXsmall: { padding: "8px 15px", "&::placeholder": { fontSize: "12px" }, MozAppearance: 'textfield' },
     outlinedLarge: { transform: "translate(14px, 15.5px) scale(1)", fontSize: '14px', fontWeight: '400', color: '#707070' },
@@ -103,9 +103,11 @@ export default props => {
                     classes: {
                         root: classes.root,
                         input: cx({
+                            width: '320px',
+                            height: '32px',
                             [classes[resizeBys("MuiOutlinedInputInput")]]: true,
                             [classes[`SelectProps${textAlign}`]]: textAlign,
-                            [customClass]: customClass
+                            [customClass]: customClass,
                         }),
                         notchedOutline: classes.notchedOutline,
                         error: classes.error,

src/components/Material.Ui/Select.jsx

 import React, { useState, useEffect } from "react";
 import Selectzone from './Selectzone.jsx'
-import { Grid, Typography, List, ListItem, ListItemText } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import { CLOUDE } from "@/commons/utils/constants"
+import { Grid, Typography, List, ListItem, ListItemText } from '@mui/material';
+import { makeStyles } from "@mui/styles";
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import cx from "classnames"
 const useStyles = makeStyles({
     wrapHeightLarge: { height: "44px" },
@@ -52,7 +51,7 @@ export default props => {
     const classes = useStyles();
     const { value, size, option, callback, noBorder, rootStyle, customSvg, textStyle, sz, startIcon, DropdownboxStyle, DropdownboxitemStyle } = props;
     const [open, setOpen] = useState(false)
-    const [values, setValue] = useState(value || CLOUDE.Options)
+    const [values, setValue] = useState(value || '请选择')
     const handleClick = (event) => {
         event.stopPropagation()
         setOpen((open) => !open)
@@ -123,7 +122,7 @@ export default props => {
                 style={{ ...rootStyle }}
             >
                 {startIcon && startIcon}
-                <Typography className={classes.text} style={{ ...textStyle }}>{values || CLOUDE.Options}</Typography>
+                <Typography className={classes.text} style={{ ...textStyle }}>{values || '请选择'}</Typography>
                 {
                     customSvg ? (
                         (

src/components/Material.Ui/Selectzone.jsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-01 16:53:15
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-05 16:39:01
+ * @FilePath: /bkunyun/src/components/Material.Ui/Selectzone.jsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import React, { useState, useEffect } from "react";
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 import {
   Grid,
   ListItemText,
   Tooltip,
-} from "@material-ui/core";
-import icon from '../../../console/cloudelastic/assets/img/templates/icon_about_grey.png'
+} from "@mui/material";
+import icon from "@/assets/img/icon_about_grey.png";
+
 const useStyles = makeStyles({
   popper:{fontSize:'12px'}
 })

src/components/Material.Ui/Table.jsx

 import React from "react";
 
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableContainer from "@material-ui/core/TableContainer";
-import TablePagination from "@material-ui/core/TablePagination";
-import TableRow from "@material-ui/core/TableRow";
-import Paper from "@material-ui/core/Paper";
-import Checkbox from "@material-ui/core/Checkbox";
-import Spin from "@/commons/components/Material.Ui/Spin";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TablePagination from "@mui/material/TablePagination";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import Checkbox from "@mui/material/Checkbox";
+// import Spin from "./Spin";
 
 import EnhancedTableToolbarComponent from "./Table/EnhancedTableToolbar"
 import EnhancedTableHeadComponent from "./Table/EnhancedTableHead"
@@ -17,14 +17,15 @@ import ActionsComponent from "./Table/ActionsComponent"
 import { useEffect } from "react";
 
 export default function EnhancedTable(props) {
-  const classes = useStyles();
+  const classes = useStyles;
+  console.log(classes,11111);
   const [order, setOrder] = React.useState("asc");
   const [orderBy, setOrderBy] = React.useState("");
   const { headCells, rows, footer = true, elevation1, tableStyle,tablecellstyle, tableContainerStyle, stickyheader, TableHeadClasses, onRowClick, defaultRow, minHeight='', borderBottom='', onDoubleClick,
     load, size, checkboxData, rowsPerPage = 10, initSelected, page = 0, changePage = function () { }, toolbar, count, param, disabledparam = "id", headTableCellCheckbox ,RowHeight='',CellWidth='',rowHover, TableNodataPadding = '',TableNodataLineHeight=''} = props;
   const [selected, setSelected] = React.useState(initSelected || []);
   const [rowsPerPageOptions, setRowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
-  const [spin, setSpin] = React.useState(false)
+  // const [spin, setSpin] = React.useState(false)
   const [onRow, setOnRow] = React.useState('')
 
   useEffect(() => {
@@ -52,10 +53,10 @@ export default function EnhancedTable(props) {
     setSelected([]);
     checkboxData([]);
   };
-  React.useEffect(() => {
+  // React.useEffect(() => {
 
-    setSpin(load)
-  }, [load]);
+  //   setSpin(load)
+  // }, [load]);
   const handleClick = (event, name) => {
     const selectedIndex = selected.indexOf(name);
     let newSelected = [];
@@ -91,7 +92,7 @@ export default function EnhancedTable(props) {
   return (
     <div className={classes.root}>
       <Paper className={classes.paper} classes={{ elevation1: elevation1 || classes.elevation1 }} >
-        <Spin spin={spin} />
+        {/* <Spin spin={spin} /> */}
         {toolbar && toolbar}
         <TableContainer style={{ ...tableContainerStyle }}>
           <Table stickyHeader={stickyheader || false} className={classes.table} style={{ ...tableStyle }} aria-labelledby="tableTitle" size={size || "medium"} aria-label="cloudam table header" >
@@ -111,7 +112,7 @@ export default function EnhancedTable(props) {
               {
                 (rows.length === 0 && !load) && <TableRow>
                   <TableCell
-                    colSpan={headCells.filter(k => k.id === "checkbox").length === 0 ? headCells.length : headCells.length + 1}
+                    colSpan={headCells?.filter(k => k.id === "checkbox")?.length === 0 ? headCells?.length : headCells?.length + 1}
                     className={classes.TypographyStyle}
                     style={{ minHeight: minHeight, height: minHeight, borderBottom: borderBottom ,padding:TableNodataPadding,lineHeight:TableNodataLineHeight}}
                   >
@@ -138,7 +139,6 @@ export default function EnhancedTable(props) {
                       border: onRow === row[param || "id"] ? !row[disabledparam] ? "" : '1px solid #136EFA' : "",
                       backgroundColor: onRow === row[param || "id"] ? !row[disabledparam] ? "rgba(255, 255, 255, 0.4)" : "rgba(19, 110, 250, 0.1)" : "",
                       cursor: props.cursor ? (row[props.cursor] ? "pointer" : "auto") : (onRowClick ? !row[disabledparam] ? "no-drop" : "pointer" : "auto"),
-                      opacity: !row[disabledparam] ? 0.3 : 1
                     }}
                     role="checkbox"
                     aria-checked={isItemSelected}
@@ -162,7 +162,11 @@ export default function EnhancedTable(props) {
                             classes={{
                               body: props.bodyTableCell || classes.bodyTableCell
                             }}
-                          > {row[item.id]} </TableCell>
+                          > {
+                              item.render ? <>{item.render(row,index)}</> :
+                              row[item.id]
+                              } 
+                          </TableCell>
                         )
                       })
                     }

src/components/Material.Ui/Table/ActionsComponent.jsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-01 16:53:15
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-02 10:16:28
+ * @FilePath: /bkunyun/src/components/Material.Ui/Table/ActionsComponent.jsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from "@material-ui/core/Button";
-import IconButton from '@material-ui/core/IconButton';
-import FirstPageIcon from '@material-ui/icons/FirstPage';
-import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
-import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
-import LastPageIcon from '@material-ui/icons/LastPage';
-import makeStyles from "@material-ui/styles/makeStyles";
+import Button from "@mui/material/Button";
+import IconButton from '@mui/material/IconButton';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import LastPageIcon from '@mui/icons-material/LastPage';
+import { makeStyles } from "@mui/styles";
 const useStyles = makeStyles({
     firstPageIconStyle: { width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', margin: "0 6px" },
     KeyboardArrowLeftStyle:{ width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', marginRight: "3px" },

src/components/Material.Ui/Table/EnhancedTableHead.jsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-01 16:53:15
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-02 10:19:08
+ * @FilePath: /bkunyun/src/components/Material.Ui/Table/EnhancedTableHead.jsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import React from "react";
-import TableHead from "@material-ui/core/TableHead";
-import TableSortLabel from "@material-ui/core/TableSortLabel";
+import TableHead from "@mui/material/TableHead";
+import TableSortLabel from "@mui/material/TableSortLabel";
 import PropTypes from "prop-types";
-import TableRow from "@material-ui/core/TableRow";
-import TableCell from "@material-ui/core/TableCell";
-import Checkbox from "@material-ui/core/Checkbox";
-import { Typography } from "@material-ui/core";
-import Tooltip from '@material-ui/core/Tooltip';
-import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import Checkbox from "@mui/material/Checkbox";
+import Typography  from "@mui/material/Typography";
+import Tooltip from '@mui/material/Tooltip';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 
 const EnhancedTableHead = (props) => {
     const { classes, onSelectAllClick, order, orderBy, TableHeadClasses, numSelected, rowCount, onRequestSort, headCells, headTableCell, headTableCellCheckbox,RowStyle } = props;

src/components/Material.Ui/Table/EnhancedTableToolbar.jsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-01 16:53:15
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-02 10:18:54
+ * @FilePath: /bkunyun/src/components/Material.Ui/Table/EnhancedTableToolbar.jsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 
 import React from "react";
 import { useToolbarStyles } from "./function";
-import Toolbar from "@material-ui/core/Toolbar";
-import Typography from "@material-ui/core/Typography";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
-import DeleteIcon from "@material-ui/icons/Delete";
-import FilterListIcon from "@material-ui/icons/FilterList";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import DeleteIcon from "@mui/icons-material/Delete";
+import FilterListIcon from "@mui/icons-material/FilterList";
 const EnhancedTableToolbar = (props) => {
     const classes = useToolbarStyles();
     const { numSelected } = props;

src/components/Material.Ui/Table/function.js

-import { lighten, makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
 
 /*
  *@分割线=======================================================================================================================================
  *@Description: 排序算法
- *@File: 
- *@param: {} [] 
+ *@File:
+ *@param: {} []
  *@MethodAuthor:  dawei.liu
  *@Date: 2021-07-22 14:42:51
-*/
+ */
 export function descendingComparator(a, b, orderBy) {
-  if (b[orderBy] < a[orderBy])
-    return -1;
-  if (b[orderBy] > a[orderBy])
-    return 1;
+  if (b[orderBy] < a[orderBy]) return -1;
+  if (b[orderBy] > a[orderBy]) return 1;
   return 0;
 }
 /*
  *@分割线=======================================================================================================================================
- *@Description: 表格排序  
+ *@Description: 表格排序
  *@File: /commons/components/Material.Ui/Table.jsx
- *@param: {} [] 
+ *@param: {} []
  *@MethodAuthor:  dawei.liu
  *@Date: 2021-07-22 14:42:36
-*/
+ */
 export function getComparator(order, orderBy) {
   return order === "desc"
     ? (a, b) => descendingComparator(a, b, orderBy)
@@ -31,11 +29,11 @@ export function getComparator(order, orderBy) {
 /*
  *@分割线=======================================================================================================================================
  *@Description: 排序算法
- *@File: 
- *@param: {} [] 
+ *@File:
+ *@param: {} []
  *@MethodAuthor:  dawei.liu
  *@Date: 2021-07-22 14:42:24
-*/
+ */
 export function stableSort(array, comparator) {
   const stabilizedThis = array.map((el, index) => [el, index]);
   stabilizedThis.sort((a, b) => {
@@ -49,10 +47,10 @@ export function stableSort(array, comparator) {
  *@分割线=======================================================================================================================================
  *@Description: table toolbar styles
  *@File: EnhancedTableToolbar
- *@param: {} [] 
+ *@param: {} []
  *@MethodAuthor:  dawei.liu
  *@Date: 2021-07-22 14:41:53
-*/
+ */
 export const useToolbarStyles = makeStyles((theme) => ({
   root: {
     paddingLeft: theme.spacing(2),
@@ -61,38 +59,89 @@ export const useToolbarStyles = makeStyles((theme) => ({
   highlight:
     theme.palette.type === "light"
       ? {
-        color: theme.palette.primary.main,
-        backgroundColor: lighten(theme.palette.primary.light, 0.85),
-      }
+          color: theme.palette.primary.main,
+          backgroundColor: "red",
+        }
       : {
-        color: theme.palette.text.primary,
-        backgroundColor: theme.palette.primary.dark,
-      },
+          color: theme.palette.text.primary,
+          backgroundColor: theme.palette.primary.dark,
+        },
   title: { flex: "1 1 100%" },
 }));
 /*
  *@分割线=======================================================================================================================================
  *@Description: 样式
- *@File: 
- *@param: {theme} [theme] 
+ *@File:
+ *@param: {theme} [theme]
  *@MethodAuthor:  dawei.liu
  *@Date: 2021-07-22 14:40:37
-*/
+ */
 export const useStyles = makeStyles((theme) => ({
   root: { width: "100%", position: "relative" },
-  paper: { width: "100%", marginBottom: theme.spacing(2) },
+  paper: { width: "100%", marginBottom: 8 },
   elevation1: { boxShadow: "none", padding: "20px" },
   elevationNoPadding: { boxShadow: "none", padding: "0" },
   table: { minWidth: 500 },
-  visuallyHidden: { border: 0, clip: "rect(0 0 0 0)", height: 1, margin: -1, overflow: "hidden", padding: 0, position: "absolute", top: 20, width: 1 },
-  LinearProgressStyle: { position: "absolute", left: 0, top: "0", width: "100%" },
-  TypographyStyle: { height: "300px", width: "100%", justifyContent: "center", alignItems: "center", color: "#666", fontSize: "16px", textAlign: "center" },
-  bodyTableCell: { color: "#222222", fontSize: "12px", borderBottom: "1px solid rgba(34, 34, 34, 0.08)", padding: "10px", paddingLeft: "16px" },
-  headTableCell: { color: "rgba(34, 34, 34, 0.65)", fontSize: "12px", padding: "16px" },
-  rootTableContainer: { position: "relative", overflowX: "auto", maxHeight: "700px" },
+  visuallyHidden: {
+    border: 0,
+    clip: "rect(0 0 0 0)",
+    height: 1,
+    margin: -1,
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    top: 20,
+    width: 1,
+  },
+  LinearProgressStyle: {
+    position: "absolute",
+    left: 0,
+    top: "0",
+    width: "100%",
+  },
+  TypographyStyle: {
+    height: "300px",
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    color: "#666",
+    fontSize: "16px",
+    textAlign: "center",
+  },
+  bodyTableCell: {
+    color: "#222222",
+    fontSize: "12px",
+    borderBottom: "1px solid rgba(34, 34, 34, 0.08)",
+    padding: "10px",
+    paddingLeft: "16px",
+  },
+  headTableCell: {
+    color: "rgba(34, 34, 34, 0.65)",
+    fontSize: "12px",
+    padding: "16px",
+  },
+  rootTableContainer: {
+    position: "relative",
+    overflowX: "auto",
+    maxHeight: "700px",
+  },
   TableHeadClasses: { backgroundColor: "rgba(34, 34, 34,  0.03)" },
-  bodyTableCellRoot: { borderBottom: "1px solid rgba(34, 34, 34, 0.08)", },
-  TypographyboderStyle: { height: "300px", width: "100%", justifyContent: "center", alignItems: "center", color: "#666", fontSize: "16px", textAlign: "center", borderBottom: "none" },
-  rootTableboderContainer: { position: "relative", overflowX: "auto", maxHeight: "700px", border: "1px solid rgb(216, 216, 216)" },
-  cancelHoverStyle:{"&:hover": { background: 'none !important' },}
-}));
\ No newline at end of file
+  bodyTableCellRoot: { borderBottom: "1px solid rgba(34, 34, 34, 0.08)" },
+  TypographyboderStyle: {
+    height: "300px",
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    color: "#666",
+    fontSize: "16px",
+    textAlign: "center",
+    borderBottom: "none",
+  },
+  rootTableboderContainer: {
+    position: "relative",
+    overflowX: "auto",
+    maxHeight: "700px",
+    border: "1px solid rgb(216, 216, 216)",
+  },
+  cancelHoverStyle: { "&:hover": { background: "none !important" } },
+}));

src/components/mui/Dialog.tsx

+import React from "react";
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+
+export interface IDialogProps {
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 弹窗的标题 */
+  title?: string;
+  /** 是否显示弹窗 */
+  open: boolean;
+  isHideHeader?: boolean;
+  /** 是否隐藏弹窗底部按钮部分 */
+  isHideFooter?: boolean;
+  /** 自定义底部按钮 */
+  footerRender?: () => React.ReactNode;
+  /** 是否显示取消按钮 */
+  showCancel?: boolean;
+  /** 是否显示确定按钮 */
+  showConfirm?: boolean;
+  /** 关闭弹窗时的回调函数 */
+  onClose?: () => void;
+  /** 点击确定按钮时的回调函数 */
+  onConfirm?: () => void;
+  /** 取消按钮文案 */
+  cancelText?: string;
+  /** 确认按钮文案 */
+  okText?: string;
+  /** 是否禁用确认按钮 */
+  disabledConfirm?: boolean;
+  children: React.ReactNode;
+}
+
+export interface IFooter {
+  isHideFooter?: boolean;
+  footerRender?: () => React.ReactNode;
+  showCancel?: boolean;
+  /** 是否显示确定按钮 */
+  showConfirm?: boolean;
+  /** 关闭弹窗时的回调函数 */
+  onClose?: () => void;
+  /** 点击确定按钮时的回调函数 */
+  onConfirm?: () => void;
+  /** 取消按钮文案 */
+  cancelText?: string;
+  /** 确认按钮文案 */
+  okText?: string;
+  /** 是否禁用确认按钮 */
+  disabledConfirm?: boolean;
+}
+
+const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
+  const {
+    title,
+    open,
+    style,
+    onClose,
+    onConfirm,
+    isHideFooter,
+    isHideHeader,
+    children,
+    footerRender,
+    className,
+    showCancel = true,
+    /** 是否显示确定按钮 */
+    showConfirm = true,
+    cancelText,
+    okText,
+    disabledConfirm,
+  } = props;
+  const Footer = () => {
+    if (isHideFooter) return null;
+    return footerRender ? (
+      footerRender()
+    ) : (
+      <DialogActions style={{ padding: "0 24px 24px 24px" }}>
+        {showCancel ? (
+          <Button onClick={onClose} variant="outlined" size="small">
+            {cancelText || "取消"}
+          </Button>
+        ) : null}
+        {showConfirm ? (
+          <Button
+            onClick={onConfirm}
+            variant="contained"
+            size="small"
+            disabled={disabledConfirm}
+          >
+            {okText || "确定"}
+          </Button>
+        ) : null}
+      </DialogActions>
+    );
+  };
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      style={style}
+      className={className}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      {isHideHeader ? null : (
+        <DialogTitle id="alert-dialog-title">
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <span>{title}</span>
+            <CloseIcon
+              onClick={onClose}
+              style={{ color: "#C2C6CC", cursor: "pointer" }}
+            />
+          </div>
+        </DialogTitle>
+      )}
+      <DialogContent style={{ minWidth: 400 }}>{children}</DialogContent>
+      {Footer()}
+    </Dialog>
+  );
+};
+
+export default MyDialog;

src/components/mui/Select.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2021-12-04 15:46:25
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-05 18:06:47
+ * @FilePath: /lionet-slb-pc/src/components/SearchView/components/Collapse.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import * as React from "react";
+import Box from "@mui/material/Box";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+
+interface IOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+interface IProps {
+  value?: IOption;
+  options: IOption[];
+  onChange?: (val: IOption) => void;
+  title?: string;
+}
+export default function BasicSelect(props: IProps) {
+  const { value, options, onChange, title } = props;
+
+  const handleChange = (event: SelectChangeEvent) => {
+    const newValue = options?.filter((item) => {
+      return item.value === event.target.value;
+    });
+    if (onChange) {
+      onChange(newValue[0] || { label: "", value: "" });
+    }
+  };
+
+  return (
+    <Box sx={{ minWidth: 120 }}>
+      <FormControl fullWidth>
+        <InputLabel id="demo-simple-select-label">
+          {title || "请选择"}
+        </InputLabel>
+        <Select
+          labelId="demo-simple-select-label"
+          id="demo-simple-select"
+          value={value?.value}
+          label={title || "请选择"}
+          onChange={handleChange}
+        >
+          {options.length
+            ? options?.map((item: IOption) => {
+                return (
+                  <MenuItem value={item.value} disabled={item?.disabled}>
+                    {item.label}
+                  </MenuItem>
+                );
+              })
+            : null}
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}

src/components/mui/Table.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-02 10:38:01
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-02 13:45:33
+ * @FilePath: /bkunyun/src/components/mui/Table.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import * as React from "react";
+import MuiTable from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import { Box } from "@mui/material";
+
+interface IColumns {
+  key: string;
+  title: string;
+  align?: "left" | "center" | "right";
+  render?: (value: any, index: number) => void;
+}
+
+interface IProps {
+  columns: IColumns[];
+  dataSource: any;
+}
+
+export default function Table(props: IProps) {
+  const { columns = [], dataSource = [] } = props;
+  return (
+    <TableContainer component={Paper}>
+      <MuiTable sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            {columns?.map((item: IColumns) => {
+              return (
+                <TableCell {...item} key={item.key}>
+                  {item.title}
+                </TableCell>
+              );
+            })}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {dataSource.length ? (
+            dataSource?.map(() => (
+              <TableRow
+                key={Math.random()}
+                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+              >
+                {columns?.map((item: IColumns, index: number) => {
+                  if (item.render) {
+                    return <>{item.render(item, index)}</>;
+                  } else {
+                    return (
+                      <TableCell align="right" key={item.key}>
+                        {item.title}
+                      </TableCell>
+                    );
+                  }
+                })}
+              </TableRow>
+            ))
+          ) : (
+            <Box p={2}>暂无数据</Box>
+          )}
+        </TableBody>
+      </MuiTable>
+    </TableContainer>
+  );
+}

src/components/mui/Tabs.tsx

@@ -2,11 +2,12 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-01 14:46:35
+ * @LastEditTime: 2022-06-02 18:48:15
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import { memo } from "react";
+import { isEqual } from "lodash";
 
 import { Box } from "@mui/system";
 import Tab from "@mui/material/Tab";
@@ -52,5 +53,11 @@ const Tabs = (props: IProps) => {
     </TabContext>
   );
 };
+const handleEqual = (prvProps: IProps, nextProps: IProps) => {
+  if (isEqual(prvProps, nextProps)) {
+    return true;
+  }
+  return false;
+};
 
-export default memo(Tabs);
+export default memo(Tabs, handleEqual);

src/react-app-env.d.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:17:23
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-05-31 16:39:05
+ * @LastEditTime: 2022-06-02 17:15:35
  * @FilePath: /bkunyun/src/react-app-env.d.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -78,4 +78,6 @@ declare module '*.module.sass' {
   export default classes;
 }
 
-declare module '@mui/lab';
\ No newline at end of file
+declare module '@mui/lab';
+declare module 'lodash';
+declare module "@mui/material/Tab"

src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-05-31 10:18:13
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-04 18:28:31
+ * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import Dialog from "@/components/mui/Dialog";
+import { memo } from "react";
+
+interface IProps {
+  setAddMemberDialog: (val: boolean) => void;
+  addMemberDialog: boolean;
+}
+
+const AddMember = (props: IProps) => {
+  const { addMemberDialog, setAddMemberDialog } = props;
+
+  const onClose = () => {
+    setAddMemberDialog(false);
+  };
+  const onConfirm = () => {
+    setAddMemberDialog(false);
+  };
+  return (
+    <>
+      <Dialog
+        open={addMemberDialog}
+        onClose={onClose}
+        onConfirm={onConfirm}
+        title="移出项目"
+      >
+        <div>确认移出该成员吗？</div>
+      </Dialog>
+    </>
+  );
+};
+
+export default memo(AddMember);

src/views/Project/ProjectSetting/ProjectMembers/components/ChangePermission.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-05-31 10:18:13
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-05 18:15:22
+ * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+// import Dialog from "@/components/Material.Ui/Dialog";
+import Select from "@/components/mui/Select";
+import Dialog from "@/components/mui/Dialog";
+import { memo } from "react";
+
+interface IProps {
+  setPermissionDialog: (val: boolean) => void;
+  permissionDialog: boolean;
+}
+
+const ChangePermission = (props: IProps) => {
+  const { permissionDialog, setPermissionDialog } = props;
+
+  const onClose = () => {
+    setPermissionDialog(false);
+  };
+  const onConfirm = () => {
+    setPermissionDialog(false);
+  };
+  return (
+    <>
+      <Dialog
+        open={permissionDialog}
+        onClose={onClose}
+        onConfirm={onConfirm}
+        title="更改权限"
+      >
+        <Select title="项目权限" options={[]} />
+      </Dialog>
+    </>
+  );
+};
+
+export default memo(ChangePermission);

src/views/Project/ProjectSetting/ProjectMembers/components/RemoveItem.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-05-31 10:18:13
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-04 17:54:50
+ * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+// import Dialog from "@/components/Material.Ui/Dialog";
+import Dialog from "@/components/mui/Dialog";
+import { memo } from "react";
+
+interface IProps {
+  setRemoveDialog: (val: boolean) => void;
+  removeDialog: boolean;
+}
+
+const RemoveItem = (props: IProps) => {
+  const { removeDialog, setRemoveDialog } = props;
+
+  const onClose = () => {
+    setRemoveDialog(false);
+  };
+  const onConfirm = () => {
+    setRemoveDialog(false);
+  };
+  return (
+    <>
+      <Dialog
+        open={removeDialog}
+        onClose={onClose}
+        onConfirm={onConfirm}
+        title="移出项目"
+      >
+        <div>确认移出该成员吗？</div>
+      </Dialog>
+    </>
+  );
+};
+
+export default memo(RemoveItem);

src/views/Project/ProjectSetting/ProjectMembers/index.module.css

+.headerBox {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.removeItemBox {
+  color: #ff4e4e;
+  margin-left: 32px;
+  cursor: pointer;
+}

src/views/Project/ProjectSetting/ProjectMembers/index.tsx

@@ -2,16 +2,136 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-01 09:14:02
+ * @LastEditTime: 2022-06-04 18:33:02
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import { memo } from "react";
+import { memo, useEffect, useState } from "react";
 
-import { Box } from "@mui/system";
+import { Box } from "@mui/material";
+import Button from "@mui/material/Button";
+import SearchIcon from "@mui/icons-material/Search";
+import Add from "@mui/icons-material/Add";
+import Table from "@/components/Material.Ui/Table";
+import { useHttp } from "@/api/http";
+import Input from "@/components/Material.Ui/Input";
+import RemoveItem from "./components/RemoveItem";
+import ChangePermission from "./components/ChangePermission";
+import AddMember from "./components/AddMember";
 
+import styles from "./index.module.css";
 const ProjectMembers = () => {
-  return <Box>项目成员</Box>;
+  const http = useHttp();
+
+  const columns = [
+    { id: "username", label: "成员名称", width: "20%" },
+    { id: "projectRoleDesc", label: "项目权限", width: "20%" },
+    { id: "phone", label: "联系方式", width: "20%" },
+    {
+      id: "operation",
+      label: "操作",
+      width: "20%",
+      render: (item: any) => {
+        console.log(item, "000000");
+        return (
+          <>
+            <span
+              style={{ color: "#1370FF", cursor: "pointer" }}
+              onClick={onPermissionBtn}
+            >
+              更改权限
+            </span>
+            <span className={styles.removeItemBox} onClick={onRemoveItemBtn}>
+              移出项目
+            </span>
+          </>
+        );
+      },
+    },
+  ];
+
+  /** 删除成员 */
+  const [removeDialog, setRemoveDialog] = useState<boolean>(false);
+  /** 更改权限 */
+  const [permissionDialog, setPermissionDialog] = useState<boolean>(false);
+  /** 添加成员 */
+  const [addMemberDialog, setAddMemberDialog] = useState<boolean>(false);
+
+  useEffect(() => {
+    http
+      .get("/cpp/project/list", {
+        params: { product: "cadd" },
+      })
+      .then((res) => {
+        console.log(res);
+      });
+  }, [http]);
+
+  /** 点击添加成员 */
+  const onAddMember = () => {
+    setAddMemberDialog(true);
+  };
+
+  /** 点击删除成员 */
+  const onRemoveItemBtn = () => {
+    setRemoveDialog(true);
+  };
+
+  /** 点击更改权限 */
+  const onPermissionBtn = () => {
+    setPermissionDialog(true);
+  };
+
+  return (
+    <>
+      <Box className={styles.headerBox}>
+        <Input
+          onChange={(e: any) => {
+            console.log(e);
+          }}
+          size="xsmall"
+          placeholder="搜索项目成员"
+          endAdornment={<SearchIcon />}
+        />
+        <Button
+          variant="contained"
+          onClick={onAddMember}
+          startIcon={<Add />}
+          size="small"
+        >
+          添加成员
+        </Button>
+      </Box>
+      <Table
+        rowHover={true}
+        stickyheader={true}
+        rows={[
+          {
+            username: "wuyongs",
+            phone: 2323424,
+          },
+        ]}
+        rowsPerPage={"99"}
+        headCells={columns}
+        nopadding={true}
+        footer={false}
+        tableStyle={{ minWidth: "auto" }}
+        borderBottom={"none"}
+      />
+      <RemoveItem
+        removeDialog={removeDialog}
+        setRemoveDialog={setRemoveDialog}
+      />
+      <ChangePermission
+        permissionDialog={permissionDialog}
+        setPermissionDialog={setPermissionDialog}
+      />
+      <AddMember
+        addMemberDialog={addMemberDialog}
+        setAddMemberDialog={setAddMemberDialog}
+      />
+    </>
+  );
 };
 
 export default memo(ProjectMembers);

src/views/Project/ProjectSetting/index.tsx

@@ -2,24 +2,37 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-01 09:23:16
+ * @LastEditTime: 2022-06-02 18:43:59
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import { memo, useState } from "react";
+import { memo, useState, useMemo } from "react";
 
 import { Box } from "@mui/system";
 import projectImg from "@/assets/project/projectIconSmall.svg";
-import Tab from "@mui/material/Tab";
-import { TabContext, TabList, TabPanel } from "@mui/lab";
 import ProjectMembers from "./ProjectMembers";
 import BaseInfo from "./BaseInfo";
+import Tabs from "@/components/mui/Tabs";
 
 const ProjectSetting = () => {
   const [value, setValue] = useState("projectMember");
 
-  console.log(setValue, 111);
-  const changeTabs = (a: any, val: any) => {
+  const tabList = useMemo(() => {
+    return [
+      {
+        label: "项目成员",
+        value: "projectMember",
+        component: <ProjectMembers />,
+      },
+      {
+        label: "基础信息",
+        value: "baseInfo",
+        component: <BaseInfo />,
+      },
+    ];
+  }, []);
+
+  const changeTabs = (val: string) => {
     setValue(val);
   };
 
@@ -31,20 +44,7 @@ const ProjectSetting = () => {
       </div>
 
       <Box sx={{ width: "100%", typography: "body1" }}>
-        <TabContext value={value}>
-          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-            <TabList onChange={changeTabs} aria-label="lab API tabs example">
-              <Tab label="项目成员" value="projectMember" />
-              <Tab label="基础信息" value="baseInfo" />
-            </TabList>
-          </Box>
-          <TabPanel value="projectMember">
-            <ProjectMembers />
-          </TabPanel>
-          <TabPanel value="baseInfo">
-            <BaseInfo />
-          </TabPanel>
-        </TabContext>
+        <Tabs value={value} onChange={changeTabs} tabList={tabList} />
       </Box>
     </Box>
   );

yarn.lock

@@ -1018,7 +1018,7 @@
     "core-js-pure" "^3.20.2"
     "regenerator-runtime" "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   "integrity" "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg=="
   "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz"
   "version" "7.17.9"
@@ -1139,6 +1139,39 @@
   "resolved" "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.0.tgz"
   "version" "1.0.0"
 
+"@date-io/core@^2.14.0":
+  "integrity" "sha512-qFN64hiFjmlDHJhu+9xMkdfDG2jLsggNxKXglnekUpXSq8faiqZgtHm2lsHCUuaPDTV6wuXHcCl8J1GQ5wLmPw=="
+  "resolved" "https://registry.npmmirror.com/@date-io/core/-/core-2.14.0.tgz"
+  "version" "2.14.0"
+
+"@date-io/date-fns@^2.11.0":
+  "integrity" "sha512-4fJctdVyOd5cKIKGaWUM+s3MUXMuzkZaHuTY15PH70kU1YTMrCoauA7hgQVx9qj0ZEbGrH9VSPYJYnYro7nKiA=="
+  "resolved" "https://registry.npmmirror.com/@date-io/date-fns/-/date-fns-2.14.0.tgz"
+  "version" "2.14.0"
+  dependencies:
+    "@date-io/core" "^2.14.0"
+
+"@date-io/dayjs@^2.11.0":
+  "integrity" "sha512-4fRvNWaOh7AjvOyJ4h6FYMS7VHLQnIEeAV5ahv6sKYWx+1g1UwYup8h7+gPuoF+sW2hTScxi7PVaba2Jk/U8Og=="
+  "resolved" "https://registry.npmmirror.com/@date-io/dayjs/-/dayjs-2.14.0.tgz"
+  "version" "2.14.0"
+  dependencies:
+    "@date-io/core" "^2.14.0"
+
+"@date-io/luxon@^2.11.1":
+  "integrity" "sha512-KmpBKkQFJ/YwZgVd0T3h+br/O0uL9ZdE7mn903VPAG2ZZncEmaUfUdYKFT7v7GyIKJ4KzCp379CRthEbxevEVg=="
+  "resolved" "https://registry.npmmirror.com/@date-io/luxon/-/luxon-2.14.0.tgz"
+  "version" "2.14.0"
+  dependencies:
+    "@date-io/core" "^2.14.0"
+
+"@date-io/moment@^2.11.0":
+  "integrity" "sha512-VsoLXs94GsZ49ecWuvFbsa081zEv2xxG7d+izJsqGa2L8RPZLlwk27ANh87+SNnOUpp+qy2AoCAf0mx4XXhioA=="
+  "resolved" "https://registry.npmmirror.com/@date-io/moment/-/moment-2.14.0.tgz"
+  "version" "2.14.0"
+  dependencies:
+    "@date-io/core" "^2.14.0"
+
 "@emotion/babel-plugin@^11.7.1":
   "integrity" "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw=="
   "resolved" "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz"
@@ -1545,6 +1578,20 @@
     "prop-types" "^15.7.2"
     "react-is" "^17.0.2"
 
+"@mui/base@5.0.0-alpha.83":
+  "integrity" "sha512-/bFcjiI36R2Epf2Y3BkZOIdxrz5uMLqOU4cRai4igJ8DHTRMZDeKbOff0SdvwJNwg8r6oPUyoeOpsWkaOOX9/g=="
+  "resolved" "https://registry.npmmirror.com/@mui/base/-/base-5.0.0-alpha.83.tgz"
+  "version" "5.0.0-alpha.83"
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@emotion/is-prop-valid" "^1.1.2"
+    "@mui/types" "^7.1.3"
+    "@mui/utils" "^5.8.0"
+    "@popperjs/core" "^2.11.5"
+    "clsx" "^1.1.1"
+    "prop-types" "^15.8.1"
+    "react-is" "^17.0.2"
+
 "@mui/icons-material@^5.6.2":
   "integrity" "sha512-9QdI7axKuBAyaGz4mtdi7Uy1j73/thqFmEuxpJHxNC7O8ADEK1Da3t2veK2tgmsXsUlAHcAG63gg+GvWWeQNqQ=="
   "resolved" "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.6.2.tgz"
@@ -1552,7 +1599,23 @@
   dependencies:
     "@babel/runtime" "^7.17.2"
 
-"@mui/material@^5.0.0", "@mui/material@^5.6.4":
+"@mui/lab@^5.0.0-alpha.83":
+  "integrity" "sha512-HLYD6E3PAlzKMGZkkpiPI7trHP3WYDvrjQstEsFwdaGy9AMWPmyTxhwUyfB4VVHOx3zcj4p/a36kECDtEOAJ+g=="
+  "resolved" "https://registry.npmmirror.com/@mui/lab/-/lab-5.0.0-alpha.84.tgz"
+  "version" "5.0.0-alpha.84"
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@mui/base" "5.0.0-alpha.83"
+    "@mui/system" "^5.8.2"
+    "@mui/utils" "^5.8.0"
+    "@mui/x-date-pickers" "5.0.0-alpha.1"
+    "clsx" "^1.1.1"
+    "prop-types" "^15.8.1"
+    "react-is" "^17.0.2"
+    "react-transition-group" "^4.4.2"
+    "rifm" "^0.12.1"
+
+"@mui/material@^5.0.0", "@mui/material@^5.2.3", "@mui/material@^5.6.4":
   "integrity" "sha512-7TD+u/SExZK2a55w6reX56oPk37gKr/M/XGt156X+m0d9LhzOsW864nkErIX/H8oSkX/6kCimxu1FDsO+gjiVw=="
   "resolved" "https://registry.npmjs.org/@mui/material/-/material-5.6.4.tgz"
   "version" "5.6.4"
@@ -1570,54 +1633,92 @@
     "react-is" "^17.0.2"
     "react-transition-group" "^4.4.2"
 
-"@mui/private-theming@^5.6.2":
-  "integrity" "sha512-IbrSfFXfiZdyhRMC2bgGTFtb16RBQ5mccmjeh3MtAERWuepiCK7gkW5D9WhEsfTu6iez+TEjeUKSgmMHlsM2mg=="
-  "resolved" "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.6.2.tgz"
-  "version" "5.6.2"
+"@mui/private-theming@^5.8.0":
+  "integrity" "sha512-MjRAneTmCKLR9u2S4jtjLUe6gpHxlbb4g2bqpDJ2PdwlvwsWIUzbc/gVB4dvccljXeWxr5G2M/Co2blXisvFIw=="
+  "resolved" "https://registry.npmmirror.com/@mui/private-theming/-/private-theming-5.8.0.tgz"
+  "version" "5.8.0"
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@mui/utils" "^5.6.1"
-    "prop-types" "^15.7.2"
+    "@mui/utils" "^5.8.0"
+    "prop-types" "^15.8.1"
 
-"@mui/styled-engine@^5.6.1":
-  "integrity" "sha512-jEhH6TBY8jc9S8yVncXmoTYTbATjEu44RMFXj6sIYfKr5NArVwTwRo3JexLL0t3BOAiYM4xsFLgfKEIvB9SAeQ=="
-  "resolved" "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.6.1.tgz"
-  "version" "5.6.1"
+"@mui/styled-engine@^5.8.0":
+  "integrity" "sha512-Q3spibB8/EgeMYHc+/o3RRTnAYkSl7ROCLhXJ830W8HZ2/iDiyYp16UcxKPurkXvLhUaILyofPVrP3Su2uKsAw=="
+  "resolved" "https://registry.npmmirror.com/@mui/styled-engine/-/styled-engine-5.8.0.tgz"
+  "version" "5.8.0"
   dependencies:
     "@babel/runtime" "^7.17.2"
     "@emotion/cache" "^11.7.1"
-    "prop-types" "^15.7.2"
+    "prop-types" "^15.8.1"
 
-"@mui/system@^5.6.4":
-  "integrity" "sha512-7rsWED1wMFMePySJobsBerFZNu7ga580QSi3Zd6sJR8nVj12qD3yIdfvxA70/PxJ/805KbIT0GX7edKI+hpyhA=="
-  "resolved" "https://registry.npmjs.org/@mui/system/-/system-5.6.4.tgz"
-  "version" "5.6.4"
+"@mui/styles@^5.8.0":
+  "integrity" "sha512-kssqBWhCFo7AMiu93QziR8qxq3z8bJm2qCYdmNadE5NvEla7Xwu3twNJUWnCEoeDeoFMk/2H0ACMOdrasI9ANw=="
+  "resolved" "https://registry.npmmirror.com/@mui/styles/-/styles-5.8.0.tgz"
+  "version" "5.8.0"
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@mui/private-theming" "^5.6.2"
-    "@mui/styled-engine" "^5.6.1"
+    "@emotion/hash" "^0.8.0"
+    "@mui/private-theming" "^5.8.0"
     "@mui/types" "^7.1.3"
-    "@mui/utils" "^5.6.1"
+    "@mui/utils" "^5.8.0"
     "clsx" "^1.1.1"
     "csstype" "^3.0.11"
-    "prop-types" "^15.7.2"
+    "hoist-non-react-statics" "^3.3.2"
+    "jss" "^10.8.2"
+    "jss-plugin-camel-case" "^10.8.2"
+    "jss-plugin-default-unit" "^10.8.2"
+    "jss-plugin-global" "^10.8.2"
+    "jss-plugin-nested" "^10.8.2"
+    "jss-plugin-props-sort" "^10.8.2"
+    "jss-plugin-rule-value-function" "^10.8.2"
+    "jss-plugin-vendor-prefixer" "^10.8.2"
+    "prop-types" "^15.8.1"
+
+"@mui/system@^5.2.3", "@mui/system@^5.6.4", "@mui/system@^5.8.2":
+  "integrity" "sha512-N74gDNKM+MnWvKTMmCPvCVLH4f0ZzakP1bcMDaPctrHwcyxNcEmtTGNpIiVk0Iu7vtThZAFL3DjHpINPGF7+cg=="
+  "resolved" "https://registry.npmmirror.com/@mui/system/-/system-5.8.2.tgz"
+  "version" "5.8.2"
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@mui/private-theming" "^5.8.0"
+    "@mui/styled-engine" "^5.8.0"
+    "@mui/types" "^7.1.3"
+    "@mui/utils" "^5.8.0"
+    "clsx" "^1.1.1"
+    "csstype" "^3.1.0"
+    "prop-types" "^15.8.1"
 
 "@mui/types@^7.1.3":
   "integrity" "sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA=="
   "resolved" "https://registry.npmjs.org/@mui/types/-/types-7.1.3.tgz"
   "version" "7.1.3"
 
-"@mui/utils@^5.6.1":
-  "integrity" "sha512-CPrzrkiBusCZBLWu0Sg5MJvR3fKJyK3gKecLVX012LULyqg2U64Oz04BKhfkbtBrPBbSQxM+DWW9B1c9hmV9nQ=="
-  "resolved" "https://registry.npmjs.org/@mui/utils/-/utils-5.6.1.tgz"
-  "version" "5.6.1"
+"@mui/utils@^5.6.0", "@mui/utils@^5.6.1", "@mui/utils@^5.8.0":
+  "integrity" "sha512-7LgUtCvz78676iC0wpTH7HizMdCrTphhBmRWimIMFrp5Ph6JbDFVuKS1CwYnWWxRyYKL0QzXrDL0lptAU90EXg=="
+  "resolved" "https://registry.npmmirror.com/@mui/utils/-/utils-5.8.0.tgz"
+  "version" "5.8.0"
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@types/prop-types" "^15.7.4"
+    "@types/prop-types" "^15.7.5"
     "@types/react-is" "^16.7.1 || ^17.0.0"
-    "prop-types" "^15.7.2"
+    "prop-types" "^15.8.1"
     "react-is" "^17.0.2"
 
+"@mui/x-date-pickers@5.0.0-alpha.1":
+  "integrity" "sha512-dLPkRiIn2Gr0momblxiOnIwrxn4SijVix+8e08mwAGWhiWcmWep1O9XTRDpZsjB0kjHYCf+kZjlRX4dxnj2acg=="
+  "resolved" "https://registry.npmmirror.com/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.1.tgz"
+  "version" "5.0.0-alpha.1"
+  dependencies:
+    "@date-io/date-fns" "^2.11.0"
+    "@date-io/dayjs" "^2.11.0"
+    "@date-io/luxon" "^2.11.1"
+    "@date-io/moment" "^2.11.0"
+    "@mui/utils" "^5.6.0"
+    "clsx" "^1.1.1"
+    "prop-types" "^15.7.2"
+    "react-transition-group" "^4.4.2"
+    "rifm" "^0.12.1"
+
 "@nodelib/fs.scandir@2.1.5":
   "integrity" "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="
   "resolved" "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -2087,7 +2188,7 @@
   "resolved" "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz"
   "version" "2.6.0"
 
-"@types/prop-types@*", "@types/prop-types@^15.7.4":
+"@types/prop-types@*", "@types/prop-types@^15.7.5":
   "integrity" "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
   "resolved" "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
   "version" "15.7.5"
@@ -2128,7 +2229,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^17.0.0 || ^18.0.0", "@types/react@^18.0.9":
+"@types/react@*", "@types/react@^17.0.0", "@types/react@^17.0.0 || ^18.0.0", "@types/react@^18.0.9":
   "integrity" "sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw=="
   "resolved" "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz"
   "version" "18.0.9"
@@ -3227,6 +3328,11 @@
   "resolved" "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz"
   "version" "1.2.2"
 
+"classnames@^2.3.1":
+  "integrity" "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+  "resolved" "https://registry.npmmirror.com/classnames/-/classnames-2.3.1.tgz"
+  "version" "2.3.1"
+
 "clean-css@^5.2.2":
   "integrity" "sha512-YYuuxv4H/iNb1Z/5IbMRoxgrzjWGhOEFfd+groZ5dMCVkpENiMZmwspdrzBo9286JjM1gZJPAyL7ZIdzuvu2AQ=="
   "resolved" "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz"
@@ -3566,6 +3672,14 @@
     "mdn-data" "2.0.4"
     "source-map" "^0.6.1"
 
+"css-vendor@^2.0.8":
+  "integrity" "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ=="
+  "resolved" "https://registry.npmmirror.com/css-vendor/-/css-vendor-2.0.8.tgz"
+  "version" "2.0.8"
+  dependencies:
+    "@babel/runtime" "^7.8.3"
+    "is-in-browser" "^1.0.2"
+
 "css-what@^3.2.1":
   "integrity" "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ=="
   "resolved" "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz"
@@ -3673,10 +3787,10 @@
   dependencies:
     "cssom" "~0.3.6"
 
-"csstype@^3.0.11", "csstype@^3.0.2":
-  "integrity" "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
-  "resolved" "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz"
-  "version" "3.0.11"
+"csstype@^3.0.11", "csstype@^3.0.2", "csstype@^3.1.0":
+  "integrity" "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+  "resolved" "https://registry.npmmirror.com/csstype/-/csstype-3.1.0.tgz"
+  "version" "3.1.0"
 
 "damerau-levenshtein@^1.0.7":
   "integrity" "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
@@ -3692,7 +3806,7 @@
     "whatwg-mimetype" "^2.3.0"
     "whatwg-url" "^8.0.0"
 
-"dayjs@^1.9.1":
+"dayjs@^1.10.7", "dayjs@^1.8.17", "dayjs@^1.9.1":
   "integrity" "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
   "resolved" "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz"
   "version" "1.11.2"
@@ -4742,6 +4856,11 @@
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
+"fsevents@^2.3.2", "fsevents@~2.3.2":
+  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
+  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  "version" "2.3.2"
+
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -5115,6 +5234,11 @@
   "resolved" "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz"
   "version" "2.1.0"
 
+"hyphenate-style-name@^1.0.3":
+  "integrity" "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+  "resolved" "https://registry.npmmirror.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz"
+  "version" "1.0.4"
+
 "iconv-lite@^0.6.3":
   "integrity" "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw=="
   "resolved" "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz"
@@ -5302,6 +5426,11 @@
   dependencies:
     "is-extglob" "^2.1.1"
 
+"is-in-browser@^1.0.2", "is-in-browser@^1.1.3":
+  "integrity" "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
+  "resolved" "https://registry.npmmirror.com/is-in-browser/-/is-in-browser-1.1.3.tgz"
+  "version" "1.1.3"
+
 "is-module@^1.0.0":
   "integrity" "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE="
   "resolved" "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz"
@@ -6061,6 +6190,76 @@
   "resolved" "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.0.tgz"
   "version" "5.0.0"
 
+"jss-plugin-camel-case@^10.8.2":
+  "integrity" "sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww=="
+  "resolved" "https://registry.npmmirror.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz"
+  "version" "10.9.0"
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "hyphenate-style-name" "^1.0.3"
+    "jss" "10.9.0"
+
+"jss-plugin-default-unit@^10.8.2":
+  "integrity" "sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w=="
+  "resolved" "https://registry.npmmirror.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz"
+  "version" "10.9.0"
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "jss" "10.9.0"
+
+"jss-plugin-global@^10.8.2":
+  "integrity" "sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ=="
+  "resolved" "https://registry.npmmirror.com/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz"
+  "version" "10.9.0"
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "jss" "10.9.0"
+
+"jss-plugin-nested@^10.8.2":
+  "integrity" "sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA=="
+  "resolved" "https://registry.npmmirror.com/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz"
+  "version" "10.9.0"
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "jss" "10.9.0"
+    "tiny-warning" "^1.0.2"
+
+"jss-plugin-props-sort@^10.8.2":
+  "integrity" "sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw=="
+  "resolved" "https://registry.npmmirror.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz"
+  "version" "10.9.0"
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "jss" "10.9.0"
+
+"jss-plugin-rule-value-function@^10.8.2":
+  "integrity" "sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg=="
+  "resolved" "https://registry.npmmirror.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz"
+  "version" "10.9.0"
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "jss" "10.9.0"
+    "tiny-warning" "^1.0.2"
+
+"jss-plugin-vendor-prefixer@^10.8.2":
+  "integrity" "sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA=="
+  "resolved" "https://registry.npmmirror.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz"
+  "version" "10.9.0"
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "css-vendor" "^2.0.8"
+    "jss" "10.9.0"
+
+"jss@^10.8.2", "jss@10.9.0":
+  "integrity" "sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw=="
+  "resolved" "https://registry.npmmirror.com/jss/-/jss-10.9.0.tgz"
+  "version" "10.9.0"
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "csstype" "^3.0.2"
+    "is-in-browser" "^1.1.3"
+    "tiny-warning" "^1.0.2"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", "jsx-ast-utils@^3.2.1":
   "integrity" "sha512-XzO9luP6L0xkxwhIJMTJQpZo/eeN60K08jHdexfD569AGxeNug6UketeHXEhROoM8aR7EcUoOQmIhcJQjcuq8Q=="
   "resolved" "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz"
@@ -6203,7 +6402,7 @@
 
 "lodash@^4.17.15", "lodash@^4.17.20", "lodash@^4.17.21", "lodash@^4.7.0":
   "integrity" "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-  "resolved" "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  "resolved" "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz"
   "version" "4.17.21"
 
 "loose-envify@^1.1.0", "loose-envify@^1.4.0":
@@ -6399,6 +6598,11 @@
   dependencies:
     "commander" "*"
 
+"moment@^2.24.0", "moment@^2.29.1", "moment@^2.29.3":
+  "integrity" "sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw=="
+  "resolved" "https://registry.npmmirror.com/moment/-/moment-2.29.3.tgz"
+  "version" "2.29.3"
+
 "ms@^2.1.1", "ms@2.1.2":
   "integrity" "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
   "resolved" "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
@@ -7550,7 +7754,7 @@
     "strip-ansi" "^6.0.1"
     "text-table" "^0.2.0"
 
-"react-dom@^17.0.0 || ^18.0.0", "react-dom@^18.0.0", "react-dom@^18.1.0", "react-dom@>=16.6.0", "react-dom@>=16.8":
+"react-dom@^17.0.0 || ^18.0.0", "react-dom@^17.0.2 || ^18.0.0", "react-dom@^18.0.0", "react-dom@^18.1.0", "react-dom@>=16.6.0", "react-dom@>=16.8":
   "integrity" "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz"
   "version" "18.1.0"
@@ -7613,7 +7817,7 @@
     "loose-envify" "^1.4.0"
     "prop-types" "^15.6.2"
 
-"react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.1 || ^18.0.0", "react@^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.1.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0":
+"react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.1 || ^18.0.0", "react@^17.0.0", "react@^17.0.0 || ^18.0.0", "react@^17.0.2 || ^18.0.0", "react@^18.0.0", "react@^18.1.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0":
   "integrity" "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ=="
   "resolved" "https://registry.npmjs.org/react/-/react-18.1.0.tgz"
   "version" "18.1.0"
@@ -7827,6 +8031,11 @@
   "resolved" "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
   "version" "1.0.4"
 
+"rifm@^0.12.1":
+  "integrity" "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg=="
+  "resolved" "https://registry.npmmirror.com/rifm/-/rifm-0.12.1.tgz"
+  "version" "0.12.1"
+
 "rimraf@^3.0.0", "rimraf@^3.0.2":
   "integrity" "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA=="
   "resolved" "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
@@ -8593,6 +8802,11 @@
   "resolved" "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz"
   "version" "1.1.0"
 
+"tiny-warning@^1.0.2":
+  "integrity" "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+  "resolved" "https://registry.npmmirror.com/tiny-warning/-/tiny-warning-1.0.3.tgz"
+  "version" "1.0.3"
+
 "tmpl@1.0.5":
   "integrity" "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw=="
   "resolved" "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz"
@@ -8919,7 +9133,7 @@
 
 "webpack-dev-server@^4.6.0", "webpack-dev-server@3.x || 4.x":
   "integrity" "sha512-+Nlb39iQSOSsFv0lWUuUTim3jDQO8nhK3E68f//J2r5rIcp4lULHXz2oZ0UVdEeWXEh5lSzYUlzarZhDAeAVQw=="
-  "resolved" "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz"
+  "resolved" "https://registry.npmmirror.com/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz"
   "version" "4.9.0"
   dependencies:
     "@types/bonjour" "^3.5.9"