feat: Dashboard 响应式网格，统计卡片/图表/工具栏适配三端

apps/admin/src/pages/Dashboard/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Row, Col, Card, Statistic, DatePicker, Spin } from 'antd';
+import { Row, Col, Card, Statistic, DatePicker, Spin, Grid } from 'antd';
 import { TeamOutlined, HomeOutlined, DollarOutlined, CheckCircleOutlined } from '@ant-design/icons';
 import ReactECharts from 'echarts-for-react';
 import dayjs from 'dayjs';
@@ -19,6 +19,8 @@ const COLORS = [
 ];
 
 const DashboardPage: React.FC = () => {
+  const screens = Grid.useBreakpoint();
+  const isMobile = !screens.sm;
   const [stats, setStats] = useState<any>(null);
   const [ganttData, setGanttData] = useState<any[]>([]);
   const [expenseStats, setExpenseStats] = useState<any[]>([]);
@@ -164,7 +166,9 @@ const DashboardPage: React.FC = () => {
           marginBottom: 16,
           display: 'flex',
           justifyContent: 'space-between',
-          alignItems: 'center',
+          alignItems: isMobile ? 'flex-start' : 'center',
+          flexDirection: isMobile ? 'column' : 'row',
+          gap: 12,
         }}
       >
         <h2 style={{ margin: 0 }}>数据面板</h2>
@@ -176,13 +180,13 @@ const DashboardPage: React.FC = () => {
         />
       </div>
 
-      <Row gutter={16} style={{ marginBottom: 24 }}>
-        <Col span={6}>
+      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
+        <Col xs={12} sm={12} md={6}>
           <Card>
             <Statistic title="宿舍总数" value={stats?.totalRooms || 0} prefix={<HomeOutlined />} />
           </Card>
         </Col>
-        <Col span={6}>
+        <Col xs={12} sm={12} md={6}>
           <Card>
             <Statistic
               title="在读学生"
@@ -191,7 +195,7 @@ const DashboardPage: React.FC = () => {
             />
           </Card>
         </Col>
-        <Col span={6}>
+        <Col xs={12} sm={12} md={6}>
           <Card>
             <Statistic
               title="当前在住"
@@ -201,7 +205,7 @@ const DashboardPage: React.FC = () => {
             />
           </Card>
         </Col>
-        <Col span={6}>
+        <Col xs={12} sm={12} md={6}>
           <Card>
             <Statistic
               title="入住率"
@@ -217,27 +221,27 @@ const DashboardPage: React.FC = () => {
         {ganttData.length > 0 ? (
           <ReactECharts
             option={ganttOption()}
-            style={{ height: Math.max(300, ganttData.length * 40) }}
+            style={{ width: '100%', height: Math.max(300, ganttData.length * 40) }}
           />
         ) : (
           <div style={{ textAlign: 'center', padding: 40, color: '#999' }}>暂无入住数据</div>
         )}
       </Card>
 
-      <Row gutter={16}>
-        <Col span={12}>
+      <Row gutter={[16, 16]}>
+        <Col xs={24} sm={12}>
           <Card title="费用类型分布">
             {expenseStats.length > 0 ? (
-              <ReactECharts option={pieOption} style={{ height: 300 }} />
+              <ReactECharts option={pieOption} style={{ width: '100%', height: isMobile ? 250 : 300 }} />
             ) : (
               <div style={{ textAlign: 'center', padding: 40, color: '#999' }}>暂无费用数据</div>
             )}
           </Card>
         </Col>
-        <Col span={12}>
+        <Col xs={24} sm={12}>
           <Card title="宿舍费用排行 TOP 20">
             {roomRanking.length > 0 ? (
-              <ReactECharts option={barOption} style={{ height: 300 }} />
+              <ReactECharts option={barOption} style={{ width: '100%', height: isMobile ? 250 : 300 }} />
             ) : (
               <div style={{ textAlign: 'center', padding: 40, color: '#999' }}>暂无费用数据</div>
             )}