feats

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons": "^4.7.0",
     "@zjxpcyc/react-tiny-store": "^2.0.1",
     "antd": "^4.22.3",
     "react": "18.1.0",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@ant-design/icons': ^4.7.0
   '@types/react': ^18.0.15
   '@types/react-dom': ^18.0.6
   '@vitejs/plugin-react': ^2.0.0
@@ -15,6 +16,7 @@ specifiers:
   vite-plugin-imp: ^2.2.0
 
 dependencies:
+  '@ant-design/icons': registry.npmmirror.com/@ant-design/icons/4.7.0_ef5jwxihqo6n7gxfmzogljlgcm
   '@zjxpcyc/react-tiny-store': registry.npmmirror.com/@zjxpcyc/react-tiny-store/2.0.1
   antd: registry.npmmirror.com/antd/4.22.3_ef5jwxihqo6n7gxfmzogljlgcm
   react: registry.npmmirror.com/react/18.1.0

src/layouts/AuthLayout/components/Header.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Layout, Spin } from 'antd';
-import Logo from './Logo';
-
-const { Header } = Layout;
-
-export default (props) => {
-  return (
-    <Header>
-      <Logo />
-    </Header>
-  )
-}

src/layouts/AuthLayout/components/Header/Exit.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { LogoutOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+
+export default (props) => {
+  return (
+    <Button className='font' type="text" icon={<LogoutOutlined />}>退出</Button>
+  )
+}

src/layouts/AuthLayout/components/Header/Logo.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useModel } from '@/store'
+
+export default (props) => {
+
+  const { config } = useModel('system');
+
+  return (
+    <div className='logo'>
+      <img src="./logo.png" alt="" />
+      <h3>{config.appName}</h3>
+    </div>
+  )
+}

src/layouts/AuthLayout/components/Header/User.jsx

@@ -0,0 +1,22 @@
+import React, { useMemo } from 'react';
+import { Avatar, Dropdown, Menu, Space } from 'antd';
+
+export default (props) => {
+  const menuItems = [
+    {
+      key: 'changePassword',
+      label: '修改密码',
+    }
+  ];
+
+  const menu = <Menu items={menuItems} />;
+
+  return (
+    <Dropdown overlay={menu}>
+      <div className="user-info">
+        <Avatar src="https://joeschmoe.io/api/v1/random" />
+        <span className='font'>张延森</span>
+      </div>
+    </Dropdown>
+  )
+}

src/layouts/AuthLayout/components/Header/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Layout, Space } from 'antd';
+import Logo from './Logo';
+import User from './User';
+import Exit from './Exit';
+
+const { Header } = Layout;
+
+export default (props) => {
+  return (
+    <Header className='layout-header'>
+      <Logo />
+      <Space>
+        <User />
+        <Exit />
+      </Space>
+    </Header>
+  )
+}

src/layouts/AuthLayout/components/Logo.jsx

@@ -1,7 +0,0 @@
-import React from 'react'
-
-export default (props) => {
-  return (
-    <div style={{ height: '64px' }}>Logo</div>
-  )
-}

src/layouts/AuthLayout/index.jsx

@@ -8,6 +8,8 @@ import Container from './components/Container';
 import Footer from './components/Footer';
 import useReady from './useReady';
 
+import './style.less';
+
 const { Content } = Layout;
 
 export default (props) => {

src/layouts/AuthLayout/style.less

@@ -0,0 +1,46 @@
+.layout-header {
+  box-sizing: border-box;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .logo {
+    width: 200px; // 200 是 side-bar 宽度
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding-left: 1em;
+
+    & > * {
+      color: #fff;
+    }
+
+    img {
+      width: 36px;
+      vertical-align: middle;
+      margin-right: 1em;
+    }
+  }
+
+  .font {
+    color: #fff;
+    display: inline-block;
+  }
+
+  .user-info {
+    cursor: pointer;
+
+    .ant-avatar {
+      border: 1px solid rgba(255, 255, 255, 0.4);
+    }
+
+    span {
+      margin-left: 1em;
+    }
+  }
+
+  .sys-exit {
+    margin-right: 1em;
+  }
+}

src/store/models/system.js

@@ -7,7 +7,9 @@ const setRootCssVar = (key, val) => {
 
 export default function useSystem() {
   const [theme, setTheme] = useState('light');
-  const [config, setConfig] = useState({});
+  const [config, setConfig] = useState({
+    appName: '云致科技',
+  });
 
   const updateTheme = useCallback((t) => {
     setTheme(t);