From 8f64d18f0126c1440235fe80a648efca63f65689 Mon Sep 17 00:00:00 2001
From: wherewhere <qq2518766683@outlook.com>
Date: Mon, 3 Jun 2024 17:48:51 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8E=B0=E5=9C=A8=E5=8F=AF=E4=BB=A5=E7=BB=99?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=AE=BE=E7=BD=AE=20class=20=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Wherlog/Controls/MarkdownSection.razor        |  2 +-
 Wherlog/Controls/MarkdownSection.razor.cs     |  5 ++++
 Wherlog/Controls/SettingsCard.razor           |  2 +-
 Wherlog/Controls/SettingsCard.razor.cs        |  5 ++++
 Wherlog/Controls/SettingsExpander.razor       |  2 +-
 Wherlog/Controls/SettingsExpander.razor.cs    |  5 ++++
 Wherlog/Controls/SettingsGroup.razor          |  9 ++++--
 Wherlog/Controls/SettingsPresenter.razor      |  2 +-
 Wherlog/Controls/SettingsPresenter.razor.cs   |  5 ++++
 Wherlog/Pages/SettingsPage.razor              |  5 +++-
 .../Pages/ToolsPages/BiliBiliCardPage.razor   | 28 +++++++++++++------
 Wherlog/Wherlog.csproj                        |  6 ++--
 12 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/Wherlog/Controls/MarkdownSection.razor b/Wherlog/Controls/MarkdownSection.razor
index de25c04..34f81ae 100644
--- a/Wherlog/Controls/MarkdownSection.razor
+++ b/Wherlog/Controls/MarkdownSection.razor
@@ -3,6 +3,6 @@
 @implements IAsyncDisposable
 @inject IJSRuntime JSRuntime
 
-<div class="markdown-section">
+<div class="@ClassValue" style="@Style">
     @HtmlContent
 </div>
diff --git a/Wherlog/Controls/MarkdownSection.razor.cs b/Wherlog/Controls/MarkdownSection.razor.cs
index 9492176..bfdb1a8 100644
--- a/Wherlog/Controls/MarkdownSection.razor.cs
+++ b/Wherlog/Controls/MarkdownSection.razor.cs
@@ -1,6 +1,7 @@
 using Markdig;
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 using Microsoft.JSInterop;
 using System;
 using System.Threading.Tasks;
@@ -15,6 +16,10 @@ public partial class MarkdownSection : FluentComponentBase, IAsyncDisposable
         private bool _raiseContentConverted;
         private IJSObjectReference _jsModule;
 
+        private string ClassValue => new CssBuilder(Class)
+            .AddClass("markdown-section")
+            .Build();
+
         /// <summary>
         /// Gets or sets the Markdown content 
         /// </summary>
diff --git a/Wherlog/Controls/SettingsCard.razor b/Wherlog/Controls/SettingsCard.razor
index 7e413f5..dcd799e 100644
--- a/Wherlog/Controls/SettingsCard.razor
+++ b/Wherlog/Controls/SettingsCard.razor
@@ -1,6 +1,6 @@
 @inherits FluentComponentBase
 
-<div class="settings-card" style="@Style">
+<div class="@ClassValue" style="@Style">
     <FluentCard AreaRestricted="false" Style="padding: var(--settings-card-padding);">
         <SettingsPresenter
             Icon="@Icon"
diff --git a/Wherlog/Controls/SettingsCard.razor.cs b/Wherlog/Controls/SettingsCard.razor.cs
index 7e1742f..99e7ae8 100644
--- a/Wherlog/Controls/SettingsCard.razor.cs
+++ b/Wherlog/Controls/SettingsCard.razor.cs
@@ -1,10 +1,15 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Wherlog.Controls
 {
     public partial class SettingsCard : FluentComponentBase
     {
+        private string ClassValue => new CssBuilder(Class)
+            .AddClass("settings-card")
+            .Build();
+
         /// <summary>
         /// Gets or sets the Header.
         /// </summary>
diff --git a/Wherlog/Controls/SettingsExpander.razor b/Wherlog/Controls/SettingsExpander.razor
index 575993a..d5a9991 100644
--- a/Wherlog/Controls/SettingsExpander.razor
+++ b/Wherlog/Controls/SettingsExpander.razor
@@ -1,6 +1,6 @@
 @inherits FluentComponentBase
 
-<div class="settings-card" style="@Style">
+<div class="@ClassValue" style="@Style">
     <FluentAccordion>
         <FluentAccordionItem ChildContent="@Content">
             <HeadingTemplate>
diff --git a/Wherlog/Controls/SettingsExpander.razor.cs b/Wherlog/Controls/SettingsExpander.razor.cs
index 72c4cc9..f6a6328 100644
--- a/Wherlog/Controls/SettingsExpander.razor.cs
+++ b/Wherlog/Controls/SettingsExpander.razor.cs
@@ -1,10 +1,15 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Wherlog.Controls
 {
     public partial class SettingsExpander : FluentComponentBase
     {
+        private string ClassValue => new CssBuilder(Class)
+            .AddClass("settings-expander")
+            .Build();
+
         /// <summary>
         /// Gets or sets the Header.
         /// </summary>
diff --git a/Wherlog/Controls/SettingsGroup.razor b/Wherlog/Controls/SettingsGroup.razor
index 86bea7b..1162752 100644
--- a/Wherlog/Controls/SettingsGroup.razor
+++ b/Wherlog/Controls/SettingsGroup.razor
@@ -1,6 +1,7 @@
-@inherits FluentComponentBase
+@using Microsoft.FluentUI.AspNetCore.Components.Utilities
+@inherits FluentComponentBase
 
-<div class="settings-group" style="@Style">
+<div class="@ClassValue" style="@Style">
     @if (Header != null)
     {
         <div class="header-presenter">@Header</div>
@@ -12,6 +13,10 @@
 
 @code
 {
+    private string ClassValue => new CssBuilder(Class)
+        .AddClass("settings-group")
+        .Build();
+
     /// <summary>
     /// Gets or sets the Header.
     /// </summary>
diff --git a/Wherlog/Controls/SettingsPresenter.razor b/Wherlog/Controls/SettingsPresenter.razor
index 9baaede..81c59eb 100644
--- a/Wherlog/Controls/SettingsPresenter.razor
+++ b/Wherlog/Controls/SettingsPresenter.razor
@@ -1,6 +1,6 @@
 @inherits FluentComponentBase
 
-<div class="settings-presenter" style="@Style">
+<div class="@ClassValue" style="@Style">
     <div class="header-root">
         @if (Icon != null)
         {
diff --git a/Wherlog/Controls/SettingsPresenter.razor.cs b/Wherlog/Controls/SettingsPresenter.razor.cs
index d02500f..19d08a3 100644
--- a/Wherlog/Controls/SettingsPresenter.razor.cs
+++ b/Wherlog/Controls/SettingsPresenter.razor.cs
@@ -1,10 +1,15 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Wherlog.Controls
 {
     public partial class SettingsPresenter : FluentComponentBase
     {
+        private string ClassValue => new CssBuilder(Class)
+            .AddClass("settings-presenter")
+            .Build();
+
         /// <summary>
         /// Gets or sets the Header.
         /// </summary>
diff --git a/Wherlog/Pages/SettingsPage.razor b/Wherlog/Pages/SettingsPage.razor
index a0f735f..912d970 100644
--- a/Wherlog/Pages/SettingsPage.razor
+++ b/Wherlog/Pages/SettingsPage.razor
@@ -218,7 +218,10 @@
                         <Description>Navigate to target url.</Description>
                         <ActionContent>
                             <FluentStack Width="var(--settings-card-content-min-width)" HorizontalAlignment="HorizontalAlignment.Right">
-                                <FluentTextField Placeholder="输入 URL" Style="width: 100%;" @bind-Value="path" />
+                                <FluentTextField
+                                    Placeholder="输入 URL"
+                                    Style="width: 100%;"
+                                    @bind-Value="path" />
                                 <FluentButton OnClick="@(() => Navigation.NavigateTo(path ?? string.Empty))">前往</FluentButton>
                             </FluentStack>
                         </ActionContent>
diff --git a/Wherlog/Pages/ToolsPages/BiliBiliCardPage.razor b/Wherlog/Pages/ToolsPages/BiliBiliCardPage.razor
index 28668e3..3517165 100644
--- a/Wherlog/Pages/ToolsPages/BiliBiliCardPage.razor
+++ b/Wherlog/Pages/ToolsPages/BiliBiliCardPage.razor
@@ -10,22 +10,34 @@
     <FluentTabs>
         <FluentTab Label="Auto">
             <FluentStack Orientation="Orientation.Vertical">
-                <FluentTextField Label="BiliBili Video ID" Placeholder="BV1y54y1a768" @bind-Value="ID" />
-                <FluentTextField Label="Image Proxy" Placeholder="https://images.weserv.nl/?url=" @bind-Value="imageProxy" />
+                <FluentTextField
+                    Label="BiliBili Video ID"
+                    Placeholder="BV1y54y1a768"
+                    @bind-Value="ID" />
+                <FluentTextField
+                    Label="Image Proxy"
+                    Placeholder="https://images.weserv.nl/?url="
+                    @bind-Value="imageProxy" />
                 <FluentButton OnClick="@(() => CreateCardAsync(id))">Create Card</FluentButton>
             </FluentStack>
         </FluentTab>
         <FluentTab Label="Manual">
             <FluentStack Orientation="Orientation.Vertical">
-                <FluentTextField Label="BiliBili Video ID" Placeholder="BV1y54y1a768" @bind-Value="ID" />
+                <FluentTextField
+                    Label="BiliBili Video ID"
+                    Placeholder="BV1y54y1a768"
+                    @bind-Value="ID" />
                 <FluentAnchor Href="@url" Target="_blank">Get JSON</FluentAnchor>
                 <FluentTextArea Label="Input JSON" @bind-Value="json" />
-                <FluentTextField Label="Image Proxy" Placeholder="https://images.weserv.nl/?url=" @bind-Value="imageProxy" />
+                <FluentTextField
+                    Label="Image Proxy"
+                    Placeholder="https://images.weserv.nl/?url="
+                    @bind-Value="imageProxy" />
                 <FluentButton OnClick="@(() => CreateCard(json))">Create Card</FluentButton>
             </FluentStack>
         </FluentTab>
     </FluentTabs>
-    <MarkdownSection Content="@example" />
+    <MarkdownSection Content="@example" Style="max-width: 100%;" />
 </FluentStack>
 
 @code
@@ -88,11 +100,11 @@
                 string element = $"<{string.Join(" ", attributes)}></bilibili-card>";
                 const string script = "<script src=\"https://unpkg.com/hexo-tag-bilibili-card/components/bilibili-card/bilibili-card.js\"></script>";
                 example = new StringBuilder()
+                                .AppendLine(script)
+                                .AppendLine(element)
                                 .AppendLine("```html")
                                 .AppendLine(element)
-                                .AppendLine("```")
-                                .AppendLine(script)
-                                .Append(element)
+                                .Append("```")
                                 .ToString();
             }
         }
diff --git a/Wherlog/Wherlog.csproj b/Wherlog/Wherlog.csproj
index 2c22d16..ec63911 100644
--- a/Wherlog/Wherlog.csproj
+++ b/Wherlog/Wherlog.csproj
@@ -19,9 +19,9 @@
 
   <ItemGroup>
     <PackageReference Include="Markdig" Version="0.37.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.5" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.5" PrivateAssets="all" />
-    <PackageReference Include="Microsoft.Extensions.Localization" Version="8.0.5" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.6" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.6" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.Extensions.Localization" Version="8.0.6" />
     <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.7.2" />
 	  <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.7.2" />
   </ItemGroup>