nanxun/live_recorder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign live recorder control console ui

Browse Source
This commit is contained in:
nanxun
2026-05-13 18:51:05 +08:00
parent d69c7d015e
commit b81ead700d
12 changed files with 2120 additions and 806 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/DailyReviewsView.vue
+18 -34
View File
@@ -4,12 +4,15 @@ import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "axios";
import apiClient, { getApiErrorMessage } from "@/api/client";
import EmptyState from "@/components/ui/EmptyState.vue";
import MetricCard from "@/components/ui/MetricCard.vue";
import { useViewport } from "@/composables/useViewport";
import type {
DailyReviewPushResult,
DailyReviewReport,
PushDailyReviewRequest
} from "@/types";
import { Bell, Calendar, Clock, DataAnalysis, VideoCamera } from "@element-plus/icons-vue";
const router = useRouter();
const { isMobile } = useViewport();
@@ -137,6 +140,7 @@ onMounted(loadReport);
<div class="page-stack">
<div class="page-header">
<div>
<div class="page-kicker">回顾分析</div>
<h1 class="page-title">回顾日报</h1>
<p class="page-subtitle">
按天聚合录制时长、异常和弹幕热度。支持手动推送到已配置的 Webhook 或邮件。
@@ -163,37 +167,13 @@ onMounted(loadReport);
<el-skeleton v-if="loading && !report" animated :rows="10" />
<template v-else-if="report">
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card__label">活跃直播间</div>
<div class="stat-card__value">{{ report.summary.activeLiveRoomCount }}</div>
<div class="stat-card__hint">{{ report.date }} 当天有录制重叠的房间数</div>
</div>
<div class="stat-card">
<div class="stat-card__label">录制会话</div>
<div class="stat-card__value">{{ report.summary.sessionCount }}</div>
<div class="stat-card__hint">按整场直播会话聚合统计</div>
</div>
<div class="stat-card">
<div class="stat-card__label">分片总数</div>
<div class="stat-card__value">{{ report.summary.segmentCount }}</div>
<div class="stat-card__hint">只统计与当天有时间重叠的分片</div>
</div>
<div class="stat-card">
<div class="stat-card__label">录制时长</div>
<div class="stat-card__value">{{ formatDuration(report.summary.totalDurationSeconds) }}</div>
<div class="stat-card__hint">跨天会话按日报窗口裁剪</div>
</div>
<div class="stat-card">
<div class="stat-card__label">警告 / 错误</div>
<div class="stat-card__value">{{ report.summary.warningCount }} / {{ report.summary.errorCount }}</div>
<div class="stat-card__hint">来自当天警告 / 错误系统日志</div>
</div>
<div class="stat-card">
<div class="stat-card__label">弹幕事件</div>
<div class="stat-card__value">{{ report.summary.totalDanmakuCount }}</div>
<div class="stat-card__hint">优先按弹幕 XML 分钟桶统计</div>
</div>
<div class="stats-grid daily-review-metrics">
<MetricCard label="活跃直播间" :value="report.summary.activeLiveRoomCount" :description="`${report.date} 当天有录制重叠的房间数`" :icon="Calendar" />
<MetricCard label="录制会话" :value="report.summary.sessionCount" description="按整场直播会话聚合统计" :icon="VideoCamera" />
<MetricCard label="分片总数" :value="report.summary.segmentCount" description="只统计与当天有时间重叠的分片" :icon="DataAnalysis" />
<MetricCard label="录制时长" :value="formatDuration(report.summary.totalDurationSeconds)" description="跨天会话按日报窗口裁剪" :icon="Clock" />
<MetricCard label="警告 / 错误" :value="`${report.summary.warningCount} / ${report.summary.errorCount}`" description="来自当天警告和错误系统日志" :icon="Bell" />
<MetricCard label="弹幕事件" :value="report.summary.totalDanmakuCount" description="优先按弹幕 XML 分钟桶统计" :icon="Bell" />
</div>
<el-card class="surface-card" shadow="never">
@@ -204,7 +184,7 @@ onMounted(loadReport);
</div>
</div>
<el-empty v-if="report.rooms.length === 0" description="当天没有录制数据" />
<EmptyState v-if="report.rooms.length === 0" description="当前筛选条件下没有可展示内容" />
<div v-else class="table-scroll-shell">
<el-table :data="report.rooms" :height="roomTableHeight" class="premium-table" table-layout="auto">
@@ -240,7 +220,7 @@ onMounted(loadReport);
</div>
</div>
<el-empty v-if="report.highlights.length === 0" description="当天没有可展示的会话亮点" />
<EmptyState v-if="report.highlights.length === 0" description="当前筛选条件下没有可展示内容" />
<div v-else class="highlight-grid">
<section
@@ -278,7 +258,7 @@ onMounted(loadReport);
</div>
</div>
<el-empty v-if="report.moments.length === 0" description="当天没有可用的弹幕热度数据" />
<EmptyState v-if="report.moments.length === 0" description="当前筛选条件下没有可展示内容" />
<div v-else class="table-scroll-shell">
<el-table :data="report.moments" :height="momentTableHeight" class="premium-table" table-layout="auto">
@@ -342,6 +322,10 @@ onMounted(loadReport);
border-radius: 14px;
}
.daily-review-metrics :deep(.metric-card__value) {
font-size: clamp(24px, 1.9vw, 34px);
}
.highlight-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));