b54c2def30
- Add database migrations (006-028) for face recognition, identity, file_uuid - Add test scripts for ASR, face, search, processing - Add portal frontend (Tauri) - Add config, benchmark, and monitoring utilities - Add model checkpoints and pretrained model references
2.6 KiB
2.6 KiB
VideoDetailView.vue 更新摘要
更新日期
2026-04-27
更新內容
1. 跳回按鈕優化
- 原版: 純文字按鈕，樣式簡單
- 新版:
- 使用 Tailwind CSS 樣式化按鈕
bg-gray-800 hover:bg-gray-700 rounded-lg transition- 清晰的文字："返回納管檔案列表"
- 位於頁面左側，標題位於右側
2. Probe 消息展示優化
- 原版: 直接展示所有信息
- 新版:
- 基本信息 Grid: Duration, Resolution, Frame Rate, Codec
- 影片串流: 折疊式展示（標籤）
- 提示文字："click to expand"
- 最大高度限制：
max-h-64
- 音訊串流: 折疊式展示
- 顯示數量標記："音訊串流 (N)"
- 每個串流獨立折疊
- 完整 Probe JSON:
- 折疊式展示
- 藍色標記："詳細"
- 最大高度限制：
max-h-96
3. 新增 Status / Processing Status 展示
-
狀態區塊: 新增獨立的"處理狀態"區塊
- UUID (truncate)
- Status (帶顏色標籤)
- completed: 綠色
- processing: 藍色
- pending: 灰色
- failed: 紅色
- 註冊時間
-
Processing Status Details:
- 階段 (Phase): PROCESSING / COMPLETED 等
- 處理器列表: active_processors (藍色標籤)
- 進度條:
- 每個處理器獨立進度條
- 動態顏色（根據status）
- 顯示百分比和帧數
- Agent 狀態:
- 顯示各Agent狀態（five_w1h, identity等）
- 進度百分比和完成數量
4. 新增輔助函數
// 狀態顏色函數
getStatusColor(status: string): string
getProgressColor(status: string): string
getAgentStatusColor(status: string): string
// Processing Status解析
if (typeof v.processing_status === 'string') {
video.value.processing_status = JSON.parse(v.processing_status)
}
檔案大小
- 原版: 227 行
- 新版: 371 行（增加 144 行）
編譯結果
✅ npm run build 成功
- VideoDetailView-CP9GNQZ0.js: 10.56 kB (gzip: 3.46 kB)
測試建議
- 啟動 portal dev server:
cd portal && npm run dev - 確保 API server 在 port 3003
- 登入 portal
- 進入 "/files" 頁面
- 點擊任意影片查看詳情
API 端點需求
/api/v1/videos?uuid={uuid}- 返回 video 物件（包含 processing_status）/api/v1/videos/{uuid}/faces- 返回 face clusters
未來改進建議
- 添加 chunk 搜尋功能（在詳情頁搜尋該影片的 chunks）
- 添加 processing_status 更新按鈕（重新載入狀態）
- 添加處理器重新執行功能
- 添加時間軸視覺化（timeline visualization）