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 { Link } from 'react-router-dom';
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 styles from './layout.module.less';
import http from '../libs/http';
@ -20,6 +21,10 @@ export default function (props) {
http.get('/api/account/logout/')
}
function openTerminal() {
window.open('/ssh')
}
const UserMenu = (
<Menu>
<Menu.Item>
@ -42,7 +47,10 @@ export default function (props) {
</div>
</div>
<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'}}>
<span className={styles.action}>
<Avatar size="small" src={avatar} style={{marginRight: 8}}/>

View File

@ -106,7 +106,7 @@ export default function () {
const count = notifies.length - reads.length;
return (
<div className={styles.right}>
<div className={styles.notification}>
<Dropdown trigger={['click']} onVisibleChange={handleVisible} overlay={(
<Menu className={styles.notify}>
<Menu.Item style={{padding: 0, whiteSpace: 'unset'}}>
@ -133,11 +133,11 @@ export default function () {
</Menu.Item>
</Menu>
)}>
<span className={styles.trigger}>
<div className={styles.trigger}>
<Badge count={count > 0 ? count : 0}>
<NotificationOutlined style={{fontSize: 16}}/>
</Badge>
</span>
</div>
</Dropdown>
</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;
}
.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 {
cursor: pointer;
padding: 0 12px;
@ -27,12 +40,9 @@
}
.trigger {
font-size: 20px;
line-height: 48px;
cursor: pointer;
transition: all 0.3s, padding 0s;
padding: 0 24px;
float: left;
padding: 0 12px;
}
.trigger:hover {