terrylee/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(app-ui): 頁籤與「新增」按鈕同列靠左 — 改用 x-app-tabs 元件(帶 Action slot)

Browse Source 
移除獨立的新增按鈕列與舊 _tabs partial

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
terrylee 2026-07-16 10:18:56 +08:00
parent a326283d17
commit ef62b0a2ef
5 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/views/admin/app/ui-bundles/content.blade.php
View File

@ -2,7 +2,7 @@
@section('content')
<div class="px-6 py-8">
@include('admin.app._tabs', ['active' => 'bundles'])
<x-app-tabs active="bundles" />
<div class="flex items-center gap-3 mb-6">
<a href="{{ route('admin.app.ui-bundles') }}" class="btn-luxury-secondary">

6
resources/views/admin/app/ui-bundles/index.blade.php
View File

@ -2,14 +2,12 @@
@section('content')
<div class="px-6 py-8" x-data="{ showCreate: false, isDeleteConfirmOpen: false, deleteFormAction: '' }">
@include('admin.app._tabs', ['active' => 'bundles'])
<div class="flex justify-end mb-4">
<x-app-tabs active="bundles">
<button type="button" @click="showCreate = true" class="btn-luxury-primary">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
{{ __('Create') }}
</button>
</div>
</x-app-tabs>
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">

6
resources/views/admin/app/ui-elements/index.blade.php
View File

@ -2,14 +2,12 @@
@section('content')
<div class="px-6 py-8" x-data="{ showCreate: false, isDeleteConfirmOpen: false, deleteFormAction: '' }">
@include('admin.app._tabs', ['active' => 'elements'])
<div class="flex justify-end mb-4">
<x-app-tabs active="elements">
<button type="button" @click="showCreate = true" class="btn-luxury-primary">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
{{ __('Create') }}
</button>
</div>
</x-app-tabs>
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">

2
resources/views/admin/app/ui-machines/index.blade.php
View File

@ -2,7 +2,7 @@
@section('content')
<div class="px-6 py-8">
@include('admin.app._tabs', ['active' => 'machines'])
<x-app-tabs active="machines" />
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">

18
resources/views/admin/app/_tabs.blade.php → resources/views/components/app-tabs.blade.php
View File

@ -1,4 +1,6 @@
{{-- APP UI元素設定 共用標題 + 頁籤列。傳入 $active = elements | bundles | machines --}}
{{-- APP UI元素設定 共用標題 + 頁籤列（+ 選填右側 Action slot，與頁籤同列靠左）。
用法：<x-app-tabs active="elements"><button class="btn-luxury-primary">新增</button></x-app-tabs> --}}
@props(['active' => ''])
@php
$tabs = [
'elements' => ['label' => __('UI Elements'), 'route' => 'admin.app.ui-elements'],
@ -7,20 +9,24 @@
];
@endphp
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
<h3 class="text-gray-900 dark:text-gray-200 text-3xl font-medium">{{ __('APP UI Elements') }}</h3>
<h3 class="text-gray-900 dark:text-gray-200 text-3xl font-medium mb-4">{{ __('APP UI Elements') }}</h3>
<div class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl border border-slate-200/50 dark:border-slate-800/50 overflow-x-auto w-full sm:w-fit [&::-webkit-scrollbar]:hidden">
<div class="flex flex-wrap items-center gap-3 mb-6">
<div class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl border border-slate-200/50 dark:border-slate-800/50 overflow-x-auto w-fit max-w-full [&::-webkit-scrollbar]:hidden">
@foreach($tabs as $key => $tab)
<a href="{{ route($tab['route']) }}"
class="px-6 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300 whitespace-nowrap flex-1 sm:flex-none text-center
{{ ($active ?? '') === $key
class="px-6 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300 whitespace-nowrap
{{ $active === $key
? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10'
: 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200' }}">
{{ $tab['label'] }}
</a>
@endforeach
</div>
@if($slot->isNotEmpty())
{{ $slot }}
@endif
</div>
@if(session('success'))