refact: Fully refactor the conceptional structure and functional behaviour.

YaeBlog/Pages/Archives.razor

@@ -0,0 +1,78 @@
+@page "/archives"
+@using YaeBlog.Core.Models
+@using YaeBlog.Core.Services
+
+@inject BlogOptions BlogOptionsInstance
+@inject EssayContentService EssayContentInstance
+
+<PageTitle>
+    存档
+</PageTitle>
+
+<div style="height: 100%">
+    <div class="archive-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
+        <div class="archive-title">
+            <FluentStack Orientation="@Orientation.Vertical"
+                         HorizontalAlignment="@HorizontalAlignment.Center">
+                <FluentLabel Typo="@Typography.H1" Color="@Color.Fill">
+                    存 档
+                </FluentLabel>
+            </FluentStack>
+        </div>
+    </div>
+
+    <div style="height: 2rem"></div>
+
+    <div style="margin: 0 8% 0 8%">
+        <FluentCard>
+            <div style="margin: 0 8% 0 8%">
+                <FluentLabel Typo="@Typography.H2" Style="margin: 3rem 0 2rem 0; color: #404853">
+                    共计@(EssayContentInstance.Count)篇文章
+                </FluentLabel>
+
+                @foreach (IGrouping<DateTime, KeyValuePair<string, BlogEssay>> group in _essays)
+                {
+                    <FluentLabel Typo="@Typography.H3" Style="color: #718096; margin: 2rem 0 1rem 0">
+                        @(group.Key.ToString("yyyy年"))
+                    </FluentLabel>
+
+                    <div style="margin: 0 4% 0 4%">
+                        @foreach (KeyValuePair<string, BlogEssay> pair in group)
+                        {
+                            <div class="archive-item">
+                                <a href="essays/@(pair.Key)" target="_blank">
+                                    <FluentStack Orientation="@Orientation.Horizontal">
+                                        <FluentLabel Typo="@Typography.H5" Style="width: 80px">
+                                            @(pair.Value.PublishTime.ToString("MM-dd"))
+                                        </FluentLabel>
+
+                                        <FluentLabel Typo="@Typography.H5">
+                                            @(pair.Value.Title)
+                                        </FluentLabel>
+                                    </FluentStack>
+                                </a>
+                            </div>
+                        }
+                    </div>
+                }
+            </div>
+        </FluentCard>
+    </div>
+
+    <BlogFooter/>
+</div>
+
+@code {
+    private readonly List<IGrouping<DateTime, KeyValuePair<string, BlogEssay>>> _essays = [];
+
+    protected override void OnInitialized()
+    {
+        IEnumerable<IGrouping<DateTime, KeyValuePair<string, BlogEssay>>> essays =
+            from essay in EssayContentInstance.Essays
+            orderby essay.Value.PublishTime descending
+            group essay by new DateTime(essay.Value.PublishTime.Year, 1, 1);
+
+        _essays.AddRange(essays);
+    }
+
+}