feat: add media type and indexed status filters to FilesView

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

portal/src/views/FilesView.vue

@@ -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) => ({
+    const scanFiles: any[] = (scanResp?.files || []).map((f: any) => {
-      ...f,
+      const mediaType = getMediaType(f.file_name)
-      status: f.is_registered ? 'registered_scan' : 'unregistered'
+      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) => ({
+      regFiles = (regResp?.files || regResp?.data || []).map((f: any) => {
-        ...f,
+        const mediaType = getMediaType(f.file_name)
-        status: f.status || 'pending'
+        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())

src/api/identity_api.rs

@@ -96,11 +96,21 @@ async fn list_files(
             .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
         let data = if let Some(v) = video {
+            let chunk_count: i64 = sqlx::query_scalar(&format!(
+                "SELECT COUNT(*) FROM {} WHERE file_uuid = $1",
+                crate::core::db::schema::table_name("chunk")
+            ))
+            .bind(&v.file_uuid)
+            .fetch_one(state.db.pool())
+            .await
+            .unwrap_or(0);
+
             vec![FileItem {
                 file_uuid: v.file_uuid,
                 file_name: v.file_name,
                 file_path: v.file_path,
                 status: v.status.as_str().to_string(),
+                total_chunks: chunk_count,
             }]
         } else {
             vec![]
@@ -124,18 +134,45 @@ async fn list_files(
         .await
         .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
-    let data = records
+    let total = records.1;
+
+    let mut data: Vec<FileItem> = records
         .0
         .into_iter()
         .map(|r| FileItem {
-            file_uuid: r.file_uuid,
+            file_uuid: r.file_uuid.clone(),
             file_name: r.file_name,
             file_path: r.file_path,
             status: r.status.as_str().to_string(),
+            total_chunks: 0,
         })
         .collect();
 
-    let total = records.1;
+    // Fetch chunk counts for all files in one query
+    let uuids: Vec<String> = data.iter().map(|f| f.file_uuid.clone()).collect();
+    if !uuids.is_empty() {
+        let chunk_table = crate::core::db::schema::table_name("chunk");
+        let placeholders: Vec<String> = (1..=uuids.len()).map(|i| format!("${}", i)).collect();
+        let query_str = format!(
+            "SELECT file_uuid, COUNT(*) as cnt FROM {} WHERE file_uuid IN ({}) GROUP BY file_uuid",
+            chunk_table,
+            placeholders.join(", ")
+        );
+
+        let chunk_counts: Vec<(String, i64)> = sqlx::query_as(&query_str)
+            .fetch_all(state.db.pool())
+            .await
+            .unwrap_or_default();
+
+        let count_map: std::collections::HashMap<String, i64> =
+            chunk_counts.into_iter().collect();
+
+        for item in &mut data {
+            if let Some(cnt) = count_map.get(&item.file_uuid) {
+                item.total_chunks = *cnt;
+            }
+        }
+    }
 
     Ok(Json(FilesResponse {
         success: true,
@@ -161,6 +198,8 @@ pub struct FileItem {
     pub file_name: String,
     pub file_path: String,
     pub status: String,
+    #[serde(default)]
+    pub total_chunks: i64,
 }
 
 #[derive(Debug, Serialize)]