From 7e5a6a3f396916a52dd5140edfae82d6877cee13 Mon Sep 17 00:00:00 2001
From: lizhuoran <625237490@qq.com>
Date: Thu, 7 May 2026 09:07:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8F=90=E9=86=92=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E6=8C=87=E5=BC=95=E9=A1=B5=E9=9D=A2=E7=AD=89=E5=BE=85=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/guide/manage-pages.blade.php    | 61 ++++++++++++++++++-
 .../ManageGuidePagesUploadReminderTest.php    | 45 ++++++++++++++
 2 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 tests/Feature/ManageGuidePagesUploadReminderTest.php

diff --git a/resources/views/filament/resources/guide/manage-pages.blade.php b/resources/views/filament/resources/guide/manage-pages.blade.php
index 73f1a68..f856ded 100644
--- a/resources/views/filament/resources/guide/manage-pages.blade.php
+++ b/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>
diff --git a/tests/Feature/ManageGuidePagesUploadReminderTest.php b/tests/Feature/ManageGuidePagesUploadReminderTest.php
new file mode 100644
index 0000000..cbebc2b
--- /dev/null
+++ b/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('图片未上传完成');
+    }
+}