From 969f3f4221410833b019fbe7e4d8c73357494018 Mon Sep 17 00:00:00 2001
From: wangziqi <wangziqi@gongxue100.com>
Date: Fri, 3 Jul 2026 10:07:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Dashboard=20=E5=93=8D=E5=BA=94=E5=BC=8F?=
 =?UTF-8?q?=E7=BD=91=E6=A0=BC=EF=BC=8C=E7=BB=9F=E8=AE=A1=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?/=E5=9B=BE=E8=A1=A8/=E5=B7=A5=E5=85=B7=E6=A0=8F=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E4=B8=89=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/admin/src/pages/Dashboard/index.tsx | 30 ++++++++++++++----------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/apps/admin/src/pages/Dashboard/index.tsx b/apps/admin/src/pages/Dashboard/index.tsx
index d5b5639..7aecbbf 100644
--- a/apps/admin/src/pages/Dashboard/index.tsx
+++ b/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>
             )}