Files
laralog/resources/views/filament/pages/plugins.blade.php
T
ak 4ff1848816 style: 插件卡片视觉层级重构(标题/元信息/描述/操作区分)
- 已安装插件卡片:图标块 + 标题 + vendor/版本元信息 + 状态徽章同一行(清晰层级),描述独立文本块,操作区与内容用分隔线隔开
- 插件市场卡片统一同款风格;全部关键布局用内联样式保证渲染稳定
2026-08-12 04:04:13 +08:00

124 lines
8.2 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<x-filament-panels::page>
<x-filament::section heading="已安装插件">
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem">
@forelse($this->plugins as $plugin)
<x-filament::section :compact="true" style="padding:0">
<div style="display:flex;flex-direction:column;height:100%">
{{-- 头部:图标 + 标题 + 元信息 + 状态 --}}
<div style="display:flex;align-items:flex-start;gap:12px;padding:16px 16px 0">
<div style="display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:rgba(37,99,235,.1);flex-shrink:0">
<x-filament::icon icon="heroicon-o-puzzle-piece" class="h-5 w-5 text-primary-600" />
</div>
<div style="flex:1;min-width:0">
<h3 style="font-size:15px;font-weight:600;line-height:1.35;margin:0;color:inherit">{{ $plugin['title'] }}</h3>
<p style="font-size:12px;color:#6b7280;margin:3px 0 0">{{ $plugin['vendor'] }}.{{ $plugin['name'] }} · v{{ $plugin['version'] }}</p>
</div>
<div style="flex-shrink:0">
@if($plugin['enabled'])
<x-filament::badge color="success">已启用</x-filament::badge>
@else
<x-filament::badge color="gray">已停用</x-filament::badge>
@endif
</div>
</div>
{{-- 描述 --}}
<p style="flex:1;font-size:13px;color:#6b7280;line-height:1.6;margin:12px 16px 0;padding:0">{{ $plugin['description'] }}</p>
@if(! empty($plugin['usage']))
<details style="margin:10px 16px 0">
<summary style="cursor:pointer;font-size:12px;color:#2563eb;list-style:none">使用说明</summary>
<div style="margin-top:6px;white-space:pre-wrap;font-size:12px;color:#6b7280;line-height:1.6">{{ $plugin['usage'] }}</div>
</details>
@endif
{{-- 依赖状态 --}}
@if(! empty($plugin['dependencies']))
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:10px 16px 0">
<span style="font-size:12px;color:#9ca3af">依赖:</span>
@foreach($plugin['dependencies'] as $dep)
<x-filament::badge :color="$dep['ok'] ? 'success' : 'danger'" size="xs">
{{ $dep['title'] }}@if(! $dep['ok']){{ $dep['reason'] }}@endif
</x-filament::badge>
@endforeach
</div>
@endif
{{-- 操作区 --}}
<div style="display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 16px;margin-top:14px;border-top:1px solid rgba(128,128,128,.15)">
@if($plugin['enabled'])
<x-filament::button size="sm" color="gray" wire:click="disablePlugin('{{ $plugin['key'] }}')">停用</x-filament::button>
@elseif(empty($plugin['dependency_errors']))
<x-filament::button size="sm" color="success" wire:click="enablePlugin('{{ $plugin['key'] }}')">启用</x-filament::button>
@else
<x-filament::badge color="warning">依赖未满足,无法启用</x-filament::badge>
@endif
@if(! in_array($plugin['key'], config('plugins.enabled', []), true))
<x-filament::button size="sm" color="danger" wire:click="uninstallPlugin('{{ $plugin['key'] }}')" wire:confirm="确定卸载该插件?">卸载</x-filament::button>
@endif
</div>
</div>
</x-filament::section>
@empty
<p style="font-size:14px;color:#6b7280">暂无插件</p>
@endforelse
</div>
</x-filament::section>
<x-filament::section heading="安装插件(ZIP">
<form wire:submit="uploadZip" class="flex items-end gap-3">
<div class="flex-1">
<x-filament::input.wrapper>
<x-filament::input type="file" wire:model="zip" accept=".zip" />
</x-filament::input.wrapper>
@error('zip') <p class="mt-1 text-sm text-danger-600">{{ $message }}</p> @enderror
</div>
<x-filament::button type="submit" color="primary">安装</x-filament::button>
</form>
</x-filament::section>
<x-filament::section heading="插件市场" :description="config('market.url') ?: '未配置远程市场(config/market.php 的 MARKET_URL),仅支持本地 ZIP 安装'">
<div class="mb-4">
<x-filament::button color="gray" wire:click="loadMarket">刷新市场</x-filament::button>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem">
@forelse($marketItems as $index => $item)
@php $marketPaid = $item['price'] > 0; @endphp
<x-filament::section :compact="true" style="padding:0">
<div style="display:flex;flex-direction:column;height:100%">
<div style="display:flex;align-items:flex-start;gap:12px;padding:16px 16px 0">
<div style="display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:rgba(37,99,235,.1);flex-shrink:0">
<x-filament::icon icon="heroicon-o-cloud-arrow-down" class="h-5 w-5 text-primary-600" />
</div>
<div style="flex:1;min-width:0">
<h3 style="font-size:15px;font-weight:600;line-height:1.35;margin:0">{{ $item['title'] ?? $item['name'] }}</h3>
<p style="font-size:12px;color:#6b7280;margin:3px 0 0">{{ $item['version'] ?? '' }}@if(! empty($item['author'])) · {{ $item['author'] }}@endif</p>
</div>
<div style="flex-shrink:0">
@if($marketPaid)
<x-filament::badge color="warning">¥{{ number_format($item['price'] / 100, 2) }}</x-filament::badge>
@else
<x-filament::badge color="success">免费</x-filament::badge>
@endif
</div>
</div>
<p style="flex:1;font-size:13px;color:#6b7280;line-height:1.6;margin:12px 16px 0;padding:0">{{ $item['description'] ?? '' }}</p>
<div style="display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 16px;margin-top:14px;border-top:1px solid rgba(128,128,128,.15)">
@if($marketPaid && ! $this->isMarketPurchased($index))
<x-filament::button size="sm" color="primary" wire:click="purchaseMarketItem({{ $index }})">购买</x-filament::button>
@elseif($marketPaid)
<x-filament::badge color="success">已购买</x-filament::badge>
@endif
<x-filament::button size="sm" color="gray" wire:click="installFromMarket({{ $index }})">安装</x-filament::button>
</div>
</div>
</x-filament::section>
@empty
<p style="font-size:14px;color:#6b7280">点击「刷新市场」拉取可用插件</p>
@endforelse
</div>
</x-filament::section>
</x-filament-panels::page>