整理框架和新建基础模块

src/layouts/Header.tsx

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

src/layouts/Index.tsx

@@ -1,13 +1,33 @@
 import React from 'react';
-import Header from './Header';
+// import Header from './Header';
+import { Layout, Breadcrumb } from 'antd';
+const { Header, Footer, Sider, Content } = Layout;
+//导入logo图片
+import HeaderComponent from './Header';
+import SiderMenu from './SiderMenu';
+import './layout.less';
 const LayoutIndex: React.FC = (props) => {
   const { children } = props;
   return (
     <>
-      <Header />
-      <div className="layout-content">
-        <div className='layout-content-main'>{children}</div>
-      </div>
+      <Layout>
+        <Header className="header">
+          <HeaderComponent />
+        </Header>
+        <Layout>
+          <Sider width={200} theme="light">
+            <SiderMenu />
+          </Sider>
+          <Layout className="layout-content">
+            <Breadcrumb style={{ margin: '10px 0' }}>
+              <Breadcrumb.Item>Home</Breadcrumb.Item>
+              <Breadcrumb.Item>List</Breadcrumb.Item>
+              <Breadcrumb.Item>App</Breadcrumb.Item>
+            </Breadcrumb>
+            <Content>{children}</Content>
+          </Layout>
+        </Layout>
+      </Layout>
     </>
   );
 };

src/layouts/SiderMenu.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { Menu } from 'antd';
-import Language from './Language';
 import { useIntl, Link, useHistory } from 'umi';
-import User from './User';
+import IconFont from '@/components/IconFont/IconFont';
 interface IMenuItem {
   label: string;
   key: string;
   path: string;
+  icon: string;
 }
 // 引入样式文件   useIntl().formatMessage({ id: 'menu.首页' }),
 const items: IMenuItem[] = [
@@ -14,35 +14,47 @@ const items: IMenuItem[] = [
     label: 'menu.首页',
     key: 'index',
     path: '/index',
+    icon: 'icon-shouye',
   },
   {
-    label: 'menu.公告公示',
-    key: 'announce',
-    path: '/announce',
+    label: 'menu.管理员管理',
+    key: 'userManage',
+    path: '/userManage',
+    icon: 'icon-guanliyuan',
   },
   {
-    label: 'menu.政策法规',
-    key: 'policy',
-    path: '/policy',
+    label: 'menu.下载中心管理',
+    key: 'downloadManage',
+    path: '/downloadManage',
+    icon: 'icon-Tab_xiazaizhongxin',
   },
   {
-    label: 'menu.通知中心',
-    key: 'notice',
-    path: '/notice',
+    label: 'menu.通知中心管理',
+    key: 'noticeManage',
+    path: '/noticeManage',
+    icon: 'icon-tongzhizhongxin',
   },
   {
-    label: 'menu.下载中心',
-    key: 'download',
-    path: '/download',
+    label: 'menu.政策法规管理',
+    key: 'policyManage',
+    path: '/policyManage',
+    icon: 'icon-zhengcefagui',
   },
   {
-    label: 'menu.关于我们',
-    key: 'about',
-    path: '/about',
+    label: 'menu.关于我们管理',
+    key: 'aboutManage',
+    path: '/aboutManage',
+    icon: 'icon-guanyuwomen',
+  },
+  {
+    label: 'menu.帮助中心管理',
+    key: 'helpManage',
+    path: '/helpManage',
+    icon: 'icon-bangzhuzhongxin',
   },
 ];
 
-const HeaderMenu: React.FC = (props) => {
+const SiderMenu: React.FC = (props) => {
   //当前激活菜单
   const [current, setCurrent] = useState('index');
   const intl = useIntl();
@@ -53,7 +65,7 @@ const HeaderMenu: React.FC = (props) => {
     const menu = items.find((item) => item.path === path);
     if (menu) {
       setCurrent(menu.key);
-    }else{
+    } else {
       // 如果跳转的详情页面获取根级激活菜单
       const rootActiveMenu = path.split('/')[1];
       setCurrent(rootActiveMenu);
@@ -61,16 +73,15 @@ const HeaderMenu: React.FC = (props) => {
   }, [history.location.pathname]);
   return (
     <div className="header-menu">
-      <Menu selectedKeys={[current]} mode="horizontal">
+      <Menu selectedKeys={[current]} mode="vertical">
         {items.map((item: IMenuItem) => (
           <Menu.Item key={item.key}>
+            <IconFont type={item.icon} />
             <Link to={item.path}>{intl.formatMessage({ id: item.label })}</Link>
           </Menu.Item>
         ))}
       </Menu>
-      <Language />
-      <User />
     </div>
   );
 };
-export default HeaderMenu;
+export default SiderMenu;

src/layouts/layout.less

@@ -1,27 +1,26 @@
 @import '../baseStyle.less';
 
-.header {
+.headerComponent {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: @width;
-  margin: 0 auto;
+  padding: 0 15px;
   .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;
 }
+.flex {
+  display: flex;
+  align-items: center;
+}
+.layout-content {
+  background: rgb(245,246,250);
+  padding: 0 15px;
+  height: calc(100vh - 64px);
+  overflow: auto;
+}