Function VideoLayout

src/video/components/layout/VideoLayout.jsx:11–124

({ isDarkMode })

const STORAGE_KEY = 'app_video_right_panel_width_v1';

export const VideoLayout = ({ isDarkMode }) => {
  const [rightPanelWidth, setRightPanelWidth] = useStickyState(RIGHT_PANEL_DEFAULT, STORAGE_KEY);
  const [isResizing, setIsResizing] = useState(false);

  useEffect(() => {
    const handleMouseMove = (e) => {
      if (!isResizing) return;
      const w = window.innerWidth - e.clientX;
      const clamped = Math.max(RIGHT_PANEL_MIN, Math.min(RIGHT_PANEL_MAX, w));
      setRightPanelWidth(clamped);
    };
    const handleMouseUp = () => {
      setIsResizing(false);
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
    };
    if (isResizing) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
      document.body.style.cursor = 'col-resize';
      document.body.style.userSelect = 'none';
    }
    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isResizing, setRightPanelWidth]);

  const getContainerStyle = (width, flex = 'none') => {
    const baseStyle = {
      height: '100%',
      borderRadius: '24px',
      border: '1px solid transparent',
      backgroundOrigin: 'border-box',
      backgroundClip: 'padding-box, border-box',
      width: typeof width === 'number' ? `${width}px` : width,
      flex,
      display: 'flex',
      flexDirection: 'column',
      position: 'relative',
      overflow: 'hidden',
    };
    return isDarkMode
      ? {
          ...baseStyle,
          backgroundImage:
            'linear-gradient(180deg, #3B3B3B 0%, #242120 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%)',
        }
      : {
          ...baseStyle,
          backgroundImage:
            'linear-gradient(180deg, #FAF5F1 0%, #F6EBE6 100%), linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%)',
        };
  };

  return (
    <div className="flex-1 flex gap-0 h-full min-h-0 overflow-hidden">
      {/* 1. 左侧导航树容器 */}