添加设置卡片

wherewhere · May 27, 2024 · b735039 · b735039
1 parent e56b6ad
commit b735039
Show file tree

Hide file tree

Showing 8 changed files with 183 additions and 33 deletions.
diff --git a/Wherlog/Controls/MainLayout.razor b/Wherlog/Controls/MainLayout.razor
@@ -7,7 +7,6 @@
         <FluentHeader>@(site?.Title ?? "wherlog")</FluentHeader>
         <FluentStack
             Class="main-split"
-            Orientation="Orientation.Horizontal"
             Width="100%"
             Style="align-items: stretch;">
             <div class="nav-div">

diff --git a/Wherlog/Controls/SettingsCard.razor b/Wherlog/Controls/SettingsCard.razor
@@ -0,0 +1,18 @@
+@inherits FluentComponentBase
+
+<div class="settings-card">
+    <FluentCard AreaRestricted="false" Style="padding: var(--settings-card-padding);">
+        <div class="root-grid">
+            <div style="display: flex; align-items: center;">
+                <div class="icon-holder">
+                    @Icon
+                </div>
+                <div class="header-panel">
+                    <span>@Header</span>
+                    <span class="description">@Description</span>
+                </div>
+            </div>
+            @ActionContent
+        </div>
+    </FluentCard>
+</div>
diff --git a/Wherlog/Controls/SettingsCard.razor.cs b/Wherlog/Controls/SettingsCard.razor.cs
@@ -0,0 +1,72 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components;
+
+namespace Wherlog.Controls
+{
+    public partial class SettingsCard : FluentComponentBase
+    {
+        /// <summary>
+        /// Gets or sets the Header.
+        /// </summary>
+        [Parameter]
+        public RenderFragment Header { get; set; }
+
+        /// <summary>
+        /// Gets or sets the description.
+        /// </summary>
+        [Parameter]
+        public RenderFragment Description { get; set; }
+
+        /// <summary>
+        /// Gets or sets the icon on the left.
+        /// </summary>
+        [Parameter]
+        public RenderFragment Icon { get; set; }
+
+        /// <summary>
+        /// Gets or sets the icon that is shown when IsClickEnabled is set to true.
+        /// </summary>
+        [Parameter]
+        public RenderFragment ActionIcon { get; set; }
+
+        /// <summary>
+        /// Gets or sets the content of a ContentControl.
+        /// </summary>
+        [Parameter]
+        public RenderFragment ActionContent { get; set; }
+
+        /// <summary>
+        /// Gets or sets the tooltip of the ActionIcon.
+        /// </summary>
+        [Parameter]
+        public string ActionIconToolTip { get; set; } = "More";
+
+        /// <summary>
+        /// Gets or sets if the card can be clicked.
+        /// </summary>
+        [Parameter]
+        public bool IsClickEnabled { get; set; }
+
+        /// <summary>
+        /// Gets or sets the alignment of the Content.
+        /// </summary>
+        [Parameter]
+        public ContentAlignment ContentAlignment { get; set; }
+    }
+
+    public enum ContentAlignment
+    {
+        /// <summary>
+        /// The Content is aligned to the right. Default state.
+        /// </summary>
+        Right,
+        /// <summary>
+        /// The Content is left-aligned while the Header, HeaderIcon and Description are collapsed. This is commonly used for Content types such as CheckBoxes, RadioButtons and custom layouts.
+        /// </summary>
+        Left,
+        /// <summary>
+        /// The Content is vertically aligned.
+        /// </summary>
+        Vertical
+    }
+}
diff --git a/Wherlog/Controls/SettingsCard.razor.css b/Wherlog/Controls/SettingsCard.razor.css
@@ -0,0 +1,31 @@
+* {
+    --settings-card-border-thickness: 1px;
+    --settings-card-padding: 16px;
+    --settings-card-description-font-size: 12px;
+    --settings-card-header-icon-max-size: 20px;
+    --settings-card-content-min-width: 240px;
+    --settings-card-header-icon-margin: 0px 20px 0px 2px;
+}
+
+::deep div.root-grid {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+::deep div.icon-holder {
+    max-width: var(--settings-card-header-icon-max-size);
+    max-height: var(--settings-card-header-icon-max-size);
+    margin: var(--settings-card-header-icon-margin);
+}
+
+::deep div.header-panel {
+    display: flex;
+    flex-direction: column;
+    margin: 0px 24px 0px 0px;
+}
+
+::deep span.description {
+    font-size: var(--settings-card-description-font-size);
+    color: var(--neutral-fill-strong-hover);
+}
diff --git a/Wherlog/Models/Post/Interfaces.cs b/Wherlog/Models/Post/Interfaces.cs
@@ -32,9 +32,6 @@ public interface IPost
 
         [JsonPropertyName("tags")]
         public CateModel[] Tags { get; }
-
-        [JsonPropertyName("api")]
-        public string Api { get; }
     }
 
     public interface IPost<out TInfo> : IInfo<TInfo> where TInfo : IInfo

diff --git a/Wherlog/Models/Post/PostDetailModel.cs b/Wherlog/Models/Post/PostDetailModel.cs
@@ -4,7 +4,7 @@
 
 namespace Wherlog.Models.Post
 {
-    public sealed class PostDetailModel : IPost, IApi, IDetail
+    public sealed class PostDetailModel : IPost, IDetail
     {
         [JsonPropertyName("title")]
         public string Title { get; init; }
@@ -41,8 +41,5 @@ public sealed class PostDetailModel : IPost, IApi, IDetail
 
         [JsonPropertyName("tags")]
         public CateModel[] Tags { get; init; }
-
-        [JsonPropertyName("api")]
-        public string Api { get; init; }
     }
 }
diff --git a/Wherlog/Pages/SettingsPage.razor b/Wherlog/Pages/SettingsPage.razor
@@ -11,39 +11,75 @@
 <h1>@Loc["TitleText"]</h1>
 
 <FluentStack Orientation="Orientation.Vertical">
-    <div>
+    <div style="width: 100%;">
         <h4>Theme</h4>
-        <FluentSelect
-            Width="250px"
-            Items="@(Enum.GetValues<DesignThemeModes>())"
-            @bind-SelectedOption="@mode" />
+        <SettingsCard>
+            <Icon>
+                <FluentIcon Value="new Icons.Regular.Size20.Color()" />
+            </Icon>
+            <Header>App Theme</Header>
+            <Description>Set the theme of this App.</Description>
+            <ActionContent>
+                <FluentSelect
+                    Width="auto"
+                    Items="@(Enum.GetValues<DesignThemeModes>())"
+                    @bind-SelectedOption="@mode" />
+            </ActionContent>
+        </SettingsCard>
     </div>
 
-    <div>
+    <div style="width: 100%;">
         <h4>Language</h4>
-        <FluentSelect
-            Width="250px"
-            Items="@LanguageHelper.SupportCultures"
-            @bind-SelectedOption="SelectedLanguage">
-            <OptionTemplate>
-                @context.DisplayName
-            </OptionTemplate>
-        </FluentSelect>
+        <SettingsCard>
+            <Icon>
+                <FluentIcon Value="new Icons.Regular.Size20.LocalLanguage()" />
+            </Icon>
+            <Header>Language</Header>
+            <Description>Select language and restart to change language.</Description>
+            <ActionContent>
+                <FluentSelect
+                    Width="auto"
+                    Items="@LanguageHelper.SupportCultures"
+                    @bind-SelectedOption="SelectedLanguage">
+                    <OptionTemplate>
+                        @context.DisplayName
+                    </OptionTemplate>
+                </FluentSelect>
+            </ActionContent>
+        </SettingsCard>
     </div>
 
-    <div>
-        <h4>Navigate</h4>
-        <FluentStack>
-            <FluentTextField @bind-Value="path" />
-            <FluentButton OnClick="@(() => Navigation.NavigateTo(path ?? string.Empty))">前往</FluentButton>
-        </FluentStack>
+    <div style="width: 100%;">
+        <h4>Others</h4>
+        <SettingsCard>
+            <Icon>
+                <FluentIcon Value="new Icons.Regular.Size20.Navigation()" />
+            </Icon>
+            <Header>Navigate</Header>
+            <Description>Navigate to target url.</Description>
+            <ActionContent>
+                <FluentStack Width="var(--settings-card-content-min-width)">
+                    <FluentTextField Placeholder="输入 URL" @bind-Value="path" />
+                    <FluentButton OnClick="@(() => Navigation.NavigateTo(path ?? string.Empty))">前往</FluentButton>
+                </FluentStack>
+            </ActionContent>
+        </SettingsCard>
     </div>
 
-    <div>
+    <div style="width: 100%;">
         <h4>Others</h4>
-        <FluentButton OnClick="ResetAsync">
-            Reset
-        </FluentButton>
+        <SettingsCard>
+            <Icon>
+                <FluentIcon Value="new Icons.Regular.Size20.ArrowReset()" />
+            </Icon>
+            <Header>Reset application</Header>
+            <Description>Reset settings of this application.</Description>
+            <ActionContent>
+                <FluentButton OnClick="ResetAsync">
+                    Reset
+                </FluentButton>
+            </ActionContent>
+        </SettingsCard>
     </div>
 </FluentStack>
 

diff --git a/Wherlog/Wherlog.csproj b/Wherlog/Wherlog.csproj
@@ -6,14 +6,14 @@
     <Description>魔法薇ㄦ的书馆网页客户端</Description>
     <RepositoryType>git</RepositoryType>
     <RepositoryUrl>https://github.com/wherewhere/wherlog</RepositoryUrl>
-    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
     <VersionPrefix>0.0.1</VersionPrefix>
   </PropertyGroup>
 
   <PropertyGroup>
     <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
     <Language>zh-CN</Language>
     <LangVersion>latest</LangVersion>
+    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
     <TargetFramework>net8.0</TargetFramework>
   </PropertyGroup>