From b07bc95a16212885deed415c7f9ddf3f5c3f2421 Mon Sep 17 00:00:00 2001
From: jackfiled <xcrenchangjun@outlook.com>
Date: Sat, 27 Jan 2024 14:08:25 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E5=85=B3=E4=BA=8E=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 YaeBlog.Core/Models/AboutInfo.cs             | 10 +++++
 YaeBlog.Core/Models/BlogOptions.cs           |  2 +
 YaeBlog.Theme.FluentUI/App.razor             |  1 +
 YaeBlog.Theme.FluentUI/Pages/About.razor     | 42 ++++++++++++++++++
 YaeBlog.Theme.FluentUI/Pages/About.razor.css | 45 ++++++++++++++++++++
 5 files changed, 100 insertions(+)
 create mode 100644 YaeBlog.Core/Models/AboutInfo.cs
 create mode 100644 YaeBlog.Theme.FluentUI/Pages/About.razor
 create mode 100644 YaeBlog.Theme.FluentUI/Pages/About.razor.css

diff --git a/YaeBlog.Core/Models/AboutInfo.cs b/YaeBlog.Core/Models/AboutInfo.cs
new file mode 100644
index 0000000..32ff959
--- /dev/null
+++ b/YaeBlog.Core/Models/AboutInfo.cs
@@ -0,0 +1,10 @@
+namespace YaeBlog.Core.Models;
+
+public class AboutInfo
+{
+    public required string Introduction { get; set; }
+
+    public required string Description { get; set; }
+
+    public required string AvatarImage { get; set; }
+}
diff --git a/YaeBlog.Core/Models/BlogOptions.cs b/YaeBlog.Core/Models/BlogOptions.cs
index 19724c6..7fa918c 100644
--- a/YaeBlog.Core/Models/BlogOptions.cs
+++ b/YaeBlog.Core/Models/BlogOptions.cs
@@ -38,4 +38,6 @@ public class BlogOptions
     /// 博客底部是否显示ICP备案信息
     /// </summary>
     public string? RegisterInformation { get; set; }
+
+    public required AboutInfo About { get; set; }
 }
diff --git a/YaeBlog.Theme.FluentUI/App.razor b/YaeBlog.Theme.FluentUI/App.razor
index 23e8177..70c5702 100644
--- a/YaeBlog.Theme.FluentUI/App.razor
+++ b/YaeBlog.Theme.FluentUI/App.razor
@@ -11,6 +11,7 @@
     <link href="@($"{BlogOptionsInstance.ProjectName}.styles.css")" rel="stylesheet"/>
     <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
     <link href="_content/YaeBlog.Theme.FluentUI/globals.css" rel="stylesheet"/>
+    <link href="favicon.ico" rel="icon"/>
     <HeadOutlet/>
 </head>
 
diff --git a/YaeBlog.Theme.FluentUI/Pages/About.razor b/YaeBlog.Theme.FluentUI/Pages/About.razor
new file mode 100644
index 0000000..c99fc80
--- /dev/null
+++ b/YaeBlog.Theme.FluentUI/Pages/About.razor
@@ -0,0 +1,42 @@
+@page "/about"
+@using YaeBlog.Core.Models
+
+@inject BlogOptions BlogOptionsInstance
+
+<PageTitle>
+    关于 - @(BlogOptionsInstance.Author)
+</PageTitle>
+
+<div style="height: 100%">
+    <div class="about-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
+        <div class="about-content">
+            <FluentCard>
+                <FluentStack Orientation="@Orientation.Vertical"
+                             HorizontalAlignment="@HorizontalAlignment.Center">
+                    <div class="about-avatar">
+                        <img src="@(BlogOptionsInstance.About.AvatarImage)" alt="author-avatar"
+                             class="about-avatar-img">
+                    </div>
+                    <FluentLabel Typo="@Typography.H2">
+                        @(BlogOptionsInstance.Author)
+                    </FluentLabel>
+
+                    <FluentLabel Typo="@Typography.Body">
+                        @(BlogOptionsInstance.About.Introduction)
+                    </FluentLabel>
+                </FluentStack>
+
+                <div style="height: 2rem"></div>
+                <FluentLabel Typo="@Typography.Body">
+                    @(BlogOptionsInstance.About.Description)
+                </FluentLabel>
+            </FluentCard>
+        </div>
+    </div>
+
+    <BlogFooter/>
+</div>
+
+@code {
+
+}
diff --git a/YaeBlog.Theme.FluentUI/Pages/About.razor.css b/YaeBlog.Theme.FluentUI/Pages/About.razor.css
new file mode 100644
index 0000000..3690170
--- /dev/null
+++ b/YaeBlog.Theme.FluentUI/Pages/About.razor.css
@@ -0,0 +1,45 @@
+.about-background {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.about-content {
+    top: 33%;
+    position: absolute;
+    width: 80%;
+    margin: 0 10%;
+}
+
+.about-avatar {
+    position: relative;
+    width: 10rem;
+    height: 10rem;
+    z-index: 3;
+}
+
+.about-avatar-img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: transparent;
+    object-fit: cover;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
+    0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.about-avatar-img:hover {
+    animation: rotate-animation 1s ease-in-out;
+}
+
+@keyframes rotate-animation {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to  {
+        transform: rotate(360deg);
+    }
+}