import React, { useState } from 'react';
import { Outlet } from 'react-router-dom';
import { AppMenu } from './AppMenu';
import { Layout, LayoutContent, Main } from '@/components/ui/layout';
import Header from './components/Header';

/**
 * 基础布局组件
 * 
 * 重构改进：
 * 1. 移除菜单加载逻辑（已在 main.tsx 中预加载）
 * 2. 移除 window.location.reload() 刷新逻辑
 * 3. 拆分组件（Header、TimeWeather、UserPanel）
 * 4. 简化代码，提升可维护性
 */
const BasicLayout: React.FC = () => {
  const [openKeys, setOpenKeys] = useState<string[]>([]);

  // 处理菜单展开/收起
  const handleOpenChange = (keys: string[]) => {
    setOpenKeys(keys);
  };

  return (
    <Layout>
      <AppMenu openKeys={openKeys} onOpenChange={handleOpenChange} />
      <LayoutContent>
        <Header />
        <Main className="bg-white">
          <Outlet />
        </Main>
      </LayoutContent>
    </Layout>
  );
};

export default BasicLayout;