momentry_portal/VIDEO_DETAIL_UPDATE.md

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)

測試建議

1. 啟動 portal dev server: cd portal && npm run dev
2. 確保 API server 在 port 3003
3. 登入 portal
4. 進入 "/files" 頁面
5. 點擊任意影片查看詳情

API 端點需求

• /api/v1/videos?uuid={uuid} - 返回 video 物件（包含 processing_status）
• /api/v1/videos/{uuid}/faces - 返回 face clusters

未來改進建議

1. 添加 chunk 搜尋功能（在詳情頁搜尋該影片的 chunks）
2. 添加 processing_status 更新按鈕（重新載入狀態）
3. 添加處理器重新執行功能
4. 添加時間軸視覺化（timeline visualization）