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;
}