From 9ea68c770c8992842d0231e0178881b061e94276 Mon Sep 17 00:00:00 2001
From: terrylee <bloglee.work@gmail.com>
Date: Thu, 16 Jul 2026 10:11:47 +0800
Subject: [PATCH] =?UTF-8?q?style(app-ui):=20APP=E7=AE=A1=E7=90=86=E4=B8=89?=
 =?UTF-8?q?=E9=A0=81=E6=94=B9=E7=94=A8=E7=AB=99=E4=B8=8A=E8=A8=AD=E8=A8=88?=
 =?UTF-8?q?=E7=B3=BB=E7=B5=B1(luxury=E6=8C=89=E9=88=95/=E6=A8=99=E6=BA=96?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC/=E8=86=A0=E5=9B=8Atabs/=E6=A8=99=E6=BA=96mod?=
 =?UTF-8?q?al/=E5=88=AA=E9=99=A4=E7=A2=BA=E8=AA=8D)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- btn-luxury-primary/secondary + x-delete-confirm-modal
- 膠囊式頁籤(對齊 x-tab-nav 外觀)
- 「新增」改用 __('Create')=新增(不動全域 New=新值，那是 products 變更紀錄用)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 lang/en.json                                  |   1 +
 lang/zh_TW.json                               |   1 +
 resources/views/admin/app/_tabs.blade.php     |  29 ++---
 .../admin/app/ui-bundles/content.blade.php    |  28 ++--
 .../admin/app/ui-bundles/index.blade.php      |  95 +++++++-------
 .../admin/app/ui-elements/index.blade.php     | 120 +++++++++---------
 .../admin/app/ui-machines/index.blade.php     |  39 +++---
 7 files changed, 157 insertions(+), 156 deletions(-)

diff --git a/lang/en.json b/lang/en.json
index d3e8d68..6bb4b88 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -2337,6 +2337,7 @@
     "Type": "Type",
     "Type to search or leave blank for system defaults.": "Type to search or leave blank for system defaults.",
     "UI Elements": "UI Elements",
+    "APP UI Elements": "APP UI Elements",
     "UI Bundles": "UI Bundles",
     "Machine Binding": "Machine Binding",
     "UI element created": "UI element created",
diff --git a/lang/zh_TW.json b/lang/zh_TW.json
index 4adbaaf..ec844ed 100644
--- a/lang/zh_TW.json
+++ b/lang/zh_TW.json
@@ -2338,6 +2338,7 @@
     "Type": "類型",
     "Type to search or leave blank for system defaults.": "輸入關鍵字搜尋，或留空以使用系統預設。",
     "UI Elements": "UI元素",
+    "APP UI Elements": "APP UI 元素設定",
     "UI Bundles": "UI組合編輯",
     "Machine Binding": "機台設定",
     "UI element created": "UI 元素已新增",
diff --git a/resources/views/admin/app/_tabs.blade.php b/resources/views/admin/app/_tabs.blade.php
index 1fb5584..90da629 100644
--- a/resources/views/admin/app/_tabs.blade.php
+++ b/resources/views/admin/app/_tabs.blade.php
@@ -1,25 +1,22 @@
-{{-- APP UI元素設定 共用頁籤列。傳入 $active = elements | bundles | machines --}}
+{{-- APP UI元素設定 共用標題 + 頁籤列。傳入 $active = elements | bundles | machines --}}
 @php
     $tabs = [
-        'elements' => ['label' => __('UI Elements'), 'route' => 'admin.app.ui-elements'],
-        'bundles'  => ['label' => __('UI Bundles'),  'route' => 'admin.app.ui-bundles'],
+        'elements' => ['label' => __('UI Elements'),     'route' => 'admin.app.ui-elements'],
+        'bundles'  => ['label' => __('UI Bundles'),      'route' => 'admin.app.ui-bundles'],
         'machines' => ['label' => __('Machine Binding'), 'route' => 'admin.app.ui-machines'],
     ];
 @endphp
-<div class="mb-6">
-    <div class="flex items-center justify-between">
-        <div>
-            <h3 class="text-gray-900 dark:text-gray-100 text-2xl font-semibold">{{ __('APP Management') }}</h3>
-            <p class="text-sm text-rose-500 mt-1">{{ __('UI Elements') }}</p>
-        </div>
-    </div>
-    <div class="mt-4 inline-flex rounded-lg bg-gray-100 dark:bg-gray-800 p-1 gap-1">
+
+<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>
+
+    <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">
         @foreach($tabs as $key => $tab)
             <a href="{{ route($tab['route']) }}"
-               class="px-4 py-2 text-sm font-medium rounded-md transition-colors
+               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
-                    ? 'bg-emerald-600 text-white shadow'
-                    : 'text-gray-600 dark:text-gray-300 hover:bg-white/60 dark:hover:bg-gray-700' }}">
+                    ? '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
@@ -27,12 +24,12 @@
 </div>
 
 @if(session('success'))
-    <div class="mb-4 rounded-lg bg-emerald-100 dark:bg-emerald-900/40 text-emerald-800 dark:text-emerald-200 px-4 py-3 text-sm">
+    <div class="mb-4 rounded-xl bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 border border-emerald-200/60 dark:border-emerald-800/50 px-4 py-3 text-sm font-medium">
         {{ session('success') }}
     </div>
 @endif
 @if($errors->any())
-    <div class="mb-4 rounded-lg bg-rose-100 dark:bg-rose-900/40 text-rose-800 dark:text-rose-200 px-4 py-3 text-sm">
+    <div class="mb-4 rounded-xl bg-rose-50 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300 border border-rose-200/60 dark:border-rose-800/50 px-4 py-3 text-sm">
         <ul class="list-disc ps-5">
             @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
         </ul>
diff --git a/resources/views/admin/app/ui-bundles/content.blade.php b/resources/views/admin/app/ui-bundles/content.blade.php
index 114090e..8b57ad6 100644
--- a/resources/views/admin/app/ui-bundles/content.blade.php
+++ b/resources/views/admin/app/ui-bundles/content.blade.php
@@ -1,43 +1,43 @@
 @extends('layouts.admin')
 
 @section('content')
-<div class="container mx-auto px-4 py-6">
+<div class="px-6 py-8">
     @include('admin.app._tabs', ['active' => 'bundles'])
 
-    <div class="mb-4 flex items-center gap-2">
-        <a href="{{ route('admin.app.ui-bundles') }}" class="text-sm text-gray-500 hover:text-gray-700">&larr; {{ __('Back') }}</a>
-        <span class="text-gray-300">/</span>
-        <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ __('Content Settings') }}：{{ $bundle->name }}</h4>
+    <div class="flex items-center gap-3 mb-6">
+        <a href="{{ route('admin.app.ui-bundles') }}" class="btn-luxury-secondary">
+            <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="M15 19l-7-7 7-7" /></svg>
+            {{ __('Back') }}
+        </a>
+        <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-200">{{ __('Content Settings') }}：{{ $bundle->name }}</h4>
     </div>
 
     <form action="{{ route('admin.app.ui-bundles.content.update', $bundle) }}" method="POST">
         @csrf @method('PUT')
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
             @foreach($parts as $key => $part)
                 @php
                     $currentId = optional($itemsByPart->get($key))->ui_element_id;
                     $currentThumb = optional(optional($itemsByPart->get($key))->element)->image_url ?? '';
                 @endphp
-                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4" x-data="{ thumb: @js($currentThumb) }">
-                    <label class="block text-sm font-semibold text-gray-800 dark:text-gray-100 mb-1">
+                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 p-4" x-data="{ thumb: @js($currentThumb) }">
+                    <label class="block text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
                         {{ $part['label'] }}
                         @if($part['width'])<span class="text-xs font-normal text-gray-400">（{{ $part['width'] }}x{{ $part['height'] }}）</span>@endif
                     </label>
                     <select name="parts[{{ $key }}]"
                         @change="thumb = ($event.target.selectedOptions[0]?.dataset.thumb) || ''"
-                        class="block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 py-2 px-3 text-sm">
+                        class="w-full px-3 py-2 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 border rounded-md text-gray-900 dark:text-gray-200 text-sm focus:ring-2 focus:ring-cyan-500">
                         <option value="">{{ __('Not set') }}</option>
                         @foreach($elementsByPart[$key] as $element)
-                            <option value="{{ $element->id }}" data-thumb="{{ $element->image_url }}"
-                                {{ (string)$currentId === (string)$element->id ? 'selected' : '' }}>
+                            <option value="{{ $element->id }}" data-thumb="{{ $element->image_url }}" {{ (string)$currentId === (string)$element->id ? 'selected' : '' }}>
                                 {{ $element->name }}
                             </option>
                         @endforeach
                     </select>
                     <div class="mt-3">
-                        <img x-show="thumb" x-cloak :src="thumb"
-                            class="h-28 w-auto max-w-full object-contain rounded border border-gray-200 dark:border-gray-700 bg-gray-50">
+                        <img x-show="thumb" x-cloak :src="thumb" class="h-28 w-auto max-w-full object-contain rounded border border-gray-200 dark:border-gray-700 bg-gray-50">
                         <p x-show="!thumb" x-cloak class="text-xs text-gray-400">{{ __('No image selected') }}</p>
                     </div>
                 </div>
@@ -45,7 +45,7 @@
         </div>
 
         <div class="mt-6 flex justify-end">
-            <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-2 px-6 rounded-lg">{{ __('Save') }}</button>
+            <button type="submit" class="btn-luxury-primary">{{ __('Save') }}</button>
         </div>
     </form>
 </div>
diff --git a/resources/views/admin/app/ui-bundles/index.blade.php b/resources/views/admin/app/ui-bundles/index.blade.php
index aefd93b..6d65541 100644
--- a/resources/views/admin/app/ui-bundles/index.blade.php
+++ b/resources/views/admin/app/ui-bundles/index.blade.php
@@ -1,75 +1,80 @@
 @extends('layouts.admin')
 
 @section('content')
-<div class="container mx-auto px-4 py-6" x-data="{ showCreate: false }">
+<div class="px-6 py-8" x-data="{ showCreate: false, isDeleteConfirmOpen: false, deleteFormAction: '' }">
     @include('admin.app._tabs', ['active' => 'bundles'])
 
-    <div class="mb-4">
-        <button type="button" @click="showCreate = true"
-            class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg">
-            + {{ __('New') }}
+    <div class="flex justify-end mb-4">
+        <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>
 
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
-        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-            <thead class="bg-gray-50 dark:bg-gray-900/40">
-                <tr class="text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
-                    <th class="px-4 py-3 w-20">{{ __('ID') }}</th>
-                    <th class="px-4 py-3">{{ __('Name') }}</th>
-                    <th class="px-4 py-3 text-right">{{ __('Actions') }}</th>
+    <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">
+                <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-400 uppercase w-20">{{ __('ID') }}</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">{{ __('Name') }}</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">{{ __('Actions') }}</th>
                 </tr>
             </thead>
-            <tbody class="divide-y divide-gray-100 dark:divide-gray-700/60 text-sm text-gray-700 dark:text-gray-200">
+            <tbody class="divide-y border-gray-200 dark:border-gray-700">
                 @forelse($bundles as $bundle)
                     <tr x-data="{ editing: false }">
-                        <td class="px-4 py-3 text-gray-500">{{ $bundle->id }}</td>
-                        <td class="px-4 py-3">
+                        <td class="px-6 py-4 text-gray-500 dark:text-gray-400">{{ $bundle->id }}</td>
+                        <td class="px-6 py-4 text-gray-900 dark:text-gray-200">
                             <span x-show="!editing">{{ $bundle->name }}</span>
-                            <form x-show="editing" x-cloak method="POST" action="{{ route('admin.app.ui-bundles.update', $bundle) }}" class="flex gap-2">
+                            <form x-show="editing" x-cloak method="POST" action="{{ route('admin.app.ui-bundles.update', $bundle) }}" class="flex gap-2 items-center">
                                 @csrf @method('PUT')
-                                <input type="text" name="name" value="{{ $bundle->name }}"
-                                    class="rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 py-1 px-2 text-sm">
-                                <button type="submit" class="text-emerald-600 text-sm">{{ __('Save') }}</button>
-                                <button type="button" @click="editing=false" class="text-gray-400 text-sm">{{ __('Cancel') }}</button>
+                                <input type="text" name="name" value="{{ $bundle->name }}" class="px-3 py-1.5 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 border rounded-md text-gray-900 dark:text-gray-200 text-sm focus:ring-2 focus:ring-cyan-500">
+                                <button type="submit" class="text-emerald-600 hover:text-emerald-800 text-sm font-medium">{{ __('Save') }}</button>
+                                <button type="button" @click="editing = false" class="text-gray-400 hover:text-gray-600 text-sm">{{ __('Cancel') }}</button>
                             </form>
                         </td>
-                        <td class="px-4 py-3 text-right space-x-3">
-                            <button type="button" @click="editing=!editing" class="text-gray-500 hover:text-gray-700 text-sm">{{ __('Rename') }}</button>
-                            <a href="{{ route('admin.app.ui-bundles.content', $bundle) }}" class="text-blue-600 hover:text-blue-800 text-sm">{{ __('Content Settings') }}</a>
-                            <form action="{{ route('admin.app.ui-bundles.destroy', $bundle) }}" method="POST"
-                                onsubmit="return confirm('{{ __('Are you sure?') }}')" class="inline">
-                                @csrf @method('DELETE')
-                                <button type="submit" class="text-rose-600 hover:text-rose-800 text-sm">{{ __('Delete') }}</button>
-                            </form>
+                        <td class="px-6 py-4">
+                            <div class="flex items-center gap-4">
+                                <button type="button" @click="editing = !editing" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">{{ __('Rename') }}</button>
+                                <a href="{{ route('admin.app.ui-bundles.content', $bundle) }}" class="text-cyan-600 hover:text-cyan-800 font-medium">{{ __('Content Settings') }}</a>
+                                <button type="button"
+                                    @click="deleteFormAction = '{{ route('admin.app.ui-bundles.destroy', $bundle) }}'; isDeleteConfirmOpen = true"
+                                    class="text-red-600 hover:text-red-800">{{ __('Delete') }}</button>
+                            </div>
                         </td>
                     </tr>
                 @empty
-                    <tr><td colspan="3" class="px-4 py-10 text-center text-gray-400">{{ __('No data') }}</td></tr>
+                    <tr><td colspan="3" class="px-6 py-4 text-center text-gray-600 dark:text-gray-400">{{ __('No data') }}</td></tr>
                 @endforelse
             </tbody>
         </table>
     </div>
 
     {{-- 新增組合 Modal --}}
-    <div x-show="showCreate" x-cloak style="display:none"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-md p-6" @click.outside="showCreate = false">
-            <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ __('New') }} — {{ __('UI Bundles') }}</h4>
-            <form action="{{ route('admin.app.ui-bundles.store') }}" method="POST" class="space-y-4">
-                @csrf
-                <div>
-                    <label class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-1">{{ __('Name') }} <span class="text-rose-500">*</span></label>
-                    <input type="text" name="name" required
-                        class="block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 py-2 px-3 text-sm">
+    <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">
+            <div class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm" @click="showCreate = false"></div>
+            <div class="relative bg-white dark:bg-gray-800 rounded-2xl shadow-xl transform transition-all sm:max-w-md sm:w-full mx-4 text-left">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                    <h3 class="text-gray-900 dark:text-gray-200 text-lg font-semibold">{{ __('Create') }} — {{ __('UI Bundles') }}</h3>
                 </div>
-                <div class="flex justify-end gap-2 pt-2">
-                    <button type="button" @click="showCreate = false"
-                        class="px-4 py-2 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">{{ __('Cancel') }}</button>
-                    <button type="submit" class="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white font-semibold">{{ __('Save') }}</button>
-                </div>
-            </form>
+                <form action="{{ route('admin.app.ui-bundles.store') }}" method="POST">
+                    @csrf
+                    <div class="px-6 py-4 space-y-4">
+                        <div>
+                            <label class="text-gray-600 dark:text-gray-400 text-sm block mb-1">{{ __('Name') }} <span class="text-rose-500">*</span></label>
+                            <input type="text" name="name" required class="w-full px-3 py-2 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 border rounded-md text-gray-900 dark:text-gray-200 focus:ring-2 focus:ring-cyan-500 focus:border-transparent">
+                        </div>
+                    </div>
+                    <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3">
+                        <button type="button" @click="showCreate = false" class="btn-luxury-secondary">{{ __('Cancel') }}</button>
+                        <button type="submit" class="btn-luxury-primary">{{ __('Create') }}</button>
+                    </div>
+                </form>
+            </div>
         </div>
     </div>
+
+    <x-delete-confirm-modal :message="__('Are you sure you want to delete this item? This action cannot be undone.')" />
 </div>
 @endsection
diff --git a/resources/views/admin/app/ui-elements/index.blade.php b/resources/views/admin/app/ui-elements/index.blade.php
index addb371..d480c59 100644
--- a/resources/views/admin/app/ui-elements/index.blade.php
+++ b/resources/views/admin/app/ui-elements/index.blade.php
@@ -1,31 +1,31 @@
 @extends('layouts.admin')
 
 @section('content')
-<div class="container mx-auto px-4 py-6" x-data="{ showCreate: false }">
+<div class="px-6 py-8" x-data="{ showCreate: false, isDeleteConfirmOpen: false, deleteFormAction: '' }">
     @include('admin.app._tabs', ['active' => 'elements'])
 
-    <div class="mb-4">
-        <button type="button" @click="showCreate = true"
-            class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg">
-            + {{ __('New') }}
+    <div class="flex justify-end mb-4">
+        <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>
 
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
-        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-            <thead class="bg-gray-50 dark:bg-gray-900/40">
-                <tr class="text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
-                    <th class="px-4 py-3">{{ __('Preview') }}</th>
-                    <th class="px-4 py-3">{{ __('Name') }}</th>
-                    <th class="px-4 py-3">{{ __('Category') }}</th>
-                    <th class="px-4 py-3">{{ __('Created At') }}</th>
-                    <th class="px-4 py-3 text-right">{{ __('Actions') }}</th>
+    <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">
+                <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">{{ __('Preview') }}</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">{{ __('Name') }}</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">{{ __('Category') }}</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">{{ __('Created At') }}</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">{{ __('Actions') }}</th>
                 </tr>
             </thead>
-            <tbody class="divide-y divide-gray-100 dark:divide-gray-700/60 text-sm text-gray-700 dark:text-gray-200">
+            <tbody class="divide-y border-gray-200 dark:border-gray-700">
                 @forelse($elements as $element)
                     <tr>
-                        <td class="px-4 py-3">
+                        <td class="px-6 py-4">
                             @if($element->image_url)
                                 <img src="{{ $element->image_url }}" alt="{{ $element->name }}"
                                     class="h-12 w-auto max-w-[140px] object-contain rounded border border-gray-200 dark:border-gray-700 bg-gray-50">
@@ -33,62 +33,62 @@
                                 <span class="text-gray-400">—</span>
                             @endif
                         </td>
-                        <td class="px-4 py-3">{{ $element->name }}</td>
-                        <td class="px-4 py-3">
-                            <span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-xs">
-                                {{ $element->part_label }}
-                            </span>
+                        <td class="px-6 py-4 text-gray-900 dark:text-gray-200">{{ $element->name }}</td>
+                        <td class="px-6 py-4">
+                            <span class="px-2 py-1 rounded-full bg-cyan-100 dark:bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 text-xs font-semibold">{{ $element->part_label }}</span>
                         </td>
-                        <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $element->created_at?->format('Y-m-d H:i') }}</td>
-                        <td class="px-4 py-3 text-right">
-                            <form action="{{ route('admin.app.ui-elements.destroy', $element) }}" method="POST"
-                                onsubmit="return confirm('{{ __('Are you sure?') }}')" class="inline">
-                                @csrf @method('DELETE')
-                                <button type="submit" class="text-rose-600 hover:text-rose-800 text-sm">{{ __('Delete') }}</button>
-                            </form>
+                        <td class="px-6 py-4 text-gray-500 dark:text-gray-400 text-sm">{{ $element->created_at?->format('Y-m-d H:i') }}</td>
+                        <td class="px-6 py-4">
+                            <button type="button"
+                                @click="deleteFormAction = '{{ route('admin.app.ui-elements.destroy', $element) }}'; isDeleteConfirmOpen = true"
+                                class="text-red-600 hover:text-red-800">{{ __('Delete') }}</button>
                         </td>
                     </tr>
                 @empty
-                    <tr><td colspan="5" class="px-4 py-10 text-center text-gray-400">{{ __('No data') }}</td></tr>
+                    <tr><td colspan="5" class="px-6 py-4 text-center text-gray-600 dark:text-gray-400">{{ __('No data') }}</td></tr>
                 @endforelse
             </tbody>
         </table>
     </div>
 
     {{-- 新增 UI 元素 Modal --}}
-    <div x-show="showCreate" x-cloak style="display:none"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-lg p-6" @click.outside="showCreate = false">
-            <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ __('New') }} — {{ __('UI Elements') }}</h4>
-            <form action="{{ route('admin.app.ui-elements.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
-                @csrf
-                <div>
-                    <label class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-1">{{ __('Name') }} <span class="text-rose-500">*</span></label>
-                    <input type="text" name="name" required
-                        class="block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 py-2 px-3 text-sm">
+    <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">
+            <div class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm" @click="showCreate = false"></div>
+            <div class="relative bg-white dark:bg-gray-800 rounded-2xl shadow-xl transform transition-all sm:max-w-lg sm:w-full mx-4 text-left">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                    <h3 class="text-gray-900 dark:text-gray-200 text-lg font-semibold">{{ __('Create') }} — {{ __('UI Elements') }}</h3>
                 </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-1">{{ __('Category') }} <span class="text-rose-500">*</span></label>
-                    <select name="part_key" required
-                        class="block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 py-2 px-3 text-sm">
-                        @foreach($parts as $key => $part)
-                            <option value="{{ $key }}">{{ $part['label'] }}{{ $part['width'] ? ' — '.$part['width'].'x'.$part['height'] : '' }}</option>
-                        @endforeach
-                    </select>
-                    <p class="text-xs text-gray-400 mt-1">{{ __('Image will be center-cropped to the category size.') }}</p>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-1">{{ __('Upload Image') }} <span class="text-rose-500">*</span></label>
-                    <input type="file" name="file" accept="image/*" required
-                        class="block w-full text-sm text-gray-600 dark:text-gray-300 file:mr-3 file:py-2 file:px-4 file:rounded-md file:border-0 file:bg-blue-600 file:text-white hover:file:bg-blue-700">
-                </div>
-                <div class="flex justify-end gap-2 pt-2">
-                    <button type="button" @click="showCreate = false"
-                        class="px-4 py-2 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">{{ __('Cancel') }}</button>
-                    <button type="submit" class="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white font-semibold">{{ __('Save') }}</button>
-                </div>
-            </form>
+                <form action="{{ route('admin.app.ui-elements.store') }}" method="POST" enctype="multipart/form-data">
+                    @csrf
+                    <div class="px-6 py-4 space-y-4">
+                        <div>
+                            <label class="text-gray-600 dark:text-gray-400 text-sm block mb-1">{{ __('Name') }} <span class="text-rose-500">*</span></label>
+                            <input type="text" name="name" required class="w-full px-3 py-2 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 border rounded-md text-gray-900 dark:text-gray-200 focus:ring-2 focus:ring-cyan-500 focus:border-transparent">
+                        </div>
+                        <div>
+                            <label class="text-gray-600 dark:text-gray-400 text-sm block mb-1">{{ __('Category') }} <span class="text-rose-500">*</span></label>
+                            <select name="part_key" required class="w-full px-3 py-2 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 border rounded-md text-gray-900 dark:text-gray-200 focus:ring-2 focus:ring-cyan-500">
+                                @foreach($parts as $key => $part)
+                                    <option value="{{ $key }}">{{ $part['label'] }}{{ $part['width'] ? ' — '.$part['width'].'x'.$part['height'] : '' }}</option>
+                                @endforeach
+                            </select>
+                            <p class="text-xs text-gray-400 mt-1">{{ __('Image will be center-cropped to the category size.') }}</p>
+                        </div>
+                        <div>
+                            <label class="text-gray-600 dark:text-gray-400 text-sm block mb-1">{{ __('Upload Image') }} <span class="text-rose-500">*</span></label>
+                            <input type="file" name="file" accept="image/*" required class="block w-full text-sm text-gray-600 dark:text-gray-300 file:mr-3 file:py-2 file:px-4 file:rounded-md file:border-0 file:bg-cyan-600 file:text-white hover:file:bg-cyan-700">
+                        </div>
+                    </div>
+                    <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3">
+                        <button type="button" @click="showCreate = false" class="btn-luxury-secondary">{{ __('Cancel') }}</button>
+                        <button type="submit" class="btn-luxury-primary">{{ __('Create') }}</button>
+                    </div>
+                </form>
+            </div>
         </div>
     </div>
+
+    <x-delete-confirm-modal :message="__('Are you sure you want to delete this item? This action cannot be undone.')" />
 </div>
 @endsection
diff --git a/resources/views/admin/app/ui-machines/index.blade.php b/resources/views/admin/app/ui-machines/index.blade.php
index d1d0045..05028b3 100644
--- a/resources/views/admin/app/ui-machines/index.blade.php
+++ b/resources/views/admin/app/ui-machines/index.blade.php
@@ -1,48 +1,45 @@
 @extends('layouts.admin')
 
 @section('content')
-<div class="container mx-auto px-4 py-6">
+<div class="px-6 py-8">
     @include('admin.app._tabs', ['active' => 'machines'])
 
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
-        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-            <thead class="bg-gray-50 dark:bg-gray-900/40">
-                <tr class="text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
-                    <th class="px-4 py-3">{{ __('Machine') }}</th>
-                    <th class="px-4 py-3">{{ __('Current Bundle') }}</th>
-                    <th class="px-4 py-3 w-96">{{ __('Bind UI Bundle') }}</th>
+    <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">
+                <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">{{ __('Machine') }}</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">{{ __('Current Bundle') }}</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">{{ __('Bind UI Bundle') }}</th>
                 </tr>
             </thead>
-            <tbody class="divide-y divide-gray-100 dark:divide-gray-700/60 text-sm text-gray-700 dark:text-gray-200">
+            <tbody class="divide-y border-gray-200 dark:border-gray-700">
                 @forelse($machines as $machine)
                     @php
                         $currentId = data_get($machine->settings, 'ui_bundle_id');
                         $currentName = $currentId ? ($bundleNames[$currentId] ?? __('(deleted)')) : '—';
                     @endphp
                     <tr>
-                        <td class="px-4 py-3">
-                            <div class="font-medium">{{ $machine->name }}</div>
+                        <td class="px-6 py-4">
+                            <div class="font-medium text-gray-900 dark:text-gray-200">{{ $machine->name }}</div>
                             <div class="text-xs text-gray-400">{{ $machine->serial_no }}</div>
                         </td>
-                        <td class="px-4 py-3">{{ $currentName }}</td>
-                        <td class="px-4 py-3">
-                            <form action="{{ route('admin.app.ui-machines.update', $machine) }}" method="POST" class="flex gap-2">
+                        <td class="px-6 py-4 text-gray-900 dark:text-gray-200">{{ $currentName }}</td>
+                        <td class="px-6 py-4">
+                            <form action="{{ route('admin.app.ui-machines.update', $machine) }}" method="POST" class="flex gap-2 items-center max-w-md">
                                 @csrf @method('PUT')
-                                <select name="ui_bundle_id"
-                                    class="flex-1 rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 py-1.5 px-2 text-sm">
+                                <select name="ui_bundle_id" class="flex-1 px-3 py-2 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 border rounded-md text-gray-900 dark:text-gray-200 text-sm focus:ring-2 focus:ring-cyan-500">
                                     <option value="">{{ __('Not set') }}</option>
                                     @foreach($bundles as $bundle)
-                                        <option value="{{ $bundle->id }}" {{ (string)$currentId === (string)$bundle->id ? 'selected' : '' }}>
-                                            {{ $bundle->name }}
-                                        </option>
+                                        <option value="{{ $bundle->id }}" {{ (string)$currentId === (string)$bundle->id ? 'selected' : '' }}>{{ $bundle->name }}</option>
                                     @endforeach
                                 </select>
-                                <button type="submit" class="px-3 py-1.5 rounded-md bg-emerald-600 hover:bg-emerald-700 text-white text-sm">{{ __('Save') }}</button>
+                                <button type="submit" class="btn-luxury-primary">{{ __('Save') }}</button>
                             </form>
                         </td>
                     </tr>
                 @empty
-                    <tr><td colspan="3" class="px-4 py-10 text-center text-gray-400">{{ __('No data') }}</td></tr>
+                    <tr><td colspan="3" class="px-6 py-4 text-center text-gray-600 dark:text-gray-400">{{ __('No data') }}</td></tr>
                 @endforelse
             </tbody>
         </table>