完善状态栏效果；调整状态区域隐藏与显示的条件

src/layouts/BasicLayout.tsx

@@ -7,6 +7,7 @@ import { TabBar } from 'antd-mobile';
 import logo from '../assets/imgs/logo-v3.jpg';
 import NavbarFloat from './NavbarFloat';
 import NavMenu from './NavMenu';
+import StatusBar, { StatusBarProps,DiskStatusType } from './StateBar';
 
 // import { Link } from 'react-router-dom';
 // import { MenuOutlined } from '@ant-design/icons';
@@ -27,6 +28,12 @@ interface BasicLayoutProps {
 // };
 
 const BasicLayout: React.FC<BasicLayoutProps> = ({ children }) => {
+    const status: StatusBarProps = {
+        diskStatus: 'available', // 可用状态
+        batteryLevel: 0,
+        wifiStrength: 0,
+        heatCapacity: 0
+    };
     return (
         // ConfigProvider 用于自定义 Ant Design 的主题和 breakpoints
         <ConfigProvider
@@ -50,8 +57,14 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({ children }) => {
                         <Image src={logo} alt="Logo" style={{ width: '100%' }} />
                     </Col>
                     {/* 状态区域 */}
-                    <Col xl={20} lg={20} md={19} sm={0} >
-                        <div style={{ backgroundColor: 'green', height: '100%' }}>Column 2</div>
+                    <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 '>
+                        <StatusBar
+                            diskStatus={status.diskStatus}
+                            batteryLevel={status.batteryLevel}
+                            wifiStrength={status.wifiStrength}
+                            heatCapacity={status.heatCapacity}
+                        />
                     </Col>
                 </Row>
                 {/* 第二行：导航区域（第1列）和内容区域（第2列） */}

src/layouts/StateBar.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Space, Tooltip } from 'antd';
+import { HddOutlined, WifiOutlined, FireOutlined, BarChartOutlined } from '@ant-design/icons';
+
+// 定义状态类型
+interface StatusBarProps {
+  diskStatus: 'available' | 'warning' | 'unavailable'; // 磁盘状态
+  batteryLevel: number; // 电量（0-100）
+  wifiStrength: 0 | 1 | 2 | 3 | 4; // WiFi 信号强度
+  heatCapacity: number; // 热容（0-100）
+}
+
+// 磁盘状态组件
+const DiskStatus: React.FC<{ status: StatusBarProps['diskStatus'] }> = ({ status }) => {
+  let color: string;
+  let title: string;
+
+  switch (status) {
+    case 'available':
+      color = 'text-green-500'; // Tailwind 绿色
+      title = '磁盘空间充足';
+      break;
+    case 'warning':
+      color = 'text-yellow-500'; // Tailwind 黄色
+      title = '磁盘空间警告';
+      break;
+    case 'unavailable':
+      color = 'text-red-500'; // Tailwind 红色
+      title = '磁盘不可用';
+      break;
+    default:
+      color = 'text-gray-400';
+      title = '未知状态';
+  }
+
+  return (
+    <Tooltip title={title}>
+      <HddOutlined className={`${color}  h-full`} />
+    </Tooltip>
+  );
+};
+
+// 电量组件
+const BatteryStatus: React.FC<{ level: number }> = ({ level }) => {
+  const color = level <= 20 ? 'text-red-500' : level <= 50 ? 'text-yellow-500' : 'text-green-500';
+
+  return (
+    <Tooltip title={`电量: ${level}%`}>
+      
+        <BarChartOutlined className={`${color}  h-full`} />
+        <span
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-white"
+        >
+          {level}
+        </span>
+      
+    </Tooltip>
+  );
+};
+
+// WiFi 信号组件
+const WifiStatus: React.FC<{ strength: StatusBarProps['wifiStrength'] }> = ({ strength }) => {
+  const colors = [
+    'text-gray-400', // 0格
+    'text-red-500',  // 1格
+    'text-orange-500', // 2格
+    'text-yellow-500', // 3格
+    'text-green-500', // 4格
+  ];
+  const title = `WiFi 信号: ${strength} 格`;
+
+  return (
+    <Tooltip title={title}>
+      <WifiOutlined
+        className={`${colors[strength]} ${strength === 0 ? 'scale-75' : 'scale-100'} h-full`}
+      />
+    </Tooltip>
+  );
+};
+
+// 热容组件
+const HeatCapacityStatus: React.FC<{ capacity: number }> = ({ capacity }) => {
+  const color = capacity <= 30 ? 'text-red-500 border-red-500' : capacity <= 60 ? 'text-yellow-500 border-yellow-500' : 'text-green-500 border-green-500';
+
+  return (
+    <Tooltip title={`热容: ${capacity}%`}>
+        {/* 火焰 */}
+        <FireOutlined className={`${color}`} />
+    </Tooltip>
+  );
+};
+
+// 主状态栏组件
+const StatusBar: React.FC<StatusBarProps> = ({ diskStatus, batteryLevel, wifiStrength, heatCapacity }) => {
+  return (
+    // <div className="flex justify-end p-2">
+      <Space className='sm:text-[40px] xs:text-[20px] md:text-[30px] lg:text-[40px] xl:text-[50px]'>
+        <DiskStatus status={diskStatus} />
+        <BatteryStatus level={batteryLevel} />
+        <WifiStatus strength={wifiStrength} />
+        <HeatCapacityStatus capacity={heatCapacity} />
+      </Space>
+    // </div>
+  );
+};
+
+export default StatusBar;
+export type { StatusBarProps };
+export { DiskStatus, BatteryStatus, WifiStatus, HeatCapacityStatus };
+export type DiskStatusType = 'available' | 'warning' | 'unavailable';