doc(ThemeChooser): update ThemeChooser component use BootstrapBlazorRootContent (#5484)

* doc: 使用 BootstrapBlazorRootContent 重构样式选择组件

* refactor: 更新样式选择弹窗脚本

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor

@@ -9,9 +9,12 @@
     }
 </HeadContent>
 
-<div id="@Id" class="theme">
-    <PulseButton class="btn-fade btn-theme" Color="Color.None" ImageUrl="@WebsiteOption.CurrentValue.GetAssetUrl("images/m.svg")" TooltipText="@Title" TooltipPlacement="Placement.Left" />
-    <div class="theme-list">
+<div id="@Id" class="theme" @onclick:stopPropagation>
+    <PulseButton TooltipPlacement="Placement.Left" TooltipText="@Title" Color="Color.None" ImageUrl="@WebsiteOption.CurrentValue.GetAssetUrl("images/m.svg")" class="btn-fade btn-theme" />
+</div>
+
+<BootstrapBlazorRootContent>
+    <div class="theme-list" @onclick:stopPropagation>
         <div class="theme-header">
             <div class="flex-fill">@HeaderText</div>
             <button class="btn-close btn-close-white" type="button" aria-label="Close"></button>
@@ -23,4 +26,4 @@
             </div>
         }
     </div>
-</div>
+</BootstrapBlazorRootContent>

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

@@ -1,26 +1,29 @@
-import { insertAfter } from "../../_content/BootstrapBlazor/modules/utility.js"
-import Data from "../../_content/BootstrapBlazor/modules/data.js"
-import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
+import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
 export function init(id) {
-    const el = document.getElementById(id)
+    const el = document.getElementById(id);
     if (el === null) {
-        return
+        return;
     }
-    const themeList = el.querySelector('.theme-list')
-
-    Data.set(id, { el });
 
+    const themeList = document.querySelector('.theme-list');
+    const close = document.querySelector('.theme-list .btn-close');
     EventHandler.on(el, 'click', () => {
-        themeList.classList.toggle('is-open')
-    })
+        themeList.classList.toggle('is-open');
+    });
+    EventHandler.on(close, 'click', () => {
+        themeList.classList.remove('is-open');
+    });
 }
 
 export function dispose(id) {
-    const theme = Data.get(id)
-    Data.remove(id)
+    const el = document.getElementById(id);
+    if (el) {
+        EventHandler.off(el, 'click');
+    }
 
-    if (theme) {
-        EventHandler.off(theme.el, 'click')
+    const close = document.querySelector('.theme-list .btn-close');
+    if (close) {
+        EventHandler.off(close, 'click');
     }
 }

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

@@ -31,9 +31,9 @@
             <DialButtonItem>
                 <LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@ChatTooltip" class="btn-fade btn-chat" Url="./ai-chat" Icon="fa-solid fa-comments"></LinkButton>
             </DialButtonItem>
-            @* <DialButtonItem>
+            <DialButtonItem>
                 <ThemeChooser></ThemeChooser>
-            </DialButtonItem> *@
+            </DialButtonItem>
             <DialButtonItem>
                 <LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@Title" class="btn-fade btn-update" Url="@WebsiteOption.CurrentValue.WikiUrl" Target="_blank" ImageUrl="@WebsiteOption.CurrentValue.GetAssetUrl("images/log.svg")"></LinkButton>
             </DialButtonItem>