diff --git a/admin/dashboard/templates/index.html b/admin/dashboard/templates/index.html
index 33c6fca..559ddd4 100644
--- a/admin/dashboard/templates/index.html
+++ b/admin/dashboard/templates/index.html
@@ -179,22 +179,24 @@
     <!-- 添加一个新行用于显示按小时聊天趋势图 -->
     <el-row :gutter="20" style="margin-top: 20px;">
         <el-col :span="24">
-            <div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
-                <h3>按小时聊天趋势</h3>
-                <div style="display: flex; align-items: center;">
-                    <el-select v-model="selectedGroupForHourlyTrend" placeholder="选择群组" style="width: 200px; margin-right: 10px;" @change="loadHourlyMessageTrend">
-                        <el-option v-for="group in groups" :key="group.group_id" :label="group.group_name" :value="group.group_id"></el-option>
-                    </el-select>
-                    <el-select v-model="hourlyTrendDays" placeholder="选择时间范围" style="width: 120px;" @change="loadHourlyMessageTrend">
-                        <el-option :value="1" label="最近1天"></el-option>
-                        <el-option :value="2" label="最近2天"></el-option>
-                        <el-option :value="3" label="最近3天"></el-option>
-                    </el-select>
+            <el-card shadow="hover" v-loading="hourlyMessageTrendLoading">
+                <div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
+                    <h3>按小时聊天趋势</h3>
+                    <div style="display: flex; align-items: center;">
+                        <el-select v-model="selectedGroupForHourlyTrend" placeholder="选择群组" style="width: 200px; margin-right: 10px;" @change="loadHourlyMessageTrend">
+                            <el-option v-for="group in groups" :key="group.group_id" :label="group.group_name" :value="group.group_id"></el-option>
+                        </el-select>
+                        <el-select v-model="hourlyTrendDays" placeholder="选择时间范围" style="width: 120px;" @change="loadHourlyMessageTrend">
+                            <el-option :value="1" label="最近1天"></el-option>
+                            <el-option :value="2" label="最近2天"></el-option>
+                            <el-option :value="3" label="最近3天"></el-option>
+                        </el-select>
+                    </div>
                 </div>
-            </div>
-            <div class="chart-container" style="height: 300px; ">
-                <canvas id="hourlyMessageTrendChart" width="800" height="150"></canvas>
-            </div>
+                <div class="chart-container" style="height: 300px;">
+                    <canvas id="hourlyMessageTrendChart" width="800" height="150"></canvas>
+                </div>
+            </el-card>
         </el-col>
     </el-row>
 </div>