diff --git a/apps/web-antd/src/api/aiot/alarm/index.ts b/apps/web-antd/src/api/aiot/alarm/index.ts
index 0c32d7ddb..c31650774 100644
--- a/apps/web-antd/src/api/aiot/alarm/index.ts
+++ b/apps/web-antd/src/api/aiot/alarm/index.ts
@@ -66,12 +66,38 @@ export namespace AiotAlarmApi {
   export interface AlertStatistics {
     total?: number;
     todayCount?: number;
+    yesterdayCount?: number;
     pendingCount?: number;
     handledCount?: number;
+    avgResponseMinutes?: number | null;
     byType?: Record<string, number>;
     byStatus?: Record<string, number>;
     byLevel?: Record<string, number>;
   }
+
+  /** 告警趋势项 */
+  export interface TrendItem {
+    date: string;
+    total: number;
+    leave_post?: number;
+    intrusion?: number;
+    illegal_parking?: number;
+    vehicle_congestion?: number;
+    [key: string]: number | string | undefined;
+  }
+
+  /** 设备告警排行项 */
+  export interface DeviceTopItem {
+    deviceId: string;
+    deviceName: string;
+    count: number;
+  }
+
+  /** 时段分布项 */
+  export interface HourDistItem {
+    hour: number;
+    count: number;
+  }
 }
 
 // ==================== 告警管理 API ====================
@@ -115,6 +141,37 @@ export function getAlertStatistics(startTime?: string, endTime?: string) {
   );
 }
 
+/** 获取告警趋势 */
+export function getAlertTrend(days: number = 7) {
+  return requestClient.get<AiotAlarmApi.TrendItem[]>(
+    '/aiot/alarm/alert/trend',
+    { params: { days } },
+  );
+}
+
+/** 获取设备告警排行 */
+export function getAlertDeviceTop(limit: number = 10, days: number = 7) {
+  return requestClient.get<AiotAlarmApi.DeviceTopItem[]>(
+    '/aiot/alarm/alert/device-top',
+    { params: { limit, days } },
+  );
+}
+
+/** 获取24小时告警分布 */
+export function getAlertHourDistribution(days: number = 7) {
+  return requestClient.get<AiotAlarmApi.HourDistItem[]>(
+    '/aiot/alarm/alert/hour-distribution',
+    { params: { days } },
+  );
+}
+
+/** 获取最近告警列表 */
+export function getRecentAlerts(pageSize: number = 10) {
+  return requestClient.get<any>('/aiot/alarm/alert/page', {
+    params: { pageNo: 1, pageSize },
+  });
+}
+
 // ==================== 摄像头告警汇总 API ====================
 
 /** 以摄像头维度获取告警汇总 */
diff --git a/apps/web-antd/src/views/aiot/alarm/summary/chart-options.ts b/apps/web-antd/src/views/aiot/alarm/summary/chart-options.ts
new file mode 100644
index 000000000..5f6c80f8b
--- /dev/null
+++ b/apps/web-antd/src/views/aiot/alarm/summary/chart-options.ts
@@ -0,0 +1,201 @@
+import type { AiotAlarmApi } from '#/api/aiot/alarm';
+
+const TYPE_NAMES: Record<string, string> = {
+  leave_post: '离岗检测',
+  intrusion: '周界入侵',
+  illegal_parking: '车辆违停',
+  vehicle_congestion: '车辆拥堵',
+};
+
+const TYPE_COLORS: Record<string, string> = {
+  leave_post: '#1890ff',
+  intrusion: '#f5222d',
+  illegal_parking: '#fa8c16',
+  vehicle_congestion: '#722ed1',
+};
+
+const LEVEL_NAMES: Record<number, string> = {
+  0: '紧急',
+  1: '重要',
+  2: '普通',
+  3: '轻微',
+};
+
+const LEVEL_COLORS: Record<number, string> = {
+  0: '#f5222d',
+  1: '#fa8c16',
+  2: '#1890ff',
+  3: '#8c8c8c',
+};
+
+/** 告警趋势面积图 */
+export function getTrendChartOptions(data: AiotAlarmApi.TrendItem[]): any {
+  const dates = data.map((d) => d.date.slice(5)); // MM-DD
+  const types = Object.keys(TYPE_NAMES);
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } },
+    },
+    legend: {
+      data: types.map((t) => TYPE_NAMES[t]),
+      bottom: 0,
+    },
+    grid: { left: '3%', right: '4%', bottom: '12%', top: '8%', containLabel: true },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: dates,
+    },
+    yAxis: { type: 'value', minInterval: 1 },
+    series: types.map((type) => ({
+      name: TYPE_NAMES[type],
+      type: 'line',
+      smooth: true,
+      stack: 'total',
+      areaStyle: { opacity: 0.25 },
+      emphasis: { focus: 'series' },
+      itemStyle: { color: TYPE_COLORS[type] },
+      data: data.map((d) => (d[type] as number) || 0),
+    })),
+  };
+}
+
+/** 告警类型环形图 */
+export function getTypePieChartOptions(
+  byType: Record<string, number>,
+): any {
+  const data = Object.entries(byType)
+    .map(([type, count]) => ({
+      name: TYPE_NAMES[type] || type,
+      value: count,
+      itemStyle: { color: TYPE_COLORS[type] },
+    }))
+    .filter((d) => d.value > 0);
+  const total = data.reduce((s, d) => s + d.value, 0);
+
+  return {
+    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+    legend: { bottom: 0, left: 'center' },
+    graphic: {
+      type: 'text',
+      left: 'center',
+      top: '42%',
+      style: {
+        text: `${total}`,
+        fontSize: 28,
+        fontWeight: 'bold',
+        fill: '#333',
+        textAlign: 'center',
+      },
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['45%', '70%'],
+        center: ['50%', '48%'],
+        avoidLabelOverlap: false,
+        label: { show: false },
+        data,
+      },
+    ],
+  };
+}
+
+/** 设备告警 Top10 横向条形图 */
+export function getDeviceTopChartOptions(
+  data: AiotAlarmApi.DeviceTopItem[],
+): any {
+  const sorted = [...data].reverse(); // 最多的在上面
+  return {
+    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+    grid: { left: '3%', right: '8%', bottom: '3%', top: '3%', containLabel: true },
+    xAxis: { type: 'value', minInterval: 1 },
+    yAxis: {
+      type: 'category',
+      data: sorted.map((d) => {
+        const name = d.deviceName || d.deviceId;
+        return name.length > 12 ? `${name.slice(0, 12)}...` : name;
+      }),
+      axisLabel: { fontSize: 11 },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: sorted.map((d) => d.count),
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 1, y2: 0,
+            colorStops: [
+              { offset: 0, color: '#1890ff' },
+              { offset: 1, color: '#36cfc9' },
+            ],
+          },
+          borderRadius: [0, 4, 4, 0],
+        },
+        barMaxWidth: 20,
+        label: { show: true, position: 'right', fontSize: 11 },
+      },
+    ],
+  };
+}
+
+/** 告警级别分布柱状图 */
+export function getLevelBarChartOptions(
+  byLevel: Record<string, number>,
+): any {
+  const levels = [0, 1, 2, 3];
+  return {
+    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+    grid: { left: '3%', right: '4%', bottom: '3%', top: '8%', containLabel: true },
+    xAxis: {
+      type: 'category',
+      data: levels.map((l) => LEVEL_NAMES[l]),
+    },
+    yAxis: { type: 'value', minInterval: 1 },
+    series: [
+      {
+        type: 'bar',
+        data: levels.map((l) => ({
+          value: byLevel[l] || 0,
+          itemStyle: { color: LEVEL_COLORS[l], borderRadius: [4, 4, 0, 0] },
+        })),
+        barMaxWidth: 40,
+        label: { show: true, position: 'top', fontSize: 11 },
+      },
+    ],
+  };
+}
+
+/** 24小时时段分布柱状图 */
+export function getHourDistChartOptions(
+  data: AiotAlarmApi.HourDistItem[],
+): any {
+  const counts = data.map((d) => d.count);
+  const maxCount = Math.max(...counts, 1);
+  return {
+    tooltip: { trigger: 'axis', formatter: '{b}时: {c}次' },
+    grid: { left: '3%', right: '4%', bottom: '3%', top: '8%', containLabel: true },
+    xAxis: {
+      type: 'category',
+      data: data.map((d) => `${d.hour}`),
+      axisLabel: { formatter: '{value}时', fontSize: 10 },
+    },
+    yAxis: { type: 'value', minInterval: 1 },
+    series: [
+      {
+        type: 'bar',
+        data: counts.map((c) => ({
+          value: c,
+          itemStyle: {
+            color: c >= maxCount * 0.8 ? '#f5222d' : c >= maxCount * 0.5 ? '#fa8c16' : '#1890ff',
+            borderRadius: [3, 3, 0, 0],
+          },
+        })),
+        barMaxWidth: 16,
+      },
+    ],
+  };
+}
diff --git a/apps/web-antd/src/views/aiot/alarm/summary/index.vue b/apps/web-antd/src/views/aiot/alarm/summary/index.vue
index 263ed7865..e3551d44d 100644
--- a/apps/web-antd/src/views/aiot/alarm/summary/index.vue
+++ b/apps/web-antd/src/views/aiot/alarm/summary/index.vue
@@ -1,83 +1,477 @@
 <script setup lang="ts">
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiotAlarmApi } from '#/api/aiot/alarm';
 
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
-import { Badge, Tag } from 'ant-design-vue';
+import {
+  Badge,
+  Card,
+  Col,
+  Empty,
+  List,
+  ListItem,
+  ListItemMeta,
+  Row,
+  Segmented,
+  Spin,
+  Statistic,
+  Tag,
+} from 'ant-design-vue';
 
-import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getCameraAlertSummary } from '#/api/aiot/alarm';
+import {
+  getAlertDeviceTop,
+  getAlertHourDistribution,
+  getAlertStatistics,
+  getAlertTrend,
+  getRecentAlerts,
+} from '#/api/aiot/alarm';
 
-import { useCameraSummaryColumns } from '../list/data';
+import {
+  getDeviceTopChartOptions,
+  getHourDistChartOptions,
+  getLevelBarChartOptions,
+  getTrendChartOptions,
+  getTypePieChartOptions,
+} from './chart-options';
 
-defineOptions({ name: 'AiotAlarmSummary' });
+defineOptions({ name: 'AiotAlarmDashboard' });
 
 const router = useRouter();
+const loading = ref(true);
 
-/** 跳转到该摄像头的告警列表 */
-function handleViewAlerts(row: AiotAlarmApi.CameraAlertSummary) {
-  router.push({
-    path: '/aiot/alarm/list',
-    query: { cameraId: row.cameraId },
-  });
+// 数据
+const stats = ref<AiotAlarmApi.AlertStatistics>({});
+const trendData = ref<AiotAlarmApi.TrendItem[]>([]);
+const deviceTopData = ref<AiotAlarmApi.DeviceTopItem[]>([]);
+const hourDistData = ref<AiotAlarmApi.HourDistItem[]>([]);
+const recentAlerts = ref<AiotAlarmApi.Alert[]>([]);
+
+// 趋势天数切换
+const trendDays = ref(7);
+const trendDaysOptions = [
+  { label: '近7天', value: 7 },
+  { label: '近30天', value: 30 },
+];
+
+// 图表 ref
+const trendChartRef = ref();
+const typePieChartRef = ref();
+const deviceTopChartRef = ref();
+const levelBarChartRef = ref();
+const hourDistChartRef = ref();
+
+const { renderEcharts: renderTrend } = useEcharts(trendChartRef);
+const { renderEcharts: renderTypePie } = useEcharts(typePieChartRef);
+const { renderEcharts: renderDeviceTop } = useEcharts(deviceTopChartRef);
+const { renderEcharts: renderLevelBar } = useEcharts(levelBarChartRef);
+const { renderEcharts: renderHourDist } = useEcharts(hourDistChartRef);
+
+// 自动刷新
+let refreshTimer: ReturnType<typeof setInterval> | null = null;
+
+// 告警类型映射
+const TYPE_NAMES: Record<string, string> = {
+  leave_post: '离岗检测',
+  intrusion: '周界入侵',
+  illegal_parking: '车辆违停',
+  vehicle_congestion: '车辆拥堵',
+};
+
+const TYPE_COLORS: Record<string, string> = {
+  leave_post: 'blue',
+  intrusion: 'red',
+  illegal_parking: 'orange',
+  vehicle_congestion: 'purple',
+};
+
+const STATUS_NAMES: Record<string, string> = {
+  pending: '待处理',
+  handled: '已处理',
+  ignored: '已忽略',
+};
+
+/** 加载全部数据 */
+async function loadAll() {
+  loading.value = true;
+  try {
+    const [statsRes, trendRes, deviceRes, hourRes, alertsRes] =
+      await Promise.all([
+        getAlertStatistics(),
+        getAlertTrend(trendDays.value),
+        getAlertDeviceTop(10, 7),
+        getAlertHourDistribution(7),
+        getRecentAlerts(10),
+      ]);
+    stats.value = statsRes;
+    trendData.value = trendRes;
+    deviceTopData.value = deviceRes;
+    hourDistData.value = hourRes;
+    recentAlerts.value = alertsRes?.list || [];
+  } finally {
+    loading.value = false;
+    await nextTick();
+    await nextTick();
+    renderCharts();
+  }
 }
 
-const [Grid] = useVbenVxeGrid({
-  gridOptions: {
-    columns: useCameraSummaryColumns(),
-    height: 'auto',
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }) => {
-          return await getCameraAlertSummary({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'cameraId',
-      isHover: true,
-    },
-    toolbarConfig: {
-      refresh: true,
-    },
-  } as VxeTableGridOptions<AiotAlarmApi.CameraAlertSummary>,
+/** 切换趋势天数 */
+async function onTrendDaysChange(val: number) {
+  trendDays.value = val;
+  try {
+    trendData.value = await getAlertTrend(val);
+    await nextTick();
+    renderTrend(getTrendChartOptions(trendData.value));
+  } catch {
+    /* ignore */
+  }
+}
+
+/** 渲染所有图表 */
+function renderCharts() {
+  if (trendData.value.length > 0) {
+    renderTrend(getTrendChartOptions(trendData.value));
+  }
+  if (stats.value.byType && Object.keys(stats.value.byType).length > 0) {
+    renderTypePie(getTypePieChartOptions(stats.value.byType));
+  }
+  if (deviceTopData.value.length > 0) {
+    renderDeviceTop(getDeviceTopChartOptions(deviceTopData.value));
+  }
+  if (stats.value.byLevel && Object.keys(stats.value.byLevel).length > 0) {
+    renderLevelBar(getLevelBarChartOptions(stats.value.byLevel));
+  }
+  if (hourDistData.value.length > 0) {
+    renderHourDist(getHourDistChartOptions(hourDistData.value));
+  }
+}
+
+/** 计算同比变化 */
+function getDayChange(): { value: number; type: 'up' | 'down' | 'flat' } {
+  const today = stats.value.todayCount ?? 0;
+  const yesterday = stats.value.yesterdayCount ?? 0;
+  if (yesterday === 0) return { value: 0, type: 'flat' };
+  const pct = Math.round(((today - yesterday) / yesterday) * 100);
+  return {
+    value: Math.abs(pct),
+    type: pct > 0 ? 'up' : pct < 0 ? 'down' : 'flat',
+  };
+}
+
+/** 格式化时间为简短格式 */
+function formatTime(time?: string) {
+  if (!time) return '';
+  const d = new Date(time);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+/** 跳转到告警列表 */
+function goToAlertList() {
+  router.push('/aiot/alarm/list');
+}
+
+onMounted(() => {
+  loadAll();
+  refreshTimer = setInterval(loadAll, 60_000);
+});
+
+onUnmounted(() => {
+  if (refreshTimer) clearInterval(refreshTimer);
 });
 </script>
 
 <template>
   <Page auto-content-height>
-    <Grid table-title="摄像头告警汇总">
-      <!-- 待处理数量列 -->
-      <template #pendingCount="{ row }">
-        <Badge
-          v-if="row.pendingCount > 0"
-          :count="row.pendingCount"
-          :overflow-count="99"
-          :number-style="{ backgroundColor: '#faad14' }"
-        />
-        <span v-else class="text-gray-400">0</span>
-      </template>
+    <div class="dashboard-container">
+      <!-- KPI 卡片 -->
+      <Row :gutter="[16, 16]">
+        <Col :xs="24" :sm="12" :md="8" :lg="5">
+          <Card size="small" :bordered="false" class="kpi-card">
+            <Statistic
+              title="今日告警"
+              :value="stats.todayCount ?? 0"
+              :value-style="{ color: '#1890ff', fontWeight: 'bold', fontSize: '28px' }"
+            />
+            <div class="kpi-footer">
+              <template v-if="getDayChange().type === 'up'">
+                <span class="change-up">&#9650; {{ getDayChange().value }}%</span>
+                <span class="change-label">较昨日</span>
+              </template>
+              <template v-else-if="getDayChange().type === 'down'">
+                <span class="change-down">&#9660; {{ getDayChange().value }}%</span>
+                <span class="change-label">较昨日</span>
+              </template>
+              <template v-else>
+                <span class="change-flat">与昨日持平</span>
+              </template>
+            </div>
+          </Card>
+        </Col>
+        <Col :xs="12" :sm="12" :md="8" :lg="5">
+          <Card size="small" :bordered="false" class="kpi-card">
+            <Statistic
+              title="待处理"
+              :value="stats.pendingCount ?? 0"
+              :value-style="{ color: '#faad14', fontWeight: 'bold', fontSize: '28px' }"
+            />
+            <div class="kpi-footer">
+              <span class="change-label">需及时处理</span>
+            </div>
+          </Card>
+        </Col>
+        <Col :xs="12" :sm="12" :md="8" :lg="5">
+          <Card size="small" :bordered="false" class="kpi-card">
+            <Statistic
+              title="已处理"
+              :value="stats.handledCount ?? 0"
+              :value-style="{ color: '#52c41a', fontWeight: 'bold', fontSize: '28px' }"
+            />
+            <div class="kpi-footer">
+              <span class="change-label">
+                总计 {{ stats.total ?? 0 }} 条
+              </span>
+            </div>
+          </Card>
+        </Col>
+        <Col :xs="12" :sm="12" :md="8" :lg="5">
+          <Card size="small" :bordered="false" class="kpi-card">
+            <Statistic
+              title="平均响应"
+              :value="stats.avgResponseMinutes ?? '-'"
+              suffix="分钟"
+              :value-style="{ color: '#722ed1', fontWeight: 'bold', fontSize: '28px' }"
+            />
+            <div class="kpi-footer">
+              <span class="change-label">告警到处理</span>
+            </div>
+          </Card>
+        </Col>
+        <Col :xs="12" :sm="12" :md="8" :lg="4">
+          <Card size="small" :bordered="false" class="kpi-card">
+            <Statistic
+              title="在线设备"
+              :value="deviceTopData.length"
+              :value-style="{ color: '#13c2c2', fontWeight: 'bold', fontSize: '28px' }"
+            />
+            <div class="kpi-footer">
+              <span class="change-label">活跃摄像头</span>
+            </div>
+          </Card>
+        </Col>
+      </Row>
 
-      <!-- 操作列 -->
-      <template #actions="{ row }">
-        <TableAction
-          :actions="[
-            {
-              label: '查看告警',
-              type: 'link',
-              icon: ACTION_ICON.VIEW,
-              onClick: handleViewAlerts.bind(null, row),
-            },
-          ]"
-        />
-      </template>
-    </Grid>
+      <!-- 第一行图表：趋势 + 类型 -->
+      <Row :gutter="[16, 16]" class="mt-4">
+        <Col :xs="24" :lg="14">
+          <Card size="small" :bordered="false">
+            <template #title>
+              <div class="chart-title-bar">
+                <span>告警趋势</span>
+                <Segmented
+                  :value="trendDays"
+                  :options="trendDaysOptions"
+                  size="small"
+                  @change="onTrendDaysChange"
+                />
+              </div>
+            </template>
+            <Spin :spinning="loading">
+              <div v-if="trendData.length > 0">
+                <EchartsUI ref="trendChartRef" class="h-[320px] w-full" />
+              </div>
+              <Empty v-else class="h-[320px]" description="暂无数据" />
+            </Spin>
+          </Card>
+        </Col>
+        <Col :xs="24" :lg="10">
+          <Card size="small" :bordered="false" title="告警类型分布">
+            <Spin :spinning="loading">
+              <div
+                v-if="
+                  stats.byType && Object.keys(stats.byType).length > 0
+                "
+              >
+                <EchartsUI ref="typePieChartRef" class="h-[320px] w-full" />
+              </div>
+              <Empty v-else class="h-[320px]" description="暂无数据" />
+            </Spin>
+          </Card>
+        </Col>
+      </Row>
+
+      <!-- 第二行图表：设备Top + 级别 -->
+      <Row :gutter="[16, 16]" class="mt-4">
+        <Col :xs="24" :lg="14">
+          <Card size="small" :bordered="false" title="设备告警 Top10（近7天）">
+            <Spin :spinning="loading">
+              <div v-if="deviceTopData.length > 0">
+                <EchartsUI
+                  ref="deviceTopChartRef"
+                  class="h-[320px] w-full"
+                />
+              </div>
+              <Empty v-else class="h-[320px]" description="暂无数据" />
+            </Spin>
+          </Card>
+        </Col>
+        <Col :xs="24" :lg="10">
+          <Card size="small" :bordered="false" title="告警级别分布">
+            <Spin :spinning="loading">
+              <div
+                v-if="
+                  stats.byLevel && Object.keys(stats.byLevel).length > 0
+                "
+              >
+                <EchartsUI ref="levelBarChartRef" class="h-[320px] w-full" />
+              </div>
+              <Empty v-else class="h-[320px]" description="暂无数据" />
+            </Spin>
+          </Card>
+        </Col>
+      </Row>
+
+      <!-- 第三行：时段分布 + 最近告警 -->
+      <Row :gutter="[16, 16]" class="mt-4">
+        <Col :xs="24" :lg="14">
+          <Card size="small" :bordered="false" title="24小时时段分布（近7天）">
+            <Spin :spinning="loading">
+              <div v-if="hourDistData.length > 0">
+                <EchartsUI ref="hourDistChartRef" class="h-[280px] w-full" />
+              </div>
+              <Empty v-else class="h-[280px]" description="暂无数据" />
+            </Spin>
+          </Card>
+        </Col>
+        <Col :xs="24" :lg="10">
+          <Card size="small" :bordered="false">
+            <template #title>
+              <div class="chart-title-bar">
+                <span>最近告警</span>
+                <a class="view-all-link" @click="goToAlertList">查看全部</a>
+              </div>
+            </template>
+            <div class="recent-alerts-list">
+              <List
+                :data-source="recentAlerts"
+                :loading="loading"
+                size="small"
+              >
+                <template #renderItem="{ item }">
+                  <ListItem>
+                    <ListItemMeta>
+                      <template #title>
+                        <div class="alert-item-title">
+                          <Tag
+                            :color="TYPE_COLORS[item.alertType] || 'default'"
+                            size="small"
+                          >
+                            {{ TYPE_NAMES[item.alertType] || item.alertType }}
+                          </Tag>
+                          <span class="alert-device-name">
+                            {{ item.cameraName || item.cameraId }}
+                          </span>
+                        </div>
+                      </template>
+                      <template #description>
+                        <div class="alert-item-desc">
+                          <span>{{ formatTime(item.triggerTime) }}</span>
+                          <Badge
+                            :status="
+                              item.status === 'pending'
+                                ? 'warning'
+                                : item.status === 'handled'
+                                  ? 'success'
+                                  : 'default'
+                            "
+                            :text="STATUS_NAMES[item.status] || item.status"
+                          />
+                        </div>
+                      </template>
+                    </ListItemMeta>
+                  </ListItem>
+                </template>
+              </List>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+    </div>
   </Page>
 </template>
+
+<style scoped>
+.dashboard-container {
+  padding: 4px;
+}
+
+.kpi-card {
+  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
+  border-radius: 8px;
+}
+
+.kpi-footer {
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.change-up {
+  color: #f5222d;
+  font-weight: 500;
+  margin-right: 4px;
+}
+
+.change-down {
+  color: #52c41a;
+  font-weight: 500;
+  margin-right: 4px;
+}
+
+.change-flat {
+  color: #8c8c8c;
+}
+
+.change-label {
+  color: #8c8c8c;
+}
+
+.chart-title-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.view-all-link {
+  font-size: 13px;
+  cursor: pointer;
+  color: #1890ff;
+}
+
+.recent-alerts-list {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.alert-item-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.alert-device-name {
+  font-size: 13px;
+  color: #333;
+}
+
+.alert-item-desc {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  color: #8c8c8c;
+}
+</style>