Merge pull request #1 from ballcat-projects/dev

0.3.0

Author: lingting

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/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<NoticeIconTabProps> = ({
           // eslint-disable-next-line no-nested-ternary
           const leftIcon = item.avatar ? (
             typeof item.avatar === 'string' ? (
-              <Avatar className={styles.avatar} src={item.avatar} />
+              <Avatar className={styles.avatar} src={item.avatar} icon={<Icon type="user" />} />
             ) : (
               <span className={styles.iconElement}>{item.avatar}</span>
             )

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<GlobalHeaderRightProps> = ({ exitConfirm }) => {
       <span className={`${styles.action} ${styles.account}`}>
         <Avatar
           size="small"
+          icon={<Icon type="user" />}
           className={styles.avatar}
           src={user?.info?.avatar ? UrlUtils.resolveImage(user.info.avatar) : undefined}
           alt="avatar"

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} />