chat-admin-web/src/pages/layout/components/Nav.tsx

import * as React from 'react';
import { Layout, Menu, Button } from 'antd';
import {
  RobotOutlined,
  ReadOutlined,
  FileSearchOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  CheckSquareOutlined
} from '@ant-design/icons';
import router from '@/router';
import { JSX } from 'react/jsx-runtime';
import LocalStorage from '@/LocalStorage';

const Sider = Layout.Sider;

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,
  menuType : number; // 新增 prop
};

const Nav : React.FC<Props> = ( props : Props ) => {
  
  const {
    selectedKey,
    onChangeSelectedKey,
    openKeys,
    onOpenChange,
    collapsed,
    onClickCollapsed,
    menuType
  } = props;
  
  const dsItems : MenuItem[] = [
    {
      key: '/deepseek/questionAnswer',
      icon: <RobotOutlined />,
      label: '应用广场',
      onClick: () => {
        router.navigate( { pathname: '/deepseek/questionAnswer' } )
      }
    },
    {
      key: '/deepseek/knowledgeLib',
      icon: <ReadOutlined />,
      label: '知识库',
      onClick: () => {
        router.navigate( { pathname: '/deepseek/knowledgeLib' } )
      }
    },
    {
      key: '/deepseek/dataExport',
      icon: <FileSearchOutlined />,
      label: '数据导出',
      onClick: () => {
        router.navigate( { pathname: '/deepseek/dataExport' } )
      }
    },
    {
      key: '/deepseek/audit',
      icon: <CheckSquareOutlined />,
      label: '应用审核',
      onClick: () => {
        router.navigate( { pathname: '/deepseek/audit' } )
      }
    },
  ].filter( item => {
    if ( item.key === '/deepseek/questionAnswer' ) {
      return LocalStorage.getStatusFlag( 'deepseek:application:list' );
    }
    if ( item.key === '/deepseek/knowledgeLib' ) {
      return LocalStorage.getStatusFlag( 'deepseek:knowledge:list' );
    }
    if ( item.key === '/deepseek/dataExport' ) {
      return LocalStorage.getStatusFlag( 'deepseek:dialog:list' );
    }
    if ( item.key === '/deepseek/audit' ) {
      return LocalStorage.getStatusFlag( 'system:audit:list' );
    }
    return true; // 其他菜单默认显示
  } );
  
  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 = menuType === 1 ? dsItems : zpItems;
  
  React.useEffect( () => {
    // 当selectedKey变化时，确保路由同步
    if ( selectedKey && !window.location.pathname.startsWith( selectedKey ) ) {
      router.navigate( selectedKey );
    }
  }, [ selectedKey ] );
  
  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;