fix(FullScreenService): sync fullscreen state with esc key event (#5961)

* style: 移除不使用的样式

* feat: 增加 fullscreenchange 状态监控

* refactor: 精简代码

* refactor: 重构样式

* doc: 更新文档

* chore: bump version 9.6.1-beta03

* chore: bump version 9.6.1-beta02

Co-Authored-By: WarriorBlue <15247822+warriorblue@users.noreply.github.com>

---------

Co-authored-by: WarriorBlue <15247822+warriorblue@users.noreply.github.com>

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.6.1-beta01</Version>
+    <Version>9.6.1-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/FullScreen/FullScreenButton.razor.cs

@@ -14,7 +14,7 @@ public partial class FullScreenButton
     /// 获得/设置 退出全屏图标 默认 fa-solid fa-maximize
     /// </summary>
     [Parameter]
-    [Obsolete("已启用，请使用 Icon 参数 Please use Icon parameter")]
+    [Obsolete("已弃用，请使用 Icon 参数；Deprecated. Please use Icon parameter")]
     [ExcludeFromCodeCoverage]
     public string? FullScreenIcon { get => FullScreenExitIcon; set => FullScreenExitIcon = value; }
 

src/BootstrapBlazor/Components/FullScreen/FullScreenButton.razor.scss

@@ -1,8 +1,17 @@
-.bb-fs-on,
-.bb-fs-open .bb-fs-off {
+.bb-fs-on {
     display: none;
 }
 
-.bb-fs-open .bb-fs-on {
+.bb-fs-off {
     display: inline-block;
 }
+
+:not(:root):fullscreen {
+    .bb-fs-on {
+        display: inline-block;
+    }
+
+    .bb-fs-off {
+        display: none;
+    }
+}

src/BootstrapBlazor/Components/Tab/Tab.razor.scss

@@ -36,11 +36,6 @@
 
     .tabs-body-content {
         background-color: var(--bs-body-bg);
-
-        &.bb-fs-open {
-            padding: var(--bb-tabs-body-padding);
-            overflow: auto;
-        }
     }
 }
 

src/BootstrapBlazor/wwwroot/modules/fullscreen.js

@@ -25,24 +25,10 @@ export async function toggle(options) {
 
 const enterFullscreen = async el => {
     await el.requestFullscreen();
-
-    updateFullscreenState(el);
 }
 
 const exitFullscreen = async el => {
     await document.exitFullscreen()
-
-    updateFullscreenState(el);
-}
-
-const updateFullscreenState = el => {
-    if (isFullscreen()) {
-        el.classList.add('bb-fs-open')
-    }
-    else {
-        el.classList.remove('bb-fs-open');
-        document.documentElement.classList.remove('bb-fs-open');
-    }
 }
 
 const isFullscreen = () => {