From edf5708b42e3f4d7e6968c78601996afa9b53dde Mon Sep 17 00:00:00 2001
From: dark <dark.lijin@gmail.com>
Date: Sat, 22 Jun 2024 17:47:51 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9A=90=E8=97=8F=E6=B2=A1=E6=9C=89=E4=BA=8C?=
 =?UTF-8?q?=E7=BA=A7=E8=8F=9C=E5=8D=95=E6=97=B6=E7=9A=84dom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/RootLayout.tsx | 87 +++++++++++++++++++++++++----------------------
 1 file changed, 46 insertions(+), 41 deletions(-)

diff --git a/src/layout/RootLayout.tsx b/src/layout/RootLayout.tsx
index b81afb4..b137fcc 100644
--- a/src/layout/RootLayout.tsx
+++ b/src/layout/RootLayout.tsx
@@ -18,6 +18,7 @@ import type { MenuDataItem } from '@ant-design/pro-layout/es/typing'
 import { convertToMenu, flattenTree } from '@/utils'
 import { Flex, Menu, Space } from 'antd'
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
+import { If } from 'react-if'
 
 //根据menuData生成Breadcrumb所需的数据
 const getBreadcrumbData = (menuData: MenuItem[], pathname: string) => {
@@ -186,49 +187,53 @@ export default () => {
                           }
                   >
 
-                    <Flex className={styles.childMenus}>
-                      {
-                              !collapsed && <div className={styles.childMenuTop}>
-                                <h2>{currentMenu?.title}</h2>
-                              </div>
-                      }
-
-                      <Menu
-                              mode={'inline'}
-                              inlineCollapsed={collapsed}
-                              selectedKeys={[ location.pathname ]}
-                              openKeys={openMenuKeys}
-                              onOpenChange={(keys) => {
-                                setOpenKeys(keys)
-                              }}
-                              onClick={(menu) => {
-                                const info = menusFlatten.current?.find(item => item.path === menu.key)
-                                if (info) {
-                                  setOpenKeys([ info.path as string ])
-                                  navigate({
-                                    to: info.path,
-                                  })
-                                }
-
-                              }}
-                              items={convertToMenu((childMenuRef.current || []), (item => {
-                                return {
-                                  ...item,
-                                  key: item.path,
-                                  label: item.title,
-                                }
-                              })) as any}
-                              style={!collapsed ? { width: 210 } : {}}
-                      />
-                      <div className={styles.childMenuBottom}
-                           onClick={() => {
-                             setCollapsed(!collapsed)
-                           }}>
+                    <If condition={childMenuRef.current?.length > 0}>
+                      <Flex className={styles.childMenus}>
                         {
-                          collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>
+                                !collapsed && <div className={styles.childMenuTop}>
+                                  <h2>{currentMenu?.title}</h2>
+                                </div>
                         }
-                      </div>
-                    </Flex>
+
+
+                        <Menu
+                                mode={'inline'}
+                                inlineCollapsed={collapsed}
+                                selectedKeys={[ location.pathname ]}
+                                openKeys={openMenuKeys}
+                                onOpenChange={(keys) => {
+                                  setOpenKeys(keys)
+                                }}
+                                onClick={(menu) => {
+                                  const info = menusFlatten.current?.find(item => item.path === menu.key)
+                                  if (info) {
+                                    setOpenKeys([ info.path as string ])
+                                    navigate({
+                                      to: info.path,
+                                    })
+                                  }
+
+                                }}
+                                items={convertToMenu((childMenuRef.current || []), (item => {
+                                  return {
+                                    ...item,
+                                    key: item.path,
+                                    label: item.title,
+                                  }
+                                })) as any}
+                                style={!collapsed ? { width: 210 } : {}}
+                        />
+                        <div className={styles.childMenuBottom}
+                             onClick={() => {
+                               setCollapsed(!collapsed)
+                             }}>
+                          {
+                            collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>
+                          }
+                        </div>
+                      </Flex>
+                    </If>
+
                     <Flex flex={1} className={styles.body} aria-description={'main-body'} vertical={true}>
                       <div className={styles.bodyHeader}>
                         <PageBreadcrumb