style: 调整右侧用户登录信息栏样式

Bootstrap.Admin/Views/Shared/Header.cshtml

@@ -92,6 +92,18 @@
                 <span id="userDisplayName" data-userName="@Model.UserName" class="username text-truncate d-inline-block">@Model.DisplayName</span>
             </a>
             <div class="dropdown-menu dropdown-menu-right">
+                <div class="dropdown-item">
+                    <div class="d-flex flex-fill align-items-center">
+                        <img src="@Url.Content(Model.Icon)">
+                        <div class="flex-fill">
+                            <div class="d-flex">
+                                <span class="d-inline-block font-weight-bold flex-fill">@Model.DisplayName</span>
+                                <span class="text-success"><i class="fa fa-star"></i></span>
+                            </div>
+                            <div class="text-sm">登录名：@Model.UserName</div>
+                        </div>
+                    </div>
+                </div>
                 <div class="dropdown-item">
                     <a href="~/Admin/Profiles"><i class=" fa fa-suitcase"></i>个人中心</a>
                     <a href="~/Admin/Index"><i class="fa fa-cog"></i>设置</a>

Bootstrap.Admin/wwwroot/css/lte.css

@@ -0,0 +1,155 @@
+.header .nav {
+    margin-right: 15px;
+    justify-content: flex-end;
+}
+
+.userinfo .badge {
+    top: 64px;
+}
+
+.userinfo img {
+    border-radius: 50%;
+}
+
+.userinfo .dropdown-item {
+    border-bottom: solid 1px #e9ecef;
+    padding: 0.25rem 1.5rem;
+}
+
+    .userinfo .dropdown-item:first-child {
+        display: flex;
+    }
+
+    .userinfo .dropdown-item img {
+        width: 60px;
+        height: 60px;
+        margin-right: 1rem;
+    }
+
+    .userinfo .dropdown-item a {
+        padding: 0.25rem 0.625rem;
+    }
+
+        .userinfo .dropdown-item a i {
+            display: inline-block;
+            margin-right: 10px;
+        }
+
+    .userinfo .dropdown-item:last-child {
+        border-bottom: none;
+    }
+
+        .userinfo .dropdown-item:last-child a {
+            background: none;
+            color: #777;
+        }
+
+        .userinfo .dropdown-item:last-child a:hover {
+            color: #333;
+        }
+
+.sidebar-toggle-box .fa-bars {
+    color: #007bff;
+}
+
+.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
+    color: rgb(51, 122, 183);
+}
+
+.navbar-light .navbar-nav .nav-link {
+    padding: 3px 8px;
+    color: rgba(51, 122, 183, 0.9);
+    transition: color .3s linear;
+}
+
+    .navbar-light .navbar-nav .nav-link:hover, .nav-link .navbar-nav .active > .nav-link:hover {
+        color: #0056b3;
+    }
+
+.dropdown-item.active, .dropdown-item:active {
+    color: rgba(0, 0, 0, 0.9);
+}
+
+.dropdown-item:hover, .nav .dropdown-item:nth-of-type(odd):hover, .dropdown-item:active, .dropdown-item.active,
+.bootstrap-table .export .dropdown-menu li:hover {
+    background-color: #77afd5;
+}
+
+.userinfo .dropdown-item:hover {
+    background-color: #f8f9fa;
+}
+
+.breadcrumb, .pagination-detail {
+    color: #337ab7;
+}
+
+.card-header, .modal-header, .popover-header {
+    background-color: #5899c8;
+    border-color: #3581b8;
+    border-radius: 4px 4px 0 0;
+}
+
+.close {
+    text-shadow: none;
+}
+
+.header .navbar {
+    padding: 0.25rem 0 0 1rem;
+}
+
+.header .nav-item.active {
+    border-bottom: solid 1px #307eb6;
+}
+
+.card {
+    border-top-width: 1px;
+}
+
+    .card:hover {
+        border-top-color: #84bbe2;
+    }
+
+.card, .modal-footer, .form-control, .popover, .date .input-group-text,
+.input-group .btn:not(.btn-secondary):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-danger),
+.form-select-input:hover {
+    border-color: #84bbe2;
+}
+
+    .card .card-header, .modal-header {
+        background-image: linear-gradient(to bottom, #5893be 0%, #63a6d7 100%);
+    }
+
+        .card .card-header, a[data-toggle="collapse"], .modal-header, .modal-header .close, .popover-header,
+        .card .card-header a, .modal-header a,
+        .card .card-header a:hover,
+        .close:not(:disabled):not(.disabled):hover,
+        .close:not(:disabled):not(.disabled):focus {
+            color: #fff;
+        }
+
+            .card .card-header a {
+                color: #eee;
+            }
+
+.control-label {
+    color: #467fa7;
+}
+
+.breadcrumb > li + li:before, .breadcrumb, .pagination-detail, .form-select-append {
+    color: #337ab7;
+}
+
+.form-control[disabled], .form-control[readonly], .date .form-control, .date .input-group-text,
+.input-group .btn:not(.btn-secondary):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-danger) {
+    background-color: rgba(84, 189, 220, 0.21);
+}
+
+.bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before {
+    border-right-color: #305873;
+}
+
+@media (min-width: 768px) {
+    .breadcrumb {
+        border-color: rgba(81, 152, 203, 0.8)
+    }
+}

Bootstrap.Admin/wwwroot/css/theme.css

@@ -101,6 +101,10 @@ body {
     background-color: #fff;
 }
 
+    .userinfo .dropdown-item:first-child {
+        display: none;
+    }
+
     .userinfo .dropdown-item a {
         text-align: center;
         color: #777;