From b81ead700dca5108e07d8e53d78fc8437ddcea8f Mon Sep 17 00:00:00 2001
From: nanxun <nanxun@nxsir.cn>
Date: Wed, 13 May 2026 18:51:05 +0800
Subject: [PATCH] feat: redesign live recorder control console ui

---
 frontend/src/components/layout/MainLayout.vue | 864 +++++++++---------
 frontend/src/components/ui/EmptyState.vue     |  68 ++
 frontend/src/components/ui/MetricCard.vue     |  85 ++
 frontend/src/components/ui/RightDrawer.vue    | 115 +++
 frontend/src/components/ui/StatusBadge.vue    | 299 ++++++
 frontend/src/styles/main.css                  | 213 +++--
 frontend/src/views/DailyReviewsView.vue       |  52 +-
 frontend/src/views/LiveRoomsView.vue          | 386 ++++++--
 frontend/src/views/MediaBrowserView.vue       |  27 +-
 frontend/src/views/RecordTasksView.vue        | 120 ++-
 frontend/src/views/RecoveryView.vue           |  87 +-
 frontend/src/views/SettingsView.vue           | 610 ++++++++++---
 12 files changed, 2120 insertions(+), 806 deletions(-)
 create mode 100644 frontend/src/components/ui/EmptyState.vue
 create mode 100644 frontend/src/components/ui/MetricCard.vue
 create mode 100644 frontend/src/components/ui/RightDrawer.vue
 create mode 100644 frontend/src/components/ui/StatusBadge.vue

diff --git a/frontend/src/components/layout/MainLayout.vue b/frontend/src/components/layout/MainLayout.vue
index 0194a03..540a454 100644
--- a/frontend/src/components/layout/MainLayout.vue
+++ b/frontend/src/components/layout/MainLayout.vue
@@ -1,38 +1,35 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import { useBackendStatus } from "@/composables/useBackendStatus";
-import { useViewport } from "@/composables/useViewport";
 import { useUiPreferences } from "@/composables/useUiPreferences";
+import { useViewport } from "@/composables/useViewport";
 import {
-  House,
-  VideoCamera,
+  ArrowDown,
+  Bell,
   Document,
-  Tickets,
-  FolderOpened,
+  Fold,
+  House,
+  Operation,
+  QuestionFilled,
   RefreshRight,
+  Search,
   Setting,
   SwitchButton,
-  Operation,
-  Fold,
-  Expand,
-  Sunny,
-  Moon,
-  Monitor
+  Tickets,
+  VideoCamera
 } from "@element-plus/icons-vue";
 
 const router = useRouter();
 const route = useRoute();
 const authStore = useAuthStore();
 const { isMobile } = useViewport();
-const { backendUnavailable, backendMessage } = useBackendStatus();
-const { themeMode, density, resolvedTheme, sidebarCollapsed, cycleThemeMode, toggleSidebarCollapsed } =
-  useUiPreferences();
+const { backendUnavailable, backendMessage, backendLastChangedAt } = useBackendStatus();
+const { sidebarCollapsed, toggleSidebarCollapsed } = useUiPreferences();
 
 const mobileNavVisible = ref(false);
-
-const displayName = computed(() => authStore.user?.displayName ?? "管理员");
+const globalSearch = ref("");
 
 const navigationGroups = [
   {
@@ -59,99 +56,94 @@ const navigationGroups = [
   }
 ];
 
-const pageMeta = computed(() => {
-  if (route.name === "live-rooms") {
-    return {
-      title: "直播监控控制台",
-      subtitle: "统一管理直播间、自动开录、实时状态和异常处理。"
-    };
+const userDisplayName = computed(() => authStore.user?.displayName || authStore.user?.username || "管理员");
+const userName = computed(() => authStore.user?.username || "--");
+const userId = computed(() => authStore.user?.userId || "--");
+const userExpiresAt = computed(() => authStore.user?.expiresAt || "--");
+const userAvatarText = computed(() => userDisplayName.value.trim().slice(0, 1).toUpperCase() || "录");
+const unreadNotificationCount = computed<number | null>(() => null);
+const hasUnreadNotifications = computed(
+  () => typeof unreadNotificationCount.value === "number" && unreadNotificationCount.value > 0
+);
+const backendStatusTitle = computed(() => (backendUnavailable.value ? "后端连接异常" : "系统状态正常"));
+const backendStatusDescription = computed(() =>
+  backendUnavailable.value ? backendMessage.value : "暂无集群数据"
+);
+const backendStatusTone = computed(() => (backendUnavailable.value ? "is-danger" : "is-healthy"));
+const pageEyebrow = computed(() => {
+  switch (route.name) {
+    case "live-rooms":
+      return "直播间监控";
+    case "record-tasks":
+      return "录制工作台";
+    case "recovery":
+      return "异常恢复";
+    case "daily-reviews":
+      return "回顾分析";
+    case "logs":
+      return "系统日志";
+    case "settings":
+      return "系统设置";
+    default:
+      return "控制台";
   }
-
-  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;
-});
-
-const shouldShowGlobalBackendAlert = computed(() => backendUnavailable.value && route.name !== "record-tasks");
-
 function isNavItemActive(index: string) {
   return route.path === index || route.path.startsWith(`${index}/`);
 }
 
+function navigate(index: string) {
+  void router.push(index);
+}
+
+function navigateToSettingsHash(hash: "#profile" | "#security" | "#preferences") {
+  mobileNavVisible.value = false;
+
+  if (route.name === "settings" && route.hash === hash) {
+    document.querySelector(hash)?.scrollIntoView({ behavior: "smooth", block: "start" });
+    return;
+  }
+
+  void router.push({ name: "settings", hash });
+}
+
+function handleUserCommand(command: string) {
+  if (command === "profile") {
+    navigateToSettingsHash("#profile");
+    return;
+  }
+
+  if (command === "security") {
+    navigateToSettingsHash("#security");
+    return;
+  }
+
+  if (command === "preferences") {
+    navigateToSettingsHash("#preferences");
+  }
+}
+
+function openHelpCenter() {
+  void router.push({ name: "settings" });
+}
+
+function openNotifications() {
+  void router.push({ name: "logs" });
+}
+
+async function handleLogout() {
+  mobileNavVisible.value = false;
+  await authStore.logout();
+  await router.push({ name: "login" });
+}
+
 watch(
   () => route.fullPath,
   () => {
     mobileNavVisible.value = false;
   }
 );
-
-async function handleLogout() {
-  mobileNavVisible.value = false;
-  await authStore.logout();
-  await router.push({ name: "login" });
-}
 </script>
 
 <template>
@@ -160,19 +152,20 @@ async function handleLogout() {
       v-if="!isMobile"
       class="app-sidebar"
       :class="{ 'app-sidebar--collapsed': sidebarCollapsed }"
-      :width="sidebarCollapsed ? '92px' : '276px'"
+      :width="sidebarCollapsed ? '96px' : '280px'"
     >
       <div class="app-brand">
-        <div class="app-brand__mark">LR</div>
+        <div class="app-brand__mark">录</div>
         <div v-if="!sidebarCollapsed" class="app-brand__copy">
           <div class="app-brand__title">Live Recorder</div>
-          <div class="app-brand__subtitle">冷静、稳定、可持续运维</div>
+          <div class="app-brand__subtitle">直播监控录制平台</div>
         </div>
       </div>
 
       <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>
+
           <div v-if="sidebarCollapsed" class="app-nav-icon-list">
             <el-tooltip
               v-for="item in group.items"
@@ -185,12 +178,13 @@ async function handleLogout() {
                 type="button"
                 class="app-nav-icon-item"
                 :class="{ 'is-active': isNavItemActive(item.index) }"
-                @click="router.push(item.index)"
+                @click="navigate(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>
@@ -200,66 +194,23 @@ 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 class="sidebar-status-card" :class="backendStatusTone">
+        <div class="sidebar-status-card__eyebrow">系统状态</div>
+        <div v-if="!sidebarCollapsed" class="sidebar-status-card__title">{{ backendStatusTitle }}</div>
+        <div v-if="!sidebarCollapsed" class="sidebar-status-card__description">{{ backendStatusDescription }}</div>
+        <div v-if="!sidebarCollapsed && backendLastChangedAt" class="sidebar-status-card__meta">
+          最近更新 {{ backendLastChangedAt }}
+        </div>
+        <div v-else class="sidebar-status-card__dot"></div>
       </div>
 
       <div class="app-sidebar__footer">
-        <div class="app-sidebar__status">
-          <span class="app-status-dot" :class="`app-status-dot--${resolvedTheme}`"></span>
-          <span v-if="!sidebarCollapsed">{{ resolvedTheme === "dark" ? "深色控制台" : "浅色控制台" }}</span>
+        <div v-if="!sidebarCollapsed" class="app-sidebar__footer-copy">
+          <div class="app-sidebar__footer-title">{{ userDisplayName }}</div>
+          <div class="app-sidebar__footer-subtitle">当前在线</div>
         </div>
-        <div v-if="!sidebarCollapsed" 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"
-        >
-          <span v-if="!sidebarCollapsed">退出登录</span>
+        <el-button class="app-sidebar__collapse" text @click="toggleSidebarCollapsed">
+          {{ sidebarCollapsed ? "展开导航" : "收起导航" }}
         </el-button>
       </div>
     </el-aside>
@@ -273,23 +224,17 @@ async function handleLogout() {
     >
       <div class="mobile-drawer">
         <div class="app-brand app-brand--drawer">
-          <div class="app-brand__mark">LR</div>
+          <div class="app-brand__mark">录</div>
           <div class="app-brand__copy">
             <div class="app-brand__title">Live Recorder</div>
-            <div class="app-brand__subtitle">专业直播录制控制台</div>
+            <div class="app-brand__subtitle">直播监控录制平台</div>
           </div>
         </div>
 
-        <div class="mobile-drawer__controls">
-          <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 class="mobile-drawer__status" :class="backendStatusTone">
+          <div class="sidebar-status-card__eyebrow">系统状态</div>
+          <div class="sidebar-status-card__title">{{ backendStatusTitle }}</div>
+          <div class="sidebar-status-card__description">{{ backendStatusDescription }}</div>
         </div>
 
         <div class="app-sidebar__scroll">
@@ -305,11 +250,15 @@ async function handleLogout() {
         </div>
 
         <div class="mobile-drawer__footer">
-          <div class="app-account">
-            <div class="app-account__label">当前账户</div>
-            <div class="app-account__name">{{ displayName }}</div>
+          <div class="mobile-user-card">
+            <div class="mobile-user-card__avatar">{{ userAvatarText }}</div>
+            <div>
+              <div class="mobile-user-card__name">{{ userDisplayName }}</div>
+              <div class="mobile-user-card__meta">{{ userName }}</div>
+            </div>
           </div>
-          <el-button class="mobile-drawer__logout" :icon="SwitchButton" @click="handleLogout">退出登录</el-button>
+          <el-button @click="navigateToSettingsHash('#profile')">个人中心</el-button>
+          <el-button type="danger" plain @click="handleLogout">退出登录</el-button>
         </div>
       </div>
     </el-drawer>
@@ -319,50 +268,84 @@ async function handleLogout() {
         <div class="app-topbar__main">
           <div class="app-topbar__lead">
             <el-button
-              v-if="isMobile"
               class="app-topbar__menu-button"
-              :icon="Operation"
-              @click="mobileNavVisible = true"
+              :icon="isMobile ? Operation : Fold"
+              @click="isMobile ? (mobileNavVisible = true) : toggleSidebarCollapsed()"
             />
-            <el-button
-              v-else
-              class="app-topbar__collapse-button"
-              :icon="sidebarCollapsed ? Expand : Fold"
-              @click="toggleSidebarCollapsed"
-            />
-            <div class="app-topbar__copy">
-              <div class="app-topbar__eyebrow">控制中心</div>
-              <div class="app-topbar__title">Live Recorder</div>
-              <div class="app-topbar__subtitle">专业直播录制运维控制台</div>
+
+            <div class="app-topbar__context desktop-only">
+              <div class="app-topbar__eyebrow">{{ pageEyebrow }}</div>
+              <div class="app-topbar__context-title">抖音直播间监控录制平台</div>
             </div>
+
+            <label class="app-search">
+              <el-icon class="app-search__icon"><Search /></el-icon>
+              <input
+                v-model="globalSearch"
+                class="app-search__input"
+                type="text"
+                placeholder="搜索直播间、主播昵称、Room ID、录制文件..."
+              />
+            </label>
           </div>
 
-          <div class="app-topbar__controls desktop-only">
-            <el-select v-model="themeMode" size="small" class="app-topbar__select">
-              <el-option label="跟随系统" value="system" />
-              <el-option label="浅色" value="light" />
-              <el-option label="深色" value="dark" />
-            </el-select>
-            <el-select v-model="density" size="small" class="app-topbar__select">
-              <el-option label="舒适密度" value="comfortable" />
-              <el-option label="紧凑密度" value="compact" />
-            </el-select>
-            <div class="app-topbar__account">
-              <span class="app-topbar__account-label">当前账户</span>
-              <strong>{{ displayName }}</strong>
-            </div>
-            <el-button :icon="SwitchButton" @click="handleLogout">退出</el-button>
-          </div>
+          <div class="app-topbar__actions">
+            <el-tooltip content="帮助与配置" placement="bottom">
+              <el-button class="app-topbar__action" circle @click="openHelpCenter">
+                <el-icon><QuestionFilled /></el-icon>
+              </el-button>
+            </el-tooltip>
 
-          <div class="app-topbar__controls mobile-only">
-            <el-button class="app-topbar__theme-button" :icon="currentThemeIcon" @click="cycleThemeMode" />
+            <el-tooltip content="系统日志" placement="bottom">
+              <el-badge :value="unreadNotificationCount ?? undefined" :hidden="!hasUnreadNotifications" is-dot>
+                <el-button class="app-topbar__action" circle @click="openNotifications">
+                  <el-icon><Bell /></el-icon>
+                </el-button>
+              </el-badge>
+            </el-tooltip>
+
+            <el-dropdown trigger="click" @command="handleUserCommand">
+              <button type="button" class="user-trigger">
+                <div class="user-trigger__avatar">{{ userAvatarText }}</div>
+                <div class="user-trigger__copy desktop-only">
+                  <div class="user-trigger__name">{{ userDisplayName }}</div>
+                  <div class="user-trigger__meta">在线</div>
+                </div>
+                <el-icon class="desktop-only"><ArrowDown /></el-icon>
+              </button>
+
+              <template #dropdown>
+                <el-dropdown-menu class="user-menu">
+                  <div class="user-menu__profile">
+                    <div class="user-menu__avatar">{{ userAvatarText }}</div>
+                    <div class="user-menu__copy">
+                      <div class="user-menu__name">{{ userDisplayName }}</div>
+                      <div class="user-menu__sub">{{ userName }}</div>
+                    </div>
+                  </div>
+
+                  <div class="user-menu__details">
+                    <div><span>邮箱</span><strong>--</strong></div>
+                    <div><span>角色</span><strong>--</strong></div>
+                    <div><span>空间</span><strong>--</strong></div>
+                    <div><span>ID</span><strong>{{ userId }}</strong></div>
+                    <div><span>到期</span><strong>{{ userExpiresAt }}</strong></div>
+                  </div>
+
+                  <el-dropdown-item command="profile">个人资料</el-dropdown-item>
+                  <el-dropdown-item command="security">账号安全</el-dropdown-item>
+                  <el-dropdown-item command="preferences">偏好设置</el-dropdown-item>
+                  <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </div>
         </div>
       </el-header>
 
       <el-main class="app-main">
         <el-alert
-          v-if="shouldShowGlobalBackendAlert"
+          v-if="backendUnavailable && route.name !== 'record-tasks'"
           class="backend-alert"
           type="error"
           :closable="false"
@@ -385,22 +368,12 @@ async function handleLogout() {
 .app-sidebar {
   display: flex;
   flex-direction: column;
-  gap: 18px;
-  overflow-y: auto;
-  padding: 20px 16px;
+  gap: 20px;
+  padding: 24px 16px 18px;
   border-right: 1px solid var(--border-subtle);
-  background: var(--sidebar-shell-bg);
-  backdrop-filter: blur(18px);
-}
-
-:global(html[data-theme="dark"]) .app-nav-menu :deep(.el-menu-item.is-active) {
-  background: linear-gradient(180deg, rgba(91, 168, 255, 0.18), rgba(91, 168, 255, 0.1));
-  box-shadow: inset 0 0 0 1px rgba(91, 168, 255, 0.2);
-}
-
-:global(html[data-theme="dark"]) .app-nav-icon-item.is-active {
-  background: linear-gradient(180deg, rgba(91, 168, 255, 0.18), rgba(91, 168, 255, 0.1));
-  box-shadow: inset 0 0 0 1px rgba(91, 168, 255, 0.2);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.94)),
+    var(--surface);
 }
 
 .app-sidebar--collapsed {
@@ -412,34 +385,27 @@ async function handleLogout() {
   align-items: center;
   gap: 14px;
   min-height: 56px;
-}
-
-.app-brand--drawer {
-  margin-bottom: 10px;
+  padding-inline: 4px;
 }
 
 .app-brand__mark {
   display: grid;
   place-items: center;
-  width: 42px;
-  height: 42px;
-  border-radius: 12px;
-  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
-  color: #f5fbff;
-  font-size: 16px;
+  width: 44px;
+  height: 44px;
+  flex-shrink: 0;
+  border-radius: 14px;
+  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
+  color: #ffffff;
+  font-size: 18px;
   font-weight: 800;
-  letter-spacing: 0.04em;
-  box-shadow: 0 10px 24px rgba(47, 111, 180, 0.22);
-}
-
-.app-brand__copy {
-  min-width: 0;
+  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
 }
 
 .app-brand__title {
   color: var(--text-primary);
-  font-size: 16px;
-  font-weight: 750;
+  font-size: 17px;
+  font-weight: 760;
   letter-spacing: -0.03em;
 }
 
@@ -447,14 +413,16 @@ async function handleLogout() {
   margin-top: 4px;
   color: var(--text-muted);
   font-size: 12px;
-  line-height: 1.4;
 }
 
 .app-sidebar__scroll {
   display: flex;
-  flex-direction: column;
-  gap: 14px;
   min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 18px;
+  overflow: auto;
+  padding-right: 4px;
 }
 
 .app-nav-group {
@@ -463,11 +431,11 @@ async function handleLogout() {
 }
 
 .app-nav-group__title {
-  padding-inline: 10px;
+  padding-inline: 12px;
   color: var(--text-muted);
   font-size: 11px;
   font-weight: 700;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
 }
 
@@ -477,21 +445,22 @@ async function handleLogout() {
 }
 
 .app-nav-menu :deep(.el-menu-item) {
-  height: 44px;
-  margin-bottom: 4px;
-  border-radius: 8px;
+  height: 46px;
+  margin-bottom: 6px;
+  border-radius: 12px;
   color: var(--text-secondary);
+  font-weight: 600;
 }
 
 .app-nav-menu :deep(.el-menu-item:hover) {
-  background: var(--accent-soft);
+  background: rgba(37, 99, 235, 0.08);
   color: var(--text-primary);
 }
 
 .app-nav-menu :deep(.el-menu-item.is-active) {
-  background: linear-gradient(180deg, rgba(47, 111, 180, 0.16), rgba(47, 111, 180, 0.08));
+  background: rgba(37, 99, 235, 0.1);
   color: var(--accent);
-  box-shadow: inset 0 0 0 1px rgba(47, 111, 180, 0.18);
+  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
 }
 
 .app-nav-icon-list {
@@ -502,150 +471,118 @@ async function handleLogout() {
 .app-nav-icon-item {
   display: grid;
   place-items: center;
-  width: 100%;
-  min-height: 44px;
+  min-height: 46px;
   border: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   background: transparent;
   color: var(--text-secondary);
   cursor: pointer;
-  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
+  transition:
+    background-color 0.18s ease,
+    color 0.18s ease,
+    box-shadow 0.18s ease;
 }
 
 .app-nav-icon-item:hover {
-  background: var(--accent-soft);
+  background: rgba(37, 99, 235, 0.08);
   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));
+  background: rgba(37, 99, 235, 0.1);
   color: var(--accent);
-  box-shadow: inset 0 0 0 1px rgba(47, 111, 180, 0.18);
+  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
 }
 
-.app-sidebar__panel {
+.sidebar-status-card {
   display: grid;
-  gap: 12px;
-  margin-top: 6px;
-  padding: 14px;
-  border-radius: 10px;
+  gap: 8px;
+  margin-top: auto;
+  padding: 16px;
+  border-radius: 16px;
   border: 1px solid var(--border-subtle);
-  background: var(--surface);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
+    var(--surface);
+  box-shadow: var(--shadow-soft);
 }
 
-.app-sidebar__workspace-eyebrow {
-  margin-bottom: 6px;
-  color: var(--accent);
+.sidebar-status-card__eyebrow {
+  color: var(--text-muted);
   font-size: 11px;
   font-weight: 700;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
 }
 
-.app-sidebar__workspace-title {
+.sidebar-status-card__title {
   color: var(--text-primary);
-  font-size: 18px;
-  font-weight: 760;
-  letter-spacing: -0.04em;
-  line-height: 1.1;
+  font-size: 15px;
+  font-weight: 700;
 }
 
-.app-sidebar__workspace-subtitle {
-  margin-top: 8px;
+.sidebar-status-card__description {
   color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.sidebar-status-card__meta {
+  color: var(--text-muted);
   font-size: 12px;
-  line-height: 1.6;
 }
 
-.app-sidebar__selectors {
-  display: grid;
-  gap: 10px;
+.sidebar-status-card__dot {
+  width: 10px;
+  height: 10px;
+  margin-inline: auto;
+  border-radius: 999px;
 }
 
-.app-sidebar__panel-row {
+.sidebar-status-card.is-healthy {
+  border-color: rgba(22, 163, 74, 0.16);
+  background:
+    linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(248, 250, 252, 0.98)),
+    var(--surface);
+}
+
+.sidebar-status-card.is-healthy .sidebar-status-card__dot {
+  background: #16a34a;
+}
+
+.sidebar-status-card.is-danger {
+  border-color: rgba(220, 38, 38, 0.16);
+  background:
+    linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(248, 250, 252, 0.98)),
+    var(--surface);
+}
+
+.sidebar-status-card.is-danger .sidebar-status-card__dot {
+  background: #dc2626;
+}
+
+.app-sidebar__footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+  padding: 6px 4px 0;
 }
 
-.app-sidebar__footer {
-  display: grid;
-  gap: 12px;
-  margin-top: auto;
-  padding: 14px;
-  border-radius: 10px;
-  border: 1px solid var(--border-subtle);
-  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;
-  gap: 8px;
-  color: var(--text-secondary);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.app-status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-}
-
-.app-status-dot--light {
-  background: var(--accent);
-}
-
-.app-status-dot--dark {
-  background: #9ad0ff;
-}
-
-.app-account__label {
-  color: var(--text-muted);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.app-account__name {
-  margin-top: 6px;
+.app-sidebar__footer-title {
   color: var(--text-primary);
   font-size: 14px;
   font-weight: 700;
-  word-break: break-word;
 }
 
-.app-sidebar__logout {
-  justify-content: flex-start;
+.app-sidebar__footer-subtitle {
+  margin-top: 4px;
+  color: var(--text-muted);
+  font-size: 12px;
 }
 
-.app-sidebar__utility {
-  justify-content: flex-end;
-}
-
-.app-sidebar--collapsed .app-sidebar__logout {
-  justify-content: center;
-}
-
-.app-sidebar__icon-button {
-  justify-content: center;
+.app-sidebar__collapse {
+  color: var(--text-secondary);
 }
 
 .app-shell__main {
@@ -653,38 +590,45 @@ async function handleLogout() {
 }
 
 .app-topbar {
-  display: none;
-  height: auto;
-  padding: 18px var(--content-padding) 0;
+  height: 64px;
+  padding: 16px 24px 0;
 }
 
 .app-topbar__main {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  min-height: var(--header-row-height);
-  padding: 18px 20px;
-  border-radius: 10px;
+  gap: 18px;
+  width: min(100%, var(--page-max-width));
+  height: 64px;
+  margin: 0 auto;
+  padding: 0 16px 0 14px;
+  border-radius: 18px;
   border: 1px solid var(--border-subtle);
-  background: var(--topbar-shell-bg);
-  backdrop-filter: blur(16px);
+  background: rgba(255, 255, 255, 0.9);
   box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(18px);
 }
 
 .app-topbar__lead {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 14px;
   min-width: 0;
+  flex: 1;
 }
 
-.app-topbar__copy {
-  min-width: 0;
+.app-topbar__menu-button {
+  width: 38px;
+  min-width: 38px;
+  padding: 0;
+}
+
+.app-topbar__context {
+  min-width: 112px;
 }
 
 .app-topbar__eyebrow {
-  margin-bottom: 8px;
   color: var(--accent);
   font-size: 11px;
   font-weight: 700;
@@ -692,67 +636,141 @@ async function handleLogout() {
   text-transform: uppercase;
 }
 
-.app-topbar__title {
+.app-topbar__context-title {
+  margin-top: 4px;
   color: var(--text-primary);
-  font-size: clamp(20px, 2vw, 28px);
-  font-weight: 760;
-  letter-spacing: -0.04em;
-  line-height: 1.05;
+  font-size: 14px;
+  font-weight: 700;
 }
 
-.app-topbar__subtitle {
-  margin-top: 8px;
-  max-width: 68ch;
-  color: var(--text-secondary);
-  font-size: 13px;
-  line-height: 1.65;
+.app-search {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+  height: 42px;
+  padding: 0 14px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 14px;
+  background: #f8fafc;
 }
 
-.app-topbar__controls {
+.app-search__icon {
+  color: var(--text-muted);
+  font-size: 16px;
+}
+
+.app-search__input {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: var(--text-primary);
+  outline: none;
+}
+
+.app-search__input::placeholder {
+  color: var(--text-muted);
+}
+
+.app-topbar__actions {
   display: flex;
   align-items: center;
   gap: 10px;
-  flex-wrap: wrap;
-  justify-content: flex-end;
 }
 
-.app-topbar__select {
-  width: 122px;
+.app-topbar__action {
+  color: var(--text-secondary);
 }
 
-.app-topbar__account {
+.user-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 42px;
+  padding: 4px 10px 4px 4px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: #ffffff;
+  color: inherit;
+  cursor: pointer;
+}
+
+.user-trigger__avatar,
+.user-menu__avatar,
+.mobile-user-card__avatar {
   display: grid;
-  gap: 3px;
-  min-width: 96px;
-  text-align: right;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #2563eb 0%, #4338ca 100%);
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.user-trigger__copy {
+  text-align: left;
+}
+
+.user-trigger__name,
+.user-menu__name,
+.mobile-user-card__name {
   color: var(--text-primary);
-  font-size: 13px;
-}
-
-.app-topbar__account-label {
-  color: var(--text-muted);
-  font-size: 11px;
+  font-size: 14px;
   font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
 }
 
-.app-topbar__collapse-button,
-.app-topbar__menu-button,
-.app-topbar__theme-button {
-  width: 40px;
-  min-width: 40px;
-  padding: 0;
+.user-trigger__meta,
+.user-menu__sub,
+.mobile-user-card__meta {
+  margin-top: 2px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+:deep(.user-menu) {
+  min-width: 280px;
+  padding: 8px;
+}
+
+.user-menu__profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 10px 14px;
+}
+
+.user-menu__details {
+  display: grid;
+  gap: 8px;
+  padding: 0 10px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.user-menu__details div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.user-menu__details span {
+  color: var(--text-muted);
 }
 
 .app-main {
-  padding: var(--content-padding);
-  min-height: 0;
+  padding: 24px;
   overflow-x: hidden;
 }
 
 .backend-alert {
-  margin-bottom: 18px;
+  width: min(100%, var(--page-max-width));
+  margin: 0 auto 18px;
 }
 
 .mobile-drawer {
@@ -760,23 +778,30 @@ async function handleLogout() {
   min-height: 100%;
   flex-direction: column;
   gap: 18px;
-  padding: 20px;
-  background: var(--bg-subtle);
+  padding: 22px 20px;
+  background: var(--bg-base);
 }
 
-.mobile-drawer__controls {
-  display: grid;
-  gap: 10px;
+.mobile-drawer__status {
+  padding: 16px;
+  border-radius: 16px;
+  border: 1px solid var(--border-subtle);
 }
 
 .mobile-drawer__footer {
   display: grid;
-  gap: 14px;
+  gap: 12px;
   margin-top: auto;
 }
 
-.mobile-drawer__logout {
-  width: 100%;
+.mobile-user-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 16px;
+  border: 1px solid var(--border-subtle);
+  background: #ffffff;
 }
 
 :deep(.app-mobile-drawer .el-drawer__body) {
@@ -785,30 +810,35 @@ async function handleLogout() {
 
 @media (max-width: 1023px) {
   .app-topbar {
-    display: block;
+    padding: 14px 16px 0;
   }
 
-  .app-topbar {
-    padding: 14px var(--content-padding-mobile) 0;
+  .app-topbar__main {
+    width: 100%;
+  }
+
+  .app-topbar__lead {
+    gap: 10px;
   }
 
   .app-main {
-    padding: var(--content-padding-mobile);
+    padding: 16px;
   }
 }
 
 @media (max-width: 767px) {
   .app-topbar__main {
-    padding: 14px 14px 16px;
+    gap: 12px;
+    padding-right: 10px;
+    padding-left: 10px;
   }
 
-  .app-topbar__title {
-    font-size: clamp(18px, 6vw, 24px);
+  .app-search {
+    min-width: 0;
   }
 
-  .app-topbar__subtitle {
-    margin-top: 6px;
-    font-size: 12px;
+  .user-trigger {
+    padding-right: 4px;
   }
 }
 </style>
diff --git a/frontend/src/components/ui/EmptyState.vue b/frontend/src/components/ui/EmptyState.vue
new file mode 100644
index 0000000..4d9db0b
--- /dev/null
+++ b/frontend/src/components/ui/EmptyState.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { Box } from "@element-plus/icons-vue";
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    description?: string;
+    actionText?: string;
+  }>(),
+  {
+    title: "暂无数据",
+    description: "当前筛选条件下没有可展示内容",
+    actionText: ""
+  }
+);
+
+defineEmits<{
+  (event: "action"): void;
+}>();
+</script>
+
+<template>
+  <div class="empty-state">
+    <div class="empty-state__icon">
+      <el-icon><Box /></el-icon>
+    </div>
+    <div class="empty-state__title">{{ title }}</div>
+    <div class="empty-state__description">{{ description }}</div>
+    <el-button v-if="actionText" type="primary" plain @click="$emit('action')">
+      {{ actionText }}
+    </el-button>
+  </div>
+</template>
+
+<style scoped>
+.empty-state {
+  display: grid;
+  justify-items: center;
+  gap: 14px;
+  padding: 42px 20px;
+  text-align: center;
+}
+
+.empty-state__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 18px;
+  background: rgba(37, 99, 235, 0.08);
+  color: var(--accent);
+  font-size: 28px;
+}
+
+.empty-state__title {
+  color: var(--text-primary);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.empty-state__description {
+  max-width: 36ch;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.7;
+}
+</style>
diff --git a/frontend/src/components/ui/MetricCard.vue b/frontend/src/components/ui/MetricCard.vue
new file mode 100644
index 0000000..34fde5d
--- /dev/null
+++ b/frontend/src/components/ui/MetricCard.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { Component } from "vue";
+
+withDefaults(
+  defineProps<{
+    label: string;
+    value: string | number;
+    description?: string;
+    icon?: Component | null;
+  }>(),
+  {
+    description: "",
+    icon: null
+  }
+);
+</script>
+
+<template>
+  <article class="metric-card">
+    <div class="metric-card__header">
+      <span class="metric-card__label">{{ label }}</span>
+      <span v-if="icon" class="metric-card__icon">
+        <el-icon><component :is="icon" /></el-icon>
+      </span>
+    </div>
+    <div class="metric-card__value">{{ value }}</div>
+    <div v-if="description" class="metric-card__description">{{ description }}</div>
+  </article>
+</template>
+
+<style scoped>
+.metric-card {
+  display: grid;
+  gap: 12px;
+  min-height: 164px;
+  padding: 20px;
+  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);
+}
+
+.metric-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.metric-card__label {
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.metric-card__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: rgba(37, 99, 235, 0.1);
+  color: var(--accent);
+  font-size: 18px;
+}
+
+.metric-card__value {
+  color: var(--text-primary);
+  font-size: clamp(28px, 2vw, 40px);
+  font-weight: 760;
+  letter-spacing: -0.06em;
+  line-height: 1;
+}
+
+.metric-card__description {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.7;
+}
+</style>
diff --git a/frontend/src/components/ui/RightDrawer.vue b/frontend/src/components/ui/RightDrawer.vue
new file mode 100644
index 0000000..19ab210
--- /dev/null
+++ b/frontend/src/components/ui/RightDrawer.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Close } from "@element-plus/icons-vue";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    title: string;
+    subtitle?: string;
+    size?: string | number;
+  }>(),
+  {
+    subtitle: "",
+    size: "520px"
+  }
+);
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: boolean): void;
+}>();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit("update:modelValue", value)
+});
+</script>
+
+<template>
+  <el-drawer v-model="visible" class="right-drawer" direction="rtl" :size="size" :with-header="false">
+    <div class="right-drawer__shell">
+      <header class="right-drawer__header">
+        <div class="right-drawer__copy">
+          <div class="right-drawer__eyebrow">详情面板</div>
+          <h3 class="right-drawer__title">{{ title }}</h3>
+          <p v-if="subtitle" class="right-drawer__subtitle">{{ subtitle }}</p>
+        </div>
+        <el-button class="right-drawer__close" text circle @click="visible = false">
+          <el-icon><Close /></el-icon>
+        </el-button>
+      </header>
+
+      <div class="right-drawer__body">
+        <slot />
+      </div>
+
+      <footer v-if="$slots.footer" class="right-drawer__footer">
+        <slot name="footer" />
+      </footer>
+    </div>
+  </el-drawer>
+</template>
+
+<style scoped>
+:deep(.right-drawer .el-drawer__body) {
+  padding: 0;
+}
+
+.right-drawer__shell {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
+}
+
+.right-drawer__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 24px 24px 18px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.right-drawer__eyebrow {
+  margin-bottom: 8px;
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.right-drawer__title {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 22px;
+  font-weight: 760;
+  letter-spacing: -0.04em;
+}
+
+.right-drawer__subtitle {
+  margin: 8px 0 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.right-drawer__close {
+  color: var(--text-muted);
+}
+
+.right-drawer__body {
+  flex: 1;
+  padding: 20px 24px 24px;
+  overflow: auto;
+}
+
+.right-drawer__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 24px 24px;
+  border-top: 1px solid var(--border-subtle);
+}
+</style>
diff --git a/frontend/src/components/ui/StatusBadge.vue b/frontend/src/components/ui/StatusBadge.vue
new file mode 100644
index 0000000..014dfae
--- /dev/null
+++ b/frontend/src/components/ui/StatusBadge.vue
@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type BadgeContext =
+  | "generic"
+  | "availability"
+  | "recording"
+  | "task"
+  | "session"
+  | "cleanup"
+  | "upload"
+  | "boolean";
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    status?: string | number | boolean | null;
+    context?: BadgeContext;
+    size?: "sm" | "md";
+  }>(),
+  {
+    label: "",
+    status: null,
+    context: "generic",
+    size: "md"
+  }
+);
+
+type Tone = "gray" | "green" | "blue" | "yellow" | "red" | "orange" | "indigo";
+
+function normalizeValue(value: string | number | boolean | null) {
+  if (typeof value === "string") {
+    return value.trim().toLowerCase();
+  }
+
+  return value;
+}
+
+function resolveToneByNumber(value: number, context: BadgeContext): Tone {
+  if (context === "availability") {
+    if (value === 2) {
+      return "green";
+    }
+
+    return "gray";
+  }
+
+  if (context === "recording") {
+    if (value === 2) {
+      return "blue";
+    }
+
+    if (value === 1) {
+      return "green";
+    }
+
+    return "gray";
+  }
+
+  if (context === "task" || context === "session") {
+    if (value === 2) {
+      return "blue";
+    }
+
+    if (value === 1 || value === 7) {
+      return "indigo";
+    }
+
+    if (value === 0) {
+      return "yellow";
+    }
+
+    if (value === 3) {
+      return "orange";
+    }
+
+    if (value === 4) {
+      return "green";
+    }
+
+    if (value === 5) {
+      return "red";
+    }
+
+    return "gray";
+  }
+
+  if (context === "upload") {
+    if (value === 1) {
+      return "green";
+    }
+
+    if (value === 2) {
+      return "red";
+    }
+
+    return "gray";
+  }
+
+  if (context === "boolean") {
+    return value ? "green" : "gray";
+  }
+
+  return "gray";
+}
+
+function resolveToneByKeyword(value: string): Tone {
+  if (
+    value.includes("live") ||
+    value.includes("online") ||
+    value.includes("living") ||
+    value.includes("开播") ||
+    value.includes("直播中") ||
+    value === "started" ||
+    value === "completed" ||
+    value.includes("归档") ||
+    value.includes("healthy")
+  ) {
+    return "green";
+  }
+
+  if (value.includes("recording") || value.includes("录制中") || value.includes("uploading")) {
+    return "blue";
+  }
+
+  if (
+    value.includes("pending") ||
+    value.includes("queued") ||
+    value.includes("待") ||
+    value.includes("waiting") ||
+    value.includes("storage")
+  ) {
+    return "yellow";
+  }
+
+  if (value.includes("retry") || value.includes("stopping") || value.includes("停止中")) {
+    return "orange";
+  }
+
+  if (value.includes("process") || value.includes("transcod")) {
+    return "indigo";
+  }
+
+  if (
+    value.includes("error") ||
+    value.includes("fail") ||
+    value.includes("异常") ||
+    value.includes("错误") ||
+    value.includes("离线") ||
+    value === "poll_failed"
+  ) {
+    return "red";
+  }
+
+  return "gray";
+}
+
+const tone = computed<Tone>(() => {
+  const normalized = normalizeValue(props.status);
+
+  if (typeof normalized === "number") {
+    return resolveToneByNumber(normalized, props.context);
+  }
+
+  if (typeof normalized === "boolean") {
+    return normalized ? "green" : "gray";
+  }
+
+  if (typeof normalized === "string" && normalized.length > 0) {
+    return resolveToneByKeyword(normalized);
+  }
+
+  return "gray";
+});
+
+const displayLabel = computed(() => {
+  if (props.label) {
+    return props.label;
+  }
+
+  if (props.status === null || props.status === undefined || props.status === "") {
+    return "--";
+  }
+
+  return String(props.status);
+});
+</script>
+
+<template>
+  <span class="status-badge" :class="[`status-badge--${tone}`, `status-badge--${size}`]">
+    <span class="status-badge__dot"></span>
+    <span>{{ displayLabel }}</span>
+  </span>
+</template>
+
+<style scoped>
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.status-badge--sm {
+  min-height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.status-badge--md {
+  min-height: 30px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.status-badge__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  flex-shrink: 0;
+  background: currentColor;
+}
+
+.status-badge--gray {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+  color: #64748b;
+}
+
+.status-badge--green {
+  background: rgba(34, 197, 94, 0.12);
+  border-color: rgba(34, 197, 94, 0.18);
+  color: #15803d;
+}
+
+.status-badge--blue {
+  background: rgba(37, 99, 235, 0.1);
+  border-color: rgba(37, 99, 235, 0.16);
+  color: #2563eb;
+}
+
+.status-badge--yellow {
+  background: rgba(245, 158, 11, 0.12);
+  border-color: rgba(245, 158, 11, 0.18);
+  color: #b45309;
+}
+
+.status-badge--red {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.16);
+  color: #dc2626;
+}
+
+.status-badge--orange {
+  background: rgba(249, 115, 22, 0.12);
+  border-color: rgba(249, 115, 22, 0.18);
+  color: #c2410c;
+}
+
+.status-badge--indigo {
+  background: rgba(99, 102, 241, 0.12);
+  border-color: rgba(99, 102, 241, 0.18);
+  color: #4f46e5;
+}
+
+:global(html[data-theme="dark"]) .status-badge--gray {
+  background: rgba(148, 163, 184, 0.12);
+  border-color: rgba(148, 163, 184, 0.2);
+  color: #cbd5e1;
+}
+
+:global(html[data-theme="dark"]) .status-badge--green {
+  color: #86efac;
+}
+
+:global(html[data-theme="dark"]) .status-badge--blue {
+  color: #93c5fd;
+}
+
+:global(html[data-theme="dark"]) .status-badge--yellow {
+  color: #fcd34d;
+}
+
+:global(html[data-theme="dark"]) .status-badge--red {
+  color: #fca5a5;
+}
+
+:global(html[data-theme="dark"]) .status-badge--orange {
+  color: #fdba74;
+}
+
+:global(html[data-theme="dark"]) .status-badge--indigo {
+  color: #a5b4fc;
+}
+</style>
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index 39229d3..e81e63b 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -1,54 +1,55 @@
 :root {
   color-scheme: light;
-  font-family: "Inter", "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-family: "Segoe UI Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
 
-  --bg-base: #f3f7fb;
-  --bg-subtle: #eef3f8;
-  --bg-emphasis: #e6eef7;
+  --bg-base: #f6f8fb;
+  --bg-subtle: #f1f5f9;
+  --bg-emphasis: #e8eef7;
   --surface: #ffffff;
-  --surface-raised: #fbfdff;
-  --surface-muted: #f4f8fc;
-  --surface-strong: #edf4fb;
-  --border-subtle: #d7e1eb;
-  --border-base: #c7d3e1;
-  --border-strong: #a7b7cb;
-  --text-primary: #0d1726;
-  --text-secondary: #425167;
-  --text-muted: #6b7c91;
-  --text-soft: #8f9cb0;
-  --text-inverse: #eff5fb;
-  --accent: #2f6fb4;
-  --accent-strong: #245a92;
-  --accent-soft: rgba(47, 111, 180, 0.12);
-  --info: #2f6fb4;
-  --success: #1f8a63;
-  --warning: #ba7b1f;
-  --danger: #c75151;
-  --focus-ring: rgba(47, 111, 180, 0.2);
-  --shadow-soft: 0 10px 30px rgba(15, 23, 38, 0.06);
-  --shadow-card: 0 18px 42px rgba(15, 23, 38, 0.08);
-  --shadow-float: 0 24px 60px rgba(15, 23, 38, 0.12);
+  --surface-raised: #ffffff;
+  --surface-muted: #f8fafc;
+  --surface-strong: #eff6ff;
+  --border-subtle: #e2e8f0;
+  --border-base: #cbd5e1;
+  --border-strong: #94a3b8;
+  --text-primary: #0f172a;
+  --text-secondary: #334155;
+  --text-muted: #64748b;
+  --text-soft: #94a3b8;
+  --text-inverse: #eff6ff;
+  --accent: #2563eb;
+  --accent-strong: #1d4ed8;
+  --accent-soft: rgba(37, 99, 235, 0.1);
+  --info: #2563eb;
+  --success: #16a34a;
+  --warning: #d97706;
+  --danger: #dc2626;
+  --focus-ring: rgba(37, 99, 235, 0.18);
+  --shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.06);
+  --shadow-card: 0 18px 44px rgba(15, 23, 42, 0.08);
+  --shadow-float: 0 24px 60px rgba(15, 23, 42, 0.14);
   --sidebar-shell-bg:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18)),
-    var(--bg-emphasis);
-  --topbar-shell-bg: rgba(255, 255, 255, 0.56);
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 10px;
+    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.92)),
+    var(--surface);
+  --topbar-shell-bg: rgba(255, 255, 255, 0.9);
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 18px;
   --page-gap: 24px;
-  --content-padding: 28px;
+  --page-max-width: 1280px;
+  --content-padding: 24px;
   --content-padding-mobile: 16px;
   --control-height: 40px;
   --control-height-sm: 34px;
   --table-row-padding: 16px;
-  --header-row-height: 68px;
+  --header-row-height: 64px;
 
   --el-color-primary: var(--accent);
-  --el-color-primary-light-3: #5d90ca;
-  --el-color-primary-light-5: #84adde;
-  --el-color-primary-light-7: #bad2ec;
-  --el-color-primary-light-8: #d4e4f3;
-  --el-color-primary-light-9: #ebf3fa;
+  --el-color-primary-light-3: #5b8cf0;
+  --el-color-primary-light-5: #7ba4f5;
+  --el-color-primary-light-7: #a8c3fa;
+  --el-color-primary-light-8: #c7dbfd;
+  --el-color-primary-light-9: #e8f0ff;
   --el-color-primary-dark-2: var(--accent-strong);
   --el-color-success: var(--success);
   --el-color-warning: var(--warning);
@@ -58,17 +59,17 @@
   --el-text-color-secondary: var(--text-muted);
   --el-border-color: var(--border-base);
   --el-border-color-light: var(--border-subtle);
-  --el-border-radius-base: var(--radius-md);
+  --el-border-radius-base: var(--radius-sm);
   --el-bg-color: transparent;
   --el-fill-color-blank: var(--surface);
   --el-fill-color-light: var(--surface-muted);
   --el-fill-color-lighter: var(--surface-strong);
-  --el-mask-color: rgba(7, 13, 22, 0.58);
+  --el-mask-color: rgba(15, 23, 42, 0.54);
 }
 
 html[data-density="compact"] {
   --page-gap: 20px;
-  --content-padding: 22px;
+  --content-padding: 20px;
   --content-padding-mobile: 14px;
   --control-height: 36px;
   --control-height-sm: 30px;
@@ -79,43 +80,43 @@ html[data-density="compact"] {
 html[data-theme="dark"] {
   color-scheme: dark;
 
-  --bg-base: #07111b;
-  --bg-subtle: #0d1825;
-  --bg-emphasis: #102131;
-  --surface: #0f1b29;
-  --surface-raised: #132233;
-  --surface-muted: #17283a;
-  --surface-strong: #1b2f45;
-  --border-subtle: #22364d;
-  --border-base: #314862;
-  --border-strong: #4a6686;
+  --bg-base: #08111d;
+  --bg-subtle: #0f172a;
+  --bg-emphasis: #132033;
+  --surface: #0f1b2d;
+  --surface-raised: #132236;
+  --surface-muted: #17293f;
+  --surface-strong: #1d3653;
+  --border-subtle: #22334d;
+  --border-base: #334a68;
+  --border-strong: #4b6486;
   --text-primary: #eaf2fb;
-  --text-secondary: #bdd0e3;
-  --text-muted: #8ca0b6;
-  --text-soft: #6f8399;
+  --text-secondary: #bfd0e6;
+  --text-muted: #8ea3bc;
+  --text-soft: #6f849d;
   --text-inverse: #08111a;
-  --accent: #5ba8ff;
-  --accent-strong: #3f8de0;
-  --accent-soft: rgba(91, 168, 255, 0.16);
-  --info: #5ba8ff;
+  --accent: #60a5fa;
+  --accent-strong: #3b82f6;
+  --accent-soft: rgba(96, 165, 250, 0.18);
+  --info: #60a5fa;
   --success: #31c48d;
-  --warning: #f0a23c;
-  --danger: #ef6666;
-  --focus-ring: rgba(91, 168, 255, 0.24);
+  --warning: #f59e0b;
+  --danger: #f87171;
+  --focus-ring: rgba(96, 165, 250, 0.24);
   --shadow-soft: 0 12px 30px rgba(2, 6, 12, 0.32);
   --shadow-card: 0 18px 40px rgba(2, 6, 12, 0.4);
   --shadow-float: 0 24px 60px rgba(2, 6, 12, 0.52);
   --sidebar-shell-bg:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
     var(--bg-subtle);
-  --topbar-shell-bg: rgba(15, 27, 41, 0.78);
+  --topbar-shell-bg: rgba(15, 23, 42, 0.84);
 
   --el-color-primary: var(--accent);
-  --el-color-primary-light-3: #7db9ff;
-  --el-color-primary-light-5: #9ac8ff;
-  --el-color-primary-light-7: #bfdcff;
-  --el-color-primary-light-8: #d8e9ff;
-  --el-color-primary-light-9: #eef6ff;
+  --el-color-primary-light-3: #93c5fd;
+  --el-color-primary-light-5: #bfdbfe;
+  --el-color-primary-light-7: #dbeafe;
+  --el-color-primary-light-8: #e5f0ff;
+  --el-color-primary-light-9: #eff6ff;
   --el-color-primary-dark-2: var(--accent-strong);
   --el-text-color-primary: var(--text-primary);
   --el-text-color-regular: var(--text-secondary);
@@ -147,14 +148,36 @@ body,
 body {
   color: var(--text-primary);
   background:
-    radial-gradient(circle at top left, rgba(91, 168, 255, 0.06), transparent 24%),
-    radial-gradient(circle at top right, rgba(79, 201, 168, 0.05), transparent 22%),
+    radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 24%),
+    radial-gradient(circle at top right, rgba(14, 165, 233, 0.06), transparent 22%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent 18%),
     linear-gradient(180deg, var(--bg-base) 0%, var(--bg-subtle) 100%);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
 }
 
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.52);
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 body,
 button,
 input,
@@ -178,13 +201,16 @@ select:focus-visible {
 .page-stack {
   display: grid;
   gap: var(--page-gap);
+  width: min(100%, var(--page-max-width));
+  margin: 0 auto;
 }
 
 .page-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 20px;
+  gap: 24px;
+  padding: 4px 0;
 }
 
 .page-header > div:first-child {
@@ -194,16 +220,16 @@ select:focus-visible {
 
 .page-title {
   margin: 0;
-  font-size: clamp(28px, 2vw, 40px);
-  font-weight: 750;
+  font-size: clamp(30px, 2vw, 42px);
+  font-weight: 780;
   letter-spacing: -0.045em;
-  line-height: 1.02;
+  line-height: 1;
   color: var(--text-primary);
 }
 
 .page-subtitle {
   max-width: 76ch;
-  margin: 12px 0 0;
+  margin: 14px 0 0;
   color: var(--text-secondary);
   font-size: 14px;
   line-height: 1.75;
@@ -231,7 +257,9 @@ select:focus-visible {
   overflow: hidden;
   border-radius: var(--radius-md);
   border: 1px solid var(--border-subtle);
-  background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
+    var(--surface);
   box-shadow: var(--shadow-soft);
   transition:
     transform 0.2s ease,
@@ -252,20 +280,20 @@ select:focus-visible {
 
 .stats-grid {
   display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 16px;
 }
 
 .stat-card {
-  grid-column: span 3;
   display: grid;
-  gap: 10px;
-  padding: 18px;
+  gap: 12px;
+  min-height: 154px;
+  padding: 20px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border-subtle);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42)),
-    var(--surface-muted);
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
+    var(--surface);
   box-shadow: var(--shadow-soft);
 }
 
@@ -285,7 +313,7 @@ html[data-theme="dark"] .stat-card {
 
 .stat-card__value {
   color: var(--text-primary);
-  font-size: clamp(26px, 2vw, 36px);
+  font-size: clamp(30px, 2vw, 40px);
   font-weight: 760;
   letter-spacing: -0.05em;
   line-height: 1;
@@ -768,7 +796,7 @@ html[data-theme="dark"] .stat-card {
 }
 
 .el-dialog {
-  border-radius: 12px;
+  border-radius: 18px;
   border: 1px solid var(--border-base);
   background: linear-gradient(180deg, var(--surface-raised), var(--surface));
   box-shadow: var(--shadow-float);
@@ -800,9 +828,20 @@ html[data-theme="dark"] .stat-card {
   color: var(--text-secondary);
 }
 
+.el-badge__content.is-fixed.is-dot {
+  top: 10px;
+  right: 10px;
+}
+
+.el-dropdown-menu {
+  border-radius: 16px;
+  border: 1px solid var(--border-subtle);
+  box-shadow: var(--shadow-card);
+}
+
 @media (max-width: 1280px) {
-  .stat-card {
-    grid-column: span 6;
+  .stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .highlight-grid {
diff --git a/frontend/src/views/DailyReviewsView.vue b/frontend/src/views/DailyReviewsView.vue
index a50aa14..b3a1343 100644
--- a/frontend/src/views/DailyReviewsView.vue
+++ b/frontend/src/views/DailyReviewsView.vue
@@ -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));
diff --git a/frontend/src/views/LiveRoomsView.vue b/frontend/src/views/LiveRoomsView.vue
index 87b6498..8e0afbd 100644
--- a/frontend/src/views/LiveRoomsView.vue
+++ b/frontend/src/views/LiveRoomsView.vue
@@ -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;
   }
diff --git a/frontend/src/views/MediaBrowserView.vue b/frontend/src/views/MediaBrowserView.vue
index a5c744d..c320a89 100644
--- a/frontend/src/views/MediaBrowserView.vue
+++ b/frontend/src/views/MediaBrowserView.vue
@@ -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;
diff --git a/frontend/src/views/RecordTasksView.vue b/frontend/src/views/RecordTasksView.vue
index a1bc40f..9dce652 100644
--- a/frontend/src/views/RecordTasksView.vue
+++ b/frontend/src/views/RecordTasksView.vue
@@ -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;
diff --git a/frontend/src/views/RecoveryView.vue b/frontend/src/views/RecoveryView.vue
index 915f2b8..301735f 100644
--- a/frontend/src/views/RecoveryView.vue
+++ b/frontend/src/views/RecoveryView.vue
@@ -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;
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index a9281fc..5658ea5 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -1,25 +1,46 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
 import { ElMessage } from "element-plus";
 import apiClient, { getApiErrorMessage } from "@/api/client";
 import type {
   CleanupOperation,
   CleanupVideoFileCondition,
   EventScriptTestResult,
+  PlatformProxySettings,
+  PlatformRequestSettings,
   SystemSettings,
   WebhookTestResult
 } from "@/types";
-import { outputFormatLabelMap, qualityOptionList, recordingTemplateLabelMap, saveModeLabelMap, taskStatusLabelMap } from "@/types";
+import {
+  createDefaultPlatformRequestSettingsMap,
+  outputFormatLabelMap,
+  platformOptionList,
+  qualityOptionList,
+  recordingTemplateLabelMap,
+  saveModeLabelMap,
+  taskStatusLabelMap
+} from "@/types";
 import { useAuthStore } from "@/stores/auth";
 import { useViewport } from "@/composables/useViewport";
 import { useUiPreferences } from "@/composables/useUiPreferences";
+import { useRoute } from "vue-router";
 
 type ScriptEventType = "live_started" | "live_ended" | "segment_completed";
 
+type SettingsFormModel = SystemSettings & {
+  douyinProxy: PlatformProxySettings;
+  bilibiliProxy: PlatformProxySettings;
+  huyaProxy: PlatformProxySettings;
+  douyinUserAgent: string;
+  douyinReferer: string;
+  douyinCookie: string;
+};
+
 const authStore = useAuthStore();
+const route = useRoute();
 const retentionCleanupStorageKey = "live-recorder-settings-retention-cleanup-operation-id";
 const { isMobile } = useViewport();
-const { sidebarCollapsed } = useUiPreferences();
+const { themeMode, density, sidebarCollapsed } = useUiPreferences();
 
 const loading = ref(false);
 const saving = ref(false);
@@ -44,8 +65,14 @@ const webhookTestResult = ref<WebhookTestResult | null>(null);
 const retentionCleanupOperation = ref<CleanupOperation | null>(null);
 const loadError = ref("");
 const activeSettingTab = ref("recording");
-const qualitySupportHint = "Douyin and Bilibili support quality-based stream selection. Huya does not yet. If a target quality is unavailable, the platform falls back to the closest available option.";
+const profileDisplayName = computed(() => authStore.user?.displayName || authStore.user?.username || "管理员");
+const profileUsername = computed(() => authStore.user?.username || "--");
+const profileUserId = computed(() => authStore.user?.userId || "--");
+const profileExpiresAt = computed(() => authStore.user?.expiresAt || "--");
+const profileInitial = computed(() => profileDisplayName.value.trim().slice(0, 1).toUpperCase() || "录");
+const qualitySupportHint = "Different platforms expose different quality ladders. If a target quality is unavailable, the recorder automatically falls back to the closest stream that platform offers.";
 const qualityOptions = qualityOptionList;
+const platformRequestPlatforms = platformOptionList;
 let retentionCleanupPollTimer: number | null = null;
 
 const savebarStyle = computed(() => {
@@ -64,7 +91,7 @@ const savebarStyle = computed(() => {
   };
 });
 
-const form = reactive<SystemSettings>({
+const form = reactive<SettingsFormModel>({
   ffmpegPath: "ffmpeg",
   outputRoot: "records",
   outputDirectoryTemplate: "{platform}/{yyyy}/{MM}/{dd}/{anchor}",
@@ -99,6 +126,7 @@ const form = reactive<SystemSettings>({
   enableAutoUpload: false,
   deleteLocalFilesAfterUpload: false,
   uploadTarget: 0,
+  platformRequestSettings: createDefaultPlatformRequestSettingsMap(),
   douyinProxy: {
     enabled: false,
     proxyUrl: ""
@@ -163,6 +191,10 @@ const form = reactive<SystemSettings>({
     <li><strong>Detected At (Beijing Time):</strong> {{detectedAtUtc}}</li>
   </ul>
   <p><strong>Source URL:</strong> <a href="{{sourceUrl}}">{{sourceUrl}}</a></p>
+  <div style="margin-top: 16px;">
+    <strong>Event Script Output:</strong>
+  </div>
+  <div style="margin-top: 8px; padding: 12px 14px; border-radius: 8px; background: #f5f5f5; white-space: pre-wrap;">{{eventScriptOutput}}</div>
 </div>`,
   emailExceptionSubjectTemplate: "[{{appName}}] Exception: {{source}}",
   emailExceptionBodyTemplateHtml: `<div style="font-family: 'Segoe UI', 'PingFang SC', sans-serif; color: #1f2937; line-height: 1.7;">
@@ -190,6 +222,62 @@ const form = reactive<SystemSettings>({
   douyinCookie: ""
 });
 
+function normalizePlatformRequestSettings(
+  value?: Record<string, PlatformRequestSettings> | null
+): Record<string, PlatformRequestSettings> {
+  const defaults = createDefaultPlatformRequestSettingsMap();
+
+  if (!value) {
+    return defaults;
+  }
+
+  for (const platform of platformRequestPlatforms) {
+    const current = value[platform.key];
+    if (!current) {
+      continue;
+    }
+
+    defaults[platform.key] = {
+      proxy: {
+        enabled: current.proxy?.enabled ?? defaults[platform.key].proxy.enabled,
+        proxyUrl: current.proxy?.proxyUrl ?? defaults[platform.key].proxy.proxyUrl
+      },
+      userAgent: current.userAgent ?? defaults[platform.key].userAgent,
+      referer: current.referer ?? defaults[platform.key].referer,
+      cookie: current.cookie ?? defaults[platform.key].cookie
+    };
+  }
+
+  return defaults;
+}
+
+function syncLegacyPlatformAliasesFromMap() {
+  form.douyinProxy = { ...form.platformRequestSettings.douyin.proxy };
+  form.bilibiliProxy = { ...form.platformRequestSettings.bilibili.proxy };
+  form.huyaProxy = { ...form.platformRequestSettings.huya.proxy };
+  form.douyinUserAgent = form.platformRequestSettings.douyin.userAgent;
+  form.douyinReferer = form.platformRequestSettings.douyin.referer;
+  form.douyinCookie = form.platformRequestSettings.douyin.cookie;
+}
+
+function syncPlatformRequestSettingsFromLegacyAliases() {
+  form.platformRequestSettings.douyin = {
+    ...form.platformRequestSettings.douyin,
+    proxy: { ...form.douyinProxy },
+    userAgent: form.douyinUserAgent,
+    referer: form.douyinReferer,
+    cookie: form.douyinCookie
+  };
+  form.platformRequestSettings.bilibili = {
+    ...form.platformRequestSettings.bilibili,
+    proxy: { ...form.bilibiliProxy }
+  };
+  form.platformRequestSettings.huya = {
+    ...form.platformRequestSettings.huya,
+    proxy: { ...form.huyaProxy }
+  };
+}
+
 const outputTemplateTokens = [
   "{platform}",
   "{roomId}",
@@ -220,7 +308,8 @@ const emailTemplateTokens = [
   "{{liveRoomId}}",
   "{{recordTaskId}}",
   "{{taskStatus}}",
-  "{{occurredAtUtc}}"
+  "{{occurredAtUtc}}",
+  "{{eventScriptOutput}}"
 ];
 
 const webhookTemplateTokens = [
@@ -241,6 +330,7 @@ const webhookTemplateTokens = [
   "{{recordTask.status}}",
   "{{recordTask.segmentIndex}}",
   "{{recordTask.outputFilePath}}",
+  "{{eventScriptOutput}}",
   "{{report.date}}",
   "{{report.summary.activeLiveRoomCount}}",
   "{{report.summary.sessionCount}}",
@@ -285,8 +375,8 @@ const eventScriptEnvironmentExamples = [
 ];
 
 const eventScriptModeOptions = [
-  { label: "路径", value: "path" },
-  { label: "脚本文本", value: "inline" }
+  { label: "璺緞", value: "path" },
+  { label: "鑴氭湰鏂囨湰", value: "inline" }
 ];
 
 const uploadTargetOptions = [
@@ -357,7 +447,7 @@ const retentionCleanupSummary = computed(() => {
     `logs ${retentionCleanupOperation.value.deletedLogCount}`,
     `files ${retentionCleanupOperation.value.deletedFileCount}`,
     `danmaku ${retentionCleanupOperation.value.deletedDanmakuFileCount}`
-  ].join(" · ");
+  ].join(" 路 ");
 });
 const retentionCleanupWarningsPreview = computed(() => retentionCleanupOperation.value?.warnings.slice(0, 6) ?? []);
 
@@ -369,12 +459,12 @@ const canSendTestWebhook = computed(() => Boolean(form.webhookUrl.trim()));
 
 const segmentedExamplePath = computed(() => {
   const extension = form.defaultOutputFormat === 1 ? "ts" : "mp4";
-  return `Douyin/2026/04/15/主播名/221530_origin_主播名_直播标题_123456789_00001.${extension}`;
+  return `Douyin/2026/04/15/涓绘挱鍚?221530_origin_涓绘挱鍚峗鐩存挱鏍囬_123456789_00001.${extension}`;
 });
 
 const nestedSegmentedExamplePath = computed(() => {
   const extension = form.defaultOutputFormat === 1 ? "ts" : "mp4";
-  return `Douyin/origin/2026/04/15/主播名/221530_origin_主播名_直播标题_123456789/221530_origin_主播名_直播标题_123456789_00001.${extension}`;
+  return `Douyin/origin/2026/04/15/涓绘挱鍚?221530_origin_涓绘挱鍚峗鐩存挱鏍囬_123456789/221530_origin_涓绘挱鍚峗鐩存挱鏍囬_123456789_00001.${extension}`;
 });
 
 async function loadSettings() {
@@ -384,6 +474,8 @@ async function loadSettings() {
   try {
     const { data } = await apiClient.get<SystemSettings>("/settings");
     Object.assign(form, data);
+    form.platformRequestSettings = normalizePlatformRequestSettings(data.platformRequestSettings);
+    syncLegacyPlatformAliasesFromMap();
   } catch (error) {
     loadError.value = getApiErrorMessage(error, "Failed to load system settings. Please try again later.");
   } finally {
@@ -400,11 +492,11 @@ const pwdForm = reactive({
 const pwdRules = {
   currentPassword: [{ required: true, message: "Please enter the current password", trigger: "blur" }],
   newPassword: [
-    { required: true, message: "请输入新密码", trigger: "blur" },
+    { required: true, message: "璇疯緭鍏ユ柊瀵嗙爜", trigger: "blur" },
     { min: 6, message: "Password must be at least 6 characters", trigger: "blur" }
   ],
   confirmPassword: [
-    { required: true, message: "请再次输入新密码", trigger: "blur" },
+    { required: true, message: "璇峰啀娆¤緭鍏ユ柊瀵嗙爜", trigger: "blur" },
     {
       validator: (_rule: unknown, value: string, callback: (error?: Error) => void) => {
         if (value !== pwdForm.newPassword) {
@@ -443,8 +535,15 @@ async function saveSettings() {
   saving.value = true;
 
   try {
-    const { data } = await apiClient.put<SystemSettings>("/settings", form);
+    syncPlatformRequestSettingsFromLegacyAliases();
+    const payload: SystemSettings = {
+      ...form,
+      platformRequestSettings: normalizePlatformRequestSettings(form.platformRequestSettings)
+    };
+    const { data } = await apiClient.put<SystemSettings>("/settings", payload);
     Object.assign(form, data);
+    form.platformRequestSettings = normalizePlatformRequestSettings(data.platformRequestSettings);
+    syncLegacyPlatformAliasesFromMap();
     ElMessage.success("Settings saved.");
   } finally {
     saving.value = false;
@@ -470,7 +569,7 @@ async function sendTestEmail() {
       emailExceptionBodyTemplateHtml: form.emailExceptionBodyTemplateHtml
     });
 
-    ElMessage.success("测试邮件已发送，请检查收件箱");
+    ElMessage.success("娴嬭瘯閭欢宸插彂閫侊紝璇锋鏌ユ敹浠剁");
   } catch (error) {
     ElMessage.error(getApiErrorMessage(error, "Failed to send test email."));
   } finally {
@@ -488,7 +587,7 @@ async function testEventScript(eventType: ScriptEventType) {
   } catch (error) {
     const result: EventScriptTestResult = {
       success: false,
-      message: getApiErrorMessage(error, "事件脚本测试失败")
+      message: getApiErrorMessage(error, "浜嬩欢鑴氭湰娴嬭瘯澶辫触")
     };
     scriptTestResults[eventType] = result;
     ElMessage.error(result.message);
@@ -512,7 +611,7 @@ async function testWebhook() {
   } catch (error) {
     const result: WebhookTestResult = {
       success: false,
-      message: getApiErrorMessage(error, "Webhook 测试失败")
+      message: getApiErrorMessage(error, "Webhook 娴嬭瘯澶辫触")
     };
     webhookTestResult.value = result;
     ElMessage.error(result.message);
@@ -529,7 +628,7 @@ async function runRetentionCleanup() {
     await startRetentionCleanupTracking(data);
     ElMessage.success("Retention cleanup background task created.");
   } catch (error) {
-    ElMessage.error(getApiErrorMessage(error, "保留清理执行失败"));
+    ElMessage.error(getApiErrorMessage(error, "淇濈暀娓呯悊鎵ц澶辫触"));
   } finally {
     runningRetentionCleanup.value = false;
   }
@@ -638,7 +737,7 @@ async function exportSettingsBackup() {
     URL.revokeObjectURL(downloadUrl);
     ElMessage.success("Settings backup exported.");
   } catch (error) {
-    ElMessage.error(getApiErrorMessage(error, "系统设置导出失败"));
+    ElMessage.error(getApiErrorMessage(error, "绯荤粺璁剧疆瀵煎嚭澶辫触"));
   } finally {
     exportingSettings.value = false;
   }
@@ -665,7 +764,7 @@ async function importSettingsBackup(event: Event) {
     Object.assign(form, data);
     ElMessage.success("Settings imported from backup.");
   } catch (error) {
-    ElMessage.error(getApiErrorMessage(error, "系统设置导入失败"));
+    ElMessage.error(getApiErrorMessage(error, "绯荤粺璁剧疆瀵煎叆澶辫触"));
   } finally {
     importingSettings.value = false;
   }
@@ -737,23 +836,45 @@ function parseDownloadFileName(contentDisposition?: string) {
   return plainMatch?.[1] ?? null;
 }
 
+async function syncSettingsHash(hash = route.hash) {
+  if (!hash) {
+    return;
+  }
+
+  if (hash === "#security") {
+    activeSettingTab.value = "security";
+  }
+
+  await nextTick();
+  document.querySelector(hash)?.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
 onMounted(async () => {
   await loadSettings();
   await restoreRetentionCleanupTracking();
+  await syncSettingsHash();
 });
 
 onBeforeUnmount(() => {
   stopRetentionCleanupPolling();
 });
+
+watch(
+  () => route.hash,
+  (hash) => {
+    void syncSettingsHash(hash);
+  }
+);
 </script>
 
 <template>
   <div class="page-stack">
     <div class="page-header">
       <div>
+        <div class="page-kicker">系统设置</div>
         <h1 class="page-title">系统设置</h1>
         <p class="page-subtitle">
-          录制、巡检、脚本、Webhook、邮件和保留清理都集中在这里。脚本测试、Webhook 测试和邮件测试都会直接使用当前表单值，不要求先保存。
+          录制、轮询、通知、脚本和保留清理统一收口到这里。个人资料、安全与显示偏好也通过现有设置页完成管理。
         </p>
       </div>
 
@@ -774,17 +895,80 @@ onBeforeUnmount(() => {
 
     <el-alert v-if="loadError" class="page-error-alert" type="error" :closable="false" show-icon :title="loadError" />
 
+    <div class="settings-overview-grid">
+      <el-card id="profile" class="surface-card settings-overview-card" shadow="never">
+        <div class="settings-overview-card__header">
+          <div>
+            <div class="settings-overview-card__eyebrow">个人资料</div>
+            <h3 class="section-title">当前登录账户</h3>
+          </div>
+        </div>
+
+        <div class="settings-profile">
+          <div class="settings-profile__avatar">{{ profileInitial }}</div>
+          <div>
+            <div class="settings-profile__name">{{ profileDisplayName }}</div>
+            <div class="settings-profile__meta">{{ profileUsername }}</div>
+          </div>
+        </div>
+
+        <div class="settings-overview-list">
+          <div><span>用户名</span><strong>{{ profileUsername }}</strong></div>
+          <div><span>用户 ID</span><strong>{{ profileUserId }}</strong></div>
+          <div><span>邮箱</span><strong>--</strong></div>
+          <div><span>角色</span><strong>--</strong></div>
+          <div><span>当前空间</span><strong>--</strong></div>
+          <div><span>在线状态</span><strong>在线</strong></div>
+          <div><span>凭证到期</span><strong>{{ profileExpiresAt }}</strong></div>
+        </div>
+      </el-card>
+
+      <el-card id="preferences" class="surface-card settings-overview-card" shadow="never">
+        <div class="settings-overview-card__header">
+          <div>
+            <div class="settings-overview-card__eyebrow">偏好设置</div>
+            <h3 class="section-title">控制台显示偏好</h3>
+          </div>
+        </div>
+
+        <div class="settings-preferences">
+          <div class="settings-preferences__row">
+            <span>主题模式</span>
+            <el-select v-model="themeMode">
+              <el-option label="跟随系统" value="system" />
+              <el-option label="浅色" value="light" />
+              <el-option label="深色" value="dark" />
+            </el-select>
+          </div>
+          <div class="settings-preferences__row">
+            <span>显示密度</span>
+            <el-select v-model="density">
+              <el-option label="舒适密度" value="comfortable" />
+              <el-option label="紧凑密度" value="compact" />
+            </el-select>
+          </div>
+          <div class="settings-preferences__row settings-preferences__row--switch">
+            <div>
+              <strong>侧栏折叠</strong>
+              <p>继续复用当前前端偏好存储逻辑。</p>
+            </div>
+            <el-switch v-model="sidebarCollapsed" />
+          </div>
+        </div>
+      </el-card>
+    </div>
+
     <div class="settings-grid" v-loading="loading">
       <el-tabs v-model="activeSettingTab" type="border-card" class="settings-tabs">
-        <el-tab-pane label="录制" name="recording">
+        <el-tab-pane label="褰曞埗" name="recording">
       <el-card class="surface-card settings-card" shadow="never">
-        <h3 class="section-title">录制基础</h3>
+        <h3 class="section-title">褰曞埗鍩虹</h3>
         <p class="section-subtitle">Default quality, output format, segmentation, ffmpeg templates, and network tolerance settings are managed here.</p>
 
         <el-form label-position="top">
           <el-row :gutter="16">
             <el-col :span="12">
-              <el-form-item label="ffmpeg 路径">
+              <el-form-item label="ffmpeg 璺緞">
                 <el-input v-model="form.ffmpegPath" />
               </el-form-item>
             </el-col>
@@ -806,7 +990,7 @@ onBeforeUnmount(() => {
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="输出格式">
+              <el-form-item label="杈撳嚭鏍煎紡">
                 <el-select v-model="form.defaultOutputFormat">
                   <el-option
                     v-for="(label, value) in outputFormatLabelMap"
@@ -818,7 +1002,7 @@ onBeforeUnmount(() => {
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="保存模式">
+              <el-form-item label="淇濆瓨妯″紡">
                 <el-select v-model="form.saveMode">
                   <el-option
                     v-for="(label, value) in saveModeLabelMap"
@@ -830,7 +1014,7 @@ onBeforeUnmount(() => {
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="录制模板">
+              <el-form-item label="褰曞埗妯℃澘">
                 <el-select v-model="form.recordingTemplate">
                   <el-option
                     v-for="(label, value) in recordingTemplateLabelMap"
@@ -842,7 +1026,7 @@ onBeforeUnmount(() => {
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="分段时长（分钟）">
+              <el-form-item label="鍒嗘鏃堕暱锛堝垎閽燂級">
                 <el-input-number v-model="form.segmentDurationMinutes" :min="1" :max="720" />
               </el-form-item>
             </el-col>
@@ -852,22 +1036,22 @@ onBeforeUnmount(() => {
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="MP4 转码超时（分钟）">
+              <el-form-item label="MP4 杞爜瓒呮椂锛堝垎閽燂級">
                 <el-input-number v-model="form.mp4FinalizeTimeoutMinutes" :min="1" :max="1440" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="最大重连延迟（秒）">
+              <el-form-item label="鏈€澶ч噸杩炲欢杩燂紙绉掞級">
                 <el-input-number v-model="form.reconnectDelayMaxSeconds" :min="1" :max="300" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="读写超时（毫秒）">
+              <el-form-item label="璇诲啓瓒呮椂锛堟绉掞級">
                 <el-input-number v-model="form.readWriteTimeoutMilliseconds" :min="1000" :max="60000000" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="启用 ffmpeg 自动重连">
+              <el-form-item label="鍚敤 ffmpeg 鑷姩閲嶈繛">
                 <el-switch v-model="form.enableAutoReconnect" />
               </el-form-item>
             </el-col>
@@ -880,13 +1064,13 @@ onBeforeUnmount(() => {
       </el-card>
 
       <el-card class="surface-card settings-card" shadow="never">
-        <h3 class="section-title">存储保护</h3>
+        <h3 class="section-title">瀛樺偍淇濇姢</h3>
         <p class="section-subtitle">Pause recording and MP4 finalization below the threshold, then resume once free space recovers.</p>
 
         <el-form label-position="top">
           <el-row :gutter="16">
             <el-col :span="12">
-              <el-form-item label="启用存储保护">
+              <el-form-item label="鍚敤瀛樺偍淇濇姢">
                 <el-switch v-model="form.enableStorageGuard" />
               </el-form-item>
             </el-col>
@@ -914,28 +1098,27 @@ onBeforeUnmount(() => {
         </el-form>
 
         <div class="helper-panel">
-          恢复阈值建议高于暂停阈值，避免磁盘空间在临界值附近反复抖动。MP4 转码会额外占用中间 TS 文件空间。
-        </div>
+          鎭㈠闃堝€煎缓璁珮浜庢殏鍋滈槇鍊硷紝閬垮厤纾佺洏绌洪棿鍦ㄤ复鐣屽€奸檮杩戝弽澶嶆姈鍔ㄣ€侻P4 杞爜浼氶澶栧崰鐢ㄤ腑闂?TS 鏂囦欢绌洪棿銆?        </div>
       </el-card>
 
       <el-card class="surface-card settings-card" shadow="never">
-        <h3 class="section-title">保留清理</h3>
+        <h3 class="section-title">淇濈暀娓呯悊</h3>
         <p class="section-subtitle">Clean up inactive sessions, tasks, results, and logs by retention age, with optional file deletion.</p>
 
         <el-form label-position="top">
           <el-row :gutter="16">
             <el-col :span="8">
-              <el-form-item label="启用自动清理">
+              <el-form-item label="鍚敤鑷姩娓呯悊">
                 <el-switch v-model="form.enableRetentionCleanup" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="保留天数">
+              <el-form-item label="淇濈暀澶╂暟">
                 <el-input-number v-model="form.retentionDays" :min="1" :max="3650" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="删除磁盘文件">
+              <el-form-item label="鍒犻櫎纾佺洏鏂囦欢">
                 <el-switch v-model="form.retentionDeleteFiles" />
               </el-form-item>
             </el-col>
@@ -978,8 +1161,8 @@ onBeforeUnmount(() => {
         >
           <div class="test-result__title">Current cleanup task</div>
           <div class="test-result__meta">
-            Status={{ retentionCleanupStatusLabel }} ·
-            progress={{ retentionCleanupProgressText }} ·
+            Status={{ retentionCleanupStatusLabel }} 路
+            progress={{ retentionCleanupProgressText }} 路
             {{ retentionCleanupSummary }}
           </div>
           <div v-if="retentionCleanupOperation.errorMessage" class="test-result__detail">
@@ -997,13 +1180,13 @@ onBeforeUnmount(() => {
       </el-card>
 
       <el-card class="surface-card settings-card" shadow="never">
-        <h3 class="section-title">弹幕录制</h3>
+        <h3 class="section-title">寮瑰箷褰曞埗</h3>
         <p class="section-subtitle">Control parallel danmaku XML recording, non-chat event capture, and retry / polling pacing.</p>
 
         <el-form label-position="top">
           <el-row :gutter="16">
             <el-col :span="12">
-              <el-form-item label="启用弹幕录制">
+              <el-form-item label="鍚敤寮瑰箷褰曞埗">
                 <el-switch v-model="form.enableDanmakuRecording" />
               </el-form-item>
             </el-col>
@@ -1023,7 +1206,7 @@ onBeforeUnmount(() => {
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="最大重试退避（秒）">
+              <el-form-item label="鏈€澶ч噸璇曢€€閬匡紙绉掞級">
                 <el-input-number
                   v-model="form.danmakuRetryDelayMaxSeconds"
                   :min="1"
@@ -1037,11 +1220,11 @@ onBeforeUnmount(() => {
       </el-card>
 
       <el-card class="surface-card settings-card settings-grid__full" shadow="never">
-        <h3 class="section-title">路径模板</h3>
+        <h3 class="section-title">璺緞妯℃澘</h3>
         <p class="section-subtitle">Both directory and filename templates support variables. Segmented layouts are fully controlled by the templates themselves.</p>
 
         <el-form label-position="top">
-          <el-form-item label="目录模板">
+          <el-form-item label="鐩綍妯℃澘">
             <el-input
               v-model="form.outputDirectoryTemplate"
               type="textarea"
@@ -1061,9 +1244,9 @@ onBeforeUnmount(() => {
         </el-form>
 
         <div class="example-box">
-          <div class="example-box__label">示例输出</div>
-          <div class="monospace example-box__value">默认分段：{{ segmentedExamplePath }}</div>
-          <div class="monospace example-box__value">目录模板含 {fileStem}：{{ nestedSegmentedExamplePath }}</div>
+          <div class="example-box__label">绀轰緥杈撳嚭</div>
+          <div class="monospace example-box__value">榛樿鍒嗘锛歿{ segmentedExamplePath }}</div>
+          <div class="monospace example-box__value">鐩綍妯℃澘鍚?{fileStem}锛歿{ nestedSegmentedExamplePath }}</div>
         </div>
 
         <div class="helper-panel">
@@ -1087,18 +1270,18 @@ onBeforeUnmount(() => {
         <el-tab-pane label="Polling and upload" name="polling">
 
       <el-card class="surface-card settings-card" shadow="never">
-        <h3 class="section-title">后台巡检</h3>
+        <h3 class="section-title">鍚庡彴宸℃</h3>
         <p class="section-subtitle">Control scheduled live-status checks and automatic recording starts when a room goes live.</p>
 
         <el-form label-position="top">
           <el-row :gutter="16">
             <el-col :span="12">
-              <el-form-item label="启用后台巡检">
+              <el-form-item label="鍚敤鍚庡彴宸℃">
                 <el-switch v-model="form.enableBackgroundPolling" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="检测到开播后自动录制">
+              <el-form-item label="妫€娴嬪埌寮€鎾悗鑷姩褰曞埗">
                 <el-switch v-model="form.autoStartRecordingOnLive" />
               </el-form-item>
             </el-col>
@@ -1111,34 +1294,34 @@ onBeforeUnmount(() => {
         </el-form>
       </el-card>
 
-      <el-card class="surface-card settings-card settings-grid__full" shadow="never">
+      <el-card v-if="false" class="surface-card settings-card settings-grid__full" shadow="never">
         <h3 class="section-title">Upload and archive</h3>
         <p class="section-subtitle">Upload video files and matching danmaku XML automatically or manually, then optionally delete local files after a successful upload.</p>
 
         <el-form label-position="top">
           <el-row :gutter="16">
             <el-col :span="6">
-              <el-form-item label="启用上传">
+              <el-form-item label="鍚敤涓婁紶">
                 <el-switch v-model="form.enableFileUpload" />
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="自动上传">
+              <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-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-form-item label="鍒悕鐢ㄤ簬鐩綍">
                 <el-switch v-model="form.useAliasForStorage" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="上传目标">
+              <el-form-item label="涓婁紶鐩爣">
                 <el-select v-model="form.uploadTarget" :disabled="!form.enableFileUpload">
                   <el-option
                     v-for="option in uploadTargetOptions"
@@ -1155,7 +1338,7 @@ onBeforeUnmount(() => {
         <div v-if="form.enableFileUpload && form.uploadTarget === 1" class="template-section">
           <div class="template-section__header">
             <div>
-              <h4 class="template-section__title">WebDAV 目标</h4>
+              <h4 class="template-section__title">WebDAV 鐩爣</h4>
               <p class="template-section__subtitle">Create remote directories from recording-relative paths and upload the video plus danmaku files.</p>
             </div>
           </div>
@@ -1168,7 +1351,7 @@ onBeforeUnmount(() => {
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="基础路径">
+                <el-form-item label="鍩虹璺緞">
                   <el-input v-model="form.webDavUpload.basePath" placeholder="/live-recorder" />
                 </el-form-item>
               </el-col>
@@ -1178,7 +1361,7 @@ onBeforeUnmount(() => {
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="密码">
+                <el-form-item label="瀵嗙爜">
                   <el-input v-model="form.webDavUpload.password" type="password" show-password />
                 </el-form-item>
               </el-col>
@@ -1189,7 +1372,7 @@ onBeforeUnmount(() => {
         <div v-if="form.enableFileUpload && form.uploadTarget === 2" class="template-section">
           <div class="template-section__header">
             <div>
-              <h4 class="template-section__title">S3 目标</h4>
+              <h4 class="template-section__title">S3 鐩爣</h4>
               <p class="template-section__subtitle">Supports custom endpoint, bucket, region, and prefix settings for object-storage compatible services.</p>
             </div>
           </div>
@@ -1212,7 +1395,7 @@ onBeforeUnmount(() => {
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="前缀">
+                <el-form-item label="鍓嶇紑">
                   <el-input v-model="form.s3Upload.prefix" placeholder="live-recorder/" />
                 </el-form-item>
               </el-col>
@@ -1236,15 +1419,14 @@ onBeforeUnmount(() => {
         </div>
 
         <div class="helper-panel">
-          自动上传固定处理“视频文件 + 对应弹幕 XML”。只有两者都上传成功并且你打开“上传后删本地”时，系统才会清理本地文件。
-        </div>
+          鑷姩涓婁紶鍥哄畾澶勭悊鈥滆棰戞枃浠?+ 瀵瑰簲寮瑰箷 XML鈥濄€傚彧鏈変袱鑰呴兘涓婁紶鎴愬姛骞朵笖浣犳墦寮€鈥滀笂浼犲悗鍒犳湰鍦扳€濇椂锛岀郴缁熸墠浼氭竻鐞嗘湰鍦版枃浠躲€?        </div>
       </el-card>
 
-      <el-card class="surface-card settings-card settings-grid__full" shadow="never">
-        <h3 class="section-title">平台代理</h3>
+      <el-card v-if="false" class="surface-card settings-card settings-grid__full" shadow="never">
+        <h3 class="section-title">骞冲彴浠ｇ悊</h3>
         <p class="section-subtitle">These proxies only affect platform-side status checks and stream requests, not email, webhook, or file uploads.</p>
 
-        <div class="event-script-grid">
+        <div v-if="false" class="event-script-grid">
           <div class="event-script-section">
             <div class="event-script-section__header">
               <div>
@@ -1253,7 +1435,7 @@ onBeforeUnmount(() => {
               </div>
               <el-switch v-model="form.douyinProxy.enabled" />
             </div>
-            <el-form-item label="代理地址">
+            <el-form-item label="浠ｇ悊鍦板潃">
               <el-input v-model="form.douyinProxy.proxyUrl" placeholder="http://127.0.0.1:7890" />
             </el-form-item>
           </div>
@@ -1266,7 +1448,7 @@ onBeforeUnmount(() => {
               </div>
               <el-switch v-model="form.bilibiliProxy.enabled" />
             </div>
-            <el-form-item label="代理地址">
+            <el-form-item label="浠ｇ悊鍦板潃">
               <el-input v-model="form.bilibiliProxy.proxyUrl" placeholder="http://127.0.0.1:7890" />
             </el-form-item>
           </div>
@@ -1279,7 +1461,7 @@ onBeforeUnmount(() => {
               </div>
               <el-switch v-model="form.huyaProxy.enabled" />
             </div>
-            <el-form-item label="代理地址">
+            <el-form-item label="浠ｇ悊鍦板潃">
               <el-input v-model="form.huyaProxy.proxyUrl" placeholder="http://127.0.0.1:7890" />
             </el-form-item>
           </div>
@@ -1287,18 +1469,17 @@ onBeforeUnmount(() => {
       </el-card>
 
         </el-tab-pane>
-        <el-tab-pane label="事件脚本" name="scripts">
+        <el-tab-pane label="浜嬩欢鑴氭湰" name="scripts">
 
       <el-card class="surface-card settings-card settings-grid__full" shadow="never">
-        <h3 class="section-title">事件脚本</h3>
+        <h3 class="section-title">浜嬩欢鑴氭湰</h3>
         <p class="section-subtitle">
-          开播、下播、分片完成时都可以执行脚本。脚本支持路径模式和直接填写文本模式；测试按钮会直接用当前表单值执行，不要求先保存。
-        </p>
+          寮€鎾€佷笅鎾€佸垎鐗囧畬鎴愭椂閮藉彲浠ユ墽琛岃剼鏈€傝剼鏈敮鎸佽矾寰勬ā寮忓拰鐩存帴濉啓鏂囨湰妯″紡锛涙祴璇曟寜閽細鐩存帴鐢ㄥ綋鍓嶈〃鍗曞€兼墽琛岋紝涓嶈姹傚厛淇濆瓨銆?        </p>
 
         <el-form label-position="top">
           <el-row :gutter="16">
             <el-col :span="8">
-              <el-form-item label="启用事件脚本">
+              <el-form-item label="鍚敤浜嬩欢鑴氭湰">
                 <el-switch v-model="form.enableEventScripts" />
               </el-form-item>
             </el-col>
@@ -1335,14 +1516,14 @@ onBeforeUnmount(() => {
                   :disabled="!canTestScript('live_started')"
                   @click="testEventScript('live_started')"
                 >
-                  测试脚本
+                  娴嬭瘯鑴氭湰
                 </el-button>
               </div>
             </div>
-            <el-form-item v-if="form.liveStartedScriptMode === 'path'" label="脚本路径">
+            <el-form-item v-if="form.liveStartedScriptMode === 'path'" label="鑴氭湰璺緞">
               <el-input v-model="form.liveStartedScriptPath" placeholder="/app/scripts/live-started.sh" />
             </el-form-item>
-            <el-form-item v-else label="脚本文本">
+            <el-form-item v-else label="鑴氭湰鏂囨湰">
               <el-input
                 v-model="form.liveStartedScriptContent"
                 type="textarea"
@@ -1360,7 +1541,7 @@ onBeforeUnmount(() => {
                 {{ scriptTestResults.live_started?.detail }}
               </div>
               <div v-if="scriptTestResults.live_started?.customLogOutput" class="test-result__detail">
-                自定义日志输出：{{ scriptTestResults.live_started?.customLogOutput }}
+                鑷畾涔夋棩蹇楄緭鍑猴細{{ scriptTestResults.live_started?.customLogOutput }}
               </div>
             </div>
           </div>
@@ -1368,7 +1549,7 @@ onBeforeUnmount(() => {
           <div class="event-script-section">
             <div class="event-script-section__header">
               <div>
-                <h4 class="event-script-section__title">下播</h4>
+                <h4 class="event-script-section__title">涓嬫挱</h4>
                 <p class="event-script-section__subtitle">Triggered when the room changes from online back to offline.</p>
               </div>
               <div class="event-script-section__actions">
@@ -1389,14 +1570,14 @@ onBeforeUnmount(() => {
                   :disabled="!canTestScript('live_ended')"
                   @click="testEventScript('live_ended')"
                 >
-                  测试脚本
+                  娴嬭瘯鑴氭湰
                 </el-button>
               </div>
             </div>
-            <el-form-item v-if="form.liveEndedScriptMode === 'path'" label="脚本路径">
+            <el-form-item v-if="form.liveEndedScriptMode === 'path'" label="鑴氭湰璺緞">
               <el-input v-model="form.liveEndedScriptPath" placeholder="/app/scripts/live-ended.sh" />
             </el-form-item>
-            <el-form-item v-else label="脚本文本">
+            <el-form-item v-else label="鑴氭湰鏂囨湰">
               <el-input
                 v-model="form.liveEndedScriptContent"
                 type="textarea"
@@ -1414,7 +1595,7 @@ onBeforeUnmount(() => {
                 {{ scriptTestResults.live_ended?.detail }}
               </div>
               <div v-if="scriptTestResults.live_ended?.customLogOutput" class="test-result__detail">
-                自定义日志输出：{{ scriptTestResults.live_ended?.customLogOutput }}
+                鑷畾涔夋棩蹇楄緭鍑猴細{{ scriptTestResults.live_ended?.customLogOutput }}
               </div>
             </div>
           </div>
@@ -1422,7 +1603,7 @@ onBeforeUnmount(() => {
           <div class="event-script-section event-script-section--full">
             <div class="event-script-section__header">
               <div>
-                <h4 class="event-script-section__title">分片完成</h4>
+                <h4 class="event-script-section__title">鍒嗙墖瀹屾垚</h4>
                 <p class="event-script-section__subtitle">Triggered after MP4 finalization completes and the segment status becomes completed.</p>
               </div>
               <div class="event-script-section__actions">
@@ -1443,14 +1624,14 @@ onBeforeUnmount(() => {
                   :disabled="!canTestScript('segment_completed')"
                   @click="testEventScript('segment_completed')"
                 >
-                  测试脚本
+                  娴嬭瘯鑴氭湰
                 </el-button>
               </div>
             </div>
-            <el-form-item v-if="form.segmentCompletedScriptMode === 'path'" label="脚本路径">
+            <el-form-item v-if="form.segmentCompletedScriptMode === 'path'" label="鑴氭湰璺緞">
               <el-input v-model="form.segmentCompletedScriptPath" placeholder="/app/scripts/segment-completed.sh" />
             </el-form-item>
-            <el-form-item v-else label="脚本文本">
+            <el-form-item v-else label="鑴氭湰鏂囨湰">
               <el-input
                 v-model="form.segmentCompletedScriptContent"
                 type="textarea"
@@ -1468,7 +1649,7 @@ onBeforeUnmount(() => {
                 {{ scriptTestResults.segment_completed?.detail }}
               </div>
               <div v-if="scriptTestResults.segment_completed?.customLogOutput" class="test-result__detail">
-                自定义日志输出：{{ scriptTestResults.segment_completed?.customLogOutput }}
+                鑷畾涔夋棩蹇楄緭鍑猴細{{ scriptTestResults.segment_completed?.customLogOutput }}
               </div>
             </div>
           </div>
@@ -1512,26 +1693,26 @@ onBeforeUnmount(() => {
       </el-card>
 
         </el-tab-pane>
-        <el-tab-pane label="通知" name="notifications">
+        <el-tab-pane label="閫氱煡" name="notifications">
 
       <el-card class="surface-card settings-card settings-grid__full" shadow="never">
-        <h3 class="section-title">Webhook 通知</h3>
+        <h3 class="section-title">Webhook 閫氱煡</h3>
         <p class="section-subtitle">Send fixed JSON POST payloads with custom headers. Currently only live-started and exception events are sent.</p>
 
         <el-form label-position="top">
           <el-row :gutter="16">
             <el-col :span="6">
-              <el-form-item label="启用 Webhook">
+              <el-form-item label="鍚敤 Webhook">
                 <el-switch v-model="form.enableWebhookNotification" />
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="开播通知">
+              <el-form-item label="寮€鎾€氱煡">
                 <el-switch v-model="form.notifyWebhookOnLiveStarted" />
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="异常通知">
+              <el-form-item label="寮傚父閫氱煡">
                 <el-switch v-model="form.notifyWebhookOnException" />
               </el-form-item>
             </el-col>
@@ -1548,7 +1729,7 @@ onBeforeUnmount(() => {
             </el-col>
 
             <el-col :span="24">
-              <el-form-item label="自定义请求头">
+              <el-form-item label="鑷畾涔夎姹傚ご">
                 <el-input
                   v-model="form.webhookHeaders"
                   type="textarea"
@@ -1558,27 +1739,27 @@ onBeforeUnmount(() => {
               </el-form-item>
             </el-col>
             <el-col :span="24">
-              <el-form-item label="自定义 JSON Body 模板">
+              <el-form-item label="鑷畾涔?JSON Body 妯℃澘">
                 <el-input
                   v-model="form.webhookBodyTemplate"
                   type="textarea"
                   :rows="8"
-                  placeholder="{&#10;  &quot;event&quot;: &quot;{{eventType}}&quot;,&#10;  &quot;summary&quot;: &quot;{{summary}}&quot;,&#10;  &quot;roomId&quot;: &quot;{{liveRoom.roomId}}&quot;&#10;}"
+                  placeholder="{&#10;  &quot;event&quot;: &quot;{{eventType}}&quot;,&#10;  &quot;summary&quot;: &quot;{{summary}}&quot;,&#10;  &quot;roomId&quot;: &quot;{{liveRoom.roomId}}&quot;,&#10;  &quot;eventScriptOutput&quot;: &quot;{{eventScriptOutput}}&quot;&#10;}"
                 />
               </el-form-item>
             </el-col>
           </el-row>
         </el-form>
         <div class="template-help">
-          <div class="template-help__label">Webhook 变量</div>
+          <div class="template-help__label">Webhook 鍙橀噺</div>
           <div class="token-list">
             <span v-for="token in webhookTemplateTokens" :key="token" class="token-chip">{{ token }}</span>
           </div>
         </div>
 
         <div class="action-strip">
-          <div class="helper-text">The test sends a sample live_started payload using the current URL, headers, and timeout values from this form.</div>
-          <el-button :loading="testingWebhook" :disabled="!canSendTestWebhook" @click="testWebhook">测试 Webhook</el-button>
+          <div class="helper-text">The test sends a sample live_started payload, including sample event script output, using the current URL, headers, and timeout values from this form.</div>
+          <el-button :loading="testingWebhook" :disabled="!canSendTestWebhook" @click="testWebhook">娴嬭瘯 Webhook</el-button>
         </div>
 
         <div v-if="webhookTestResult" class="test-result" :class="webhookTestResult.success ? 'test-result--success' : 'test-result--warning'">
@@ -1588,18 +1769,18 @@ onBeforeUnmount(() => {
       </el-card>
 
       <el-card class="surface-card settings-card settings-grid__full" shadow="never">
-        <h3 class="section-title">邮件通知</h3>
+        <h3 class="section-title">閭欢閫氱煡</h3>
         <p class="section-subtitle">Configure SMTP plus HTML templates for live-started and exception alerts. Tests use the current unsaved form values directly.</p>
 
         <el-form label-position="top">
           <el-row :gutter="16">
             <el-col :span="6">
-              <el-form-item label="启用邮件通知">
+              <el-form-item label="鍚敤閭欢閫氱煡">
                 <el-switch v-model="form.enableEmailNotification" />
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="启用 SSL">
+              <el-form-item label="鍚敤 SSL">
                 <el-switch v-model="form.emailUseSsl" />
               </el-form-item>
             </el-col>
@@ -1609,7 +1790,7 @@ onBeforeUnmount(() => {
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="异常提醒">
+              <el-form-item label="寮傚父鎻愰啋">
                 <el-switch v-model="form.notifyOnException" />
               </el-form-item>
             </el-col>
@@ -1636,12 +1817,12 @@ onBeforeUnmount(() => {
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="SMTP 密码">
+              <el-form-item label="SMTP 瀵嗙爜">
                 <el-input v-model="form.emailPassword" type="password" show-password />
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="发件地址">
+              <el-form-item label="鍙戜欢鍦板潃">
                 <el-input v-model="form.emailFromAddress" placeholder="noreply@example.com" />
               </el-form-item>
             </el-col>
@@ -1652,7 +1833,7 @@ onBeforeUnmount(() => {
                   v-model="form.emailToAddresses"
                   type="textarea"
                   :rows="3"
-                  placeholder="多个地址可用逗号、分号或换行分隔"
+                  placeholder="澶氫釜鍦板潃鍙敤閫楀彿銆佸垎鍙锋垨鎹㈣鍒嗛殧"
                 />
               </el-form-item>
             </el-col>
@@ -1662,15 +1843,15 @@ onBeforeUnmount(() => {
                 <div class="template-section__header">
                   <div>
                     <h4 class="template-section__title">Live started template</h4>
-                    <p class="template-section__subtitle">Subject templates render plain text, while the body template supports HTML.</p>
+                    <p class="template-section__subtitle">Subject templates render plain text, while the body template supports HTML and can include event script output placeholders.</p>
                   </div>
                 </div>
 
-                <el-form-item label="主题模板">
+                <el-form-item label="涓婚妯℃澘">
                   <el-input v-model="form.emailLiveStartedSubjectTemplate" />
                 </el-form-item>
 
-                <el-form-item label="HTML 正文模板">
+                <el-form-item label="HTML 姝ｆ枃妯℃澘">
                   <el-input v-model="form.emailLiveStartedBodyTemplateHtml" type="textarea" :rows="10" />
                 </el-form-item>
               </div>
@@ -1680,16 +1861,16 @@ onBeforeUnmount(() => {
               <div class="template-section">
                 <div class="template-section__header">
                   <div>
-                    <h4 class="template-section__title">异常提醒模板</h4>
-                    <p class="template-section__subtitle">Exception emails inject source, summary, detail, and task context values into the HTML body.</p>
+                    <h4 class="template-section__title">寮傚父鎻愰啋妯℃澘</h4>
+                    <p class="template-section__subtitle">Exception emails inject source, summary, detail, task context values, and optional event script output into the HTML body.</p>
                   </div>
                 </div>
 
-                <el-form-item label="主题模板">
+                <el-form-item label="涓婚妯℃澘">
                   <el-input v-model="form.emailExceptionSubjectTemplate" />
                 </el-form-item>
 
-                <el-form-item label="HTML 正文模板">
+                <el-form-item label="HTML 姝ｆ枃妯℃澘">
                   <el-input v-model="form.emailExceptionBodyTemplateHtml" type="textarea" :rows="12" />
                 </el-form-item>
               </div>
@@ -1705,21 +1886,20 @@ onBeforeUnmount(() => {
         </div>
 
         <div class="helper-panel">
-          邮件模板里的 <code v-pre>{{detectedAtUtc}}</code> 和 <code v-pre>{{occurredAtUtc}}</code> 字段名保持不变，但实际渲染值已经统一改成北京时间（UTC+8）。
-        </div>
+          閭欢妯℃澘閲岀殑 <code v-pre>{{detectedAtUtc}}</code> 鍜?<code v-pre>{{occurredAtUtc}}</code> 瀛楁鍚嶄繚鎸佷笉鍙橈紝浣嗗疄闄呮覆鏌撳€煎凡缁忕粺涓€鏀规垚鍖椾含鏃堕棿锛圲TC+8锛夈€? <code v-pre>{{eventScriptOutput}}</code> 鍒欏搴旇剼鏈€氳繃鑷畾涔夋棩蹇楁枃浠惰緭鍑虹殑鏂囨湰鍐呭銆?        </div>
 
         <div class="action-strip">
           <div class="helper-text">Sending a test email does not save settings. The email renders both the live-started and exception template examples.</div>
-          <el-button :loading="testingEmail" :disabled="!canSendTestEmail" @click="sendTestEmail">测试邮件</el-button>
+          <el-button :loading="testingEmail" :disabled="!canSendTestEmail" @click="sendTestEmail">娴嬭瘯閭欢</el-button>
         </div>
       </el-card>
 
         </el-tab-pane>
         <el-tab-pane label="Security and platform" name="security">
 
-      <el-card class="surface-card settings-card settings-grid__full" shadow="never">
-        <h3 class="section-title">Administrator password</h3>
-        <p class="section-subtitle">Change the password of the currently signed-in account. The new password takes effect immediately.</p>
+      <el-card id="security" class="surface-card settings-card settings-grid__full" shadow="never">
+        <h3 class="section-title">账号安全</h3>
+        <p class="section-subtitle">复用现有修改密码逻辑，保存后立即对当前登录账户生效。</p>
 
         <el-form
           ref="pwdFormRef"
@@ -1731,10 +1911,10 @@ onBeforeUnmount(() => {
           <el-form-item label="当前密码" prop="currentPassword">
             <el-input v-model="pwdForm.currentPassword" type="password" show-password />
           </el-form-item>
-          <el-form-item label="New password" prop="newPassword">
+          <el-form-item label="新密码" prop="newPassword">
             <el-input v-model="pwdForm.newPassword" type="password" show-password />
           </el-form-item>
-          <el-form-item label="Confirm new password" prop="confirmPassword">
+          <el-form-item label="确认新密码" prop="confirmPassword">
             <el-input v-model="pwdForm.confirmPassword" type="password" show-password />
           </el-form-item>
           <el-button type="primary" :loading="changingPassword" @click="changePassword">修改密码</el-button>
@@ -1742,6 +1922,59 @@ onBeforeUnmount(() => {
       </el-card>
 
       <el-card class="surface-card settings-card settings-grid__full" shadow="never">
+        <h3 class="section-title">Platform request settings</h3>
+        <p class="section-subtitle">Configure independent proxy, User-Agent, Referer, and Cookie values for each platform.</p>
+
+        <div class="event-script-grid">
+          <div
+            v-for="platform in platformRequestPlatforms"
+            :key="platform.key"
+            class="event-script-section event-script-section--full"
+          >
+            <div class="event-script-section__header">
+              <div>
+                <h4 class="event-script-section__title">{{ platform.label }}</h4>
+                <p class="event-script-section__subtitle">
+                  These settings apply only to {{ platform.label }} status checks and stream requests.
+                </p>
+              </div>
+              <el-switch v-model="form.platformRequestSettings[platform.key].proxy.enabled" />
+            </div>
+
+            <el-form label-position="top">
+              <el-form-item label="Proxy URL">
+                <el-input
+                  v-model="form.platformRequestSettings[platform.key].proxy.proxyUrl"
+                  placeholder="http://127.0.0.1:7890"
+                />
+              </el-form-item>
+
+              <el-form-item label="User-Agent">
+                <el-input
+                  v-model="form.platformRequestSettings[platform.key].userAgent"
+                  type="textarea"
+                  :rows="2"
+                />
+              </el-form-item>
+
+              <el-form-item label="Referer">
+                <el-input v-model="form.platformRequestSettings[platform.key].referer" />
+              </el-form-item>
+
+              <el-form-item label="Cookie">
+                <el-input
+                  v-model="form.platformRequestSettings[platform.key].cookie"
+                  type="textarea"
+                  :rows="3"
+                  placeholder="Optional cookies for this platform only"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </el-card>
+
+      <el-card v-if="false" class="surface-card settings-card settings-grid__full" shadow="never">
         <h3 class="section-title">Douyin request headers</h3>
         <p class="section-subtitle">These disguise parameters are used for both Douyin API requests and ffmpeg stream input when troubleshooting stream access checks.</p>
 
@@ -1759,7 +1992,7 @@ onBeforeUnmount(() => {
               v-model="form.douyinCookie"
               type="textarea"
               :rows="4"
-              placeholder="可粘贴 ttwid、msToken 等 Cookie"
+              placeholder="鍙矘璐?ttwid銆乵sToken 绛?Cookie"
             />
           </el-form-item>
         </el-form>
@@ -1771,10 +2004,10 @@ onBeforeUnmount(() => {
     <div class="settings-savebar" :style="savebarStyle">
       <div class="settings-savebar__content">
         <div class="settings-savebar__copy">
-          <div class="settings-savebar__title">当前修改不会自动保存</div>
+          <div class="settings-savebar__title">褰撳墠淇敼涓嶄細鑷姩淇濆瓨</div>
           <div class="settings-savebar__subtitle">You can save the current settings from anywhere on this page.</div>
         </div>
-        <el-button type="primary" :loading="saving" @click="saveSettings">保存设置</el-button>
+        <el-button type="primary" :loading="saving" @click="saveSettings">淇濆瓨璁剧疆</el-button>
       </div>
     </div>
   </div>
@@ -1799,6 +2032,123 @@ onBeforeUnmount(() => {
   display: none;
 }
 
+.settings-overview-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.settings-overview-card :deep(.el-card__body) {
+  display: grid;
+  gap: 18px;
+}
+
+.settings-overview-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.settings-overview-card__eyebrow {
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.settings-profile {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.settings-profile__avatar {
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #2563eb 0%, #4338ca 100%);
+  color: #ffffff;
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.settings-profile__name {
+  color: var(--text-primary);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.settings-profile__meta {
+  margin-top: 4px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.settings-overview-list {
+  display: grid;
+  gap: 10px;
+}
+
+.settings-overview-list div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: var(--surface-muted);
+  border: 1px solid var(--border-subtle);
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.settings-overview-list span {
+  color: var(--text-muted);
+}
+
+.settings-overview-list strong {
+  color: var(--text-primary);
+}
+
+.settings-preferences {
+  display: grid;
+  gap: 14px;
+}
+
+.settings-preferences__row {
+  display: grid;
+  gap: 8px;
+}
+
+.settings-preferences__row > span,
+.settings-preferences__row strong {
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.settings-preferences__row--switch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid var(--border-subtle);
+  background: var(--surface-muted);
+}
+
+.settings-preferences__row--switch p {
+  margin: 6px 0 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.65;
+}
+
 .settings-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -2178,6 +2528,10 @@ onBeforeUnmount(() => {
 }
 
 @media (max-width: 960px) {
+  .settings-overview-grid {
+    grid-template-columns: 1fr;
+  }
+
   .event-script-grid {
     grid-template-columns: 1fr;
   }