Prechádzať zdrojové kódy

修改了一些样式兼容

Ryuiso 3 mesiacov pred
rodič
commit
9df68c4a01

+ 0 - 142
src/pages/layout/components/NavDeepSeek.tsx

@@ -1,142 +0,0 @@
-import * as React from 'react';
-import { Layout, Menu, Button, Select } from 'antd';
-import {
-    RobotOutlined,
-    ReadOutlined,
-    FileSearchOutlined,
-    MenuFoldOutlined,
-    MenuUnfoldOutlined
-} from '@ant-design/icons';
-import router from '@/router';
-import { JSX } from 'react/jsx-runtime';
-
-const Sider = Layout.Sider;
-const { Option } = Select;
-
-interface MenuItem {
-    key: string;
-    icon: JSX.Element;
-    label: string;
-    onClick: () => void;
-}
-
-interface Props {
-    selectedKey: string,
-    onChangeSelectedKey: (path: string, menuLevel: number) => void,
-    openKeys: string[],
-    onOpenChange: (openKeys: string[]) => void,
-    collapsed: boolean,
-    onClickCollapsed: () => void,
-};
-
-const Nav: React.FC<Props> = (props: Props) => {
-
-    const {
-        selectedKey,
-        onChangeSelectedKey,
-        openKeys,
-        onOpenChange,
-        collapsed,
-        onClickCollapsed
-    } = props;
-
-    const dsItems: MenuItem[] = [
-        {
-            key: '/deepseek/questionAnswer',
-            icon: <RobotOutlined />,
-            label: 'DeepSeek问答应用',
-            onClick: () => { router.navigate({ pathname: '/deepseek/questionAnswer' }) }
-        },
-        {
-            key: '/deepseek/knowledgeLib',
-            icon: <ReadOutlined />,
-            label: 'DeepSeek知识库',
-            onClick: () => { router.navigate({ pathname: '/deepseek/knowledgeLib' }) }
-        },
-        {
-            key: '/deepseek/dataExport',
-            icon: <FileSearchOutlined />,
-            label: 'DeepSeek数据导出',
-            onClick: () => { router.navigate({ pathname: '/deepseek/dataExport' }) }
-        },
-    ];
-
-    // const zpItems: MenuItem[] = [
-    //     {
-    //         key: '/zhipu/questionAnswer',
-    //         icon: <RobotOutlined />,
-    //         label: '问答应用',
-    //         onClick: () => { router.navigate({ pathname: '/zhipu/questionAnswer' }) }
-    //     },
-    //     {
-    //         key: '/zhipu/knowledgeLib',
-    //         icon: <ReadOutlined />,
-    //         label: '知识库',
-    //         onClick: () => { router.navigate({ pathname: '/zhipu/knowledgeLib' }) }
-    //     },
-    //     {
-    //         key: '/zhipu/dataExport',
-    //         icon: <FileSearchOutlined />,
-    //         label: '数据导出',
-    //         onClick: () => { router.navigate({ pathname: '/zhipu/dataExport' }) }
-    //     }
-    // ];
-
-    const [items, setItems] = React.useState<MenuItem[]>(dsItems);
-    // const [selectedFruit, setSelectedFruit] = React.useState(1); // 默认选中
-
-    const fruits = [
-        { id: 1, name: 'DeepSeek' },
-        { id: 2, name: '智谱' },
-    ];
-
-    // const onChange = (value: number) => {
-    //     console.log(value, 'value');
-    //     if (value === 1) {
-    //         setSelectedFruit(1);
-    //         setItems(dsItems);
-    //         router.navigate({ pathname: '/deepseek/questionAnswer' });
-    //     } else {
-    //         setSelectedFruit(2);
-    //         setItems(zpItems);
-    //         router.navigate({ pathname: '/zhipu/questionAnswer' });
-    //     }
-    // };
-
-    React.useEffect(() => {
-        router.navigate({ pathname: '/deepseek/questionAnswer' });
-    }, []);
-
-
-    return (
-        <Sider
-            className='nav'
-            collapsed={collapsed}
-        >
-            <div className='nav-menu'>
-                <Menu
-                    mode='inline'
-                    selectedKeys={[selectedKey]}
-                    onSelect={(item) => {
-                        const menuLevel = item.keyPath.length > 1 ? 2 : 1;
-                        onChangeSelectedKey(item.key, menuLevel);
-                    }}
-                    openKeys={openKeys}
-                    onOpenChange={(keys) => {
-                        // 点击菜单,收起其他展开的所有菜单
-                        const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
-                        onOpenChange(latestOpenKey ? [latestOpenKey] : []);
-                    }}
-                    items={items}
-                />
-            </div>
-            <div className='nav-bottom'>
-                <Button type='primary' onClick={onClickCollapsed}>
-                    {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-                </Button>
-            </div>
-        </Sider>
-    );
-};
-
-export default Nav;

+ 6 - 3
src/pages/layout/index.tsx

@@ -85,7 +85,8 @@ const LayoutApp : React.FC = () => {
         minHeight: '100vh',
         overflow: 'auto',
         display: 'flex',
-        flexDirection: 'column'
+        flexDirection: 'column',
+        backgroundColor: '#fff'
       } }>
         <Header
             userName={ userName }
@@ -93,7 +94,7 @@ const LayoutApp : React.FC = () => {
             onSelectChange={ handleSelectChange } // 传递回调函数
             currentMenuType={ menuType }
         />
-        <div style={ { display: 'flex', marginTop: '64px' } }>
+        <div style={ { display: 'flex', marginTop: '64px', backgroundColor: '#fff' } }>
           <Nav
               selectedKey={ selectedKey }
               onChangeSelectedKey={ onChangeSelectedKey }
@@ -118,7 +119,9 @@ const LayoutApp : React.FC = () => {
                     :
                     <Breadcrumb routerMatchList={ routerMatchList } />
               }
-              <Outlet />
+              <div className='content-scroll-area'>
+                <Outlet />
+              </div>
             </Content>
           </Layout>
         </div>

+ 28 - 4
src/pages/layout/style.less

@@ -143,17 +143,28 @@
 
 .main-content {
     //max-height: calc(100vh - 64px);
-    overflow-y: auto;
-    position: relative;
     padding-bottom: 40px;
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 114px); /* 减去Header(64px)和面包屑(50px) */
+    background: #fff;
 
-    .breadcrumb {
+    .breadcrumb-container {
         width: 100%;
         height: 50px;
-        //line-height: 14px;
         padding: 16px 20px;
+        display: flex;
+        justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid #f0f0f0;
+        background: #fff;
+        position: sticky;
+        top: 0;
+        z-index: 10;
+    }
+
+    .breadcrumb {
+        flex: 1;
         font-weight: 600;
         .ant-breadcrumb-link {
             a {
@@ -163,7 +174,20 @@
                 }
             }
         }
+    }
 
+    .breadcrumb-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    /* 内容区域滚动 */
+    .content-scroll-area {
+        flex: 1;
+        overflow-y: auto;
+        background: #fff;
+        position: relative;
     }
 }