Initial commit

src/layouts/Header.less

@@ -0,0 +1,27 @@
+@import '../baseStyle.less';
+
+.header {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: @width;
+  margin: 0 auto;
+  .logo {
+    height: 45px;
+  }
+}
+.header-menu {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-end;
+  .ant-menu-horizontal {
+    line-height: 58px;
+    border: none;
+  }
+}
+.user {
+  margin-left: 15px;
+}

src/layouts/Header.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+//导入logo图片
+import LogoImg from '@/assets/img/logo.png';
+// 引入样式文件
+import './Header.less';
+//导入菜单组件
+import HeaderMenu from './HeaderMenu';
+const Header: React.FC = (props) => {
+  return (
+    <div className="header">
+      <img className='logo' src={LogoImg} alt="logo" />
+      <HeaderMenu />
+    </div>
+  );
+};
+export default Header;

src/layouts/HeaderMenu.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+import { Menu } from 'antd';
+import Language from './Language';
+import { useIntl, Link, useHistory } from 'umi';
+import User from './User';
+interface IMenuItem {
+  label: string;
+  key: string;
+  path: string;
+}
+// 引入样式文件   useIntl().formatMessage({ id: 'menu.首页' }),
+const items: IMenuItem[] = [
+  {
+    label: 'menu.首页',
+    key: 'index',
+    path: '/index',
+  },
+  {
+    label: 'menu.公告公示',
+    key: 'announce',
+    path: '/announce',
+  },
+  {
+    label: 'menu.政策法规',
+    key: 'policy',
+    path: '/policy',
+  },
+  {
+    label: 'menu.通知中心',
+    key: 'notice',
+    path: '/notice',
+  },
+  {
+    label: 'menu.下载中心',
+    key: 'download',
+    path: '/download',
+  },
+  {
+    label: 'menu.关于我们',
+    key: 'about',
+    path: '/about',
+  },
+];
+
+const HeaderMenu: React.FC = (props) => {
+  //当前激活菜单
+  const [current, setCurrent] = useState('index');
+  const intl = useIntl();
+  const history = useHistory();
+  useEffect(() => {
+    // 获取当前激活菜单
+    const path = history.location.pathname;
+    const menu = items.find((item) => item.path === path);
+    if (menu) {
+      setCurrent(menu.key);
+    }else{
+      // 如果跳转的详情页面获取根级激活菜单
+      const rootActiveMenu = path.split('/')[1];
+      setCurrent(rootActiveMenu);
+    }
+  }, [history.location.pathname]);
+  return (
+    <div className="header-menu">
+      <Menu selectedKeys={[current]} mode="horizontal">
+        {items.map((item: IMenuItem) => (
+          <Menu.Item key={item.key}>
+            <Link to={item.path}>{intl.formatMessage({ id: item.label })}</Link>
+          </Menu.Item>
+        ))}
+      </Menu>
+      <Language />
+      <User />
+    </div>
+  );
+};
+export default HeaderMenu;

src/layouts/Index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Header from './Header';
+const LayoutIndex: React.FC = (props) => {
+  const { children } = props;
+  return (
+    <>
+      <Header />
+      <div className="layout-content">
+        <div className='layout-content-main'>{children}</div>
+      </div>
+    </>
+  );
+};
+export default LayoutIndex;

src/layouts/Language.less

@@ -0,0 +1,21 @@
+@import '../baseStyle.less';
+.language {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 25px;
+  margin-left: 15px;
+  padding: 0 10px;
+  font-size: 12px;
+  background: @gray;
+  border-radius: 30px;
+  span {
+    padding: 0 5px;
+    cursor: pointer;
+    color: @gray-text;
+    &.active{
+      color: @main-color;
+      font-weight: 800;
+    }
+  }
+}

src/layouts/Language.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { getLocale,setLocale } from 'umi';
+
+import './Language.less'
+
+const Language: React.FC = (props) => {
+  const locale = getLocale();
+  const [languageList, setLanguageList] = useState([
+    {
+      label: '中',
+      value: 'zh-CN',
+    },
+    {
+      label: 'EN',
+      value: 'en-US',
+    },
+  ]);
+  return (
+    <div className="language">
+      {languageList.map((item) => (
+        <span onClick={() => setLocale(item.value, false)} className={item.value === locale ? 'active' : ''} key={item.value}>{item.label}</span>
+      ))}
+    </div>
+  );
+};
+export default Language;

src/layouts/User.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Link, useIntl } from 'umi';
+const User: React.FC = (props) => {
+  const intl = useIntl();
+  return (
+    <div className="user">
+      <Link to={'/login'}>{intl.formatMessage({ id: '登录/注册' })}</Link>
+    </div>
+  );
+};
+export default User;