hide dashboard in fullscreen

Author: HaloWang

.cursor/rules/agent.mdc

@@ -4,3 +4,5 @@ alwaysApply: true
 
 - 不要自动跑任何 pnpm 命令
 - 不要自动书写 README.md 文件
+- 尽量使用 for 循环, 尽量不实用 forEach
+- 在 Typescript 中, 不要使用 any, 尽量推导出来类型

pages/content-ui/src/Dashboard.tsx

@@ -1,6 +1,7 @@
 import { BBox, DemoMode, DiagnoseMode, IgnoredStatus, InteractionMode, RunningStatus } from './components';
 import { DashboardEntry } from './DashboardEntry';
 import { useContentUIState } from './hooks/useContentUIState';
+import { useFullscreenDetection } from './hooks/useFullscreenDetection';
 import { useCallback } from 'react';
 import type { FC } from 'react';
 
@@ -16,6 +17,9 @@ export const Dashboard: FC = () => {
     setHoveringOthers,
   } = useContentUIState();
 
+  // 全屏检测
+  const isFullscreen = useFullscreenDetection();
+
   // 简化的事件处理 - 确保状态互斥
   const handleEntryMouseEnter = useCallback(() => {
     setHovered(true);
@@ -52,6 +56,10 @@ export const Dashboard: FC = () => {
     paddingRight: 0,
     userSelect: 'none',
     // backgroundColor: 'rgba(0, 0, 0, 0.1)',
+    // 全屏时隐藏 Dashboard
+    opacity: isFullscreen ? 0 : 1,
+    visibility: isFullscreen ? 'hidden' : 'visible',
+    transition: 'opacity 0.2s ease-out, visibility 0.2s ease-out',
   };
 
   const widgetAnimationStyle = {
@@ -60,6 +68,11 @@ export const Dashboard: FC = () => {
     transition: 'transform 0.1s ease-out, opacity 0.1s ease-out',
   };
 
+  // 如果处于全屏模式，不渲染 Dashboard
+  if (isFullscreen) {
+    return null;
+  }
+
   return (
     <div style={dashboardStyle}>
       <div onMouseEnter={handleEntryMouseEnter} onMouseLeave={handleEntryMouseLeave}>

pages/content-ui/src/hooks/useFullscreenDetection.ts

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+
+export const useFullscreenDetection = () => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    const checkFullscreen = () => {
+      // 检查多种全屏状态
+      const isFullscreenElement = !!(
+        document.fullscreenElement ||
+        (document as any).webkitFullscreenElement ||
+        (document as any).mozFullScreenElement ||
+        (document as any).msFullscreenElement
+      );
+
+      // 检查是否处于全屏模式
+      const isFullscreenMode = !!(
+        (document as any).webkitIsFullScreen ||
+        (document as any).mozFullScreen ||
+        (document as any).msFullscreenElement
+      );
+
+      // 检查视频元素是否全屏（YouTube 等视频网站常用）
+      // 使用更安全的方法检查视频全屏状态
+      const videos = document.querySelectorAll('video');
+      let hasFullscreenVideo = false;
+
+      for (let i = 0; i < videos.length; i++) {
+        const video = videos[i];
+        if (
+          video === document.fullscreenElement ||
+          video === (document as any).webkitFullscreenElement ||
+          video === (document as any).mozFullScreenElement ||
+          video === (document as any).msFullscreenElement
+        ) {
+          hasFullscreenVideo = true;
+          break;
+        }
+      }
+
+      // 检查页面是否处于全屏状态
+      const isPageFullscreen = window.innerHeight === window.screen.height && window.innerWidth === window.screen.width;
+
+      setIsFullscreen(isFullscreenElement || isFullscreenMode || hasFullscreenVideo || isPageFullscreen);
+    };
+
+    // 初始检查
+    checkFullscreen();
+
+    // 监听全屏变化事件
+    const events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'];
+
+    events.forEach(event => {
+      document.addEventListener(event, checkFullscreen);
+    });
+
+    // 监听窗口大小变化（用于检测页面全屏）
+    window.addEventListener('resize', checkFullscreen);
+
+    return () => {
+      events.forEach(event => {
+        document.removeEventListener(event, checkFullscreen);
+      });
+      window.removeEventListener('resize', checkFullscreen);
+    };
+  }, []);
+
+  return isFullscreen;
+};