增加 dashboard

src/views/dashboard/Dashboard.vue

@@ -5,20 +5,132 @@
         <h1>欢迎使用蜂快运营管理系统</h1>
         <p>{{ greeting }}</p>
       </div>
+
+      <a-row :gutter="24" class="data-overview">
+        <!-- 用户数据卡片 -->
+        <a-col :span="8">
+          <a-card class="data-card">
+            <template #title>
+              <span class="card-title">
+                <team-outlined /> 用户数据
+              </span>
+            </template>
+            <a-statistic-group>
+              <a-statistic 
+                title="总用户数" 
+                :value="dashboardData.total_user_count"
+                class="main-stat"
+              />
+              <div class="sub-stats">
+                <a-statistic 
+                  title="今日新增" 
+                  :value="dashboardData.today_user_count"
+                  :value-style="{ color: '#3f8600' }"
+                />
+                <a-statistic 
+                  title="昨日新增" 
+                  :value="dashboardData.yesterday_user_count"
+                />
+              </div>
+            </a-statistic-group>
+          </a-card>
+        </a-col>
+
+        <!-- 订单数据卡片 -->
+        <a-col :span="8">
+          <a-card class="data-card">
+            <template #title>
+              <span class="card-title">
+                <shopping-outlined /> 配送订单
+              </span>
+            </template>
+            <a-statistic-group>
+              <a-statistic 
+                title="总订单数" 
+                :value="dashboardData.total_order_count"
+                class="main-stat"
+              />
+              <div class="sub-stats">
+                <a-statistic 
+                  title="今日新增" 
+                  :value="dashboardData.today_order_count"
+                  :value-style="{ color: '#3f8600' }"
+                />
+                <a-statistic 
+                  title="昨日新增" 
+                  :value="dashboardData.yesterday_order_count"
+                />
+              </div>
+            </a-statistic-group>
+          </a-card>
+        </a-col>
+
+        <!-- 小区数据卡片 -->
+        <a-col :span="8">
+          <a-card class="data-card">
+            <template #title>
+              <span class="card-title">
+                <home-outlined /> 小区数据
+              </span>
+            </template>
+            <a-statistic-group>
+              <a-statistic 
+                title="总小区数" 
+                :value="dashboardData.total_community_count"
+                class="main-stat"
+              />
+              <div class="sub-stats">
+                <a-statistic 
+                  title="今日新增" 
+                  :value="dashboardData.today_community_count"
+                  :value-style="{ color: '#3f8600' }"
+                />
+                <a-statistic 
+                  title="昨日新增" 
+                  :value="dashboardData.yesterday_community_count"
+                />
+              </div>
+            </a-statistic-group>
+          </a-card>
+        </a-col>
+      </a-row>
     </div>
   </page-container>
 </template>
 
 <script>
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, ref, onMounted } from 'vue'
+import { Card, Row, Col, Statistic } from 'ant-design-vue'
+import { TeamOutlined, ShoppingOutlined, HomeOutlined } from '@ant-design/icons-vue'
 import PageContainer from '@/components/PageContainer.vue'
+import request from '@/utils/request'
 
 export default defineComponent({
   name: 'Dashboard',
   components: {
-    PageContainer
+    PageContainer,
+    ACard: Card,
+    ARow: Row,
+    ACol: Col,
+    AStatistic: Statistic,
+    AStatisticGroup: Statistic.Group,
+    TeamOutlined,
+    ShoppingOutlined,
+    HomeOutlined
   },
   setup() {
+    const dashboardData = ref({
+      total_user_count: 0,
+      today_user_count: 0,
+      yesterday_user_count: 0,
+      total_order_count: 0,
+      today_order_count: 0,
+      yesterday_order_count: 0,
+      total_community_count: 0,
+      today_community_count: 0,
+      yesterday_community_count: 0
+    })
+
     const greeting = computed(() => {
       const hour = new Date().getHours()
       if (hour < 6) return '夜深了，请注意休息'
@@ -30,8 +142,24 @@ export default defineComponent({
       return '晚上好'
     })
 
+    const fetchDashboardData = async () => {
+      try {
+        const res = await request.get('/api/dashboard')
+        if (res.code === 200) {
+          dashboardData.value = res.data
+        }
+      } catch (error) {
+        console.error('获取数据看板数据失败:', error)
+      }
+    }
+
+    onMounted(() => {
+      fetchDashboardData()
+    })
+
     return {
-      greeting
+      greeting,
+      dashboardData
     }
   }
 })
@@ -46,7 +174,8 @@ export default defineComponent({
 
 .welcome-card {
   text-align: center;
-  padding: 48px 0;
+  padding: 24px 0;
+  margin-bottom: 24px;
 }
 
 .welcome-card h1 {
@@ -59,4 +188,73 @@ export default defineComponent({
   font-size: 16px;
   color: rgba(0, 0, 0, 0.65);
 }
+
+.data-overview {
+  margin-top: 24px;
+}
+
+.data-card {
+  height: 100%;
+  
+  :deep(.ant-card-head) {
+    min-height: 48px;
+    padding: 0 16px;
+    
+    .ant-card-head-title {
+      padding: 12px 0;
+    }
+  }
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  
+  .anticon {
+    font-size: 20px;
+    color: #1890ff;
+  }
+}
+
+.main-stat {
+  margin-bottom: 16px;
+  
+  :deep(.ant-statistic-title) {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.45);
+  }
+  
+  :deep(.ant-statistic-content) {
+    font-size: 24px;
+    color: #1890ff;
+  }
+}
+
+.sub-stats {
+  display: flex;
+  justify-content: space-between;
+  
+  :deep(.ant-statistic) {
+    padding: 0 12px;
+    
+    &:first-child {
+      padding-left: 0;
+    }
+    
+    &:last-child {
+      padding-right: 0;
+    }
+    
+    .ant-statistic-title {
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+    
+    .ant-statistic-content {
+      font-size: 20px;
+    }
+  }
+}
 </style>