fix: - 引导流程改为从左至右显示 - 添加复制指引功能 - 流程图节点去掉 URL 显示，缩小节点尺寸 - 连线添加箭头方向指示，缩短节点间距 - 重构 graphUpdated 事件监听，修复添加/编辑页面后不实时更新的问题 - 预览页面隐藏图片附件文件名

app/Filament/Resources/GuideResource/Pages/ManageGuidePages.php

@@ -91,20 +91,21 @@ class ManageGuidePages extends Page
         }
         ksort($levelGroups);
 
-        // Compute positions: center each level horizontally, stack vertically
-        $nodeWidth = 240;
-        $gapX = 40;
-        $gapY = 150;
+        // Compute positions: center each level vertically, stack horizontally (left-to-right)
+        $nodeWidth  = 180;  // matches CSS max-width
+        $nodeHeight = 80;   // compact node height
+        $gapX = 110;        // horizontal gap between levels
+        $gapY = 30;         // vertical gap within same level
         $positions = [];
 
         foreach ($levelGroups as $level => $ids) {
             $count = count($ids);
-            $totalWidth = $count * $nodeWidth + ($count - 1) * $gapX;
-            $startX = max(20, (800 - $totalWidth) / 2);
+            $totalHeight = $count * $nodeHeight + ($count - 1) * $gapY;
+            $startY = max(20, (600 - $totalHeight) / 2);
             foreach ($ids as $i => $id) {
                 $positions[$id] = [
-                    'x' => (int) ($startX + $i * ($nodeWidth + $gapX)),
-                    'y' => 40 + $level * $gapY,
+                    'x' => 40 + $level * ($nodeWidth + $gapX),
+                    'y' => (int) ($startY + $i * ($nodeHeight + $gapY)),
                 ];
             }
         }
@@ -129,6 +130,11 @@ class ManageGuidePages extends Page
 
     // -- Livewire methods called by Drawflow events --
 
+    private function dispatchGraphUpdated(): void
+    {
+        $this->dispatch('graphUpdated', nodes: $this->nodes, edges: $this->edges);
+    }
+
     public function addEdge(int $fromPageId, int $toPageId, string $outputClass = 'output_1'): void
     {
         $guide = $this->getRecord();
@@ -170,7 +176,7 @@ class ManageGuidePages extends Page
         ]);
 
         $this->loadGraph();
-        $this->dispatch('graphUpdated');
+        $this->dispatchGraphUpdated();
     }
 
     public function removeEdge(int $fromPageId, int $toPageId): void
@@ -181,7 +187,7 @@ class ManageGuidePages extends Page
             ->delete();
 
         $this->loadGraph();
-        $this->dispatch('graphUpdated');
+        $this->dispatchGraphUpdated();
     }
 
     // -- Filament Actions --
@@ -196,7 +202,7 @@ class ManageGuidePages extends Page
                 $this->getRecord()->pages()->create($data);
 
                 $this->loadGraph();
-                $this->dispatch('graphUpdated');
+                $this->dispatchGraphUpdated();
             });
     }
 
@@ -219,7 +225,7 @@ class ManageGuidePages extends Page
                 $page->update($data);
 
                 $this->loadGraph();
-                $this->dispatch('graphUpdated');
+                $this->dispatchGraphUpdated();
             });
     }
 
@@ -235,7 +241,7 @@ class ManageGuidePages extends Page
                 $page->delete();
 
                 $this->loadGraph();
-                $this->dispatch('graphUpdated');
+                $this->dispatchGraphUpdated();
             });
     }
 
@@ -251,7 +257,7 @@ class ManageGuidePages extends Page
                 $edge->delete();
 
                 $this->loadGraph();
-                $this->dispatch('graphUpdated');
+                $this->dispatchGraphUpdated();
             });
     }