doc(DialButton): update dial button (#6613)

* refactor: 代码格式化

* doc: 重构更新日志按钮样式

Author: ArgoZhang

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

@@ -29,13 +29,21 @@
                 <ThemeMode></ThemeMode>
             </DialButtonItem>
             <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>
+                <Tooltip Title="@ChatTooltip" Placement="Placement.Left" class="btn btn-circle btn-fade btn-dial-item d-flex">
+                    <a href="./ai-chat">
+                        <i class="fa-solid fa-comments"></i>
+                    </a>
+                </Tooltip>
             </DialButtonItem>
             <DialButtonItem>
                 <ThemeChooser></ThemeChooser>
             </DialButtonItem>
             <DialButtonItem>
-                <LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@Title" class="btn-fade btn-update" Url="@WebsiteOption.Value.WikiUrl" Target="_blank" ImageUrl="@WebsiteOption.Value.GetAssetUrl("images/log.svg")"></LinkButton>
+                <Tooltip Title="@ChatTooltip" Placement="Placement.Left" class="btn btn-circle btn-fade btn-dial-item d-flex">
+                    <a href="@WebsiteOption.Value.WikiUrl" target="_blank">
+                        <i class="fa-solid fa-file-circle-check"></i>
+                    </a>
+                </Tooltip>
             </DialButtonItem>
         </ChildContent>
     </DialButton>

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

@@ -96,31 +96,20 @@
         opacity: 1;
     }
 
-::deep .btn-update {
-    --bs-btn-bg: var(--bb-layout-button-update-bg);
-    --bs-btn-hover-bg: var(--bs-btn-bg);
-    --bs-btn-active-bg: var(--bs-btn-bg);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-    ::deep .btn-update img {
-        width: 55%;
-        margin-inline-start: 2px;
-    }
-
-::deep .btn-chat {
+::deep .btn-dial-item {
     --bs-btn-bg: var(--bb-layout-button-bg);
     --bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
     --bs-btn-active-bg: var(--bb-layout-button-active-bg);
     box-shadow: var(--bb-layout-button-shadow);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--bb-button-chat-color);
 }
 
+    ::deep .btn-dial-item a {
+        color: var(--bb-button-chat-color);
+    }
+
 ::deep .btn-theme-mode {
     --bs-btn-bg: var(--bb-layout-button-bg);
     --bs-btn-hover-bg: var(--bb-layout-button-hover-bg);