lizhuoran/KnowledgeBase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix guide flow editor layout sizing

Browse Source
This commit is contained in:
李卓然
2026-04-20 14:09:25 +08:00
parent 0b35e54fe1
commit 1f9ee979f1
2 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/Filament/Resources/GuideResource/Pages/ManageGuidePages.php
View File

@@ -18,6 +18,8 @@ class ManageGuidePages extends Page
protected static string $view = 'filament.resources.guide.manage-pages'; protected static string $view = 'filament.resources.guide.manage-pages';
protected ?string $maxContentWidth = 'full';
public array $nodes = []; public array $nodes = [];
public array $edges = []; public array $edges = [];

26
resources/views/filament/resources/guide/manage-pages.blade.php
View File

@@ -2,14 +2,14 @@
<link rel="stylesheet" href="{{ asset('vendor/drawflow/drawflow.min.css') }}"> <link rel="stylesheet" href="{{ asset('vendor/drawflow/drawflow.min.css') }}">
<script src="{{ asset('vendor/drawflow/drawflow.min.js') }}"></script> <script src="{{ asset('vendor/drawflow/drawflow.min.js') }}"></script>
<div class="space-y-4"> <div class="guide-flow-page space-y-4">
{{-- Header actions --}} {{-- Header actions --}}
<div class="flex gap-2"> <div class="flex gap-2">
{{ $this->createPageAction }} {{ $this->createPageAction }}
</div> </div>
{{-- Drawflow canvas --}} {{-- Drawflow canvas --}}
<div class="fi-section rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 overflow-hidden"> <div class="guide-flow-canvas fi-section rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 overflow-hidden">
<div id="drawflow" wire:ignore></div> <div id="drawflow" wire:ignore></div>
</div> </div>
</div> </div>
@@ -17,14 +17,34 @@
<x-filament-actions::modals /> <x-filament-actions::modals />
<style> <style>
.guide-flow-page {
width: 100%;
}
.guide-flow-canvas {
width: 100%;
}
#drawflow { #drawflow {
width: 100%; width: 100%;
height: 600px; height: max(680px, calc(100vh - 14rem));
background-color: #f8fafc; background-color: #f8fafc;
background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px); background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px);
background-size: 20px 20px; background-size: 20px 20px;
} }
@media (max-width: 1024px) {
#drawflow {
height: max(560px, calc(100vh - 16rem));
}
}
@media (max-width: 640px) {
#drawflow {
height: max(480px, 70vh);
}
}
/* Node styling */ /* Node styling */
.drawflow .drawflow-node { .drawflow .drawflow-node {
border-radius: 12px; border-radius: 12px;