style(app-ui): APP管理三頁改用站上設計系統(luxury按鈕/標準表格/膠囊tabs/標準modal/刪除確認)
- 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>
This commit is contained in:
parent
b46124e1bf
commit
9ea68c770c
@ -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",
|
||||
|
||||
@ -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 元素已新增",
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">← {{ __('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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user