react 高效高質量搭建後臺系統系列 —— 系統佈局

彭加李發表於2023-01-31

React

其他章節請看：

react 高效高質量搭建後臺系統系列

系統佈局

前面我們用腳手架搭建了專案，並實現了登入模組，登入模組所依賴的請求資料和antd（ui框架和樣式）也已完成。

本篇將完成系統佈局。比如導航區、頭部區域、主體區域、頁尾。

最終效果如下：

spug 中系統佈局的分析

spug 登入成功後進入系統，頁面分為三大塊：左側導航、頭部和主體區域。如下圖所示：

Tip：spug 將版權部分也放在主體區域內。

切換左側導航，主體內容會跟著變化，頭部區域不變。例如從工作臺切換到 Dashboard，就像這樣：

入口

登入成功後，進入系統。也就是進入 Layout 元件。

// App.js
class App extends Component {
   render() {
     return (
       <Switch>
         <Route path="/" exact component={Login} />
         {/* 系統登入後進入 Layout 元件 */}
         <Route component={Layout} />
       </Switch>
     );
   }
}

Layout下index.js渲染的程式碼如下：

  return (
    <Layout>
      {/* 左側區域，對 antd 中 Sider 的封裝 */}
      <Sider collapsed={collapsed}/>
      <Layout style={{height: '100vh'}}>
        {/* 頂部區域， 對 antd 中 Layout.Header 的封裝*/}
        <Header collapsed={collapsed} toggle={() => setCollapsed(!collapsed)}/>
        <Layout.Content className={styles.content}>
          <Switch>
            {Routes}
            <Route component={NotFound}/>
          </Switch>
          <Footer/>
        </Layout.Content>
      </Layout>
    </Layout>

這裡主要用到 antd 的 Layout 佈局元件。請看 antd 中 Layout 的示例，和 spug 中的程式碼和效果幾乎相同：

Tip：

這裡的 Sider 和 Header 都不是 antd 中的原始元件，已被封裝，挪出成一個單獨的元件。
<Footer/> 總是在視口底部，受父元素 flex 的影響。請看下圖：

Layout 中 index.js 完整程式碼如下：

// spug\src\layout\index.js

import React, { useState, useEffect } from 'react';
import { Switch, Route } from 'react-router-dom';
import { Layout, message } from 'antd';
import { NotFound } from 'components';
import Sider from './Sider';
import Header from './Header';
import Footer from './Footer'
/*
物件陣列。就像這樣：

[
  { icon: <DesktopOutlined />, title: '工作臺', path: '/home', component: HomeIndex },
  ...
  {
    icon: <AlertOutlined />, title: '報警中心', auth: 'alarm.alarm.view|alarm.contact.view|alarm.group.view', child: [
      { title: '報警歷史', auth: 'alarm.alarm.view', path: '/alarm/alarm', component: AlarmIndex },
      { title: '報警聯絡人', auth: 'alarm.contact.view', path: '/alarm/contact', component: AlarmContact },
      { title: '報警聯絡組', auth: 'alarm.group.view', path: '/alarm/group', component: AlarmGroup },
    ]
  },
  ...
]
*/
import routes from '../routes';
import { hasPermission, isMobile } from 'libs';
import styles from './layout.module.less';

// 將 routes 中有許可權的路由提取到 Routes 中
function initRoutes(Routes, routes) {
  for (let route of routes) {
    // 葉子節點才有 component。如果沒有child則屬於葉子節點
    if (route.component) {
      // 如果不需要許可權，或有許可權則放入 Routes
      if (!route.auth || hasPermission(route.auth)) {
        Routes.push(<Route exact key={route.path} path={route.path} component={route.component}/>)
      }
    } else if (route.child) {
      initRoutes(Routes, route.child)
    }
  }
}

export default function () {
  // 側邊欄收起狀態。這裡設定為展開
  const [collapsed, setCollapsed] = useState(false)
  // 路由，預設是空陣列
  const [Routes, setRoutes] = useState([]);

  // 元件掛載後執行。相當於 componentDidMount()
  useEffect(() => {
     if (isMobile) {
      setCollapsed(true);
      message.warn('檢測到您在移動裝置上訪問，請使用橫屏模式。', 5)
    }
    // 注：重新宣告一個變數 Routes，比上文的 Routes 作用域更小範圍
    const Routes = [];
    initRoutes(Routes, routes);
    // console.log('Routes', Routes)
    // console.log('Routes', JSON.stringify(Routes))
    setRoutes(Routes)
  }, [])


  return (
    // 此處 Layout 是 antd 佈局元件。和官方用法相同：
    /*
    <Layout>
      <Sider>Sider</Sider>
      <Layout>
        <Header>Header</Header>
        <Content>Content</Content>
        <Footer>Footer</Footer>
      </Layout>
    </Layout>
    */
    <Layout>
      
      {/* 左側區域，對 antd 中 Sider 的封裝 */}
      <Sider collapsed={collapsed}/>
      {/* 內容高度不夠，版權資訊在底部；內容高度太高，則需要滾動才可檢視全部內容； */}
      <Layout style={{height: '100vh'}}>
        {/* 頂部區域， 對 antd 中 Layout.Header 的封裝*/}
        <Header collapsed={collapsed} toggle={() => setCollapsed(!collapsed)}/>
        <Layout.Content className={styles.content}>
          {/* 只渲染第一個路徑匹配的元件。類似 if...else。參考：https://www.cnblogs.com/pengjiali/p/16045481.html#Switch */}
          <Switch>
            {/* 路由陣列。裡面每項類似這樣：<Route exact key={route.path} path='/home' component={HomeComponent}/> */}
            {Routes}
            {/* 沒有匹配則進入 NotFound */}
            <Route component={NotFound}/>
          </Switch>
          {/* 系統底部展示。例如版權、官網、文件連結、倉庫連結*/}
          {/* 父元素採用 flex 佈局，當主體內容不多時，版權這部分資訊也會置於底部 */}
          <Footer/>
        </Layout.Content>
      </Layout>
    </Layout>
  )
}

左側導航

左側導航封裝在 Sider（spug\src\layout\Sider.js）元件中。

利用的是 antd 中的 Menu 元件。就像這樣：

// <4.20.0 可用，>=4.20.0 時不推薦
<Menu>
    <Menu.Item>選單項一</Menu.Item>
    <Menu.Item>選單項二</Menu.Item>
    <Menu.SubMenu title="子選單">
        <Menu.Item>子選單項</Menu.Item>
    </Menu.SubMenu>
</Menu>;

完整程式碼如下：

// spug\src\layout\Sider.js

import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import { hasPermission, history } from 'libs';
import styles from './layout.module.less';
/*
物件陣列。就像這樣：

[
  { icon: <DesktopOutlined />, title: '工作臺', path: '/home', component: HomeIndex },
  ...
  {
    icon: <AlertOutlined />, title: '報警中心', auth: 'alarm.alarm.view|alarm.contact.view|alarm.group.view', child: [
      { title: '報警歷史', auth: 'alarm.alarm.view', path: '/alarm/alarm', component: AlarmIndex },
      { title: '報警聯絡人', auth: 'alarm.contact.view', path: '/alarm/contact', component: AlarmContact },
      { title: '報警聯絡組', auth: 'alarm.group.view', path: '/alarm/group', component: AlarmGroup },
    ]
  },
  ...
]
*/
import menus from '../routes';
import logo from './spug.png'
// 當前選中的選單項 key 陣列
let selectedKey = window.location.pathname;
/*
初始化選單對映。如果輸入不存在的路徑，那麼選單則無需選中

{
/home: 1,                   // 一級選單
/dashboard: 1,              // 一級選單
...
/alarm/alarm: "報警中心",   // 二級選單
/alarm/contact: "報警中心", // 二級選單
/alarm/group: "報警中心",   // 二級選單
...
}
*/
const OpenKeysMap = {};

for (let item of menus) {
  if (item.child) {
    for (let sub of item.child) {
      // child 中的節點值為 item.title
      if (sub.title) OpenKeysMap[sub.path] = item.title
    }
  } else if (item.title) {
    // 一級節點的值是 1
    OpenKeysMap[item.path] = 1
  }
}

export default function Sider(props) {
  // openKeys	當前展開的 SubMenu 選單項 key 陣列 string[]
  // const [openKeys, setOpenKeys] = useState([]);

  // 根據路由返回選單項或子選單。沒有許可權或沒有 title 返回 null
  function makeMenu(menu) {
    // 如果沒有許可權
    if (menu.auth && !hasPermission(menu.auth)) return null;
    // 沒有 title 返回 null
    if (!menu.title) return null;
    // 如果有 child 則呼叫 _makeSubMenu；沒有 child 則呼叫 _makeItem
    return menu.child ? _makeSubMenu(menu) : _makeItem(menu)
  }

  // 返回子選單
  function _makeSubMenu(menu) {
    return (
      <Menu.SubMenu key={menu.title} title={<span>{menu.icon}<span>{menu.title}</span></span>}>
        {menu.child.map(menu => makeMenu(menu))}
      </Menu.SubMenu>
    )
  }

  // 返回選單項
  function _makeItem(menu) {
    return (
      <Menu.Item key={menu.path}>
        {menu.icon}
        <span>{menu.title}</span>
      </Menu.Item>
    )
  }
  // window.location.pathname 返回當前頁面的路徑或檔名
  // 例如 https://demo.spug.cc/host?name=pjl 返回 /host
  const tmp = window.location.pathname;
  const openKey = OpenKeysMap[tmp];
  // 如果是不存在的路徑（例如 /host9999），選單則無需選中
  if (openKey) {
    // 當前選中的選單項 key 陣列。
    selectedKey = tmp;
    // 更新子選單。`openKey 不是1` && `側邊欄展開` && 
    // if (openKey !== 1 && !props.collapsed && !openKeys.includes(openKey)) {
    //   setOpenKeys([...openKeys, openKey])
    // }
  }
  // 下面的className都僅僅讓樣式好看點,對功能沒有影響。
  return (
    // Sider：側邊欄，自帶預設樣式及基本功能，其下可巢狀任何元素，只能放在 Layout 中。
    // collapsed - 當前收起狀態。這裡設定為預設展開
    <Layout.Sider width={208} collapsed={props.collapsed} className={styles.sider}>
      {/* 圖示 */}
      <div className={styles.logo}>
        <img src={logo} alt="Logo" style={{ height: '30px' }} />
      </div>
      <div className={styles.menus} style={{ height: `${document.body.clientHeight - 64}px` }}>
        {/* 導航選單。使用的是`縮起內嵌選單` */}
        <Menu
          theme="dark"
          mode="inline"
          className={styles.menus}
          // 當前選中的選單項 key 陣列
          selectedKeys={[selectedKey]}
          // openKeys	當前展開的 SubMenu 選單項 key 陣列 string[]
          // openKeys={openKeys}
          // onOpenChange - SubMenu 展開/關閉的回撥
          // onOpenChange={setOpenKeys}
          // 路由切換。點選哪個導航，url和路由就會切換到該路勁
          onSelect={menu => history.push(menu.key)}>
          {/* 陣列中的 null 會被忽略 */}
          {menus.map(menu => makeMenu(menu))}
        </Menu>
      </div>
    </Layout.Sider>
  )
}

程式碼簡析：

模組返回一個側邊欄 <Layout.Sider>，裡面使用選單元件 Menu，Menu 中的 openKeys 和 onOpenChange 的邏輯有點凌亂，這裡將其註釋，對於切換選單沒有影響
menus 來自路由（routes.js），選單中的內容由 makeMenu() 返回
側邊欄預設展開，由父元件傳入的 collapsed 決定
OpenKeysMap 其中一個作用是，當你輸入的路徑不在選單中，選單項則無需選中

頭部

頭部元件比較簡單，分為三塊：左側導航伸縮控制區、通知區和使用者區。

點選使用者區個人中心，主體區域路由會跳轉。效果如下圖所示：

完整程式碼：

// spug\src\layout\Header.js

import React from 'react';
import { Link } from 'react-router-dom';
import { Layout, Dropdown, Menu, Avatar } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LogoutOutlined } from '@ant-design/icons';
import Notification from './Notification';
import styles from './layout.module.less';
import http from '../libs/http';
import history from '../libs/history';
import avatar from './avatar.png';

export default function (props) {
  // 退出
  function handleLogout() {
    // 跳轉到登入頁
    history.push('/');
    // 告訴後端退出登入
    http.get('/api/account/logout/')
  }


  const UserMenu = (
    <Menu>
      <Menu.Item>
        {/* 路由跳轉。主體區域對應路由是 `{ path: '/welcome/info', component: WelcomeInfo },` */}
        <Link to="/welcome/info">
          <UserOutlined style={{marginRight: 10}}/>個人中心
        </Link>
      </Menu.Item>
      <Menu.Divider/>
      <Menu.Item onClick={handleLogout}>
        <LogoutOutlined style={{marginRight: 10}}/>退出登入
      </Menu.Item>
    </Menu>
  );

  return (
    <Layout.Header className={styles.header}>
      {/* 收縮左側導航按鈕 */}
      <div className={styles.left}>
        {/* 點選觸發父元件的 toggle 方法 */}
        <div className={styles.trigger} onClick={props.toggle}>
          {/* 根據父元件的 collapsed 屬性顯示對應圖示*/}
          {props.collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
        </div>
      </div>
      {/* 通知 */}
      <Notification/>
      {/* 使用者區域 */}
      <div className={styles.right}>
        <Dropdown overlay={UserMenu} style={{background: '#000'}}>
          <span className={styles.action}>
            <Avatar size="small" src={avatar} style={{marginRight: 8}}/>
            {/* 登入後設定過的暱稱 */}
            {localStorage.getItem('nickname')}
          </span>
        </Dropdown>
      </div>
    </Layout.Header>
  )
}

主體區域

主體區域更簡單，就是一個元件（根據自己需求自行完成）。如果需要麵包屑，自行加上即可。有無麵包屑導航的效果如下圖所示：

主頁（/home）程式碼可以瀏覽下：

// spug\src\pages\home\index.js

function HomeIndex() {
  return (
    <div>
      {/* 麵包屑 */}
      <Breadcrumb>
        <Breadcrumb.Item>首頁</Breadcrumb.Item>
        <Breadcrumb.Item>工作臺</Breadcrumb.Item>
      </Breadcrumb>

      <Row gutter={12}>
        <Col span={16}>
          <NavIndex />
        </Col>
        <Col span={8}>
          <Row gutter={[12, 12]}>
            <Col span={24}>
              <TodoIndex />
            </Col>
            <Col span={24}>
              <NoticeIndex />
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  )
}

export default HomeIndex

myspug 系統佈局的實現

入口

在 App.js 中引入 Layout 元件，之前我們是一個佔位元件：

// myspug\src\App.js
-import HelloWorld from './HelloWord'
+import Layout from './layout'
 import { Switch, Route } from 'react-router-dom';

 // 定義一個類元件
class App extends Component {
       <Switch>
         <Route path="/" exact component={Login} />
         {/* 沒有匹配則進入 Layout */}
-        <Route component={HelloWorld} />
+        <Route component={Layout} />
       </Switch>
     );
}

Layout 中 index.js 程式碼如下：

// myspug\src\layout\index.js

import React, { useState, useEffect } from 'react';
import { Switch, Route } from 'react-router-dom';
import { Layout, message } from 'antd';
// 404 對應的元件
/*

//  myspug\src\compoments\index.js
import NotFound from './NotFound';

export {
    NotFound,
}

*/
import { NotFound } from '@/components';
// 側邊欄
import Sider from './Sider';
// 頭部
import Header from './Header';
// 頁尾。例如版權
import Footer from './Footer'

/*
引入路由。物件陣列，就像這樣：

[
  { icon: <DesktopOutlined />, title: '工作臺', path: '/home', component: HomeIndex },
  ...
  {
    icon: <AlertOutlined />, title: '報警中心', auth: 'alarm.alarm.view|alarm.contact.view|alarm.group.view', child: [
      { title: '報警歷史', auth: 'alarm.alarm.view', path: '/alarm/alarm', component: AlarmIndex },
      { title: '報警聯絡人', auth: 'alarm.contact.view', path: '/alarm/contact', component: AlarmContact },
      { title: '報警聯絡組', auth: 'alarm.group.view', path: '/alarm/group', component: AlarmGroup },
    ]
  },
  ...
]
*/
import routes from '../routes';
// hasPermission - 許可權判斷。本篇忽略，這裡直接返回 true; isMobile - 是否是手機
/*
export function hasPermission(strCode) {
    return true
}
// 基於檢測使用者代理字串的瀏覽器標識是不可靠的，不推薦使用，因為使用者代理字串是使用者可配置的
export const isMobile = /Android|iPhone/i.test(navigator.userAgent)

*/
import { hasPermission, isMobile } from '@/libs';

// 佈局樣式，直接複製 spug 中的樣式即可
import styles from './layout.module.less';

// 將 routes 中有許可權的路由提取到 Routes 中
function initRoutes(Routes, routes) {
  for (let route of routes) {
    // 葉子節點才有 component。沒有 child 則屬於葉子節點
    if (route.component) {
      // 如果不需要許可權，或有許可權則放入 Routes
      if (!route.auth || hasPermission(route.auth)) {
        Routes.push(<Route exact key={route.path} path={route.path} component={route.component} />)
      }
    } else if (route.child) {
      initRoutes(Routes, route.child)
    }
  }
}

export default function () {
  // 側邊欄收縮狀態。預設展開
  const [collapsed, setCollapsed] = useState(false)
  // 路由，預設是空陣列
  const [Routes, setRoutes] = useState([]);

  // 元件掛載後執行。相當於 componentDidMount()
  useEffect(() => {
    if (isMobile) {
      // 手機檢視時導航欄收起
      setCollapsed(true);
      message.warn('檢測到您在移動裝置上訪問，請使用橫屏模式。', 5)
    }

    // 注：重新宣告一個變數 Routes，比上文（useState 中的 Routes）的 Routes 作用域更小範圍
    const Routes = [];
    initRoutes(Routes, routes);
    setRoutes(Routes)
  }, [])

  return (
    // 此處 Layout 是 antd 佈局元件。和官方用法相同：
    /*
    <Layout>
      <Sider>Sider</Sider>
      <Layout>
        <Header>Header</Header>
        <Content>Content</Content>
        <Footer>Footer</Footer>
      </Layout>
    </Layout>
    */
    <Layout>

      {/* 左側區域，對 antd 中 Sider 的封裝 */}
      <Sider collapsed={collapsed} />
      {/* 內容高度不夠，版權資訊在底部；內容高度太高，則需要滾動才可檢視全部內容； */}
      <Layout style={{ height: '100vh' }}>
        {/* 頂部區域， 對 antd 中 Layout.Header 的封裝*/}
        <Header collapsed={collapsed} toggle={() => setCollapsed(!collapsed)} />
        <Layout.Content className={styles.content}>
          {/* 只渲染第一個路徑匹配的元件*/}
          <Switch>
            {/* 路由陣列。裡面每項類似這樣：<Route exact key={route.path} path='/home' component={HomeComponent}/> */}
            {Routes}
            {/* 沒有匹配則進入 NotFound */}
            <Route component={NotFound} />
          </Switch>
          {/* 系統底部展示。例如版權、官網、文件連結、倉庫連結*/}
          <Footer />
        </Layout.Content>
      </Layout>
    </Layout>
  )
}

在 routes.js 中定義3個路由，其中報警中心裡面有三個子選單，用同一個元件做佔位：

// myspug\src\routes.js

import React from 'react';
import {
    DesktopOutlined,
    AlertOutlined,
} from '@ant-design/icons';
/*
export default function HomeIndex() {
    return <div>我是主頁</div>
}
*/
import HomeIndex from './pages/home';
// 佔位效果
/*
export default function AlarmCenter() {
    return <div>報警中心佔位符 - {window.location.pathname}</div>
}
*/
import AlarmCenter from './pages/alarm/alarm';
// 個人中心
/*
export default function HomeIndex() {
    return <div>我是個人中心</div>
}
*/
import WelcomeInfo from './pages/welcome/info';

export default [
    { icon: <DesktopOutlined />, title: '工作臺', path: '/home', component: HomeIndex },
    {
        icon: <AlertOutlined />, title: '報警中心', auth: 'alarm.alarm.view|alarm.contact.view|alarm.group.view', child: [
          { title: '報警歷史', auth: 'alarm.alarm.view', path: '/alarm/alarm', component: AlarmCenter },
          { title: '報警聯絡人', auth: 'alarm.contact.view', path: '/alarm/contact', component: AlarmCenter },
          { title: '報警聯絡組', auth: 'alarm.group.view', path: '/alarm/group', component: AlarmCenter },
        ]
      },
    { path: '/welcome/info', component: WelcomeInfo },
]

Tip: <Footer> 元件直接複製 spug 中的

NotFound 程式碼如下：

// myspug\src\compoments\NotFound.js
import React from 'react';
// 複製 spug 中的內容
import styles from './index.module.less';

export default function NotFound() {
    return (
        <div className={styles.notFound}>
            <div className={styles.imgBlock}>
                <div className={styles.img} />
            </div>
            <div>
                <h1 className={styles.title}>404</h1>
                <div className={styles.desc}>抱歉，你訪問的頁面不存在</div>
            </div>
        </div>
    )
}

左側導航

// myspug\src\layout\Sider.js

import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import { hasPermission, history } from '@/libs';
import styles from './layout.module.less';
/*
物件陣列。就像這樣：

[
  { icon: <DesktopOutlined />, title: '工作臺', path: '/home', component: HomeIndex },
  ...
  {
    icon: <AlertOutlined />, title: '報警中心', auth: 'alarm.alarm.view|alarm.contact.view|alarm.group.view', child: [
      { title: '報警歷史', auth: 'alarm.alarm.view', path: '/alarm/alarm', component: AlarmIndex },
      { title: '報警聯絡人', auth: 'alarm.contact.view', path: '/alarm/contact', component: AlarmContact },
      { title: '報警聯絡組', auth: 'alarm.group.view', path: '/alarm/group', component: AlarmGroup },
    ]
  },
  ...
]
*/
import menus from '../routes';

import logo from './spug.png'

let selectedKey = window.location.pathname;
/*
選單對映。如果輸入不存在的路徑，那麼選單就不需要選中

{
/home: 1,                   // 一級選單
/dashboard: 1,              // 一級選單
...
/alarm/alarm: "報警中心",   // 二級選單
/alarm/contact: "報警中心", // 二級選單
/alarm/group: "報警中心",   // 二級選單
...
}
*/
const OpenKeysMap = {};

for (let item of menus) {
  if (item.child) {
    for (let sub of item.child) {
      // child 中的節點值為 item.title
      if (sub.title) OpenKeysMap[sub.path] = item.title
    }
  } else if (item.title) {
    // 一級節點的值是 1
    OpenKeysMap[item.path] = 1
  }
}

export default function Sider(props) {
  // 根據路由返回選單項或子選單。沒有許可權或沒有 title 返回 null
  function makeMenu(menu) {
    // 如果沒有許可權
    if (menu.auth && !hasPermission(menu.auth)) return null;
    // 沒有 title 返回 null
    if (!menu.title) return null;
    // 如果有 child 則呼叫 _makeSubMenu；沒有 child 則呼叫 _makeItem
    return menu.child ? _makeSubMenu(menu) : _makeItem(menu)
  }

  // 返回子選單
  function _makeSubMenu(menu) {
    return (
      <Menu.SubMenu key={menu.title} title={<span>{menu.icon}<span>{menu.title}</span></span>}>
        {menu.child.map(menu => makeMenu(menu))}
      </Menu.SubMenu>
    )
  }

  // 返回選單項
  function _makeItem(menu) {
    return (
      <Menu.Item key={menu.path}>
        {menu.icon}
        <span>{menu.title}</span>
      </Menu.Item>
    )
  }
  // window.location.pathname 返回當前頁面的路徑或檔名
  // 例如 https://demo.spug.cc/host?name=pjl 返回 /host
  const tmp = window.location.pathname;
  const openKey = OpenKeysMap[tmp];
  // 如果是不存在的路徑（例如 /host9999），選單則無需選中
  if (openKey) {
    // 當前選中的選單項 key 陣列。
    selectedKey = tmp;
  }
  // 下面的className都僅僅讓樣式好看點,對功能沒有影響。
  return (
    // Sider：側邊欄，自帶預設樣式及基本功能，其下可巢狀任何元素，只能放在 Layout 中。
    // collapsed - 當前收起狀態。這裡設定為預設展開
    <Layout.Sider width={208} collapsed={props.collapsed} className={styles.sider}>
      {/* 圖示 */}
      <div className={styles.logo}>
        <img src={logo} alt="Logo" style={{ height: '30px' }} />
      </div>
      <div className={styles.menus} style={{ height: `${document.body.clientHeight - 64}px` }}>
        {/* 導航選單。使用的是`縮起內嵌選單` */}
        <Menu
          theme="dark"
          mode="inline"
          className={styles.menus}
          // 當前選中的選單項 key 陣列
          selectedKeys={[selectedKey]}
          // 路由切換。點選哪個導航，url和路由就會切換到該路勁
          onSelect={menu => history.push(menu.key)}>
          {/* 陣列中的 null 會被忽略 */}
          {menus.map(menu => makeMenu(menu))}
        </Menu>
      </div>
    </Layout.Sider>
  )
}

頭部

Tip：通知暫不實現

程式碼如下：

// myspug\src\layout\Header.js

import React from 'react';
import { Link } from 'react-router-dom';
import { Layout, Dropdown, Menu, Avatar } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LogoutOutlined } from '@ant-design/icons';
//  `通知`暫不實現
//  import Notification from './Notification';
import styles from './layout.module.less';
import http from '../libs/http';
import history from '../libs/history';
import avatar from './avatar.png';

export default function (props) {
  // 退出
  function handleLogout() {
    // 跳轉到登入頁
    history.push('/');
    // 告訴後端退出登入
    http.get('/api/account/logout/')
  }

  const UserMenu = (
    <Menu>
      <Menu.Item>
        {/* 路由跳轉。主體區域對應路由是 `{ path: '/welcome/info', component: WelcomeInfo },` */}
        <Link to="/welcome/info">
          <UserOutlined style={{ marginRight: 10 }} />個人中心
        </Link>
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item onClick={handleLogout}>
        <LogoutOutlined style={{ marginRight: 10 }} />退出登入
      </Menu.Item>
    </Menu>
  );

  return (
    <Layout.Header className={styles.header}>
      {/* 收縮左側導航按鈕 */}
      <div className={styles.left}>
        {/* 點選觸發父元件的 toggle 方法 */}
        <div className={styles.trigger} onClick={props.toggle}>
          {/* 根據父元件的 collapsed 屬性顯示對應圖示*/}
          {props.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </div>
      </div>
      {/* 通知 */}
      <div>通知 todo</div>
      {/* <Notification/> */}
      {/* 使用者區域 */}
      <div className={styles.right}>
        <Dropdown overlay={UserMenu} style={{ background: '#000' }}>
          <span className={styles.action}>
            <Avatar size="small" src={avatar} style={{ marginRight: 8 }} />
            {/* 登入後設定過的暱稱 */}
            {localStorage.getItem('nickname')}
          </span>
        </Dropdown>
      </div>
    </Layout.Header>
  )
}

less 模組化樣式的配置

Tip: 樣式模組化的更多介紹請看這裡

目前 myspug 支援 index.module.css：

// 支援
import helloWorld from './index.module.css'

export default function HelloWorld() {
    return <div className={helloWorld.title}>hello world!</div>
}

卻不支援 .module.less 這種模組化的寫法：

// 不支援
import helloWorld from './index.module.less'

export default function HelloWorld() {
    return <div className={helloWorld.title}>hello world!</div>
}

你會發現 div 元素上的 class 是空的。

使其支援費了一些波折：

參考 spug\config-overrides.js 新增 addLessLoader() 報錯，修改 addLessLoader 新語法也報錯，將 less、less-loader更新至與 spug 中相同版本不行，安裝 postCss 報新錯
使用 antd 中自定義主題的方式成功跑起來，但按鈕總是綠色

最終解決方法如下：

 // config-overrides.js
-const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
+const { override, fixBabelImports, addWebpackAlias, addLessLoader, adjustStyleLoaders } = require('customize-cra');
 const path = require('path')
 module.exports = override(
     fixBabelImports('import', {
     module.exports = override(
     // 增加別名。避免 ../../ 相對路勁引入 libs/http
     addWebpackAlias({
         '@': path.resolve(__dirname, './src')
-    })
+    }),
+    // 解決
+    addLessLoader({
+        lessOptions: {
+            javascriptEnabled: true,
+            localIdentName: '[local]--[hash:base64:5]'
+        }
+    }),
+    // 網友`闔湖丶`的介紹，解決：ValidationError: Invalid options object. PostCSS Loader has been initialized...
+    adjustStyleLoaders(({ use: [, , postcss] }) => {
+        const postcssOptions = postcss.options;
+        postcss.options = { postcssOptions };
+    }),
 );

效果驗證

最終效果：

登入成功預設進入主頁
點選報警歷史，url 切換為 /alarm/alarm，選單選中項更新，同時主體區域顯示對應資訊
滑鼠移至管理員，點選個人中心，url切換，選單選中項不變，同時主體區域顯示對應資訊
對於不存在的 url ，內容區域會顯示 404 的效果，同時選單選中項會清空

其他章節請看：

react 高效高質量搭建後臺系統系列

react 高效高質量搭建後臺系統系列 —— 登入
2023-01-13
React
react 高效高質量搭建後臺系統系列 —— 腳手架搭建
2022-12-22
React
react 高效高質量搭建後臺系統系列 —— 表格的封裝
2023-02-11
React封裝
react 高效高質量搭建後臺系統系列 —— 請求資料
2023-01-04
React
react 高效高質量搭建後臺系統系列 —— 前端許可權
2023-02-16
React前端
使用React + Antd 搭建部落格後臺系統
2019-03-04
React
lightCMS - 輕量級 CMS 系統，通用後臺管理系統
2019-03-22
系統質量治理
2021-06-24
使用Vue搭建電商後臺管理系統
2018-07-20
Vue
Laravel + H-ui 搭建後臺管理系統
2019-05-21
LaravelUI
Laravel 後臺系統
2019-11-13
Laravel
後臺管理系統
2024-09-29
前端內功修煉：5大主流佈局系統進階，系統進階佈局技術
2024-09-04
前端
abtest-system後臺系統設計與搭建
2018-09-07
SSM-框架搭建-tank後臺學習系統
2020-06-22
SSM框架
睡眠質量預測系統
2024-03-28
Android系統修改之Notification佈局修改
2018-10-09
Android
元宇宙系統的發展佈局
2022-06-28
元宇宙
react後臺管理系統路由方案及react-router原理解析
2020-06-09
React路由
高質量的教育平臺原始碼對教育系統開發後期運營的好處
2020-12-14
原始碼
搭建高併發、高可用的系統
2021-01-18
LaraCMS 後臺管理系統
2018-03-19
ACM
Thinkphp後臺管理系統
2019-05-11
PHP
AlphaCms後臺管理系統
2019-05-11
ACM
ITKEE後臺管理系統
2019-05-11
如何高效搭建線上教育系統？
2024-12-08
NQI質量基礎設施一站式服務系統平臺搭建
2021-11-25
基於 vue-element-admin 高效開發後臺管理系統
2019-12-17
Vue
保姆級別的vue + ElementUI 搭建後臺管理系統教程
2021-11-19
VueUI
質量基礎設施一站式服務平臺建設,NQI高質量提升系統開發
2022-01-20
NQI質量基礎設施一站式服務平臺建設，高質量提升系統開發
2022-01-28
網站後臺管理系統
2019-05-11
網站
adminkit 後臺管理系統模型
2019-01-01
模型
Milvus 2.0 質量保障系統詳解
2022-04-25
Dcat Admin - 一款顏值極高的後臺系統構建工具，簡單而高效
2020-03-30
質量基礎設施“一站式”服務系統開發，NQI平臺搭建
2021-10-12
NFT流動性挖礦系統開發 | DeFi質押模式系統搭建
2023-09-21
模式
基於Vue + Antd 搭建自己的部落格後臺管理系統
2019-04-07
Vue

react 高效高質量搭建後臺系統 系列 —— 系統佈局

系統佈局

spug 中系統佈局的分析

入口

左側導航

頭部

主體區域

myspug 系統佈局的實現

入口

左側導航

頭部

less 模組化樣式的配置

效果驗證

相關文章

react 高效高質量搭建後臺系統系列 —— 系統佈局