diff --git a/astrbot/core/db/__init__.py b/astrbot/core/db/__init__.py
index a18c127ebf..087aa625bd 100644
--- a/astrbot/core/db/__init__.py
+++ b/astrbot/core/db/__init__.py
@@ -21,6 +21,7 @@
     PlatformSession,
     PlatformStat,
     Preference,
+    ProviderStat,
     SessionProjectRelation,
     Stats,
 )
@@ -105,6 +106,21 @@ async def get_platform_stats(self, offset_sec: int = 86400) -> list[PlatformStat
         """Get platform statistics within the specified offset in seconds and group by platform_id."""
         ...
 
+    @abc.abstractmethod
+    async def insert_provider_stat(
+        self,
+        *,
+        umo: str,
+        provider_id: str,
+        provider_model: str | None = None,
+        conversation_id: str | None = None,
+        status: str = "completed",
+        stats: dict | None = None,
+        agent_type: str = "internal",
+    ) -> ProviderStat:
+        """Insert a per-response provider stat record."""
+        ...
+
     @abc.abstractmethod
     async def get_conversations(
         self,
diff --git a/astrbot/core/db/po.py b/astrbot/core/db/po.py
index 451f054f62..cabc3432cd 100644
--- a/astrbot/core/db/po.py
+++ b/astrbot/core/db/po.py
@@ -38,6 +38,30 @@ class PlatformStat(SQLModel, table=True):
     )
 
 
+class ProviderStat(TimestampMixin, SQLModel, table=True):
+    """Per-response provider stats for internal agent runs."""
+
+    __tablename__: str = "provider_stats"
+
+    id: int | None = Field(
+        default=None,
+        primary_key=True,
+        sa_column_kwargs={"autoincrement": True},
+    )
+    agent_type: str = Field(default="internal", nullable=False, index=True)
+    status: str = Field(default="completed", nullable=False, index=True)
+    umo: str = Field(nullable=False, index=True)
+    conversation_id: str | None = Field(default=None, index=True)
+    provider_id: str = Field(nullable=False, index=True)
+    provider_model: str | None = Field(default=None, index=True)
+    token_input_other: int = Field(default=0, nullable=False)
+    token_input_cached: int = Field(default=0, nullable=False)
+    token_output: int = Field(default=0, nullable=False)
+    start_time: float = Field(default=0.0, nullable=False)
+    end_time: float = Field(default=0.0, nullable=False)
+    time_to_first_token: float = Field(default=0.0, nullable=False)
+
+
 class ConversationV2(TimestampMixin, SQLModel, table=True):
     __tablename__: str = "conversations"
 
diff --git a/astrbot/core/db/sqlite.py b/astrbot/core/db/sqlite.py
index c8e50909d5..fd6668c0c7 100644
--- a/astrbot/core/db/sqlite.py
+++ b/astrbot/core/db/sqlite.py
@@ -23,6 +23,7 @@
     PlatformSession,
     PlatformStat,
     Preference,
+    ProviderStat,
     SessionProjectRelation,
     SQLModel,
 )
@@ -169,6 +170,51 @@ async def get_platform_stats(self, offset_sec: int = 86400) -> list[PlatformStat
             )
             return list(result.scalars().all())
 
+    async def insert_provider_stat(
+        self,
+        *,
+        umo: str,
+        provider_id: str,
+        provider_model: str | None = None,
+        conversation_id: str | None = None,
+        status: str = "completed",
+        stats: dict | None = None,
+        agent_type: str = "internal",
+    ) -> ProviderStat:
+        """Insert a provider stat record for a single agent response."""
+        stats = stats or {}
+        token_usage = stats.get("token_usage", {})
+
+        token_input_other = int(token_usage.get("input_other", 0) or 0)
+        token_input_cached = int(token_usage.get("input_cached", 0) or 0)
+        token_output = int(token_usage.get("output", 0) or 0)
+
+        start_time = float(stats.get("start_time", 0.0) or 0.0)
+        end_time = float(stats.get("end_time", 0.0) or 0.0)
+        time_to_first_token = float(stats.get("time_to_first_token", 0.0) or 0.0)
+
+        async with self.get_db() as session:
+            session: AsyncSession
+            async with session.begin():
+                record = ProviderStat(
+                    agent_type=agent_type,
+                    status=status,
+                    umo=umo,
+                    conversation_id=conversation_id,
+                    provider_id=provider_id,
+                    provider_model=provider_model,
+                    token_input_other=token_input_other,
+                    token_input_cached=token_input_cached,
+                    token_output=token_output,
+                    start_time=start_time,
+                    end_time=end_time,
+                    time_to_first_token=time_to_first_token,
+                )
+                session.add(record)
+                await session.flush()
+                await session.refresh(record)
+                return record
+
     # ====
     # Conversation Management
     # ====
diff --git a/astrbot/core/pipeline/process_stage/method/agent_sub_stages/internal.py b/astrbot/core/pipeline/process_stage/method/agent_sub_stages/internal.py
index c7441d09f4..1a04e3a48e 100644
--- a/astrbot/core/pipeline/process_stage/method/agent_sub_stages/internal.py
+++ b/astrbot/core/pipeline/process_stage/method/agent_sub_stages/internal.py
@@ -5,7 +5,7 @@
 from collections.abc import AsyncGenerator
 from dataclasses import replace
 
-from astrbot.core import logger
+from astrbot.core import db_helper, logger
 from astrbot.core.agent.message import Message
 from astrbot.core.agent.response import AgentStats
 from astrbot.core.astr_main_agent import (
@@ -350,6 +350,15 @@ async def process(
                         resp=final_resp.completion_text if final_resp else None,
                     )
 
+                    asyncio.create_task(
+                        _record_internal_agent_stats(
+                            event,
+                            req,
+                            agent_runner,
+                            final_resp,
+                        )
+                    )
+
                     # 检查事件是否被停止，如果被停止则不保存历史记录
                     if not event.is_stopped() or agent_runner.was_aborted():
                         await self._save_to_history(
@@ -462,3 +471,46 @@ async def _save_to_history(
 # these hosts are base64 encoded
 BLOCKED = {"dGZid2h2d3IuY2xvdWQuc2VhbG9zLmlv", "a291cmljaGF0"}
 decoded_blocked = [base64.b64decode(b).decode("utf-8") for b in BLOCKED]
+
+
+async def _record_internal_agent_stats(
+    event: AstrMessageEvent,
+    req: ProviderRequest | None,
+    agent_runner: AgentRunner | None,
+    final_resp: LLMResponse | None,
+) -> None:
+    """Persist internal agent stats without affecting the user response flow."""
+    if agent_runner is None:
+        return
+
+    provider = agent_runner.provider
+    stats = agent_runner.stats
+    if provider is None or stats is None:
+        return
+
+    try:
+        provider_config = getattr(provider, "provider_config", {}) or {}
+        conversation_id = (
+            req.conversation.cid
+            if req is not None and req.conversation is not None
+            else None
+        )
+
+        if agent_runner.was_aborted():
+            status = "aborted"
+        elif final_resp is not None and final_resp.role == "err":
+            status = "error"
+        else:
+            status = "completed"
+
+        await db_helper.insert_provider_stat(
+            umo=event.unified_msg_origin,
+            conversation_id=conversation_id,
+            provider_id=provider_config.get("id", "") or provider.meta().id,
+            provider_model=provider.get_model(),
+            status=status,
+            stats=stats.to_dict(),
+            agent_type="internal",
+        )
+    except Exception as e:
+        logger.warning("Persist provider stats failed: %s", e, exc_info=True)
diff --git a/astrbot/dashboard/routes/stat.py b/astrbot/dashboard/routes/stat.py
index a6f7ff7f2d..2eb3cd400e 100644
--- a/astrbot/dashboard/routes/stat.py
+++ b/astrbot/dashboard/routes/stat.py
@@ -4,18 +4,22 @@
 import threading
 import time
 import traceback
+from collections import defaultdict
+from datetime import datetime, timedelta, timezone
 from functools import cmp_to_key
 from pathlib import Path
 
 import aiohttp
 import psutil
 from quart import request
+from sqlmodel import select
 
 from astrbot.core import DEMO_MODE, logger
 from astrbot.core.config import VERSION
 from astrbot.core.core_lifecycle import AstrBotCoreLifecycle
 from astrbot.core.db import BaseDatabase
 from astrbot.core.db.migration.helper import check_migration_needed_v4
+from astrbot.core.db.po import ProviderStat
 from astrbot.core.utils.astrbot_path import get_astrbot_path
 from astrbot.core.utils.io import get_dashboard_version
 from astrbot.core.utils.storage_cleaner import StorageCleaner
@@ -34,6 +38,7 @@ def __init__(
         super().__init__(context)
         self.routes = {
             "/stat/get": ("GET", self.get_stat),
+            "/stat/provider-tokens": ("GET", self.get_provider_token_stats),
             "/stat/version": ("GET", self.get_version),
             "/stat/start-time": ("GET", self.get_start_time),
             "/stat/restart-core": ("POST", self.restart_core),
@@ -188,6 +193,207 @@ async def get_stat(self):
             logger.error(traceback.format_exc())
             return Response().error(e.__str__()).__dict__
 
+    @staticmethod
+    def _ensure_aware_utc(value: datetime) -> datetime:
+        if value.tzinfo is None:
+            return value.replace(tzinfo=timezone.utc)
+        return value.astimezone(timezone.utc)
+
+    async def get_provider_token_stats(self):
+        try:
+            try:
+                days = int(request.args.get("days", 1))
+            except (TypeError, ValueError):
+                days = 1
+            if days not in (1, 3, 7):
+                days = 1
+
+            local_tz = datetime.now().astimezone().tzinfo or timezone.utc
+            now_local = datetime.now(local_tz)
+            range_start_local = (now_local - timedelta(days=days)).replace(
+                minute=0, second=0, microsecond=0
+            )
+            today_start_local = now_local.replace(
+                hour=0, minute=0, second=0, microsecond=0
+            )
+            query_start_local = min(range_start_local, today_start_local)
+            query_start_utc = query_start_local.astimezone(timezone.utc)
+
+            async with self.db_helper.get_db() as session:
+                result = await session.execute(
+                    select(ProviderStat)
+                    .where(
+                        ProviderStat.agent_type == "internal",
+                        ProviderStat.created_at >= query_start_utc,
+                    )
+                    .order_by(ProviderStat.created_at.asc())
+                )
+                records = result.scalars().all()
+
+            bucket_timestamps: list[int] = []
+            bucket_cursor = range_start_local
+            while bucket_cursor <= now_local:
+                bucket_timestamps.append(int(bucket_cursor.timestamp() * 1000))
+                bucket_cursor += timedelta(hours=1)
+
+            trend_by_provider: dict[str, dict[int, int]] = defaultdict(
+                lambda: defaultdict(int)
+            )
+            total_by_provider: dict[str, int] = defaultdict(int)
+            total_by_umo: dict[str, int] = defaultdict(int)
+            total_by_bucket: dict[int, int] = defaultdict(int)
+            range_total_tokens = 0
+            range_total_calls = 0
+            range_success_calls = 0
+            range_ttft_total_ms = 0.0
+            range_ttft_samples = 0
+            range_duration_total_ms = 0.0
+            range_duration_samples = 0
+            today_by_model: dict[str, int] = defaultdict(int)
+            today_by_provider: dict[str, int] = defaultdict(int)
+            today_total_tokens = 0
+            today_total_calls = 0
+
+            for record in records:
+                created_at_utc = self._ensure_aware_utc(record.created_at)
+                created_at_local = created_at_utc.astimezone(local_tz)
+                token_total = (
+                    record.token_input_other
+                    + record.token_input_cached
+                    + record.token_output
+                )
+                provider_id = record.provider_id or "unknown"
+                provider_model = record.provider_model or "Unknown"
+
+                if created_at_local >= range_start_local:
+                    bucket_local = created_at_local.replace(
+                        minute=0, second=0, microsecond=0
+                    )
+                    bucket_ts = int(bucket_local.timestamp() * 1000)
+                    trend_by_provider[provider_id][bucket_ts] += token_total
+                    total_by_provider[provider_id] += token_total
+                    total_by_umo[record.umo or "unknown"] += token_total
+                    total_by_bucket[bucket_ts] += token_total
+                    range_total_tokens += token_total
+                    range_total_calls += 1
+                    if record.status != "error":
+                        range_success_calls += 1
+                    if record.time_to_first_token > 0:
+                        range_ttft_total_ms += record.time_to_first_token * 1000
+                        range_ttft_samples += 1
+                    if record.end_time > record.start_time:
+                        range_duration_total_ms += (
+                            record.end_time - record.start_time
+                        ) * 1000
+                        range_duration_samples += 1
+
+                if created_at_local >= today_start_local:
+                    today_total_calls += 1
+                    today_total_tokens += token_total
+                    today_by_model[provider_model] += token_total
+                    today_by_provider[provider_id] += token_total
+
+            sorted_provider_ids = sorted(
+                total_by_provider.keys(),
+                key=lambda item: total_by_provider[item],
+                reverse=True,
+            )
+
+            series = [
+                {
+                    "name": provider_id,
+                    "data": [
+                        [bucket_ts, trend_by_provider[provider_id].get(bucket_ts, 0)]
+                        for bucket_ts in bucket_timestamps
+                    ],
+                    "total_tokens": total_by_provider[provider_id],
+                }
+                for provider_id in sorted_provider_ids
+            ]
+
+            total_series = [
+                [bucket_ts, total_by_bucket.get(bucket_ts, 0)]
+                for bucket_ts in bucket_timestamps
+            ]
+
+            today_by_model_data = [
+                {"provider_model": model_name, "tokens": tokens}
+                for model_name, tokens in sorted(
+                    today_by_model.items(),
+                    key=lambda item: item[1],
+                    reverse=True,
+                )
+            ]
+            today_by_provider_data = [
+                {"provider_id": provider_id, "tokens": tokens}
+                for provider_id, tokens in sorted(
+                    today_by_provider.items(),
+                    key=lambda item: item[1],
+                    reverse=True,
+                )
+            ]
+            range_by_provider_data = [
+                {"provider_id": provider_id, "tokens": tokens}
+                for provider_id, tokens in sorted(
+                    total_by_provider.items(),
+                    key=lambda item: item[1],
+                    reverse=True,
+                )
+            ]
+            range_by_umo_data = [
+                {"umo": umo, "tokens": tokens}
+                for umo, tokens in sorted(
+                    total_by_umo.items(),
+                    key=lambda item: item[1],
+                    reverse=True,
+                )
+            ]
+
+            return (
+                Response()
+                .ok(
+                    {
+                        "days": days,
+                        "trend": {
+                            "series": series,
+                            "total_series": total_series,
+                        },
+                        "range_total_tokens": range_total_tokens,
+                        "range_total_calls": range_total_calls,
+                        "range_avg_ttft_ms": (
+                            range_ttft_total_ms / range_ttft_samples
+                            if range_ttft_samples
+                            else 0
+                        ),
+                        "range_avg_duration_ms": (
+                            range_duration_total_ms / range_duration_samples
+                            if range_duration_samples
+                            else 0
+                        ),
+                        "range_avg_tpm": (
+                            range_total_tokens / (range_duration_total_ms / 1000 / 60)
+                            if range_duration_total_ms > 0
+                            else 0
+                        ),
+                        "range_success_rate": (
+                            range_success_calls / range_total_calls
+                            if range_total_calls
+                            else 0
+                        ),
+                        "range_by_provider": range_by_provider_data,
+                        "range_by_umo": range_by_umo_data,
+                        "today_total_tokens": today_total_tokens,
+                        "today_total_calls": today_total_calls,
+                        "today_by_model": today_by_model_data,
+                        "today_by_provider": today_by_provider_data,
+                    }
+                )
+                .__dict__
+            )
+        except Exception as e:
+            logger.error(traceback.format_exc())
+            return Response().error(f"Error: {e!s}").__dict__
+
     async def test_ghproxy_connection(self):
         """测试 GitHub 代理连接是否可用。"""
         try:
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
index c7121fde42..bb882203a3 100644
--- a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
+++ b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
@@ -1,4 +1,4 @@
-/* Auto-generated MDI subset – 248 icons */
+/* Auto-generated MDI subset – 252 icons */
 /* Do not edit manually. Run: pnpm run subset-icons */
 
 @font-face {
@@ -136,10 +136,6 @@
   content: "\F00F3";
 }
 
-.mdi-calendar-range::before {
-  content: "\F0679";
-}
-
 .mdi-chat::before {
   content: "\F0B79";
 }
@@ -204,6 +200,10 @@
   content: "\F0143";
 }
 
+.mdi-chip::before {
+  content: "\F061A";
+}
+
 .mdi-circle::before {
   content: "\F0765";
 }
@@ -288,6 +288,10 @@
   content: "\F0674";
 }
 
+.mdi-creation-outline::before {
+  content: "\F1C2B";
+}
+
 .mdi-cursor-default-click::before {
   content: "\F0CFD";
 }
@@ -640,6 +644,10 @@
   content: "\F164E";
 }
 
+.mdi-message-outline::before {
+  content: "\F0365";
+}
+
 .mdi-message-text::before {
   content: "\F0369";
 }
@@ -816,6 +824,10 @@
   content: "\F16A7";
 }
 
+.mdi-robot-outline::before {
+  content: "\F167A";
+}
+
 .mdi-send::before {
   content: "\F048A";
 }
@@ -932,6 +944,10 @@
   content: "\F0BD4";
 }
 
+.mdi-timer-outline::before {
+  content: "\F051B";
+}
+
 .mdi-tools::before {
   content: "\F1064";
 }
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff
index 415cd06e41..6131c0411f 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff differ
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2
index 3364125197..2ac3e92281 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 differ
diff --git a/dashboard/src/i18n/locales/en-US/features/stats.json b/dashboard/src/i18n/locales/en-US/features/stats.json
new file mode 100644
index 0000000000..b6349011ee
--- /dev/null
+++ b/dashboard/src/i18n/locales/en-US/features/stats.json
@@ -0,0 +1,104 @@
+{
+  "header": {
+    "eyebrow": "Dashboard",
+    "title": "System Statistics",
+    "subtitle": "A unified view of platforms, messages, and model calls.",
+    "notUpdated": "Not updated yet"
+  },
+  "ranges": {
+    "oneDay": "1 Day",
+    "threeDays": "3 Days",
+    "oneWeek": "1 Week"
+  },
+  "rangeLabels": {
+    "oneDay": "Last 1 day",
+    "threeDays": "Last 3 days",
+    "oneWeek": "Last 1 week"
+  },
+  "overviewCards": {
+    "platformCount": {
+      "label": "Platform Instances",
+      "note": "Configured and currently running platform instances"
+    },
+    "messageCount": {
+      "label": "Messages",
+      "note": "Total accumulated messages"
+    },
+    "todayModelCalls": {
+      "label": "Today's Model Calls",
+      "note": "Tokens"
+    },
+    "cpu": {
+      "label": "CPU",
+      "note": "AstrBot CPU usage"
+    },
+    "memory": {
+      "label": "Process Memory",
+      "note": "System memory {systemMemory}"
+    },
+    "uptime": {
+      "label": "Uptime",
+      "note": "Started at {startTime}"
+    }
+  },
+  "messageOverview": {
+    "title": "Message Overview",
+    "subtitle": "Robot message statistics"
+  },
+  "messageTrend": {
+    "title": "Message Trend",
+    "subtitle": "{range}, aggregated by hour",
+    "totalMessages": "Total Messages"
+  },
+  "platformRanking": {
+    "title": "Platform Message Ranking",
+    "subtitle": "{range}, sorted by aggregated message volume"
+  },
+  "modelCalls": {
+    "title": "Model Calls",
+    "subtitle": "Model call statistics"
+  },
+  "modelTrend": {
+    "title": "Model Call Trend",
+    "subtitle": "Token trend for model calls"
+  },
+  "modelTotal": {
+    "title": "{range} total model calls",
+    "callCount": "{count} calls",
+    "avgTtft": "Average TTFT",
+    "avgDuration": "Average Response Time",
+    "avgTpm": "Average TPM",
+    "successRate": "Success Rate"
+  },
+  "modelRanking": {
+    "title": "{range} model call ranking",
+    "subtitle": "Ranked by model call tokens"
+  },
+  "sessionRanking": {
+    "title": "{range} session token top 10",
+    "subtitle": "Sessions ranked by token usage"
+  },
+  "empty": {
+    "platformStats": "No platform message statistics available.",
+    "modelCalls": "No model call data for {range}.",
+    "sessionCalls": "No session call data for {range}."
+  },
+  "chart": {
+    "messages": "Messages",
+    "others": "Others"
+  },
+  "units": {
+    "tokens": "Tokens",
+    "tpm": "TPM",
+    "gb": "GB",
+    "mb": "MB",
+    "ms": "ms",
+    "hoursShort": "h",
+    "minutesShort": "m",
+    "secondsShort": "s"
+  },
+  "errors": {
+    "loadFailed": "Failed to load statistics. Please try again later.",
+    "rangeFailed": "Failed to switch the statistics range. Please try again later."
+  }
+}
diff --git a/dashboard/src/i18n/locales/ru-RU/features/stats.json b/dashboard/src/i18n/locales/ru-RU/features/stats.json
new file mode 100644
index 0000000000..45cc3ed6c4
--- /dev/null
+++ b/dashboard/src/i18n/locales/ru-RU/features/stats.json
@@ -0,0 +1,104 @@
+{
+  "header": {
+    "eyebrow": "Dashboard",
+    "title": "Статистика системы",
+    "subtitle": "Единый обзор платформ, сообщений и вызовов моделей.",
+    "notUpdated": "Еще не обновлялось"
+  },
+  "ranges": {
+    "oneDay": "1 день",
+    "threeDays": "3 дня",
+    "oneWeek": "1 неделя"
+  },
+  "rangeLabels": {
+    "oneDay": "За 1 день",
+    "threeDays": "За 3 дня",
+    "oneWeek": "За 1 неделю"
+  },
+  "overviewCards": {
+    "platformCount": {
+      "label": "Платформы",
+      "note": "Настроенные и запущенные экземпляры платформ"
+    },
+    "messageCount": {
+      "label": "Сообщения",
+      "note": "Общее число сообщений"
+    },
+    "todayModelCalls": {
+      "label": "Вызовы моделей сегодня",
+      "note": "Tokens"
+    },
+    "cpu": {
+      "label": "CPU",
+      "note": "Использование CPU AstrBot"
+    },
+    "memory": {
+      "label": "Память процесса",
+      "note": "Системная память {systemMemory}"
+    },
+    "uptime": {
+      "label": "Время работы",
+      "note": "Запущен в {startTime}"
+    }
+  },
+  "messageOverview": {
+    "title": "Обзор сообщений",
+    "subtitle": "Статистика сообщений бота"
+  },
+  "messageTrend": {
+    "title": "Динамика сообщений",
+    "subtitle": "{range}, агрегация по часам",
+    "totalMessages": "Всего сообщений"
+  },
+  "platformRanking": {
+    "title": "Рейтинг платформ по сообщениям",
+    "subtitle": "{range}, сортировка по общему числу сообщений"
+  },
+  "modelCalls": {
+    "title": "Вызовы моделей",
+    "subtitle": "Статистика вызовов моделей"
+  },
+  "modelTrend": {
+    "title": "Динамика вызовов моделей",
+    "subtitle": "Динамика токенов вызовов моделей"
+  },
+  "modelTotal": {
+    "title": "{range} всего вызовов моделей",
+    "callCount": "{count} вызовов",
+    "avgTtft": "Средний TTFT",
+    "avgDuration": "Среднее время ответа",
+    "avgTpm": "Средний TPM",
+    "successRate": "Доля успешных вызовов"
+  },
+  "modelRanking": {
+    "title": "{range} рейтинг вызовов моделей",
+    "subtitle": "Рейтинг по токенам вызовов моделей"
+  },
+  "sessionRanking": {
+    "title": "{range} топ-10 сессий по токенам",
+    "subtitle": "Сессии с наибольшим расходом токенов"
+  },
+  "empty": {
+    "platformStats": "Статистика сообщений по платформам отсутствует.",
+    "modelCalls": "Нет данных по вызовам моделей за период {range}.",
+    "sessionCalls": "Нет данных по сессиям за период {range}."
+  },
+  "chart": {
+    "messages": "Сообщения",
+    "others": "Другое"
+  },
+  "units": {
+    "tokens": "Tokens",
+    "tpm": "TPM",
+    "gb": "ГБ",
+    "mb": "МБ",
+    "ms": "мс",
+    "hoursShort": "ч",
+    "minutesShort": "м",
+    "secondsShort": "с"
+  },
+  "errors": {
+    "loadFailed": "Не удалось загрузить статистику. Повторите попытку позже.",
+    "rangeFailed": "Не удалось переключить диапазон статистики. Повторите попытку позже."
+  }
+}
diff --git a/dashboard/src/i18n/locales/zh-CN/features/stats.json b/dashboard/src/i18n/locales/zh-CN/features/stats.json
new file mode 100644
index 0000000000..64c8bb84a2
--- /dev/null
+++ b/dashboard/src/i18n/locales/zh-CN/features/stats.json
@@ -0,0 +1,104 @@
+{
+  "header": {
+    "eyebrow": "Dashboard",
+    "title": "系统统计",
+    "subtitle": "平台、消息与模型调用的统一视图。",
+    "notUpdated": "尚未更新"
+  },
+  "ranges": {
+    "oneDay": "1 天",
+    "threeDays": "3 天",
+    "oneWeek": "1 周"
+  },
+  "rangeLabels": {
+    "oneDay": "最近 1 天",
+    "threeDays": "最近 3 天",
+    "oneWeek": "最近 1 周"
+  },
+  "overviewCards": {
+    "platformCount": {
+      "label": "平台实例数",
+      "note": "当前配置并已运行的平台实例"
+    },
+    "messageCount": {
+      "label": "消息总数",
+      "note": "累计消息量"
+    },
+    "todayModelCalls": {
+      "label": "今日模型调用",
+      "note": "词元（Tokens）"
+    },
+    "cpu": {
+      "label": "CPU",
+      "note": "程序 CPU 占用"
+    },
+    "memory": {
+      "label": "进程内存",
+      "note": "系统内存 {systemMemory}"
+    },
+    "uptime": {
+      "label": "运行时间",
+      "note": "启动于 {startTime}"
+    }
+  },
+  "messageOverview": {
+    "title": "消息概览",
+    "subtitle": "机器人消息数据统计"
+  },
+  "messageTrend": {
+    "title": "消息趋势",
+    "subtitle": "{range}按小时聚合",
+    "totalMessages": "总消息数"
+  },
+  "platformRanking": {
+    "title": "平台消息排名",
+    "subtitle": "{range}按聚合消息总量排序"
+  },
+  "modelCalls": {
+    "title": "模型调用",
+    "subtitle": "模型调用数据统计"
+  },
+  "modelTrend": {
+    "title": "模型调用趋势",
+    "subtitle": "模型调用词元（Tokens）趋势统计"
+  },
+  "modelTotal": {
+    "title": "{range}模型调用总量",
+    "callCount": "共 {count} 次调用",
+    "avgTtft": "平均首字延迟（TTFT）",
+    "avgDuration": "平均响应时间",
+    "avgTpm": "平均每分钟词元数（TPM）",
+    "successRate": "调用成功率"
+  },
+  "modelRanking": {
+    "title": "{range}模型调用排名",
+    "subtitle": "模型调用词元（Tokens）排名"
+  },
+  "sessionRanking": {
+    "title": "{range}会话词元（Tokens）Top 10",
+    "subtitle": "词元（Tokens）用量最大的会话排名"
+  },
+  "empty": {
+    "platformStats": "当前没有平台消息统计数据。",
+    "modelCalls": "{range}还没有模型调用数据。",
+    "sessionCalls": "{range}还没有会话调用数据。"
+  },
+  "chart": {
+    "messages": "消息",
+    "others": "其他"
+  },
+  "units": {
+    "tokens": "词元（Tokens）",
+    "tpm": "TPM",
+    "gb": "GB",
+    "mb": "MB",
+    "ms": "ms",
+    "hoursShort": "h",
+    "minutesShort": "m",
+    "secondsShort": "s"
+  },
+  "errors": {
+    "loadFailed": "统计数据加载失败，请稍后重试。",
+    "rangeFailed": "统计范围切换失败，请稍后重试。"
+  }
+}
diff --git a/dashboard/src/i18n/translations.ts b/dashboard/src/i18n/translations.ts
index fa15e619ff..9d27b41d7f 100644
--- a/dashboard/src/i18n/translations.ts
+++ b/dashboard/src/i18n/translations.ts
@@ -26,6 +26,7 @@ import zhCNAuth from './locales/zh-CN/features/auth.json';
 import zhCNChart from './locales/zh-CN/features/chart.json';
 import zhCNDashboard from './locales/zh-CN/features/dashboard.json';
 import zhCNCron from './locales/zh-CN/features/cron.json';
+import zhCNStats from './locales/zh-CN/features/stats.json';
 import zhCNAlkaidIndex from './locales/zh-CN/features/alkaid/index.json';
 import zhCNAlkaidKnowledgeBase from './locales/zh-CN/features/alkaid/knowledge-base.json';
 import zhCNAlkaidMemory from './locales/zh-CN/features/alkaid/memory.json';
@@ -67,6 +68,7 @@ import enUSAuth from './locales/en-US/features/auth.json';
 import enUSChart from './locales/en-US/features/chart.json';
 import enUSDashboard from './locales/en-US/features/dashboard.json';
 import enUSCron from './locales/en-US/features/cron.json';
+import enUSStats from './locales/en-US/features/stats.json';
 import enUSAlkaidIndex from './locales/en-US/features/alkaid/index.json';
 import enUSAlkaidKnowledgeBase from './locales/en-US/features/alkaid/knowledge-base.json';
 import enUSAlkaidMemory from './locales/en-US/features/alkaid/memory.json';
@@ -108,6 +110,7 @@ import ruRUAuth from './locales/ru-RU/features/auth.json';
 import ruRUChart from './locales/ru-RU/features/chart.json';
 import ruRUDashboard from './locales/ru-RU/features/dashboard.json';
 import ruRUCron from './locales/ru-RU/features/cron.json';
+import ruRUStats from './locales/ru-RU/features/stats.json';
 import ruRUAlkaidIndex from './locales/ru-RU/features/alkaid/index.json';
 import ruRUAlkaidKnowledgeBase from './locales/ru-RU/features/alkaid/knowledge-base.json';
 import ruRUAlkaidMemory from './locales/ru-RU/features/alkaid/memory.json';
@@ -153,6 +156,7 @@ export const translations = {
       chart: zhCNChart,
       dashboard: zhCNDashboard,
       cron: zhCNCron,
+      stats: zhCNStats,
       alkaid: {
         index: zhCNAlkaidIndex,
         'knowledge-base': zhCNAlkaidKnowledgeBase,
@@ -202,6 +206,7 @@ export const translations = {
       chart: enUSChart,
       dashboard: enUSDashboard,
       cron: enUSCron,
+      stats: enUSStats,
       alkaid: {
         index: enUSAlkaidIndex,
         'knowledge-base': enUSAlkaidKnowledgeBase,
@@ -251,6 +256,7 @@ export const translations = {
       chart: ruRUChart,
       dashboard: ruRUDashboard,
       cron: ruRUCron,
+      stats: ruRUStats,
       alkaid: {
         index: ruRUAlkaidIndex,
         'knowledge-base': ruRUAlkaidKnowledgeBase,
diff --git a/dashboard/src/router/MainRoutes.ts b/dashboard/src/router/MainRoutes.ts
index 109122dd86..526e316351 100644
--- a/dashboard/src/router/MainRoutes.ts
+++ b/dashboard/src/router/MainRoutes.ts
@@ -52,9 +52,9 @@ const MainRoutes = {
       redirect: '/config#system'
     },
     {
-      name: 'Default',
+      name: 'Stats',
       path: '/dashboard/default',
-      component: () => import('@/views/dashboards/default/DefaultDashboard.vue')
+      component: () => import('@/views/stats/StatsPage.vue')
     },
     {
       name: 'Conversation',
diff --git a/dashboard/src/views/dashboards/default/DefaultDashboard.vue b/dashboard/src/views/dashboards/default/DefaultDashboard.vue
deleted file mode 100644
index 4037a00458..0000000000
--- a/dashboard/src/views/dashboards/default/DefaultDashboard.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<template>
-  <div class="dashboard-container">
-    <v-slide-y-transition>
-      <v-row v-if="noticeTitle && noticeContent" class="notice-row">
-        <v-alert
-          :type="noticeType"
-          :text="noticeContent"
-          :title="noticeTitle"
-          closable
-          class="dashboard-alert"
-          variant="tonal"
-          border="start"
-        ></v-alert>
-      </v-row>
-    </v-slide-y-transition>
-    
-    <!-- 主指标卡片行 -->
-    <v-row class="stats-row">
-      <v-col cols="12" md="3">
-        <v-slide-y-transition>
-          <TotalMessage :stat="stat" />
-        </v-slide-y-transition>
-      </v-col>
-      <v-col cols="12" md="3">
-        <v-slide-y-transition>
-          <OnlinePlatform :stat="stat" />
-        </v-slide-y-transition>
-      </v-col>
-      <v-col cols="12" md="3">
-        <v-slide-y-transition>
-          <RunningTime :stat="stat" />
-        </v-slide-y-transition>
-      </v-col>
-      <v-col cols="12" md="3">
-        <v-slide-y-transition>
-          <MemoryUsage :stat="stat" />
-        </v-slide-y-transition>
-      </v-col>
-    </v-row>
-    
-    <!-- 图表行 -->
-    <v-row class="charts-row">
-      <v-col cols="12" lg="8">
-        <v-slide-y-transition>
-          <MessageStat />
-        </v-slide-y-transition>
-      </v-col>
-      <v-col cols="12" lg="4">
-        <v-slide-y-transition>
-          <PlatformStat :stat="stat" />
-        </v-slide-y-transition>
-      </v-col>
-    </v-row>
-    <div class="dashboard-footer">
-      <v-chip size="small" color="primary" variant="flat" prepend-icon="mdi-refresh">
-        {{ t('lastUpdate') }}: {{ lastUpdated }}
-      </v-chip>
-      <v-btn 
-        icon="mdi-refresh" 
-        size="small" 
-        color="primary" 
-        variant="text" 
-        class="ml-2" 
-        @click="fetchData"
-        :loading="isRefreshing"
-      ></v-btn>
-    </div>
-  </div>
-</template>
-
-
-<script>
-import TotalMessage from './components/TotalMessage.vue';
-import OnlinePlatform from './components/OnlinePlatform.vue';
-import RunningTime from './components/RunningTime.vue';
-import MemoryUsage from './components/MemoryUsage.vue';
-import MessageStat from './components/MessageStat.vue';
-import PlatformStat from './components/PlatformStat.vue';
-import axios from 'axios';
-import { useModuleI18n } from '@/i18n/composables';
-
-export default {
-  name: 'DefaultDashboard',
-  components: {
-    TotalMessage,
-    OnlinePlatform,
-    RunningTime,
-    MemoryUsage,
-    MessageStat,
-    PlatformStat,
-  },
-  setup() {
-    const { tm: t } = useModuleI18n('features/dashboard');
-    return { t };
-  },
-  data() {
-    return {
-      stat: {},
-      noticeTitle: '',
-      noticeContent: '',
-      noticeType: '',
-      lastUpdated: '',
-      refreshInterval: null,
-      isRefreshing: false
-    };
-  },
-
-  mounted() {
-    this.lastUpdated = this.t('status.loading');
-    this.fetchData();
-    this.fetchNotice();
-    
-    // 设置自动刷新（每60秒）
-    this.refreshInterval = setInterval(() => {
-      this.fetchData();
-    }, 60000);
-  },
-  
-  beforeUnmount() {
-    // 清除定时器
-    if (this.refreshInterval) {
-      clearInterval(this.refreshInterval);
-    }
-  },
-  
-  methods: {
-    async fetchData() {
-      this.isRefreshing = true;
-      try {
-        const res = await axios.get('/api/stat/get');
-        this.stat = res.data.data;
-        this.lastUpdated = new Date().toLocaleTimeString();
-        console.log('Dashboard data:', this.stat);
-      } catch (error) {
-        console.error(this.t('status.dataError'), error);
-      } finally {
-        this.isRefreshing = false;
-      }
-    },
-    
-    fetchNotice() {
-      axios.get('https://api.soulter.top/astrbot-announcement').then((res) => {
-        let data = res.data.data;
-        // 如果 dashboard-notice 在其中
-        if (data['dashboard-notice']) {
-          this.noticeTitle = data['dashboard-notice'].title;
-          this.noticeContent = data['dashboard-notice'].content;
-          this.noticeType = data['dashboard-notice'].type;
-        }
-      }).catch(error => {
-        console.error(this.t('status.noticeError'), error);
-      });
-    }
-  }
-};
-</script>
-
-<style scoped>
-.dashboard-container {
-  padding: 16px;
-  background-color: var(--v-theme-background);
-  min-height: calc(100vh - 64px);
-  border-radius: 10px;
-}
-
-.notice-row {
-  margin-bottom: 16px;
-}
-
-.dashboard-alert {
-  width: 100%;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
-}
-
-.stats-row, .charts-row, .plugin-row {
-  margin-bottom: 24px;
-}
-
-.plugin-card {
-  border-radius: 8px;
-  background-color: var(--v-theme-surface);
-}
-
-.plugin-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--v-theme-primaryText);
-}
-
-.plugin-subtitle {
-  font-size: 12px;
-  color: var(--v-theme-secondaryText);
-  margin-top: 4px;
-}
-
-.plugin-item {
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.plugin-item:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
-}
-
-.plugin-name {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.plugin-version {
-  font-size: 12px;
-  color: var(--v-theme-secondaryText, #666);
-}
-
-.dashboard-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-top: 24px;
-  padding-top: 16px;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
-}
-</style>
diff --git a/dashboard/src/views/dashboards/default/components/MemoryUsage.vue b/dashboard/src/views/dashboards/default/components/MemoryUsage.vue
deleted file mode 100644
index 23c183b7ba..0000000000
--- a/dashboard/src/views/dashboards/default/components/MemoryUsage.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-  <v-card elevation="1" class="stat-card memory-card">
-    <v-card-text>
-      <div class="d-flex align-start">
-        <div class="icon-wrapper">
-          <v-icon icon="mdi-memory" size="24"></v-icon>
-        </div>
-        
-        <div class="stat-content">
-          <div class="stat-title">{{ t('stats.memoryUsage.title') }}</div>
-          <div class="stat-value-wrapper">
-            <h2 class="stat-value">{{ stat.memory?.process || 0 }} <span class="memory-unit">MiB / {{ stat.memory?.system || 0 }} MiB</span></h2>
-            <v-chip :color="memoryStatus.color" size="x-small" class="status-chip">
-              {{ memoryStatus.label }}
-            </v-chip>
-          </div>
-        </div>
-      </div>
-      
-      <div class="metrics-container">
-        <div class="metric-item">
-          <div class="metric-label">{{ t('stats.memoryUsage.cpuLoad') }}</div>
-          <div class="metric-value">{{ stat.cpu_percent || '0' }}%</div>
-        </div>
-      </div>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import { useModuleI18n } from '@/i18n/composables';
-
-export default {
-  name: 'MemoryUsage',
-  props: ['stat'],
-  setup() {
-    const { tm: t } = useModuleI18n('features/dashboard');
-    return { t };
-  },
-  computed: {
-    memoryPercentage() {
-      if (!this.stat.memory || !this.stat.memory.process || !this.stat.memory.system) return 0;
-      return Math.round((this.stat.memory.process / this.stat.memory.system) * 100);
-    },
-    memoryStatus() {
-      const percentage = this.memoryPercentage;
-      if (percentage < 30) {
-        return { color: 'success', label: this.t('stats.memoryUsage.status.good') };
-      } else if (percentage < 70) {
-        return { color: 'warning', label: this.t('stats.memoryUsage.status.normal') };
-      } else {
-        return { color: 'error', label: this.t('stats.memoryUsage.status.high') };
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.stat-card {
-  height: 100%;
-  border-radius: 8px;
-  transition: transform 0.2s, box-shadow 0.2s;
-  overflow: hidden;
-}
-
-.stat-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
-}
-
-.memory-card {
-  background-color: #ff9800;
-  color: white;
-}
-
-.icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
-  margin-right: 16px;
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.stat-content {
-  flex: 1;
-}
-
-.stat-title {
-  font-size: 14px;
-  font-weight: 500;
-  opacity: 0.9;
-  margin-bottom: 4px;
-}
-
-.stat-value-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: space-between;
-  margin-bottom: 4px;
-}
-
-.stat-value {
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-.memory-unit {
-  font-size: 14px;
-  font-weight: 400;
-  opacity: 0.8;
-}
-
-.status-chip {
-  font-weight: 500;
-}
-
-.metrics-container {
-  display: flex;
-  background-color: rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  padding: 4px;
-  margin-top: 4px;
-  justify-content: center;
-}
-
-.metric-item {
-  flex: 1;
-  text-align: center;
-}
-
-.metric-label {
-  font-size: 12px;
-  opacity: 0.7;
-  margin-bottom: 4px;
-}
-
-.metric-value {
-  font-size: 14px;
-  font-weight: 600;
-}
-</style>
diff --git a/dashboard/src/views/dashboards/default/components/MessageStat.vue b/dashboard/src/views/dashboards/default/components/MessageStat.vue
deleted file mode 100644
index a41c664e45..0000000000
--- a/dashboard/src/views/dashboards/default/components/MessageStat.vue
+++ /dev/null
@@ -1,391 +0,0 @@
-<template>
-  <v-card elevation="1" class="chart-card">
-    <v-card-text>
-      <div class="chart-header">
-        <div>
-          <div class="chart-title">{{ t('charts.messageTrend.title') }}</div>
-          <div class="chart-subtitle">{{ t('charts.messageTrend.subtitle') }}</div>
-        </div>
-        
-        <v-select 
-          color="primary" 
-          variant="outlined"
-          density="compact"
-          hide-details 
-          v-model="selectedTimeRange" 
-          :items="timeRanges" 
-          item-title="label" 
-          item-value="value" 
-          class="time-select"
-          @update:model-value="fetchMessageSeries"
-          return-object 
-          single-line
-        >
-          <template v-slot:selection="{ item }">
-            <div class="d-flex align-center">
-              <v-icon start size="small">mdi-calendar-range</v-icon>
-              {{ item.raw.label }}
-            </div>
-          </template>
-        </v-select>
-      </div>
-      
-      <div class="chart-stats">
-        <div class="stat-box">
-          <div class="stat-label">{{ t('charts.messageTrend.totalMessages') }}</div>
-          <div class="stat-number">{{ totalMessages }}</div>
-        </div>
-        
-        <div class="stat-box">
-          <div class="stat-label">{{ t('charts.messageTrend.dailyAverage') }}</div>
-          <div class="stat-number">{{ dailyAverage }}</div>
-        </div>
-        
-        <div class="stat-box" :class="{'trend-up': growthRate > 0, 'trend-down': growthRate < 0}">
-          <div class="stat-label">{{ t('charts.messageTrend.growthRate') }}</div>
-          <div class="stat-number">
-            <v-icon v-show="growthRate !== 0" size="small" :icon="growthRate > 0 ? 'mdi-arrow-up' : 'mdi-arrow-down'"></v-icon>
-            {{ Math.abs(growthRate) }}%
-          </div>
-        </div>
-      </div>
-      
-      <div class="chart-container">
-        <div v-if="loading" class="loading-overlay">
-          <v-progress-circular indeterminate color="primary"></v-progress-circular>
-          <div class="loading-text">{{ t('status.loading') }}</div>
-        </div>
-        <apexchart 
-          type="area" 
-          height="280" 
-          :options="chartOptions" 
-          :series="chartSeries" 
-          ref="chart"
-        ></apexchart>
-      </div>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import axios from 'axios';
-import {useCustomizerStore} from "@/stores/customizer";
-import { useModuleI18n } from '@/i18n/composables';
-
-export default {
-  name: 'MessageStat',
-  props: ['stat'],
-  setup() {
-    const { tm: t } = useModuleI18n('features/dashboard');
-    return { t };
-  },
-  data() {
-    return {
-    totalMessages: '0',
-    dailyAverage: '0',
-    growthRate: 0,
-    loading: false,
-    selectedTimeRange: null,
-    timeRanges: [],
-    
-    chartOptions: {
-      chart: {
-        type: 'area',
-        height: 400,
-        fontFamily: `inherit`,
-        foreColor: '#a1aab2',
-        toolbar: {
-          show: true,
-          tools: {
-            download: true,
-            selection: false,
-            zoom: true,
-            zoomin: true,
-            zoomout: true,
-            pan: true,
-          },
-        },
-        animations: {
-          enabled: true,
-          easing: 'easeinout',
-          speed: 800,
-        },
-      },
-      colors: ['#5e35b1'],
-      fill: {
-        type: 'solid',
-        opacity: 0.3,
-      },
-      dataLabels: {
-        enabled: false
-      },
-      stroke: {
-        curve: 'smooth',
-        width: 2
-      },
-      markers: {
-        size: 3,
-        strokeWidth: 2,
-        hover: {
-          size: 5,
-        }
-      },
-      tooltip: {
-        theme: useCustomizerStore().uiTheme==='PurpleTheme' ? 'light' : 'dark',
-        x: {
-          format: 'yyyy-MM-dd HH:mm'
-        },
-        y: {
-          title: {
-            formatter: () => ''
-          }
-        },
-      },
-      xaxis: {
-        type: 'datetime',
-        title: {
-          text: ''
-        },
-        labels: {
-          formatter: function (value) {
-            return new Date(value).toLocaleString('zh-CN', {
-              month: 'short',
-              day: 'numeric',
-              hour: '2-digit',
-              minute: '2-digit'
-            });
-          }
-        },
-        tooltip: {
-          enabled: false
-        }
-      },
-      yaxis: {
-        title: {
-          text: ''
-        },
-        min: function(min) {
-          return min < 10 ? 0 : Math.floor(min * 0.8);
-        },
-      },
-      grid: {
-        borderColor: "gray100",
-        row: {
-          colors: ['transparent', 'transparent'],
-          opacity: 0.2
-        },
-        column: {
-          colors: ['transparent', 'transparent'],
-        },
-        padding: {
-          left: 0,
-          right: 0
-        }
-      }
-    },
-    
-    chartSeries: [
-      {
-        name: '',
-        data: []
-      }
-    ],
-    
-    messageTimeSeries: []
-    };
-  },
-
-  mounted() {
-    // 初始化时间范围选项
-    this.timeRanges = [
-      { label: this.t('charts.messageTrend.timeRanges.1day'), value: 86400 },
-      { label: this.t('charts.messageTrend.timeRanges.3days'), value: 259200 },
-      { label: this.t('charts.messageTrend.timeRanges.1week'), value: 604800 },
-      { label: this.t('charts.messageTrend.timeRanges.1month'), value: 2592000 },
-    ];
-    this.selectedTimeRange = this.timeRanges[0];
-    
-    // 设置图表翻译文本
-    this.chartOptions.tooltip.y.title.formatter = () => this.t('charts.messageTrend.messageCount') + ' ';
-    this.chartOptions.xaxis.title.text = this.t('charts.messageTrend.timeLabel');
-    this.chartOptions.yaxis.title.text = this.t('charts.messageTrend.messageCount');
-    this.chartSeries[0].name = this.t('charts.messageTrend.messageCount');
-    
-    // 初始加载
-    this.fetchMessageSeries();
-  },
-
-  methods: {
-    formatNumber(num) {
-      return new Intl.NumberFormat('zh-CN').format(num);
-    },
-    
-    async fetchMessageSeries() {
-      this.loading = true;
-      
-      try {
-        const response = await axios.get(`/api/stat/get?offset_sec=${this.selectedTimeRange.value}`);
-        const data = response.data.data;
-        
-        if (data && data.message_time_series) {
-          this.messageTimeSeries = data.message_time_series;
-          this.processTimeSeriesData();
-        }
-      } catch (error) {
-        console.error(this.t('status.dataError'), error);
-      } finally {
-        this.loading = false;
-      }
-    },
-    
-    processTimeSeriesData() {
-      // 转换数据为图表格式
-      this.chartSeries[0].data = this.messageTimeSeries.map((item) => {
-        return [new Date(item[0]*1000).getTime(), item[1]];
-      });
-      
-      // 计算总消息数
-      let total = 0;
-      this.messageTimeSeries.forEach(item => {
-        total += item[1];
-      });
-      this.totalMessages = this.formatNumber(total);
-      
-      // 计算日平均
-      if (this.messageTimeSeries.length > 0) {
-        const daysSpan = this.selectedTimeRange.value / 86400; // 将秒转换为天数
-        this.dailyAverage = this.formatNumber(Math.round(total / daysSpan));
-      }
-      
-      // 计算增长率
-      this.calculateGrowthRate();
-    },
-    
-    calculateGrowthRate() {
-      if (this.messageTimeSeries.length < 4) {
-        this.growthRate = 0;
-        return;
-      }
-      
-      // 计算前半部分和后半部分的消息总数
-      const halfIndex = Math.floor(this.messageTimeSeries.length / 2);
-      
-      const firstHalf = this.messageTimeSeries
-        .slice(0, halfIndex)
-        .reduce((sum, item) => sum + item[1], 0);
-        
-      const secondHalf = this.messageTimeSeries
-        .slice(halfIndex)
-        .reduce((sum, item) => sum + item[1], 0);
-      
-      // 计算增长率
-      if (firstHalf > 0) {
-        this.growthRate = Math.round(((secondHalf - firstHalf) / firstHalf) * 100);
-      } else {
-        this.growthRate = secondHalf > 0 ? 100 : 0;
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.chart-card {
-  height: 100%;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
-  transition: transform 0.2s;
-}
-
-.chart-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
-}
-
-.chart-header {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 10px;
-  margin-bottom: 20px;
-}
-
-.chart-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--v-theme-primaryText);
-}
-
-.chart-subtitle {
-  font-size: 12px;
-  color: var(--v-theme-secondaryText);
-  margin-top: 4px;
-}
-
-.time-select {
-  max-width: fit-content;
-  font-size: 14px;
-}
-
-.chart-stats {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 20px;
-}
-
-.stat-box {
-  padding: 12px 16px;
-  background: var(--v-theme-surface);
-  border-radius: 8px;
-  flex: 1;
-}
-
-.stat-label {
-  font-size: 12px;
-  color: var(--v-theme-secondaryText);
-  margin-bottom: 4px;
-}
-
-.stat-number {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--v-theme-primaryText);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.trend-up .stat-number {
-  color: var(--v-theme-success);
-}
-
-.trend-down .stat-number {
-  color: var(--v-theme-error);
-}
-
-.chart-container {
-  border-top: 1px solid var(--v-theme-border);
-  padding-top: 20px;
-  position: relative;
-}
-
-.loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--v-theme-overlay);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: 10;
-}
-
-.loading-text {
-  margin-top: 12px;
-  font-size: 14px;
-  color: var(--v-theme-secondaryText);
-}
-</style>
\ No newline at end of file
diff --git a/dashboard/src/views/dashboards/default/components/OnlinePlatform.vue b/dashboard/src/views/dashboards/default/components/OnlinePlatform.vue
deleted file mode 100644
index e634bc3082..0000000000
--- a/dashboard/src/views/dashboards/default/components/OnlinePlatform.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <v-card elevation="1" class="stat-card platform-card">
-    <v-card-text>
-      <div class="d-flex align-start">
-        <div class="icon-wrapper">
-          <v-icon icon="mdi-server-network" size="24"></v-icon>
-        </div>
-        
-        <div class="stat-content">
-          <div class="stat-title">{{ t('stats.onlinePlatform.title') }}</div>
-          <div class="stat-value-wrapper">
-            <h2 class="stat-value">{{ stat.platform_count || 0 }}</h2>
-          </div>
-          <div class="stat-subtitle">{{ t('stats.onlinePlatform.subtitle') }}</div>
-        </div>
-      </div>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import { useModuleI18n } from '@/i18n/composables';
-
-export default {
-  name: 'OnlinePlatform',
-  props: ['stat'],
-  setup() {
-    const { tm: t } = useModuleI18n('features/dashboard');
-    return { t };
-  }
-};
-</script>
-
-<style scoped>
-.stat-card {
-  height: 100%;
-  transition: transform 0.2s, box-shadow 0.2s;
-  overflow: hidden;
-}
-
-.stat-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
-}
-
-.platform-card {
-  background-color: #2196f3;
-  color: white;
-}
-
-.icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
-  margin-right: 16px;
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.stat-content {
-  flex: 1;
-}
-
-.stat-title {
-  font-size: 14px;
-  font-weight: 500;
-  opacity: 0.9;
-  margin-bottom: 4px;
-}
-
-.stat-value-wrapper {
-  display: flex;
-  align-items: baseline;
-  margin-bottom: 4px;
-}
-
-.stat-value {
-  font-size: 32px;
-  font-weight: 600;
-  line-height: 1.2;
-  margin-right: 8px;
-}
-
-.stat-subtitle {
-  font-size: 12px;
-  opacity: 0.7;
-}
-</style>
\ No newline at end of file
diff --git a/dashboard/src/views/dashboards/default/components/OnlineTime.vue b/dashboard/src/views/dashboards/default/components/OnlineTime.vue
deleted file mode 100644
index 66f8b80121..0000000000
--- a/dashboard/src/views/dashboards/default/components/OnlineTime.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<template>
-  <div class="stats-container">
-    <v-card elevation="1" class="stat-card uptime-card mb-4">
-      <v-card-text>
-        <div class="d-flex align-center">
-          <div class="icon-wrapper">
-            <v-icon icon="mdi-clock-outline" size="24"></v-icon>
-          </div>
-          
-          <div class="stat-content">
-            <div class="stat-title">{{ tm('features.dashboard.status.uptime') }}</div>
-            <h3 class="uptime-value">{{ stat.running || tm('features.dashboard.status.loading') }}</h3>
-          </div>
-          
-          <v-spacer></v-spacer>
-          
-          <div class="uptime-status">
-            <v-icon icon="mdi-circle" size="10" color="success" class="blink-animation"></v-icon>
-            <span class="status-text">{{ tm('features.dashboard.status.online') }}</span>
-          </div>
-        </div>
-      </v-card-text>
-    </v-card>
-
-    <v-card elevation="1" class="stat-card memory-card">
-      <v-card-text>
-        <div class="d-flex align-center">
-          <div class="icon-wrapper">
-            <v-icon icon="mdi-memory" size="24"></v-icon>
-          </div>
-          
-          <div class="stat-content">
-            <div class="stat-title">{{ tm('features.dashboard.status.memoryUsage') }}</div>
-            <div class="memory-values">
-              <h3 class="memory-value">{{ stat.memory?.process || 0 }} <span class="memory-unit">MiB</span></h3>
-              <span class="memory-separator">/</span>
-              <h4 class="memory-total">{{ stat.memory?.system || 0 }} <span class="memory-unit">MiB</span></h4>
-            </div>
-            
-            <v-progress-linear
-              :model-value="memoryPercentage"
-              color="warning"
-              height="4"
-              class="mt-2"
-            ></v-progress-linear>
-            
-            <div class="memory-percentage">{{ memoryPercentage }}%</div>
-          </div>
-        </div>
-      </v-card-text>
-    </v-card>
-  </div>
-</template>
-
-<script>
-import { useModuleI18n } from '@/i18n/composables';
-
-export default {
-  name: 'OnlineTime',
-  setup() {
-    const { tm } = useModuleI18n('features/dashboard');
-    return { tm };
-  },
-  props: ['stat'],
-  data: () => ({
-    stat: {
-      memory: { process: 0, system: 0 },
-      running: "",
-    },
-  }),
-  computed: {
-    memoryPercentage() {
-      if (!this.stat.memory || !this.stat.memory.process || !this.stat.memory.system) return 0;
-      return Math.round((this.stat.memory.process / this.stat.memory.system) * 100);
-    }
-  }
-};
-</script>
-
-<style scoped>
-.stats-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.stat-card {
-  border-radius: 8px;
-  transition: transform 0.2s, box-shadow 0.2s;
-  overflow: hidden;
-}
-
-.stat-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
-}
-
-.uptime-card {
-  background-color: #4caf50;
-  color: white;
-  flex: 1;
-}
-
-.memory-card {
-  background-color: #ff9800;
-  color: white;
-  flex: 1;
-}
-
-.icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 42px;
-  height: 42px;
-  border-radius: 8px;
-  margin-right: 16px;
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.stat-content {
-  flex: 1;
-}
-
-.stat-title {
-  font-size: 14px;
-  font-weight: 500;
-  opacity: 0.9;
-  margin-bottom: 4px;
-}
-
-.uptime-value {
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-.uptime-status {
-  display: flex;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.2);
-  padding: 4px 10px;
-  border-radius: 20px;
-}
-
-.status-text {
-  margin-left: 6px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.memory-values {
-  display: flex;
-  align-items: baseline;
-}
-
-.memory-value {
-  font-size: 22px;
-  font-weight: 600;
-}
-
-.memory-separator {
-  margin: 0 6px;
-  font-weight: 300;
-  opacity: 0.7;
-}
-
-.memory-total {
-  font-size: 18px;
-  font-weight: 400;
-  opacity: 0.8;
-}
-
-.memory-unit {
-  font-size: 14px;
-  font-weight: 400;
-  opacity: 0.8;
-}
-
-.memory-percentage {
-  font-size: 12px;
-  margin-top: 4px;
-  text-align: right;
-  opacity: 0.9;
-}
-
-@keyframes blink {
-  0% { opacity: 0.5; }
-  50% { opacity: 1; }
-  100% { opacity: 0.5; }
-}
-
-.blink-animation {
-  animation: blink 1.5s infinite;
-}
-</style>
\ No newline at end of file
diff --git a/dashboard/src/views/dashboards/default/components/PlatformStat.vue b/dashboard/src/views/dashboards/default/components/PlatformStat.vue
deleted file mode 100644
index b61b1b298a..0000000000
--- a/dashboard/src/views/dashboards/default/components/PlatformStat.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<template>
-  <v-card elevation="1" class="platform-stat-card">
-    <v-card-text>
-      <div class="platform-header">
-        <div>
-          <div class="platform-title">{{ t('charts.platformStat.title') }}</div>
-          <div class="platform-subtitle">{{ t('charts.platformStat.subtitle') }}</div>
-        </div>
-      </div>
-      
-      <v-divider class="my-3"></v-divider>
-      
-      <div v-if="platforms.length > 0" class="platform-list-container">
-        <v-list class="platform-list" density="compact">
-          <v-list-item
-            v-for="(platform, i) in sortedPlatforms"
-            :key="i"
-            :value="platform"
-            class="platform-item"
-          >
-            <template v-slot:prepend>
-              <div class="platform-rank" :class="{'top-rank': i < 3}">{{ i + 1 }}</div>
-            </template>
-            
-            <v-list-item-title class="platform-name">{{ platform.name }}</v-list-item-title>
-            
-            <template v-slot:append>
-              <div class="platform-count">
-                <span class="count-value">{{ platform.count }}</span>
-                <span class="count-label">{{ t('charts.platformStat.messageUnit') }}</span>
-              </div>
-            </template>
-          </v-list-item>
-        </v-list>
-        
-        <div class="platform-stats-summary">
-          <div class="platform-stat-item">
-            <div class="stat-label">{{ t('charts.platformStat.platformCount') }}</div>
-            <div class="stat-value">{{ platforms.length }}</div>
-          </div>
-          <v-divider vertical></v-divider>
-          <div class="platform-stat-item">
-            <div class="stat-label">{{ t('charts.platformStat.mostActive') }}</div>
-            <div class="stat-value">{{ mostActivePlatform }}</div>
-          </div>
-          <v-divider vertical></v-divider>
-          <div class="platform-stat-item">
-            <div class="stat-label">{{ t('charts.platformStat.totalPercentage') }}</div>
-            <div class="stat-value">{{ topPlatformPercentage }}%</div>
-          </div>
-        </div>
-        
-        <div class="platform-chart">
-          <v-progress-linear
-            v-for="(platform, i) in sortedPlatforms.slice(0, 5)"
-            :key="i"
-            :model-value="getPercentage(platform.count)"
-            height="8"
-            rounded
-            class="platform-progress"
-            :color="i === 0 ? 'primary' : i === 1 ? 'info' : i === 2 ? 'success' : 'grey-lighten-1'"
-          ></v-progress-linear>
-        </div>
-      </div>
-      
-      <div v-else class="no-data">
-        <v-icon icon="mdi-information-outline" size="40" color="grey-lighten-1"></v-icon>
-        <div class="no-data-text">{{ t('charts.platformStat.noData') }}</div>
-      </div>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import { useModuleI18n } from '@/i18n/composables';
-
-export default {
-  name: 'PlatformStat',
-  props: ['stat'],
-  setup() {
-    const { tm: t } = useModuleI18n('features/dashboard');
-    return { t };
-  },
-  data() {
-    return {
-      platforms: []
-    };
-  },
-  computed: {
-    sortedPlatforms() {
-      return [...this.platforms].sort((a, b) => b.count - a.count);
-    },
-    totalCount() {
-      return this.platforms.reduce((sum, platform) => sum + platform.count, 0);
-    },
-    mostActivePlatform() {
-      return this.sortedPlatforms.length > 0 ? this.sortedPlatforms[0].name : '-';
-    },
-    topPlatformPercentage() {
-      if (this.totalCount === 0 || this.sortedPlatforms.length === 0) return 0;
-      return Math.round((this.sortedPlatforms[0].count / this.totalCount) * 100);
-    }
-  },
-  watch: {
-    stat: {
-      handler: function (val) {
-        if (val && val.platform) {
-          this.platforms = val.platform;
-        }
-      },
-      deep: true,
-    }
-  },
-  methods: {
-    getPercentage(count) {
-      return this.totalCount ? (count / this.totalCount) * 100 : 0;
-    }
-  }
-};
-</script>
-
-<style scoped>
-.platform-stat-card {
-  height: 100%;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
-  transition: transform 0.2s;
-}
-
-.platform-stat-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
-}
-
-.platform-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-.platform-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--v-theme-primaryText);
-}
-
-.platform-subtitle {
-  font-size: 12px;
-  color: var(--v-theme-secondaryText);
-  margin-top: 4px;
-}
-
-.platform-list-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.platform-list {
-  max-height: 180px;
-  overflow-y: auto;
-  padding: 0;
-  margin-bottom: 16px;
-}
-
-.platform-item {
-  padding: 8px 16px;
-  margin-bottom: 4px;
-  border-radius: 8px;
-  transition: background-color 0.2s;
-}
-
-.platform-item:hover {
-  background-color: #f5f5f5;
-}
-
-.platform-rank {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: var(--v-theme-surface);
-  color: var(--v-theme-primaryText);
-  font-weight: 600;
-  font-size: 14px;
-  margin-right: 12px;
-}
-
-.top-rank {
-  background-color: var(--v-theme-secondary);
-  color: var(--v-theme-surface);
-}
-
-.platform-name {
-  font-weight: 500;
-}
-
-.platform-count {
-  display: flex;
-  align-items: center;
-}
-
-.count-value {
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--v-theme-secondary);
-  margin-right: 4px;
-}
-
-.count-label {
-  font-size: 12px;
-  color: var(--v-theme-secondaryText);
-}
-
-.platform-stats-summary {
-  display: flex;
-  justify-content: space-between;
-  background-color: var(--v-theme-containerBg);
-  border-radius: 8px;
-  padding: 12px;
-  margin-bottom: 16px;
-}
-
-.platform-stat-item {
-  flex: 1;
-  text-align: center;
-}
-
-.stat-label {
-  font-size: 12px;
-  color: var(--v-theme-secondaryText);
-  margin-bottom: 4px;
-}
-
-.stat-value {
-  font-weight: 600;
-  color: var(--v-theme-primaryText);
-}
-
-.platform-chart {
-  margin-top: 8px;
-}
-
-.platform-progress {
-  margin-bottom: 12px;
-}
-
-.no-data {
-  height: 250px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.no-data-text {
-  color: var(--v-theme-secondaryText);
-  margin-top: 16px;
-  font-size: 14px;
-}
-</style>
\ No newline at end of file
diff --git a/dashboard/src/views/dashboards/default/components/RunningTime.vue b/dashboard/src/views/dashboards/default/components/RunningTime.vue
deleted file mode 100644
index df83bb30ff..0000000000
--- a/dashboard/src/views/dashboards/default/components/RunningTime.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <v-card elevation="1" class="stat-card uptime-card">
-    <v-card-text>
-      <div class="d-flex align-start">
-        <div class="icon-wrapper">
-          <v-icon icon="mdi-clock-outline" size="24"></v-icon>
-        </div>
-        
-        <div class="stat-content">
-          <div class="stat-title">{{ t('stats.runningTime.title') }}</div>
-          <div class="stat-value-wrapper">
-            <h2 class="stat-value">{{ formattedTime }}</h2>
-          </div>
-          <div class="stat-subtitle">{{ t('stats.runningTime.subtitle') }}</div>
-        </div>
-      </div>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import { useModuleI18n } from '@/i18n/composables';
-
-export default {
-  name: 'RunningTime',
-  props: ['stat'],
-  setup() {
-    const { tm: t } = useModuleI18n('features/dashboard');
-    return { t };
-  },
-  computed: {
-    formattedTime() {
-      if (!this.stat?.running) {
-        return this.t('status.loading');
-      }
-
-      const { hours, minutes, seconds } = this.stat.running;
-      return this.t('stats.runningTime.format', {
-        hours,
-        minutes,
-        seconds
-      });
-    }
-  }
-};
-</script>
-
-<style scoped>
-.stat-card {
-  height: 100%;
-  border-radius: 8px;
-  transition: transform 0.2s, box-shadow 0.2s;
-  overflow: hidden;
-}
-
-.stat-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
-}
-
-.uptime-card {
-  background-color: #4caf50;
-  color: white;
-}
-
-.icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
-  margin-right: 16px;
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.stat-content {
-  flex: 1;
-}
-
-.stat-title {
-  font-size: 14px;
-  font-weight: 500;
-  opacity: 0.9;
-  margin-bottom: 4px;
-}
-
-.stat-value-wrapper {
-  display: flex;
-  align-items: baseline;
-  margin-bottom: 4px;
-}
-
-.stat-value {
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-.stat-subtitle {
-    font-size: 12px;
-    opacity: 0.7;
-  }
-</style>
diff --git a/dashboard/src/views/dashboards/default/components/TotalMessage.vue b/dashboard/src/views/dashboards/default/components/TotalMessage.vue
deleted file mode 100644
index f9547c3943..0000000000
--- a/dashboard/src/views/dashboards/default/components/TotalMessage.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <v-card elevation="1" class="stat-card message-card">
-    <v-card-text>
-      <div class="d-flex align-start">
-        <div class="icon-wrapper">
-          <v-icon icon="mdi-message-text-outline" size="24"></v-icon>
-        </div>
-        
-        <div class="stat-content">
-          <div class="stat-title">{{ t('stats.totalMessage.title') }}</div>
-          <div class="stat-value-wrapper">
-            <h2 class="stat-value">{{ formattedCount }}</h2>
-            <v-chip v-if="stat.daily_increase" class="trend-chip" size="x-small" color="success">
-              +{{ stat.daily_increase }}
-            </v-chip>
-          </div>
-          <div class="stat-subtitle">{{ t('stats.totalMessage.subtitle') }}</div>
-        </div>
-      </div>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import { useModuleI18n } from '@/i18n/composables';
-
-export default {
-  name: 'TotalMessage',
-  props: ['stat'],
-  setup() {
-    const { tm: t } = useModuleI18n('features/dashboard');
-    return { t };
-  },
-  computed: {
-    formattedCount() {
-      const count = this.stat?.message_count;
-      return count ? count.toLocaleString() : '0';
-    }
-  }
-};
-</script>
-
-<style scoped>
-.stat-card {
-  height: 100%;
-  transition: transform 0.2s, box-shadow 0.2s;
-  overflow: hidden;
-}
-
-.stat-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
-}
-
-.message-card {
-  background-color: #5e35b1;
-  color: white;
-}
-
-.icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
-  margin-right: 16px;
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.stat-content {
-  flex: 1;
-}
-
-.stat-title {
-  font-size: 14px;
-  font-weight: 500;
-  opacity: 0.9;
-  margin-bottom: 4px;
-}
-
-.stat-value-wrapper {
-  display: flex;
-  align-items: baseline;
-  margin-bottom: 4px;
-}
-
-.stat-value {
-  font-size: 32px;
-  font-weight: 600;
-  line-height: 1.2;
-  margin-right: 8px;
-}
-
-.trend-chip {
-  font-weight: 600;
-}
-
-.stat-subtitle {
-  font-size: 12px;
-  opacity: 0.7;
-}
-</style>
\ No newline at end of file
diff --git a/dashboard/src/views/stats/StatsPage.vue b/dashboard/src/views/stats/StatsPage.vue
new file mode 100644
index 0000000000..ca6ae1ec97
--- /dev/null
+++ b/dashboard/src/views/stats/StatsPage.vue
@@ -0,0 +1,1170 @@
+<template>
+  <div class="stats-page" :class="{ 'is-dark': isDark }">
+    <v-container fluid class="stats-shell pa-4 pa-md-6">
+      <div class="stats-header">
+        <div>
+          <div class="eyebrow">{{ t('header.eyebrow') }}</div>
+          <h1 class="stats-title">{{ t('header.title') }}</h1>
+          <p class="stats-subtitle">{{ t('header.subtitle') }}</p>
+        </div>
+        <div class="header-meta">
+          <div class="meta-pill">
+            <v-icon size="16">mdi-refresh</v-icon>
+            <span>{{ lastUpdatedLabel }}</span>
+          </div>
+        </div>
+      </div>
+
+      <v-alert
+        v-if="errorMessage"
+        type="error"
+        variant="tonal"
+        class="mb-4"
+      >
+        {{ errorMessage }}
+      </v-alert>
+
+      <div v-if="loading && !baseStats" class="loading-wrap">
+        <v-progress-circular indeterminate color="grey-darken-1" />
+      </div>
+
+      <template v-else>
+        <div class="overview-grid">
+          <section
+            v-for="card in overviewCards"
+            :key="card.label"
+            class="stat-card overview-card"
+          >
+            <div class="card-icon">
+              <v-icon size="18">{{ card.icon }}</v-icon>
+            </div>
+            <div class="card-label">{{ card.label }}</div>
+            <div class="card-value">{{ card.value }}</div>
+            <div class="card-note">{{ card.note }}</div>
+          </section>
+        </div>
+
+        <div class="section-toolbar">
+          <div>
+            <div class="section-title">{{ t('messageOverview.title') }}</div>
+            <div class="section-subtitle">{{ t('messageOverview.subtitle') }}</div>
+          </div>
+          <div class="range-switch">
+            <button
+              v-for="option in rangeOptions"
+              :key="`toolbar-${option.value}`"
+              type="button"
+              class="range-chip"
+              :class="{ active: selectedRange === option.value }"
+              @click="selectedRange = option.value"
+            >
+              {{ t(option.labelKey) }}
+            </button>
+          </div>
+        </div>
+
+        <div class="panel-grid">
+          <section class="stat-card chart-card chart-card-wide">
+            <div class="card-head">
+              <div>
+                <div class="section-title">{{ t('messageTrend.title') }}</div>
+                <div class="section-subtitle">{{ t('messageTrend.subtitle', { range: rangeLabel }) }}</div>
+              </div>
+              <div class="card-head-actions">
+                <div class="section-metric">
+                  <span class="metric-label">{{ t('messageTrend.totalMessages') }}</span>
+                  <span class="metric-value">{{ formatNumber(baseStats?.message_count ?? 0) }}</span>
+                </div>
+              </div>
+            </div>
+            <apexchart
+              type="area"
+              height="320"
+              :options="messageChartOptions"
+              :series="messageChartSeries"
+            />
+          </section>
+
+          <section class="stat-card provider-list-card">
+            <div class="card-head compact">
+              <div>
+                <div class="section-title">{{ t('platformRanking.title') }}</div>
+                <div class="section-subtitle">{{ t('platformRanking.subtitle', { range: rangeLabel }) }}</div>
+              </div>
+            </div>
+            <div v-if="platformRanking.length" class="provider-list">
+              <div
+                v-for="platform in platformRanking"
+                :key="platform.name"
+                class="provider-row"
+              >
+                <span class="provider-name">{{ platform.name }}</span>
+                <strong>{{ formatNumber(platform.count) }}</strong>
+              </div>
+            </div>
+            <div v-else class="empty-state">{{ t('empty.platformStats') }}</div>
+          </section>
+        </div>
+
+        <div class="token-section-head">
+          <div>
+            <div class="section-title">{{ t('modelCalls.title') }}</div>
+            <div class="section-subtitle">{{ t('modelCalls.subtitle') }}</div>
+          </div>
+        </div>
+
+        <div class="token-grid">
+          <section class="stat-card chart-card chart-card-wide provider-trend-card">
+            <div class="card-head">
+              <div>
+                <div class="section-title">{{ t('modelTrend.title') }}</div>
+                <div class="section-subtitle">{{ t('modelTrend.subtitle') }}</div>
+              </div>
+            </div>
+            <apexchart
+              type="bar"
+              height="420"
+              :options="providerChartOptions"
+              :series="providerTrendSeries"
+            />
+          </section>
+
+          <section class="token-side-column">
+            <section class="stat-card token-total-card">
+              <div class="card-label">{{ t('modelTotal.title', { range: rangeLabel }) }}</div>
+              <div class="token-total-value">{{ formatNumber(providerStats?.range_total_tokens ?? 0) }} <span style="font-size: 18px;">{{ t('units.tokens') }}</span></div>
+              <div class="card-note">{{ t('modelTotal.callCount', { count: formatNumber(providerStats?.range_total_calls ?? 0) }) }}</div>
+              <div class="token-meta-list">
+                <div class="token-meta-item">
+                  <span>{{ t('modelTotal.avgTtft') }}</span>
+                  <strong>{{ rangeAvgTtftLabel }}</strong>
+                </div>
+                <div class="token-meta-item">
+                  <span>{{ t('modelTotal.avgDuration') }}</span>
+                  <strong>{{ rangeAvgDurationLabel }}</strong>
+                </div>
+                <div class="token-meta-item">
+                  <span>{{ t('modelTotal.avgTpm') }}</span>
+                  <strong>{{ rangeAvgTpmLabel }}</strong>
+                </div>
+                <div class="token-meta-item">
+                  <span>{{ t('modelTotal.successRate') }}</span>
+                  <strong>{{ rangeSuccessRateLabel }}</strong>
+                </div>
+              </div>
+            </section>
+
+            <section class="stat-card provider-list-card">
+              <div class="card-head compact">
+                <div>
+                  <div class="section-title">{{ t('modelRanking.title', { range: rangeLabel }) }}</div>
+                  <div class="section-subtitle">{{ t('modelRanking.subtitle') }}</div>
+                </div>
+              </div>
+              <div
+                v-if="rangeProviderRanking.length"
+                class="provider-list provider-list--scrollable"
+              >
+                <div
+                  v-for="provider in rangeProviderRanking"
+                  :key="provider.provider_id"
+                  class="provider-row"
+                >
+                  <span class="provider-name">{{ provider.provider_id }}</span>
+                  <strong>{{ formatNumber(provider.tokens) }}</strong>
+                </div>
+              </div>
+              <div v-else class="empty-state">{{ t('empty.modelCalls', { range: rangeLabel }) }}</div>
+            </section>
+          </section>
+        </div>
+
+        <section class="stat-card provider-list-card">
+          <div class="card-head compact">
+            <div>
+              <div class="section-title">{{ t('sessionRanking.title', { range: rangeLabel }) }}</div>
+              <div class="section-subtitle">{{ t('sessionRanking.subtitle') }}</div>
+            </div>
+          </div>
+          <div v-if="rangeUmoRanking.length" class="provider-list">
+            <div
+              v-for="item in rangeUmoRanking"
+              :key="item.umo"
+              class="provider-row"
+            >
+              <span class="provider-name">{{ item.umo }}</span>
+              <strong>{{ formatNumber(item.tokens) }}</strong>
+            </div>
+          </div>
+          <div v-else class="empty-state">{{ t('empty.sessionCalls', { range: rangeLabel }) }}</div>
+        </section>
+      </template>
+    </v-container>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ApexOptions } from 'apexcharts'
+import axios from 'axios'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useTheme } from 'vuetify'
+import { useI18n, useModuleI18n } from '@/i18n/composables'
+
+type TokenRange = 1 | 3 | 7
+type ChartSeries = Array<{
+  name: string
+  data: unknown[]
+}>
+
+interface RunningStats {
+  hours: number
+  minutes: number
+  seconds: number
+}
+
+interface BaseStatsResponse {
+  message_count: number
+  platform_count: number
+  platform: Array<{
+    name: string
+    count: number
+    timestamp: number
+  }>
+  message_time_series: Array<[number, number]>
+  memory: {
+    process: number
+    system: number
+  }
+  cpu_percent: number
+  running: RunningStats
+  thread_count: number
+  start_time: number
+}
+
+interface ProviderTrendItem {
+  name: string
+  data: Array<[number, number]>
+  total_tokens: number
+}
+
+interface ProviderRankingItem {
+  provider_id: string
+  tokens: number
+}
+
+interface UmoRankingItem {
+  umo: string
+  tokens: number
+}
+
+interface ProviderTokenStatsResponse {
+  days: TokenRange
+  trend: {
+    series: ProviderTrendItem[]
+    total_series: Array<[number, number]>
+  }
+  range_total_tokens: number
+  range_total_calls: number
+  range_avg_ttft_ms: number
+  range_avg_duration_ms: number
+  range_avg_tpm: number
+  range_success_rate: number
+  range_by_provider: ProviderRankingItem[]
+  range_by_umo: UmoRankingItem[]
+  today_total_tokens: number
+  today_total_calls: number
+  today_by_provider: ProviderRankingItem[]
+}
+
+const { locale } = useI18n()
+const { tm: t } = useModuleI18n('features/stats')
+const theme = useTheme()
+const loading = ref(true)
+const errorMessage = ref('')
+const baseStats = ref<BaseStatsResponse | null>(null)
+const providerStats = ref<ProviderTokenStatsResponse | null>(null)
+const selectedRange = ref<TokenRange>(1)
+const lastUpdatedAt = ref<Date | null>(null)
+const isDark = computed(() => theme.global.current.value.dark)
+const themePalette = computed(() => {
+  const colors = theme.global.current.value.colors as Record<string, string>
+  return {
+    primary: colors.primary,
+    secondary: colors.secondary,
+    info: colors.info,
+    success: colors.success,
+    warning: colors.warning,
+    accent: colors.accent,
+    border: colors.border ?? colors.borderLight ?? colors.primary,
+    mutedText: colors.secondaryText ?? colors.primaryText ?? colors.primary,
+    lightPrimary: colors.lightprimary ?? colors.surface ?? colors.background,
+    lightSecondary: colors.lightsecondary ?? colors.surface ?? colors.background
+  }
+})
+
+let refreshTimer: number | null = null
+
+function formatNumber(value: number): string {
+  return new Intl.NumberFormat(locale.value).format(value)
+}
+
+function formatCompactNumber(value: number): string {
+  if (value >= 1_000_000_000) return `${(value / 1_000_000_000).toFixed(2)}B`
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(2)}M`
+  if (value >= 1_000) return `${(value / 1_000).toFixed(2)}K`
+  return formatNumber(value)
+}
+
+function formatMemory(memoryMb: number): string {
+  if (memoryMb >= 1024) {
+    return `${(memoryMb / 1024).toFixed(1)} ${t('units.gb')}`
+  }
+  return `${formatNumber(memoryMb)} ${t('units.mb')}`
+}
+
+function formatDurationMs(value: number): string {
+  if (!value || value <= 0) return '—'
+  if (value < 1000) return `${Math.round(value)} ${t('units.ms')}`
+  return `${(value / 1000).toFixed(2)} ${t('units.secondsShort')}`
+}
+
+function formatTpm(value: number): string {
+  if (!value || value <= 0) return '—'
+  return `${value.toFixed(0) } ${t('units.tpm')}`
+}
+
+function hexToRgba(color: string | undefined, alpha: number): string {
+  if (!color) return `rgba(0, 0, 0, ${alpha})`
+  if (!color.startsWith('#')) return color
+
+  let hex = color.slice(1)
+  if (hex.length === 3) {
+    hex = hex
+      .split('')
+      .map((char) => char + char)
+      .join('')
+  }
+
+  if (hex.length !== 6) return color
+
+  const red = Number.parseInt(hex.slice(0, 2), 16)
+  const green = Number.parseInt(hex.slice(2, 4), 16)
+  const blue = Number.parseInt(hex.slice(4, 6), 16)
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`
+}
+
+function formatDateTime(timestampSec: number): string {
+  if (!timestampSec) return '—'
+  return new Date(timestampSec * 1000).toLocaleString(locale.value, {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+function formatRunningTime(running?: RunningStats | null): string {
+  if (!running) return '—'
+  const parts = [
+    running.hours > 0 ? `${running.hours}${t('units.hoursShort')}` : '',
+    running.minutes > 0 || running.hours > 0 ? `${running.minutes}${t('units.minutesShort')}` : '',
+    `${running.seconds}${t('units.secondsShort')}`
+  ].filter(Boolean)
+  return parts.join(' ')
+}
+
+function aggregateOverflowSeries(series: ProviderTrendItem[]): ProviderTrendItem[] {
+  if (series.length <= 5) return series
+  const leading = series.slice(0, 4)
+  const overflow = series.slice(4)
+  const mergedPoints = overflow[0].data.map(([timestamp], index) => {
+    const total = overflow.reduce((sum, item) => sum + (item.data[index]?.[1] ?? 0), 0)
+    return [timestamp, total] as [number, number]
+  })
+  return [
+    ...leading,
+    {
+      name: t('chart.others'),
+      data: mergedPoints,
+      total_tokens: overflow.reduce((sum, item) => sum + item.total_tokens, 0)
+    }
+  ]
+}
+
+async function fetchBaseStats(): Promise<void> {
+  const response = await axios.get('/api/stat/get', {
+    params: {
+      offset_sec: selectedRange.value * 24 * 60 * 60
+    }
+  })
+  baseStats.value = response.data.data
+}
+
+async function fetchProviderStats(): Promise<void> {
+  const response = await axios.get('/api/stat/provider-tokens', {
+    params: {
+      days: selectedRange.value
+    }
+  })
+  providerStats.value = response.data.data
+}
+
+async function refreshStats(): Promise<void> {
+  try {
+    errorMessage.value = ''
+    await Promise.all([fetchBaseStats(), fetchProviderStats()])
+    lastUpdatedAt.value = new Date()
+  } catch (error) {
+    console.error('Failed to load stats page data:', error)
+    errorMessage.value = t('errors.loadFailed')
+  } finally {
+    loading.value = false
+  }
+}
+
+const rangeOptions = computed(() => [
+  { labelKey: 'ranges.oneDay', value: 1 as TokenRange },
+  { labelKey: 'ranges.threeDays', value: 3 as TokenRange },
+  { labelKey: 'ranges.oneWeek', value: 7 as TokenRange }
+])
+
+const lastUpdatedLabel = computed(() => {
+  if (!lastUpdatedAt.value) return t('header.notUpdated')
+  return lastUpdatedAt.value.toLocaleTimeString(locale.value, {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+})
+
+const rangeLabel = computed(() => {
+  if (selectedRange.value === 3) return t('rangeLabels.threeDays')
+  if (selectedRange.value === 7) return t('rangeLabels.oneWeek')
+  return t('rangeLabels.oneDay')
+})
+
+const overviewCards = computed(() => [
+  {
+    label: t('overviewCards.platformCount.label'),
+    value: formatNumber(baseStats.value?.platform_count ?? 0),
+    note: t('overviewCards.platformCount.note'),
+    icon: 'mdi-robot-outline'
+  },
+  {
+    label: t('overviewCards.messageCount.label'),
+    value: formatNumber(baseStats.value?.message_count ?? 0),
+    note: t('overviewCards.messageCount.note'),
+    icon: 'mdi-message-outline'
+  },
+  {
+    label: t('overviewCards.todayModelCalls.label'),
+    value: formatCompactNumber(providerStats.value?.today_total_tokens ?? 0),
+    note: t('overviewCards.todayModelCalls.note'),
+    icon: 'mdi-creation-outline'
+  },
+  {
+    label: t('overviewCards.cpu.label'),
+    value: `${baseStats.value?.cpu_percent ?? 0}%`,
+    note: t('overviewCards.cpu.note'),
+    icon: 'mdi-chip'
+  },
+  {
+    label: t('overviewCards.memory.label'),
+    value: formatMemory(baseStats.value?.memory?.process ?? 0),
+    note: t('overviewCards.memory.note', {
+      systemMemory: formatMemory(baseStats.value?.memory?.system ?? 0)
+    }),
+    icon: 'mdi-memory'
+  },
+  {
+    label: t('overviewCards.uptime.label'),
+    value: formatRunningTime(baseStats.value?.running),
+    note: t('overviewCards.uptime.note', { startTime: startTimeLabel.value }),
+    icon: 'mdi-timer-outline'
+  }
+])
+
+const messageChartSeries = computed<ChartSeries>(() => [
+  {
+    name: t('chart.messages'),
+    data: (baseStats.value?.message_time_series ?? []).map(([timestamp, value]) => [
+      timestamp * 1000,
+      value
+    ])
+  }
+])
+
+const providerTrendSeries = computed<ChartSeries>(() =>
+  aggregateOverflowSeries(providerStats.value?.trend.series ?? []).map((item) => ({
+    name: item.name,
+    data: item.data
+  }))
+)
+
+const rangeProviderRanking = computed(() => providerStats.value?.range_by_provider ?? [])
+
+const rangeUmoRanking = computed(() =>
+  (providerStats.value?.range_by_umo ?? []).slice(0, 10)
+)
+
+const rangeAvgTtftLabel = computed(() =>
+  formatDurationMs(providerStats.value?.range_avg_ttft_ms ?? 0)
+)
+
+const rangeAvgDurationLabel = computed(() =>
+  formatDurationMs(providerStats.value?.range_avg_duration_ms ?? 0)
+)
+
+const rangeAvgTpmLabel = computed(() =>
+  formatTpm(providerStats.value?.range_avg_tpm ?? 0)
+)
+
+const rangeSuccessRateLabel = computed(() => {
+  if (!(providerStats.value?.range_total_calls ?? 0)) {
+    return '—'
+  }
+  const rate = providerStats.value?.range_success_rate ?? 0
+  return `${(rate * 100).toFixed(1)}%`
+})
+
+const platformRanking = computed(() =>
+  [...(baseStats.value?.platform ?? [])]
+    .sort((left, right) => right.count - left.count)
+    .slice(0, 6)
+)
+
+const startTimeLabel = computed(() =>
+  formatDateTime(baseStats.value?.start_time ?? 0)
+)
+
+const providerChartColors = computed(() =>
+  isDark.value
+    ? [
+        '#6F8FAF',
+        '#7E9A73',
+        '#A78468',
+        '#8A78A8',
+        '#6B9995',
+        '#B07A87',
+        '#8C8F62',
+        '#7C8798'
+      ]
+    : [
+        '#5F7E9B',
+        '#708865',
+        '#9A7557',
+        '#786696',
+        '#5D8985',
+        '#9C6674',
+        '#80844F',
+        '#69788D'
+      ]
+)
+
+const messageChartOptions = computed<ApexOptions>(() => ({
+  chart: {
+    background: 'transparent',
+    toolbar: { show: false },
+    zoom: { enabled: false },
+    fontFamily: '"SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  },
+  theme: {
+    mode: isDark.value ? 'dark' : 'light'
+  },
+  colors: [themePalette.value.primary],
+  stroke: {
+    curve: 'smooth',
+    width: 2.4
+  },
+  fill: {
+    type: 'solid',
+    opacity: 0.12
+  },
+  grid: {
+    borderColor: hexToRgba(themePalette.value.border, isDark.value ? 0.4 : 0.26),
+    strokeDashArray: 0
+  },
+  dataLabels: { enabled: false },
+  xaxis: {
+    type: 'datetime',
+    labels: {
+      datetimeUTC: false,
+      style: { colors: themePalette.value.mutedText }
+    },
+    axisBorder: { color: hexToRgba(themePalette.value.border, isDark.value ? 0.4 : 0.26) },
+    axisTicks: { color: hexToRgba(themePalette.value.border, isDark.value ? 0.4 : 0.26) }
+  },
+  yaxis: {
+    labels: {
+      formatter: (value) => formatCompactNumber(Number(value)),
+      style: { colors: themePalette.value.mutedText }
+    }
+  },
+  tooltip: {
+    theme: isDark.value ? 'dark' : 'light',
+    x: {
+      format: 'MM/dd HH:mm'
+    }
+  },
+  legend: { show: false }
+}))
+
+const providerChartOptions = computed<ApexOptions>(() => ({
+  chart: {
+    background: 'transparent',
+    toolbar: { show: false },
+    zoom: { enabled: false },
+    stacked: true,
+    fontFamily: '"SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  },
+  theme: {
+    mode: isDark.value ? 'dark' : 'light'
+  },
+  plotOptions: {
+    bar: {
+      horizontal: false,
+      borderRadius: 4,
+      columnWidth: '58%'
+    }
+  },
+  colors: providerChartColors.value,
+  dataLabels: { enabled: false },
+  grid: {
+    borderColor: hexToRgba(themePalette.value.border, isDark.value ? 0.4 : 0.26)
+  },
+  xaxis: {
+    type: 'datetime',
+    labels: {
+      datetimeUTC: false,
+      style: { colors: themePalette.value.mutedText }
+    },
+    axisBorder: { color: hexToRgba(themePalette.value.border, isDark.value ? 0.4 : 0.26) },
+    axisTicks: { color: hexToRgba(themePalette.value.border, isDark.value ? 0.4 : 0.26) }
+  },
+  yaxis: {
+    labels: {
+      formatter: (value) => formatCompactNumber(Number(value)),
+      style: { colors: themePalette.value.mutedText }
+    }
+  },
+  tooltip: {
+    theme: isDark.value ? 'dark' : 'light',
+    x: {
+      format: 'MM/dd HH:mm'
+    }
+  },
+  legend: {
+    position: 'top',
+    horizontalAlign: 'left',
+    labels: {
+      colors: themePalette.value.mutedText
+    }
+  }
+}))
+
+watch(selectedRange, async () => {
+  try {
+    await Promise.all([fetchBaseStats(), fetchProviderStats()])
+    lastUpdatedAt.value = new Date()
+  } catch (error) {
+    console.error('Failed to refresh stats range:', error)
+    errorMessage.value = t('errors.rangeFailed')
+  }
+})
+
+onMounted(async () => {
+  await refreshStats()
+  refreshTimer = window.setInterval(() => {
+    void refreshStats()
+  }, 60_000)
+})
+
+onBeforeUnmount(() => {
+  if (refreshTimer !== null) {
+    window.clearInterval(refreshTimer)
+  }
+})
+</script>
+
+<style scoped>
+.stats-page {
+  --stats-bg: rgb(var(--v-theme-background));
+  --stats-surface: rgb(var(--v-theme-surface));
+  --stats-text: rgb(var(--v-theme-on-surface));
+  --stats-muted: rgba(var(--v-theme-on-surface), 0.68);
+  --stats-subtle: rgba(var(--v-theme-on-surface), 0.56);
+  --stats-border: rgba(var(--v-theme-on-surface), 0.1);
+  --stats-border-strong: rgba(var(--v-theme-on-surface), 0.14);
+  --stats-soft: rgba(var(--v-theme-primary), 0.08);
+  --stats-soft-strong: rgba(var(--v-theme-primary), 0.14);
+  min-height: 100%;
+  background: var(--stats-bg);
+}
+
+.stats-page.is-dark {
+  --stats-border: rgba(var(--v-theme-on-surface), 0.14);
+  --stats-border-strong: rgba(var(--v-theme-on-surface), 0.18);
+  --stats-soft: rgba(var(--v-theme-primary), 0.12);
+  --stats-soft-strong: rgba(var(--v-theme-primary), 0.2);
+}
+
+.stats-shell {
+  max-width: 1560px;
+  margin: 0 auto;
+  color: var(--stats-text);
+  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.stats-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.eyebrow {
+  margin-bottom: 8px;
+  color: var(--stats-subtle);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.stats-title {
+  margin: 0;
+  font-size: clamp(34px, 4vw, 46px);
+  line-height: 1.04;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+
+.stats-subtitle {
+  margin: 10px 0 0;
+  color: var(--stats-muted);
+  font-size: 15px;
+}
+
+.stats-page.is-dark .eyebrow,
+.stats-page.is-dark .stats-subtitle,
+.stats-page.is-dark .metric-label,
+.stats-page.is-dark .section-subtitle,
+.stats-page.is-dark .card-note,
+.stats-page.is-dark .empty-state {
+  color: var(--stats-muted);
+}
+
+.header-meta {
+  display: flex;
+  gap: 12px;
+}
+
+.meta-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border: 1px solid var(--stats-border);
+  border-radius: 999px;
+  background: var(--stats-surface);
+  color: var(--stats-muted);
+  font-size: 13px;
+}
+
+.stats-page.is-dark .meta-pill {
+  border-color: var(--stats-border-strong);
+  background: var(--stats-surface);
+  color: var(--stats-muted);
+}
+
+.loading-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 80px 0;
+}
+
+.overview-grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.panel-grid,
+.token-grid {
+  display: grid;
+  grid-template-columns: 1.6fr 0.9fr;
+  gap: 20px;
+  margin-bottom: 20px;
+  align-items: stretch;
+}
+
+.panel-grid > *,
+.token-grid > * {
+  min-width: 0;
+  width: 100%;
+}
+
+.token-side-column {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 20px;
+  min-width: 0;
+  width: 100%;
+}
+
+.stat-card {
+  border: 1px solid var(--stats-border);
+  border-radius: 16px;
+  background: var(--stats-surface);
+}
+
+.stats-page.is-dark .stat-card {
+  border-color: var(--stats-border-strong);
+  background: var(--stats-surface);
+}
+
+.overview-card {
+  padding: 20px 20px 18px;
+}
+
+.card-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 12px;
+  background: var(--stats-soft);
+  color: rgb(var(--v-theme-primary));
+}
+
+.stats-page.is-dark .card-icon {
+  background: var(--stats-soft-strong);
+  color: rgb(var(--v-theme-primary));
+}
+
+.card-label {
+  margin-top: 8px;
+  color: var(--stats-muted);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.stats-page.is-dark .card-label,
+.stats-page.is-dark .system-row,
+.stats-page.is-dark .system-meta-item,
+.stats-page.is-dark .provider-name {
+  color: var(--stats-muted);
+}
+
+.card-value {
+  margin-top: 8px;
+  font-size: clamp(24px, 2vw, 34px);
+  line-height: 1.1;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+.card-note {
+  margin-top: 8px;
+  color: var(--stats-subtle);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.chart-card,
+.system-card,
+.provider-list-card,
+.token-total-card {
+  padding: 22px;
+}
+
+.card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 18px;
+}
+
+.section-toolbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-end;
+  margin-bottom: 16px;
+}
+
+.section-toolbar .section-subtitle {
+  max-width: 680px;
+}
+
+.card-head-actions {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.card-head.compact {
+  margin-bottom: 14px;
+}
+
+.section-title {
+  font-size: 19px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+}
+
+.section-subtitle {
+  margin-top: 6px;
+  color: var(--stats-muted);
+  font-size: 13px;
+}
+
+.section-metric {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.metric-label {
+  color: var(--stats-subtle);
+  font-size: 12px;
+}
+
+.metric-value {
+  font-size: 22px;
+  font-weight: 650;
+}
+
+.system-metric + .system-metric {
+  margin-top: 18px;
+}
+
+.system-row,
+.system-meta-item,
+.provider-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.system-row {
+  margin-bottom: 10px;
+  color: var(--stats-muted);
+  font-size: 14px;
+}
+
+.system-meta-list {
+  margin-top: 20px;
+  border-top: 1px solid var(--stats-border);
+  padding-top: 14px;
+}
+
+.stats-page.is-dark .system-meta-list {
+  border-top-color: var(--stats-border-strong);
+}
+
+.system-meta-item {
+  padding: 10px 0;
+  color: var(--stats-muted);
+  font-size: 14px;
+}
+
+.system-meta-item + .system-meta-item {
+  border-top: 1px solid var(--stats-border);
+}
+
+.stats-page.is-dark .system-meta-item + .system-meta-item,
+.stats-page.is-dark .provider-row {
+  border-color: var(--stats-border-strong);
+}
+
+.token-section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.range-switch {
+  display: inline-flex;
+  gap: 8px;
+  padding: 6px;
+  border: 1px solid var(--stats-border);
+  border-radius: 999px;
+  background: var(--stats-surface);
+}
+
+.stats-page.is-dark .range-switch {
+  border-color: var(--stats-border-strong);
+  background: var(--stats-surface);
+}
+
+.range-chip {
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--stats-muted);
+  padding: 9px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.18s ease, color 0.18s ease;
+}
+
+.range-chip.active {
+  background: var(--stats-soft);
+  color: rgb(var(--v-theme-primary));
+}
+
+.stats-page.is-dark .range-chip {
+  color: var(--stats-muted);
+}
+
+.stats-page.is-dark .range-chip.active {
+  background: var(--stats-soft-strong);
+  color: rgb(var(--v-theme-primary));
+}
+
+.token-total-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 170px;
+  width: 100%;
+}
+
+.provider-trend-card {
+  min-height: 520px;
+}
+
+.provider-list-card {
+  width: 100%;
+}
+
+.token-total-value {
+  margin-top: 10px;
+  font-size: clamp(32px, 3vw, 44px);
+  line-height: 1.02;
+  font-weight: 700;
+}
+
+.token-meta-list {
+  margin-top: 18px;
+  border-top: 1px solid var(--stats-border);
+  padding-top: 14px;
+  display: grid;
+  gap: 10px;
+}
+
+.token-meta-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  color: var(--stats-muted);
+  font-size: 14px;
+}
+
+.provider-list {
+  display: grid;
+  gap: 12px;
+}
+
+.provider-list--scrollable {
+  max-height: 296px;
+  overflow-y: auto;
+  padding-right: 6px;
+}
+
+.provider-row {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--stats-border);
+  font-size: 14px;
+}
+
+.provider-row:last-child {
+  border-bottom: 0;
+}
+
+.provider-name {
+  color: var(--stats-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.empty-state {
+  color: var(--stats-muted);
+  font-size: 14px;
+}
+
+.empty-state.large {
+  padding: 56px 0;
+  text-align: center;
+}
+
+@media (max-width: 1400px) {
+  .overview-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1080px) {
+  .panel-grid,
+  .token-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 900px) {
+  .overview-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .stats-header,
+  .token-section-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .section-toolbar {
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .card-head,
+  .card-head-actions {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 640px) {
+  .overview-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .stats-shell {
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+  }
+
+  .chart-card,
+  .system-card,
+  .provider-list-card,
+  .token-total-card {
+    padding: 18px;
+    border-radius: 14px;
+  }
+}
+</style>
diff --git a/tests/unit/test_provider_stats.py b/tests/unit/test_provider_stats.py
new file mode 100644
index 0000000000..c306c3f820
--- /dev/null
+++ b/tests/unit/test_provider_stats.py
@@ -0,0 +1,65 @@
+from types import SimpleNamespace
+
+import pytest
+from sqlmodel import select
+
+from astrbot.core.agent.response import AgentStats
+from astrbot.core.db.po import ProviderStat
+from astrbot.core.pipeline.process_stage.method.agent_sub_stages import internal
+from astrbot.core.provider.entities import ProviderRequest, TokenUsage
+
+
+@pytest.mark.asyncio
+async def test_record_internal_agent_stats_persists_provider_stat(
+    temp_db,
+    monkeypatch: pytest.MonkeyPatch,
+):
+    monkeypatch.setattr(internal, "db_helper", temp_db)
+
+    event = SimpleNamespace(unified_msg_origin="webchat:FriendMessage:session-42")
+    req = ProviderRequest(
+        conversation=SimpleNamespace(cid="conv-123"),
+    )
+    stats = AgentStats(
+        token_usage=TokenUsage(input_other=11, input_cached=3, output=7),
+        start_time=100.0,
+        end_time=108.5,
+        time_to_first_token=0.6,
+    )
+    provider = SimpleNamespace(
+        provider_config={"id": "provider-1"},
+        meta=lambda: SimpleNamespace(id="provider-1", type="openai"),
+        get_model=lambda: "gpt-4.1",
+    )
+    agent_runner = SimpleNamespace(
+        provider=provider,
+        stats=stats,
+        was_aborted=lambda: False,
+    )
+    final_resp = SimpleNamespace(role="assistant")
+
+    await internal._record_internal_agent_stats(
+        event,
+        req,
+        agent_runner,
+        final_resp,
+    )
+
+    async with temp_db.get_db() as session:
+        result = await session.execute(select(ProviderStat))
+        records = result.scalars().all()
+
+    assert len(records) == 1
+    record = records[0]
+    assert record.agent_type == "internal"
+    assert record.status == "completed"
+    assert record.umo == "webchat:FriendMessage:session-42"
+    assert record.conversation_id == "conv-123"
+    assert record.provider_id == "provider-1"
+    assert record.provider_model == "gpt-4.1"
+    assert record.token_input_other == 11
+    assert record.token_input_cached == 3
+    assert record.token_output == 7
+    assert record.start_time == 100.0
+    assert record.end_time == 108.5
+    assert record.time_to_first_token == 0.6