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>

tests/Feature/ManageGuidePagesUploadReminderTest.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace Tests\Feature;
+
+use App\Filament\Resources\GuideResource;
+use App\Models\Guide;
+use App\Models\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use PHPUnit\Framework\Attributes\Test;
+use Spatie\Permission\Models\Permission;
+use Tests\TestCase;
+
+class ManageGuidePagesUploadReminderTest extends TestCase
+{
+    use RefreshDatabase;
+
+    #[Test]
+    public function it_renders_the_pending_image_upload_save_reminder_on_manage_guide_pages(): void
+    {
+        config(['app.env' => 'local']);
+
+        $user = User::factory()->create();
+
+        Permission::findOrCreate('guide.view', 'web');
+        Permission::findOrCreate('guide.update', 'web');
+        $user->givePermissionTo(['guide.view', 'guide.update']);
+
+        $guide = Guide::create([
+            'name' => '测试指引',
+            'category' => 'operation',
+            'status' => 'draft',
+            'created_by' => $user->id,
+        ]);
+
+        $response = $this
+            ->actingAs($user)
+            ->get(GuideResource::getUrl('manage-pages', ['record' => $guide]));
+
+        $response->assertOk();
+        $response->assertSee('data-guide-flow-component-id="', false);
+        $response->assertSee('hasPendingImageUploads', false);
+        $response->assertSee('图片仍在上传，请等待上传完成后再保存。');
+        $response->assertSee('图片未上传完成');
+    }
+}