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

feat: redesign responsive control room ui

Browse Source
This commit is contained in:
nanxun
2026-04-26 02:18:03 +08:00
parent ff3e1fae70
commit 94f6e08dea
16 changed files with 4189 additions and 926 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/DailyReviewsView.vue
+383
View File
@@ -0,0 +1,383 @@
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useViewport } from "@/composables/useViewport";
import apiClient, { getApiErrorMessage } from "@/api/client";
import type { DailyReviewReport } from "@/types";
const router = useRouter();
const { isMobile } = useViewport();
const loading = ref(false);
const loadError = ref("");
const selectedDate = ref(defaultReviewDate());
const report = ref<DailyReviewReport | null>(null);
const roomTableHeight = computed(() => (isMobile.value ? undefined : 420));
const momentTableHeight = computed(() => (isMobile.value ? undefined : 360));
async function loadReport() {
loading.value = true;
loadError.value = "";
try {
const { data } = await apiClient.get<DailyReviewReport>("/reports/daily", {
params: {
date: selectedDate.value,
utcOffsetMinutes: getLocalUtcOffsetMinutes()
}
});
report.value = data;
} catch (error) {
loadError.value = getApiErrorMessage(error, "回顾日报加载失败，请稍后重试。");
} finally {
loading.value = false;
}
}
function openSession(recordSessionId: string) {
router.push({ name: "record-session-detail", params: { id: recordSessionId } });
}
function openTask(recordTaskId: string) {
router.push({ name: "record-task-detail", params: { id: recordTaskId } });
}
function formatDate(value?: string) {
return value ? new Date(value).toLocaleString() : "-";
}
function formatDuration(seconds?: number) {
return typeof seconds === "number" && Number.isFinite(seconds)
? `${seconds.toFixed(0)}s`
: "-";
}
function getLocalUtcOffsetMinutes() {
return -new Date().getTimezoneOffset();
}
function defaultReviewDate() {
const current = new Date();
current.setDate(current.getDate() - 1);
return formatDateOnly(current);
}
function formatDateOnly(value: Date) {
const year = value.getFullYear();
const month = `${value.getMonth() + 1}`.padStart(2, "0");
const day = `${value.getDate()}`.padStart(2, "0");
return `${year}-${month}-${day}`;
}
function disableFutureDates(value: Date) {
const endOfToday = new Date();
endOfToday.setHours(23, 59, 59, 999);
return value.getTime() > endOfToday.getTime();
}
onMounted(loadReport);
</script>
<template>
<div class="page-stack">
<div class="page-header">
<div>
<h1 class="page-title">回顾日报</h1>
<p class="page-subtitle">
按天聚合录制时长、异常和弹幕热度。日报只做页面内查看，不会主动推送。
</p>
</div>
<el-space wrap class="header-actions">
<el-date-picker
v-model="selectedDate"
type="date"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
:clearable="false"
:disabled-date="disableFutureDates"
@change="loadReport"
/>
<el-button @click="loadReport">刷新日报</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 && !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">来自当天 Warning / Error 系统日志</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>
<el-card class="surface-card" shadow="never">
<div class="section-header">
<div>
<h3 class="section-title">直播间汇总</h3>
<p class="section-subtitle">每个房间当天的录制规模、异常和弹幕数量。</p>
</div>
</div>
<el-empty 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">
<el-table-column label="直播间" min-width="260">
<template #default="{ row }">
<div class="cell-title">{{ row.title || row.anchorName || row.roomId }}</div>
<div class="cell-subtitle">{{ row.anchorName || row.roomId }}</div>
</template>
</el-table-column>
<el-table-column label="平台" width="120" prop="platformName" />
<el-table-column label="会话" width="90" prop="sessionCount" />
<el-table-column label="分片" width="90" prop="segmentCount" />
<el-table-column label="录制时长" width="120">
<template #default="{ row }">
{{ formatDuration(row.totalDurationSeconds) }}
</template>
</el-table-column>
<el-table-column label="警告 / 错误" width="130">
<template #default="{ row }">
{{ row.warningCount }} / {{ row.errorCount }}
</template>
</el-table-column>
<el-table-column label="弹幕" width="90" prop="danmakuCount" />
</el-table>
</div>
</el-card>
<el-card class="surface-card" shadow="never">
<div class="section-header">
<div>
<h3 class="section-title">重点会话</h3>
<p class="section-subtitle">最长、最热和异常最多的会话会出现在这里。</p>
</div>
</div>
<el-empty v-if="report.highlights.length === 0" description="当天没有可展示的会话亮点" />
<div v-else class="highlight-grid">
<section
v-for="item in report.highlights"
:key="item.key"
class="highlight-item"
>
<div class="highlight-item__label">{{ item.label }}</div>
<div class="highlight-item__title">{{ item.liveRoomTitle }}</div>
<div class="highlight-item__meta">
<span>{{ item.platformName }}</span>
<span>{{ item.roomId }}</span>
<span>{{ formatDuration(item.durationSeconds) }}</span>
</div>
<div class="highlight-item__stats">
<span>分片 {{ item.segmentCount }}</span>
<span>弹幕 {{ item.danmakuCount }}</span>
<span>警告 {{ item.warningCount }}</span>
<span>错误 {{ item.errorCount }}</span>
</div>
<div class="highlight-item__summary">{{ item.summary || "-" }}</div>
<div class="highlight-item__footer">
<span>{{ formatDate(item.startedAt || item.endedAt) }}</span>
<el-button size="small" @click="openSession(item.recordSessionId)">查看会话</el-button>
</div>
</section>
</div>
</el-card>
<el-card class="surface-card" shadow="never">
<div class="section-header">
<div>
<h3 class="section-title">热点时刻</h3>
<p class="section-subtitle">基于弹幕 XML 的分钟级活跃度，帮助快速定位当天最热的时间窗。</p>
</div>
</div>
<el-empty 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">
<el-table-column label="热度窗口" width="190">
<template #default="{ row }">
{{ formatDate(row.bucketStartedAt) }}
</template>
</el-table-column>
<el-table-column label="直播间" min-width="250">
<template #default="{ row }">
<div class="cell-title">{{ row.liveRoomTitle }}</div>
<div class="cell-subtitle">分片 #{{ row.segmentIndex }}</div>
</template>
</el-table-column>
<el-table-column label="平台" width="120" prop="platformName" />
<el-table-column label="弹幕数" width="100" prop="danmakuCount" />
<el-table-column label="操作" width="200">
<template #default="{ row }">
<div class="action-row">
<el-button size="small" @click="openSession(row.recordSessionId)">查看会话</el-button>
<el-button size="small" @click="openTask(row.recordTaskId)">查看分片</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</template>
</div>
</template>
<style scoped>
.page-stack {
display: grid;
gap: 24px;
}
.header-actions {
align-self: center;
}
.page-error-alert {
border-radius: 14px;
}
.section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border-subtle);
}
.highlight-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.highlight-item {
display: grid;
gap: 10px;
min-width: 0;
padding: 16px;
border-radius: 12px;
border: 1px solid var(--border-subtle);
background: var(--surface-muted);
}
.highlight-item__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.highlight-item__title {
font-size: 16px;
font-weight: 700;
line-height: 1.5;
color: var(--text-primary);
}
.highlight-item__meta,
.highlight-item__stats,
.highlight-item__footer {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
color: var(--text-secondary);
font-size: 13px;
}
.highlight-item__summary {
color: var(--text-secondary);
font-size: 13px;
line-height: 1.7;
}
.highlight-item__footer {
justify-content: space-between;
}
.cell-title {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
}
.cell-subtitle {
margin-top: 6px;
color: var(--text-secondary);
font-size: 13px;
}
.action-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
@media (max-width: 1100px) {
.highlight-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.highlight-grid {
grid-template-columns: 1fr;
}
.header-actions {
width: 100%;
justify-content: stretch;
}
.header-actions :deep(.el-space__item) {
width: 100%;
}
.header-actions :deep(.el-date-editor),
.header-actions :deep(.el-button) {
width: 100%;
margin: 0;
}
.highlight-item__footer {
align-items: flex-start;
flex-direction: column;
}
}
</style>