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

feat: add live room metadata, uploads, proxies and backups

Browse Source
This commit is contained in:
nanxun
2026-04-26 17:35:51 +08:00
parent 85f24f8a84
commit d2b2f714e0
38 changed files with 2371 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/layout/MainLayout.vue
+172 -5
View File
@@ -31,7 +31,7 @@ const { themeMode, density, resolvedTheme, sidebarCollapsed, cycleThemeMode, tog
const mobileNavVisible = ref(false);
const displayName = computed(() => authStore.user?.displayName ?? "Operator");
const displayName = computed(() => authStore.user?.displayName ?? "管理员");
const navigationGroups = [
{
@@ -133,6 +133,12 @@ const currentThemeIcon = computed(() => {
return Monitor;
});
const shouldShowGlobalBackendAlert = computed(() => backendUnavailable.value && route.name !== "record-tasks");
function isNavItemActive(index: string) {
return route.path === index || route.path.startsWith(`${index}/`);
}
watch(
() => route.fullPath,
() => {
@@ -166,7 +172,25 @@ async function handleLogout() {
<div class="app-sidebar__scroll">
<section v-for="group in navigationGroups" :key="group.key" class="app-nav-group">
<div v-if="!sidebarCollapsed" class="app-nav-group__title">{{ group.title }}</div>
<el-menu :default-active="route.path" router class="app-nav-menu" :collapse="sidebarCollapsed">
<div v-if="sidebarCollapsed" class="app-nav-icon-list">
<el-tooltip
v-for="item in group.items"
:key="item.index"
:content="item.label"
placement="right"
:show-after="120"
>
<button
type="button"
class="app-nav-icon-item"
:class="{ 'is-active': isNavItemActive(item.index) }"
@click="router.push(item.index)"
>
<el-icon><component :is="item.icon" /></el-icon>
</button>
</el-tooltip>
</div>
<el-menu v-else :default-active="route.path" router class="app-nav-menu">
<el-menu-item v-for="item in group.items" :key="item.index" :index="item.index">
<el-icon><component :is="item.icon" /></el-icon>
<template #title>{{ item.label }}</template>
@@ -175,6 +199,50 @@ async function handleLogout() {
</section>
</div>
<div class="app-sidebar__panel">
<template v-if="!sidebarCollapsed">
<div class="app-sidebar__workspace">
<div class="app-sidebar__workspace-eyebrow">控制中心</div>
<div class="app-sidebar__workspace-title">Live Recorder</div>
<div class="app-sidebar__workspace-subtitle">专业直播录制运维控制台</div>
</div>
<div class="app-sidebar__selectors">
<el-select v-model="themeMode" size="small">
<el-option label="跟随系统" value="system" />
<el-option label="浅色" value="light" />
<el-option label="深色" value="dark" />
</el-select>
<el-select v-model="density" size="small">
<el-option label="舒适密度" value="comfortable" />
<el-option label="紧凑密度" value="compact" />
</el-select>
</div>
<div class="app-sidebar__panel-row">
<div class="app-sidebar__status">
<span class="app-status-dot" :class="`app-status-dot--${resolvedTheme}`"></span>
<span>{{ resolvedTheme === "dark" ? "深色控制台" : "浅色控制台" }}</span>
</div>
<el-button class="app-sidebar__utility" :icon="Fold" text @click="toggleSidebarCollapsed">收起导航</el-button>
</div>
<div class="app-sidebar__panel-row">
<div class="app-account">
<div class="app-account__label">当前账户</div>
<div class="app-account__name">{{ displayName }}</div>
</div>
<el-button class="app-sidebar__logout" :icon="SwitchButton" text @click="handleLogout">退出登录</el-button>
</div>
</template>
<template v-else>
<el-button class="app-sidebar__icon-button" :icon="Expand" text @click="toggleSidebarCollapsed" />
<el-button class="app-sidebar__icon-button" :icon="currentThemeIcon" text @click="cycleThemeMode" />
<el-button class="app-sidebar__icon-button" :icon="SwitchButton" text @click="handleLogout" />
</template>
</div>
<div class="app-sidebar__footer">
<div class="app-sidebar__status">
<span class="app-status-dot" :class="`app-status-dot--${resolvedTheme}`"></span>
@@ -262,7 +330,7 @@ async function handleLogout() {
@click="toggleSidebarCollapsed"
/>
<div class="app-topbar__copy">
<div class="app-topbar__eyebrow">Control Room</div>
<div class="app-topbar__eyebrow">控制中心</div>
<div class="app-topbar__title">Live Recorder</div>
<div class="app-topbar__subtitle">专业直播录制运维控制台</div>
</div>
@@ -293,7 +361,7 @@ async function handleLogout() {
<el-main class="app-main">
<el-alert
v-if="backendUnavailable"
v-if="shouldShowGlobalBackendAlert"
class="backend-alert"
type="error"
:closable="false"
@@ -317,6 +385,7 @@ async function handleLogout() {
display: flex;
flex-direction: column;
gap: 18px;
overflow-y: auto;
padding: 20px 16px;
border-right: 1px solid var(--border-subtle);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.16));
@@ -375,7 +444,8 @@ async function handleLogout() {
}
.app-sidebar__scroll {
display: grid;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 0;
}
@@ -417,6 +487,81 @@ async function handleLogout() {
box-shadow: inset 0 0 0 1px rgba(47, 111, 180, 0.18);
}
.app-nav-icon-list {
display: grid;
gap: 8px;
}
.app-nav-icon-item {
display: grid;
place-items: center;
width: 100%;
min-height: 44px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.app-nav-icon-item:hover {
background: var(--accent-soft);
color: var(--text-primary);
}
.app-nav-icon-item.is-active {
background: linear-gradient(180deg, rgba(47, 111, 180, 0.16), rgba(47, 111, 180, 0.08));
color: var(--accent);
box-shadow: inset 0 0 0 1px rgba(47, 111, 180, 0.18);
}
.app-sidebar__panel {
display: grid;
gap: 12px;
margin-top: 6px;
padding: 14px;
border-radius: 10px;
border: 1px solid var(--border-subtle);
background: var(--surface);
}
.app-sidebar__workspace-eyebrow {
margin-bottom: 6px;
color: var(--accent);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.app-sidebar__workspace-title {
color: var(--text-primary);
font-size: 18px;
font-weight: 760;
letter-spacing: -0.04em;
line-height: 1.1;
}
.app-sidebar__workspace-subtitle {
margin-top: 8px;
color: var(--text-secondary);
font-size: 12px;
line-height: 1.6;
}
.app-sidebar__selectors {
display: grid;
gap: 10px;
}
.app-sidebar__panel-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.app-sidebar__footer {
display: grid;
gap: 12px;
@@ -427,11 +572,20 @@ async function handleLogout() {
background: var(--surface);
}
.app-sidebar__footer {
display: none;
}
.app-sidebar--collapsed .app-sidebar__footer {
padding-inline: 10px;
justify-items: center;
}
.app-sidebar--collapsed .app-sidebar__panel {
padding-inline: 10px;
justify-items: center;
}
.app-sidebar__status {
display: flex;
align-items: center;
@@ -475,15 +629,24 @@ async function handleLogout() {
justify-content: flex-start;
}
.app-sidebar__utility {
justify-content: flex-end;
}
.app-sidebar--collapsed .app-sidebar__logout {
justify-content: center;
}
.app-sidebar__icon-button {
justify-content: center;
}
.app-shell__main {
min-width: 0;
}
.app-topbar {
display: none;
height: auto;
padding: 18px var(--content-padding) 0;
}
@@ -617,6 +780,10 @@ async function handleLogout() {
}
@media (max-width: 1023px) {
.app-topbar {
display: block;
}
.app-topbar {
padding: 14px var(--content-padding-mobile) 0;
}
frontend/src/types.ts
+117 -27
View File
@@ -24,10 +24,17 @@ export interface LiveRoom {
anchorId?: string;
avatarUrl?: string;
coverUrl?: string;
remark?: string;
isPinned: boolean;
alias?: string;
isPriority: boolean;
pollingIntervalSecondsOverride?: number;
originalLiveRoomUrl: string;
overrides: LiveRoomSettingsOverrides;
effectiveSettings: LiveRoomEffectiveSettings;
isEnabled: boolean;
availabilityStatus: number;
currentRecordingState: number;
lastAutoStartDecisionCode?: string;
lastAutoStartDecisionSummary?: string;
lastAutoStartDecisionDetail?: string;
@@ -100,6 +107,14 @@ export interface LiveRoomEffectiveSettings {
danmakuRetryDelayMaxSeconds: number;
}
export interface UpdateLiveRoomMetadataRequest {
remark?: string | null;
isPinned: boolean;
alias?: string | null;
isPriority: boolean;
pollingIntervalSecondsOverride?: number | null;
}
export interface RecordTask {
id: string;
liveRoomId: string;
@@ -133,6 +148,13 @@ export interface RecordResult {
danmakuMessageCount: number;
finalStatus: number;
errorMessage?: string;
uploadStatus: number;
lastUploadProvider?: string;
remoteVideoPath?: string;
remoteDanmakuPath?: string;
lastUploadedAt?: string;
uploadErrorMessage?: string;
deletedLocalFilesAfterUpload: boolean;
createdAt: string;
}
@@ -184,6 +206,23 @@ export interface DeleteCompletedRecordTasksResult {
warnings: string[];
}
export interface RecordArtifactUploadItemResult {
recordTaskId: string;
success: boolean;
message: string;
provider?: string;
remoteVideoPath?: string;
remoteDanmakuPath?: string;
deletedLocalFilesAfterUpload: boolean;
}
export interface RecordArtifactUploadBatchResult {
requestedCount: number;
successCount: number;
failedCount: number;
items: RecordArtifactUploadItemResult[];
}
export interface RecordPreviewTicket {
url: string;
expiresAt: string;
@@ -333,6 +372,16 @@ export interface SystemSettings {
enableBackgroundPolling: boolean;
autoStartRecordingOnLive: boolean;
pollingIntervalSeconds: number;
useAliasForStorage: boolean;
enableFileUpload: boolean;
enableAutoUpload: boolean;
deleteLocalFilesAfterUpload: boolean;
uploadTarget: number;
douyinProxy: PlatformProxySettings;
bilibiliProxy: PlatformProxySettings;
huyaProxy: PlatformProxySettings;
webDavUpload: WebDavUploadSettings;
s3Upload: S3UploadSettings;
enableEventScripts: boolean;
liveStartedScriptMode: string;
liveStartedScriptPath: string;
@@ -370,6 +419,28 @@ export interface SystemSettings {
douyinCookie: string;
}
export interface PlatformProxySettings {
enabled: boolean;
proxyUrl: string;
}
export interface WebDavUploadSettings {
endpoint: string;
basePath: string;
username: string;
password: string;
}
export interface S3UploadSettings {
endpoint: string;
bucket: string;
region: string;
accessKey: string;
secretKey: string;
prefix: string;
forcePathStyle: boolean;
}
export interface EventScriptTestResult {
success: boolean;
message: string;
@@ -444,29 +515,35 @@ export interface RecoveryActionResult {
}
export const availabilityLabelMap: Record<number, string> = {
0: "Unknown",
1: "Offline",
2: "Live"
0: "未知",
1: "未开播",
2: "开播中"
};
export const currentRecordingStateLabelMap: Record<number, string> = {
0: "未开播",
1: "开播中",
2: "录制中"
};
export const taskStatusLabelMap: Record<number, string> = {
0: "Pending",
1: "Starting",
2: "Running",
3: "Stopping",
4: "Completed",
5: "Failed",
6: "Stopped",
7: "Processing"
0: "待处理",
1: "启动中",
2: "录制中",
3: "停止中",
4: "已完成",
5: "失败",
6: "已停止",
7: "处理中"
};
export const sessionStatusLabelMap = taskStatusLabelMap;
export const logLevelLabelMap: Record<number, string> = {
0: "Trace",
1: "Info",
2: "Warning",
3: "Error"
0: "跟踪",
1: "信息",
2: "警告",
3: "错误"
};
export const outputFormatLabelMap: Record<number, string> = {
@@ -475,28 +552,41 @@ export const outputFormatLabelMap: Record<number, string> = {
};
export const saveModeLabelMap: Record<number, string> = {
0: "Single File",
1: "Segmented"
0: "单文件",
1: "分段"
};
export const recordingTemplateLabelMap: Record<number, string> = {
0: "Stream Copy",
1: "Balanced MP4",
2: "Archive TS"
0: "直接封装",
1: "均衡 MP4",
2: "归档 TS"
};
export const autoStartDecisionLabelMap: Record<string, string> = {
started: "Started",
skipped_disabled: "Disabled",
skipped_storage: "Low Storage",
skipped_active_session: "Active Session",
skipped_offline: "Offline",
failed_startup: "Startup Failed"
started: "已启动",
skipped_disabled: "已禁用",
skipped_storage: "存储不足",
skipped_active_session: "已有活动会话",
skipped_offline: "房间未开播",
skipped_debounce: "触发防抖中",
failed_startup: "启动失败"
};
export const platformLabelMap: Record<number, string> = {
0: "Unknown",
0: "未知",
1: "Douyin",
2: "Bilibili",
3: "Huya"
};
export const uploadTargetLabelMap: Record<number, string> = {
0: "不上传",
1: "WebDAV",
2: "S3"
};
export const uploadStatusLabelMap: Record<number, string> = {
0: "未上传",
1: "已上传",
2: "上传失败"
};
frontend/src/views/DailyReviewsView.vue
+14 -14
View File
@@ -1,4 +1,4 @@
<script setup lang="ts">
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useViewport } from "@/composables/useViewport";
@@ -86,10 +86,9 @@ onMounted(loadReport);
<div class="page-stack">
<div class="page-header">
<div>
<h1 class="page-title">回顾日报</h1>
<h1 class="page-title">鍥為【鏃ユ姤</h1>
<p class="page-subtitle">
按天聚合录制时长、异常和弹幕热度。日报只做页面内查看，不会主动推送。
</p>
鎸夊ぉ鑱氬悎褰曞埗鏃堕暱銆佸紓甯稿拰寮瑰箷鐑害銆傛棩鎶ュ彧鍋氶〉闈㈠唴鏌ョ湅锛屼笉浼氫富鍔ㄦ帹閫併€? </p>
</div>
<el-space wrap class="header-actions">
@@ -102,7 +101,7 @@ onMounted(loadReport);
:disabled-date="disableFutureDates"
@change="loadReport"
/>
<el-button @click="loadReport">刷新日报</el-button>
<el-button @click="loadReport">鍒锋柊鏃ユ姤</el-button>
</el-space>
</div>
@@ -135,7 +134,7 @@ onMounted(loadReport);
<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 class="stat-card__hint">来自当天警告 / 错误系统日志</div>
</div>
<div class="stat-card">
<div class="stat-card__label">弹幕事件</div>
@@ -148,7 +147,7 @@ onMounted(loadReport);
<div class="section-header">
<div>
<h3 class="section-title">直播间汇总</h3>
<p class="section-subtitle">每个房间当天的录制规模、异常和弹幕数量。</p>
<p class="section-subtitle">每个房间当天的录制规模、异常数量和弹幕活跃度都会聚合在这里。</p>
</div>
</div>
@@ -184,7 +183,7 @@ onMounted(loadReport);
<div class="section-header">
<div>
<h3 class="section-title">重点会话</h3>
<p class="section-subtitle">最长、最热和异常最多的会话会出现在这里。</p>
<p class="section-subtitle">最长、最热和异常最多的会话会集中展示在这里。</p>
</div>
</div>
@@ -204,15 +203,15 @@ onMounted(loadReport);
<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>
<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>
<el-button size="small" @click="openSession(item.recordSessionId)">鏌ョ湅浼氳瘽</el-button>
</div>
</section>
</div>
@@ -222,7 +221,7 @@ onMounted(loadReport);
<div class="section-header">
<div>
<h3 class="section-title">热点时刻</h3>
<p class="section-subtitle">基于弹幕 XML 的分钟级活跃度，帮助快速定位当天最热的时间窗。</p>
<p class="section-subtitle">基于弹幕 XML 的分钟级活跃度，帮助快速定位当天最热的时间窗口。</p>
</div>
</div>
@@ -385,3 +384,4 @@ onMounted(loadReport);
}
}
</style>
frontend/src/views/LiveRoomsView.vue
+166 -9
View File
@@ -7,6 +7,7 @@ import type { BatchLiveRoomsResult, ImportLiveRoomsResult, LiveRoom, RecordTask
import {
autoStartDecisionLabelMap,
availabilityLabelMap,
currentRecordingStateLabelMap,
outputFormatLabelMap,
recordingTemplateLabelMap,
saveModeLabelMap
@@ -56,6 +57,11 @@ const recordForm = reactive({
});
const settingsForm = reactive({
remark: "",
isPinned: false,
alias: "",
isPriority: false,
pollingIntervalSecondsOverride: "",
preferredQualityOverride: inheritValue as string | number,
outputFormatOverride: inheritValue as string | number,
saveModeOverride: inheritValue as string | number,
@@ -97,7 +103,7 @@ 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"));
const recordDialogWidth = computed(() => (isMobile.value ? "min(100vw - 24px, 440px)" : "440px"));
const settingsDialogWidth = computed(() => (isMobile.value ? "min(100vw - 24px, 720px)" : "720px"));
const settingsDialogWidth = computed(() => (isMobile.value ? "min(100vw - 24px, 760px)" : "840px"));
const deleteDialogWidth = computed(() => (isMobile.value ? "min(100vw - 24px, 560px)" : "clamp(480px, 46vw, 560px)"));
let autoRefreshTimer: number | null = null;
@@ -311,6 +317,28 @@ function openRecordDialog(room: LiveRoom) {
recordDialogVisible.value = true;
}
async function copyRoomLink(room: LiveRoom) {
const url = room.originalLiveRoomUrl || room.sourceUrl;
try {
await navigator.clipboard.writeText(url);
} catch {
const input = document.createElement("textarea");
input.value = url;
document.body.appendChild(input);
input.select();
document.execCommand("copy");
input.remove();
}
ElMessage.success("直播间链接已复制。");
}
function openOriginalRoom(room: LiveRoom) {
const url = room.originalLiveRoomUrl || room.sourceUrl;
window.open(url, "_blank", "noopener,noreferrer");
}
async function startRecording() {
startLoading.value = true;
@@ -330,6 +358,11 @@ async function startRecording() {
function openSettingsDialog(room: LiveRoom) {
settingsRoom.value = room;
settingsForm.remark = room.remark ?? "";
settingsForm.isPinned = room.isPinned;
settingsForm.alias = room.alias ?? "";
settingsForm.isPriority = room.isPriority;
settingsForm.pollingIntervalSecondsOverride = nullableNumberToInput(room.pollingIntervalSecondsOverride);
settingsForm.preferredQualityOverride = room.overrides.preferredQuality ?? inheritValue;
settingsForm.outputFormatOverride = room.overrides.outputFormat ?? inheritValue;
settingsForm.saveModeOverride = room.overrides.saveMode ?? inheritValue;
@@ -353,6 +386,14 @@ async function saveRoomSettings() {
settingsLoading.value = true;
try {
await apiClient.put<LiveRoom>(`/live-rooms/${settingsRoom.value.id}/metadata`, {
remark: nullableString(settingsForm.remark),
isPinned: settingsForm.isPinned,
alias: nullableString(settingsForm.alias),
isPriority: settingsForm.isPriority,
pollingIntervalSecondsOverride: parseNullableInt(settingsForm.pollingIntervalSecondsOverride)
});
const { data } = await apiClient.put<LiveRoom>(`/live-rooms/${settingsRoom.value.id}/settings`, {
preferredQualityOverride: nullableStringFromSelect(settingsForm.preferredQualityOverride),
outputFormatOverride: nullableNumberFromSelect(settingsForm.outputFormatOverride),
@@ -446,6 +487,18 @@ function availabilityTagType(status: number) {
return "warning";
}
function currentRecordingStateTagType(state: number) {
if (state === 2) {
return "danger";
}
if (state === 1) {
return "success";
}
return "info";
}
function getRoomAvatarText(room: LiveRoom) {
const source = room.anchorName?.trim() || room.title?.trim() || room.roomId;
return source.slice(0, 1).toUpperCase();
@@ -468,7 +521,7 @@ function autoStartDecisionTagType(code?: string) {
return "danger";
}
if (code === "skipped_storage" || code === "skipped_active_session") {
if (code === "skipped_storage" || code === "skipped_active_session" || code === "skipped_debounce") {
return "warning";
}
@@ -479,6 +532,17 @@ function formatDate(value?: string) {
return value ? new Date(value).toLocaleString() : "-";
}
function formatPollingInterval(override?: number) {
return typeof override === "number" && Number.isFinite(override)
? `${override} 秒`
: "跟随全局";
}
function nullableString(value: string) {
const trimmed = value.trim();
return trimmed.length > 0 ? trimmed : null;
}
function nullableBooleanToInput(value?: boolean | null) {
if (value === true) {
return "true";
@@ -540,7 +604,7 @@ onBeforeUnmount(() => {
<div class="page-stack">
<div class="page-header">
<div>
<div class="page-kicker">Live Monitoring</div>
<div class="page-kicker">直播监控</div>
<h1 class="page-title">直播间管理</h1>
<p class="page-subtitle">
直播间会长期保留在系统里。单房间配置优先于全局配置；未设置的项会自动回退到系统设置。
@@ -606,15 +670,19 @@ onBeforeUnmount(() => {
<div>
<div class="data-card__title">{{ row.title || row.anchorName || row.roomId }}</div>
<div class="data-card__subtitle">{{ row.anchorName || "未知主播" }}</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="cell-mono">{{ row.roomId }}</div>
</div>
</div>
<div class="badge-row">
<el-tag :type="availabilityTagType(row.availabilityStatus)">
{{ availabilityLabelMap[row.availabilityStatus] }}
<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>
@@ -629,6 +697,10 @@ onBeforeUnmount(() => {
<dt>最近巡检</dt>
<dd>{{ formatDate(row.lastCheckedAt) }}</dd>
</div>
<div>
<dt>检测间隔</dt>
<dd>{{ formatPollingInterval(row.pollingIntervalSecondsOverride) }}</dd>
</div>
<div style="grid-column: 1 / -1;">
<dt>房间配置</dt>
<dd>
@@ -659,6 +731,8 @@ onBeforeUnmount(() => {
<div class="data-card__actions">
<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>
<el-button size="small" @click="openOriginalRoom(row)">打开原房间</el-button>
<el-button size="small" type="primary" :disabled="!row.isEnabled" @click="openRecordDialog(row)">
录制
</el-button>
@@ -691,6 +765,13 @@ onBeforeUnmount(() => {
<template #default="{ row }">
<div class="cell-title">{{ row.title || row.anchorName || row.roomId }}</div>
<div class="cell-subtitle">{{ row.anchorName || "未知主播" }}</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>
<div class="monospace cell-mono">{{ row.roomId }}</div>
</template>
</el-table-column>
@@ -703,8 +784,8 @@ onBeforeUnmount(() => {
<el-table-column label="直播状态" width="120">
<template #default="{ row }">
<el-tag :type="availabilityTagType(row.availabilityStatus)">
{{ availabilityLabelMap[row.availabilityStatus] }}
<el-tag :type="currentRecordingStateTagType(row.currentRecordingState)">
{{ currentRecordingStateLabelMap[row.currentRecordingState] }}
</el-tag>
</template>
</el-table-column>
@@ -769,6 +850,8 @@ onBeforeUnmount(() => {
<div class="room-actions-cell">
<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>
<el-button size="small" @click="openOriginalRoom(row)">打开原房间</el-button>
<el-button size="small" type="primary" :disabled="!row.isEnabled" @click="openRecordDialog(row)">
开始录制
</el-button>
@@ -935,6 +1018,34 @@ onBeforeUnmount(() => {
</div>
<el-form label-position="top" class="settings-grid">
<div class="settings-section-title">房间信息</div>
<el-form-item label="备注">
<el-input v-model="settingsForm.remark" placeholder="给这个直播间补充说明，便于识别" />
</el-form-item>
<el-form-item label="主播别名">
<el-input v-model="settingsForm.alias" placeholder="默认跟随首次解析到的主播昵称" />
</el-form-item>
<el-form-item label="单房间检测间隔（秒）">
<el-input
v-model="settingsForm.pollingIntervalSecondsOverride"
placeholder="留空则跟随全局巡检间隔"
/>
</el-form-item>
<div class="settings-toggle-pair">
<div class="settings-toggle-item">
<span class="settings-toggle-item__label">置顶常用直播间</span>
<el-switch v-model="settingsForm.isPinned" />
</div>
<div class="settings-toggle-item">
<span class="settings-toggle-item__label">重点主播</span>
<el-switch v-model="settingsForm.isPriority" />
</div>
</div>
<div class="settings-section-title">录制覆盖</div>
<el-form-item label="默认画质">
<el-select v-model="settingsForm.preferredQualityOverride">
<el-option label="跟随全局" :value="inheritValue" />
@@ -1242,8 +1353,7 @@ onBeforeUnmount(() => {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
white-space: nowrap;
flex-wrap: wrap;
}
.room-actions-cell :deep(.el-button) {
@@ -1267,6 +1377,49 @@ onBeforeUnmount(() => {
gap: 0 16px;
}
.settings-section-title {
grid-column: 1 / -1;
margin: 4px 0 8px;
padding-top: 8px;
border-top: 1px solid var(--border-subtle);
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.settings-section-title:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.settings-toggle-pair {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.settings-toggle-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 52px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--border-subtle);
background: var(--surface-muted);
}
.settings-toggle-item__label {
color: var(--text-primary);
font-size: 13px;
font-weight: 600;
}
.dialog-form {
display: grid;
}
@@ -1377,6 +1530,10 @@ onBeforeUnmount(() => {
.settings-grid {
grid-template-columns: 1fr;
}
.settings-toggle-pair {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
frontend/src/views/LogsView.vue
+3 -3
View File
@@ -71,7 +71,7 @@ onMounted(loadLogs);
<div class="page-stack">
<div class="page-header">
<div>
<div class="page-kicker">Diagnostics</div>
<div class="page-kicker">排障中心</div>
<h1 class="page-title">系统日志</h1>
<p class="page-subtitle">
面向排障的原始事件流。这里保留最近发生的关键日志，可以按直播间、任务和级别快速收缩范围。
@@ -92,12 +92,12 @@ onMounted(loadLogs);
<div class="stat-card__hint">按当前筛选条件拉取到的日志条目。</div>
</div>
<div class="stat-card">
<div class="stat-card__label">Warning</div>
<div class="stat-card__label">警告</div>
<div class="stat-card__value">{{ totalWarnings }}</div>
<div class="stat-card__hint">用于快速观察近期是否出现成批预警。</div>
</div>
<div class="stat-card">
<div class="stat-card__label">Error</div>
<div class="stat-card__label">错误</div>
<div class="stat-card__value">{{ totalErrors }}</div>
<div class="stat-card__hint">优先定位对录制流程有破坏性的异常事件。</div>
</div>
frontend/src/views/RecordSessionDetailView.vue
+19
View File
@@ -1,9 +1,11 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useViewport } from "@/composables/useViewport";
import apiClient, { getApiErrorMessage } from "@/api/client";
import type {
RecordArtifactUploadBatchResult,
RecordSessionDetail,
RecordSessionTimelineEvent,
RecordSessionHeatBucket,
@@ -26,6 +28,7 @@ const router = useRouter();
const { isMobile } = useViewport();
const loading = ref(false);
const uploadLoading = ref(false);
const loadError = ref("");
const detail = ref<RecordSessionDetail | null>(null);
const visibleLayers = ref(["session", "segments", "processing", "danmaku", "automation"]);
@@ -60,6 +63,21 @@ async function loadDetail() {
}
}
async function uploadSessionArtifacts() {
uploadLoading.value = true;
try {
const { data } = await apiClient.post<RecordArtifactUploadBatchResult>(`/record-sessions/${props.id}/upload`);
const message = `会话上传完成：成功 ${data.successCount}，失败 ${data.failedCount}。`;
ElMessage[data.failedCount === 0 ? "success" : "warning"](message);
await loadDetail();
} catch (error) {
ElMessage.error(getApiErrorMessage(error, "会话上传失败，请稍后重试。"));
} finally {
uploadLoading.value = false;
}
}
function filterTimelineEvents(layer: string) {
if (!detail.value || !visibleLayers.value.includes(layer)) {
return [];
@@ -222,6 +240,7 @@ onMounted(loadDetail);
<el-space class="header-actions">
<el-button @click="router.push({ name: 'record-tasks' })">返回列表</el-button>
<el-button @click="loadDetail">刷新</el-button>
<el-button :loading="uploadLoading" @click="uploadSessionArtifacts">上传会话</el-button>
</el-space>
</div>
frontend/src/views/RecordTaskDetailView.vue
+40 -2
View File
@@ -4,12 +4,13 @@ import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import apiClient, { getApiErrorMessage } from "@/api/client";
import { useViewport } from "@/composables/useViewport";
import type { RecordPreviewTicket, RecordTaskDetail } from "@/types";
import type { RecordArtifactUploadItemResult, RecordPreviewTicket, RecordTaskDetail } from "@/types";
import {
logLevelLabelMap,
outputFormatLabelMap,
sessionStatusLabelMap,
taskStatusLabelMap
taskStatusLabelMap,
uploadStatusLabelMap
} from "@/types";
const props = defineProps<{
@@ -20,6 +21,7 @@ const router = useRouter();
const loading = ref(false);
const previewLoading = ref(false);
const manualTranscodeLoading = ref(false);
const uploadLoading = ref(false);
const detail = ref<RecordTaskDetail | null>(null);
const loadError = ref("");
const previewUrl = ref("");
@@ -127,6 +129,20 @@ async function startManualTranscode() {
}
}
async function uploadTaskArtifacts() {
uploadLoading.value = true;
try {
const { data } = await apiClient.post<RecordArtifactUploadItemResult>(`/record-tasks/${props.id}/upload`);
ElMessage[data.success ? "success" : "warning"](data.message);
await loadDetailAndPreview();
} catch (error) {
ElMessage.error(getApiErrorMessage(error, "上传任务文件失败，请稍后重试。"));
} finally {
uploadLoading.value = false;
}
}
function statusTagType(status: number) {
if (status === 2) {
return "success";
@@ -204,6 +220,7 @@ onMounted(loadDetailAndPreview);
<el-space class="header-actions">
<el-button @click="router.push({ name: 'record-tasks' })">返回列表</el-button>
<el-button @click="loadDetailAndPreview">刷新</el-button>
<el-button :loading="uploadLoading" @click="uploadTaskArtifacts">上传文件</el-button>
</el-space>
</div>
@@ -292,6 +309,27 @@ onMounted(loadDetailAndPreview);
<el-descriptions-item label="最终状态">
{{ detail.result ? sessionStatusLabelMap[detail.result.finalStatus] : "-" }}
</el-descriptions-item>
<el-descriptions-item label="上传状态">
{{ detail.result ? uploadStatusLabelMap[detail.result.uploadStatus] : "-" }}
</el-descriptions-item>
<el-descriptions-item label="上传提供方">
{{ detail.result?.lastUploadProvider || "-" }}
</el-descriptions-item>
<el-descriptions-item label="远端视频路径">
<span class="monospace">{{ detail.result?.remoteVideoPath || "-" }}</span>
</el-descriptions-item>
<el-descriptions-item label="远端弹幕路径">
<span class="monospace">{{ detail.result?.remoteDanmakuPath || "-" }}</span>
</el-descriptions-item>
<el-descriptions-item label="最近上传时间">
{{ formatDate(detail.result?.lastUploadedAt) }}
</el-descriptions-item>
<el-descriptions-item label="上传错误">
{{ detail.result?.uploadErrorMessage || "-" }}
</el-descriptions-item>
<el-descriptions-item label="上传后删本地">
{{ detail.result?.deletedLocalFilesAfterUpload ? "是" : "否" }}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(detail.result?.createdAt) }}
</el-descriptions-item>
frontend/src/views/RecordTasksView.vue
+62 -2
View File
@@ -9,7 +9,13 @@ import apiClient, {
} from "@/api/client";
import { markBackendAvailable, markBackendUnavailable } from "@/composables/useBackendStatus";
import { useViewport } from "@/composables/useViewport";
import type { DeleteCompletedRecordTasksResult, RecordSession, RecordTask } from "@/types";
import type {
DeleteCompletedRecordTasksResult,
RecordArtifactUploadBatchResult,
RecordArtifactUploadItemResult,
RecordSession,
RecordTask
} from "@/types";
import {
outputFormatLabelMap,
saveModeLabelMap,
@@ -21,6 +27,8 @@ const router = useRouter();
const loading = ref(false);
const deleting = ref(false);
const stoppingSessionId = ref<string | null>(null);
const uploadingSessionId = ref<string | null>(null);
const uploadingTaskId = ref<string | null>(null);
const deleteDialogVisible = ref(false);
const deleteDialogMode = ref<"tasks" | "sessions">("tasks");
const deleteDialogTaskIds = ref<string[]>([]);
@@ -211,6 +219,36 @@ async function stopSession(session: RecordSession) {
}
}
async function uploadSession(session: RecordSession) {
uploadingSessionId.value = session.id;
try {
const { data } = await apiClient.post<RecordArtifactUploadBatchResult>(`/record-sessions/${session.id}/upload`);
ElMessage[data.failedCount === 0 ? "success" : "warning"](
`会话上传完成：成功 ${data.successCount}，失败 ${data.failedCount}。`
);
await loadSessions({ resetPanels: false, resetSelection: false });
} catch (error) {
ElMessage.error(getApiErrorMessage(error, "会话上传失败，请稍后重试。"));
} finally {
uploadingSessionId.value = null;
}
}
async function uploadTask(task: RecordTask) {
uploadingTaskId.value = task.id;
try {
const { data } = await apiClient.post<RecordArtifactUploadItemResult>(`/record-tasks/${task.id}/upload`);
ElMessage[data.success ? "success" : "warning"](data.message);
await loadSessions({ resetPanels: false, resetSelection: false });
} catch (error) {
ElMessage.error(getApiErrorMessage(error, "分片上传失败，请稍后重试。"));
} finally {
uploadingTaskId.value = null;
}
}
function openDetail(task: RecordTask) {
router.push({ name: "record-task-detail", params: { id: task.id } });
}
@@ -391,7 +429,7 @@ onBeforeUnmount(() => {
<div class="page-stack">
<div class="page-header">
<div>
<div class="page-kicker">Recording Workspace</div>
<div class="page-kicker">录制工作台</div>
<h1 class="page-title">录制任务</h1>
<p class="page-subtitle">
按直播会话聚合展示分片任务，列表会自动接收状态、转码进度和分片变更；保留手动刷新入口用于兜底。
@@ -498,6 +536,9 @@ onBeforeUnmount(() => {
<div class="data-card__actions">
<el-button size="small" @click.stop="openSessionDetail(session)">查看会话</el-button>
<el-button size="small" :loading="uploadingSessionId === session.id" @click.stop="uploadSession(session)">
上传会话
</el-button>
<el-button
v-if="isActiveStatus(session.status)"
size="small"
@@ -552,6 +593,14 @@ onBeforeUnmount(() => {
<div class="data-card__actions">
<el-button size="small" @click="openDetail(task)">详情</el-button>
<el-button
v-if="isDeletableTask(task)"
size="small"
:loading="uploadingTaskId === task.id"
@click="uploadTask(task)"
>
上传
</el-button>
<el-button
v-if="isDeletableTask(task)"
size="small"
@@ -621,6 +670,9 @@ onBeforeUnmount(() => {
<el-button @click.stop="openSessionDetail(session)">
查看会话
</el-button>
<el-button :loading="uploadingSessionId === session.id" @click.stop="uploadSession(session)">
上传会话
</el-button>
<el-button
v-if="isActiveStatus(session.status)"
type="danger"
@@ -705,6 +757,14 @@ onBeforeUnmount(() => {
<template #default="{ row }">
<div class="task-actions-cell">
<el-button size="small" @click="openDetail(row)">详情</el-button>
<el-button
v-if="isDeletableTask(row)"
size="small"
:loading="uploadingTaskId === row.id"
@click="uploadTask(row)"
>
上传
</el-button>
<el-button
v-if="isActiveStatus(row.status) && session.activeSegmentIndex === row.segmentIndex"
size="small"
frontend/src/views/RecoveryView.vue
+1 -1
View File
@@ -164,7 +164,7 @@ onMounted(loadOverview);
<div class="page-stack">
<div class="page-header">
<div>
<div class="page-kicker">Recovery</div>
<div class="page-kicker">恢复处理</div>
<h1 class="page-title">恢复中心</h1>
<p class="page-subtitle">
这里集中处理没有自动拉起的直播间和可继续的 MP4 转码任务。上方的存储状态直接复用当前输出目录的保护检查结果。
frontend/src/views/SettingsView.vue
+298 -1
View File
@@ -17,6 +17,9 @@ const saving = ref(false);
const testingEmail = ref(false);
const testingWebhook = ref(false);
const runningRetentionCleanup = ref(false);
const exportingSettings = ref(false);
const importingSettings = ref(false);
const settingsImportInput = ref<HTMLInputElement | null>(null);
const scriptTesting = reactive<Record<ScriptEventType, boolean>>({
live_started: false,
live_ended: false,
@@ -59,6 +62,38 @@ const form = reactive<SystemSettings>({
enableBackgroundPolling: true,
autoStartRecordingOnLive: true,
pollingIntervalSeconds: 60,
useAliasForStorage: false,
enableFileUpload: false,
enableAutoUpload: false,
deleteLocalFilesAfterUpload: false,
uploadTarget: 0,
douyinProxy: {
enabled: false,
proxyUrl: ""
},
bilibiliProxy: {
enabled: false,
proxyUrl: ""
},
huyaProxy: {
enabled: false,
proxyUrl: ""
},
webDavUpload: {
endpoint: "",
basePath: "",
username: "",
password: ""
},
s3Upload: {
endpoint: "",
bucket: "",
region: "",
accessKey: "",
secretKey: "",
prefix: "",
forcePathStyle: false
},
enableEventScripts: false,
liveStartedScriptMode: "path",
liveStartedScriptPath: "",
@@ -189,6 +224,12 @@ const eventScriptModeOptions = [
{ label: "脚本文本", value: "inline" }
];
const uploadTargetOptions = [
{ label: "不上传", value: 0 },
{ label: "WebDAV", value: 1 },
{ label: "S3", value: 2 }
];
const canSendTestEmail = computed(() =>
Boolean(form.emailSmtpHost.trim() && form.emailFromAddress.trim() && form.emailToAddresses.trim())
);
@@ -314,6 +355,57 @@ async function runRetentionCleanup() {
}
}
async function exportSettingsBackup() {
exportingSettings.value = true;
try {
const { data, headers } = await apiClient.get<Blob>("/settings/export", {
responseType: "blob"
});
const blob = data instanceof Blob ? data : new Blob([data], { type: "application/json;charset=utf-8" });
const downloadUrl = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = downloadUrl;
link.download = parseDownloadFileName(headers["content-disposition"]) ?? `live-recorder-settings-${Date.now()}.json`;
document.body.appendChild(link);
link.click();
link.remove();
URL.revokeObjectURL(downloadUrl);
ElMessage.success("系统设置备份已导出。");
} catch (error) {
ElMessage.error(getApiErrorMessage(error, "系统设置导出失败"));
} finally {
exportingSettings.value = false;
}
}
function triggerImportSettings() {
settingsImportInput.value?.click();
}
async function importSettingsBackup(event: Event) {
const input = event.target as HTMLInputElement;
const file = input.files?.[0];
input.value = "";
if (!file) {
return;
}
importingSettings.value = true;
try {
const payload = JSON.parse(await file.text());
const { data } = await apiClient.post<SystemSettings>("/settings/import", payload);
Object.assign(form, data);
ElMessage.success("系统设置已从备份导入。");
} catch (error) {
ElMessage.error(getApiErrorMessage(error, "系统设置导入失败"));
} finally {
importingSettings.value = false;
}
}
function buildScriptTestRequest(eventType: ScriptEventType) {
if (eventType === "live_started") {
return {
@@ -366,6 +458,20 @@ function scriptTestStateType(result?: EventScriptTestResult | null) {
return result?.success ? "success" : "warning";
}
function parseDownloadFileName(contentDisposition?: string) {
if (!contentDisposition) {
return null;
}
const utf8Match = contentDisposition.match(/filename\*=UTF-8''([^;]+)/i);
if (utf8Match?.[1]) {
return decodeURIComponent(utf8Match[1]);
}
const plainMatch = contentDisposition.match(/filename=\"?([^\"]+)\"?/i);
return plainMatch?.[1] ?? null;
}
onMounted(loadSettings);
</script>
@@ -379,9 +485,21 @@ onMounted(loadSettings);
</p>
</div>
<el-button type="primary" :loading="saving" @click="saveSettings">保存设置</el-button>
<div class="page-toolbar">
<el-button :loading="exportingSettings" @click="exportSettingsBackup">导出配置</el-button>
<el-button :loading="importingSettings" @click="triggerImportSettings">导入配置</el-button>
<el-button type="primary" :loading="saving" @click="saveSettings">保存设置</el-button>
</div>
</div>
<input
ref="settingsImportInput"
type="file"
accept="application/json,.json"
class="settings-import-input"
@change="importSettingsBackup"
/>
<el-alert v-if="loadError" class="page-error-alert" type="error" :closable="false" show-icon :title="loadError" />
<div class="settings-grid" v-loading="loading">
@@ -664,6 +782,181 @@ onMounted(loadSettings);
</el-form>
</el-card>
<el-card class="surface-card settings-card settings-grid__full" shadow="never">
<h3 class="section-title">上传与归档</h3>
<p class="section-subtitle">自动或手动把视频和对应弹幕 XML 上传到单一目标端，并按开关决定是否在成功后删除本地文件。</p>
<el-form label-position="top">
<el-row :gutter="16">
<el-col :span="6">
<el-form-item label="启用上传">
<el-switch v-model="form.enableFileUpload" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="自动上传">
<el-switch v-model="form.enableAutoUpload" :disabled="!form.enableFileUpload" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="上传后删本地">
<el-switch v-model="form.deleteLocalFilesAfterUpload" :disabled="!form.enableFileUpload" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="别名用于目录">
<el-switch v-model="form.useAliasForStorage" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="上传目标">
<el-select v-model="form.uploadTarget" :disabled="!form.enableFileUpload">
<el-option
v-for="option in uploadTargetOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div v-if="form.enableFileUpload && form.uploadTarget === 1" class="template-section">
<div class="template-section__header">
<div>
<h4 class="template-section__title">WebDAV 目标</h4>
<p class="template-section__subtitle">按录制相对路径创建远端目录并上传视频与弹幕文件。</p>
</div>
</div>
<el-form label-position="top">
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="Endpoint">
<el-input v-model="form.webDavUpload.endpoint" placeholder="https://dav.example.com" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="基础路径">
<el-input v-model="form.webDavUpload.basePath" placeholder="/live-recorder" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户名">
<el-input v-model="form.webDavUpload.username" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="密码">
<el-input v-model="form.webDavUpload.password" type="password" show-password />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div v-if="form.enableFileUpload && form.uploadTarget === 2" class="template-section">
<div class="template-section__header">
<div>
<h4 class="template-section__title">S3 目标</h4>
<p class="template-section__subtitle">支持自定义 Endpoint、Bucket、Region 和路径前缀，适合对象存储兼容服务。</p>
</div>
</div>
<el-form label-position="top">
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="Endpoint">
<el-input v-model="form.s3Upload.endpoint" placeholder="https://s3.example.com" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Bucket">
<el-input v-model="form.s3Upload.bucket" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Region">
<el-input v-model="form.s3Upload.region" placeholder="auto / us-east-1" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="前缀">
<el-input v-model="form.s3Upload.prefix" placeholder="live-recorder/" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Access Key">
<el-input v-model="form.s3Upload.accessKey" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Secret Key">
<el-input v-model="form.s3Upload.secretKey" type="password" show-password />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Force Path Style">
<el-switch v-model="form.s3Upload.forcePathStyle" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="helper-panel">
自动上传固定处理“视频文件 + 对应弹幕 XML”。只有两者都上传成功并且你打开“上传后删本地”时，系统才会清理本地文件。
</div>
</el-card>
<el-card class="surface-card settings-card settings-grid__full" shadow="never">
<h3 class="section-title">平台代理</h3>
<p class="section-subtitle">代理仅作用于平台状态查询、取流和平台侧请求，不影响邮件、Webhook 和文件上传。</p>
<div class="event-script-grid">
<div class="event-script-section">
<div class="event-script-section__header">
<div>
<h4 class="event-script-section__title">Douyin</h4>
<p class="event-script-section__subtitle">适合单独给抖音状态查询和取流请求走代理。</p>
</div>
<el-switch v-model="form.douyinProxy.enabled" />
</div>
<el-form-item label="代理地址">
<el-input v-model="form.douyinProxy.proxyUrl" placeholder="http://127.0.0.1:7890" />
</el-form-item>
</div>
<div class="event-script-section">
<div class="event-script-section__header">
<div>
<h4 class="event-script-section__title">Bilibili</h4>
<p class="event-script-section__subtitle">适合单独给 Bilibili 平台请求启用或关闭代理。</p>
</div>
<el-switch v-model="form.bilibiliProxy.enabled" />
</div>
<el-form-item label="代理地址">
<el-input v-model="form.bilibiliProxy.proxyUrl" placeholder="http://127.0.0.1:7890" />
</el-form-item>
</div>
<div class="event-script-section event-script-section--full">
<div class="event-script-section__header">
<div>
<h4 class="event-script-section__title">Huya</h4>
<p class="event-script-section__subtitle">虎牙平台单独配置，不会和其它平台共用代理状态。</p>
</div>
<el-switch v-model="form.huyaProxy.enabled" />
</div>
<el-form-item label="代理地址">
<el-input v-model="form.huyaProxy.proxyUrl" placeholder="http://127.0.0.1:7890" />
</el-form-item>
</div>
</div>
</el-card>
<el-card class="surface-card settings-card settings-grid__full" shadow="never">
<h3 class="section-title">事件脚本</h3>
<p class="section-subtitle">
@@ -1092,6 +1385,10 @@ onMounted(loadSettings);
border-radius: 14px;
}
.settings-import-input {
display: none;
}
.settings-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);