feat: add dashboard, file preview metadata, and bandwidth statistics

Dashboard:
- Add DashboardDto, DashboardService with SQL-level aggregate queries
- Add GET /api/dashboard endpoint with real-time system status
- Add repository aggregate methods (CountByAvailability, SumDuration, etc.)
- Add DashboardView.vue as new landing page with KPI cards, storage status, recent sessions, top rooms
- Update router to make dashboard the new / route, add nav item in sidebar

File Preview:
- Add IVideoMetadataService + FfmpegVideoMetadataService for video metadata extraction
- Extend MediaBrowserItemDto with Metadata and ThumbnailUrl fields
- Add includeMetadata param to media browser API, add thumbnail endpoint
- Add SessionPlaylistDto and GET /api/record-sessions/{id}/playlist for continuous playback

Bandwidth Statistics:
- Add -progress pipe:1 to live recording ffmpeg args for bitrate output
- Parse total_size/bitrate/speed from ffmpeg progress lines during recording
- Write bandwidth samples as SystemLogEntry (Category=Bandwidth) every 30s
- Add BandwidthStatisticsService, BandwidthController with session timeline + daily summary
- Add bandwidth TypeScript types

Co-Authored-By: Claude Opus 4.8 noreply@anthropic.com

frontend/src/components/layout/MainLayout.vue

@@ -8,6 +8,7 @@ import { useViewport } from "@/composables/useViewport";
 import {
   ArrowDown,
   Bell,
+  DataAnalysis,
   Document,
   Fold,
   House,
@@ -36,6 +37,7 @@ const navigationGroups = [
     key: "monitor",
     title: "直播监控",
     items: [
+      { index: "/", label: "仪表盘", icon: DataAnalysis },
       { index: "/live-rooms", label: "直播间", icon: House },
       { index: "/record-tasks", label: "录制任务", icon: VideoCamera },
       { index: "/recovery", label: "恢复中心", icon: RefreshRight }
@@ -72,6 +74,8 @@ const backendStatusDescription = computed(() =>
 const backendStatusTone = computed(() => (backendUnavailable.value ? "is-danger" : "is-healthy"));
 const pageEyebrow = computed(() => {
   switch (route.name) {
+    case "dashboard":
+      return "系统概览";
     case "live-rooms":
       return "直播间监控";
     case "record-tasks":

frontend/src/router/index.ts

@@ -3,6 +3,7 @@ import { useAuthStore } from "@/stores/auth";
 
 const LoginView = () => import("@/views/LoginView.vue");
 const MainLayout = () => import("@/components/layout/MainLayout.vue");
+const DashboardView = () => import("@/views/DashboardView.vue");
 const LiveRoomsView = () => import("@/views/LiveRoomsView.vue");
 const RecordTasksView = () => import("@/views/RecordTasksView.vue");
 const TranscodeTasksView = () => import("@/views/TranscodeTasksView.vue");
@@ -29,7 +30,8 @@ const router = createRouter({
       children: [
         {
           path: "",
-          redirect: "/live-rooms"
+          name: "dashboard",
+          component: DashboardView
         },
         {
           path: "live-rooms",

frontend/src/types.ts

@@ -808,3 +808,88 @@ export interface SessionDanmakuResponse {
   recordSessionId: string;
   tasks: DanmakuResponse[];
 }
+
+// Dashboard types
+export interface DashboardData {
+  activeRecordingCount: number;
+  liveRoomCount: number;
+  offlineRoomCount: number;
+  totalRoomCount: number;
+  todayRecordingSeconds: number;
+  todayDataBytes: number;
+  todayDanmakuCount: number;
+  activeSessionCount: number;
+  recentErrorCount: number;
+  storageStatus: DashboardStorageStatus;
+  recentSessions: DashboardRecentSession[];
+  topRooms: DashboardTopRoom[];
+}
+
+export interface DashboardStorageStatus {
+  hasEnoughSpace: boolean;
+  message: string;
+  availableBytes: number;
+}
+
+export interface DashboardRecentSession {
+  id: string;
+  liveRoomId: string;
+  liveRoomTitle: string;
+  platformName: string;
+  segmentCount: number;
+  status: number;
+  startedAt?: string;
+  durationSeconds?: number;
+}
+
+export interface DashboardTopRoom {
+  liveRoomId: string;
+  title?: string;
+  anchorName?: string;
+  platformName: string;
+  roomId: string;
+  sessionCount: number;
+  totalDurationSeconds: number;
+}
+
+// Video metadata types
+export interface VideoMetadata {
+  durationSeconds?: number;
+  width?: number;
+  height?: number;
+  videoCodec?: string;
+  audioCodec?: string;
+  frameRate?: number;
+  bitRate?: number;
+}
+
+// Session playlist types
+export interface SessionPlaylistSegment {
+  recordTaskId: string;
+  segmentIndex: number;
+  previewTicketUrl: string;
+  durationSeconds?: number;
+}
+
+export interface SessionPlaylist {
+  recordSessionId: string;
+  liveRoomTitle: string;
+  segments: SessionPlaylistSegment[];
+}
+
+// Bandwidth types
+export interface BandwidthSummary {
+  totalTrafficMB: number;
+  averageBitrateKbps: number;
+  peakBitrateKbps: number;
+}
+
+export interface BandwidthTimeline {
+  points: BandwidthPoint[];
+}
+
+export interface BandwidthPoint {
+  timestamp: string;
+  bytesDownloaded: number;
+  bitrateKbps?: number;
+}

frontend/src/views/DashboardView.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { Bell, Clock, DataAnalysis, House, VideoCamera, Warning } from "@element-plus/icons-vue";
+import apiClient, { getApiErrorMessage } from "@/api/client";
+import MetricCard from "@/components/ui/MetricCard.vue";
+import type { DashboardData } from "@/types";
+import { sessionStatusLabelMap } from "@/types";
+
+const router = useRouter();
+const loading = ref(false);
+const loadError = ref("");
+const data = ref<DashboardData | null>(null);
+
+function formatDuration(seconds?: number) {
+  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds <= 0) return "-";
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m`;
+}
+
+function formatDataSize(bytes?: number) {
+  if (typeof bytes !== "number" || bytes <= 0) return "-";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
+}
+
+function formatDate(value?: string) {
+  return value ? new Date(value).toLocaleString() : "-";
+}
+
+function sessionStatusTagType(status: number) {
+  if (status === 2) return "success";
+  if (status === 5) return "danger";
+  if (status === 4 || status === 6) return "info";
+  return "warning";
+}
+
+async function loadData() {
+  loading.value = true;
+  loadError.value = "";
+  try {
+    const { data: result } = await apiClient.get<DashboardData>("/dashboard");
+    data.value = result;
+  } catch (error) {
+    loadError.value = getApiErrorMessage(error, "仪表盘数据加载失败。");
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(loadData);
+</script>
+
+<template>
+  <div class="page-stack">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">仪表盘</h1>
+        <p class="page-subtitle">系统运行状态一览，包含直播间、录制会话、弹幕和存储概况。</p>
+      </div>
+      <el-space class="header-actions">
+        <el-button @click="loadData" :loading="loading">刷新</el-button>
+      </el-space>
+    </div>
+
+    <el-alert v-if="loadError" class="page-error-alert" type="error" :closable="false" show-icon :title="loadError" />
+
+    <el-skeleton v-if="loading && !data" animated :rows="6" />
+
+    <template v-else-if="data">
+      <!-- KPI Cards -->
+      <div class="stats-grid">
+        <MetricCard label="正在录制" :value="data.activeRecordingCount">
+          <template #icon><el-icon :size="18"><VideoCamera /></el-icon></template>
+        </MetricCard>
+
+        <MetricCard label="直播间" :value="`${data.liveRoomCount} / ${data.offlineRoomCount}`" :description="`共 ${data.totalRoomCount} 个直播间`">
+          <template #icon><el-icon :size="18"><House /></el-icon></template>
+        </MetricCard>
+
+        <MetricCard label="今日录制时长" :value="formatDuration(data.todayRecordingSeconds)">
+          <template #icon><el-icon :size="18"><Clock /></el-icon></template>
+        </MetricCard>
+
+        <MetricCard label="今日数据量" :value="formatDataSize(data.todayDataBytes)">
+          <template #icon><el-icon :size="18"><DataAnalysis /></el-icon></template>
+        </MetricCard>
+
+        <MetricCard label="今日弹幕" :value="data.todayDanmakuCount.toLocaleString()">
+          <template #icon><el-icon :size="18"><Bell /></el-icon></template>
+        </MetricCard>
+
+        <MetricCard
+          label="24h 异常"
+          :value="data.recentErrorCount"
+          :description="data.recentErrorCount > 0 ? '请前往系统日志页面排查' : '系统运行正常'"
+        >
+          <template #icon><el-icon :size="18"><Warning /></el-icon></template>
+        </MetricCard>
+      </div>
+
+      <!-- Storage Status -->
+      <el-card class="surface-card" shadow="never">
+        <h3 class="section-title">存储状态</h3>
+        <p class="section-subtitle">录制输出路径的磁盘剩余空间和当前录制保护阈值。</p>
+        <div class="storage-bar-row">
+          <div class="storage-bar-card">
+            <span class="storage-bar-card__label">状态</span>
+            <el-tag :type="data.storageStatus.hasEnoughSpace ? 'success' : 'danger'">
+              {{ data.storageStatus.hasEnoughSpace ? "充足" : "不足" }}
+            </el-tag>
+          </div>
+          <div class="storage-bar-card">
+            <span class="storage-bar-card__label">可用空间</span>
+            <span class="storage-bar-card__value">{{ formatDataSize(data.storageStatus.availableBytes) }}</span>
+          </div>
+          <div class="storage-bar-card">
+            <span class="storage-bar-card__label">说明</span>
+            <span class="storage-bar-card__value storage-bar-card__value--message">{{ data.storageStatus.message || "-" }}</span>
+          </div>
+        </div>
+      </el-card>
+
+      <!-- Recent Sessions + Top Rooms -->
+      <el-row :gutter="18">
+        <el-col :lg="12" :sm="24">
+          <el-card class="surface-card" shadow="never">
+            <h3 class="section-title">最近会话</h3>
+            <p class="section-subtitle">最近创建的录制会话，点击可跳转至详情。</p>
+            <div class="table-scroll-shell">
+              <el-table :data="data.recentSessions" class="premium-table" size="small">
+                <el-table-column label="直播间" min-width="140" prop="liveRoomTitle" />
+                <el-table-column label="状态" width="90">
+                  <template #default="{ row }">
+                    <el-tag :type="sessionStatusTagType(row.status)" size="small">
+                      {{ sessionStatusLabelMap[row.status] }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="分片" width="60" prop="segmentCount" />
+                <el-table-column label="开始时间" width="160">
+                  <template #default="{ row }">{{ formatDate(row.startedAt) }}</template>
+                </el-table-column>
+                <el-table-column label="操作" width="80">
+                  <template #default="{ row }">
+                    <el-button size="small" @click="router.push({ name: 'record-session-detail', params: { id: row.id } })">查看</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-card>
+        </el-col>
+
+        <el-col :lg="12" :sm="24">
+          <el-card class="surface-card" shadow="never">
+            <h3 class="section-title">今日热门直播间</h3>
+            <p class="section-subtitle">今日录制时长最长的直播间（Top 5）。</p>
+            <div class="table-scroll-shell">
+              <el-table :data="data.topRooms" class="premium-table" size="small">
+                <el-table-column label="直播间" min-width="130">
+                  <template #default="{ row }">{{ row.title || row.anchorName || "-" }}</template>
+                </el-table-column>
+                <el-table-column label="平台" width="90" prop="platformName" />
+                <el-table-column label="会话数" width="70" prop="sessionCount" />
+                <el-table-column label="录制时长" width="100">
+                  <template #default="{ row }">{{ formatDuration(row.totalDurationSeconds) }}</template>
+                </el-table-column>
+                <el-table-column label="操作" width="80">
+                  <template #default="{ row }">
+                    <el-button size="small" @click="router.push({ name: 'live-rooms' })">查看</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.page-stack {
+  display: grid;
+  gap: 24px;
+}
+.header-actions {
+  align-self: center;
+}
+.page-error-alert {
+  border-radius: 14px;
+}
+.storage-bar-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px 40px;
+}
+.storage-bar-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.storage-bar-card__label {
+  font-size: 12px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+.storage-bar-card__value {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+.storage-bar-card__value--message {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--text-secondary);
+}
+@media (max-width: 768px) {
+  .header-actions {
+    width: 100%;
+    justify-content: stretch;
+  }
+  .header-actions :deep(.el-button) {
+    flex: 1 1 0;
+    margin: 0;
+  }
+}
+</style>