修改前端样式

config.yml

@@ -1,4 +1,5 @@
 debug: true
+demo: false
 db: mysql
 mysql:
   hostname: 172.16.101.32

web/src/App.css

@@ -32,16 +32,42 @@
     background-color: #FFF;
 }
 
-.global-header {
+.layout-header {
-    position: relative;
-    display: flex;
-    align-items: center;
     height: 48px;
+    align-items: center;
     padding: 0 16px 0 0;
     background: #fff;
     box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
 }
 
+.layout-header-right {
+    align-items: center;
+    padding: 0 12px;
+    cursor: pointer;
+    transition: all .3s;
+    line-height: 48px;
+    height: 48px;
+}
+
+.layout-header-right-item {
+    margin: 0 6px;
+    display: inline;
+    height: 48px;
+}
+
+.layout-header-right-item:hover {
+    background-color: #eeeeee;
+}
+
+.nickname {
+    line-height: 48px;
+    height: 48px;
+    width: 125px;
+    text-align: left;
+    padding: 0 5px;
+    float: right;
+}
+
 .page-herder {
     margin: 16px 16px 0 16px;
 }
@@ -77,7 +103,7 @@
     color: white;
 }
 
-.user-in-menu>.nickname {
+.user-in-menu > .nickname {
     margin-top: 20px;
     margin-right: auto;
     margin-left: auto;
@@ -90,6 +116,6 @@
     border-radius: 5%;
 }
 
-.modal-no-padding .ant-modal-body{
+.modal-no-padding .ant-modal-body {
     padding: 0;
 }

web/src/App.js

@@ -41,6 +41,8 @@ import UserGroup from "./components/user/UserGroup";
 import LoginLog from "./components/session/LoginLog";
 import Term from "./components/access/Term";
 import Job from "./components/job/Job";
+import {Header} from "antd/es/layout/layout";
+import LayoutHeader from "./components/user/LayoutHeader";
 
 const {Footer, Sider} = Layout;
 
@@ -240,10 +242,10 @@ class App extends Component {
                         </Sider>
 
                         <Layout className="site-layout">
-                            {/*<Header className="site-layout-background"
+                            <Header className="site-layout-background"
-                                        style={{padding: 0, height: 48, lineHeight: 48}}>
+                                    style={{padding: 0, height: 48, zIndex: 20}}>
-
+                                <LayoutHeader key='layout-right-header'/>
-                                </Header>*/}
+                            </Header>
 
                             <Route path="/" exact component={Dashboard}/>
                             <Route path="/user" component={User}/>

web/src/components/asset/Asset.js

@@ -40,7 +40,7 @@ import {
     UploadOutlined
 } from '@ant-design/icons';
 import {PROTOCOL_COLORS} from "../../common/constants";
-import Logout from "../user/Logout";
+import LayoutHeader from "../user/LayoutHeader";
 import {hasPermission, isAdmin} from "../../service/permission";
 import Upload from "antd/es/upload";
 import axios from "axios";
@@ -56,6 +56,9 @@ const routes = [
         path: '',
         breadcrumbName: '首页',
     },
+    {
+        breadcrumbName: '资源管理',
+    },
     {
         path: 'assets',
         breadcrumbName: '资产管理',
@@ -658,15 +661,13 @@ class Asset extends Component {
         return (
             <>
                 <PageHeader
-                    className="site-page-header-ghost-wrapper page-herder"
+                    className="site-page-header-ghost-wrapper"
                     title="资产管理"
                     breadcrumb={{
                         routes: routes,
                         itemRender: itemRender
                     }}
-                    extra={[
+
-                        <Logout key='logout'/>
-                    ]}
                     subTitle="资产"
                 >
                 </PageHeader>

web/src/components/command/BatchCommand.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {Card, Input, List, PageHeader, Spin} from "antd";
 import Console from "../access/Console";
 import {itemRender} from "../../utils/utils";
-import Logout from "../user/Logout";
+import LayoutHeader from "../user/LayoutHeader";
 import './Command.css'
 import request from "../../common/request";
 import {message} from "antd/es";
@@ -73,15 +73,13 @@ class BatchCommand extends Component {
         return (
             <>
                 <PageHeader
-                    className="site-page-header-ghost-wrapper page-herder"
+                    className="site-page-header-ghost-wrapper"
                     title="批量执行命令"
                     breadcrumb={{
                         routes: routes,
                         itemRender: itemRender
                     }}
-                    extra={[
+
-                        <Logout key='logout'/>
-                    ]}
                     subTitle="动态指令"
                 >
                 </PageHeader>

web/src/components/command/DynamicCommand.js

@@ -34,7 +34,7 @@ import {
     UndoOutlined
 } from '@ant-design/icons';
 import {compare, itemRender} from "../../utils/utils";
-import Logout from "../user/Logout";
+import LayoutHeader from "../user/LayoutHeader";
 import {hasPermission, isAdmin} from "../../service/permission";
 import dayjs from "dayjs";
 
@@ -535,15 +535,13 @@ class DynamicCommand extends Component {
         return (
             <>
                 <PageHeader
-                    className="site-page-header-ghost-wrapper page-herder"
+                    className="site-page-header-ghost-wrapper"
                     title="动态指令"
                     breadcrumb={{
                         routes: routes,
                         itemRender: itemRender
                     }}
-                    extra={[
+
-                        <Logout key='logout'/>
-                    ]}
                     subTitle="批量动态指令执行"
                 >
                 </PageHeader>

web/src/components/credential/Credential.js

@@ -33,7 +33,7 @@ import {
     UndoOutlined
 } from '@ant-design/icons';
 import {itemRender} from "../../utils/utils";
-import Logout from "../user/Logout";
+import LayoutHeader from "../user/LayoutHeader";
 import {hasPermission, isAdmin} from "../../service/permission";
 import dayjs from "dayjs";
 
@@ -484,15 +484,13 @@ class Credential extends Component {
         return (
             <>
                 <PageHeader
-                    className="site-page-header-ghost-wrapper page-herder"
+                    className="site-page-header-ghost-wrapper"
                     title="授权凭证"
                     breadcrumb={{
                         routes: routes,
                         itemRender: itemRender
                     }}
-                    extra={[
+
-                        <Logout key='logout'/>
-                    ]}
                     subTitle="访问资产的账户、密钥等"
                 >
                 </PageHeader>

web/src/components/dashboard/Dashboard.js

@@ -6,7 +6,7 @@ import request from "../../common/request";
 import './Dashboard.css'
 import {Link} from "react-router-dom";
 import {Area} from '@ant-design/charts';
-import Logout from "../user/Logout";
+import LayoutHeader from "../user/LayoutHeader";
 import {isAdmin} from "../../service/permission";
 
 
@@ -80,7 +80,7 @@ class Dashboard extends Component {
         return (
             <>
                 <PageHeader
-                    className="site-page-header-ghost-wrapper page-herder"
+                    className="site-page-header-ghost-wrapper"
                     title="dashboard"
                     breadcrumb={{
                         routes: routes,
@@ -88,7 +88,7 @@ class Dashboard extends Component {
                     }}
                     subTitle="仪表盘"
                     extra={[
-                        <Logout key='logout'/>
+
                     ]}
                 >
                 </PageHeader>

web/src/components/job/Job.js

@@ -31,7 +31,7 @@ import {
     UndoOutlined
 } from '@ant-design/icons';
 import {itemRender} from "../../utils/utils";
-import Logout from "../user/Logout";
+import LayoutHeader from "../user/LayoutHeader";
 import dayjs from "dayjs";
 import JobModal from "./JobModal";
 import './Job.css'
@@ -442,15 +442,13 @@ class Job extends Component {
         return (
             <>
                 <PageHeader
-                    className="site-page-header-ghost-wrapper page-herder"
+                    className="site-page-header-ghost-wrapper"
                     title="计划任务"
                     breadcrumb={{
                         routes: routes,
                         itemRender: itemRender
                     }}
-                    extra={[
+
-                        <Logout key='logout'/>
-                    ]}
                     subTitle="计划任务"
                 >
                 </PageHeader>

web/src/components/session/LoginLog.js

@@ -21,7 +21,7 @@ import request from "../../common/request";
 import {formatDate, isEmpty, itemRender} from "../../utils/utils";
 import {message} from "antd/es";
 import {DeleteOutlined, ExclamationCircleOutlined, SyncOutlined, UndoOutlined} from "@ant-design/icons";
-import Logout from "../user/Logout";
+import LayoutHeader from "../user/LayoutHeader";
 
 const confirm = Modal.confirm;
 const {Content} = Layout;
@@ -281,15 +281,13 @@ class LoginLog extends Component {
         return (
             <>
                 <PageHeader
-                    className="site-page-header-ghost-wrapper page-herder"
+                    className="site-page-header-ghost-wrapper"
                     title="登录日志"
                     breadcrumb={{
                         routes: routes,
                         itemRender: itemRender
                     }}
-                    extra={[
+
-                        <Logout key='logout'/>
-                    ]}
                     subTitle="只有登录成功的才会保存日志"
                 >
                 </PageHeader>

web/src/components/session/OfflineSession.js

@@ -23,7 +23,7 @@ import Playback from "./Playback";
 import {message} from "antd/es";
 import {DeleteOutlined, ExclamationCircleOutlined, SyncOutlined, UndoOutlined} from "@ant-design/icons";
 import {PROTOCOL_COLORS} from "../../common/constants";
-import Logout from "../user/Logout";
+import LayoutHeader from "../user/LayoutHeader";
 import dayjs from "dayjs";
 
 const confirm = Modal.confirm;
@@ -342,15 +342,13 @@ class OfflineSession extends Component {
         return (
             <>
                 <PageHeader
-                    className="site-page-header-ghost-wrapper page-herder"
+                    className="site-page-header-ghost-wrapper"
                     title="离线会话"
                     breadcrumb={{
                         routes: routes,
                         itemRender: itemRender
                     }}
-                    extra={[
+
-                        <Logout key='logout'/>
-                    ]}
                     subTitle="离线会话管理"
                 >
                 </PageHeader>

web/src/components/session/OnlineSession.js

@@ -24,7 +24,7 @@ import {message} from "antd/es";
 import {PROTOCOL_COLORS} from "../../common/constants";
 import {DisconnectOutlined, ExclamationCircleOutlined, SyncOutlined, UndoOutlined} from "@ant-design/icons";
 import Monitor from "../access/Monitor";
-import Logout from "../user/Logout";
+import LayoutHeader from "../user/LayoutHeader";
 import dayjs from "dayjs";
 
 const confirm = Modal.confirm;
@@ -336,15 +336,13 @@ class OnlineSession extends Component {
         return (
             <>
                 <PageHeader
-                    className="site-page-header-ghost-wrapper page-herder"
+                    className="site-page-header-ghost-wrapper"
                     title="在线会话"
                     breadcrumb={{
                         routes: routes,
                         itemRender: itemRender
                     }}
-                    extra={[
+
-                        <Logout key='logout'/>
-                    ]}
                     subTitle="查询实时在线会话"
                 >
                 </PageHeader>

web/src/components/setting/Setting.js

@@ -3,7 +3,7 @@ import {Button, Form, Input, Layout, PageHeader, Select, Switch, Tabs, Tooltip,
 import {itemRender} from '../../utils/utils'
 import request from "../../common/request";
 import {message} from "antd/es";
-import Logout from "../user/Logout";
+import LayoutHeader from "../user/LayoutHeader";
 import {ExclamationCircleOutlined} from "@ant-design/icons";
 
 const {Content} = Layout;
@@ -116,15 +116,13 @@ class Setting extends Component {
         return (
             <>
                 <PageHeader
-                    className="site-page-header-ghost-wrapper page-herder"
+                    className="site-page-header-ghost-wrapper"
                     title="系统设置"
                     breadcrumb={{
                         routes: routes,
                         itemRender: itemRender
                     }}
-                    extra={[
+
-                        <Logout key='logout'/>
-                    ]}
                     subTitle="系统设置"
                 >
                 </PageHeader>

web/src/components/user/Info.js

@@ -3,7 +3,7 @@ import {Button, Card, Form, Image, Input, Layout, Modal, PageHeader, Result, Spa
 import {itemRender} from '../../utils/utils'
 import request from "../../common/request";
 import {message} from "antd/es";
-import Logout from "./Logout";
+import LayoutHeader from "./LayoutHeader";
 import {ExclamationCircleOutlined, ReloadOutlined} from "@ant-design/icons";
 
 const {Content} = Layout;
@@ -123,15 +123,13 @@ class Info extends Component {
         return (
             <>
                 <PageHeader
-                    className="site-page-header-ghost-wrapper page-herder"
+                    className="site-page-header-ghost-wrapper"
                     title="个人中心"
                     breadcrumb={{
                         routes: routes,
                         itemRender: itemRender
                     }}
-                    extra={[
+
-                        <Logout key='logout'/>
-                    ]}
                     subTitle="个人中心"
                 />
 

web/src/components/user/LayoutHeader.js

@@ -0,0 +1,87 @@
+import React, {Component} from 'react';
+import {Col, Dropdown, Menu, message, Popconfirm, Row, Tooltip} from "antd";
+import request from "../../common/request";
+import {getCurrentUser} from "../../service/permission";
+import {GithubOutlined, LogoutOutlined, QuestionCircleOutlined, SolutionOutlined} from "@ant-design/icons";
+import {Link} from "react-router-dom";
+
+class LayoutHeader extends Component {
+
+    confirm = async (e) => {
+        let result = await request.post('/logout');
+        if (result['code'] !== 1) {
+            message.error(result['message']);
+        } else {
+            message.success('退出登录成功，即将跳转至登录页面。');
+            window.location.reload();
+        }
+    }
+
+
+    render() {
+
+        const menu = (
+            <Menu>
+
+                <Menu.Item>
+                    <Link to={'/info'}>
+                        <SolutionOutlined/>
+                        个人中心
+                    </Link>
+                </Menu.Item>
+
+                <Menu.Item>
+                    <a target='_blank' href='https://github.com/dushixiang/next-terminal'>
+                        <GithubOutlined/>
+                        点个Star
+                    </a>
+                </Menu.Item>
+
+                <Menu.Divider/>
+
+                <Menu.Item>
+
+                    <Popconfirm
+                        key='login-btn-pop'
+                        title="您确定要退出登录吗?"
+                        onConfirm={this.confirm}
+                        okText="确定"
+                        cancelText="取消"
+                        placement="left"
+                    >
+                        <LogoutOutlined/>
+                        退出登录
+                    </Popconfirm>
+                </Menu.Item>
+
+            </Menu>
+        );
+
+        return (
+            <div className='layout-header'>
+                <Row justify="space-around" align="middle" gutter={24} style={{height: 48}}>
+                    <Col span={4} key={1} style={{height: 48}}> </Col>
+                    <Col span={20} key={2} style={{textAlign: 'right'}} className={'layout-header-right'}>
+
+                        <div className={'layout-header-right-item'}>
+                            <Tooltip placement="bottom" title={'使用帮助'}>
+                                <a target='_blank' href='https://github.com/dushixiang/next-terminal/blob/master/docs/faq.md'>
+                                    <QuestionCircleOutlined/>
+                                </a>
+                            </Tooltip>
+
+                        </div>
+
+
+                        <Dropdown overlay={menu}>
+                            <div className='nickname layout-header-right-item'>{getCurrentUser()['nickname']}</div>
+                        </Dropdown>
+                    </Col>
+                </Row>
+
+            </div>
+        );
+    }
+}
+
+export default LayoutHeader;

web/src/components/user/Logout.js

@@ -1,53 +0,0 @@
-import React, {Component} from 'react';
-import {Button, Dropdown, Menu, message, Popconfirm} from "antd";
-import request from "../../common/request";
-import {getCurrentUser} from "../../service/permission";
-
-class Logout extends Component {
-
-    confirm = async (e) => {
-        let result = await request.post('/logout');
-        if (result['code'] !== 1) {
-            message.error(result['message']);
-        } else {
-            message.success('退出登录成功，即将跳转至登录页面。');
-            window.location.reload();
-        }
-    }
-
-
-    render() {
-
-        const menu = (
-            <Menu>
-
-                <Menu.Item>
-
-                    <Popconfirm
-                        key='login-btn-pop'
-                        title="您确定要退出登录吗?"
-                        onConfirm={this.confirm}
-                        okText="确定"
-                        cancelText="取消"
-                        placement="left"
-                    >
-                        退出登录
-                    </Popconfirm>
-                </Menu.Item>
-
-            </Menu>
-        );
-
-        return (
-            <div>
-                <Dropdown overlay={menu}>
-                    <Button key="login-btn" type="dashed">
-                        {getCurrentUser()['nickname']}
-                    </Button>
-                </Dropdown>
-            </div>
-        );
-    }
-}
-
-export default Logout;

web/src/components/user/User.js

@@ -25,16 +25,16 @@ import UserModal from "./UserModal";
 import request from "../../common/request";
 import {message} from "antd/es";
 import {
-    CheckCircleOutlined,
     DeleteOutlined,
     DownOutlined,
-    ExclamationCircleOutlined, InsuranceOutlined,
+    ExclamationCircleOutlined,
+    InsuranceOutlined,
     LockOutlined,
     PlusOutlined,
     SyncOutlined,
     UndoOutlined
 } from '@ant-design/icons';
-import Logout from "./Logout";
+import LayoutHeader from "./LayoutHeader";
 import UserShareAsset from "./UserShareAsset";
 import {hasPermission} from "../../service/permission";
 import dayjs from "dayjs";
@@ -352,9 +352,9 @@ class User extends Component {
             render: (text, record) => {
 
                 if (text === '1') {
-                    return <Tag icon={<InsuranceOutlined />} color="success">开启</Tag>;
+                    return <Tag icon={<InsuranceOutlined/>} color="success">开启</Tag>;
-                }else {
+                } else {
-                    return <Tag icon={<ExclamationCircleOutlined />} color="warning">关闭</Tag>;
+                    return <Tag icon={<ExclamationCircleOutlined/>} color="warning">关闭</Tag>;
                 }
             }
         }, {
@@ -474,15 +474,13 @@ class User extends Component {
         return (
             <>
                 <PageHeader
-                    className="site-page-header-ghost-wrapper page-herder"
+                    className="site-page-header-ghost-wrapper"
                     title="用户管理"
                     breadcrumb={{
                         routes: routes,
                         itemRender: itemRender
                     }}
-                    extra={[
+
-                        <Logout key='logout'/>
-                    ]}
                     subTitle="平台用户管理"
                 >
                 </PageHeader>

web/src/components/user/UserGroup.js

@@ -6,7 +6,7 @@ import qs from "qs";
 import request from "../../common/request";
 import {message} from "antd/es";
 import {DeleteOutlined, ExclamationCircleOutlined, PlusOutlined, SyncOutlined, UndoOutlined} from '@ant-design/icons';
-import Logout from "./Logout";
+import LayoutHeader from "./LayoutHeader";
 import UserGroupModal from "./UserGroupModal";
 import UserShareAsset from "./UserShareAsset";
 import dayjs from "dayjs";
@@ -336,15 +336,13 @@ class UserGroup extends Component {
         return (
             <>
                 <PageHeader
-                    className="site-page-header-ghost-wrapper page-herder"
+                    className="site-page-header-ghost-wrapper"
                     title="用户组管理"
                     breadcrumb={{
                         routes: routes,
                         itemRender: itemRender
                     }}
-                    extra={[
+
-                        <Logout key='logout'/>
-                    ]}
                     subTitle="平台用户管理"
                 >
                 </PageHeader>