为界面添加全屏按钮

javascape/full_button.js

@@ -0,0 +1,48 @@
+// 获取两个全屏按钮
+const fullscreenButton = document.getElementById('fullscreen-button');
+const sidebarFullscreenButton = document.getElementById('sidebar-fullscreen-button');
+
+// 绑定全屏切换事件
+function toggleFullscreen() {
+    if (!document.fullscreenElement) {
+        if (document.documentElement.requestFullscreen) {
+            document.documentElement.requestFullscreen();
+        } else if (document.documentElement.mozRequestFullScreen) {
+            document.documentElement.mozRequestFullScreen();
+        } else if (document.documentElement.webkitRequestFullscreen) {
+            document.documentElement.webkitRequestFullscreen();
+        } else if (document.documentElement.msRequestFullscreen) {
+            document.documentElement.msRequestFullscreen();
+        }
+        updateFullscreenButton(true);
+    } else {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
+        updateFullscreenButton(false);
+    }
+}
+
+// 更新按钮文本和图标
+function updateFullscreenButton(isFullscreen) {
+    const buttons = [fullscreenButton, sidebarFullscreenButton];
+    buttons.forEach(button => {
+        if (isFullscreen) {
+            button.querySelector('span').textContent = '退出';
+            button.querySelector('.icon').innerHTML = '<img src="./icon/off.png" width="30px">'; // 退出全屏图标
+        } else {
+            button.querySelector('span').textContent = '全屏';
+            button.querySelector('.icon').innerHTML = '<img src="./icon/full.png" width="30px">'; // 全屏图标
+        }
+    });
+}
+
+// 绑定点击事件
+fullscreenButton.addEventListener('click', toggleFullscreen);
+sidebarFullscreenButton.addEventListener('click', toggleFullscreen);