From 060396af3d8f8b94e9c119c220ca644356c01748 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq>
Date: Thu, 7 Aug 2025 09:58:11 +0800
Subject: [PATCH] refactor: enhance data structure annotations and improve
 layout responsiveness in Home component

---
 core/controllers/stats.go                   |  27 ++---
 frontend/crawlab-ui/src/views/home/Home.vue | 108 +++++++++++---------
 2 files changed, 74 insertions(+), 61 deletions(-)

diff --git a/core/controllers/stats.go b/core/controllers/stats.go
index 8a699bb6..5781c354 100644
--- a/core/controllers/stats.go
+++ b/core/controllers/stats.go
@@ -2,9 +2,10 @@ package controllers
 
 import (
 	"errors"
+	"time"
+
 	"github.com/crawlab-team/crawlab/core/models/service"
 	"go.mongodb.org/mongo-driver/bson/primitive"
-	"time"
 
 	"github.com/crawlab-team/crawlab/core/constants"
 	"github.com/crawlab-team/crawlab/core/entity"
@@ -189,20 +190,20 @@ type GetStatsTaskResponse struct {
 }
 
 type GetStatsTaskResponseByStatusItem struct {
-	Status string `json:"status"`
-	Tasks  int    `json:"tasks"`
+	Status string `json:"status" bson:"status"`
+	Tasks  int    `json:"tasks" bson:"tasks"`
 }
 type GetStatsTaskResponseByNodeItem struct {
-	NodeId   primitive.ObjectID `json:"node_id"`
-	Node     models.Node        `json:"node"`
-	NodeName string             `json:"node_name"`
-	Tasks    int                `json:"tasks"`
+	NodeId   primitive.ObjectID `json:"node_id" bson:"node_id"`
+	Node     models.Node        `json:"node" bson:"node"`
+	NodeName string             `json:"node_name" bson:"node_name"`
+	Tasks    int                `json:"tasks" bson:"tasks"`
 }
 type GetStatsTaskResponseBySpiderItem struct {
-	SpiderId   primitive.ObjectID `json:"spider_id"`
-	Spider     models.Spider      `json:"spider"`
-	SpiderName string             `json:"spider_name"`
-	Tasks      int                `json:"tasks"`
+	SpiderId   primitive.ObjectID `json:"spider_id" bson:"spider_id"`
+	Spider     models.Spider      `json:"spider" bson:"spider"`
+	SpiderName string             `json:"spider_name" bson:"spider_name"`
+	Tasks      int                `json:"tasks" bson:"tasks"`
 }
 
 func GetStatsTasks(_ *gin.Context, params *GetStatsTasksParams) (response *Response[GetStatsTaskResponse], err error) {
@@ -280,7 +281,7 @@ func getTaskStatsByNode(query bson.M) (data []GetStatsTaskResponseByNodeItem, er
 		{{
 			"$project",
 			bson.M{
-				"node_id":   "$node_id",
+				"node_id":   "$_id",
 				"node":      bson.M{"$arrayElemAt": bson.A{"$_n", 0}},
 				"node_name": bson.M{"$arrayElemAt": bson.A{"$_n.name", 0}},
 				"tasks":     "$tasks",
@@ -315,7 +316,7 @@ func getTaskStatsBySpider(query bson.M) (data []GetStatsTaskResponseBySpiderItem
 		{{
 			"$project",
 			bson.M{
-				"spider_id":   "$spider_id",
+				"spider_id":   "$_id",
 				"spider":      bson.M{"$arrayElemAt": bson.A{"$_s", 0}},
 				"spider_name": bson.M{"$arrayElemAt": bson.A{"$_s.name", 0}},
 				"tasks":       "$tasks",
diff --git a/frontend/crawlab-ui/src/views/home/Home.vue b/frontend/crawlab-ui/src/views/home/Home.vue
index b6dd277e..7114a6c4 100644
--- a/frontend/crawlab-ui/src/views/home/Home.vue
+++ b/frontend/crawlab-ui/src/views/home/Home.vue
@@ -320,52 +320,42 @@ defineOptions({ name: 'ClHome' });
 <template>
   <el-scrollbar>
     <div class="home">
-      <el-row class="row-overview-metrics">
-        <el-col
-          v-for="(m, i) in metrics"
-          :key="i"
-          :span="24 / Math.min(metrics.length, 4)"
-        >
-          <cl-metric
-            :icon="m.icon"
-            :title="m.name"
-            :value="m.value"
-            :clickable="!!m.path"
-            :color="getColor(m)"
-            @click="onMetricClick(m)"
-          />
-        </el-col>
-      </el-row>
-      <el-row class="row-line-chart">
+      <div class="row-overview-metrics">
+        <cl-metric
+          v-for="m in metrics"
+          :icon="m.icon"
+          :title="m.name"
+          :value="m.value"
+          :clickable="!!m.path"
+          :color="getColor(m)"
+          @click="onMetricClick(m)"
+        />
+      </div>
+
+      <div class="row-line-chart">
         <cl-chart
           type="line"
           :data="dailyChartData"
           :options="dailyChartOptions"
         />
-      </el-row>
-      <el-row class="row-pie-chart">
-        <el-col :span="8">
-          <cl-chart
-            type="pie"
-            :data="tasksByStatusChartData"
-            :options="tasksByStatusChartOptions"
-          />
-        </el-col>
-        <el-col :span="8">
-          <cl-chart
-            type="pie"
-            :data="tasksByNodeChartData"
-            :options="tasksByNodeChartOptions"
-          />
-        </el-col>
-        <el-col :span="8">
-          <cl-chart
-            type="pie"
-            :data="tasksBySpiderChartData"
-            :options="tasksBySpiderChartOptions"
-          />
-        </el-col>
-      </el-row>
+      </div>
+      <div class="row-pie-chart">
+        <cl-chart
+          type="pie"
+          :data="tasksByStatusChartData"
+          :options="tasksByStatusChartOptions"
+        />
+        <cl-chart
+          type="pie"
+          :data="tasksByNodeChartData"
+          :options="tasksByNodeChartOptions"
+        />
+        <cl-chart
+          type="pie"
+          :data="tasksBySpiderChartData"
+          :options="tasksBySpiderChartOptions"
+        />
+      </div>
     </div>
   </el-scrollbar>
 </template>
@@ -373,23 +363,45 @@ defineOptions({ name: 'ClHome' });
 <style scoped>
 .home {
   background: white;
-  min-height: calc(
-    100vh - var(--cl-header-height) - var(--cl-tabs-view-height)
-  );
   padding: 20px;
 
   .row-overview-metrics {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 20px;
+    display: grid;
+    margin-bottom: 12px;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    @media (min-width: 1024px) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    @media (min-width: 1280px) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
   }
 
   .row-line-chart {
     height: 400px;
+    margin-bottom: 12px;
   }
 
   .row-pie-chart {
-    height: 400px;
+    display: grid;
+    margin-bottom: 12px;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    @media (min-width: 1024px) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    @media (min-width: 1280px) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
   }
 }
 </style>