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));
frontend/src/views/LiveRoomsView.vue
+312 -74
View File
@@ -2,6 +2,10 @@
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import apiClient, { getApiErrorMessage } from "@/api/client";
import EmptyState from "@/components/ui/EmptyState.vue";
import MetricCard from "@/components/ui/MetricCard.vue";
import RightDrawer from "@/components/ui/RightDrawer.vue";
import StatusBadge from "@/components/ui/StatusBadge.vue";
import { useViewport } from "@/composables/useViewport";
import type { BatchLiveRoomsResult, ImportLiveRoomsRequest, ImportLiveRoomsResult, LiveRoom, RecordTask } from "@/types";
import {
@@ -10,10 +14,12 @@ import {
availabilityLabelMap,
currentRecordingStateLabelMap,
outputFormatLabelMap,
platformOptionList,
qualityOptionList,
recordingTemplateLabelMap,
saveModeLabelMap
} from "@/types";
import { House, RefreshRight, SwitchButton, VideoCamera } from "@element-plus/icons-vue";
const inheritValue = "__inherit__";
const AUTO_REFRESH_INTERVAL_MS = 15000;
@@ -38,6 +44,8 @@ const settingsRoom = ref<LiveRoom | null>(null);
const rooms = ref<LiveRoom[]>([]);
const selectedRooms = ref<LiveRoom[]>([]);
const loadError = ref("");
const roomDetailVisible = ref(false);
const activeRoom = ref<LiveRoom | null>(null);
const { isMobile } = useViewport();
const roomsTableShellRef = ref<HTMLElement | null>(null);
const roomsTableProxyRef = ref<HTMLElement | null>(null);
@@ -85,14 +93,15 @@ const settingsForm = reactive({
});
const platformOptions = [
{ label: "自动识别", value: null },
{ label: "抖音", value: 1 },
{ label: "Bilibili", value: 2 },
{ label: "虎牙", value: 3 }
{ label: "自动识别", value: null as number | null },
...platformOptionList.map((option) => ({
label: option.label,
value: option.value
}))
];
const qualityOptions = qualityOptionList;
const qualitySupportHint = "抖音和 Bilibili 支持按画质选流；虎牙暂未实现。若目标档位不可用，平台会自动回退到最接近的可用画质。";
const qualitySupportHint = "不同平台的可选画质不同；如果目标档位不可用，系统会自动回退到当前平台最接近的可用流。";
const booleanOverrideOptions = [
{ label: "跟随全局", value: inheritValue },
{ label: "开启", value: "true" },
@@ -108,6 +117,15 @@ const totalRooms = computed(() => rooms.value.length);
const enabledRooms = computed(() => rooms.value.filter((item) => item.isEnabled).length);
const disabledRooms = computed(() => rooms.value.filter((item) => !item.isEnabled).length);
const liveRooms = computed(() => rooms.value.filter((item) => item.availabilityStatus === 2).length);
const recordingRooms = computed(() => rooms.value.filter((item) => item.currentRecordingState === 2).length);
const priorityRooms = computed(() => rooms.value.filter((item) => item.isPriority).length);
const activeRoomSubtitle = computed(() => {
if (!activeRoom.value) {
return "";
}
return `${activeRoom.value.platformName || "--"} · ${activeRoom.value.roomId || "--"}`;
});
const tableHeight = computed(() => (isMobile.value ? undefined : 700));
const createDialogWidth = computed(() => (isMobile.value ? "min(100vw - 24px, 560px)" : "560px"));
const importDialogWidth = computed(() => (isMobile.value ? "min(100vw - 24px, 720px)" : "720px"));
@@ -501,6 +519,11 @@ function openRecordDialog(room: LiveRoom) {
recordDialogVisible.value = true;
}
function openRoomDetails(room: LiveRoom) {
activeRoom.value = room;
roomDetailVisible.value = true;
}
async function copyRoomLink(room: LiveRoom) {
const url = room.originalLiveRoomUrl || room.sourceUrl;
@@ -688,6 +711,14 @@ function getRoomAvatarText(room: LiveRoom) {
return source.slice(0, 1).toUpperCase();
}
function roomAvailabilityLabel(room: LiveRoom) {
return availabilityLabelMap[room.availabilityStatus] ?? "--";
}
function latestEventLabel(room: LiveRoom) {
return room.lastAutoStartDecisionSummary || "暂无事件";
}
function getQualityLabel(quality?: string | null) {
return formatQualityLabel(quality);
}
@@ -802,14 +833,14 @@ onBeforeUnmount(() => {
<div class="page-header">
<div>
<div class="page-kicker">直播监控</div>
<h1 class="page-title">直播间管理</h1>
<h1 class="page-title">直播间监控录制控制台</h1>
<p class="page-subtitle">
直播间会长期保留在系统里。单房间配置优先于全局配置；未设置的项会自动回退到系统设置。
聚合直播状态、自动开录决策和单房间录制配置，面向开播检测、异常巡检与手动介入场景。
</p>
</div>
<div class="page-toolbar">
<el-button @click="loadRooms">刷新列表</el-button>
<el-button @click="loadRooms">刷新状态</el-button>
<el-button @click="openImportDialog">批量导入</el-button>
<el-button :loading="exportLoading" @click="exportRooms">导出列表</el-button>
<el-button type="primary" @click="openCreateDialog">新增直播间</el-button>
@@ -818,34 +849,44 @@ onBeforeUnmount(() => {
<el-alert v-if="loadError" class="page-error-alert" type="error" :closable="false" show-icon :title="loadError" />
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card__label">直播间总数</div>
<div class="stat-card__value">{{ totalRooms }}</div>
<div class="stat-card__hint">当前已接入系统的直播间数量</div>
</div>
<div class="stat-card">
<div class="stat-card__label">启用中</div>
<div class="stat-card__value">{{ enabledRooms }}</div>
<div class="stat-card__hint">参与后台巡检与自动录制</div>
</div>
<div class="stat-card">
<div class="stat-card__label">已停用</div>
<div class="stat-card__value">{{ disabledRooms }}</div>
<div class="stat-card__hint">保留解析结果，但不再自动录制</div>
</div>
<div class="stat-card">
<div class="stat-card__label">当前开播</div>
<div class="stat-card__value">{{ liveRooms }}</div>
<div class="stat-card__hint">基于最近一次状态检测</div>
<div class="live-console-grid">
<div class="stats-grid">
<MetricCard label="在线直播间" :value="liveRooms" description="基于最近一次巡检识别为开播中的房间" :icon="House" />
<MetricCard label="录制中任务" :value="recordingRooms" description="当前处于录制状态的直播间数量" :icon="VideoCamera" />
<MetricCard label="启用房间" :value="enabledRooms" description="参与自动检测与自动录制的直播间" :icon="SwitchButton" />
<MetricCard label="重点监控" :value="priorityRooms" description="标记为重点巡检与优先关注的房间" :icon="RefreshRight" />
</div>
<el-card class="surface-card focus-card" shadow="never">
<div class="focus-card__header">
<div>
<div class="focus-card__eyebrow">监控概览</div>
<h3 class="section-title">直播采集态势</h3>
</div>
<StatusBadge
:label="recordingRooms > 0 ? '录制通道活跃' : '等待开播'"
:status="recordingRooms > 0"
context="boolean"
/>
</div>
<p class="focus-card__description">
当前共接入 {{ totalRooms }} 个直播间，其中 {{ enabledRooms }} 个处于自动巡检范围，{{ disabledRooms }} 个处于保留但停用状态。
</p>
<div class="focus-card__chips">
<span class="info-pill">自动开录复用现有后端策略</span>
<span class="info-pill">单房间配置优先于全局设置</span>
<span class="info-pill">无实时吞吐字段时统一显示占位</span>
</div>
</el-card>
</div>
<el-card class="surface-card table-card" shadow="never">
<el-card class="surface-card table-card" shadow="never" v-loading="loading">
<div class="toolbar-row">
<div>
<h3 class="section-title">直播间列表</h3>
<p class="section-subtitle">支持刷新状态、手动启动录制、单房间配置覆盖，以及按需删除直播间。</p>
<p class="section-subtitle">继续使用真实接口数据，统一强化为监控控制台视图，支持查看详情、手动录制和单房间配置覆盖。</p>
</div>
<el-space v-if="!isMobile" wrap class="batch-actions">
<span class="batch-actions__count">已选 {{ selectedRoomCount }} 个</span>
@@ -854,10 +895,18 @@ onBeforeUnmount(() => {
<el-button type="danger" plain :disabled="!hasSelectedRooms || batchActionLoading" @click="openBatchDeleteDialog">
批量删除
</el-button>
</el-space>
</el-space>
</div>
<div v-if="isMobile" class="data-card-list room-card-list">
<EmptyState
v-if="!loading && rooms.length === 0"
title="暂无数据"
description="当前筛选条件下没有可展示内容"
action-text="刷新列表"
@action="loadRooms"
/>
<div v-else-if="isMobile" class="data-card-list room-card-list">
<article v-for="row in rooms" :key="row.id" class="data-card room-card">
<div class="data-card__header">
<el-avatar :src="row.avatarUrl || row.coverUrl" :size="52" class="room-avatar">
@@ -874,30 +923,42 @@ onBeforeUnmount(() => {
</div>
<div class="badge-row">
<el-tag :type="currentRecordingStateTagType(row.currentRecordingState)">
{{ currentRecordingStateLabelMap[row.currentRecordingState] }}
</el-tag>
<el-tag effect="plain">{{ row.platformName }}</el-tag>
<el-tag v-if="row.isPinned" size="small" effect="plain">置顶</el-tag>
<el-tag v-if="row.isPriority" size="small" effect="plain" type="danger">重点</el-tag>
<el-tag size="small" effect="plain" :type="autoStartDecisionTagType(row.lastAutoStartDecisionCode)">
{{ autoStartDecisionLabel(row.lastAutoStartDecisionCode) }}
</el-tag>
<StatusBadge :label="roomAvailabilityLabel(row)" :status="row.availabilityStatus" context="availability" />
<StatusBadge
:label="currentRecordingStateLabelMap[row.currentRecordingState]"
:status="row.currentRecordingState"
context="recording"
/>
<StatusBadge :label="row.platformName || '--'" :status="row.platformName || 'unknown'" />
<StatusBadge v-if="row.isPinned" label="置顶" status="completed" size="sm" />
<StatusBadge v-if="row.isPriority" label="重点" status="retrying" size="sm" />
</div>
<div class="data-card__grid">
<div>
<dt>自动开录</dt>
<dd>{{ row.lastAutoStartDecisionSummary || "暂无自动开录摘要" }}</dd>
<dt>最近事件</dt>
<dd>{{ latestEventLabel(row) }}</dd>
</div>
<div>
<dt>最近巡检</dt>
<dd>{{ formatDate(row.lastCheckedAt) }}</dd>
</div>
<div>
<dt>在线人数</dt>
<dd>--</dd>
</div>
<div>
<dt>码率</dt>
<dd>--</dd>
</div>
<div>
<dt>检测间隔</dt>
<dd>{{ formatPollingInterval(row.pollingIntervalSecondsOverride) }}</dd>
</div>
<div>
<dt>采集账号</dt>
<dd>--</dd>
</div>
<div style="grid-column: 1 / -1;">
<dt>房间配置</dt>
<dd>
@@ -926,6 +987,7 @@ onBeforeUnmount(() => {
</div>
<div class="data-card__actions">
<el-button size="small" @click="openRoomDetails(row)">查看详情</el-button>
<el-button size="small" @click="refreshRoom(row)">刷新</el-button>
<el-button size="small" @click="openSettingsDialog(row)">配置</el-button>
<el-button size="small" @click="copyRoomLink(row)">复制链接</el-button>
@@ -950,7 +1012,6 @@ onBeforeUnmount(() => {
<el-table
:data="rooms"
v-loading="loading"
:height="tableHeight"
class="premium-table rooms-table"
table-layout="fixed"
@@ -959,53 +1020,59 @@ onBeforeUnmount(() => {
>
<el-table-column type="selection" width="48" />
<el-table-column label="头像" width="88">
<el-table-column label="直播间" min-width="340">
<template #default="{ row }">
<el-avatar :src="row.avatarUrl || row.coverUrl" :size="56" class="room-avatar">
{{ getRoomAvatarText(row) }}
</el-avatar>
</template>
</el-table-column>
<el-table-column label="直播间" min-width="320">
<template #default="{ row }">
<div class="cell-title">{{ row.title || row.anchorName || row.roomId }}</div>
<div class="cell-subtitle">{{ row.anchorName || "未知主播" }}</div>
<div class="room-summary-cell">
<el-avatar :src="row.avatarUrl || row.coverUrl" :size="52" class="room-avatar">
{{ getRoomAvatarText(row) }}
</el-avatar>
<div class="room-summary-cell__copy">
<div class="cell-title">{{ row.title || row.anchorName || row.roomId }}</div>
<div class="cell-subtitle">{{ row.anchorName || "未知主播" }}</div>
<div class="config-summary">
<span>{{ row.platformName || "--" }}</span>
<span>{{ row.roomId || "--" }}</span>
<span>{{ formatPollingInterval(row.pollingIntervalSecondsOverride) }}</span>
</div>
</div>
</div>
<div v-if="row.alias && row.alias !== row.anchorName" class="cell-subtitle">别名：{{ row.alias }}</div>
<div v-if="row.remark" class="cell-subtitle">{{ row.remark }}</div>
<div class="config-summary">
<span v-if="row.isPinned">置顶</span>
<span v-if="row.isPriority">重点</span>
<span>{{ formatPollingInterval(row.pollingIntervalSecondsOverride) }}</span>
<div class="badge-row">
<StatusBadge v-if="row.isPinned" label="置顶" status="completed" size="sm" />
<StatusBadge v-if="row.isPriority" label="重点" status="retrying" size="sm" />
</div>
<div class="monospace cell-mono">{{ row.roomId }}</div>
</template>
</el-table-column>
<el-table-column label="平台" width="110">
<el-table-column label="直播状态" width="128">
<template #default="{ row }">
<el-tag effect="plain">{{ row.platformName }}</el-tag>
<StatusBadge :label="roomAvailabilityLabel(row)" :status="row.availabilityStatus" context="availability" />
</template>
</el-table-column>
<el-table-column label="直播状态" width="120">
<el-table-column label="录制状态" width="128">
<template #default="{ row }">
<el-tag :type="currentRecordingStateTagType(row.currentRecordingState)">
{{ currentRecordingStateLabelMap[row.currentRecordingState] }}
</el-tag>
<StatusBadge
:label="currentRecordingStateLabelMap[row.currentRecordingState]"
:status="row.currentRecordingState"
context="recording"
/>
</template>
</el-table-column>
<el-table-column label="自动开录" min-width="280">
<el-table-column label="最近事件" min-width="300">
<template #default="{ row }">
<div class="auto-start-cell">
<div class="auto-start-cell__head">
<el-tag size="small" :type="autoStartDecisionTagType(row.lastAutoStartDecisionCode)" effect="plain">
{{ autoStartDecisionLabel(row.lastAutoStartDecisionCode) }}
</el-tag>
<StatusBadge
size="sm"
:label="autoStartDecisionLabel(row.lastAutoStartDecisionCode)"
:status="row.lastAutoStartDecisionCode || 'unknown'"
/>
<span class="table-date-text">{{ formatDate(row.lastAutoStartDecisionAt) }}</span>
</div>
<div class="cell-subtitle">{{ row.lastAutoStartDecisionSummary || "暂无自动开录摘要" }}</div>
<div class="cell-subtitle">{{ latestEventLabel(row) }}</div>
<el-popover
v-if="row.lastAutoStartDecisionDetail"
trigger="hover"
@@ -1032,7 +1099,7 @@ onBeforeUnmount(() => {
</template>
</el-table-column>
<el-table-column label="录制开关" width="128">
<el-table-column label="录制开关" width="120">
<template #default="{ row }">
<el-switch
:model-value="row.isEnabled"
@@ -1045,6 +1112,16 @@ onBeforeUnmount(() => {
</template>
</el-table-column>
<el-table-column label="监控字段" width="168">
<template #default="{ row }">
<div class="table-placeholder-grid">
<span>在线人数 --</span>
<span>码率 --</span>
<span>采集账号 --</span>
</div>
</template>
</el-table-column>
<el-table-column label="最近检测" width="180">
<template #default="{ row }">
<div class="table-date-text">{{ formatDate(row.lastCheckedAt) }}</div>
@@ -1054,6 +1131,7 @@ onBeforeUnmount(() => {
<el-table-column label="操作" width="380">
<template #default="{ row }">
<div class="room-actions-cell">
<el-button size="small" @click="openRoomDetails(row)">查看</el-button>
<el-button size="small" @click="refreshRoom(row)">刷新</el-button>
<el-button size="small" @click="openSettingsDialog(row)">配置</el-button>
<el-button size="small" @click="copyRoomLink(row)">复制链接</el-button>
@@ -1069,6 +1147,76 @@ onBeforeUnmount(() => {
</div>
</el-card>
<RightDrawer
v-model="roomDetailVisible"
:title="activeRoom?.title || activeRoom?.anchorName || activeRoom?.roomId || '直播间详情'"
:subtitle="activeRoomSubtitle"
>
<div v-if="activeRoom" class="detail-panel">
<div class="detail-panel__hero">
<el-avatar :src="activeRoom.avatarUrl || activeRoom.coverUrl" :size="64" class="room-avatar">
{{ getRoomAvatarText(activeRoom) }}
</el-avatar>
<div>
<div class="detail-panel__title">{{ activeRoom.anchorName || "未知主播" }}</div>
<div class="detail-panel__meta">{{ activeRoom.originalLiveRoomUrl || activeRoom.sourceUrl || "--" }}</div>
</div>
</div>
<div class="badge-row">
<StatusBadge :label="roomAvailabilityLabel(activeRoom)" :status="activeRoom.availabilityStatus" context="availability" />
<StatusBadge
:label="currentRecordingStateLabelMap[activeRoom.currentRecordingState]"
:status="activeRoom.currentRecordingState"
context="recording"
/>
<StatusBadge :label="activeRoom.platformName || '--'" :status="activeRoom.platformName || 'unknown'" />
</div>
<el-descriptions :column="1" border class="detail-panel__descriptions">
<el-descriptions-item label="直播间名称">
{{ activeRoom.title || activeRoom.anchorName || activeRoom.roomId || "--" }}
</el-descriptions-item>
<el-descriptions-item label="平台 + Room ID">
{{ activeRoom.platformName || "--" }} · {{ activeRoom.roomId || "--" }}
</el-descriptions-item>
<el-descriptions-item label="直播状态">
{{ roomAvailabilityLabel(activeRoom) }}
</el-descriptions-item>
<el-descriptions-item label="录制状态">
{{ currentRecordingStateLabelMap[activeRoom.currentRecordingState] || "--" }}
</el-descriptions-item>
<el-descriptions-item label="在线人数">--</el-descriptions-item>
<el-descriptions-item label="码率">--</el-descriptions-item>
<el-descriptions-item label="录制时长">--</el-descriptions-item>
<el-descriptions-item label="采集账号">--</el-descriptions-item>
<el-descriptions-item label="最近事件">
{{ latestEventLabel(activeRoom) }}
</el-descriptions-item>
<el-descriptions-item label="最近巡检">
{{ formatDate(activeRoom.lastCheckedAt) }}
</el-descriptions-item>
<el-descriptions-item label="自动开录详情">
{{ activeRoom.lastAutoStartDecisionDetail || "--" }}
</el-descriptions-item>
<el-descriptions-item label="房间配置">
{{ getQualityLabel(activeRoom.effectiveSettings.preferredQuality) }} ·
{{ outputFormatLabelMap[activeRoom.effectiveSettings.outputFormat] }} ·
{{ saveModeLabelMap[activeRoom.effectiveSettings.saveMode] }} ·
{{ activeRoom.effectiveSettings.enableDanmakuRecording ? "弹幕开" : "弹幕关" }}
</el-descriptions-item>
</el-descriptions>
</div>
<template #footer>
<el-button @click="roomDetailVisible = false">关闭</el-button>
<el-button @click="activeRoom && openSettingsDialog(activeRoom)">配置</el-button>
<el-button type="primary" :disabled="!activeRoom?.isEnabled" @click="activeRoom && openRecordDialog(activeRoom)">
开始录制
</el-button>
</template>
</RightDrawer>
<el-dialog
v-model="createDialogVisible"
class="form-dialog"
@@ -1083,7 +1231,7 @@ onBeforeUnmount(() => {
v-model="createForm.url"
type="textarea"
:rows="5"
placeholder="粘贴抖音 / Bilibili / 虎牙直播间链接，或直接输入 roomId"
placeholder="粘贴 Douyin / Bilibili / Huya / Douyu / Kuaishou / TikTok / YouTube / Twitch 等直播间链接"
/>
</el-form-item>
@@ -1129,7 +1277,7 @@ onBeforeUnmount(() => {
v-model="importForm.content"
type="textarea"
:rows="12"
placeholder="https://live.douyin.com/845878323112,主播: 熊宇一&#10;https://live.douyin.com/262011082654"
placeholder="https://live.douyin.com/845878323112,主播: 熊宇一&#10;https://www.twitch.tv/example_channel&#10;https://www.youtube.com/watch?v=example12345"
/>
</el-form-item>
@@ -1455,6 +1603,46 @@ onBeforeUnmount(() => {
gap: 24px;
}
.live-console-grid {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.9fr);
gap: 18px;
}
.focus-card :deep(.el-card__body) {
display: grid;
gap: 18px;
}
.focus-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.focus-card__eyebrow {
margin-bottom: 8px;
color: var(--accent);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.focus-card__description {
margin: 0;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.75;
}
.focus-card__chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.header-actions {
align-self: center;
}
@@ -1518,6 +1706,16 @@ onBeforeUnmount(() => {
overflow: hidden;
}
.room-summary-cell {
display: flex;
align-items: flex-start;
gap: 14px;
}
.room-summary-cell__copy {
min-width: 0;
}
.room-avatar {
box-shadow: 0 14px 28px rgba(52, 84, 112, 0.14);
}
@@ -1617,10 +1815,46 @@ onBeforeUnmount(() => {
width: 100%;
}
.table-placeholder-grid {
display: grid;
gap: 6px;
color: var(--text-secondary);
font-size: 12px;
}
.room-actions-cell :deep(.el-button) {
margin: 0;
}
.detail-panel {
display: grid;
gap: 18px;
}
.detail-panel__hero {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
border-radius: 16px;
border: 1px solid var(--border-subtle);
background: var(--surface-muted);
}
.detail-panel__title {
color: var(--text-primary);
font-size: 18px;
font-weight: 700;
}
.detail-panel__meta {
margin-top: 6px;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.7;
word-break: break-all;
}
.field-help {
margin-top: -8px;
margin-bottom: 14px;
@@ -1798,6 +2032,10 @@ onBeforeUnmount(() => {
}
@media (max-width: 960px) {
.live-console-grid {
grid-template-columns: 1fr;
}
.toolbar-row {
flex-direction: column;
}
frontend/src/views/MediaBrowserView.vue
+26 -1
View File
@@ -3,6 +3,8 @@ import { computed, onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { FolderOpened, VideoPlay, Document, RefreshRight } from "@element-plus/icons-vue";
import apiClient, { buildApiUrl, getApiErrorMessage } from "@/api/client";
import EmptyState from "@/components/ui/EmptyState.vue";
import MetricCard from "@/components/ui/MetricCard.vue";
import type { MediaBrowserItem, MediaBrowserResponse, TranscodeMediaFileResult } from "@/types";
const loading = ref(false);
@@ -14,6 +16,9 @@ const previewTitle = ref("");
const previewUrl = ref("");
const currentPathLabel = computed(() => browser.value?.currentPath || "平台目录");
const directoryCount = computed(() => browser.value?.items.filter((item) => item.type === "directory").length ?? 0);
const mediaFileCount = computed(() => browser.value?.items.filter((item) => item.type !== "directory").length ?? 0);
const transcodeReadyCount = computed(() => browser.value?.items.filter((item) => item.canTranscode).length ?? 0);
async function loadDirectory(path = "") {
loading.value = true;
@@ -140,6 +145,13 @@ onMounted(() => {
<el-alert v-if="loadError" class="page-error-alert" type="error" :closable="false" show-icon :title="loadError" />
<div class="stats-grid media-browser-metrics">
<MetricCard label="当前目录" :value="currentPathLabel" description="录制归档目录仅在后端允许的路径范围内浏览" />
<MetricCard label="子目录数" :value="directoryCount" description="当前目录下的可进入目录数量" :icon="FolderOpened" />
<MetricCard label="媒体文件" :value="mediaFileCount" description="当前目录下可直接预览或下载的文件数" :icon="Document" />
<MetricCard label="待转码" :value="transcodeReadyCount" description="当前目录下支持补转码为 MP4 的文件数量" :icon="VideoPlay" />
</div>
<el-card class="surface-card" shadow="never">
<div class="section-header">
<div>
@@ -171,7 +183,13 @@ onMounted(() => {
<el-skeleton v-if="loading && !browser" animated :rows="8" />
<el-empty v-else-if="browser && browser.items.length === 0" description="当前目录为空" />
<EmptyState
v-else-if="browser && browser.items.length === 0"
title="暂无数据"
description="当前筛选条件下没有可展示内容"
action-text="刷新目录"
@action="refreshCurrentDirectory"
/>
<div v-else-if="browser" class="table-scroll-shell">
<el-table :data="browser.items" class="premium-table" table-layout="auto">
@@ -252,6 +270,13 @@ onMounted(() => {
border-radius: 14px;
}
.media-browser-metrics :deep(.metric-card__value) {
overflow: hidden;
font-size: clamp(22px, 1.8vw, 30px);
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumb-row {
display: flex;
align-items: center;
frontend/src/views/RecordTasksView.vue
+88 -32
View File
@@ -2,11 +2,15 @@
import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElNotification } from "element-plus";
import { Bell, Connection, VideoCamera } from "@element-plus/icons-vue";
import apiClient, {
buildApiUrl,
getApiErrorMessage,
getBackendUnavailableMessage
} from "@/api/client";
import EmptyState from "@/components/ui/EmptyState.vue";
import MetricCard from "@/components/ui/MetricCard.vue";
import StatusBadge from "@/components/ui/StatusBadge.vue";
import { markBackendAvailable, markBackendUnavailable } from "@/composables/useBackendStatus";
import { useViewport } from "@/composables/useViewport";
import type {
@@ -818,7 +822,7 @@ onBeforeUnmount(() => {
<div class="page-kicker">录制工作台</div>
<h1 class="page-title">录制任务</h1>
<p class="page-subtitle">
按直播会话聚合展示分片任务，列表会自动接收状态、转码进度和分片变更；保留手动刷新入口用于兜底。
按直播会话聚合展示真实录制任务，自动接收状态、转码进度和分片变化，适合观察开播检测到归档上传的完整链路。
</p>
</div>
@@ -856,7 +860,7 @@ onBeforeUnmount(() => {
<div class="cleanup-status-card__title">当前任务状态：{{ cleanupOperationStatusLabel }}</div>
</div>
<div class="cleanup-status-card__actions">
<el-tag :type="cleanupOperationTagType">{{ cleanupOperationStatusLabel }}</el-tag>
<StatusBadge :label="cleanupOperationStatusLabel" :status="cleanupOperation?.status" context="cleanup" />
<el-button v-if="cleanupOperationFinished" text @click="clearTrackedCleanupOperation">收起</el-button>
</div>
</div>
@@ -875,26 +879,30 @@ onBeforeUnmount(() => {
</ul>
</el-card>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card__label">录制会话</div>
<div class="stat-card__value">{{ sessions.length }}</div>
<div class="stat-card__hint">按整场直播聚合分片任务</div>
<div class="record-ops-grid">
<div class="stats-grid">
<MetricCard label="录制会话" :value="sessions.length" description="按整场直播聚合的录制会话数" :icon="VideoCamera" />
<MetricCard label="活跃会话" :value="activeSessionCount" description="启动中、录制中、停止中、处理中" :icon="Connection" />
<MetricCard label="分片任务" :value="totalTaskCount" description="包含单文件模式下的唯一任务" :icon="Bell" />
<MetricCard label="弹幕事件" :value="totalDanmakuCount" description="累计写入 XML 的事件总数" :icon="Bell" />
</div>
<div class="stat-card">
<div class="stat-card__label">活跃会话</div>
<div class="stat-card__value">{{ activeSessionCount }}</div>
<div class="stat-card__hint">Starting / Running / Stopping / Processing</div>
</div>
<div class="stat-card">
<div class="stat-card__label">分片任务</div>
<div class="stat-card__value">{{ totalTaskCount }}</div>
<div class="stat-card__hint">包含单文件模式下的唯一任务</div>
</div>
<div class="stat-card">
<div class="stat-card__label">弹幕事件</div>
<div class="stat-card__value">{{ totalDanmakuCount }}</div>
<div class="stat-card__hint">累计写入 XML 的事件总数</div>
<div class="record-feature-strip">
<article class="record-feature-card">
<div class="record-feature-card__eyebrow">能力说明</div>
<div class="record-feature-card__title">开播自动录制</div>
<p class="record-feature-card__description">继续复用后端轮询、自动开录和活动会话保护逻辑，不新增任何前端假状态。</p>
</article>
<article class="record-feature-card">
<div class="record-feature-card__eyebrow">能力说明</div>
<div class="record-feature-card__title">分片后处理</div>
<p class="record-feature-card__description">保留现有转码、分片完成事件和实时进度展示，聚焦运维可读性。</p>
</article>
<article class="record-feature-card">
<div class="record-feature-card__eyebrow">能力说明</div>
<div class="record-feature-card__title">上传归档</div>
<p class="record-feature-card__description">继续调用真实上传接口，空数据时显示空状态而不是伪造归档数量。</p>
</article>
</div>
</div>
@@ -926,7 +934,13 @@ onBeforeUnmount(() => {
</div>
</div>
<el-empty v-if="!loading && sessions.length === 0" description="暂无录制会话" />
<EmptyState
v-if="!loading && sessions.length === 0"
title="暂无录制任务"
description="当前筛选条件下没有可展示内容"
action-text="刷新列表"
@action="loadSessions()"
/>
<div v-else-if="isMobile" class="data-card-list session-card-list">
<article v-for="session in sessions" :key="session.id" class="data-card session-card">
@@ -935,9 +949,7 @@ onBeforeUnmount(() => {
<div class="data-card__title">{{ session.liveRoomTitle }}</div>
<div class="data-card__subtitle monospace">{{ session.roomId }}</div>
</div>
<el-tag :type="sessionTagType(session.status)">
{{ sessionStatusLabelMap[session.status] }}
</el-tag>
<StatusBadge :label="sessionStatusLabelMap[session.status]" :status="session.status" context="session" />
</div>
<div class="badge-row">
@@ -993,7 +1005,7 @@ onBeforeUnmount(() => {
<strong class="monospace">#{{ task.segmentIndex }}</strong>
<div class="cell-subtitle">{{ formatDate(task.startedAt || task.createdAt) }}</div>
</div>
<el-tag :type="taskTagType(task.status)">{{ taskStatusLabelMap[task.status] }}</el-tag>
<StatusBadge :label="taskStatusLabelMap[task.status]" :status="task.status" context="task" />
</div>
<div v-if="hasPostProcess(task)" class="session-task-card__progress">
@@ -1081,9 +1093,7 @@ onBeforeUnmount(() => {
</div>
<div class="session-title__stats">
<el-tag :type="sessionTagType(session.status)">
{{ sessionStatusLabelMap[session.status] }}
</el-tag>
<StatusBadge :label="sessionStatusLabelMap[session.status]" :status="session.status" context="session" />
<span>{{ saveModeLabelMap[session.saveMode] }}</span>
<span>{{ outputFormatLabelMap[session.outputFormat] }}</span>
<span>分片 {{ session.segmentCount }}</span>
@@ -1157,9 +1167,7 @@ onBeforeUnmount(() => {
<el-table-column label="状态" width="220">
<template #default="{ row }">
<div class="task-status-cell">
<el-tag :type="taskTagType(row.status)">
{{ taskStatusLabelMap[row.status] }}
</el-tag>
<StatusBadge :label="taskStatusLabelMap[row.status]" :status="row.status" context="task" />
<template v-if="hasPostProcess(row)">
<div class="task-status-cell__stage">{{ row.postProcessStage }}</div>
<el-progress
@@ -1360,6 +1368,50 @@ onBeforeUnmount(() => {
gap: 24px;
}
.record-ops-grid {
display: grid;
gap: 18px;
}
.record-feature-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.record-feature-card {
display: grid;
gap: 10px;
padding: 18px;
border-radius: 16px;
border: 1px solid var(--border-subtle);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
var(--surface);
box-shadow: var(--shadow-soft);
}
.record-feature-card__eyebrow {
color: var(--accent);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.record-feature-card__title {
color: var(--text-primary);
font-size: 16px;
font-weight: 700;
}
.record-feature-card__description {
margin: 0;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.75;
}
.header-actions {
align-self: center;
}
@@ -1722,6 +1774,10 @@ onBeforeUnmount(() => {
}
@media (max-width: 960px) {
.record-feature-strip {
grid-template-columns: 1fr;
}
.header-actions {
align-self: stretch;
justify-content: stretch;
frontend/src/views/RecoveryView.vue
+54 -33
View File
@@ -3,6 +3,9 @@ import { computed, onMounted, ref } from "vue";
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 StatusBadge from "@/components/ui/StatusBadge.vue";
import { useViewport } from "@/composables/useViewport";
import type {
RecoverableFinalization,
@@ -11,6 +14,7 @@ import type {
RecoveryOverview
} from "@/types";
import { autoStartDecisionLabelMap, taskStatusLabelMap } from "@/types";
import { RefreshRight, VideoCamera, WarningFilled } from "@element-plus/icons-vue";
const loading = ref(false);
const retryAllLoading = ref(false);
@@ -183,27 +187,20 @@ onMounted(loadOverview);
<el-alert v-if="loadError" class="page-error-alert" type="error" :closable="false" show-icon :title="loadError" />
<div class="stats-grid" v-loading="loading">
<div class="stat-card">
<div class="stat-card__label">存储保护</div>
<div class="stat-card__value">{{ storage?.hasEnoughSpace ? "可恢复" : "受限" }}</div>
<div class="stat-card__hint">{{ storage?.message || "暂无数据" }}</div>
</div>
<div class="stat-card">
<div class="stat-card__label">可重试开录</div>
<div class="stat-card__value">{{ liveRooms.length }}</div>
<div class="stat-card__hint">在线、启用中且当前没有活动会话的直播间。</div>
</div>
<div class="stat-card">
<div class="stat-card__label">可恢复转码</div>
<div class="stat-card__value">{{ finalizations.length }}</div>
<div class="stat-card__hint">等待继续或可手动补转码的 MP4 任务。</div>
</div>
<div class="stat-card">
<div class="stat-card__label">剩余空间</div>
<div class="stat-card__value">{{ storage ? formatBytes(storage.availableBytes) : "-" }}</div>
<div class="stat-card__hint">恢复阈值 {{ storage ? formatBytes(storage.requiredBytes) : "-" }}</div>
</div>
<div class="stats-grid recovery-metrics" v-loading="loading">
<MetricCard
label="存储保护"
:value="storage?.hasEnoughSpace ? '可恢复' : '受限'"
:description="storage?.message || '暂无存储数据'"
:icon="WarningFilled"
/>
<MetricCard label="可重试开录" :value="liveRooms.length" description="在线、启用中且没有活动会话的直播间" :icon="RefreshRight" />
<MetricCard label="可恢复转码" :value="finalizations.length" description="等待继续或可手动补转码的 MP4 任务" :icon="VideoCamera" />
<MetricCard
label="剩余空间"
:value="storage ? formatBytes(storage.availableBytes) : '--'"
:description="`恢复阈值 ${storage ? formatBytes(storage.requiredBytes) : '--'}`"
/>
</div>
<el-card class="surface-card table-card" shadow="never">
@@ -223,20 +220,30 @@ onMounted(loadOverview);
</el-button>
</div>
<div v-if="isMobile" class="data-card-list">
<EmptyState
v-if="!loading && liveRooms.length === 0"
title="暂无数据"
description="当前筛选条件下没有可展示内容"
action-text="刷新总览"
@action="loadOverview"
/>
<div v-else-if="isMobile" class="data-card-list">
<article v-for="row in liveRooms" :key="row.liveRoomId" class="data-card">
<div class="data-card__header">
<div>
<div class="data-card__title">{{ liveRoomTitle(row) }}</div>
<div class="data-card__subtitle">{{ row.anchorName || "未知主播" }}</div>
</div>
<el-tag effect="plain">{{ row.platformName }}</el-tag>
<StatusBadge :label="row.platformName || '--'" :status="row.platformName || 'unknown'" />
</div>
<div class="badge-row">
<el-tag size="small" effect="plain" :type="autoStartDecisionTagType(row.lastAutoStartDecisionCode)">
{{ autoStartDecisionLabel(row.lastAutoStartDecisionCode) }}
</el-tag>
<StatusBadge
size="sm"
:label="autoStartDecisionLabel(row.lastAutoStartDecisionCode)"
:status="row.lastAutoStartDecisionCode || 'unknown'"
/>
<span class="info-pill">{{ formatDate(row.lastCheckedAt) }}</span>
</div>
@@ -286,7 +293,7 @@ onMounted(loadOverview);
<el-table-column label="平台" width="120">
<template #default="{ row }">
<el-tag effect="plain">{{ row.platformName }}</el-tag>
<StatusBadge :label="row.platformName || '--'" :status="row.platformName || 'unknown'" />
</template>
</el-table-column>
@@ -294,9 +301,11 @@ onMounted(loadOverview);
<template #default="{ row }">
<div class="decision-cell">
<div class="decision-cell__head">
<el-tag size="small" effect="plain" :type="autoStartDecisionTagType(row.lastAutoStartDecisionCode)">
{{ autoStartDecisionLabel(row.lastAutoStartDecisionCode) }}
</el-tag>
<StatusBadge
size="sm"
:label="autoStartDecisionLabel(row.lastAutoStartDecisionCode)"
:status="row.lastAutoStartDecisionCode || 'unknown'"
/>
<span class="table-date-text">{{ formatDate(row.lastAutoStartDecisionAt) }}</span>
</div>
<div class="cell-subtitle">{{ row.lastAutoStartDecisionSummary || "暂无自动开录摘要" }}</div>
@@ -344,14 +353,22 @@ onMounted(loadOverview);
</el-button>
</div>
<div v-if="isMobile" class="data-card-list">
<EmptyState
v-if="!loading && finalizations.length === 0"
title="暂无数据"
description="当前筛选条件下没有可展示内容"
action-text="刷新总览"
@action="loadOverview"
/>
<div v-else-if="isMobile" class="data-card-list">
<article v-for="row in finalizations" :key="row.recordTaskId" class="data-card">
<div class="data-card__header">
<div>
<div class="data-card__title">{{ finalizationTitle(row) }}</div>
<div class="data-card__subtitle">{{ row.platformName }} · Segment #{{ row.segmentIndex }}</div>
</div>
<el-tag effect="plain">{{ taskStatusLabelMap[row.status] }}</el-tag>
<StatusBadge :label="taskStatusLabelMap[row.status]" :status="row.status" context="task" />
</div>
<div class="data-card__grid">
@@ -404,7 +421,7 @@ onMounted(loadOverview);
<el-table-column label="状态" width="120">
<template #default="{ row }">
<el-tag effect="plain">{{ taskStatusLabelMap[row.status] }}</el-tag>
<StatusBadge :label="taskStatusLabelMap[row.status]" :status="row.status" context="task" />
</template>
</el-table-column>
@@ -439,6 +456,10 @@ onMounted(loadOverview);
</template>
<style scoped>
.recovery-metrics :deep(.metric-card__value) {
font-size: clamp(24px, 1.9vw, 34px);
}
.decision-cell {
display: grid;
gap: 6px;
frontend/src/views/SettingsView.vue
+482 -128
View File
File diff suppressed because it is too large Load Diff