admin/momentry_core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add media type and indexed status filters to FilesView

Browse Source 
Frontend:
- Add media type filter (全部/影片/照片)
- Add indexed status filter (未入庫/已入庫)
- Show media type column with icons
- Fix status filter to handle indexed/unindexed correctly
- Determine media type from file extension

Backend:
- Add total_chunks field to FileItem API response
- Query chunk counts efficiently in batch with IN clause
- Frontend uses total_chunks to determine is_indexed status
This commit is contained in:
Accusys
2026-07-04 22:41:51 +08:00
parent 96e13e40cb
commit 7fc4dcbddb
2 changed files with 153 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
portal/src/views/FilesView.vue
View File

@@ -3,7 +3,31 @@
<!-- Header with Search and Filters -->
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<h2 class="text-2xl font-bold">檔案管理 (Demo)</h2>
<div class="flex items-center gap-3 w-full md:w-auto">
<div class="flex flex-wrap items-center gap-3 w-full md:w-auto">
<!-- Media Type Filter -->
<div class="flex items-center bg-gray-700 rounded p-1">
<button
@click="setMediaType('all')"
:class="{'bg-blue-600 text-white': mediaType === 'all', 'text-gray-300 hover:text-white': mediaType !== 'all'}"
class="px-3 py-1 rounded text-sm transition"
>
全部
</button>
<button
@click="setMediaType('video')"
:class="{'bg-blue-600 text-white': mediaType === 'video', 'text-gray-300 hover:text-white': mediaType !== 'video'}"
class="px-3 py-1 rounded text-sm transition"
>
影片
</button>
<button
@click="setMediaType('photo')"
:class="{'bg-blue-600 text-white': mediaType === 'photo', 'text-gray-300 hover:text-white': mediaType !== 'photo'}"
class="px-3 py-1 rounded text-sm transition"
>
照片
</button>
</div>
<!-- Status Filter -->
<div class="flex items-center bg-gray-700 rounded p-1">
<button
@@ -41,6 +65,20 @@
>
已完成
</button>
<button
@click="setStatusFilter('unindexed')"
:class="{'bg-blue-600 text-white': statusFilter === 'unindexed', 'text-gray-300 hover:text-white': statusFilter !== 'unindexed'}"
class="px-3 py-1 rounded text-sm transition"
>
未入庫
</button>
<button
@click="setStatusFilter('indexed')"
:class="{'bg-blue-600 text-white': statusFilter === 'indexed', 'text-gray-300 hover:text-white': statusFilter !== 'indexed'}"
class="px-3 py-1 rounded text-sm transition"
>
已入庫
</button>
</div>
<!-- Search input -->
<input
@@ -68,6 +106,7 @@
<thead class="bg-gray-900">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">檔案名稱</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">類型</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">狀態</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">UUID</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">操作</th>
@@ -81,7 +120,21 @@
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span v-if="file.status === 'completed'" class="px-2 py-0.5 rounded text-xs bg-green-900 text-green-200">
<span v-if="file.media_type === 'video'" class="px-2 py-0.5 rounded text-xs bg-blue-900 text-blue-200">
🎬 影片
</span>
<span v-else class="px-2 py-0.5 rounded text-xs bg-green-900 text-green-200">
📷 照片
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span v-if="file.status === 'completed' && file.is_indexed" class="px-2 py-0.5 rounded text-xs bg-green-900 text-green-200">
✅ 已入庫
</span>
<span v-else-if="file.status === 'completed' && !file.is_indexed" class="px-2 py-0.5 rounded text-xs bg-yellow-900 text-yellow-200">
⏳ 未入庫
</span>
<span v-else-if="file.status === 'completed'" class="px-2 py-0.5 rounded text-xs bg-green-900 text-green-200">
✅ 已完成
</span>
<span v-else-if="file.status === 'processing'" class="px-2 py-0.5 rounded text-xs bg-yellow-900 text-yellow-200">
@@ -148,16 +201,32 @@ import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { registerVideo, unregisterVideo, httpFetch, getCurrentConfig } from '@/api/client'
const VIDEO_EXTENSIONS = ['mp4', 'mov', 'mkv', 'avi', 'webm', 'wmv', 'flv', 'm4v']
const PHOTO_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'tiff', 'tif']
const router = useRouter()
const files = ref<any[]>([])
const loading = ref(false)
const error = ref<string | null>(null)
const searchQuery = ref('')
const statusFilter = ref('all') // all, unregistered, pending, processing, completed
const statusFilter = ref('all')
const mediaType = ref('all')
function getMediaType(fileName: string): 'video' | 'photo' {
const ext = fileName.split('.').pop()?.toLowerCase() || ''
if (VIDEO_EXTENSIONS.includes(ext)) return 'video'
if (PHOTO_EXTENSIONS.includes(ext)) return 'photo'
return 'video'
}
const displayFiles = computed(() => {
let result = files.value
// Filter by media type
if (mediaType.value !== 'all') {
result = result.filter(f => f.media_type === mediaType.value)
}
// Filter by search
if (searchQuery.value) {
const q = searchQuery.value.toLowerCase()
@@ -169,7 +238,13 @@ const displayFiles = computed(() => {
// Filter by status
if (statusFilter.value !== 'all') {
result = result.filter(f => f.status === statusFilter.value)
if (statusFilter.value === 'indexed') {
result = result.filter(f => f.status === 'completed' && f.is_indexed)
} else if (statusFilter.value === 'unindexed') {
result = result.filter(f => f.status === 'completed' && !f.is_indexed)
} else {
result = result.filter(f => f.status === statusFilter.value)
}
}
return result
@@ -179,24 +254,38 @@ function setStatusFilter(status: string) {
statusFilter.value = status
}
function setMediaType(type: string) {
mediaType.value = type
}
async function fetchFiles() {
loading.value = true
try {
const config = getCurrentConfig()
const scanResp = await httpFetch<any>(`${config.api_base_url}/api/v1/files/scan`)
const scanFiles: any[] = (scanResp?.files || []).map((f: any) => ({
...f,
status: f.is_registered ? 'registered_scan' : 'unregistered'
}))
const scanFiles: any[] = (scanResp?.files || []).map((f: any) => {
const mediaType = getMediaType(f.file_name)
return {
...f,
media_type: mediaType,
status: f.is_registered ? 'registered_scan' : 'unregistered',
is_indexed: false
}
})
// Get registered files with real processing status
let regFiles: any[] = []
try {
const regResp = await httpFetch<any>(`${config.api_base_url}/api/v1/files?page=1&page_size=100`)
regFiles = (regResp?.files || regResp?.data || []).map((f: any) => ({
...f,
status: f.status || 'pending'
}))
regFiles = (regResp?.files || regResp?.data || []).map((f: any) => {
const mediaType = getMediaType(f.file_name)
return {
...f,
media_type: mediaType,
status: f.status || 'pending',
is_indexed: f.total_chunks > 0 || false
}
})
} catch {
// Registered files API may not be available; use scan data only
}
@@ -207,7 +296,16 @@ async function fetchFiles() {
merged.set(f.file_path, f)
}
for (const f of regFiles) {
merged.set(f.file_path, f)
// Preserve media_type from scan if not set in regFiles
const existing = merged.get(f.file_path)
if (existing) {
merged.set(f.file_path, {
...f,
media_type: f.media_type || existing.media_type
})
} else {
merged.set(f.file_path, f)
}
}
files.value = Array.from(merged.values())