diff --git a/src/components/FullScreen/index.tsx b/src/components/FullScreen/index.tsx new file mode 100644 index 0000000..2a60c9c --- /dev/null +++ b/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 ( + { + // 外部自定义触发是否全屏 + if (full === undefined && onFullChange === undefined) { + changeFull(!isFull); + } + }} + /> + ); +}; + +FullScreen.open = openFullScreen; + +FullScreen.exit = exitFullScreen; + +export default FullScreen; diff --git a/src/components/NoticeIcon/NoticeList.tsx b/src/components/NoticeIcon/NoticeList.tsx index dbe66d0..f23c3c1 100644 --- a/src/components/NoticeIcon/NoticeList.tsx +++ b/src/components/NoticeIcon/NoticeList.tsx @@ -4,6 +4,7 @@ import React from 'react'; import classNames from 'classnames'; // @ts-ignore import styles from './NoticeList.less'; +import Icon from '../Icon'; export type NoticeIconTabProps = { count?: number; @@ -55,7 +56,7 @@ const NoticeList: React.FC = ({ // eslint-disable-next-line no-nested-ternary const leftIcon = item.avatar ? ( typeof item.avatar === 'string' ? ( - + } /> ) : ( {item.avatar} ) diff --git a/src/components/RightContent/AvatarDropdown.tsx b/src/components/RightContent/AvatarDropdown.tsx index a4e5b8e..076ac39 100644 --- a/src/components/RightContent/AvatarDropdown.tsx +++ b/src/components/RightContent/AvatarDropdown.tsx @@ -10,6 +10,7 @@ import { outLogin } from '@/services/ant-design-pro/api'; import { User, Token } from '@/utils/Ballcat'; import I18n from '@/utils/I18nUtils'; import UrlUtils from '@/utils/UrlUtils'; +import Icon from '../Icon'; export type GlobalHeaderRightProps = { exitConfirm?: boolean; @@ -101,6 +102,7 @@ const AvatarDropdown: React.FC = ({ exitConfirm }) => { } className={styles.avatar} src={user?.info?.avatar ? UrlUtils.resolveImage(user.info.avatar) : undefined} alt="avatar" diff --git a/src/components/RightContent/index.tsx b/src/components/RightContent/index.tsx index 389d522..9dba02a 100644 --- a/src/components/RightContent/index.tsx +++ b/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 ( - umi ui, value: 'umi ui' }, - { - label: Ant Design, - value: 'Ant Design', - }, - { - label: Pro Table, - value: 'Pro Table', - }, - { - label: Pro Layout, - value: 'Pro Layout', - }, - ]} - // onSearch={value => { - // - // }} - /> { - window.open('https://pro.ant.design/docs/getting-started'); + window.open('http://www.ballcat.cn/'); }} > + + setFull(!full)}> + + + {/* 如果不需要退出确认. 移除 exitConfirm 即可 */}