Merge pull request #769 from LittleFish-233/master

升级组件库
CnGal · May 4, 2024 · 9e86043 · 9e86043
2 parents 607ef46 + cbd9723
commit 9e86043
Show file tree

Hide file tree

Showing 30 changed files with 376 additions and 55 deletions.
diff --git a/CnGalWebSite/CnGalWebSite.BlazorWeb/Components/App.razor b/CnGalWebSite/CnGalWebSite.BlazorWeb/Components/App.razor
@@ -22,9 +22,9 @@
     <!--开放搜索-->
     <link rel="search" type="application/opensearchdescription+xml" target="_blank" class="external-link" href="https://app.cngal.org/_content/CnGalWebSite.Shared/OpenSearch.xml" title="CnGal资料站" />
 
-    <!--组件库-->
-    <link rel="stylesheet" href="https://res.cngal.org/_content/Masa.Blazor/css/masa-blazor.min.css" />
+    <!--组件库-->  
     @* <link rel="stylesheet" href="_content/Masa.Blazor/css/masa-blazor.min.css" /> *@
+    <link rel="stylesheet" href="https://res.cngal.org/_content/Masa.Blazor/css/masa-blazor.min.css" />
 
     <!--Markdown编辑器-->
     <link rel="stylesheet" href="https://cdn.masastack.com/npm/vditor/3.8.12/dist/index.css" />
@@ -46,7 +46,6 @@
     <link rel="stylesheet" href="https://app.cngal.org/_content/CnGalWebSite.Shared/css/break-point.css">
     <HeadOutlet @rendermode="@RenderMode.InteractiveServer" />
     <CnGalWebSite.Shared.MasaComponent.Shared.Tips.StructuredDataTip @rendermode="@RenderMode.InteractiveServer" />
-
 </head>
 
 <body>
@@ -109,7 +108,7 @@
 
     <!--组件库-->
     @* <script src="_content/BlazorComponent/js/blazor-component.js"></script> *@
-    <script src="https://res.cngal.org/_content/BlazorComponent/js/blazor-component.js"></script>
+    <script src="https://app.cngal.org/_content/BlazorComponent/js/blazor-component.js"></script>
 
     @* <script src="_framework/blazor.web.js"></script> *@
     <script src="https://res.cngal.org/_framework/blazor.web.8.0.js" autostart="false"></script>

diff --git a/CnGalWebSite/CnGalWebSite.Components/CnGalWebSite.Components.csproj b/CnGalWebSite/CnGalWebSite.Components/CnGalWebSite.Components.csproj
@@ -22,7 +22,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Masa.Blazor" Version="1.0.0-preview.2" />
+    <PackageReference Include="Masa.Blazor" Version="1.4.2" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.4" />
     <PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" />
     <PackageReference Include="Blazored.LocalStorage" Version="4.5.0" />

diff --git a/CnGalWebSite/CnGalWebSite.Components/Errors/ErrorHandler.razor b/CnGalWebSite/CnGalWebSite.Components/Errors/ErrorHandler.razor
@@ -5,13 +5,21 @@
 @inject ILogger<ErrorHandler> Logger
 @inject IJSRuntime JS
 @inject IPopupService PopupService
+@inject NavigationManager NavigationManager
+@implements IDisposable
 
 
-
-<MErrorHandler OnErrorHandleAsync="OnErrorHandleAsync">
-    <CascadingValue Value=this IsFixed="true">
-        @ChildContent
-    </CascadingValue>
+<MErrorHandler OnHandle="OnErrorHandleAsync" PopupType="ErrorPopupType.None">
+    @if (isError)
+    {
+        <MAlert Elevation="2" Class="ma-2" Type="AlertTypes.Error">发生未知错误，尝试刷新页面</MAlert>
+    }
+    else
+    {
+        <CascadingValue Value=this IsFixed="true">
+            @ChildContent
+        </CascadingValue>
+    }
 </MErrorHandler>
 
 @code {
@@ -23,9 +31,27 @@
     [EditorRequired]
     public bool ShowDetailedErrorInfor { get; set; }
 
+    bool isError;
+
     private DateTime LastErrorTime { get; set; } = DateTime.UtcNow.AddYears(-1);
 
-    public async Task<bool> OnErrorHandleAsync(Exception ex)
+    protected override void OnInitialized()
+    {
+        NavigationManager.LocationChanged -= OnLocationChanged;
+        NavigationManager.LocationChanged += OnLocationChanged;
+    }
+
+    public void OnLocationChanged(object sender, LocationChangedEventArgs args)
+    {
+        if (isError)
+        {
+            isError = false;
+            StateHasChanged();
+        }
+    }
+
+
+    public async Task OnErrorHandleAsync(Exception ex)
     {
         if (ex is OutOfMemoryException)
         {
@@ -43,7 +69,8 @@
         else
         {
             await ProcessError(ex, "发生未经捕获的异常", "代码里有Bug");
-            return true;
+            isError = true;
+            StateHasChanged();
         }
     }
 
@@ -65,13 +92,13 @@
                     var qqUrl = "https://jq.qq.com/?_wv=1027&k=q0DBI011";
                     resolvent = $"检查网络是否正常，按下Ctrl + F5 刷新网页缓存，加群 {qq} 反馈Bug";
                 }
-                await PopupService.ToastAsync(new ToastConfig
-                {
-                    Type = AlertTypes.Error,
-                    Title = message,
-                    Duration=20000,
-                    Content = $"报错：{ex?.Message?.Split('\n')?.FirstOrDefault()}\n {ex?.StackTrace} \n 可能原因：{reason}\n解决方法：{resolvent}",
-                });
+                await PopupService.EnqueueSnackbarAsync(new SnackbarOptions
+                    {
+                        Type = AlertTypes.Error,
+                        Title = message,
+                        Timeout = 20000,
+                        Content = $"报错：{ex?.Message?.Split('\n')?.FirstOrDefault()}\n {ex?.StackTrace} \n 可能原因：{reason}\n解决方法：{resolvent}",
+                    });
 
 
                 LastErrorTime = DateTime.UtcNow;
@@ -82,4 +109,12 @@
 
         }
     }
+
+    public void Dispose()
+    {
+        NavigationManager.LocationChanged -= OnLocationChanged;
+
+        GC.SuppressFinalize(this);
+    }
+
 }
diff --git a/CnGalWebSite/CnGalWebSite.Components/Extensions/PopupServiceExtensions.cs b/CnGalWebSite/CnGalWebSite.Components/Extensions/PopupServiceExtensions.cs
@@ -12,32 +12,36 @@ namespace CnGalWebSite.Components.Extensions
 {
     public static class PopupServiceExtensions
     {
-        public static async Task ToastErrorAsync(this IPopupService popupService, string title, string message)
+        public static async Task ToastErrorAsync(this IPopupService popupService, string title, string message=null)
         {
             await popupService.ToastAsync(title, message, AlertTypes.Error);
         }
-        public static async Task ToastWarningAsync(this IPopupService popupService, string title, string message)
+        public static async Task ToastWarningAsync(this IPopupService popupService, string title, string message = null)
         {
             await popupService.ToastAsync(title, message, AlertTypes.Warning);
         }
-        public static async Task ToastInfoAsync(this IPopupService popupService, string title, string message)
+        public static async Task ToastInfoAsync(this IPopupService popupService, string title, string message = null)
         {
             await popupService.ToastAsync(title, message, AlertTypes.Info);
         }
-        public static async Task ToastSuccessAsync(this IPopupService popupService, string title, string message)
+        public static async Task ToastSuccessAsync(this IPopupService popupService, string title, string message = null)
         {
             await popupService.ToastAsync(title, message, AlertTypes.Success);
         }
 
         public static async Task ToastAsync(this IPopupService popupService, string title, string message, AlertTypes type)
         {
-            await popupService.ToastAsync(new ToastConfig
+            await popupService.EnqueueSnackbarAsync(new SnackbarOptions
             {
                 Type = type,
                 Title = title,
                 Content = message,
             });
         }
 
+        public static async Task ToastAsync(this IPopupService popupService, string title, AlertTypes type)
+        {
+            await popupService.ToastAsync(title, null, type);
+        }
     }
 }
diff --git a/CnGalWebSite/CnGalWebSite.Components/_Imports.razor b/CnGalWebSite/CnGalWebSite.Components/_Imports.razor
@@ -28,3 +28,4 @@
 @using CnGalWebSite.Components.Models;
 @using CnGalWebSite.Components.Services
 @using CnGalWebSite.Components.Extensions;
+@using IconType = CnGalWebSite.Components.Models.IconType;
diff --git a/CnGalWebSite/CnGalWebSite.Components/wwwroot/css/bundle.css b/CnGalWebSite/CnGalWebSite.Components/wwwroot/css/bundle.css
@@ -491,6 +491,7 @@
 #blazor-error-ui {
     background-color: transparent;
     box-shadow: none;
+    display: none;
 }
 
     #blazor-error-ui .background-card {
@@ -500,6 +501,7 @@
         background-color: rgba(0,0,0,.5);
         top: 0;
         left: 0;
+        z-index: 5;
     }
 
     #blazor-error-ui .main-card {
@@ -828,6 +830,93 @@ input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
     cursor: pointer !important;
 }
 
+/*撑开布局框架*/
+.m-application__wrap {
+    flex: 1 1 auto;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    flex-direction: column;
+    min-height: 100vh;
+    max-width: 100%;
+}
+
+
+/*主题*/
+
+.m-application a {
+    color: var(--md-sys-color-primary);
+}
+
+.m-application .primary {
+    background-color: var(--md-sys-color-primary) !important;
+    border-color: var(--md-sys-color-primary) !important;
+}
+
+.m-application .primary--text {
+    color: var(--md-sys-color-primary) !important;
+    caret-color: var(--md-sys-color-primary) !important;
+}
+
+.m-application .secondary {
+    background-color: var(--md-sys-color-secondary) !important;
+    border-color: var(--md-sys-color-secondary) !important;
+}
+
+.m-application .secondary--text {
+    color: var(--md-sys-color-secondary) !important;
+    caret-color: var(--md-sys-color-secondary) !important;
+}
+
+.m-application .accent {
+    background-color: #82B1FF !important;
+    border-color: #82B1FF !important;
+}
+
+.m-application .accent--text {
+    color: #82B1FF !important;
+    caret-color: #82B1FF !important;
+}
+
+.m-application .error {
+    background-color: var(--md-sys-color-error) !important;
+    border-color: var(--md-sys-color-error) !important;
+}
+
+.m-application .error--text {
+    color: var(--md-sys-color-error) !important;
+    caret-color: var(--md-sys-color-error) !important;
+}
+
+.m-application .info {
+    background-color: #2196F3 !important;
+    border-color: #2196F3 !important;
+}
+
+.m-application .info--text {
+    color: #2196F3 !important;
+    caret-color: #2196F3 !important;
+}
+
+.m-application .success {
+    background-color: #4CAF50 !important;
+    border-color: #4CAF50 !important;
+}
+
+.m-application .success--text {
+    color: #4CAF50 !important;
+    caret-color: #4CAF50 !important;
+}
+
+.m-application .warning {
+    background-color: #FB8C00 !important;
+    border-color: #FB8C00 !important;
+}
+
+.m-application .warning--text {
+    color: #FB8C00 !important;
+    caret-color: #FB8C00 !important;
+}
+
 
 /*去掉下划线*/
 a {

diff --git a/CnGalWebSite/CnGalWebSite.Components/wwwroot/css/bundle.min.css b/CnGalWebSite/CnGalWebSite.Components/wwwroot/css/bundle.min.css
diff --git a/CnGalWebSite/CnGalWebSite.Components/wwwroot/css/common.css b/CnGalWebSite/CnGalWebSite.Components/wwwroot/css/common.css
@@ -175,3 +175,90 @@ input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
 .pointer {
     cursor: pointer !important;
 }
+
+/*撑开布局框架*/
+.m-application__wrap {
+    flex: 1 1 auto;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    flex-direction: column;
+    min-height: 100vh;
+    max-width: 100%;
+}
+
+
+/*主题*/
+
+.m-application a {
+    color: var(--md-sys-color-primary);
+}
+
+.m-application .primary {
+    background-color: var(--md-sys-color-primary) !important;
+    border-color: var(--md-sys-color-primary) !important;
+}
+
+.m-application .primary--text {
+    color: var(--md-sys-color-primary) !important;
+    caret-color: var(--md-sys-color-primary) !important;
+}
+
+.m-application .secondary {
+    background-color: var(--md-sys-color-secondary) !important;
+    border-color: var(--md-sys-color-secondary) !important;
+}
+
+.m-application .secondary--text {
+    color: var(--md-sys-color-secondary) !important;
+    caret-color: var(--md-sys-color-secondary) !important;
+}
+
+.m-application .accent {
+    background-color: #82B1FF !important;
+    border-color: #82B1FF !important;
+}
+
+.m-application .accent--text {
+    color: #82B1FF !important;
+    caret-color: #82B1FF !important;
+}
+
+.m-application .error {
+    background-color: var(--md-sys-color-error) !important;
+    border-color: var(--md-sys-color-error) !important;
+}
+
+.m-application .error--text {
+    color: var(--md-sys-color-error) !important;
+    caret-color: var(--md-sys-color-error) !important;
+}
+
+.m-application .info {
+    background-color: #2196F3 !important;
+    border-color: #2196F3 !important;
+}
+
+.m-application .info--text {
+    color: #2196F3 !important;
+    caret-color: #2196F3 !important;
+}
+
+.m-application .success {
+    background-color: #4CAF50 !important;
+    border-color: #4CAF50 !important;
+}
+
+.m-application .success--text {
+    color: #4CAF50 !important;
+    caret-color: #4CAF50 !important;
+}
+
+.m-application .warning {
+    background-color: #FB8C00 !important;
+    border-color: #FB8C00 !important;
+}
+
+.m-application .warning--text {
+    color: #FB8C00 !important;
+    caret-color: #FB8C00 !important;
+}