feat: redesign live recorder control console ui

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;