dros/src/layouts/BasicLayout.tsx

// BasicLayout.tsx
import React, { useState } from 'react';
import { Layout, Row, Col, ConfigProvider, Image } from 'antd';
import { TabBar } from 'antd-mobile';
import logo from '../assets/imgs/logo-v3.jpg';
import NavbarFloat from './NavbarFloat';
import NavMenu from './NavMenu';
import StatusBar, { StatusBarProps } from './StateBar';
import AboutPage from '@/pages/demo/AboutPage';
import HomePage from '@/pages/demo/HomePage';
import RegisterPage from '@/pages/patient/register';
import WorklistPage from '@/pages/patient/worklist';
import HistorylistPage from '@/pages/patient/HistoryList';
import ArchivelistPage from '@/pages/patient/ArchiveList';
import BinPage from '@/pages/patient/Bin';
import OutputlistPage from '@/pages/patient/OutputList';

// import { Link } from 'react-router-dom';
// import { MenuOutlined } from '@ant-design/icons';

// const { Content, Footer } = Layout;

interface BasicLayoutProps {
  children: React.ReactNode;
}
// //自定义breakpoint
// const breakpoint = {
//   xs: 480,  // 小屏幕设备（手机）
//   sm: 576,  // 中小屏幕设备（平板）
//   md: 768,  // 中等屏幕设备（小桌面显示器）
//   lg: 992,  // 大屏幕设备（桌面显示器）
//   xl: 1200, // 超大屏幕设备（大桌面显示器）
//   xxl: 1600 // 超超大屏幕设备（超大桌面显示器）
// };

const BasicLayout: React.FC<BasicLayoutProps> = () => {
  const status: StatusBarProps = {
    diskStatus: 'available', // 可用状态
    batteryLevel: 0,
    wifiStrength: 0,
    heatCapacity: 0,
  };
  //使用key state更新整个basic layout ，用于加载新的内容组件
  const [currentKey, setCurrentKey] = useState('register');
  // key和内容组件的映射
  const contentMap = {
    sub2: <AboutPage />,
    process: <HomePage />,
    register: <RegisterPage />,
    worklist: <WorklistPage />,
    historylist: <HistorylistPage />,
    archivelist: <ArchivelistPage />,
    bin: <BinPage />,
    outputlist: <OutputlistPage />,
  };
  //感知菜单项点击
  const handleMenuClick = (key: string) => {
    setCurrentKey(key);
  };
  return (
    // ConfigProvider 用于自定义 Ant Design 的主题和 breakpoints
    <ConfigProvider
      theme={
        {
          // token: {
          //   // 自定义屏幕尺寸断点，与要求匹配
          //   screenXS: 576, // xs: <576px
          //   screenSM: 768, // sm: ≥768px
          //   screenMD: 992, // md: ≥992px
          //   screenLG: 1200, // lg: ≥1200px
          //   screenXL: 1400, // xl: ≥1400px
          //   screenXXL: 1600, // xxl: ≥1600px
          // },
        }
      }
    >
      <Layout
        style={{ minHeight: '100vh', border: '1px solid #ccc' }}
        className="h-[100vh] xl:text-[48px] lg:text-[40px] md:text-[30px] sm:text-[20px] xs:text-[15px]"
      >
        {/* 第一行：品牌和状态区域 */}
        <Row className="xl:h-[9vh] text-[100%]">
          {/* 品牌区域 */}
          <Col xl={4} lg={4} md={5} sm={0} xs={0} className="h-full">
            <Image src={logo} alt="Logo" height={'100%'} />
          </Col>
          {/* 状态区域 */}
          <Col
            xl={20}
            lg={20}
            md={19}
            sm={0}
            xs={0}
            className="items-center 
                                    justify-end xl:flex 
                                    lg:flex 
                                    md:flex 
                                    sm:hidden 
                                    xs:hidden 
                                    h-full 
                                    text-[100%]"
          >
            {/* text-[100%] 用于传导父元素的字体大小，最终影响图标大小 */}
            <StatusBar
              diskStatus={status.diskStatus}
              batteryLevel={status.batteryLevel}
              wifiStrength={status.wifiStrength}
              heatCapacity={status.heatCapacity}
            />
          </Col>
        </Row>
        {/* 第二行：导航区域（第1列）和内容区域（第2列） */}
        <Row
          style={{
            flex: 1,
            display: 'flex',
            border: '1px solid red',
          }}
          className="xxl:h-[90vh] xl:h-[90vh] lg:h-[90vh] md:h-[90vh] sm:h-[90vh] xs:h-[90vh]"
        >
          {/* 导航区域 */}
          <Col xl={4} lg={4} md={0} sm={0} xs={0} style={{ flex: 1 }}>
            <NavMenu onMenuClick={handleMenuClick} />
          </Col>
          {/* 内容区域 */}
          <Col
            xl={20}
            lg={20}
            xs={24}
            md={24}
            sm={24}
            style={{ flex: 1, border: '1px solid blue' }}
            className="h-full"
          >
            {/* {children} */}
            {contentMap[currentKey]}
          </Col>
        </Row>
        {/* Tabbar：固定在底部，仅在手机屏幕显示 */}
        <div className="sticky bottom-0 w-full bg-red xl:hidden">
          <TabBar className="xl:hidden lg:hidden md:hidden sm:block xs:block">
            <TabBar.Item
              className="text-red-500"
              title="患者管理"
              key="home"
              icon={<div>🏠</div>}
            />
            <TabBar.Item
              className="text-red-500"
              title="检查"
              key="profile"
              icon={<div>👤</div>}
            />
            <TabBar.Item
              className="text-red-500"
              title="急诊"
              key="emergency"
              icon={<div>⚙️</div>}
            />
            <TabBar.Item
              className="text-red-500"
              title="图像处理"
              key="image-handling"
              icon={<div>⚙️</div>}
            />
            <TabBar.Item
              className="text-red-500"
              title="打印"
              key="print"
              icon={<div>⚙️</div>}
            />
          </TabBar>
        </div>
        <NavbarFloat
          className="fixed hidden sm:hidden xs:hidden md:block lg:hidden xl:hidden"
          position="right"
        />
      </Layout>
    </ConfigProvider>
  );
};

export default BasicLayout;