62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
|
import { selectCommon } from '@/app/common';
|
||
|
|
import { useAppSelector } from '@/app/hooks';
|
||
|
|
import Settings from '@/components/settings';
|
||
|
|
import { Theme } from '@/enum';
|
||
|
|
import { LayoutProps } from '@/layout';
|
||
|
|
import { SettingOutlined } from '@ant-design/icons';
|
||
|
|
import { Image, Layout, Menu, Popover } from '@df/toco-ui';
|
||
|
|
import { useIntl } from 'react-intl';
|
||
|
|
import styles from './index.module.css';
|
||
|
|
|
||
|
|
const { Header, Content, Footer } = Layout;
|
||
|
|
|
||
|
|
const HeaderAndFooterLayout = (props: LayoutProps) => {
|
||
|
|
const { children, onHeadMenuSelect } = props;
|
||
|
|
const { headMenus, currentMenu, theme } = useAppSelector(selectCommon);
|
||
|
|
const { headKey, sideKey = '' } = currentMenu;
|
||
|
|
const intl = useIntl();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Layout>
|
||
|
|
<Header className={styles.header}>
|
||
|
|
<div className={styles.left}>
|
||
|
|
<div className={styles.logo}>
|
||
|
|
<Image
|
||
|
|
preview={false}
|
||
|
|
src={
|
||
|
|
process.env.PUBLIC_URL +
|
||
|
|
(theme === Theme.DEFAULT ? '/logo.png' : '/logo_dark.png')
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<Menu
|
||
|
|
className={styles.menu}
|
||
|
|
mode="horizontal"
|
||
|
|
items={headMenus}
|
||
|
|
selectedKeys={[headKey, sideKey]}
|
||
|
|
onSelect={onHeadMenuSelect}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className={styles.right}>
|
||
|
|
<Popover
|
||
|
|
title={intl.formatMessage({ id: 'system_settings' })}
|
||
|
|
content={<Settings />}
|
||
|
|
trigger="hover"
|
||
|
|
>
|
||
|
|
<SettingOutlined className={styles.settings} />
|
||
|
|
</Popover>
|
||
|
|
</div>
|
||
|
|
</Header>
|
||
|
|
|
||
|
|
<Content className={styles.content}>
|
||
|
|
<div className={styles.main}>{children}</div>
|
||
|
|
</Content>
|
||
|
|
<Footer className={styles.footer}>
|
||
|
|
TOCO Design ©{new Date().getFullYear()}
|
||
|
|
</Footer>
|
||
|
|
</Layout>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default HeaderAndFooterLayout;
|