修改前端样式

2021-03-10 18:56:49 +08:00
parent 44da98dc5d
commit 59e3c3db8b
18 changed files with 173 additions and 131 deletions
--- a/web/src/App.css
+++ b/web/src/App.css
@ -32,16 +32,42 @@
    background-color: #FFF;
 }

-.global-header {
-    position: relative;
-    display: flex;
-    align-items: center;
+.layout-header {
    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;
 }
--- a/web/src/App.js
+++ b/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"
-                                        style={{padding: 0, height: 48, lineHeight: 48}}>
-
-                                </Header>*/}
+                            <Header className="site-layout-background"
+                                    style={{padding: 0, height: 48, zIndex: 20}}>
+                                <LayoutHeader key='layout-right-header'/>
+                            </Header>

                            <Route path="/" exact component={Dashboard}/>
                            <Route path="/user" component={User}/>
--- a/web/src/components/asset/Asset.js
+++ b/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>
--- a/web/src/components/command/BatchCommand.js
+++ b/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>
--- a/web/src/components/command/DynamicCommand.js
+++ b/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>
--- a/web/src/components/credential/Credential.js
+++ b/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>
--- a/web/src/components/dashboard/Dashboard.js
+++ b/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>
--- a/web/src/components/job/Job.js
+++ b/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>
--- a/web/src/components/session/LoginLog.js
+++ b/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>
--- a/web/src/components/session/OfflineSession.js
+++ b/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>
--- a/web/src/components/session/OnlineSession.js
+++ b/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>
--- a/web/src/components/setting/Setting.js
+++ b/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>
--- a/web/src/components/user/Info.js
+++ b/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="个人中心"
                />

--- a/web/src/components/user/LayoutHeader.js
+++ b/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;
--- a/web/src/components/user/Logout.js
+++ b/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;
--- a/web/src/components/user/User.js
+++ b/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>;
-                }else {
-                    return <Tag icon={<ExclamationCircleOutlined />} color="warning">关闭</Tag>;
+                    return <Tag icon={<InsuranceOutlined/>} color="success">开启</Tag>;
+                } else {
+                    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>
--- a/web/src/components/user/UserGroup.js
+++ b/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>