refactor(Layout): enhance layout styles

src/BootstrapBlazor.Server/Components/Components/InstallContent.razor

@@ -91,5 +91,5 @@
 <p>@Localizer["P37"] <code>BootstrapBlazor</code> @Localizer["P38"]：</p>
 <p class="code-label">1. @Localizer["P39"] <code>Button</code> @Localizer["P40"]</p>
 <Pre>&lt;Button Color="Color.Primary" Icon="fa-solid fa-font-awesome" Text="@Localizer["P41"]" /&gt;</Pre>
-<p class="code-label">2. @Localizer["P42"] <b>Visual studio 2022</b> @Localizer["P43"] <kbd>F5</kbd> @Localizer["P44"]</p>
+<p class="code-label">2. @Localizer["P42"] <b>Visual studio</b> @Localizer["P43"] <kbd>F5</kbd> @Localizer["P44"]</p>
 <img alt="install" src="./images/preview.png" style="border-radius: 6px;" class="d-none d-sm-block" />

src/BootstrapBlazor.Server/Components/Components/Widget.razor

@@ -1,5 +1,5 @@
-<DropdownWidget>
-    <DropdownWidgetItem Icon="fa-regular fa-envelope" BadgeNumber="4" BadgeColor="Color.Primary">
+<DropdownWidget class="px-3 d-none d-sm-block">
+    <DropdownWidgetItem Icon="fa-regular fa-envelope" BadgeNumber="4">
         <HeaderTemplate>
             <span>您有 4 个未读消息</span>
         </HeaderTemplate>
@@ -8,12 +8,12 @@
             {
                 <a class="dropdown-item d-flex align-items-center" href="#" @onclick:preventDefault>
                     <div style="width: 40px; height: 40px;">
-                        <Avatar Url="./images/Argo-C.png" IsCircle="true" Size="Size.Small" />
+                        <Avatar Url="images/Argo-C.png" IsCircle="true" Size="Size.Small" />
                     </div>
                     <div class="ms-2">
                         <div class="d-flex position-relative">
-                            <h4>Argo Zhang</h4>
-                            <small><i class="fa-regular fa-clock"></i> @(4 + index) mins</small>
+                            <div class="flex-fill">Argo Zhang</div>
+                            <small><i class="fa fa-clock-o"></i> @(4 + index) mins</small>
                         </div>
                         <div class="text-truncate">Why not buy a new awesome theme?</div>
                     </div>
@@ -24,15 +24,15 @@
             <a href="#" @onclick:preventDefault>查看所有消息</a>
         </FooterTemplate>
     </DropdownWidgetItem>
-    <DropdownWidgetItem Icon="fa-regular fa-bell" BadgeNumber="10" HeaderColor="Color.Success" BadgeColor="Color.Success">
+    <DropdownWidgetItem Icon="fa-regular fa-bell" BadgeNumber="10" HeaderColor="Color.Success" BadgeColor="Color.Warning">
         <HeaderTemplate>
             <span>您有 10 个未读通知</span>
         </HeaderTemplate>
         <BodyTemplate>
             @for (var index = 0; index < 10; index++)
             {
                 <a class="dropdown-item d-flex align-items-center" href="#" @onclick:preventDefault>
-                    <i class="fa-solid fa-users text-primary"></i>
+                    <i class="fa fa-users text-primary"></i>
                     <div class="ms-2">5 new members joined</div>
                 </a>
             }
@@ -41,31 +41,31 @@
             <a href="#" @onclick:preventDefault>查看所有通知</a>
         </FooterTemplate>
     </DropdownWidgetItem>
-    <DropdownWidgetItem Icon="fa-solid fa-flag" BadgeNumber="9" HeaderColor="Color.Danger" BadgeColor="Color.Danger">
+    <DropdownWidgetItem Icon="fa-regular fa-flag" BadgeNumber="9" HeaderColor="Color.Danger" BadgeColor="Color.Danger">
         <HeaderTemplate>
             <span>您有 3 个任务</span>
         </HeaderTemplate>
         <BodyTemplate>
             <a href="#" class="dropdown-item" @onclick:preventDefault>
-                <h3 class="position-relative">
-                    Design some buttons
-                    <small class="pull-right">20%</small>
-                </h3>
-                <BootstrapBlazor.Components.Progress IsAnimated="true" IsStriped="true" Value="20" Color="Color.Primary"></BootstrapBlazor.Components.Progress>
+                <div class="d-flex">
+                    <div class="flex-fill pe-5">Design some buttons</div>
+                    <small>20%</small>
+                </div>
+                <Progress IsAnimated="true" IsStriped="true" Value="20" Color="Color.Primary"></Progress>
             </a>
             <a href="#" class="dropdown-item" @onclick:preventDefault>
-                <h3 class="position-relative">
-                    Create a nice theme
-                    <small class="pull-right">40%</small>
-                </h3>
-                <BootstrapBlazor.Components.Progress Value="40" Color="Color.Success"></BootstrapBlazor.Components.Progress>
+                <div class="d-flex">
+                    <div class="flex-fill pe-5">Create a nice theme</div>
+                    <small>40%</small>
+                </div>
+                <Progress Value="40" Color="Color.Success"></Progress>
             </a>
             <a href="#" class="dropdown-item" @onclick:preventDefault>
-                <h3 class="position-relative">
-                    Some task I need to do
-                    <small class="pull-right">60%</small>
-                </h3>
-                <BootstrapBlazor.Components.Progress Value="60" Color="Color.Danger"></BootstrapBlazor.Components.Progress>
+                <div class="d-flex">
+                    <div class="flex-fill pe-5">Some task I need to do</div>
+                    <small>60%</small>
+                </div>
+                <Progress Value="60" Color="Color.Danger"></Progress>
             </a>
         </BodyTemplate>
         <FooterTemplate>

src/BootstrapBlazor.Server/Components/Layout/PageLayout.razor

@@ -1,16 +1,25 @@
 @inherits LayoutComponentBase
 @inject IOptionsMonitor<WebsiteOptions> WebsiteOption
 
+<HeadContent>
+    <link href="./css/layout.css" rel="stylesheet" />
+</HeadContent>
+
 <CascadingValue Value="this" IsFixed="true">
-    <Layout SideWidth="0" IsPage="true" IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter"
+    <Layout IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter"
             ShowFooter="@ShowFooter" ShowGotoTop="true" ShowCollapseBar="true" Menus="@Menus"
             UseTabSet="@UseTabSet" TabDefaultUrl="layout-page" AdditionalAssemblies="new[] { GetType().Assembly }" class="@LayoutClassString">
         <Header>
             <span class="ms-3 flex-fill">Bootstrap of Blazor</span>
             <Widget></Widget>
-            <img alt="avatar" src="./images/Argo-C.png" class="layout-avatar-right" />
-            <span class="mx-3 d-none d-sm-block">超级管理员</span>
-            <div class="layout-drawer" @onclick="@ToggleDrawer"><i class="fa-solid fa-gears"></i></div>
+            <Logout ImageUrl="images/Argo-C.png" DisplayName="超级管理员" UserName="Admin">
+                <LinkTemplate>
+                    <a href="#"><i class="fa-solid fa-suitcase"></i>个人中心</a>
+                    <a href="#"><i class="fa-solid fa-cog"></i>设置</a>
+                    <a href="#"><i class="fa-solid fa-bell"></i>通知<span class="badge badge-pill badge-success"></span></a>
+                    <LogoutLink />
+                </LinkTemplate>
+            </Logout>
         </Header>
         <Side>
             <div class="layout-banner">
@@ -29,110 +38,4 @@
             </div>
         </Footer>
     </Layout>
-
-    <Drawer Placement="Placement.Right" @bind-IsOpen="@IsOpen" IsBackdrop="true">
-        <div class="layout-drawer-body">
-            <div class="btn btn-info w-100" @onclick="@(e => IsOpen = false)">点击关闭</div>
-            <div class="page-layout-demo-option">
-                <p>布局调整</p>
-                <div class="row">
-                    <div class="col-6">
-                        <Tooltip Title="左右结构">
-                            <div class="layout-item @(IsFullSide ? "active d-flex" : "d-flex")" @onclick="@(e => IsFullSide = true)">
-                                <div class="layout-left d-flex flex-column">
-                                    <div class="layout-left-header"></div>
-                                    <div class="layout-left-body flex-fill"></div>
-                                </div>
-                                <div class="layout-right d-flex flex-column flex-fill">
-                                    <div class="layout-right-header"></div>
-                                    <div class="layout-right-body flex-fill"></div>
-                                    <div class="layout-right-footer"></div>
-                                </div>
-                            </div>
-                        </Tooltip>
-                    </div>
-                    <div class="col-6">
-                        <Tooltip Title="上下结构">
-                        <div class="layout-item flex-column @(IsFullSide ? "d-flex" : "active d-flex")" @onclick="@(e => IsFullSide = false)">
-                            <div class="layout-top">
-                            </div>
-                            <div class="layout-body d-flex flex-fill">
-                                <div class="layout-left">
-                                </div>
-                                <div class="layout-right flex-fill">
-                                </div>
-                            </div>
-                            <div class="layout-footer">
-                            </div>
-                        </div>
-                        </Tooltip>
-                    </div>
-                </div>
-            </div>
-
-            <div class="page-layout-demo-option">
-                <p>固定调整</p>
-                <div class="row">
-                    <div class="col-6 d-flex align-items-center">
-                        <Switch @bind-Value="@IsFixedHeader" OnColor="@Color.Success" OffColor="@Color.Secondary"></Switch>
-                    </div>
-                    <div class="col-6 text-end">
-                        <span>固定页头</span>
-                    </div>
-                </div>
-                <div class="row mt-3">
-                    <div class="col-6 d-flex align-items-center">
-                        <Switch @bind-Value="@IsFixedFooter" OnColor="@Color.Success" OffColor="@Color.Secondary"></Switch>
-                    </div>
-                    <div class="col-6 text-end">
-                        <span>固定页脚</span>
-                    </div>
-                </div>
-                <div class="row mt-3">
-                    <div class="col-6 d-flex align-items-center">
-                        <Switch @bind-Value="@ShowFooter" OnColor="@Color.Success" OffColor="@Color.Secondary"></Switch>
-                    </div>
-                    <div class="col-6 text-end">
-                        <span>显示页脚</span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="page-layout-demo-option">
-                <p>主题配色</p>
-                <div class="row">
-                    <div class="col-2">
-                        <span class="color color1" @onclick="@(e => Theme = "color1")"></span>
-                    </div>
-                    <div class="col-2">
-                        <span class="color color2" @onclick="@(e => Theme = "color2")"></span>
-                    </div>
-                    <div class="col-2">
-                        <span class="color color3" @onclick="@(e => Theme = "color3")"></span>
-                    </div>
-                    <div class="col-2">
-                        <span class="color color4" @onclick="@(e => Theme = "color4")"></span>
-                    </div>
-                    <div class="col-2">
-                        <span class="color color5" @onclick="@(e => Theme = "color5")"></span>
-                    </div>
-                    <div class="col-2">
-                        <span class="color color6" @onclick="@(e => Theme = "color6")"></span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="page-layout-demo-option">
-                <p>更多设置</p>
-                <div class="row">
-                    <div class="col-6 d-flex align-items-center">
-                        <Switch @bind-Value="@UseTabSet" OnColor="@Color.Success" OffColor="@Color.Primary"></Switch>
-                    </div>
-                    <div class="col-6 text-end">
-                        <span>@(UseTabSet ? "多标签" : "单页")</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </Drawer>
 </CascadingValue>

src/BootstrapBlazor.Server/Components/Layout/PageLayout.razor.cs

@@ -24,37 +24,31 @@ public sealed partial class PageLayout
     /// <summary>
     /// 获得/设置 是否固定 TabHeader
     /// </summary>
-    [Parameter]
     public bool IsFixedTab { get; set; }
 
     /// <summary>
     /// 获得/设置 是否固定页头
     /// </summary>
-    [Parameter]
     public bool IsFixedHeader { get; set; } = true;
 
     /// <summary>
     /// 获得/设置 是否固定页脚
     /// </summary>
-    [Parameter]
     public bool IsFixedFooter { get; set; } = true;
 
     /// <summary>
     /// 获得/设置 侧边栏是否外置
     /// </summary>
-    [Parameter]
     public bool IsFullSide { get; set; } = true;
 
     /// <summary>
     /// 获得/设置 是否显示页脚
     /// </summary>
-    [Parameter]
     public bool ShowFooter { get; set; } = true;
 
     /// <summary>
     /// 获得/设置 是否开启多标签模式
     /// </summary>
-    [Parameter]
     public bool UseTabSet { get; set; } = true;
 
     /// <summary>
@@ -80,9 +74,4 @@ protected override async Task OnInitializedAsync()
     /// 更新组件方法
     /// </summary>
     public void Update() => StateHasChanged();
-
-    private void ToggleDrawer()
-    {
-        IsOpen = !IsOpen;
-    }
 }