90 lines
2.6 KiB
Markdown
90 lines
2.6 KiB
Markdown
# 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）
|
||
|