build: init

template/src/layout/HeaderAndFooter/index.tsx

@@ -0,0 +1,61 @@
+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;