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

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>