Header增加web终端入口小图标

4.0
vapao 2023-03-15 11:27:35 +08:00
parent 23f92230ae
commit 8caff0036f
4 changed files with 28 additions and 10 deletions

View File

@ -6,7 +6,8 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Layout, Dropdown, Menu, Avatar } from 'antd'; import { Layout, Dropdown, Menu, Avatar } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LogoutOutlined } from '@ant-design/icons'; import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LogoutOutlined, CodeOutlined } from '@ant-design/icons';
import { AuthDiv } from 'components';
import Notification from './Notification'; import Notification from './Notification';
import styles from './layout.module.less'; import styles from './layout.module.less';
import http from '../libs/http'; import http from '../libs/http';
@ -20,6 +21,10 @@ export default function (props) {
http.get('/api/account/logout/') http.get('/api/account/logout/')
} }
function openTerminal() {
window.open('/ssh')
}
const UserMenu = ( const UserMenu = (
<Menu> <Menu>
<Menu.Item> <Menu.Item>
@ -42,7 +47,10 @@ export default function (props) {
</div> </div>
</div> </div>
<Notification/> <Notification/>
<div className={styles.right}> <AuthDiv className={styles.terminal} auth="host.console.view|host.console.list" onClick={openTerminal}>
<CodeOutlined style={{fontSize: 16}}/>
</AuthDiv>
<div className={styles.user}>
<Dropdown overlay={UserMenu} style={{background: '#000'}}> <Dropdown overlay={UserMenu} style={{background: '#000'}}>
<span className={styles.action}> <span className={styles.action}>
<Avatar size="small" src={avatar} style={{marginRight: 8}}/> <Avatar size="small" src={avatar} style={{marginRight: 8}}/>

View File

@ -106,7 +106,7 @@ export default function () {
const count = notifies.length - reads.length; const count = notifies.length - reads.length;
return ( return (
<div className={styles.right}> <div className={styles.notification}>
<Dropdown trigger={['click']} onVisibleChange={handleVisible} overlay={( <Dropdown trigger={['click']} onVisibleChange={handleVisible} overlay={(
<Menu className={styles.notify}> <Menu className={styles.notify}>
<Menu.Item style={{padding: 0, whiteSpace: 'unset'}}> <Menu.Item style={{padding: 0, whiteSpace: 'unset'}}>
@ -133,11 +133,11 @@ export default function () {
</Menu.Item> </Menu.Item>
</Menu> </Menu>
)}> )}>
<span className={styles.trigger}> <div className={styles.trigger}>
<Badge count={count > 0 ? count : 0}> <Badge count={count > 0 ? count : 0}>
<NotificationOutlined style={{fontSize: 16}}/> <NotificationOutlined style={{fontSize: 16}}/>
</Badge> </Badge>
</span> </div>
</Dropdown> </Dropdown>
</div> </div>
) )

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -12,7 +12,20 @@
flex: 1; flex: 1;
} }
.right { .terminal {
padding: 0 12px;
cursor: pointer;
line-height: 48px;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
.user {
.action { .action {
cursor: pointer; cursor: pointer;
padding: 0 12px; padding: 0 12px;
@ -27,12 +40,9 @@
} }
.trigger { .trigger {
font-size: 20px;
line-height: 48px;
cursor: pointer; cursor: pointer;
transition: all 0.3s, padding 0s; transition: all 0.3s, padding 0s;
padding: 0 24px; padding: 0 12px;
float: left;
} }
.trigger:hover { .trigger:hover {