Add autosave feature (#3330)

Co-authored-by: Benjamin Lu <templu1107@proton.me>

src/components/graph/GraphCanvas.vue

@@ -59,6 +59,7 @@ import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
 import { usePaste } from '@/composables/usePaste'
+import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { i18n } from '@/i18n'
@@ -233,6 +234,7 @@ onMounted(async () => {
   useContextMenuTranslation()
   useCopy()
   usePaste()
+  useWorkflowAutoSave()
 
   comfyApp.vueAppReady = true
 

src/components/topbar/WorkflowTab.vue

@@ -7,15 +7,7 @@
       {{ workflowOption.workflow.filename }}
     </span>
     <div class="relative">
-      <span
-        class="status-indicator"
-        v-if="
-          !workspaceStore.shiftDown &&
-          (workflowOption.workflow.isModified ||
-            !workflowOption.workflow.isPersisted)
-        "
-        >•</span
-      >
+      <span class="status-indicator" v-if="shouldShowStatusIndicator">•</span>
       <Button
         class="close-button p-0 w-auto"
         icon="pi pi-times"
@@ -30,7 +22,7 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import {
@@ -38,6 +30,7 @@ import {
   usePragmaticDroppable
 } from '@/composables/usePragmaticDragAndDrop'
 import { useWorkflowService } from '@/services/workflowService'
+import { useSettingStore } from '@/stores/settingStore'
 import { ComfyWorkflow } from '@/stores/workflowStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -56,8 +49,32 @@ const { t } = useI18n()
 
 const workspaceStore = useWorkspaceStore()
 const workflowStore = useWorkflowStore()
+const settingStore = useSettingStore()
 const workflowTabRef = ref<HTMLElement | null>(null)
 
+// Use computed refs to cache autosave settings
+const autoSaveSetting = computed(() =>
+  settingStore.get('Comfy.Workflow.AutoSave')
+)
+const autoSaveDelay = computed(() =>
+  settingStore.get('Comfy.Workflow.AutoSaveDelay')
+)
+
+const shouldShowStatusIndicator = computed(() => {
+  // Return true if:
+  // 1. The shift key is not pressed (hence no override).
+  // 2. The workflow is either modified or not yet persisted.
+  // 3. AutoSave is either turned off, or set to 'after delay'
+  //    with a delay longer than 3000ms.
+  return (
+    !workspaceStore.shiftDown &&
+    (props.workflowOption.workflow.isModified ||
+      !props.workflowOption.workflow.isPersisted) &&
+    (autoSaveSetting.value === 'off' ||
+      (autoSaveSetting.value === 'after delay' && autoSaveDelay.value > 3000))
+  )
+})
+
 const closeWorkflows = async (options: WorkflowOption[]) => {
   for (const opt of options) {
     if (