bookshelfplus/bookshelfplus-frontend/views/dashboard/component/navbar.html

<style>
    #btn-logout {
        color: grey;
        vertical-align: middle;
        float: right;
        transition: all 0.25s;
    }

    #btn-logout:hover {
        color: #ddd;
    }

    #nickname {
        color: rgb(176, 176, 176);
        vertical-align: middle;
        float: right;
        font-size: 13px;
    }
</style>
<div class="navbar">
    <div class="navbar-grid">
        <div class="grid-item"></div>
        <div class="grid-item" style="grid-column-start: span 2;">
            <h1 style="display: inline; vertical-align: middle; margin-right: 20px; cursor: pointer;" onclick="window.open('/');">
                <img src="/assets/image/svg/home.svg" style="width: 1em; height: 1em; transform: translateY(2px);" title="返回首页">
            </h1>
            <% Object.keys(dashboardPage).forEach(item => { %>
                <a href="/dashboard/<%= group %>/<%= item %>" style="vertical-align: middle;"><%= dashboardPage[item].title %></a>
            <% }); %>
            <a id="btn-logout" href="javascript:logout();">退出登录</a>
            <span id="nickname"><!-- 用户昵称 --></span>
        </div>
        <div class="grid-item"></div>
    </div>
</div>
<script>
    function logout() {
        postRequest("/user/logout", { token: localStorageUtils.getToken() })
            .then(function (response) {
                var axiosData = response.data;
                var status = axiosData.status;
                var data = axiosData.data;

                if (status === "success") {
                    console.log(data);
                    if (data) {
                        localStorageUtils.userLogout();
                        location.href = "/login";
                    } else {
                        swal("退出登录失败");
                    }
                } else {
                    swal(`出错啦！${data.errMsg} (错误码: ${data.errCode})`);
                }
            }).catch(function (error) {
                console.log(error);
                var choice = confirm("服务器连接失败，无法正常退出登录，是否要强行退出登录？");
                if (choice) {
                    localStorageUtils.userLogout();
                    location.href = "/login";
                }
            });
    }
</script>
<script>
    // 导航栏中突出当前页面
    var group = '<%= group %>';
    var page = '<%= page %>';
    console.log(group, page);
    // document.getElementsByTagName("a").asArray().forEach(element => {
    $("a").toArray().forEach(element => {
        var linkRoute = element.href.split('/').filter(s=>!!s);
        if(linkRoute.length > 2) {
            var linkGroup = linkRoute[linkRoute.length-2];
            var linkPage = linkRoute[linkRoute.length-1];
            // console.log(element, linkGroup, linkPage);
            if(page == linkPage) {
                $(element).addClass("active");
            }
        }
    });
</script>