調整 header 畫面 20250813

app/Livewire/Admin/ActivityLogTable.php

@@ -44,6 +44,7 @@ final class ActivityLogTable extends PowerGridComponent
             ->showToggleColumns();
             //->showSoftDeletes()
             //->showSearchInput()
+        $header->includeViewOnTop('livewire.admin.activity-log-header');
         $actions[]=$header;
         $actions[]=PowerGrid::footer()->showPerPage()->showRecordCount();     
         return $actions;

app/Livewire/Admin/UserForm.php

@@ -17,13 +17,13 @@ class UserForm extends Component
 {
     use WireUiActions;
 
-    protected $listeners = ['openCreateUserModal','openEditUserModal', 'deleteUser'];
+    protected $listeners = ['openModal','closeModal', 'deleteUser'];
 
     public bool $canCreate;
     public bool $canEdit;
     public bool $canDelect;
 
-    public bool $showCreateModal = false;
+    public bool $showModal = false;
 
     public array $genderOptions =[];
     public array $statusOptions =[];
@@ -66,20 +66,22 @@ class UserForm extends Component
         $this->canDelect = Auth::user()?->can('user-delete') ?? false;
     }
 
-    public function openCreateUserModal()
+    public function openModal($id = null)
     {
         $this->resetFields();
-        $this->showCreateModal = true;
+        if($id){
+            $obj = User::findOrFail($id);
+            $this->userId = $obj->id;
+            $this->fields = $obj->only(array_keys($this->fields));
+            $this->selectedRoles = $obj->roles()->pluck('id')->toArray();
+        }
+        $this->showModal = true;
     }
-
-    public function openEditUserModal($id)
+    
+    public function closeModal()
     {
-        $user = User::findOrFail($id);
-        $this->userId = $user->id;
-        $this->fields = $user->only(array_keys($this->fields));
-
-        $this->selectedRoles = $user->roles()->pluck('id')->toArray();
-        $this->showCreateModal = true;
+        $this->resetFields();
+        $this->showModal = false;
     }
 
     public function save()
@@ -110,7 +112,7 @@ class UserForm extends Component
         }
 
         $this->resetFields();
-        $this->showCreateModal = false;
+        $this->showModal = false;
         $this->dispatch('pg:eventRefresh-user-table');
     }
     

app/Livewire/Admin/UserTable.php

@@ -239,7 +239,7 @@ final class UserTable extends PowerGridComponent
                 ->slot(__('users.edit'))
                 ->icon('solid-pencil-square')
                 ->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
-                ->dispatchTo('admin.user-form', 'openEditUserModal', ['id' => $row->id]);
+                ->dispatchTo('admin.user-form', 'openModal', ['id' => $row->id]);
         }
         if($this->canDelect){
             $actions[]=Button::add('delete')

resources/views/components/admin/section-header.blade.php

@@ -0,0 +1,13 @@
+<div class="bg-white px-4 py-3 shadow-sm border rounded-md mb-4">
+    <div class="flex items-center justify-between">
+        {{-- 左邊標題 --}}
+        <h2 class="text-lg font-semibold text-gray-800">
+            {{ $title }}
+        </h2>
+
+        {{-- 右邊 slot 注入按鈕群 --}}
+        <div class="flex gap-3">
+            {{ $slot }}
+        </div>
+    </div>
+</div>

resources/views/components/layouts/admin.blade.php

@@ -23,8 +23,6 @@
             <livewire:layout.admin.sidebar />
 
             <div class="flex-1 flex flex-col">
-                {{-- Navigation --}}
-                <livewire:layout.admin.navigation />
 
                 {{-- Page Heading --}}
                 @if (isset($header))

resources/views/livewire/admin/activity-log-header.blade.php

@@ -0,0 +1,2 @@
+<x-admin.section-header title="{{ __('activity-log.list') }}">
+</x-admin.section-header>

resources/views/livewire/admin/artist-header.blade.php

@@ -1,4 +1,4 @@
-<div class="flex justify-end mb-2 mr-2 mt-2 sm:mt-0 gap-3">
+<x-admin.section-header title="{{ __('artists.list') }}">
     <x-wireui:button
         wire:click="$dispatchTo('admin.artist-form', 'openModal')"
         icon="plus"
@@ -12,4 +12,4 @@
         label="{{ __('artists.ImportData') }}"
         class="bg-green-600 text-white"
     />
-</div>
+</x-admin.section-header>

resources/views/livewire/admin/branch-header.blade.php

@@ -1,4 +1,4 @@
-<div class="flex justify-end mb-2 mr-2 mt-2 sm:mt-0 gap-3">
+<x-admin.section-header title="{{ __('branches.list') }}">
     <x-wireui:button
         wire:click="$dispatchTo('admin.branch-form', 'openModal')"
         icon="plus"
@@ -12,4 +12,4 @@
         label="{{ __('branches.ImportData') }}"
         class="bg-green-600 text-white"
     />
-</div>
+</x-admin.section-header>

resources/views/livewire/admin/role-header.blade.php

@@ -1,8 +1,8 @@
-<div class="flex justify-end mb-2">
+<x-admin.section-header title="{{ __('roles.list') }}">
     <x-wireui:button
         wire:click="$dispatchTo('admin.role-form', 'openCreateRoleModal')"
         icon="plus"
         label="{{ __('roles.CreateNew') }}"
         class="bg-blue-600 text-white"
     />
-</div>
+</x-admin.section-header>

resources/views/livewire/admin/song-header.blade.php

@@ -1,4 +1,4 @@
-<div class="flex justify-end mb-2 mr-2 mt-2 sm:mt-0 gap-3">
+<x-admin.section-header title="{{ __('songs.list') }}">
     <x-wireui:button
         wire:click="$dispatchTo('admin.song-form', 'openModal')"
         icon="plus"
@@ -12,4 +12,4 @@
         label="{{ __('songs.ImportData') }}"
         class="bg-green-600 text-white"
     />
-</div>
+</x-admin.section-header>

resources/views/livewire/admin/user-form.blade.php

@@ -1,4 +1,4 @@
-<x-wireui:modal-card title="{{ $userId ? __('users.EditUser') : __('users.CreateNew') }}" blur wire:model.defer="showCreateModal">
+<x-wireui:modal-card title="{{ $userId ? __('users.EditUser') : __('users.CreateNew') }}" blur wire:model.defer="showModal">
     <div class="space-y-4">
         <x-wireui:input label="{{__('users.name')}}" wire:model.defer="fields.name" required />
         <x-wireui:input label="Email" wire:model.defer="fields.email" required />
@@ -33,7 +33,7 @@
 
     <x-slot name="footer">
         <div class="flex justify-between w-full">
-            <x-wireui:button flat label="{{__('users.cancel')}}" @click="$wire.showCreateModal = false" />
+            <x-wireui:button flat label="{{__('users.cancel')}}" wire:click="closeModal"  />
             <x-wireui:button primary label="{{__('users.submit')}}" wire:click="save" />
         </div>
     </x-slot>

resources/views/livewire/admin/user-header.blade.php

@@ -1,8 +1,8 @@
-<div class="flex justify-end mb-2">
+<x-admin.section-header title="{{ __('users.list') }}">
     <x-wireui:button
-        wire:click="$dispatchTo('admin.user-form', 'openCreateUserModal')"
+        wire:click="$dispatchTo('admin.user-form', 'openModal')"
         icon="plus"
         label="{{ __('users.CreateNew') }}"
         class="bg-blue-600 text-white"
     />
-</div>
+</x-admin.section-header>

resources/views/livewire/layout/admin/navigation.blade.php

@@ -1,110 +0,0 @@
-<?php
-
-use App\Livewire\Actions\Logout;
-use Livewire\Volt\Component;
-
-new class extends Component
-{
-    /**
-     * Log the current user out of the application.
-     */
-    public function logout(Logout $logout): void
-    {
-        $logout();
-
-        $this->redirect('/', navigate: true);
-    }
-}; ?>
-
-<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
-    <!-- Primary Navigation Menu -->
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex justify-between h-16">
-            <div class="flex">
-                <!-- Logo -->
-                <div class="shrink-0 flex items-center">
-                    <a href="{{ route('admin.dashboard') }}" wire:navigate>
-                        <x-application-logo class="block h-9 w-auto fill-current text-gray-800" />
-                    </a>
-                </div>
-
-                <!-- Navigation Links -->
-                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
-                    <x-nav-link :href="route('admin.dashboard')" :active="request()->routeIs('admin.dashboard')" wire:navigate>
-                        {{ __('Dashboard') }}
-                    </x-nav-link>
-                </div>
-            </div>
-
-            <!-- Settings Dropdown -->
-            <div class="hidden sm:flex sm:items-center sm:ms-6">
-                <x-dropdown align="right" width="48">
-                    <x-slot name="trigger">
-                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
-                            <div x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
-
-                            <div class="ms-1">
-                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                                </svg>
-                            </div>
-                        </button>
-                    </x-slot>
-
-                    <x-slot name="content">
-                        <x-dropdown-link :href="route('profile')" wire:navigate>
-                            {{ __('Profile') }}
-                        </x-dropdown-link>
-
-                        <!-- Authentication -->
-                        <button wire:click="logout" class="w-full text-start">
-                            <x-dropdown-link>
-                                {{ __('Log Out') }}
-                            </x-dropdown-link>
-                        </button>
-                    </x-slot>
-                </x-dropdown>
-            </div>
-
-            <!-- Hamburger -->
-            <div class="-me-2 flex items-center sm:hidden">
-                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
-                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Responsive Navigation Menu -->
-    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
-        <div class="pt-2 pb-3 space-y-1">
-            <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
-                {{ __('Dashboard') }}
-            </x-responsive-nav-link>
-        </div>
-
-        <!-- Responsive Settings Options -->
-        <div class="pt-4 pb-1 border-t border-gray-200">
-            <div class="px-4">
-                <div class="font-medium text-base text-gray-800" x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
-                <div class="font-medium text-sm text-gray-500">{{ auth()->user()->email }}</div>
-            </div>
-
-            <div class="mt-3 space-y-1">
-                <x-responsive-nav-link :href="route('profile')" wire:navigate>
-                    {{ __('Profile') }}
-                </x-responsive-nav-link>
-
-                <!-- Authentication -->
-                <button wire:click="logout" class="w-full text-start">
-                    <x-responsive-nav-link>
-                        {{ __('Log Out') }}
-                    </x-responsive-nav-link>
-                </button>
-            </div>
-        </div>
-    </div>
-</nav>

resources/views/livewire/layout/admin/sidebar.blade.php

@@ -1,7 +1,11 @@
-@php
-    use Illuminate\Support\Facades\Auth;
+<?php
+use Illuminate\Support\Facades\Auth;
+use App\Livewire\Actions\Logout;
+use Livewire\Volt\Component;
 
-    $menus = [
+new class extends Component
+{
+    public array $menus=[
         ['label' => 'Dashboard', 'route' => 'admin.dashboard', 'icon' => 'home', 'permission' => null],
         ['label' => 'ActivityLog', 'route' => 'admin.activity-log', 'icon' => 'clock', 'permission' => null],
         ['label' => 'Role', 'route' => 'admin.roles', 'icon' => 'user-circle', 'permission' => 'role-list'],
@@ -10,22 +14,65 @@
         ['label' => 'Song', 'route' => 'admin.songs', 'icon' => 'musical-note', 'permission' => 'song-list'],
         ['label' => 'Branche', 'route' => 'admin.branches', 'icon' => 'building-library', 'permission' => 'room-list'],
     ];
-@endphp
 
-<aside class="w-64 bg-white border-r">
-    <div class="p-4 font-bold text-lg border-b">
-        管理後台
+    /**
+     * Log the current user out of the application.
+     */
+    public function logout(Logout $logout): void
+    {
+        $logout();
+
+        $this->redirect('/', navigate: true);
+    }
+}; ?>
+
+<aside class="w-64 bg-white border-r flex flex-col justify-between h-screen">
+    {{-- 頂部區塊 --}}
+    <div>
+        <div class="p-4 border-b">
+            <div class="flex items-center justify-between">
+                <div class="font-bold text-lg">管理後台</div>
+
+                <x-dropdown align="right" width="48">
+                    <x-slot name="trigger">
+                        <button class="inline-flex items-center px-2 py-1 text-sm font-medium text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition">
+                            <div x-data="{{ json_encode(['name' => auth()->user()->name]) }}" 
+                                x-text="name"
+                                x-on:profile-updated.window="name = $event.detail.name"></div>
+                            <svg class="ml-1 w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                            </svg>
+                        </button>
+                    </x-slot>
+
+                    <x-slot name="content">
+                        <x-dropdown-link :href="route('profile')" wire:navigate>
+                            {{ __('Profile') }}
+                        </x-dropdown-link>
+                    </x-slot>
+                </x-dropdown>
+            </div>
+        </div>
+
+        {{-- 選單 --}}
+        <nav class="mt-4">
+            @foreach ($menus as $menu)
+                @if (!$menu['permission'] || Auth::user()->can($menu['permission']))
+                    <a href="{{ route($menu['route']) }}"
+                        class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 {{ request()->routeIs($menu['route']) ? 'bg-gray-100 font-semibold' : '' }}">
+                        <x-wireui:icon name="{{ $menu['icon'] }}" class="w-5 h-5 mr-2" />
+                        {{ $menu['label'] }}
+                    </a>
+                @endif
+            @endforeach
+        </nav>
+    </div>
+
+    {{-- 登出按鈕（固定底部） --}}
+    <div class="p-4 border-t">
+        <button wire:click="logout"
+            class="flex items-center text-sm text-gray-700 hover:text-red-600">
+            {{ __('Log Out') }}
+        </button>
     </div>
-    <nav class="mt-4">
-        @foreach ($menus as $menu)
-            @if (!$menu['permission'] || Auth::user()->can($menu['permission']))
-                <a href="{{ route($menu['route']) }}"
-                   class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 {{ request()->routeIs($menu['route']) ? 'bg-gray-100 font-semibold' : '' }}">
-                   <x-wireui:icon name="{{ $menu['icon'] }}" class="w-5 h-5" />
-                    {{ $menu['label'] }}
-                    
-                </a>
-            @endif
-        @endforeach
-    </nav>
 </aside>