From 81f8ae90fc2006a941e9ac9eb792399f15e476dc Mon Sep 17 00:00:00 2001
From: jackfiled <xcrenchangjun@outlook.com>
Date: Wed, 31 Jan 2024 21:36:00 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E4=BD=9C=E8=80=85=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 YaeBlog.Core/Services/EssayContentService.cs  |  2 +
 .../Components/AuthorInformation.razor        | 53 +++++++++++++++++++
 .../Components/AuthorInformation.razor.css    | 30 +++++++++++
 YaeBlog.Theme.FluentUI/Pages/Home.razor       |  4 ++
 4 files changed, 89 insertions(+)
 create mode 100644 YaeBlog.Theme.FluentUI/Components/AuthorInformation.razor
 create mode 100644 YaeBlog.Theme.FluentUI/Components/AuthorInformation.razor.css

diff --git a/YaeBlog.Core/Services/EssayContentService.cs b/YaeBlog.Core/Services/EssayContentService.cs
index b6e3584..bfcbfe8 100644
--- a/YaeBlog.Core/Services/EssayContentService.cs
+++ b/YaeBlog.Core/Services/EssayContentService.cs
@@ -44,6 +44,8 @@ public class EssayContentService
     public IEnumerable<KeyValuePair<string, int>> Tags => from item in _tags
         select KeyValuePair.Create(item.Key, item.Value.Count);
 
+    public int TagCount => _tags.Count;
+
     public IEnumerable<BlogEssay> GetTag(string tag)
     {
         if (_tags.TryGetValue(tag, out var list))
diff --git a/YaeBlog.Theme.FluentUI/Components/AuthorInformation.razor b/YaeBlog.Theme.FluentUI/Components/AuthorInformation.razor
new file mode 100644
index 0000000..c993bcc
--- /dev/null
+++ b/YaeBlog.Theme.FluentUI/Components/AuthorInformation.razor
@@ -0,0 +1,53 @@
+@using YaeBlog.Core.Models
+@using YaeBlog.Core.Services
+
+@inject BlogOptions BlogOptionsInstance
+@inject EssayContentService EssayContentInstance
+
+<div style="margin: 2rem 0; width: 100%">
+    <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.H3">
+                @(BlogOptionsInstance.Author)
+            </FluentLabel>
+
+            <div style="height: 0.5rem"></div>
+
+            <FluentStack Orientation="@Orientation.Horizontal"
+                         HorizontalAlignment="@HorizontalAlignment.Center"
+                         HorizontalGap="20">
+                <a href="/archives">
+                    <div>
+                        <FluentLabel Typo="@Typography.H4">
+                            文章
+                        </FluentLabel>
+
+                        <FluentLabel Typo="@Typography.H4">
+                            @(EssayContentInstance.Count)
+                        </FluentLabel>
+                    </div>
+                </a>
+                <a href="/tags">
+                    <div>
+                        <FluentLabel Typo="@Typography.H4">
+                            标签
+                        </FluentLabel>
+
+                        <FluentLabel Typo="@Typography.H4">
+                            @(EssayContentInstance.TagCount)
+                        </FluentLabel>
+                    </div>
+                </a>
+            </FluentStack>
+        </FluentStack>
+    </FluentCard>
+</div>
+
+@code {
+
+}
diff --git a/YaeBlog.Theme.FluentUI/Components/AuthorInformation.razor.css b/YaeBlog.Theme.FluentUI/Components/AuthorInformation.razor.css
new file mode 100644
index 0000000..dd21353
--- /dev/null
+++ b/YaeBlog.Theme.FluentUI/Components/AuthorInformation.razor.css
@@ -0,0 +1,30 @@
+.about-avatar {
+    position: relative;
+    width: 6rem;
+    height: 6rem;
+    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);
+    }
+}
diff --git a/YaeBlog.Theme.FluentUI/Pages/Home.razor b/YaeBlog.Theme.FluentUI/Pages/Home.razor
index c9352aa..36ec0c2 100644
--- a/YaeBlog.Theme.FluentUI/Pages/Home.razor
+++ b/YaeBlog.Theme.FluentUI/Pages/Home.razor
@@ -127,7 +127,11 @@
                 </div>
             </FluentGridItem>
             <FluentGridItem xs="12" sm="12" md="4" lg="4">
+                <FluentStack Orientation="@Orientation.Vertical">
+                    <AuthorInformation/>
 
+
+                </FluentStack>
             </FluentGridItem>
         </FluentGrid>
     </div>