feat: Face Filter 自動保存（500ms 防抖 + 離開頁面自動保存）

src/components/FaceFilterPanel.vue

@@ -153,13 +153,9 @@
         </div>
         
         <div class="section-actions">
-          <button 
+          <div class="auto-save-hint">
-            class="action-btn action-btn-primary"
+            {{ singleFrameSettingsLoading ? '⏳ Saving...' : '✓ Auto-saved' }}
-            @click="applySingleFrameSettings"
+          </div>
-            :disabled="!singleFrameSettingsModified || singleFrameSettingsLoading"
-          >
-            {{ singleFrameSettingsLoading ? 'Applying...' : 'Apply Settings' }}
-          </button>
           <button 
             class="action-btn"
             @click="handleResetSingleFrame"
@@ -223,7 +219,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, watch, onBeforeUnmount } from 'vue';
 import { useFaceFilter, type QuickFilterRules } from '../composables/useFaceFilter';
 
 const props = defineProps<{
@@ -251,9 +247,9 @@ const {
   singleFrameSettingsError,
   singleFrameSettingsModified,
   loadSingleFrameSettings,
-  saveSingleFrameSettings,
   resetSingleFrameSettings,
-  markSingleFrameSettingsModified
+  markSingleFrameSettingsModified,
+  cleanupAutoSave
 } = useFaceFilter();
 
 const showPanel = ref(false);
@@ -279,14 +275,6 @@ function markModified() {
   markSingleFrameSettingsModified();
 }
 
-async function applySingleFrameSettings() {
-  if (!props.fileUuid) return;
-  const success = await saveSingleFrameSettings(props.fileUuid);
-  if (success) {
-    emit('settings-updated');
-  }
-}
-
 function handleResetSingleFrame() {
   resetSingleFrameSettings();
 }
@@ -303,6 +291,16 @@ watch(showPanel, (show) => {
   }
 });
 
+watch(singleFrameSettingsModified, (newVal, oldVal) => {
+  if (oldVal === true && newVal === false) {
+    emit('settings-updated');
+  }
+});
+
+onBeforeUnmount(() => {
+  cleanupAutoSave();
+});
+
 // Expose for parent
 defineExpose({
   showPanel,
@@ -560,7 +558,18 @@ defineExpose({
 
 .section-actions {
   display: flex;
+  align-items: center;
   gap: 10px;
   margin-top: 12px;
 }
+
+.auto-save-hint {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text-muted, #666);
+  padding: 6px 12px;
+  background: var(--bg-color, #f9f9f9);
+  border-radius: 4px;
+  border: 1px solid var(--border-color, #e0e0e0);
+}
 </style>

src/composables/useFaceFilter.ts

@@ -234,6 +234,9 @@ export function useFaceFilter() {
   const singleFrameSettingsError = ref<string | null>(null);
   const singleFrameSettingsModified = ref(false);
   
+  const currentFileUuid = ref<string | null>(null);
+  let autoSaveTimer: ReturnType<typeof setTimeout> | null = null;
+  
   // Computed stats
   const stats = computed(() => ({
     total: allFaces.value.length,
@@ -406,6 +409,7 @@ export function useFaceFilter() {
     singleFrameSettingsError.value = null;
     
     try {
+      currentFileUuid.value = fileUuid;
       const profile = await getFileProfile(fileUuid);
       singleFrameSettings.value = {
         single_frame_trace_vlm_enabled: profile.face_filter.single_frame_trace_vlm_enabled ?? true,
@@ -441,6 +445,29 @@ export function useFaceFilter() {
     }
   }
   
+  function autoSaveSettings() {
+    if (autoSaveTimer) {
+      clearTimeout(autoSaveTimer);
+    }
+    
+    autoSaveTimer = setTimeout(async () => {
+      if (currentFileUuid.value && singleFrameSettingsModified.value) {
+        const success = await saveSingleFrameSettings(currentFileUuid.value);
+        if (!success) {
+          console.error('Auto-save failed for single frame settings');
+        }
+      }
+      autoSaveTimer = null;
+    }, 500);
+  }
+  
+  function cleanupAutoSave() {
+    if (autoSaveTimer) {
+      clearTimeout(autoSaveTimer);
+      autoSaveTimer = null;
+    }
+  }
+  
   function resetSingleFrameSettings() {
     singleFrameSettings.value = {
       single_frame_trace_vlm_enabled: true,
@@ -449,10 +476,12 @@ export function useFaceFilter() {
       single_trace_group_filter_enabled: true,
     };
     singleFrameSettingsModified.value = true;
+    autoSaveSettings();
   }
   
   function markSingleFrameSettingsModified() {
     singleFrameSettingsModified.value = true;
+    autoSaveSettings();
   }
   
   return {
@@ -470,6 +499,7 @@ export function useFaceFilter() {
     singleFrameSettingsLoading,
     singleFrameSettingsError,
     singleFrameSettingsModified,
+    currentFileUuid,
     
     // Actions
     initialize,
@@ -484,6 +514,7 @@ export function useFaceFilter() {
     saveSingleFrameSettings,
     resetSingleFrameSettings,
     markSingleFrameSettingsModified,
+    cleanupAutoSave,
     
     // API helpers (exposed for direct use)
     fetchFaces,