diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 98240ae..57ee0a2 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,3 +1,9 @@
+
+
diff --git a/frontend/src/components/layout/MainLayout.vue b/frontend/src/components/layout/MainLayout.vue
index 940d9ad..62f8b5a 100644
--- a/frontend/src/components/layout/MainLayout.vue
+++ b/frontend/src/components/layout/MainLayout.vue
@@ -4,13 +4,21 @@ import { useRouter, useRoute } from "vue-router";
import { useAuthStore } from "@/stores/auth";
import { useBackendStatus } from "@/composables/useBackendStatus";
import { useViewport } from "@/composables/useViewport";
+import { useUiPreferences } from "@/composables/useUiPreferences";
import {
House,
VideoCamera,
+ Document,
Tickets,
+ RefreshRight,
Setting,
SwitchButton,
- Operation
+ Operation,
+ Fold,
+ Expand,
+ Sunny,
+ Moon,
+ Monitor
} from "@element-plus/icons-vue";
const router = useRouter();
@@ -18,19 +26,115 @@ const route = useRoute();
const authStore = useAuthStore();
const { isMobile } = useViewport();
const { backendUnavailable, backendMessage } = useBackendStatus();
+const { themeMode, density, resolvedTheme, sidebarCollapsed, cycleThemeMode, toggleSidebarCollapsed } =
+ useUiPreferences();
const mobileNavVisible = ref(false);
const displayName = computed(() => authStore.user?.displayName ?? "Operator");
-const menuItems = [
- { index: "/live-rooms", label: "直播间管理", icon: House },
- { index: "/record-tasks", label: "录制任务", icon: VideoCamera },
- { index: "/logs", label: "系统日志", icon: Tickets },
- { index: "/settings", label: "系统设置", icon: Setting }
+
+const navigationGroups = [
+ {
+ key: "monitor",
+ title: "直播监控",
+ items: [
+ { index: "/live-rooms", label: "直播间", icon: House },
+ { index: "/record-tasks", label: "录制任务", icon: VideoCamera },
+ { index: "/recovery", label: "恢复中心", icon: RefreshRight }
+ ]
+ },
+ {
+ key: "review",
+ title: "回顾分析",
+ items: [
+ { index: "/daily-reviews", label: "回顾日报", icon: Document },
+ { index: "/logs", label: "系统日志", icon: Tickets }
+ ]
+ },
+ {
+ key: "system",
+ title: "系统管理",
+ items: [{ index: "/settings", label: "系统设置", icon: Setting }]
+ }
];
+const pageMeta = computed(() => {
+ if (route.name === "live-rooms") {
+ return {
+ title: "直播监控控制台",
+ subtitle: "统一管理直播间、自动开录、实时状态和异常处理。"
+ };
+ }
+
+ if (route.name === "record-tasks") {
+ return {
+ title: "录制任务工作区",
+ subtitle: "按会话观察录制进度、分片状态、转码后处理和删除操作。"
+ };
+ }
+
+ if (route.name === "record-session-detail") {
+ return {
+ title: "会话事件时间轴",
+ subtitle: "用整场视角查看分片、脚本、Webhook 与弹幕热度。"
+ };
+ }
+
+ if (route.name === "record-task-detail") {
+ return {
+ title: "分片详情",
+ subtitle: "查看单个分片的产物、状态、输出结果和原始日志。"
+ };
+ }
+
+ if (route.name === "daily-reviews") {
+ return {
+ title: "回顾日报",
+ subtitle: "按天回看录制规模、热点时刻、异常分布与重点会话。"
+ };
+ }
+
+ if (route.name === "logs") {
+ return {
+ title: "系统日志",
+ subtitle: "面向排障的原始事件流，支持快速缩小范围和定位异常。"
+ };
+ }
+
+ if (route.name === "recovery") {
+ return {
+ title: "恢复中心",
+ subtitle: "集中处理未自动拉起的直播间和等待恢复的 MP4 转码任务。"
+ };
+ }
+
+ if (route.name === "settings") {
+ return {
+ title: "系统设置",
+ subtitle: "录制、存储、通知、脚本和平台策略统一在这里收口。"
+ };
+ }
+
+ return {
+ title: "Live Recorder",
+ subtitle: "专业直播录制运维控制台。"
+ };
+});
+
+const currentThemeIcon = computed(() => {
+ if (themeMode.value === "light") {
+ return Sunny;
+ }
+
+ if (themeMode.value === "dark") {
+ return Moon;
+ }
+
+ return Monitor;
+});
+
watch(
- () => route.path,
+ () => route.fullPath,
() => {
mobileNavVisible.value = false;
}
@@ -44,94 +148,157 @@ async function handleLogout() {
-
-