diff --git a/Dockerfile b/Dockerfile
index bf91cc7f..3b806177 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -36,5 +36,5 @@ RUN sed -i "s/__GW_HOST__/${GW_HOST}/g" /etc/nginx/conf.d/default.conf
 # 暴露端口
 EXPOSE 80
 
-# 启动 Nginx
-CMD ["nginx", "-g", "daemon off;"]
+# 直接启动 Nginx，避免官方 entrypoint 的 Alpine 包清单检测阻塞容器启动
+ENTRYPOINT ["nginx", "-g", "daemon off;"]
diff --git a/src/api/auth/online-user.ts b/src/api/auth/online-user.ts
index 1625e58a..c7b242aa 100644
--- a/src/api/auth/online-user.ts
+++ b/src/api/auth/online-user.ts
@@ -5,13 +5,26 @@ const ONLINE_USER_BASE_URL = "/auth/online-users";
 
 const OnlineUserAPI = {
   list(queryParams?: OnlineUserQueryParams) {
-    return request<any, OnlineUserItem[]>({
+    const query = queryParams ?? { pageNum: 1, pageSize: 10 };
+    return request<
+      any,
+      { records?: OnlineUserItem[]; current?: number; size?: number; total?: number }
+    >({
       url: ONLINE_USER_BASE_URL,
       method: "get",
       params: {
-        username: queryParams?.username || undefined,
+        pageNum: query.pageNum,
+        pageSize: query.pageSize,
+        username: query.username || undefined,
       },
-    });
+    }).then((page) => ({
+      data: page.records ?? [],
+      page: {
+        pageNum: page.current ?? query.pageNum,
+        pageSize: page.size ?? query.pageSize,
+        total: page.total ?? 0,
+      },
+    }));
   },
   kickout(sessionId: string) {
     return request({
diff --git a/src/types/api/online-user.ts b/src/types/api/online-user.ts
index b2c2f5e0..0cf2baf3 100644
--- a/src/types/api/online-user.ts
+++ b/src/types/api/online-user.ts
@@ -3,6 +3,8 @@
  */
 
 export interface OnlineUserQueryParams {
+  pageNum: number;
+  pageSize: number;
   username?: string;
 }
 
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index f5004940..0d5dc677 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -9,7 +9,12 @@
         </div>
       </div>
       <div class="welcome-card__actions">
-        <el-button v-for="action in quickActions" :key="action.path" text @click="goTo(action.path)">
+        <el-button
+          v-for="action in quickActions"
+          :key="action.path"
+          text
+          @click="goTo(action.path)"
+        >
           <el-icon><component :is="action.icon" /></el-icon>
           {{ action.label }}
         </el-button>
@@ -21,7 +26,9 @@
         <el-card shadow="never" class="metric-card" @click="metric.path && goTo(metric.path)">
           <div class="metric-card__header">
             <span>{{ metric.label }}</span>
-            <el-tag v-if="metric.tag" :type="metric.tag.type" size="small">{{ metric.tag.text }}</el-tag>
+            <el-tag v-if="metric.tag" :type="metric.tag.type" size="small">
+              {{ metric.tag.text }}
+            </el-tag>
           </div>
           <div class="metric-card__content">
             <strong>{{ metric.value }}</strong>
@@ -33,7 +40,7 @@
     </el-row>
 
     <el-row :gutter="16" class="dashboard-row">
-      <el-col v-if="canAccessAudit" :xs="24" :lg="16">
+      <el-col v-if="canAccessMonitoring" :xs="24" :lg="16">
         <el-card shadow="never" class="trend-card">
           <template #header>
             <div class="card-header">
@@ -56,11 +63,20 @@
             </div>
           </template>
           <el-skeleton :loading="noticeLoading" :rows="4" animated>
-            <el-empty v-if="!noticeLoading && notices.length === 0" description="暂无待处理通知" :image-size="80" />
+            <el-empty
+              v-if="!noticeLoading && notices.length === 0"
+              description="暂无待处理通知"
+              :image-size="80"
+            />
             <div v-else class="notice-list">
-              <button v-for="notice in notices" :key="notice.id" class="notice-item" @click="goTo('/my-notice')">
+              <button
+                v-for="notice in notices"
+                :key="notice.id"
+                class="notice-item"
+                @click="goTo('/my-notice')"
+              >
                 <el-tag :type="notice.isRead === 1 ? 'info' : 'danger'" size="small">
-                  {{ notice.isRead === 1 ? '已读' : '未读' }}
+                  {{ notice.isRead === 1 ? "已读" : "未读" }}
                 </el-tag>
                 <span>{{ notice.title }}</span>
                 <time>{{ formatDate(notice.publishTime) }}</time>
@@ -77,13 +93,23 @@
           <template #header>
             <div class="card-header">
               <span>最近操作</span>
-              <el-button text type="primary" @click="goTo('/sysadmin/audit-log')">查看审计日志</el-button>
+              <el-button text type="primary" @click="goTo('/sysadmin/audit-log')">
+                查看审计日志
+              </el-button>
             </div>
           </template>
           <el-skeleton :loading="auditLoading" :rows="5" animated>
-            <el-empty v-if="!auditLoading && auditLogs.length === 0" description="暂无操作记录" :image-size="80" />
+            <el-empty
+              v-if="!auditLoading && auditLogs.length === 0"
+              description="暂无操作记录"
+              :image-size="80"
+            />
             <el-table v-else :data="auditLogs" size="small" :show-header="false">
-              <el-table-column min-width="110"><template #default="{ row }"><el-tag size="small" effect="plain">{{ row.operationType || '操作' }}</el-tag></template></el-table-column>
+              <el-table-column min-width="110">
+                <template #default="{ row }">
+                  <el-tag size="small" effect="plain">{{ row.operationType || "操作" }}</el-tag>
+                </template>
+              </el-table-column>
               <el-table-column prop="description" min-width="280" show-overflow-tooltip />
               <el-table-column prop="operatorUsername" width="130" />
               <el-table-column prop="operationTime" width="170" />
@@ -91,12 +117,52 @@
           </el-skeleton>
         </el-card>
       </el-col>
-      <el-col :xs="24" :lg="canAccessAudit ? 8 : 24" class="dashboard-row__aside">
+      <el-col :xs="24" :lg="canAccessMonitoring ? 8 : 24" class="dashboard-row__aside">
         <el-card shadow="never" class="side-card status-card">
           <template #header><span>系统状态</span></template>
-          <div class="status-line"><span>在线用户服务</span><el-tag :type="isConnected ? 'success' : 'danger'" effect="plain">{{ isConnected ? '连接正常' : '连接中断' }}</el-tag></div>
-          <div class="status-line"><span>当前在线用户</span><strong>{{ onlineUserCount }}</strong></div>
-          <div class="status-line"><span>最近更新时间</span><span>{{ formattedTime }}</span></div>
+          <div class="status-line">
+            <span>在线用户服务</span>
+            <el-tag :type="onlineServiceStatus ? 'success' : 'danger'" effect="plain">
+              {{ onlineServiceStatus ? "连接正常" : "连接中断" }}
+            </el-tag>
+          </div>
+          <div class="status-line">
+            <span>当前在线用户</span>
+            <strong>{{ displayOnlineUserCount }}</strong>
+          </div>
+          <div class="status-line">
+            <span>Prometheus 采集</span>
+            <el-tag
+              :type="
+                monitoringAvailable === true
+                  ? 'success'
+                  : monitoringAvailable === false
+                    ? 'danger'
+                    : 'info'
+              "
+              effect="plain"
+            >
+              {{
+                monitoringAvailable === true
+                  ? "正常"
+                  : monitoringAvailable === false
+                    ? "不可用"
+                    : "检查中"
+              }}
+            </el-tag>
+          </div>
+          <div class="status-line">
+            <span>网关实例</span>
+            <strong>
+              {{
+                gatewayInstances.length ? `${healthyGatewayCount}/${gatewayInstances.length}` : "--"
+              }}
+            </strong>
+          </div>
+          <div class="status-line">
+            <span>最近更新时间</span>
+            <span>{{ formattedTime }}</span>
+          </div>
         </el-card>
       </el-col>
     </el-row>
@@ -110,11 +176,13 @@ import { Bell, Document, User, UserFilled } from "@element-plus/icons-vue";
 import { useRouter } from "vue-router";
 import AuditLogAPI from "@/api/sysadmin/audit-log";
 import NoticeAPI from "@/api/system/notice";
-import StatisticsAPI from "@/api/system/statistics";
+import GatewayApiRouteAPI from "@/api/gateway-admin/gateway-api-route";
+import OnlineUserAPI from "@/api/auth/online-user";
 import { useOnlineCount } from "@/composables";
 import { useUserStore } from "@/store/modules/user";
 import { hasPerm } from "@/utils/auth";
-import type { AuditLogItem, NoticeItem, VisitStatsDetail, VisitTrendDetail } from "@/types/api";
+import type { AuditLogItem, GatewayInstanceRuntime, NoticeItem } from "@/types/api";
+import { aggregateDashboardTrend } from "./presentation";
 
 defineOptions({ name: "Dashboard", inheritAttrs: false });
 
@@ -123,75 +191,347 @@ const userStore = useUserStore();
 const { onlineUserCount, lastUpdateTime, isConnected } = useOnlineCount();
 const visitTrendDateRange = ref(7);
 const visitTrendChartOptions = ref();
-const visitStatsLoading = ref(true);
 const noticeLoading = ref(true);
 const auditLoading = ref(true);
 const notices = ref<NoticeItem[]>([]);
 const auditLogs = ref<AuditLogItem[]>([]);
-const visitStats = ref<VisitStatsDetail>({ todayUvCount: 0, uvGrowthRate: 0, totalUvCount: 0, todayPvCount: 0, pvGrowthRate: 0, totalPvCount: 0 });
+const onlineUserTotal = ref<number | null>(null);
+const onlineUserAvailable = ref(false);
+const monitoringAvailable = ref<boolean | null>(null);
+const gatewayInstances = ref<GatewayInstanceRuntime[]>([]);
+const dashboardUpdatedAt = ref(0);
 
 const greetings = computed(() => {
   const hour = new Date().getHours();
-  const prefix = hour < 12 ? '上午好' : hour < 18 ? '下午好' : '晚上好';
+  const prefix = hour < 12 ? "上午好" : hour < 18 ? "下午好" : "晚上好";
   return `${prefix}，${userStore.userInfo.nickname || userStore.userInfo.username}！`;
 });
-const formattedTime = computed(() => lastUpdateTime.value ? dayjs(lastUpdateTime.value).format('HH:mm:ss') : '--');
-const unreadNoticeCount = computed(() => notices.value.filter((notice) => notice.isRead !== 1).length);
-const canAccessAudit = computed(() => hasRoutePath('/sysadmin/audit-log'));
-const quickActions = computed(() => [
-  { label: '用户管理', path: '/system/user', icon: User, permission: 'sys:user:create' },
-  { label: '发布通知', path: '/system/notice', icon: Bell, permission: 'sys:notice:create' },
-  { label: '审计日志', path: '/sysadmin/audit-log', icon: Document },
-].filter((action) => hasRoutePath(action.path) && (!action.permission || hasPerm(action.permission))));
+const formattedTime = computed(() => {
+  const timestamp = lastUpdateTime.value || dashboardUpdatedAt.value;
+  return timestamp ? dayjs(timestamp).format("HH:mm:ss") : "--";
+});
+const displayOnlineUserCount = computed(() =>
+  isConnected.value && lastUpdateTime.value
+    ? onlineUserCount.value
+    : (onlineUserTotal.value ?? "--")
+);
+const healthyGatewayCount = computed(
+  () => gatewayInstances.value.filter((item) => item.healthy).length
+);
+const onlineServiceStatus = computed(() => onlineUserAvailable.value || isConnected.value);
+const unreadNoticeCount = computed(
+  () => notices.value.filter((notice) => notice.isRead !== 1).length
+);
+const canAccessAudit = computed(() => hasRoutePath("/sysadmin/audit-log"));
+const canAccessMonitoring = computed(() => hasRoutePath("/gateway/monitoring"));
+const quickActions = computed(() =>
+  [
+    { label: "用户管理", path: "/system/user", icon: User, permission: "sys:user:create" },
+    { label: "发布通知", path: "/system/notice", icon: Bell, permission: "sys:notice:create" },
+    { label: "审计日志", path: "/sysadmin/audit-log", icon: Document },
+  ].filter(
+    (action) => hasRoutePath(action.path) && (!action.permission || hasPerm(action.permission))
+  )
+);
 const metrics = computed(() => [
-  { label: '在线用户', value: onlineUserCount.value, hint: isConnected.value ? `实时更新于 ${formattedTime.value}` : '实时连接暂不可用', hintClass: isConnected.value ? 'is-success' : 'is-danger', tag: { text: '实时', type: 'danger' as const }, icon: UserFilled, iconClass: 'is-primary', path: hasRoutePath('/auth/online-user') ? '/auth/online-user' : undefined },
-  { label: '今日访客', value: visitStats.value.todayUvCount, hint: growthText(visitStats.value.uvGrowthRate), hintClass: growthClass(visitStats.value.uvGrowthRate), tag: { text: 'UV', type: 'success' as const }, icon: User, iconClass: 'is-success' },
-  { label: '今日浏览', value: visitStats.value.todayPvCount, hint: growthText(visitStats.value.pvGrowthRate), hintClass: growthClass(visitStats.value.pvGrowthRate), tag: { text: 'PV', type: 'primary' as const }, icon: Document, iconClass: 'is-warning' },
-  { label: '待处理通知', value: unreadNoticeCount.value, hint: noticeLoading.value ? '正在加载通知' : `共 ${notices.value.length} 条最新通知`, hintClass: 'is-muted', tag: { text: '待办', type: 'warning' as const }, icon: Bell, iconClass: 'is-danger', path: '/my-notice' },
+  {
+    label: "在线用户",
+    value: displayOnlineUserCount.value,
+    hint: onlineServiceStatus.value ? `最近更新于 ${formattedTime.value}` : "在线用户数据不可用",
+    hintClass: onlineServiceStatus.value ? "is-success" : "is-danger",
+    tag: { text: "实时", type: "danger" as const },
+    icon: UserFilled,
+    iconClass: "is-primary",
+    path: hasRoutePath("/auth/online-user") ? "/auth/online-user" : undefined,
+  },
+  {
+    label: "当前请求",
+    value: currentTps.value.toFixed(2),
+    hint: monitoringAvailable.value === false ? "Prometheus 不可用" : "网关请求 TPS",
+    hintClass: monitoringAvailable.value === false ? "is-danger" : "is-success",
+    tag: { text: "TPS", type: "primary" as const },
+    icon: Document,
+    iconClass: "is-warning",
+  },
+  {
+    label: "健康实例",
+    value: `${healthyGatewayCount.value}/${gatewayInstances.value.length || "--"}`,
+    hint: gatewayInstances.value.length ? "网关实例运行状态" : "实例状态不可用",
+    hintClass:
+      gatewayInstances.value.length && healthyGatewayCount.value === gatewayInstances.value.length
+        ? "is-success"
+        : "is-muted",
+    tag: { text: "状态", type: "success" as const },
+    icon: Document,
+    iconClass: "is-success",
+  },
+  {
+    label: "待处理通知",
+    value: unreadNoticeCount.value,
+    hint: noticeLoading.value ? "正在加载通知" : `共 ${notices.value.length} 条最新通知`,
+    hintClass: "is-muted",
+    tag: { text: "待办", type: "warning" as const },
+    icon: Bell,
+    iconClass: "is-danger",
+    path: "/my-notice",
+  },
 ]);
 
-function goTo(path: string) { router.push(path); }
-function hasRoutePath(path: string) { return router.resolve(path).matched.some((route) => route.path === path); }
-function formatDate(value?: Date) { return value ? dayjs(value).format('MM-DD HH:mm') : '--'; }
-function growthText(rate: number) { return rate === 0 ? '与昨日持平' : `较昨日${rate > 0 ? '增长' : '下降'} ${Math.abs(rate).toFixed(1)}%`; }
-function growthClass(rate: number) { return rate > 0 ? 'is-danger' : rate < 0 ? 'is-success' : 'is-muted'; }
-
-async function fetchOverview() {
-  try { visitStats.value = await StatisticsAPI.getVisitOverview(); } finally { visitStatsLoading.value = false; }
+function goTo(path: string) {
+  router.push(path);
+}
+function hasRoutePath(path: string) {
+  return router.resolve(path).matched.some((route) => route.path === path);
 }
+function formatDate(value?: Date) {
+  return value ? dayjs(value).format("MM-DD HH:mm") : "--";
+}
+const currentTps = computed(() => trendPoints.value.at(-1)?.tps ?? 0);
+const trendPoints = ref<ReturnType<typeof aggregateDashboardTrend>>([]);
+
 async function fetchNotices() {
-  try { notices.value = (await NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 5 })).data; } finally { noticeLoading.value = false; }
+  try {
+    notices.value = (await NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 5 })).data;
+  } finally {
+    noticeLoading.value = false;
+  }
 }
 async function fetchAuditLogs() {
-  try { auditLogs.value = (await AuditLogAPI.getPage({ pageNum: 1, pageSize: 5 })).data; } finally { auditLoading.value = false; }
+  try {
+    auditLogs.value = (await AuditLogAPI.getPage({ pageNum: 1, pageSize: 5 })).data;
+  } finally {
+    auditLoading.value = false;
+  }
 }
 async function fetchTrend() {
-  const endDate = dayjs();
-  const data = await StatisticsAPI.getVisitTrend({ startDate: endDate.subtract(visitTrendDateRange.value - 1, 'day').format('YYYY-MM-DD'), endDate: endDate.format('YYYY-MM-DD') });
-  updateTrend(data);
+  if (!canAccessMonitoring.value) return;
+  try {
+    const history = await GatewayApiRouteAPI.getRouteHistory({
+      range: `${visitTrendDateRange.value}d`,
+    });
+    trendPoints.value = aggregateDashboardTrend(history);
+    updateTrend();
+  } catch {
+    trendPoints.value = [];
+    updateTrend();
+  }
 }
-function updateTrend(data: VisitTrendDetail) {
-  visitTrendChartOptions.value = { tooltip: { trigger: 'axis' }, legend: { data: ['浏览量 (PV)', '访客量 (UV)'], bottom: 0 }, grid: { left: '2%', right: '4%', bottom: '12%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: data.dates }, yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } } }, series: [ { name: '浏览量 (PV)', type: 'line', smooth: true, data: data.pvList, areaStyle: { color: 'rgba(64, 158, 255, .12)' }, itemStyle: { color: '#409eff' } }, { name: '访客量 (UV)', type: 'line', smooth: true, data: data.uvList, areaStyle: { color: 'rgba(103, 194, 58, .12)' }, itemStyle: { color: '#67c23a' } } ] };
+function updateTrend() {
+  visitTrendChartOptions.value = {
+    tooltip: { trigger: "axis" },
+    legend: { data: ["请求 TPS", "错误 TPS"], bottom: 0 },
+    grid: { left: "2%", right: "4%", bottom: "12%", containLabel: true },
+    xAxis: { type: "time" },
+    yAxis: { type: "value", splitLine: { lineStyle: { type: "dashed" } } },
+    series: [
+      {
+        name: "请求 TPS",
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        data: trendPoints.value.map((point) => [point.timestamp * 1000, point.tps]),
+        areaStyle: { color: "rgba(64, 158, 255, .12)" },
+        itemStyle: { color: "#409eff" },
+      },
+      {
+        name: "错误 TPS",
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        data: trendPoints.value.map((point) => [point.timestamp * 1000, point.errorTps]),
+        areaStyle: { color: "rgba(245, 108, 108, .12)" },
+        itemStyle: { color: "#f56c6c" },
+      },
+    ],
+  };
+}
+
+async function fetchDashboardStatus() {
+  const [onlineResult, monitoringResult, runtimeResult] = await Promise.allSettled([
+    OnlineUserAPI.list({ pageNum: 1, pageSize: 1 }),
+    GatewayApiRouteAPI.getMonitoringStatus(),
+    GatewayApiRouteAPI.getRuntimeSnapshots(),
+  ]);
+  if (onlineResult.status === "fulfilled") {
+    onlineUserTotal.value = onlineResult.value.page.total;
+    onlineUserAvailable.value = true;
+  }
+  if (monitoringResult.status === "fulfilled")
+    monitoringAvailable.value = monitoringResult.value.available;
+  if (runtimeResult.status === "fulfilled") gatewayInstances.value = runtimeResult.value;
+  dashboardUpdatedAt.value = Date.now();
 }
 
 watch(visitTrendDateRange, fetchTrend, { immediate: true });
-onMounted(() => { void fetchOverview(); void fetchNotices(); if (canAccessAudit.value) void fetchAuditLogs(); });
+onMounted(() => {
+  void fetchDashboardStatus();
+  void fetchNotices();
+  if (canAccessAudit.value) void fetchAuditLogs();
+});
 </script>
 
 <style lang="scss" scoped>
-.dashboard-container { padding: 24px; background: var(--el-fill-color-light); }
-.welcome-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; background: linear-gradient(120deg, var(--el-color-primary-light-9), #fff); border: 1px solid var(--el-border-color-lighter); border-radius: 12px; }
-.welcome-card__main { display: flex; gap: 16px; align-items: center; h1 { margin: 0 0 8px; font-size: 20px; } p { margin: 0; color: var(--el-text-color-secondary); } }
-.welcome-card__actions { display: flex; flex-wrap: wrap; gap: 4px; }
-.metric-grid, .dashboard-row { margin-top: 16px; }
-.metric-grid :deep(.el-col) { margin-bottom: 16px; }
-.metric-card { height: 150px; cursor: pointer; transition: transform .2s, box-shadow .2s; &:hover { transform: translateY(-2px); box-shadow: var(--el-box-shadow-light); } }
-.metric-card__header, .metric-card__content, .card-header, .status-line { display: flex; align-items: center; justify-content: space-between; }
-.metric-card__header { color: var(--el-text-color-secondary); }.metric-card__content { margin: 18px 0 10px; strong { font-size: 28px; line-height: 1; } .el-icon { font-size: 30px; } }.metric-card p { margin: 0; font-size: 13px; }
-.is-primary { color: var(--el-color-primary); }.is-success { color: var(--el-color-success); }.is-warning { color: var(--el-color-warning); }.is-danger { color: var(--el-color-danger); }.is-muted { color: var(--el-text-color-secondary); }
-.trend-card, .side-card, .audit-card { height: 100%; }.dashboard-row__aside { margin-top: 0; }.side-card :deep(.el-card__body) { min-height: 340px; }.audit-card :deep(.el-card__body) { min-height: 208px; }
-.notice-list { display: flex; flex-direction: column; }.notice-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 12px 0; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--el-border-color-lighter); cursor: pointer; span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } time { font-size: 12px; color: var(--el-text-color-secondary); } }
-.status-line { padding: 14px 0; border-bottom: 1px solid var(--el-border-color-lighter); &:last-child { border-bottom: 0; } }
-@media (max-width: 1199px) { .dashboard-row__aside { margin-top: 16px; }.side-card :deep(.el-card__body) { min-height: auto; } }
-@media (max-width: 767px) { .dashboard-container { padding: 16px; }.welcome-card { align-items: flex-start; flex-direction: column; }.welcome-card__actions { width: 100%; }.notice-item { grid-template-columns: auto minmax(0, 1fr); time { display: none; } } }
+.dashboard-container {
+  padding: 24px;
+  background: var(--el-fill-color-light);
+}
+.welcome-card {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px;
+  background: linear-gradient(120deg, var(--el-color-primary-light-9), #fff);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 12px;
+}
+.welcome-card__main {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  h1 {
+    margin: 0 0 8px;
+    font-size: 20px;
+  }
+  p {
+    margin: 0;
+    color: var(--el-text-color-secondary);
+  }
+}
+.welcome-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.metric-grid,
+.dashboard-row {
+  margin-top: 16px;
+}
+.metric-grid :deep(.el-col) {
+  margin-bottom: 16px;
+}
+.metric-card {
+  height: 150px;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  &:hover {
+    box-shadow: var(--el-box-shadow-light);
+    transform: translateY(-2px);
+  }
+}
+.metric-card__header,
+.metric-card__content,
+.card-header,
+.status-line {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.metric-card__header {
+  color: var(--el-text-color-secondary);
+}
+.metric-card__content {
+  margin: 18px 0 10px;
+  strong {
+    font-size: 28px;
+    line-height: 1;
+  }
+  .el-icon {
+    font-size: 30px;
+  }
+}
+.metric-card p {
+  margin: 0;
+  font-size: 13px;
+}
+.is-primary {
+  color: var(--el-color-primary);
+}
+.is-success {
+  color: var(--el-color-success);
+}
+.is-warning {
+  color: var(--el-color-warning);
+}
+.is-danger {
+  color: var(--el-color-danger);
+}
+.is-muted {
+  color: var(--el-text-color-secondary);
+}
+.trend-card,
+.side-card,
+.audit-card {
+  height: 100%;
+}
+.dashboard-row__aside {
+  margin-top: 0;
+}
+.side-card :deep(.el-card__body) {
+  min-height: 340px;
+}
+.audit-card :deep(.el-card__body) {
+  min-height: 208px;
+}
+.notice-list {
+  display: flex;
+  flex-direction: column;
+}
+.notice-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  padding: 12px 0;
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  time {
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+  }
+}
+.status-line {
+  padding: 14px 0;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+@media (max-width: 1199px) {
+  .dashboard-row__aside {
+    margin-top: 16px;
+  }
+  .side-card :deep(.el-card__body) {
+    min-height: auto;
+  }
+}
+@media (max-width: 767px) {
+  .dashboard-container {
+    padding: 16px;
+  }
+  .welcome-card {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .welcome-card__actions {
+    width: 100%;
+  }
+  .notice-item {
+    grid-template-columns: auto minmax(0, 1fr);
+    time {
+      display: none;
+    }
+  }
+}
 </style>
diff --git a/src/views/dashboard/presentation.ts b/src/views/dashboard/presentation.ts
new file mode 100644
index 00000000..8295140d
--- /dev/null
+++ b/src/views/dashboard/presentation.ts
@@ -0,0 +1,32 @@
+import { matrix } from "@/views/system/gateway/monitoring/history-chart";
+import type { MonitoringHistory } from "@/types/api/gateway-api-route";
+
+export interface DashboardTrendPoint {
+  timestamp: number;
+  tps: number;
+  errorTps: number;
+}
+
+/** 将网关监控接口返回的多路 Prometheus 矩阵聚合为首页趋势点。 */
+export function aggregateDashboardTrend(history?: MonitoringHistory): DashboardTrendPoint[] {
+  const points = new Map<number, DashboardTrendPoint>();
+  addSeries(points, matrix(history?.series.tps), "tps");
+  addSeries(points, matrix(history?.series.errorTps), "errorTps");
+  return [...points.values()].sort((left, right) => left.timestamp - right.timestamp);
+}
+
+function addSeries(
+  points: Map<number, DashboardTrendPoint>,
+  series: Array<{ values: Array<[number, string]> }>,
+  key: "tps" | "errorTps"
+) {
+  for (const item of series) {
+    for (const [timestamp, rawValue] of item.values) {
+      const value = Number(rawValue);
+      if (!Number.isFinite(value)) continue;
+      const point = points.get(timestamp) || { timestamp, tps: 0, errorTps: 0 };
+      point[key] += value;
+      points.set(timestamp, point);
+    }
+  }
+}
diff --git a/src/views/security/online-user/index.vue b/src/views/security/online-user/index.vue
index d14d9430..a59c6d76 100644
--- a/src/views/security/online-user/index.vue
+++ b/src/views/security/online-user/index.vue
@@ -87,6 +87,13 @@
         </el-table-column>
       </el-table>
     </el-card>
+    <pagination
+      v-if="total > 0"
+      v-model:total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="fetchData"
+    />
   </div>
 </template>
 
@@ -103,8 +110,11 @@ defineOptions({
 const queryFormRef = ref();
 const loading = ref(false);
 const onlineUsers = ref<OnlineUserItem[]>([]);
+const total = ref(0);
 
 const queryParams = reactive<OnlineUserQueryParams>({
+  pageNum: 1,
+  pageSize: 10,
   username: "",
 });
 
@@ -112,7 +122,8 @@ function fetchData() {
   loading.value = true;
   OnlineUserAPI.list(queryParams)
     .then((data) => {
-      onlineUsers.value = data ?? [];
+      onlineUsers.value = data.data ?? [];
+      total.value = data.page?.total ?? 0;
     })
     .finally(() => {
       loading.value = false;
@@ -120,11 +131,13 @@ function fetchData() {
 }
 
 function handleQuery() {
+  queryParams.pageNum = 1;
   fetchData();
 }
 
 function handleResetQuery() {
   queryFormRef.value?.resetFields();
+  queryParams.pageNum = 1;
   fetchData();
 }
 
diff --git a/tests/unit/views/dashboard-presentation.test.ts b/tests/unit/views/dashboard-presentation.test.ts
new file mode 100644
index 00000000..ea81c333
--- /dev/null
+++ b/tests/unit/views/dashboard-presentation.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+
+import { aggregateDashboardTrend } from "@/views/dashboard/presentation";
+
+describe("dashboard presentation", () => {
+  it("aggregates request and error series across routes", () => {
+    const result = aggregateDashboardTrend({
+      range: "7d",
+      start: "2026-09-12T00:00:00Z",
+      end: "2026-09-19T00:00:00Z",
+      stepSeconds: 3600,
+      series: {
+        tps: JSON.stringify({
+          data: {
+            result: [
+              {
+                metric: { routeId: "a" },
+                values: [
+                  [100, "2"],
+                  [200, "3"],
+                ],
+              },
+              {
+                metric: { routeId: "b" },
+                values: [
+                  [100, "1.5"],
+                  [200, "bad"],
+                ],
+              },
+            ],
+          },
+        }),
+        errorTps: JSON.stringify({
+          data: { result: [{ metric: { routeId: "a" }, values: [[100, "0.5"]] }] },
+        }),
+      },
+    });
+
+    expect(result).toEqual([
+      { timestamp: 100, tps: 3.5, errorTps: 0.5 },
+      { timestamp: 200, tps: 3, errorTps: 0 },
+    ]);
+  });
+});