|
@@ -1,7 +1,7 @@
|
|
/*
|
|
/*
|
|
* @Author: your name
|
|
* @Author: your name
|
|
* @Date: 2021-11-16 09:12:37
|
|
* @Date: 2021-11-16 09:12:37
|
|
- * @LastEditTime: 2022-03-09 10:26:06
|
|
|
|
|
|
+ * @LastEditTime: 2022-03-10 09:45:59
|
|
* @LastEditors: Please set LastEditors
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
* @FilePath: /KC-MiddlePlatform/src/pages/index/components/topBar/index.tsx
|
|
* @FilePath: /KC-MiddlePlatform/src/pages/index/components/topBar/index.tsx
|
|
@@ -32,16 +32,7 @@ interface TopBarType {
|
|
}
|
|
}
|
|
|
|
|
|
const TopBar: React.FC<TopBarType> = (props) => {
|
|
const TopBar: React.FC<TopBarType> = (props) => {
|
|
- const {
|
|
|
|
- onTabChange,
|
|
|
|
- sysList = [],
|
|
|
|
- openedTabs = [],
|
|
|
|
- currentTab,
|
|
|
|
- userPannelTabClick,
|
|
|
|
- onCloseTab,
|
|
|
|
- onTabClick,
|
|
|
|
- userData,
|
|
|
|
- } = props;
|
|
|
|
|
|
+ const { onTabChange, sysList = [], openedTabs = [], currentTab, userPannelTabClick, onCloseTab, onTabClick, userData } = props;
|
|
const [systemTabs, setSystemTabs] = useState<TopBar.Tab[]>([]); //已打开的tab
|
|
const [systemTabs, setSystemTabs] = useState<TopBar.Tab[]>([]); //已打开的tab
|
|
const [currentSelectedTab, setCurrentSelectedTab] = useState<TopBar.Tab>();
|
|
const [currentSelectedTab, setCurrentSelectedTab] = useState<TopBar.Tab>();
|
|
const [ifOpenPannel, setIfOpenPannel] = useState(false);
|
|
const [ifOpenPannel, setIfOpenPannel] = useState(false);
|
|
@@ -109,8 +100,8 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
console.log({ openedTabs });
|
|
console.log({ openedTabs });
|
|
if (openedTabs.length == 1) {
|
|
if (openedTabs.length == 1) {
|
|
//当有且仅当只有一个的时候,默认激活
|
|
//当有且仅当只有一个的时候,默认激活
|
|
- // setCurrentSelectedTab(openedTabs[0]);
|
|
|
|
- // history.push(openedTabs[0].path);
|
|
|
|
|
|
+ setCurrentSelectedTab(openedTabs[0]);
|
|
|
|
+ history.push(openedTabs[0].path);
|
|
}
|
|
}
|
|
if (openedTabs.length == 0) {
|
|
if (openedTabs.length == 0) {
|
|
//当所有tab都关闭时
|
|
//当所有tab都关闭时
|
|
@@ -135,18 +126,11 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
<div className={styles.logoWrap}>
|
|
<div className={styles.logoWrap}>
|
|
<img className={styles.logo} src={logo} />
|
|
<img className={styles.logo} src={logo} />
|
|
</div>
|
|
</div>
|
|
- <div
|
|
|
|
- className={ifOpenPannel ? `${styles.platformMenu} ${styles.on}` : `${styles.platformMenu}`}
|
|
|
|
- onClick={() => setIfOpenPannel(!ifOpenPannel)}
|
|
|
|
- >
|
|
|
|
|
|
+ <div className={ifOpenPannel ? `${styles.platformMenu} ${styles.on}` : `${styles.platformMenu}`} onClick={() => setIfOpenPannel(!ifOpenPannel)}>
|
|
<img src={platFormMenuIcon} />
|
|
<img src={platFormMenuIcon} />
|
|
<div className={styles.systemPannel}>
|
|
<div className={styles.systemPannel}>
|
|
{sysList.map((item) => (
|
|
{sysList.map((item) => (
|
|
- <div
|
|
|
|
- key={item.id}
|
|
|
|
- className={styles.systemList}
|
|
|
|
- onClick={() => _systemListClickHandle(item)}
|
|
|
|
- >
|
|
|
|
|
|
+ <div key={item.id} className={styles.systemList} onClick={() => _systemListClickHandle(item)}>
|
|
<img src={item.icon} alt="" />
|
|
<img src={item.icon} alt="" />
|
|
<div className={styles.systemListName}>{item.name}</div>
|
|
<div className={styles.systemListName}>{item.name}</div>
|
|
</div>
|
|
</div>
|
|
@@ -158,13 +142,7 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
*/}
|
|
*/}
|
|
<div className={styles.tabWrap}>
|
|
<div className={styles.tabWrap}>
|
|
{systemTabs.map((item) => (
|
|
{systemTabs.map((item) => (
|
|
- <div
|
|
|
|
- key={item.id}
|
|
|
|
- className={
|
|
|
|
- currentSelectedTab?.id == item.id ? `${styles.tab} ${styles.on}` : `${styles.tab}`
|
|
|
|
- }
|
|
|
|
- onClick={() => _systemTabClickHandle(item)}
|
|
|
|
- >
|
|
|
|
|
|
+ <div key={item.id} className={currentSelectedTab?.id == item.id ? `${styles.tab} ${styles.on}` : `${styles.tab}`} onClick={() => _systemTabClickHandle(item)}>
|
|
<div className={styles.tabText}>{item.name} </div>
|
|
<div className={styles.tabText}>{item.name} </div>
|
|
<div className={styles.closeIconWrap}>
|
|
<div className={styles.closeIconWrap}>
|
|
<img src={tabCloseIcon} onClick={(e) => closeTabHandle(item, e)} alt="close" />
|
|
<img src={tabCloseIcon} onClick={(e) => closeTabHandle(item, e)} alt="close" />
|
|
@@ -174,23 +152,13 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
</div>
|
|
</div>
|
|
<div className={styles.userRelaInfoWrap}>
|
|
<div className={styles.userRelaInfoWrap}>
|
|
<div className={styles.notification}>
|
|
<div className={styles.notification}>
|
|
- <img
|
|
|
|
- className={styles.notificationIcon}
|
|
|
|
- src={require('../../../public/images/notificationIcon.png')}
|
|
|
|
- />
|
|
|
|
|
|
+ <img className={styles.notificationIcon} src={require('../../../public/images/notificationIcon.png')} />
|
|
</div>
|
|
</div>
|
|
- <Tooltip
|
|
|
|
- title={<UserPannel />}
|
|
|
|
- color="#fff"
|
|
|
|
- onVisibleChange={(visible) => setArrowRotate(visible)}
|
|
|
|
- >
|
|
|
|
|
|
+ <Tooltip title={<UserPannel />} color="#fff" onVisibleChange={(visible) => setArrowRotate(visible)}>
|
|
<div className={styles.user}>
|
|
<div className={styles.user}>
|
|
<img className={styles.avator} src={require('../../../public/images/Mask.png')} />
|
|
<img className={styles.avator} src={require('../../../public/images/Mask.png')} />
|
|
<span className={styles.name}>{userData?.name}</span>
|
|
<span className={styles.name}>{userData?.name}</span>
|
|
- <img
|
|
|
|
- className={arrowRotate ? `${styles.arrow} ${styles.on}` : `${styles.arrow}`}
|
|
|
|
- src={require('../../../public/images/arrow_white.png')}
|
|
|
|
- />
|
|
|
|
|
|
+ <img className={arrowRotate ? `${styles.arrow} ${styles.on}` : `${styles.arrow}`} src={require('../../../public/images/arrow_white.png')} />
|
|
</div>
|
|
</div>
|
|
</Tooltip>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|