如何在Laravel Filament中单独复制多套件的对应URL

问题分析 #

你当前用单个TextEntry展示所有套件的URL，但copyable方法只能返回固定的第一个套件URL，无法实现每个URL单独复制的需求。

解决方案 #

为每个套件生成独立条目，给每个URL添加单独的复制按钮，通过原生JS实现点击复制对应URL的功能。修改后的代码如下：

public static function infolist(Infolist $infolist): Infolist
{
    return $infolist
        ->schema([
            Components\Section::make()
                ->schema([
                    Components\Split::make([
                        Components\Grid::make()
                            ->schema([
                                Components\TextEntry::make('vendor.name'),
                                Components\TextEntry::make('kit_ids')->label('Kits Name & URL')
                                    ->formatStateUsing(function (KitAllocation $kitAllocation) {
                                        $kits = Kit::whereIn('id', $kitAllocation->kit_ids)->get();
                                        $output = '';
                                        $baseUrl = env('APP_URL');
                                        $vendorSlug = $kitAllocation->vendor->slug;

                                        foreach ($kits as $kit) {
                                            $url = "{$baseUrl}/{$vendorSlug}/{$kit->slug}";
                                            // 生成带复制按钮的条目，匹配Filament UI风格
                                            $output .= <<<HTML
                                                <div class="flex items-center justify-between mb-2">
                                                    <span><strong>{$kit->kit_name}</strong> -> {$url}</span>
                                                    <button 
                                                        onclick="navigator.clipboard.writeText('{$url}'); Filament.notify('success', 'URL已复制');"
                                                        class="filament-button filament-button-size-xs inline-flex items-center justify-center py-1 px-3 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition"
                                                    >
                                                        复制
                                                    </button>
                                                </div>
                                            HTML;
                                        }

                                        return $output;
                                    })
                                    ->html(),
                            ]),
                    ])->from('lg'),
                ]),
        ]);
}

关键改进点 #

• 移除原copyable方法，改为给每个URL单独配置复制按钮
• 用navigator.clipboard.writeText实现原生复制，搭配Filament内置的Filament.notify展示成功提示
• 用Flex布局让内容和按钮排列更规整，贴合Filament的UI设计
• 优化URL拼接逻辑，提升代码可读性

额外优化建议 #

在KitAllocation模型中定义关联方法，避免直接在Infolist中查询数据库，同时支持预加载优化性能：

// KitAllocation.php
public function kits()
{
    return $this->belongsToMany(Kit::class);
}

之后在Infolist中直接使用$kitAllocation->kits即可获取关联数据。

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