From 4ed2d0565e93340ca4e0fb3255fe27053ad434d7 Mon Sep 17 00:00:00 2001 From: capdiem Date: Fri, 22 Dec 2023 15:07:00 +0800 Subject: [PATCH] refactor: static SSR (#60) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 🚧 feat: wip * refactor * 🚧 feat: wip * use masa.blazor@1.3.0-beta.5 --- .../Components/App.razor | 2 +- .../Components/Layout/AppBar.razor | 4 +- .../Components/Layout/DesktopAppBar.razor | 39 ++++++- .../Components/Layout/FollowUsBtn.razor | 16 +++ .../Components/Layout/MainLayout.razor | 33 +++++- .../Components/Layout/MobileAppBar.razor | 58 ++-------- .../Layout/MobileNavigationDrawer.razor | 86 +++++++++++++++ .../Components/Layout/QQChatBtn.razor | 59 ---------- .../Components/Layout/WeChatBtn.razor | 60 ---------- .../Components/Pages/AboutUs.razor | 25 ++--- .../Components/Pages/AboutUs.razor.cs | 5 - .../Components/Pages/Activities.razor | 1 - .../Components/Pages/ActivitiesBanner.razor | 29 ++--- .../Components/Pages/ActivityDetail.razor | 10 +- .../Components/Pages/ActivityDetail.razor.cs | 5 - .../Pages/AutoScrollComponentBase.cs | 8 -- .../Components/Pages/Blazor.razor | 45 ++------ .../Components/Pages/Blazor.razor.cs | 6 - .../Components/Pages/Framework.razor | 33 +++--- .../Components/Pages/Framework.razor.cs | 5 +- .../Components/Pages/Home.razor | 15 ++- .../Components/Pages/Home.razor.cs | 37 +++---- .../Components/Pages/HomeBanner.razor | 5 +- .../Components/Pages/LearningPath.razor | 9 +- .../Components/Pages/LearningPath.razor.cs | 6 - .../Components/Pages/Stack.razor | 22 ++-- .../Components/Pages/Stack.razor.cs | 3 +- .../Components/Pages/StackLiveDemoBtn.razor | 69 ++++-------- .../Components/Pages/StackLiveDemoMenu.razor | 25 +++++ .../Components/Shared/AboutUsCard.razor | 5 +- .../Components/Shared/ImageCard.razor | 48 -------- .../Components/Shared/MenuTitle.razor | 18 +++ .../Shared/MenuTitleInteractiveTrigger.razor | 32 ++++++ .../Components/Shared/MenuableTitle.razor | 64 +++++------ .../Components/Shared/More.razor | 31 ------ .../Components/Shared/MoreButton.razor | 19 ++++ .../Components/Shared/NavMenu.razor | 104 ++++++------------ .../{InteractiveMore.razor => NextView.razor} | 10 +- .../Shared/NextViewInteractiveTrigger.razor | 20 ++++ .../Components/Shared/ProductCard.razor | 5 +- .../Components/Shared/ScrollToNext.razor | 19 ++++ .../Components/Shared/SerializableImage.razor | 39 ------- .../Shared/SerializableNavMenu.razor | 14 --- .../Components/_Imports.razor | 1 - .../MASA.OfficialWebsite.WebApp.csproj | 2 +- src/MASA.OfficialWebsite.WebApp/Program.cs | 4 +- .../wwwroot/app.css | 32 ++++++ .../wwwroot/css/shared.css | 86 ++++++++++----- .../wwwroot/css/small-shared.css | 31 +++++- 49 files changed, 628 insertions(+), 676 deletions(-) create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Layout/FollowUsBtn.razor create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Layout/MobileNavigationDrawer.razor delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Layout/QQChatBtn.razor delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Layout/WeChatBtn.razor delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor.cs delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Pages/AutoScrollComponentBase.cs delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Pages/Blazor.razor.cs delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Pages/LearningPath.razor.cs create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Pages/StackLiveDemoMenu.razor delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/ImageCard.razor create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuTitle.razor create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuTitleInteractiveTrigger.razor delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/More.razor create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/MoreButton.razor rename src/MASA.OfficialWebsite.WebApp/Components/Shared/{InteractiveMore.razor => NextView.razor} (68%) create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/NextViewInteractiveTrigger.razor create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/ScrollToNext.razor delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/SerializableImage.razor delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/SerializableNavMenu.razor diff --git a/src/MASA.OfficialWebsite.WebApp/Components/App.razor b/src/MASA.OfficialWebsite.WebApp/Components/App.razor index 7fe78c4..ebf01f4 100644 --- a/src/MASA.OfficialWebsite.WebApp/Components/App.razor +++ b/src/MASA.OfficialWebsite.WebApp/Components/App.razor @@ -8,6 +8,7 @@ + @@ -24,7 +25,6 @@ - diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/AppBar.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/AppBar.razor index 877dc1a..7be980e 100644 --- a/src/MASA.OfficialWebsite.WebApp/Components/Layout/AppBar.razor +++ b/src/MASA.OfficialWebsite.WebApp/Components/Layout/AppBar.razor @@ -1,10 +1,8 @@ -@inject MasaBlazor MasaBlazor -@using Microsoft.AspNetCore.Components.Sections +@using Microsoft.AspNetCore.Components.Sections diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/DesktopAppBar.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/DesktopAppBar.razor index b9c4c7a..cfa9ecb 100644 --- a/src/MASA.OfficialWebsite.WebApp/Components/Layout/DesktopAppBar.razor +++ b/src/MASA.OfficialWebsite.WebApp/Components/Layout/DesktopAppBar.razor @@ -1,8 +1,27 @@  - - - + + + + @(context switch + { + "product" => "产品", + "study" => "学习", + _ => context + }) + + + + 关于我们 @@ -13,4 +32,18 @@ [Parameter] public List StudyNavItems { get; set; } = new(); + [SupplyParameterFromQuery(Name = "nav-menu")] + private string? QueryValue { get; set; } + + private static string[] navMenuInteractiveValues = { "product", "study" }; + + private bool IsProductNavMenu => QueryValue?.Equals("product", StringComparison.OrdinalIgnoreCase) is true; + + private Dictionary ProductNavMenuParameters => new() + { + { nameof(NavMenu.Items), IsProductNavMenu ? ProductNavItems : StudyNavItems }, + }; + + private int NavMenuLeft => IsProductNavMenu ? -388 : -286; + } diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/FollowUsBtn.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/FollowUsBtn.razor new file mode 100644 index 0000000..39952b9 --- /dev/null +++ b/src/MASA.OfficialWebsite.WebApp/Components/Layout/FollowUsBtn.razor @@ -0,0 +1,16 @@ +@rendermode @(new InteractiveServerRenderMode(prerender: false)) +@inherits MInteractivePopup + +
+ +
+ +@code { + + [Parameter] [EditorRequired] public string Image { get; set; } = null!; + + [Parameter] public string? Style { get; set; } + + [Parameter] public string? Class { get; set; } + +} diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/MainLayout.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/MainLayout.razor index 6c752dd..8c17629 100644 --- a/src/MASA.OfficialWebsite.WebApp/Components/Layout/MainLayout.razor +++ b/src/MASA.OfficialWebsite.WebApp/Components/Layout/MainLayout.razor @@ -11,9 +11,9 @@
- - - + + + @@ -128,8 +128,20 @@ 关注我们 - - + + + +
An unhandled error has occurred. Reload @@ -165,6 +179,15 @@ @code { + [SupplyParameterFromQuery] + private string? FollowUs { get; set; } + + private Dictionary FollowUsParameters => new() + { + { nameof(FollowUsBtn.Image), FollowUs == "wechat" ? "https://cdn.masastack.com/images/contact.png" : "https://cdn.masastack.com/images/contact-qq.png" }, + { nameof(FollowUsBtn.Class), FollowUs } + }; + private static readonly List productNavItems = [ new NavItem("产品中心"), diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/MobileAppBar.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/MobileAppBar.razor index fa8230e..bedda96 100644 --- a/src/MASA.OfficialWebsite.WebApp/Components/Layout/MobileAppBar.razor +++ b/src/MASA.OfficialWebsite.WebApp/Components/Layout/MobileAppBar.razor @@ -1,57 +1,21 @@ - - +@inject NavigationManager Navigation + + + mdi-menu - - - @foreach (var item in NavItems) - { - @if (item.IsSubheader) - { - - @item.Subheader - - } - else - { - - @if (item.Image is not null) - { - - - - } - - - @if (item.Disabled) - { -
@item.Title
- } - else - { -
@item.Title
- } - - @item.Subtitle - - - } - } - - +@if (Aside) +{ + +} @code { - private bool? _drawer; - [Parameter] public List NavItems { get; set; } = new(); + [SupplyParameterFromQuery] + private bool Aside { get; set; } + } diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/MobileNavigationDrawer.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/MobileNavigationDrawer.razor new file mode 100644 index 0000000..90ffec9 --- /dev/null +++ b/src/MASA.OfficialWebsite.WebApp/Components/Layout/MobileNavigationDrawer.razor @@ -0,0 +1,86 @@ +@rendermode InteractiveServer +@inject NavigationManager Navigation + + + + @foreach (var item in NavItems) + { + @if (item.IsSubheader) + { + + @item.Subheader + + } + else + { + + @if (item.Image is not null) + { + + + + } + + + @if (item.Disabled) + { +
@item.Title
+ } + else + { +
@item.Title
+ } + + @item.Subtitle + + + } + } + + + +@code { + + [Parameter] public List NavItems { get; set; } = new(); + + private bool? _drawer = false; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await Task.Delay(100); + _drawer = true; + StateHasChanged(); + } + } + + private async Task ValueChanged(bool? val) + { + var prevDrawer = _drawer; + + _drawer = val; + + StateHasChanged(); + + await Task.Delay(300); + + if (prevDrawer is true && _drawer is false) + { + Navigation.NavigateTo(Navigation.GetUriWithQueryParameter("Aside", (bool?)null)); + } + } + +} diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/QQChatBtn.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/QQChatBtn.razor deleted file mode 100644 index 8a9e166..0000000 --- a/src/MASA.OfficialWebsite.WebApp/Components/Layout/QQChatBtn.razor +++ /dev/null @@ -1,59 +0,0 @@ -@inject MasaBlazor MasaBlazor -@rendermode InteractiveServer -@implements IDisposable - - - - - - mdi-qqchat - - - - - qq - - - -@code { - - private bool IsMobile => MasaBlazor.Breakpoint.Mobile; - - private int Size => IsMobile ? 120 : 200; - - private int IconSize => IsMobile ? 40 : 60; - - private int NudgeLeft => Size / 2 - IconSize / 2; - - protected override void OnInitialized() - { - base.OnInitialized(); - - MasaBlazor.MobileChanged += MasaBlazorOnMobileChanged; - } - - private void MasaBlazorOnMobileChanged(object? sender, MobileChangedEventArgs e) - { - InvokeAsync(StateHasChanged); - } - - public void Dispose() - { - MasaBlazor.MobileChanged -= MasaBlazorOnMobileChanged; - } - -} diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/WeChatBtn.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/WeChatBtn.razor deleted file mode 100644 index 1d9edc0..0000000 --- a/src/MASA.OfficialWebsite.WebApp/Components/Layout/WeChatBtn.razor +++ /dev/null @@ -1,60 +0,0 @@ -@inject MasaBlazor MasaBlazor -@rendermode InteractiveServer -@implements IDisposable - - - - - - mdi-wechat - - - - - wechat - - - -@code { - - private bool IsMobile => MasaBlazor.Breakpoint.Mobile; - - private int Size => IsMobile ? 120 : 200; - - private int IconSize => IsMobile ? 40 : 60; - - private int NudgeLeft => Size / 2 - IconSize / 2; - - protected override void OnInitialized() - { - base.OnInitialized(); - - MasaBlazor.MobileChanged += MasaBlazorOnMobileChanged; - } - - private void MasaBlazorOnMobileChanged(object? sender, MobileChangedEventArgs e) - { - InvokeAsync(StateHasChanged); - } - - public void Dispose() - { - MasaBlazor.MobileChanged -= MasaBlazorOnMobileChanged; - } -} diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor index 5ad4d7c..2c8606a 100644 --- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor +++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor @@ -1,5 +1,4 @@ @page "/aboutus" -@inherits AutoScrollComponentBase 温州数闪科技有限公司 @@ -7,18 +6,16 @@
logo + alt="logo" />
- +
-
- +
+
@@ -49,16 +46,12 @@
-
-
- +
+
+
- - - - - +
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor.cs b/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor.cs deleted file mode 100644 index eec3b8a..0000000 --- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor.cs +++ /dev/null @@ -1,5 +0,0 @@ -namespace MASA.OfficialWebsite.WebApp.Components.Pages; - -public partial class AboutUs: AutoScrollComponentBase -{ -} \ No newline at end of file diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Activities.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Activities.razor index 0a15e40..02d5b61 100644 --- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Activities.razor +++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Activities.razor @@ -1,5 +1,4 @@ @page "/activity" -@inherits AutoScrollComponentBase 温州数闪科技有限公司 diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivitiesBanner.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivitiesBanner.razor index 51663cd..9b2edb5 100644 --- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivitiesBanner.razor +++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivitiesBanner.razor @@ -1,5 +1,4 @@ -@inherits AutoScrollComponentBase -@rendermode InteractiveServer +@rendermode InteractiveServer
@@ -16,7 +15,7 @@
- +
@@ -41,7 +40,7 @@
@item.Title
@item.Subtitle
- +
@@ -56,27 +55,21 @@ { var j = i; var item = Latest5Activities[j]; + var active = _carouselValue == j;
- mdi-circle + Color="@((context.Hover || active) ? "primary" : "#A3AED0")"> + mdi-circle - @if (context.Hover) - { -
-
- @item.Date.ToString("MM - dd") -
-
- @item.Title -
-
- } +
+

@item.Date.ToString("MM - dd")

+ @item.Title +
} diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivityDetail.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivityDetail.razor index 5ff5688..806eb99 100644 --- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivityDetail.razor +++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivityDetail.razor @@ -5,7 +5,7 @@ {
- +