feat(app-ui): UI元素列表加每頁筆數下拉+搜尋+分頁

controller paginate(per_page 10/25/50/100)+名稱/類別 like 搜尋;view 控制列(luxury 樣式)+分頁連結

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
terrylee 2026-07-16 10:35:06 +08:00
parent e789e2b02b
commit 32dfa2bdd1
4 changed files with 47 additions and 2 deletions

View File

@ -27,13 +27,28 @@ class UiElementController extends Controller
// 頁籤一UI 元素列表(素材庫)
// ==================================================================
public function uiElements()
public function uiElements(Request $request)
{
$elements = UiElement::orderByDesc('id')->get();
$perPage = (int) $request->input('per_page', 10);
$perPage = in_array($perPage, [10, 25, 50, 100], true) ? $perPage : 10;
$search = trim((string) $request->input('search', ''));
$query = UiElement::orderByDesc('id');
if ($search !== '') {
$query->where(function ($q) use ($search) {
$q->where('name', 'like', "%{$search}%")
->orWhere('part_key', 'like', "%{$search}%");
});
}
$elements = $query->paginate($perPage)->withQueryString();
return view('admin.app.ui-elements.index', [
'elements' => $elements,
'parts' => $this->activeParts(),
'perPage' => $perPage,
'search' => $search,
]);
}

View File

@ -2348,6 +2348,8 @@
"Saved and update pushed to machine.": "Saved and update pushed to machine.",
"Saved. Machine will apply on next sync/reboot.": "Saved. Machine will apply on next sync/reboot.",
"No data": "No data",
"entries": "entries",
"Search name or category...": "Search name or category...",
"Back": "Back",
"Rename": "Rename",
"Content Settings": "Content Settings",

View File

@ -2349,6 +2349,8 @@
"Saved and update pushed to machine.": "已儲存,並已推送更新到機台(機台將立即重拉並套用)。",
"Saved. Machine will apply on next sync/reboot.": "已儲存。推送未成功(機台可能離線),將於下次同步/重開機時套用。",
"No data": "無資料",
"entries": "筆",
"Search name or category...": "搜尋名稱或類別…",
"Back": "返回",
"Rename": "重新命名",
"Content Settings": "內容設定",

View File

@ -9,6 +9,28 @@
</button>
</x-app-tabs>
{{-- 控制列:每頁筆數 + 搜尋 --}}
<form method="GET" action="{{ route('admin.app.ui-elements') }}" class="flex flex-wrap items-center justify-between gap-3 mb-4">
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
<span>{{ __('Show') }}</span>
<select name="per_page" onchange="this.form.submit()" class="luxury-input py-1.5 px-2 text-sm w-auto">
@foreach([10, 25, 50, 100] as $n)
<option value="{{ $n }}" {{ $perPage === $n ? 'selected' : '' }}>{{ $n }}</option>
@endforeach
</select>
<span>{{ __('entries') }}</span>
</div>
<div class="flex items-center gap-2">
<input type="text" name="search" value="{{ $search }}" placeholder="{{ __('Search name or category...') }}" class="luxury-input py-2 px-3 text-sm sm:w-72">
<button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95" title="{{ __('Search') }}">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
</button>
<a href="{{ route('admin.app.ui-elements') }}" class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95" title="{{ __('Reset') }}">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
</a>
</div>
</form>
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
<thead class="bg-gray-100 dark:bg-gray-700">
@ -49,6 +71,10 @@
</table>
</div>
<div class="mt-4">
{{ $elements->links() }}
</div>
{{-- 新增 UI 元素 Modal --}}
<div x-show="showCreate" x-cloak class="fixed inset-0 z-50 overflow-y-auto" @keydown.escape.window="showCreate = false">
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">