fix: 提醒流程指引页面等待图片上传完成

resources/views/filament/resources/guide/manage-pages.blade.php

@@ -2,7 +2,7 @@
     <link rel="stylesheet" href="{{ asset('vendor/drawflow/drawflow.min.css') }}">
     <script src="{{ asset('vendor/drawflow/drawflow.min.js') }}"></script>
 
-    <div class="guide-flow-page space-y-4">
+    <div class="guide-flow-page space-y-4" data-guide-flow-component-id="{{ $this->getId() }}">
         {{-- Header actions --}}
         <div class="flex gap-2">
             {{ $this->createPageAction }}
@@ -195,6 +195,7 @@
     <script>
     (function () {
         const componentId = @js($this->getId());
+        const pendingImageSelector = 'figure[data-trix-attachment][data-trix-serialize="false"][data-trix-content-type^="image/"]';
 
         function escHtml(str) {
             return String(str)
@@ -202,6 +203,58 @@
                 .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
         }
 
+        function getGuideFlowComponentId() {
+            return document.querySelector('.guide-flow-page[data-guide-flow-component-id]')?.dataset.guideFlowComponentId ?? null;
+        }
+
+        function hasPendingImageUploads(form) {
+            if (!form?.querySelector('.fi-fo-rich-editor')) {
+                return false;
+            }
+
+            return form.querySelector(pendingImageSelector) !== null;
+        }
+
+        function notifyPendingImageUploads() {
+            if (typeof window.FilamentNotification !== 'function') {
+                window.alert('图片仍在上传，请等待上传完成后再保存。');
+                return;
+            }
+
+            new window.FilamentNotification()
+                .title('图片未上传完成')
+                .body('请等待图片上传完成后再保存。')
+                .warning()
+                .send();
+        }
+
+        function registerUploadReminder() {
+            if (window.__guideFlowUploadReminderRegistered) {
+                return;
+            }
+
+            window.__guideFlowUploadReminderRegistered = true;
+
+            document.addEventListener('submit', (event) => {
+                const form = event.target;
+                const activeComponentId = getGuideFlowComponentId();
+
+                if (!(form instanceof HTMLFormElement) || !activeComponentId) {
+                    return;
+                }
+
+                const actionModal = form.querySelector(`[data-fi-modal-id="${activeComponentId}-action"]`);
+
+                if (!actionModal || !hasPendingImageUploads(form)) {
+                    return;
+                }
+
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                notifyPendingImageUploads();
+            }, true);
+        }
+
         function ensureArrowMarker() {
             if (document.getElementById('df-arrow-defs')) return;
             const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -413,12 +466,16 @@
 
         document.addEventListener('DOMContentLoaded', () => {
             setTimeout(() => {
+                registerUploadReminder();
                 registerLivewireListener();
                 init();
             }, 50);
         });
         document.addEventListener('livewire:navigated', () => {
-            setTimeout(init, 50);
+            setTimeout(() => {
+                registerUploadReminder();
+                init();
+            }, 50);
         });
     })();
     </script>