Filament/Laravel：Action执行后打开新模态框展示生成邮件

要在Filament中实现「生成邮件后打开预览模态框」的需求，可以通过调用隐藏的预览Action来实现，以下是具体步骤和代码示例：

1. 定义两个Action：生成Action + 预览Action #

在你的Filament组件（如Resource或Livewire组件）的getActions()方法中，添加两个Action：一个用于收集用户输入并生成邮件，另一个用于展示生成结果（默认隐藏，仅通过代码触发）。

use Filament\Actions\Action;
use Filament\Support\Enums\Alignment;
use App\Services\EmailGenerationService;
use App\Enums\MailLanguages;
use App\Enums\MailTones;

public function getActions(): array
{
    return [
        // 生成邮件的主Action
        Action::make('writeEmail')
            ->form([
                TextInput::make('mail_subject')
                    ->label('邮件主题')
                    ->required(),
                Select::make('mail_language')
                    ->label('邮件语言')
                    ->enum(MailLanguages::class)
                    ->options(MailLanguages::class)
                    ->required(),
                Select::make('mail_tone')
                    ->label('邮件语气')
                    ->enum(MailTones::class)
                    ->options(MailTones::class)
                    ->required(),
            ])
            ->action(function (array $data) {
                // 生成邮件逻辑
                $prompt = "Subject: {$data['mail_subject']}. Language: {$data['mail_language']->value}. Tone: {$data['mail_tone']->value}";
                $service = new EmailGenerationService($prompt, 2000);
                $mail = [
                    'title' => $service->title,
                    'content' => $service->content,
                ];

                // 触发预览模态框，传递邮件数据
                $this->callAction('showMail', arguments: ['mail' => $mail]);
            })
            ->modalAlignment(Alignment::Center)
            ->closeModalByClickingAway(false),

        // 邮件预览Action（默认隐藏）
        Action::make('showMail')
            ->modalHeading('生成完成的邮件')
            ->modalContent(function (array $arguments) {
                $mail = $arguments['mail'];
                // 返回自定义预览视图
                return view('filament.components.mail-preview', compact('mail'));
            })
            ->modalAlignment(Alignment::Center)
            ->closeModalByClickingAway(false)
            ->hidden(), // 隐藏Action，仅通过代码调用
    ];
}

2. 创建邮件预览视图 #

在resources/views/filament/components/目录下创建mail-preview.blade.php文件，用于格式化展示邮件内容：

<div class="space-y-4 p-4">
    <div>
        <h3 class="text-lg font-semibold text-gray-800 mb-2">邮件标题</h3>
        <p class="p-3 bg-gray-50 rounded-md border border-gray-200">{{ $mail['title'] }}</p>
    </div>
    <div>
        <h3 class="text-lg font-semibold text-gray-800 mb-2">邮件内容</h3>
        <div class="p-3 bg-gray-50 rounded-md border border-gray-200 whitespace-pre-line">
            {{ $mail['content'] }}
        </div>
    </div>
</div>

实现逻辑说明 #

• showMail Action通过hidden()设置为默认隐藏，不会在页面上显示，仅通过callAction()方法触发。
• callAction()可以传递arguments参数，将生成的邮件数据传递给预览Action的modalContent闭包。
• 自定义视图使用whitespace-pre-line保留邮件内容的换行格式，提升可读性。

内容的提问来源于stack exchange，提问作者Dcemal