!3638 feat(#I672H9): add BBLogo component for web site

* refactor: 改用 BBLogo 统一设置
* feat: 增加 BBLogo 组件

src/BootstrapBlazor.Shared/Components/BBLogo.razor

@@ -0,0 +1 @@
+<img alt="logo" class="bb-icon" src="_content/BootstrapBlazor.Shared/images/logo.png" />

src/BootstrapBlazor.Shared/Components/BBLogo.razor.css

@@ -0,0 +1,8 @@
+.bb-icon {
+    width: 42px;
+    height: auto;
+    border-radius: var(--bs-border-radius);
+    background-color: var(--bs-info);
+    border: solid 1px #fff;
+    margin-right: 1rem;
+}

src/BootstrapBlazor.Shared/Shared/BaseLayout.razor

@@ -2,7 +2,7 @@
 
 <header class="navbar-header navbar navbar-expand navbar-dark flex-column flex-md-row px-3">
     <div class="header-img navbar-brand">
-        <img class="bb-icon" alt="logo" src="_content/BootstrapBlazor.Shared/images/logo.png" />
+        <BBLogo />
         <span>Bootstrap Blazor</span>
     </div>
     <div class="navbar-nav-scroll">

src/BootstrapBlazor.Shared/Shared/BaseLayout.razor.css

@@ -8,23 +8,12 @@
 }
 
 .header-img {
-    --bb-logo: #732cf9;
     display: flex;
     align-items: center;
     padding: 0;
     margin-right: 0;
 }
 
-.bb-icon,
-::deep .bb-icon {
-    width: 42px;
-    height: auto;
-    border-radius: var(--bs-border-radius);
-    background-color: var(--bs-info);
-    border: solid 1px #fff;
-    margin-right: 1rem;
-}
-
 ::deep .btn-search .btn {
     --bs-btn-bg: #8759ff;
     --bs-btn-color: #fff;

src/BootstrapBlazor.Shared/Shared/ComponentLayout.razor

@@ -3,7 +3,8 @@
 @inject IOptionsMonitor<WebsiteOptions> WebsiteOption
 
 <div class="bb-title">
-    <img alt="logo" class="bb-icon" src="_content/BootstrapBlazor.Shared/images/logo.png" /><span>@Title</span>
+    <BBLogo />
+    <span>@Title</span>
 </div>
 
 <div class="text-center shields">

src/BootstrapBlazor.Shared/Shared/ComponentLayout.razor.css

@@ -6,10 +6,6 @@
     margin-bottom: 0.5rem;
 }
 
-.bb-icon {
-    display: none;
-}
-
 .tab-navigators {
     position: fixed;
     right: 1rem;
@@ -29,12 +25,16 @@
             margin-top: 1.5rem;
         }
 
+::deep .bb-icon {
+    display: none;
+}
+
 @media (min-width: 576px) {
     .bb-title {
         font-size: 1.2rem;
     }
 
-    .bb-icon {
+    ::deep .bb-icon {
         display: inline-block;
     }
 }

src/BootstrapBlazor.Shared/Shared/MainLayout.razor

@@ -4,7 +4,7 @@
 <section class="section">
     <div class="sidebar">
         <div class="sidebar-title">
-            <img alt="logo" class="bb-icon" src="_content/BootstrapBlazor.Shared/images/logo.png" />
+            <BBLogo />
             <span class="sidebar-text">Bootstrap Blazor</span>
         </div>
         <NavMenu />