From 81acddffca5f8bef566ad490875bda848ad106cb Mon Sep 17 00:00:00 2001
From: terrylee <bloglee.work@gmail.com>
Date: Thu, 16 Jul 2026 11:10:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(app-ui):=20=E7=B5=84=E5=90=88=E5=85=A7?=
 =?UTF-8?q?=E5=AE=B9=E8=A8=AD=E5=AE=9A=E9=A0=81=E4=BE=9D=E9=A1=9E=E5=88=A5?=
 =?UTF-8?q?=E7=BE=A4=E7=B5=84=E5=88=86=E5=A1=8A+=E5=88=86=E9=9A=94?=
 =?UTF-8?q?=E7=B7=9A(A=E7=B3=BB=E5=88=97/E=E7=B3=BB=E5=88=97/P=E7=B3=BB?=
 =?UTF-8?q?=E5=88=97)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

config 加 groups 定義(標題+順序)；content 頁 groupBy group 渲染，塊間加 hr

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 config/ui_parts.php                           |  7 ++
 .../admin/app/ui-bundles/content.blade.php    | 72 ++++++++++++-------
 2 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/config/ui_parts.php b/config/ui_parts.php
index 928fbf3..db7e15e 100644
--- a/config/ui_parts.php
+++ b/config/ui_parts.php
@@ -20,6 +20,13 @@
 */
 
 return [
+    // 群組定義（決定內容設定頁的分塊標題與順序；未列到的群組排最後）
+    'groups' => [
+        'fullscreen'  => '滿版畫面（A 系列）',
+        'transaction' => '交易結果（E 系列）',
+        'payment'     => '支付方式（P 系列）',
+    ],
+
     'parts' => [
         // === A 系列：滿版 / 大圖背景 ===
         'A1' => ['label' => 'A1 - 頁面跳轉中',   'group' => 'fullscreen', 'type' => 'image', 'width' => 1080, 'height' => 1920, 'active' => true],
diff --git a/resources/views/admin/app/ui-bundles/content.blade.php b/resources/views/admin/app/ui-bundles/content.blade.php
index f0f1afb..49a1e35 100644
--- a/resources/views/admin/app/ui-bundles/content.blade.php
+++ b/resources/views/admin/app/ui-bundles/content.blade.php
@@ -15,34 +15,52 @@
     <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 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-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="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' : '' }}>
-                                {{ $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">
-                        <p x-show="!thumb" x-cloak class="text-xs text-gray-400">{{ __('No image selected') }}</p>
+        @php
+            $grouped = collect($parts)->groupBy('group', true);
+            $groupDefs = config('ui_parts.groups', []);
+            // 群組順序：先照 config 定義，未定義者排最後，且只留實際有部位的群組
+            $orderedGroups = collect($groupDefs)->keys()
+                ->merge($grouped->keys())->unique()
+                ->filter(fn($g) => $grouped->has($g))->values();
+            $firstGroup = true;
+        @endphp
+
+        @foreach($orderedGroups as $groupKey)
+            @if(!$firstGroup)
+                <hr class="my-8 border-t border-gray-200 dark:border-gray-700">
+            @endif
+            @php $firstGroup = false; @endphp
+
+            <h4 class="text-base font-semibold text-gray-800 dark:text-gray-200 mb-3">{{ $groupDefs[$groupKey] ?? $groupKey }}</h4>
+            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                @foreach($grouped[$groupKey] 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-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="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' : '' }}>
+                                    {{ $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">
+                            <p x-show="!thumb" x-cloak class="text-xs text-gray-400">{{ __('No image selected') }}</p>
+                        </div>
                     </div>
-                </div>
-            @endforeach
-        </div>
+                @endforeach
+            </div>
+        @endforeach
 
         <div class="mt-6 flex justify-end">
             <button type="submit" class="btn-luxury-primary">{{ __('Save') }}</button>