优化了layout 布局中的冗余样式

src/pages/layout/index.tsx

@@ -10,9 +10,9 @@ import store from './store';
 import LocalStorage from '@/LocalStorage';
 import './style.less';
 
-const {Content} = Layout;
+const { Content } = Layout;
 
-const LayoutApp: React.FC = () => {
+const LayoutApp : React.FC = () => {
   const navigate = useNavigate(); // 添加useNavigate hook
   const {
     state,
@@ -30,114 +30,111 @@ const LayoutApp: React.FC = () => {
     selectedKey,
     openKeys,
   } = state;
-
+  
   const matches = useMatches();
   const location = useLocation();
-
-  React.useEffect(() => {
-    const list = matches.filter((item: any) => item.handle?.menuLevel && item.handle?.breadcrumbName).map((item: any) => {
+  
+  React.useEffect( () => {
+    const list = matches.filter( ( item : any ) => item.handle?.menuLevel && item.handle?.breadcrumbName ).map( ( item : any ) => {
       return {
         path: item.pathname,
         menuLevel: item.handle.menuLevel,
         breadcrumbName: item.handle.breadcrumbName,
       }
-    });
-    init(list);
-  }, [ matches ]);
-
+    } );
+    init( list );
+  }, [ matches ] );
+  
   const currentMenuType = LocalStorage.getMenuType();
-  const [ entryModalOpen, setEntryModalOpen ] = React.useState(false);
-
-  React.useEffect(() => {
+  const [ entryModalOpen, setEntryModalOpen ] = React.useState( false );
+  
+  React.useEffect( () => {
     if ( currentMenuType === 0 ) {
-      setEntryModalOpen(true);
+      setEntryModalOpen( true );
     }
     return () => reset();
-  }, []);
-
+  }, [] );
+  
   // 统一管理菜单类型状态
-  const [ menuType, setMenuType ] = React.useState(currentMenuType || (location.pathname.startsWith('/deepseek') ? 1 : 2));
-
+  const [ menuType, setMenuType ] = React.useState( currentMenuType || ( location.pathname.startsWith( '/deepseek' ) ? 1 : 2 ) );
+  
   // 处理菜单类型变化
-  const handleSelectChange = (value: number) => {
-    setMenuType(value);
+  const handleSelectChange = ( value : number ) => {
+    setMenuType( value );
     const defaultPath = value === 1 ? '/deepseek/questionAnswer' : '/questionAnswer';
     // 使用navigate进行路由跳转
-    navigate(defaultPath);
+    navigate( defaultPath );
     // 同时更新selectedKey
-    onChangeSelectedKey(defaultPath, 1);
+    onChangeSelectedKey( defaultPath, 1 );
   };
-
+  
   // 添加路由变化监听
-  React.useEffect(() => {
+  React.useEffect( () => {
     const path = location.pathname;
-    const type = path.startsWith('/deepseek') ? 1 : 2;
-    setMenuType(type);
-
+    const type = path.startsWith( '/deepseek' ) ? 1 : 2;
+    setMenuType( type );
+    
     // 确保selectedKey与当前路由同步
     if ( path !== selectedKey ) {
-      onChangeSelectedKey(path, 1);
+      onChangeSelectedKey( path, 1 );
     }
-  }, [ location.pathname ]);
-
+  }, [ location.pathname ] );
+  
   return (
-      <Layout style={{
+      <Layout style={ {
         minHeight: '100vh',
         overflow: 'auto',
         display: 'flex',
         flexDirection: 'column'
-      }}>
-        <div>
-          <Header
-              userName={userName}
-              onClickLogout={onClickLogout}
-              onSelectChange={handleSelectChange} // 传递回调函数
-              currentMenuType={menuType}
-          />
-        </div>
-        <Layout>
+      } }>
+        <Header
+            userName={ userName }
+            onClickLogout={ onClickLogout }
+            onSelectChange={ handleSelectChange } // 传递回调函数
+            currentMenuType={ menuType }
+        />
+        <div style={ { display: 'flex', marginTop: '64px' } }>
           <Nav
-              selectedKey={selectedKey}
-              onChangeSelectedKey={onChangeSelectedKey}
-              openKeys={openKeys}
-              onOpenChange={onOpenChange}
-              collapsed={collapsed}
-              onClickCollapsed={onClickCollapsed}
-              menuType={menuType}
+              selectedKey={ selectedKey }
+              onChangeSelectedKey={ onChangeSelectedKey }
+              openKeys={ openKeys }
+              onOpenChange={ onOpenChange }
+              collapsed={ collapsed }
+              onClickCollapsed={ onClickCollapsed }
+              menuType={ menuType }
           />
-          <Layout style={{
-            marginTop: '64px',
+          <Layout style={ {
             marginLeft: collapsed ? '80px' : '200px',
             width: collapsed ? 'calc(100% - 80px)' : 'calc(100% - 200px)',
             backgroundColor: '#fff',
             minHeight: 'calc(100vh - 64px)',
             transition: 'all 0.2s ease'
-          }}>
-
+          } }>
+            
             <Content className='main-content'>
               {
                 location.pathname === '/404' ?
-                    <div style={{width: '100%', height: 20}}></div>
+                    <div style={ { width: '100%', height: 20 } }></div>
                     :
-                    <Breadcrumb routerMatchList={routerMatchList} />
+                    <Breadcrumb routerMatchList={ routerMatchList } />
               }
-              <Outlet></Outlet>
+              <Outlet />
             </Content>
           </Layout>
-        </Layout>
+        </div>
         {
             entryModalOpen &&
             <EntryModal
-                open={entryModalOpen}
-                onClickConfirm={(type) => {
-                  handleSelectChange(type);
-                  setEntryModalOpen(false);
-                  LocalStorage.setMenuType(type);
-                }}
+                open={ entryModalOpen }
+                onClickConfirm={ ( type ) => {
+                  handleSelectChange( type );
+                  setEntryModalOpen( false );
+                  LocalStorage.setMenuType( type );
+                } }
             />
         }
       </Layout>
   );
 };
 
-export default observer(LayoutApp);
+export default observer( LayoutApp );