添加项目文件。
This commit is contained in:
19
TechHelper.Client/Layout/LoginDisplay.razor
Normal file
19
TechHelper.Client/Layout/LoginDisplay.razor
Normal file
@@ -0,0 +1,19 @@
|
||||
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
Hello, @context.User.Identity?.Name!
|
||||
<button class="nav-link btn btn-link" @onclick="BeginLogOut">Log out</button>
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<a href="authentication/login">Log in</a>
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>
|
||||
|
||||
@code{
|
||||
public void BeginLogOut()
|
||||
{
|
||||
Navigation.NavigateToLogout("authentication/logout");
|
||||
}
|
||||
}
|
42
TechHelper.Client/Layout/MainLayout.razor
Normal file
42
TechHelper.Client/Layout/MainLayout.razor
Normal file
@@ -0,0 +1,42 @@
|
||||
@inherits LayoutComponentBase
|
||||
<MudThemeProvider />
|
||||
<MudDialogProvider />
|
||||
<MudSnackbarProvider />
|
||||
<MudPopoverProvider />
|
||||
|
||||
|
||||
|
||||
<MudPaper Class="d-flex flex-column flex-grow-1" Style="height: 100vh;">
|
||||
|
||||
|
||||
<MudPaper Class="d-flex flex-column flex-grow-1 overflow-hidden">
|
||||
|
||||
|
||||
<MudPaper Height="5%" Class=" d-flex flex-grow-1" Style="background-color:mediumseagreen">
|
||||
<MudSpacer> </MudSpacer>
|
||||
<AuthLinks/>
|
||||
</MudPaper>
|
||||
|
||||
|
||||
<MudPaper Height="95%" Class="d-flex flex-row flex-grow-1 overflow-hidden">
|
||||
|
||||
|
||||
<MudPaper Width="5%" Class="pa-2 mr-1 d-flex flex-column flex-grow-0 justify-content-between">
|
||||
<NavBar Class="flex-column flex-grow-0 rounded-pill" />
|
||||
<AccountView Class="flex-column flex-grow-0 rounded-pill" />
|
||||
</MudPaper>
|
||||
|
||||
|
||||
<MudPaper Class="d-flex flex-grow-1 pa-3 ma-1 ">
|
||||
@Body
|
||||
</MudPaper>
|
||||
|
||||
|
||||
|
||||
</MudPaper>
|
||||
|
||||
|
||||
</MudPaper>
|
||||
|
||||
|
||||
</MudPaper>
|
85
TechHelper.Client/Layout/MainLayout.razor.css
Normal file
85
TechHelper.Client/Layout/MainLayout.razor.css
Normal file
@@ -0,0 +1,85 @@
|
||||
.page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
||||
}
|
||||
|
||||
.my-hover-paper:hover {
|
||||
background-color: var(--mud-palette-primary); /* <20><>ͣʱ<CDA3><CAB1><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ϊ<EFBFBD><CEAA><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ɫ */
|
||||
border-color: var(--mud-palette-primary-lighten); /* <20><>ͣʱ<CDA3>߿<EFBFBD><DFBF><EFBFBD>ɫ<EFBFBD>仯 */
|
||||
color: var(--mud-palette-primary-contrasttext); /* <20><>ͣʱ<CDA3><CAB1><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ɫ<EFBFBD>仯 */
|
||||
transform: translateY(-3px); /* <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ƶ<EFBFBD><C6B6><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ӷ<EFBFBD><D3B6><EFBFBD> */
|
||||
box-shadow: var(--mud-elevation-4); /* <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ӱ<EFBFBD><D3B0><EFBFBD><EFBFBD> */
|
||||
}
|
||||
|
||||
.top-row {
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #d6d5d5;
|
||||
justify-content: flex-end;
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
white-space: nowrap;
|
||||
margin-left: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.top-row ::deep a:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 640.98px) {
|
||||
.top-row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.top-row.auth ::deep a:first-child {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.top-row, article {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
}
|
13
TechHelper.Client/Layout/NavBar.razor
Normal file
13
TechHelper.Client/Layout/NavBar.razor
Normal file
@@ -0,0 +1,13 @@
|
||||
<MudPaper Class=@Class>
|
||||
<MudNavLink Icon="@Icons.Material.Filled.Home" Class="py-5 px-3" Href="" Match="NavLinkMatch.All"></MudNavLink>
|
||||
<MudNavLink Icon="@Icons.Material.Filled.Person" Class="py-5 px-3" Href="Account/Manage"></MudNavLink>
|
||||
<MudNavLink Icon="@Icons.Material.Filled.Edit" Class="py-5 px-3" Href="Edit"></MudNavLink>
|
||||
<MudNavLink Icon="@Icons.Material.Filled.Air" Class="py-5 px-3" Href="ai"></MudNavLink>
|
||||
<MudNavLink Icon="@Icons.Material.Filled.SportsTennis" Class="py-5 px-3" Href="test"></MudNavLink>
|
||||
</MudPaper>
|
||||
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public string? Class { get; set; }
|
||||
}
|
52
TechHelper.Client/Layout/NavMenu.razor
Normal file
52
TechHelper.Client/Layout/NavMenu.razor
Normal file
@@ -0,0 +1,52 @@
|
||||
<div class="top-row ps-3 navbar navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="">TechHelper.Client</a>
|
||||
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
|
||||
<nav class="flex-column">
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="Account/Manage">
|
||||
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> 个人中心
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="Edit">
|
||||
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> 编辑器
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="test">
|
||||
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> 测试页面
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="ai">
|
||||
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> AI
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool collapseNavMenu = true;
|
||||
|
||||
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
|
||||
|
||||
private void ToggleNavMenu()
|
||||
{
|
||||
collapseNavMenu = !collapseNavMenu;
|
||||
}
|
||||
}
|
83
TechHelper.Client/Layout/NavMenu.razor.css
Normal file
83
TechHelper.Client/Layout/NavMenu.razor.css
Normal file
@@ -0,0 +1,83 @@
|
||||
.navbar-toggler {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
height: 3.5rem;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.bi {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.75rem;
|
||||
top: -1px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bi-house-door-fill-nav-menu {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.bi-plus-square-fill-nav-menu {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.bi-list-nested-nav-menu {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-item:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-item:last-of-type {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a {
|
||||
color: #d7d7d7;
|
||||
border-radius: 4px;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a.active {
|
||||
background-color: rgba(255,255,255,0.37);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-item ::deep a:hover {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-scrollable {
|
||||
/* Allow sidebar to scroll for tall menus */
|
||||
height: calc(100vh - 3.5rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
9
TechHelper.Client/Layout/RedirectToLogin.razor
Normal file
9
TechHelper.Client/Layout/RedirectToLogin.razor
Normal file
@@ -0,0 +1,9 @@
|
||||
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
@code {
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Navigation.NavigateToLogin("authentication/login");
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user