安裝wire-elements/modal

.env.example

@@ -5,9 +5,9 @@ APP_DEBUG=true
 APP_TIMEZONE=Asia/Taipei
 APP_URL=https://shop_12_wireui.test
 
-APP_LOCALE=zh-TW
+APP_LOCALE=zh-tw
-APP_FALLBACK_LOCALE=zh-TW
+APP_FALLBACK_LOCALE=zh-tw
-APP_FAKER_LOCALE=zh-TW
+APP_FAKER_LOCALE=zh_TW
 
 APP_MAINTENANCE_DRIVER=file
 # APP_MAINTENANCE_STORE=database

app/Livewire/Admin/Dashboard.php

@@ -11,6 +11,6 @@ class Dashboard extends Component
     {
         $user = Auth::user();
 
-        return view('livewire.admin.dashboard', compact('user'))->layout('layouts.admin');
+        return view('livewire.admin.dashboard', compact('user'));
     }
 }

bootstrap/app.php

@@ -11,7 +11,11 @@ return Application::configure(basePath: dirname(__DIR__))
         health: '/up',
     )
     ->withMiddleware(function (Middleware $middleware) {
-        //
+        $middleware->alias([
+            'role' => \Spatie\Permission\Middleware\RoleMiddleware::class,
+            'permission' => \Spatie\Permission\Middleware\PermissionMiddleware::class,
+            'role_or_permission' => \Spatie\Permission\Middleware\RoleOrPermissionMiddleware::class
+        ]);
     })
     ->withExceptions(function (Exceptions $exceptions) {
         //

composer.json

@@ -13,6 +13,7 @@
         "livewire/volt": "^1.7.0",
         "power-components/livewire-powergrid": "^6.3",
         "spatie/laravel-permission": "^6.17",
+        "wire-elements/modal": "^2.0",
         "wireui/wireui": "^2.4"
     },
     "require-dev": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "7fca47874b86a18c0949dbf10c0850ec",
+    "content-hash": "5cb061b154b96e6a66433533af5de696",
     "packages": [
         {
             "name": "brick/math",
@@ -3512,6 +3512,67 @@
             ],
             "time": "2024-04-27T21:32:50+00:00"
         },
+        {
+            "name": "spatie/laravel-package-tools",
+            "version": "1.92.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/laravel-package-tools.git",
+                "reference": "d20b1969f836d210459b78683d85c9cd5c5f508c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/laravel-package-tools/zipball/d20b1969f836d210459b78683d85c9cd5c5f508c",
+                "reference": "d20b1969f836d210459b78683d85c9cd5c5f508c",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/contracts": "^9.28|^10.0|^11.0|^12.0",
+                "php": "^8.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.5",
+                "orchestra/testbench": "^7.7|^8.0|^9.0|^10.0",
+                "pestphp/pest": "^1.23|^2.1|^3.1",
+                "phpunit/php-code-coverage": "^9.0|^10.0|^11.0",
+                "phpunit/phpunit": "^9.5.24|^10.5|^11.5",
+                "spatie/pest-plugin-test-time": "^1.1|^2.2"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\LaravelPackageTools\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Freek Van der Herten",
+                    "email": "freek@spatie.be",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Tools for creating Laravel packages",
+            "homepage": "https://github.com/spatie/laravel-package-tools",
+            "keywords": [
+                "laravel-package-tools",
+                "spatie"
+            ],
+            "support": {
+                "issues": "https://github.com/spatie/laravel-package-tools/issues",
+                "source": "https://github.com/spatie/laravel-package-tools/tree/1.92.4"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/spatie",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-04-11T15:27:14+00:00"
+        },
         {
             "name": "spatie/laravel-permission",
             "version": "6.17.0",
@@ -6094,6 +6155,70 @@
             },
             "time": "2022-06-03T18:03:27+00:00"
         },
+        {
+            "name": "wire-elements/modal",
+            "version": "2.0.13",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/wire-elements/modal.git",
+                "reference": "65d9db80a0befaa38ae99a47a26818e784aa7101"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/wire-elements/modal/zipball/65d9db80a0befaa38ae99a47a26818e784aa7101",
+                "reference": "65d9db80a0befaa38ae99a47a26818e784aa7101",
+                "shasum": ""
+            },
+            "require": {
+                "livewire/livewire": "^3.2.3",
+                "php": "^8.1",
+                "spatie/laravel-package-tools": "^1.9"
+            },
+            "require-dev": {
+                "orchestra/testbench": "^8.5",
+                "phpunit/phpunit": "^9.5"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "LivewireUI\\Modal\\LivewireModalServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "LivewireUI\\Modal\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Philo Hermans",
+                    "email": "me@philohermans.com"
+                }
+            ],
+            "description": "Laravel Livewire modal component",
+            "keywords": [
+                "laravel",
+                "livewire",
+                "modal"
+            ],
+            "support": {
+                "issues": "https://github.com/wire-elements/modal/issues",
+                "source": "https://github.com/wire-elements/modal/tree/2.0.13"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/PhiloNL",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-02-20T13:07:12+00:00"
+        },
         {
             "name": "wireui/heroicons",
             "version": "v2.9.0",

config/livewire-powergrid.php

@@ -24,6 +24,8 @@ return [
             // 'default' => 'resources/views/components/icons',
             // 'outline' => 'vendor/wireui/wireui/resources/views/components/icons/outline',
             // 'solid'   => 'vendor/wireui/wireui/resources/views/components/icons/solid',
+            'outline' => 'vendor/wireui/heroicons/src/views/components/outline',
+            'solid'   => 'vendor/wireui/heroicons/src/views/components/solid',
         ],
 
         'allowed' => [
@@ -48,9 +50,9 @@ return [
          */
         'flatpickr' => [
             'locales' => [
-                'pt_BR' => [
+                'zh_tw' => [
-                    'locale'     => 'pt',
+                    'locale'     => 'zh_tw',
-                    'dateFormat' => 'd/m/Y H:i',
+                    'dateFormat' => 'Y-m-d H:i',
                     'enableTime' => true,
                     'time_24hr'  => true,
                 ],

package-lock.json

@@ -4,6 +4,9 @@
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "flatpickr": "^4.6.13"
+            },
             "devDependencies": {
                 "@tailwindcss/forms": "^0.5.2",
                 "@tailwindcss/vite": "^4.0.0",
@@ -1872,6 +1875,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/flatpickr": {
+            "version": "4.6.13",
+            "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
+            "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==",
+            "license": "MIT"
+        },
         "node_modules/follow-redirects": {
             "version": "1.15.9",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",

package.json

@@ -15,5 +15,8 @@
         "postcss": "^8.4.31",
         "tailwindcss": "^3.1.0",
         "vite": "^6.2.4"
+    },
+    "dependencies": {
+        "flatpickr": "^4.6.13"
     }
 }

resources/css/app.css

@@ -1,5 +1,6 @@
 /* 引入 PowerGrid 的樣式 */
 @import './../../vendor/power-components/livewire-powergrid/dist/tailwind.css';
+@import "flatpickr/dist/flatpickr.min.css";
 
 @tailwind base;
 @tailwind components;

resources/js/app.js

@@ -1,2 +1,7 @@
 import './bootstrap';
-import './../../vendor/power-components/livewire-powergrid/dist/powergrid';
+import './../../vendor/power-components/livewire-powergrid/dist/powergrid';
+import flatpickr from "flatpickr";
+import 'flatpickr/dist/flatpickr.min.css';
+import { Mandarin } from 'flatpickr/dist/l10n/zh.js';
+
+flatpickr.localize(Mandarin);

resources/lang/vendor/livewire-powergrid/zh-tw/datatable.php

@@ -0,0 +1,75 @@
+<?php
+
+return [
+    'buttons' => [
+        'filter'            => '篩選',
+        'clear_all_filters' => '清除全部',
+    ],
+    'labels' => [
+        'action'           => '操作',
+        'results_per_page' => '每頁記錄數',
+        'clear_filter'     => '清除篩選',
+        'no_data'          => '未找到任何記錄',
+        'all'              => '全部',
+        'selected'         => '選定',
+        'filtered'         => '已過濾',
+    ],
+    'placeholders' => [
+        'search' => '搜尋...',
+        'select' => '選擇時段',
+    ],
+    'pagination' => [
+        'showing' => 'Showing',
+        'to'      => 'to',
+        'of'      => 'of',
+        'results' => 'Results',
+        'all'     => '全部',
+    ],
+    'multi_select' => [
+        'select' => 'Select',
+        'all'    => '全部',
+    ],
+    'select' => [
+        'select' => 'Select',
+        'all'    => '全部',
+    ],
+    'boolean_filter' => [
+        'all' => '全部',
+    ],
+    'input_text_options' => [
+        'is'           => 'Is',
+        'is_not'       => 'Is not',
+        'contains'     => 'Contains',
+        'contains_not' => 'Does not contain',
+        'starts_with'  => 'Starts with',
+        'ends_with'    => 'Ends with',
+        'is_empty'     => 'Is empty',
+        'is_not_empty' => 'Is not empty',
+        'is_null'      => 'Is null',
+        'is_not_null'  => 'Is not null',
+        'is_blank'     => 'Is blank',
+        'is_not_blank' => 'Is not blank',
+    ],
+    'export' => [
+        'exporting' => 'Please wait!',
+        'completed' => 'Export completed! Your files are ready for download',
+    ],
+    'soft_deletes' => [
+        'message_with_trashed' => 'Displaying all records, including deleted ones.',
+        'message_only_trashed' => 'Displaying only deleted records.',
+        'without_trashed'      => 'Without deleted',
+        'with_trashed'         => 'With deleted',
+        'only_trashed'         => 'Only deleted',
+    ],
+    'multi_sort' => [
+        'message' => 'Multiple sort is active',
+    ],
+    'buttons_macros' => [
+        'confirm' => [
+            'message' => 'Are you sure you want to perform this action?',
+        ],
+        'confirm_prompt' => [
+            'message' => "Are you sure you want to perform this action? \n\n Enter :confirmValue to confirm.",
+        ],
+    ],
+];

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

@@ -16,29 +16,35 @@
         @livewireStyles
         @wireUiScripts
     </head>
-    <body class="bg-gray-100 text-gray-800">
+    <body class="font-sans antialiased">
-        @auth
+        <div class="min-h-screen bg-gray-100 flex">
-        <div class="flex min-h-screen">
+
             {{-- Sidebar --}}
             <livewire:layout.admin.sidebar />
 
             <div class="flex-1 flex flex-col">
-                {{-- Top nav --}}
+                {{-- Navigation --}}
                 <livewire:layout.admin.navigation />
 
-                {{-- Page content --}}
+                {{-- Page Heading --}}
-                <main class="p-6">
+                @if (isset($header))
+                    <header class="bg-white shadow">
+                        <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+                            {{ $header }}
+                        </div>
+                    </header>
+                @endif
+
+                {{-- Page Content --}}
+                <main>
                     {{ $slot }}
                 </main>
             </div>
+
         </div>
-        @else
-            <main class="p-6">
-                {{ $slot }}
-            </main>
-        @endauth
 
         @livewireScripts
+        @livewire('wire-elements-modal')
     </body>
 </html>
 

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

@@ -0,0 +1,9 @@
+@if(auth()->user()->hasRole('Admin'))
+    <x-layouts.admin>
+        {{ $slot }}
+    </x-layouts.admin>
+@else
+    <x-layouts.user>
+        {{ $slot }}
+    </x-layouts.user>
+@endif

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

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="csrf-token" content="{{ csrf_token() }}">
+
+        <title>{{ config('app.name', 'Laravel') }}</title>
+
+        <!-- Fonts -->
+        <link rel="preconnect" href="https://fonts.bunny.net">
+        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+
+        <!-- Scripts -->
+        @vite(['resources/css/app.css', 'resources/js/app.js'])
+        @livewireStyles
+        @wireUiScripts
+    </head>
+    <body class="font-sans antialiased">
+        <div class="min-h-screen bg-gray-100">
+            <livewire:layout.app.navigation />
+
+            <!-- Page Heading -->
+            @if (isset($header))
+                <header class="bg-white shadow">
+                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+                        {{ $header }}
+                    </div>
+                </header>
+            @endif
+
+            <!-- Page Content -->
+            <main>
+                {{ $slot }}
+            </main>
+        </div>
+        @livewireScripts
+        @livewire('wire-elements-modal')
+    </body>
+</html>

resources/views/vendor/wire-elements-modal/modal.blade.php

@@ -0,0 +1,57 @@
+<div>
+    @isset($jsPath)
+        <script>{!! file_get_contents($jsPath) !!}</script>
+    @endisset
+    @isset($cssPath)
+        <style>{!! file_get_contents($cssPath) !!}</style>
+    @endisset
+
+    <div
+            x-data="LivewireUIModal()"
+            x-on:close.stop="setShowPropertyTo(false)"
+            x-on:keydown.escape.window="show && closeModalOnEscape()"
+            x-show="show"
+            class="fixed inset-0 z-10 overflow-y-auto"
+            style="display: none;"
+    >
+        <div class="flex items-end justify-center min-h-dvh px-4 pt-4 pb-10 text-center sm:block sm:p-0">
+            <div
+                    x-show="show"
+                    x-on:click="closeModalOnClickAway()"
+                    x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0"
+                    x-transition:enter-end="opacity-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100"
+                    x-transition:leave-end="opacity-0"
+                    class="fixed inset-0 transition-all transform"
+            >
+                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+            <div
+                    x-show="show && showActiveComponent"
+                    x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    x-bind:class="modalWidth"
+                    class="inline-block w-full align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full"
+                    id="modal-container"
+                    x-trap.noscroll.inert="show && showActiveComponent"
+                    aria-modal="true"
+            >
+                @forelse($components as $id => $component)
+                    <div x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
+                        @livewire($component['name'], $component['arguments'], key($id))
+                    </div>
+                @empty
+                @endforelse
+            </div>
+        </div>
+    </div>
+</div>

開發手冊.ini

@@ -0,0 +1,74 @@
+laravel new shop_12_wireui
+
+
+ ┌ Would you like to install a starter kit? ────────────────────┐
+ │ Laravel Breeze                                               │
+ └──────────────────────────────────────────────────────────────┘
+
+ ┌ Which Breeze stack would you like to install? ───────────────┐
+ │ Livewire (Volt Class API) with Alpine                        │
+ └──────────────────────────────────────────────────────────────┘
+
+ ┌ Would you like dark mode support? ───────────────────────────┐
+ │ No                                                           │
+ └──────────────────────────────────────────────────────────────┘
+
+ ┌ Which testing framework do you prefer? ──────────────────────┐
+ │ PHPUnit                                                      │
+ └──────────────────────────────────────────────────────────────┘
+
+ ┌ Would you like to initialize a Git repository? ──────────────┐
+ │ ● Yes / ○ No                                                 │
+ └──────────────────────────────────────────────────────────────┘
+
+
+composer require spatie/laravel-permission
+
+php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"
+
+
+
+php artisan make:seeder PermissionTableSeeder
+php artisan make:seeder CreateAdminUserSeeder
+
+無 DB 新建
+php artisan migrate --seed  
+有 DB 重制
+php artisan migrate:fresh --seed
+
+valet park
+valet link
+valet paths
+
+php artisan db:seed --class=PermissionTableSeeder
+php artisan db:seed --class=CreateAdminUserSeeder
+
+        //console.log();
+php artisan route:list
+php artisan config:clear
+php artisan route:clear
+php artisan cache:clear
+php artisan route:list
+
+npm install && npm run build
+
+
+
+
+composer require wireui/wireui
+
+php artisan vendor:publish --tag="wireui.config"
+
+php artisan make:livewire Admin/Roles/Index 
+php artisan make:livewire Admin/Roles/CreateRole
+php artisan make:livewire Admin/Roles/EditRole
+
+php artisan make:livewire Admin/Users
+
+php artisan make:component Table
+
+composer require power-components/livewire-powergrid
+php artisan vendor:publish --tag=livewire-powergrid-config
+
+建立分頁table
+php artisan powergrid:create