# 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
  - **影片串流**: 折疊式展示（<details>標籤）
    - 提示文字："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. 新增輔助函數
```typescript
// 狀態顏色函數
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）