doc(Ad): redesign wwads component (#3651)

* style: 移除滚动条样式

* chore: 更新字典

* style: 更新广告样式

* refactor: 增加 IsVertical 参数

exclusion.dic

@@ -87,3 +87,4 @@ Searchs
 meili
 onerror
 dockview
+Wwads

src/BootstrapBlazor.Server/Components/Components/Wwads.razor

@@ -1,4 +1,4 @@
 @inherits WebSiteModuleComponentBase
 @attribute [JSModuleAutoLoader("Components/Wwads.razor.js", AutoInvokeDispose = false)]
 
-<div @attributes="AdditionalAttributes" id="@Id" class="@ClassString" data-bb-debug="@_debugString"></div>
+<div @attributes="AdditionalAttributes" id="@Id" class="@ClassString"></div>

src/BootstrapBlazor.Server/Components/Components/Wwads.razor.cs

@@ -9,21 +9,26 @@ namespace BootstrapBlazor.Server.Components.Components;
 /// </summary>
 public partial class Wwads
 {
-    private string _debugString = "false";
+    /// <summary>
+    /// 获得/设置 是否垂直布局
+    /// </summary>
+    [Parameter]
+    public bool IsVertical { get; set; }
 
     private string? ClassString => CssBuilder.Default("bb-ad")
+        .AddClass("bb-ad-vertical", IsVertical)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
+#if DEBUG
+    private readonly bool isDebug = true;
+#else
+    private readonly bool isDebug = false;
+#endif
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-#if DEBUG
-        _debugString = "true";
-#endif
-    }
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, new { IsVertical, IsDebug = isDebug });
 }

src/BootstrapBlazor.Server/Components/Components/Wwads.razor.js

@@ -1,15 +1,17 @@
 import { addLink } from '../../_content/BootstrapBlazor/modules/utility.js'
 
-export async function init(id) {
+export async function init(id, options) {
     var el = document.getElementById(id)
     if (el) {
-        await addLink("../../css/wwads.css")
+        await addLink("../../css/wwads.css");
 
-        if (el.getAttribute('data-bb-debug') !== 'true') {
+        const { isVertical, isDebug } = options;
+
+        if (isDebug === false) {
             const ad = document.createElement('div')
             ad.setAttribute("data-id", 72)
             ad.classList.add("wwads-cn")
-            ad.classList.add("wwads-horizontal")
+            ad.classList.add(isVertical ? "wwads-vertical" : "wwads-horizontal");
             el.appendChild(ad);
 
             //    const cc = document.createElement('div');

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

@@ -4,11 +4,11 @@
 <section class="section">
     <aside class="sidebar">
         <div class="sidebar-title">
-            <BBLogo />
+            <BBLogo></BBLogo>
             <span class="sidebar-text">Bootstrap Blazor</span>
         </div>
-        <TutorialsNavMenu />
-        <Wwads class="bb-ad-vertical" />
+        <TutorialsNavMenu></TutorialsNavMenu>
+        <Wwads IsVertical="true"></Wwads>
     </aside>
 
     <section class="main">

src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.css

@@ -22,7 +22,6 @@
 
     ::deep .scroll {
         overflow-x: hidden;
-        max-height: calc(100% - 36px);
         padding: 5px 0;
     }
 

src/BootstrapBlazor.Server/wwwroot/css/wwads.css

@@ -11,10 +11,10 @@
         right: 0;
     }
 
-    .bb-ad[data-bb-debug="true"] {
-        background-color: #f4f8fa;
-        border-radius: 3px;
-    }
+.bb-ad {
+    background-color: #f4f8fa;
+    border-radius: 3px;
+}
 
     .bb-ad .wwads-horizontal,
     .bb-ad .wwads-vertical {