feat(FullScreen): 添加全屏组件

src/components/FullScreen/index.tsx

@@ -0,0 +1,76 @@
+import type { CSSProperties } from 'react';
+import { useState, useCallback, useEffect } from 'react';
+import Icon from '../Icon';
+
+export type FullScreenProps = {
+  full?: boolean;
+  onFullChange?: (flag: boolean) => void;
+  iconStyle?: CSSProperties;
+  dom?: HTMLElement;
+};
+
+export const openFullScreen = (dom?: HTMLElement) => {
+  (dom || document.getElementsByTagName('body')[0]).requestFullscreen();
+};
+
+export const exitFullScreen = () => document.exitFullscreen();
+
+const FullScreen = ({ full, onFullChange, iconStyle, dom }: FullScreenProps) => {
+  const [isFull, setIsFull] = useState(false);
+
+  const changeFull = useCallback(
+    (flag: boolean) => {
+      setIsFull(flag);
+      if (onFullChange) {
+        onFullChange(flag);
+      }
+
+      // 切换成全屏 且 当前没有全屏元素
+      if (flag && !document.fullscreenElement) {
+        openFullScreen(dom);
+      }
+      // 取消全屏 且 当前有全屏元素
+      else if (!flag && document.fullscreenElement) {
+        document.exitFullscreen();
+      }
+    },
+    [dom, onFullChange],
+  );
+
+  useEffect(() => {
+    changeFull(!!full);
+  }, [full]);
+
+  useEffect(() => {
+    const fullscreenchangeListener = () => {
+      const flag = !!document.fullscreenElement;
+      setIsFull(flag);
+      if (onFullChange) {
+        onFullChange(flag);
+      }
+    };
+    document.addEventListener('fullscreenchange', fullscreenchangeListener);
+    return () => {
+      document.removeEventListener('fullscreenchange', fullscreenchangeListener);
+    };
+  }, []);
+
+  return (
+    <Icon
+      type={isFull ? 'fullscreen-exit' : 'fullscreen'}
+      style={{ fontSize: '16px', ...iconStyle }}
+      onClick={() => {
+        // 外部自定义触发是否全屏
+        if (full === undefined && onFullChange === undefined) {
+          changeFull(!isFull);
+        }
+      }}
+    />
+  );
+};
+
+FullScreen.open = openFullScreen;
+
+FullScreen.exit = exitFullScreen;
+
+export default FullScreen;

src/components/RightContent/index.tsx

@@ -3,14 +3,15 @@ import { MoreOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import React, { useState } from 'react';
 import { SelectLang, useModel } from 'umi';
 import Avatar from './AvatarDropdown';
-import HeaderSearch from '../HeaderSearch';
 // @ts-ignore
 import styles from './index.less';
 import SettingDrawer from '@/components/SettingDrawer';
+import FullScreen from '../FullScreen';
 
 const GlobalHeaderRight: React.FC = () => {
   const { initialState } = useModel('@@initialState');
   const [showSetting, setShowSetting] = useState(false);
+  const [full, setFull] = useState(false);
 
   if (!initialState || !initialState.settings) {
     return null;
@@ -24,37 +25,19 @@ const GlobalHeaderRight: React.FC = () => {
   }
   return (
     <Space className={className}>
-      <HeaderSearch
-        className={`${styles.action} ${styles.search}`}
-        placeholder="站内搜索"
-        defaultValue="umi ui"
-        options={[
-          { label: <a href="https://umijs.org/zh/guide/umi-ui.html">umi ui</a>, value: 'umi ui' },
-          {
-            label: <a href="next.ant.design">Ant Design</a>,
-            value: 'Ant Design',
-          },
-          {
-            label: <a href="https://protable.ant.design/">Pro Table</a>,
-            value: 'Pro Table',
-          },
-          {
-            label: <a href="https://prolayout.ant.design/">Pro Layout</a>,
-            value: 'Pro Layout',
-          },
-        ]}
-        // onSearch={value => {
-        //
-        // }}
-      />
       <span
         className={styles.action}
         onClick={() => {
-          window.open('https://pro.ant.design/docs/getting-started');
+          window.open('http://www.ballcat.cn/');
         }}
       >
         <QuestionCircleOutlined />
       </span>
+
+      <span className={styles.action} onClick={() => setFull(!full)}>
+        <FullScreen full={full} onFullChange={setFull} />
+      </span>
+
       {/* 如果不需要退出确认. 移除 exitConfirm 即可 */}
       <Avatar exitConfirm />
       <SelectLang className={styles.action} />