From 5928bc9404cda565ee4f36cc64dd4dd16ca8f335 Mon Sep 17 00:00:00 2001
From: Momentry Studio <admin@momentry.local>
Date: Wed, 7 Oct 2026 23:27:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Face=20Filter=20=E8=87=AA=E5=8B=95?=
 =?UTF-8?q?=E4=BF=9D=E5=AD=98=EF=BC=88500ms=20=E9=98=B2=E6=8A=96=20+=20?=
 =?UTF-8?q?=E9=9B=A2=E9=96=8B=E9=A0=81=E9=9D=A2=E8=87=AA=E5=8B=95=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FaceFilterPanel.vue | 45 ++++++++++++++++++------------
 src/composables/useFaceFilter.ts   | 31 ++++++++++++++++++++
 2 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/src/components/FaceFilterPanel.vue b/src/components/FaceFilterPanel.vue
index 0bc7331..4eb45c2 100644
--- a/src/components/FaceFilterPanel.vue
+++ b/src/components/FaceFilterPanel.vue
@@ -153,13 +153,9 @@
         </div>
         
         <div class="section-actions">
-          <button 
-            class="action-btn action-btn-primary"
-            @click="applySingleFrameSettings"
-            :disabled="!singleFrameSettingsModified || singleFrameSettingsLoading"
-          >
-            {{ singleFrameSettingsLoading ? 'Applying...' : 'Apply Settings' }}
-          </button>
+          <div class="auto-save-hint">
+            {{ singleFrameSettingsLoading ? '⏳ Saving...' : '✓ Auto-saved' }}
+          </div>
           <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>
diff --git a/src/composables/useFaceFilter.ts b/src/composables/useFaceFilter.ts
index 4f98855..18f2eaf 100644
--- a/src/composables/useFaceFilter.ts
+++ b/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,