后台 layout样式调整

src/pages/layout/index.tsx

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

src/pages/layout/style.less

@@ -1,16 +1,56 @@
 .header {
     width: 100%;
-    height: 50px;
-    padding: 0 20px;
+    height: 64px;
+    padding: 0 24px;
     background: #FFFFFF;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    border-bottom: 1px solid #f0f0f0;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+
+
+    &-nav {
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        margin-left: 40px;
+
+        &-item {
+            color: #666;
+            font-weight: 500;
+            position: relative;
+            transition: color 0.3s;
+
+            &:hover {
+                color: @primary-color;
+            }
+
+            &.active {
+                color: @primary-color;
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -22px;
+                    left: 0;
+                    right: 0;
+                    height: 2px;
+                    background: @primary-color;
+                }
+            }
+        }
+    }
 
     &-logo {
         display: flex;
         align-items: center;
         cursor: pointer;
+        margin-right: 40px;
 
         &-picture {
             width: 30px;
@@ -55,8 +95,14 @@
 
 .nav {
     width: 200px !important;
-    height: calc(100vh - 50px) !important;
+    height: calc(100vh - 64px) !important;
     background: #FFFFFF !important;
+    border-right: 1px solid #f0f0f0;
+    box-shadow: 1px 0 4px rgba(0, 0, 0, 0.05);
+    position: fixed;
+    top: 64px;
+    left: 0;
+    z-index: 999;
 
     &-menu {
         width: 100%;
@@ -77,23 +123,29 @@
 .breadcrumb {
     width: 100%;
     height: 48px;
-    padding: 20px;
+    padding: 18px 20px;
     background: @background-color;
     display: flex;
     align-items: center;
+    position: fixed;
+    top: 64px;
+    left: 200px;
+    z-index: 900;
+    margin-left: 0;
 }
 
+
 .content {
-    width: 100%;
-    height: 100%;
-    padding: 0 20px 20px 20px;
+    min-height: calc(100vh - 48px);
+    //padding: 20px;
     background: @background-color;
-    overflow: auto;
+    overflow-y: auto;
+    margin-top: 48px;
 }
 
 .model-selector-modal {
     .ant-modal-body {
-        padding: 24px;
+        padding: 20px;
     }
 }