logo点击五次后弹出：

image.png

/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 *
 * @see You can view component api by: https://github.com/ant-design/ant-design-pro-layout
 */
import { Card, Input,Layout, message, Modal } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
const { Footer } = Layout;
import type {
  MenuDataItem,
  BasicLayoutProps as ProLayoutProps,
  Settings,
} from '@ant-design/pro-layout';
import ProLayout, { SettingDrawer } from '@ant-design/pro-layout';
import React, { useState, useEffect, useMemo, useRef } from 'react';
import type { Dispatch } from 'umi';
import { Link, useIntl, connect, history } from 'umi';
import { Result, Button } from 'antd';
import Authorized from '@/utils/Authorized';
import RightContent from '@/components/GlobalHeader/RightContent';
import type { ConnectState } from '@/models/connect';
import { getMatchMenu } from '@umijs/route-utils';
import { postLogoInfo, queryRenders, postReportInfo } from "@/services/user";
const noMatch = (
  <Result
    status={403}
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/user/login">Go Login</Link>
      </Button>
    }
  />
);
export type BasicLayoutProps = {
  breadcrumbNameMap: Record<string, MenuDataItem>;
  route: ProLayoutProps['route'] & {
    authority: string[];
  };
  settings: Settings;
  dispatch: Dispatch;
} & ProLayoutProps;
export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
  breadcrumbNameMap: Record<string, MenuDataItem>;
};
/** Use Authorized check all menu item */

const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
  menuList.map((item) => {
    // if(item.name == "Alarm"){
    //   item.unaccessible = true
    // }
    const localItem = {
      ...item,
      children: item.children ? menuDataRender(item.children) : undefined,
    };

    return Authorized.check(item.authority, localItem, null) as MenuDataItem;
  });

// const defaultFooterDom = (
//   <DefaultFooter
//     copyright={`2021 深圳金信诺高新技术股份有限公司出品`}
//     links={[
//     //   {
//     //     key: 'Ant Design Pro',
//     //     title: 'Ant Design Pro',
//     //     href: 'https://pro.ant.design',
//     //     blankTarget: true,
//     //   },
//     //   {
//     //     key: 'github',
//     //     title: <GithubOutlined />,
//     //     href: 'https://github.com/ant-design/ant-design-pro',
//     //     blankTarget: true,
//     //   },
//     //   {
//     //     key: 'Ant Design',
//     //     title: 'Ant Design',
//     //     href: 'https://ant.design',
//     //     blankTarget: true,
//     //   },
//     ]}
//   />
// );

const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
  const [isSettingsModalVisible, setIsSettingsModalVisible] = useState(false);
  const [logoClickCount, setLogoClickCount] = useState(0);
  //const [logoData, seLogoData] = useState("data:image/png;base64,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");
  const [logoData, seLogoData] = useState("");
  const [isSettingsMode, setIsSettingsMode] = useState(false);
  const [reportFrequency, setReportFrequency] = useState('');
  const fileInputRef = useRef(null);

  const {
    dispatch,
    children,
    settings,
    location = {
      pathname: '/',
    },
  } = props;
  const menuDataRef = useRef<MenuDataItem[]>([]);
  useEffect(() => {
    console.log("+=====++++=======")
    getLogoInfo();
    if (dispatch) {
      dispatch({
        type: 'user/fetchCurrent',
      });
    }
  }, []);
  /** Init variables */

  const getLogoInfo = async () => {
    const res = await queryRenders();
    seLogoData(res?.data?.value);
  }

  const handleMenuCollapse = (payload: boolean): void => {
    if (dispatch) {
      dispatch({
        type: 'global/changeLayoutCollapsed',
        payload,
      });
    }
  }; // get children authority

  const authorized = useMemo(
    () =>
      getMatchMenu(location.pathname || '/', menuDataRef.current).pop() || {
        authority: undefined,
      },
    [location.pathname],
  );
  const { formatMessage } = useIntl();

  const onChange = e => {
    setLogoClickCount((prevCount) => {
      const newCount = prevCount + 1;
      // 达到五次点击后显示Modal窗口
      if (newCount === 5) {
        setIsSettingsModalVisible(true);
        return 0; // 重置点击次数
      }
      return newCount;
    });
/*    e.stopPropagation();
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('multiple', true);
    input.setAttribute('style', 'display:none');
    input.addEventListener('change', handleInputChange);
    document.body.appendChild(input);
    input.click();*/
  };

  // 控制Modal关闭
  const handleModalClose = () => {
    setIsSettingsModalVisible(false);
  };

  // 在这里处理表单提交事件
  const handleFormSubmit = (values) => {
    console.log('Received values from form: ', values);
    // 在这里可以进行设置参数和更换头像的逻辑处理
    if (values.reportFrequency != ""){
      console.log('xxxxxxxxxxxxxxxxxxxxxxxxx: ', values.reportFrequency)
      postReportInfo(values.reportFrequency);
    }
    handleModalClose(); // 提交后关闭Modal
  };

  // 处理 logo 点击事件
  const handleLogoClick = () => {
    setLogoClickCount(prevCount => {
      const newCount = prevCount + 1;
      // 如果达到五次点击，启用设置模式
      if (newCount === 5) {
        toggleSettingsMode(true);
      }
      return newCount;
    });
  };

  // 切换设置模式
  const toggleSettingsMode = (enable) => {
    setIsSettingsMode(enable);
    // 重置logo点击次数
    setLogoClickCount(0);
  };

  const handleInputChange = e => {
    const files = e.target.files;
    const reader = new FileReader();
    reader.readAsDataURL(files[0]);
    reader.onload = () => {
      const base64Str = reader.result;
      postLogoInfo(base64Str);
      seLogoData(base64Str);
      history.go(0);
    };
  };

  // 定义键盘事件处理程序以启动设置模式
  const handleKeyDown = (event) => {
    if (event.ctrlKey && event.shiftKey && event.key === 'k') {
      toggleSettingsMode(true);
    }
  };

  // 连接和断开键盘事件处理程序
  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown);
    // 当组件卸载时不要忘记清除
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);

  return (
    <div
    // style={{sss
    //   height: '200vh',
    // }}
    >
      <ProLayout
        logo={logoData}
        formatMessage={formatMessage}
        {...props}
        {...settings}

        onCollapse={handleMenuCollapse}
        onMenuHeaderClick={handleLogoClick}
        /*
                onMenuHeaderClick={() => history.push('/Monitor/Dashboard')}
        */
        menuItemRender={(menuItemProps, defaultDom) => {
          if (
            menuItemProps.isUrl ||
            !menuItemProps.path ||
            location.pathname === menuItemProps.path
          ) {
            return defaultDom;
          }

          return <Link to={menuItemProps.path}>{defaultDom}</Link>;
        }}
        breadcrumbRender={(routers = []) => [
          {
            path: '/',
            breadcrumbName: formatMessage({
              id: 'menu.home',
            }),
          },
          ...routers,
        ]}
        // itemRender={(router = {}) => {
        //   if (router.component) {
        //     return <Link to={router.path}>{router.breadcrumbName}</Link>
        //   }
        //   return router.breadcrumbName
        // }}
        // itemRender={(route, params, routes, paths) => {
        //   const first = routes.indexOf(route) === 0;
        //   return first ? (
        //     <Link to={paths.join(route.path)}>{route.breadcrumbName}</Link>
        //   ) : (
        //     <span>{route.breadcrumbName}</span>
        //   );
        // }}

        itemRender={(route, params, routes, paths) => {
          const first = routes.indexOf(route) === 0;
          return first ? (
            <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
          ) : (
            <span>{route.breadcrumbName}</span>
          );
        }}
        footerRender={() => {
          if (settings.footerRender || settings.footerRender === undefined) {
            return (<Footer style={{ textAlign: 'center' }}>Copyright © 2020-2023 Kingsignal Technology Co., Ltd. All rights reserved.</Footer>)
            // defaultFooterDom
            // (<Footer style={{ textAlign: 'center'}}>Copyright © 2021 LEAX Arkivator Telecom. All rights reserved.</Footer>)
          }
          return null;
        }}

        menuDataRender={menuDataRender}
        rightContentRender={() => <RightContent />}
        postMenuData={(menuData) => {
          menuDataRef.current = menuData || [];
          return menuData || [];
        }}
      // waterMarkProps={{
      //   content: 'Ant Design Pro',
      //   fontColor: 'rgba(24,144,255,0.15)',
      // }}
      >
        <Authorized authority={authorized!.authority} noMatch={noMatch}>
          {children}
        </Authorized>

      </ProLayout>
      <Modal
        title="Edit Logo or Set Report Frequency"
        visible={isSettingsMode}
        onCancel={() => setIsSettingsMode(false)}
        onOk={() => handleFormSubmit({
          logo: logoData,
          reportFrequency: reportFrequency
        })}
      >
        <Card bordered={false}>
          {logoData && <img src={logoData} alt="Preview Logo" style={{ height: '100px', marginBottom: '10px' }} />}
          <br></br>
          <input
            type="file"
            onChange={handleInputChange}
            style={{ display: 'none' }}
            ref={fileInputRef}
          />
          <Button
            type="primary"
            icon={<UploadOutlined />}
            onClick={() => fileInputRef.current && fileInputRef.current.click()}
          >
            Change Logo
          </Button>
          <p></p>
          <Input
            placeholder="Report Frequency"
            value={reportFrequency}
            onChange={(e) => setReportFrequency(e.target.value)}
          />
        </Card>
      </Modal>
      <SettingDrawer
        settings={settings}
        onSettingChange={(config) =>
          dispatch({
            type: 'settings/changeSetting',
            payload: config,
          })
        }
      />
    </div>
  );
};

export default connect(({ global, settings }: ConnectState) => ({
  collapsed: global.collapsed,
  settings,
}))(BasicLayout);