import { Tag, Space, Menu } from 'antd'; import { QuestionCircleOutlined } from '@ant-design/icons'; import React from 'react'; import { useModel, SelectLang } from 'umi'; import Avatar from './AvatarDropdown'; import HeaderDropdown from '../HeaderDropdown'; import HeaderSearch from '../HeaderSearch'; import styles from './index.less'; export type SiderTheme = 'light' | 'dark'; const ENVTagColor = { dev: 'orange', test: 'green', pre: '#87d068', }; const GlobalHeaderRight: React.FC = () => { const { initialState } = useModel('@@initialState'); if (!initialState || !initialState.settings) { return null; } const { navTheme, layout } = initialState.settings; let className = styles.right; if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') { className = `${styles.right} ${styles.dark}`; } 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 => { // console.log('input', value); // }} /> <HeaderDropdown overlay={ <Menu> <Menu.Item onClick={() => { window.open('/~docs'); }} > 组件文档 </Menu.Item> <Menu.Item onClick={() => { window.open('https://pro.ant.design/docs/getting-started'); }} > Ant Design Pro 文档 </Menu.Item> </Menu> } > <span className={styles.action}> <QuestionCircleOutlined /> </span> </HeaderDropdown> <Avatar /> {REACT_APP_ENV && ( <span> <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag> </span> )} <SelectLang className={styles.action} /> </Space> ); }; export default GlobalHeaderRight;