diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 9a3b2a5..5f3cff6 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -116,7 +116,7 @@ export default {
   },
   "dashboard": {
     "title": "Dashboard",
-    "subtitle": "System & Core Overview",
+    "subtitle": "Runtime, system monitoring and traffic overview",
     "status": "Core Status",
     "running": "Running",
     "stoppedStatus": "Stopped",
@@ -170,6 +170,14 @@ export default {
     "coreName": "Mihomo",
     "tcp": "TCP",
     "udp": "UDP"
+    "systemCpu": "System CPU",
+    "systemMemory": "System Memory",
+    "systemDisk": "System Disk",
+    "recentActive": "Active in recent window",
+    "lastUpdated": "Last updated",
+    "autoRefresh": "Auto refresh",
+    "autoRefreshPaused": "Auto refresh paused",
+    "pause": "Pause",
   },
   "listeners": {
     "subtitle": "Create and manage Mihomo inbound listeners.",
diff --git a/frontend/src/i18n/locales/zh-CN.ts b/frontend/src/i18n/locales/zh-CN.ts
index 00fd356..0509624 100644
--- a/frontend/src/i18n/locales/zh-CN.ts
+++ b/frontend/src/i18n/locales/zh-CN.ts
@@ -116,7 +116,7 @@ export default {
   },
   "dashboard": {
     "title": "仪表盘",
-    "subtitle": "系统与核心状态概览",
+    "subtitle": "运行时、系统监控与流量概览",
     "status": "核心状态",
     "running": "运行中",
     "stoppedStatus": "已停止",
@@ -170,6 +170,14 @@ export default {
     "coreName": "Mihomo",
     "tcp": "TCP",
     "udp": "UDP"
+    "systemCpu": "系统 CPU",
+    "systemMemory": "系统内存",
+    "systemDisk": "系统硬盘",
+    "recentActive": "最近窗口活跃",
+    "lastUpdated": "最后更新",
+    "autoRefresh": "自动刷新",
+    "autoRefreshPaused": "自动刷新已暂停",
+    "pause": "暂停",
   },
   "listeners": {
     "subtitle": "创建与管理 Mihomo 入站节点。",
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index cd9ffca..89c5c9c 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -1,5 +1,17 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Button, Card, Col, Row, Space, Typography, message, theme } from 'antd';
+import {
+  Button,
+  Card,
+  Col,
+  Progress,
+  Row,
+  Space,
+  Table,
+  Typography,
+  message,
+  theme,
+  Tag,
+} from 'antd';
 import { Link } from 'react-router-dom';
 import { IconPlay, IconStop, IconRestart } from '../icons';
 import {
@@ -9,7 +21,6 @@ import {
   restartMihomo,
   isTransientNetworkError,
   type DashboardResponse,
-  type ProcessUsageSample,
 } from '../api/system';
 import { isCanceledError } from '../api/client';
 import { useI18n } from '../i18n';
@@ -17,12 +28,10 @@ import useIsMobile from '../hooks/useIsMobile';
 import { formatBytes } from '../utils/format';
 import { startVisiblePolling } from '../utils/visiblePolling';
 
-const { Text } = Typography;
+const { Text, Title } = Typography;
 
-/** Dashboard refresh cadence — CPU, memory and traffic rates read as live. */
 const DASHBOARD_POLL_MS = 1000;
-/** Ring buffer length for sparklines / speed chart (~2 min at 1 Hz). */
-const HISTORY_LEN = 120;
+const HISTORY_LEN = 90;
 
 const formatRate = (bps: number) => `${formatBytes(bps)}/s`;
 const clampPct = (v: unknown) => {
@@ -38,573 +47,500 @@ function pushHistory(buf: number[], value: number, max = HISTORY_LEN): number[]
   return next;
 }
 
-/** Compact metric sparkline — thin stroke, no soft blob fill. */
-const Sparkline: React.FC<{
-  data: number[];
-  color: string;
-  height?: number;
-}> = ({ data, color, height = 32 }) => {
-  const w = 160;
-  const h = height;
-  if (data.length < 2) {
-    return <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" aria-hidden />;
-  }
-  const min = Math.min(...data);
-  const max = Math.max(...data);
-  const span = max - min || 1;
-  const coords = data.map((v, i) => {
-    const x = (i / (data.length - 1)) * w;
-    const y = h - ((v - min) / span) * (h - 6) - 3;
-    return [x, y] as const;
-  });
-  // Straight segments only (no smooth curve) — reads like a real counter strip.
-  const line = coords.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
-  const baseline = coords.map(([x]) => `${x.toFixed(1)},${(h - 1).toFixed(1)}`).join(' ');
-  return (
-    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ display: 'block' }} aria-hidden>
-      <polyline points={baseline} fill="none" stroke={color} strokeOpacity={0.1} strokeWidth={1} />
-      <polyline
-        points={line}
-        fill="none"
-        stroke={color}
-        strokeWidth={1.15}
-        strokeLinejoin="miter"
-        strokeLinecap="square"
-        vectorEffect="non-scaling-stroke"
-      />
-    </svg>
-  );
-};
-
-/** Single-series total rate chart — one muted stroke, plain grid. */
-/** Up/down rate chart — same muted color; down solid, up dashed. */
-const SpeedChart: React.FC<{
-  up: number[];
-  down: number[];
-  color: string;
-  height?: number;
-}> = ({ up, down, color, height = 160 }) => {
-  const w = 480;
-  const h = height;
-  const n = Math.max(up.length, down.length, 2);
-  const pad = (series: number[]) =>
-    series.length < n ? Array(n - series.length).fill(0).concat(series) : series.slice(-n);
-  const upS = pad(up);
-  const downS = pad(down);
-  const max = Math.max(...upS, ...downS, 1);
-  const toPts = (series: number[]) =>
-    series
-      .map((v, i) => {
-        const x = (i / (n - 1)) * w;
-        const y = h - (Math.max(0, v) / max) * (h - 12) - 6;
-        return `${x.toFixed(1)},${y.toFixed(1)}`;
-      })
-      .join(' ');
-  return (
-    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ display: 'block' }} aria-hidden>
-      {[0, 0.5, 1].map((p) => (
-        <line
-          key={p}
-          x1={0}
-          x2={w}
-          y1={6 + (h - 12) * p}
-          y2={6 + (h - 12) * p}
-          stroke="currentColor"
-          strokeOpacity={0.1}
-          strokeWidth={1}
-        />
-      ))}
-      <polyline
-        points={toPts(downS)}
-        fill="none"
-        stroke={color}
-        strokeWidth={1.25}
-        strokeLinejoin="miter"
-        strokeLinecap="square"
-        vectorEffect="non-scaling-stroke"
-      />
-      <polyline
-        points={toPts(upS)}
-        fill="none"
-        stroke={color}
-        strokeWidth={1.15}
-        strokeOpacity={0.55}
-        strokeDasharray="4 3"
-        strokeLinejoin="miter"
-        strokeLinecap="square"
-        vectorEffect="non-scaling-stroke"
-      />
-    </svg>
-  );
-};
-
-type MetricCardProps = {
+/** m-ui style metric card: title + icon slot, big number, optional progress / hint */
+const MetricCard: React.FC<{
   title: string;
-  value: string;
-  unit?: string;
-  detail?: string;
-  peak?: string;
-  series: number[];
-  color: string;
-  isMobile: boolean;
-};
-
-const MetricCard: React.FC<MetricCardProps> = ({ title, value, unit, detail, peak, series, color, isMobile }) => {
+  value: React.ReactNode;
+  hint?: React.ReactNode;
+  progress?: number;
+  progressColor?: string;
+  loading?: boolean;
+}> = ({ title, value, hint, progress, progressColor, loading }) => {
   const { token } = theme.useToken();
   return (
     <Card
       size="small"
-      styles={{
-        body: { padding: isMobile ? 12 : 16 },
-      }}
-      style={{ height: '100%', borderRadius: 12 }}
+      loading={loading}
+      styles={{ body: { padding: '16px 18px' } }}
+      style={{ borderRadius: 10, height: '100%' }}
     >
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
-        <Text type="secondary" style={{ fontSize: 12, fontWeight: 500, letterSpacing: '0.04em' }}>
-          {title}
-        </Text>
-        {peak ? (
-          <Text type="secondary" style={{ fontSize: 11 }}>
-            {peak}
-          </Text>
-        ) : null}
+      <div style={{ fontSize: 13, fontWeight: 500, color: token.colorTextSecondary, marginBottom: 8 }}>
+        {title}
       </div>
-      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 4 }}>
-        <span
-          style={{
-            fontSize: isMobile ? 24 : 28,
-            fontWeight: 600,
-            lineHeight: 1.1,
-            fontVariantNumeric: 'tabular-nums',
-            letterSpacing: '-0.02em',
-            color: token.colorText,
-          }}
-        >
-          {value}
-        </span>
-        {unit ? (
-          <Text type="secondary" style={{ fontSize: 14, fontWeight: 500 }}>
-            {unit}
-          </Text>
-        ) : null}
+      <div
+        style={{
+          fontSize: 26,
+          fontWeight: 700,
+          lineHeight: 1.2,
+          fontVariantNumeric: 'tabular-nums',
+          letterSpacing: '-0.02em',
+        }}
+      >
+        {value}
       </div>
-      {detail ? (
-        <div style={{ fontSize: 11, color: token.colorTextSecondary, marginBottom: 6, lineHeight: 1.3 }}>{detail}</div>
-      ) : (
-        <div style={{ height: 14, marginBottom: 6 }} />
-      )}
-      <Sparkline data={series} color={color} height={isMobile ? 26 : 30} />
+      {progress != null ? (
+        <Progress
+          percent={clampPct(progress)}
+          showInfo={false}
+          size="small"
+          strokeColor={progressColor || token.colorPrimary}
+          trailColor={token.colorFillSecondary}
+          style={{ marginTop: 12, marginBottom: 0 }}
+        />
+      ) : null}
+      {hint ? (
+        <div style={{ marginTop: 8, fontSize: 12, color: token.colorTextSecondary }}>{hint}</div>
+      ) : null}
     </Card>
   );
 };
 
-type HistoryState = {
-  cpu: number[];
-  mem: number[];
-  disk: number[];
-  up: number[];
-  down: number[];
-  tcp: number[];
-  udp: number[];
+const RateChart: React.FC<{ up: number[]; down: number[]; height?: number }> = ({
+  up,
+  down,
+  height = 160,
+}) => {
+  const { token } = theme.useToken();
+  const w = 480;
+  const h = height;
+  const max = Math.max(1, ...up, ...down);
+  const path = (data: number[]) => {
+    if (data.length < 2) return '';
+    return data
+      .map((v, i) => {
+        const x = (i / (data.length - 1)) * w;
+        const y = h - (v / max) * (h - 12) - 6;
+        return `${x.toFixed(1)},${y.toFixed(1)}`;
+      })
+      .join(' ');
+  };
+  return (
+    <svg
+      width="100%"
+      height={h}
+      viewBox={`0 0 ${w} ${h}`}
+      preserveAspectRatio="none"
+      style={{ display: 'block' }}
+      aria-hidden
+    >
+      {[0.25, 0.5, 0.75].map((f) => (
+        <line
+          key={f}
+          x1={0}
+          x2={w}
+          y1={h * f}
+          y2={h * f}
+          stroke={token.colorBorderSecondary}
+          strokeDasharray="3 3"
+        />
+      ))}
+      <polyline points={path(down)} fill="none" stroke={token.colorSuccess} strokeWidth={2} strokeLinejoin="round" />
+      <polyline
+        points={path(up)}
+        fill="none"
+        stroke={token.colorError}
+        strokeWidth={2}
+        strokeLinejoin="round"
+        strokeDasharray="4 3"
+      />
+    </svg>
+  );
 };
 
-const emptyHistory = (): HistoryState => ({
-  cpu: [],
-  mem: [],
-  disk: [],
-  up: [],
-  down: [],
-  tcp: [],
-  udp: [],
-});
-
-const Dashboard: React.FC = () => {
+const DashboardPage: React.FC = () => {
   const { t } = useI18n();
-  const isMobile = useIsMobile();
   const { token } = theme.useToken();
+  const isMobile = useIsMobile();
   const [data, setData] = useState<DashboardResponse | null>(null);
-  const [busy, setBusy] = useState(false);
-  const [hist, setHist] = useState<HistoryState>(emptyHistory);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState(false);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [updatedAt, setUpdatedAt] = useState<Date | null>(null);
+  const [hist, setHist] = useState({ up: [] as number[], down: [] as number[] });
 
   const load = useCallback(async (signal?: AbortSignal) => {
     try {
-      const d = await fetchDashboard(signal);
-      if (signal?.aborted) return;
-      setData(d);
-      const sys = d.system;
-      const tr = d.traffic;
+      const res = await fetchDashboard(signal);
+      setData(res);
+      setUpdatedAt(new Date());
       setHist((prev) => ({
-        cpu: pushHistory(prev.cpu, clampPct(sys?.cpu?.percent)),
-        mem: pushHistory(prev.mem, clampPct(sys?.memory?.percent)),
-        disk: pushHistory(prev.disk, clampPct(sys?.disk?.percent)),
-        up: pushHistory(prev.up, Number(tr?.uploadRate) || 0),
-        down: pushHistory(prev.down, Number(tr?.downloadRate) || 0),
-        tcp: pushHistory(prev.tcp, Number(tr?.tcpConnections) || 0),
-        udp: pushHistory(prev.udp, Number(tr?.udpConnections) || 0),
+        up: pushHistory(prev.up, Number(res.traffic?.uploadRate) || 0),
+        down: pushHistory(prev.down, Number(res.traffic?.downloadRate) || 0),
       }));
-    } catch (e: unknown) {
-      if (signal?.aborted || isCanceledError(e)) return;
-      const msg = e instanceof Error ? e.message : t('dashboard.unavailable');
-      message.error(msg || t('dashboard.unavailable'));
-    }
-  }, [t]);
-
-  useEffect(() => startVisiblePolling((signal) => load(signal), DASHBOARD_POLL_MS), [load]);
-
-  const act = async (a: 'start' | 'stop' | 'restart') => {
-    setBusy(true);
-    try {
-      if (a === 'start') await startMihomo();
-      else if (a === 'stop') await stopMihomo();
-      else await restartMihomo();
-      message.success(t(`dashboard.${a === 'start' ? 'started' : a === 'stop' ? 'stopped' : 'restarted'}`));
-      await load();
-    } catch (e: unknown) {
-      if (a === 'restart' && isTransientNetworkError(e)) {
-        await new Promise((r) => setTimeout(r, 1500));
-        try {
-          await load();
-          message.success(t('dashboard.restarted'));
-          return;
-        } catch {
-          /* fall through */
-        }
-      }
-      const msg = e instanceof Error ? e.message : t('dashboard.operationFailed');
-      message.error(msg || t('dashboard.operationFailed'));
+    } catch (e) {
+      if (isCanceledError(e)) return;
     } finally {
-      setBusy(false);
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!autoRefresh) {
+      load();
+      return;
+    }
+    return startVisiblePolling(() => load(), DASHBOARD_POLL_MS);
+  }, [load, autoRefresh]);
+
+  const runAction = async (fn: () => Promise<unknown>, okMsg: string) => {
+    setActionLoading(true);
+    try {
+      await fn();
+      message.success(okMsg);
+      await load();
+    } catch (e: any) {
+      if (isTransientNetworkError(e)) {
+        message.success(okMsg);
+        setTimeout(() => load(), 1500);
+      } else {
+        message.error(e?.message || t('common.error'));
+      }
+    } finally {
+      setActionLoading(false);
     }
   };
 
+  const mihomo = data?.mihomo;
+  const running = !!mihomo?.running;
   const sys = data?.system;
-  const users = data?.users;
   const traffic = data?.traffic;
-  const panel: ProcessUsageSample | undefined = data?.panel;
-  const core: ProcessUsageSample | undefined = data?.core;
-  const coreRunning = !!data?.mihomo?.running;
+  const users = data?.users;
+  const panel = data?.panel;
+  const core = data?.core;
 
   const cpuPct = clampPct(sys?.cpu?.percent);
   const memPct = clampPct(sys?.memory?.percent);
   const diskPct = clampPct(sys?.disk?.percent);
   const online = users?.online ?? traffic?.onlineUsers ?? 0;
-  const conns = traffic?.activeConnections ?? 0;
-  const tcpConns = traffic?.tcpConnections ?? 0;
-  const udpConns = traffic?.udpConnections ?? 0;
-  const upRate = traffic?.uploadRate || 0;
-  const downRate = traffic?.downloadRate || 0;
-  const peakUp = hist.up.length ? Math.max(0, ...hist.up) : 0;
-  const peakDown = hist.down.length ? Math.max(0, ...hist.down) : 0;
+  const upRate = Number(traffic?.uploadRate) || 0;
+  const downRate = Number(traffic?.downloadRate) || 0;
+  const tcp = Number(traffic?.tcpConnections) || 0;
+  const udp = Number(traffic?.udpConnections) || 0;
+  const active = Number(traffic?.activeConnections) || tcp + udp;
 
-  const gutter: [number, number] = isMobile ? [8, 8] : [12, 12];
+  const timeStr = updatedAt
+    ? updatedAt.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+    : '—';
+
+  const gutter: [number, number] = isMobile ? [10, 10] : [16, 16];
+  const showLoading = loading && !data;
 
   return (
-    <div className="page-root" style={{ display: 'block', maxWidth: 1400 }}>
-      {/* Top control bar — 3X-UI style */}
-      <Card
-        size="small"
-        styles={{ body: { padding: isMobile ? '10px 12px' : '12px 16px' } }}
-        style={{ marginBottom: isMobile ? 8 : 12, borderRadius: 12 }}
+    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
+      {/* Header — m-ui: title + subtitle + controls */}
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'flex-start',
+          justifyContent: 'space-between',
+          gap: 12,
+          marginBottom: isMobile ? 14 : 20,
+        }}
       >
-        <div
-          style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            alignItems: 'center',
-            gap: isMobile ? 8 : 12,
-            justifyContent: 'space-between',
-          }}
-        >
-          <Space size={8} wrap>
-            {!coreRunning ? (
-              <Button type="primary" icon={<IconPlay />} onClick={() => act('start')} loading={busy} size={isMobile ? 'middle' : 'middle'}>
-                {t('dashboard.start')}
-              </Button>
-            ) : null}
-            <Button icon={<IconRestart />} onClick={() => act('restart')} loading={busy}>
-              {t('dashboard.restart')}
-            </Button>
-            <Button icon={<IconStop />} danger onClick={() => act('stop')} loading={busy} disabled={!coreRunning}>
-              {t('dashboard.stop')}
-            </Button>
-            {!isMobile ? (
-              <>
-                <Link to="/logs"><Button type="link" size="small">{t('nav.logs')}</Button></Link>
-                <Link to="/config"><Button type="link" size="small">{t('nav.config')}</Button></Link>
-              </>
-            ) : null}
-          </Space>
+        <div>
+          <Title level={3} style={{ margin: 0, fontWeight: 700, letterSpacing: '-0.02em' }}>
+            {t('dashboard.title') || t('nav.dashboard') || '仪表盘'}
+          </Title>
+          <Text type="secondary" style={{ fontSize: 13 }}>
+            {t('dashboard.subtitle') || '运行时、系统监控与流量概览'}
+          </Text>
         </div>
-      </Card>
+        <Space wrap size={8}>
+          <Text type="secondary" style={{ fontSize: 12 }}>
+            {t('dashboard.lastUpdated') || '最后更新'}: {timeStr}
+          </Text>
+          <Text type="secondary" style={{ fontSize: 12 }}>
+            {autoRefresh
+              ? `${t('dashboard.autoRefresh') || '自动刷新'}: ${DASHBOARD_POLL_MS / 1000}s`
+              : t('dashboard.autoRefreshPaused') || '自动刷新已暂停'}
+          </Text>
+          <Button size="small" onClick={() => setAutoRefresh((v) => !v)}>
+            {autoRefresh ? t('dashboard.pause') || '暂停' : t('dashboard.autoRefresh') || '自动刷新'}
+          </Button>
+          <Tag
+            color={running ? 'success' : 'default'}
+            style={{ margin: 0, lineHeight: '24px', borderRadius: 6 }}
+          >
+            {running ? t('dashboard.running') || '运行中' : t('dashboard.stopped') || '已停止'}
+          </Tag>
+          <Button size="small" onClick={() => load()} loading={loading && !!data}>
+            {t('common.refresh') || '刷新'}
+          </Button>
+        </Space>
+      </div>
 
-      {/* Resource metric cards */}
-      <Row gutter={gutter} style={{ marginBottom: isMobile ? 8 : 12 }}>
-        <Col xs={12} sm={12} md={6}>
+      {/* Row 1 — system metrics (m-ui 4 cards) */}
+      <Row gutter={gutter} style={{ marginBottom: gutter[1] }}>
+        <Col xs={12} lg={6}>
           <MetricCard
-            title={t('dashboard.cpu')}
-            value={String(cpuPct)}
-            unit="%"
-            detail={undefined}
-            peak={hist.cpu.length ? `${t('dashboard.peak')} ${Math.max(...hist.cpu)}%` : undefined}
-            series={hist.cpu}
-            color={token.colorTextSecondary}
-            isMobile={isMobile}
+            loading={showLoading}
+            title={t('dashboard.systemCpu') || '系统 CPU'}
+            value={`${cpuPct.toFixed(1)}%`}
+            progress={cpuPct}
           />
         </Col>
-        <Col xs={12} sm={12} md={6}>
+        <Col xs={12} lg={6}>
           <MetricCard
-            title={t('dashboard.memory')}
-            value={String(memPct)}
-            unit="%"
-            detail={`${formatBytes(sys?.memory?.used || 0)} / ${formatBytes(sys?.memory?.total || 0)}`}
-            peak={hist.mem.length ? `${t('dashboard.avg')} ${Math.round((hist.mem.reduce((a, b) => a + b, 0) / hist.mem.length) * 10) / 10}%` : undefined}
-            series={hist.mem}
-            color={token.colorTextSecondary}
-            isMobile={isMobile}
+            loading={showLoading}
+            title={t('dashboard.systemMemory') || '系统内存'}
+            value={`${memPct.toFixed(1)}%`}
+            progress={memPct}
+            progressColor="#f59e0b"
+            hint={
+              sys
+                ? `${formatBytes(sys.memory.used)} / ${formatBytes(sys.memory.total)}`
+                : undefined
+            }
           />
         </Col>
-        <Col xs={12} sm={12} md={6}>
+        <Col xs={12} lg={6}>
           <MetricCard
-            title={t('dashboard.disk')}
-            value={String(diskPct)}
-            unit="%"
-            detail={`${formatBytes(sys?.disk?.used || 0)} / ${formatBytes(sys?.disk?.total || 0)}`}
-            peak={sys?.disk?.total ? `${t('dashboard.free')} ${formatBytes(Math.max(0, (sys?.disk?.total || 0) - (sys?.disk?.used || 0)))}` : undefined}
-            series={hist.disk}
-            color={token.colorTextSecondary}
-            isMobile={isMobile}
+            loading={showLoading}
+            title={t('dashboard.systemDisk') || '系统硬盘'}
+            value={`${diskPct.toFixed(1)}%`}
+            progress={diskPct}
+            progressColor="#10b981"
+            hint={
+              sys ? `${formatBytes(sys.disk.used)} / ${formatBytes(sys.disk.total)}` : undefined
+            }
           />
         </Col>
-        <Col xs={12} sm={12} md={6}>
+        <Col xs={12} lg={6}>
           <MetricCard
-            title={t('dashboard.users')}
-            value={String(online)}
-            unit=""
-            detail={`${t('dashboard.totalUsers')}: ${users?.total ?? 0} · ${t('dashboard.enabledUsers')}: ${users?.enabled ?? 0}`}
-            peak={`${t('dashboard.listeners')}: ${data?.listeners?.enabled ?? 0}/${data?.listeners?.total ?? 0}`}
-            series={hist.tcp.length ? hist.tcp.map((v, i) => v + (hist.udp[i] || 0)) : [0, online]}
-            color={token.colorTextSecondary}
-            isMobile={isMobile}
+            loading={showLoading}
+            title={t('dashboard.onlineUsers') || '在线用户'}
+            value={<span style={{ color: token.colorWarning }}>{online}</span>}
+            hint={t('dashboard.recentActive') || '最近窗口活跃'}
           />
         </Col>
       </Row>
 
-      {/* Speed chart + connection stats */}
-      <Row gutter={gutter} style={{ marginBottom: isMobile ? 8 : 12 }}>
-        <Col xs={24} lg={16}>
-          <Card
-            size="small"
-            styles={{ body: { padding: isMobile ? 12 : 16 } }}
-            style={{ height: '100%', borderRadius: 12 }}
-          >
-            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: 8, marginBottom: 8 }}>
-              <div>
-                <Text type="secondary" style={{ fontSize: 12, fontWeight: 500, letterSpacing: '0.04em' }}>
-                  {t('dashboard.traffic')}
-                </Text>
-                <div style={{ fontSize: 11, color: token.colorTextSecondary, marginTop: 2 }}>
-                  {t('dashboard.uploadRate')} · {t('dashboard.peak')} {formatRate(peakUp)} · {t('dashboard.downloadRate')} · {t('dashboard.peak')}{' '}
-                  {formatRate(peakDown)}
-                </div>
-              </div>
-              <Space size={16} wrap>
-                <span style={{ fontSize: isMobile ? 12 : 13 }}>
-                  <Text type="secondary">↑ {t('dashboard.upload')} </Text>
-                  <Text strong style={{ fontVariantNumeric: 'tabular-nums' }}>
-                    {formatRate(upRate)}
-                  </Text>
-                  <Text type="secondary" style={{ marginLeft: 4, fontSize: 11 }}>(···)</Text>
-                </span>
-                <span style={{ fontSize: isMobile ? 12 : 13 }}>
-                  <Text type="secondary">↓ {t('dashboard.download')} </Text>
-                  <Text strong style={{ fontVariantNumeric: 'tabular-nums' }}>
-                    {formatRate(downRate)}
-                  </Text>
-                  <Text type="secondary" style={{ marginLeft: 4, fontSize: 11 }}>(—)</Text>
-                </span>
-              </Space>
-            </div>
-            <SpeedChart
-              up={hist.up}
-              down={hist.down}
-              color={token.colorTextSecondary}
-              height={isMobile ? 120 : 160}
-            />
-            <Row gutter={8} style={{ marginTop: 12 }}>
-              <Col span={8}>
-                <Text type="secondary" style={{ fontSize: 11 }}>
-                  {t('dashboard.totalUpload')}
-                </Text>
-                <div style={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{formatBytes(traffic?.totalUpload || 0)}</div>
-              </Col>
-              <Col span={8}>
-                <Text type="secondary" style={{ fontSize: 11 }}>
-                  {t('dashboard.totalDownload')}
-                </Text>
-                <div style={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{formatBytes(traffic?.totalDownload || 0)}</div>
-              </Col>
-              <Col span={8}>
-                <Text type="secondary" style={{ fontSize: 11 }}>
-                  {t('dashboard.onlineUsers')}
-                </Text>
-                <div style={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{online}</div>
-              </Col>
-            </Row>
-          </Card>
+      {/* Row 2 — traffic / connections */}
+      <Row gutter={gutter} style={{ marginBottom: gutter[1] }}>
+        <Col xs={12} lg={6}>
+          <MetricCard
+            loading={showLoading}
+            title={t('dashboard.uploadRate') || '上行速率'}
+            value={formatRate(upRate)}
+            hint={`${t('dashboard.totalUpload') || '累计上传'} ${formatBytes(traffic?.totalUpload || 0)}`}
+          />
         </Col>
-        <Col xs={24} lg={8}>
-          <Card
-            size="small"
-            styles={{ body: { padding: isMobile ? 12 : 16 } }}
-            style={{ height: '100%', borderRadius: 12 }}
-          >
-            <Text type="secondary" style={{ fontSize: 12, fontWeight: 500, letterSpacing: '0.04em' }}>
-              {t('dashboard.activeConnections')}
-            </Text>
-            <div
-              style={{
-                fontSize: isMobile ? 28 : 32,
-                fontWeight: 600,
-                lineHeight: 1.2,
-                fontVariantNumeric: 'tabular-nums',
-                margin: '6px 0 4px',
-              }}
-            >
-              {conns}
-            </div>
-            <Text type="secondary" style={{ fontSize: 12 }}>
-              {t('dashboard.openSockets')}
-            </Text>
-            <div
-              style={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                gap: isMobile ? 12 : 16,
-                marginTop: 10,
-                fontSize: 12,
-              }}
-            >
-              <span>
-                <Text type="secondary">{t('dashboard.tcp')} </Text>
-                <Text strong style={{ fontVariantNumeric: 'tabular-nums' }}>{tcpConns}</Text>
-                <Text type="secondary" style={{ marginLeft: 4, fontSize: 11 }}>(—)</Text>
-              </span>
-              <span>
-                <Text type="secondary">{t('dashboard.udp')} </Text>
-                <Text strong style={{ fontVariantNumeric: 'tabular-nums' }}>{udpConns}</Text>
-                <Text type="secondary" style={{ marginLeft: 4, fontSize: 11 }}>(···)</Text>
-              </span>
-            </div>
-            <div style={{ marginTop: 12 }}>
-              <SpeedChart
-                up={hist.udp}
-                down={hist.tcp}
-                color={token.colorTextSecondary}
-                height={isMobile ? 48 : 64}
-              />
-            </div>
-            <div
-              style={{
-                marginTop: 16,
-                display: 'grid',
-                gridTemplateColumns: '1fr 1fr 1fr',
-                gap: 8,
-                textAlign: 'center',
-              }}
-            >
-              <div>
-                <div style={{ fontSize: 11, color: token.colorTextSecondary }}>{t('dashboard.total')}</div>
-                <div style={{ fontWeight: 600 }}>{data?.listeners?.total ?? 0}</div>
-              </div>
-              <div>
-                <div style={{ fontSize: 11, color: token.colorTextSecondary }}>{t('dashboard.enabled')}</div>
-                <div style={{ fontWeight: 600 }}>{data?.listeners?.enabled ?? 0}</div>
-              </div>
-              <div>
-                <div style={{ fontSize: 11, color: token.colorTextSecondary }}>{t('dashboard.disabled')}</div>
-                <div style={{ fontWeight: 600, color: token.colorError }}>{data?.listeners?.disabled ?? 0}</div>
-              </div>
-            </div>
-            <Text type="secondary" style={{ fontSize: 11, display: 'block', marginTop: 8, textAlign: 'center' }}>
-              {t('dashboard.listeners')}
-            </Text>
-          </Card>
+        <Col xs={12} lg={6}>
+          <MetricCard
+            loading={showLoading}
+            title={t('dashboard.downloadRate') || '下行速率'}
+            value={formatRate(downRate)}
+            hint={`${t('dashboard.totalDownload') || '累计下载'} ${formatBytes(traffic?.totalDownload || 0)}`}
+          />
+        </Col>
+        <Col xs={12} lg={6}>
+          <MetricCard
+            loading={showLoading}
+            title={t('dashboard.activeConnections') || '活跃连接'}
+            value={active}
+            hint={`TCP ${tcp} · UDP ${udp}`}
+          />
+        </Col>
+        <Col xs={12} lg={6}>
+          <MetricCard
+            loading={showLoading}
+            title={t('dashboard.listeners') || '节点'}
+            value={`${data?.listeners?.enabled ?? 0}/${data?.listeners?.total ?? 0}`}
+            hint={t('dashboard.enabled') || '已启用 / 全部'}
+          />
         </Col>
       </Row>
 
-      {/* Bottom strip: panel / core process */}
-      <Card size="small" styles={{ body: { padding: isMobile ? 10 : 14 } }} style={{ borderRadius: 12 }}>
-        <Row gutter={[12, 12]} align="middle">
-          <Col xs={12} sm={6} md={4}>
-            <Text type="secondary" style={{ fontSize: 11 }}>
-              {t('dashboard.uptime')}
-            </Text>
-            <div style={{ fontWeight: 600, fontSize: isMobile ? 13 : 14 }}>{data?.mihomo?.uptime || '—'}</div>
-            <Text type="secondary" style={{ fontSize: 11 }}>
-              {t('dashboard.coreName')}
-            </Text>
-          </Col>
-          <Col xs={12} sm={6} md={5}>
-            <Text type="secondary" style={{ fontSize: 11 }}>
-              {t('dashboard.panel')}
-            </Text>
-            <div style={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums', fontSize: isMobile ? 13 : 14 }}>
-              {panel?.memory_used != null ? formatBytes(panel.memory_used) : '—'}
-              {panel?.cpu_percent != null ? (
-                <Text type="secondary" style={{ fontWeight: 400, marginLeft: 6, fontSize: 12 }}>
-                  {t('dashboard.cpu')} {clampPct(panel.cpu_percent)}%
-                </Text>
-              ) : null}
-            </div>
-            <Text type="secondary" style={{ fontSize: 11 }}>
-              {panel?.pid ? `PID ${panel.pid}` : t('dashboard.panelUsage')}
-            </Text>
-          </Col>
-          <Col xs={12} sm={6} md={5}>
-            <Text type="secondary" style={{ fontSize: 11 }}>
-              {t('dashboard.core')}
-            </Text>
-            <div style={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums', fontSize: isMobile ? 13 : 14 }}>
-              {coreRunning && core?.memory_used != null ? formatBytes(core.memory_used) : '—'}
-              {coreRunning && core?.cpu_percent != null ? (
-                <Text type="secondary" style={{ fontWeight: 400, marginLeft: 6, fontSize: 12 }}>
-                  {t('dashboard.cpu')} {clampPct(core.cpu_percent)}%
-                </Text>
-              ) : null}
-            </div>
-            <Text type="secondary" style={{ fontSize: 11 }}>
-              {coreRunning && core?.pid ? `PID ${core.pid}` : t('dashboard.coreUsage')}
-            </Text>
-          </Col>
-          <Col xs={12} sm={6} md={5}>
-            <Text type="secondary" style={{ fontSize: 11 }}>
-              {t('dashboard.onlineUsers')}
-            </Text>
-            <div style={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums', fontSize: isMobile ? 13 : 14 }}>
-              {online}
-              <Text type="secondary" style={{ fontWeight: 400, marginLeft: 6, fontSize: 12 }}>
-                / {users?.total ?? 0}
+      {/* Row 3 — chart + runtime */}
+      <Row gutter={gutter} style={{ marginBottom: gutter[1] }}>
+        <Col xs={24} lg={14}>
+          <Card
+            size="small"
+            title={t('dashboard.traffic') || '实时流量'}
+            extra={
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                ↓ {formatRate(downRate)} · ↑ {formatRate(upRate)}
               </Text>
+            }
+            styles={{ body: { padding: 16 } }}
+            style={{ borderRadius: 10, height: '100%' }}
+          >
+            <div style={{ display: 'flex', gap: 16, marginBottom: 8, fontSize: 12, color: token.colorTextSecondary }}>
+              <span>
+                <span style={{ color: token.colorSuccess }}>━</span> {t('dashboard.download') || '下载'}
+              </span>
+              <span>
+                <span style={{ color: token.colorError }}>┄</span> {t('dashboard.upload') || '上传'}
+              </span>
             </div>
-            <Text type="secondary" style={{ fontSize: 11 }}>
-              {t('dashboard.enabledUsers')}: {users?.enabled ?? 0}
-            </Text>
-          </Col>
-          <Col xs={24} sm={24} md={5}>
-            <Text type="secondary" style={{ fontSize: 11 }}>
-              {t('dashboard.version')}
-            </Text>
-            <div style={{ fontWeight: 600, fontSize: isMobile ? 13 : 14, wordBreak: 'break-all' }}>
-              {data?.mihomo?.version || '—'}
+            <RateChart up={hist.up} down={hist.down} height={isMobile ? 140 : 180} />
+          </Card>
+        </Col>
+        <Col xs={24} lg={10}>
+          <Card
+            size="small"
+            title={
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+                Mihomo
+                <Tag color={running ? 'success' : 'default'} style={{ margin: 0 }}>
+                  {running ? t('dashboard.running') : t('dashboard.stopped')}
+                </Tag>
+              </span>
+            }
+            styles={{ body: { padding: 16 } }}
+            style={{ borderRadius: 10, height: '100%' }}
+          >
+            <div style={{ display: 'grid', gap: 10, fontSize: 13 }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <Text type="secondary">{t('dashboard.version') || '版本'}</Text>
+                <Text strong>{mihomo?.version || '—'}</Text>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <Text type="secondary">{t('dashboard.uptime') || '运行时间'}</Text>
+                <Text strong>{mihomo?.uptime || '—'}</Text>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <Text type="secondary">{t('dashboard.panel') || '面板'}</Text>
+                <Text strong>
+                  {panel?.memory_used != null ? formatBytes(panel.memory_used) : '—'}
+                  {panel?.cpu_percent != null ? ` · ${clampPct(panel.cpu_percent)}%` : ''}
+                  {panel?.pid ? ` · PID ${panel.pid}` : ''}
+                </Text>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <Text type="secondary">{t('dashboard.core') || '核心'}</Text>
+                <Text strong>
+                  {running && core?.memory_used != null ? formatBytes(core.memory_used) : '—'}
+                  {running && core?.cpu_percent != null ? ` · ${clampPct(core.cpu_percent)}%` : ''}
+                  {running && core?.pid ? ` · PID ${core.pid}` : ''}
+                </Text>
+              </div>
             </div>
-            <Text type="secondary" style={{ fontSize: 11 }}>
-              {coreRunning ? t('dashboard.running') : t('dashboard.stoppedStatus')}
-            </Text>
-          </Col>
-        </Row>
-      </Card>
+            <div style={{ marginTop: 16, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+              {!running ? (
+                <Button
+                  type="primary"
+                  icon={<IconPlay />}
+                  loading={actionLoading}
+                  onClick={() => runAction(startMihomo, t('dashboard.started'))}
+                >
+                  {t('dashboard.start')}
+                </Button>
+              ) : (
+                <>
+                  <Button
+                    icon={<IconRestart />}
+                    loading={actionLoading}
+                    onClick={() => runAction(restartMihomo, t('dashboard.restarted'))}
+                  >
+                    {t('dashboard.restart')}
+                  </Button>
+                  <Button
+                    danger
+                    icon={<IconStop />}
+                    loading={actionLoading}
+                    onClick={() => runAction(stopMihomo, t('dashboard.stopped'))}
+                  >
+                    {t('dashboard.stop')}
+                  </Button>
+                </>
+              )}
+              <Link to="/logs">
+                <Button>{t('nav.logs')}</Button>
+              </Link>
+              <Link to="/traffic">
+                <Button>{t('nav.traffic')}</Button>
+              </Link>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+
+      {/* Row 4 — quick stats table style (m-ui traffic users simplified) */}
+      <Row gutter={gutter}>
+        <Col xs={24} md={12}>
+          <Card
+            size="small"
+            title={t('dashboard.users') || '用户'}
+            styles={{ body: { padding: 0 } }}
+            style={{ borderRadius: 10 }}
+          >
+            <Table
+              size="small"
+              pagination={false}
+              showHeader
+              dataSource={[
+                {
+                  key: 'online',
+                  name: t('dashboard.onlineUsers') || '在线',
+                  value: String(online),
+                },
+                {
+                  key: 'enabled',
+                  name: t('dashboard.enabled') || '已启用',
+                  value: String(users?.enabled ?? '—'),
+                },
+                {
+                  key: 'total',
+                  name: t('dashboard.totalUsers') || '总数',
+                  value: String(users?.total ?? '—'),
+                },
+              ]}
+              columns={[
+                { title: t('common.name') || '项目', dataIndex: 'name', key: 'name' },
+                {
+                  title: t('common.value') || '数值',
+                  dataIndex: 'value',
+                  key: 'value',
+                  align: 'right' as const,
+                },
+              ]}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} md={12}>
+          <Card
+            size="small"
+            title={t('dashboard.listeners') || '节点'}
+            styles={{ body: { padding: 0 } }}
+            style={{ borderRadius: 10 }}
+          >
+            <Table
+              size="small"
+              pagination={false}
+              dataSource={[
+                {
+                  key: 'en',
+                  name: t('dashboard.enabled') || '已启用',
+                  value: String(data?.listeners?.enabled ?? 0),
+                },
+                {
+                  key: 'dis',
+                  name: t('dashboard.disabled') || '已禁用',
+                  value: String(data?.listeners?.disabled ?? 0),
+                },
+                {
+                  key: 'tot',
+                  name: t('common.total') || '全部',
+                  value: String(data?.listeners?.total ?? 0),
+                },
+              ]}
+              columns={[
+                { title: t('common.name') || '项目', dataIndex: 'name', key: 'name' },
+                {
+                  title: t('common.value') || '数值',
+                  dataIndex: 'value',
+                  key: 'value',
+                  align: 'right' as const,
+                },
+              ]}
+            />
+          </Card>
+        </Col>
+      </Row>
     </div>
   );
 };
 
-export default Dashboard;
+export default DashboardPage;