b42695c4b8
1. 通行碼與取貨碼：新增代碼預覽、重新產生功能與到期時間預覽邏輯。 2. 通行碼：允許天數設為 0 (永久)，並改用搜尋式下拉選單選取機台。 3. 取貨碼：加強表單檢核並整合自訂 Toast 提示。 4. 語系優化：補齊繁中、英文鍵值，並完整建立日文語系目錄 (lang/ja) 與 JSON 檔案。 5. 組件優化：更新 PageHeader 與 TabNav 組件，提升 UI 互動性與一致性。 6. 訪客功能：新增通行碼訪客端查詢介面與控制器。 7. 其他模組：同步調整機台、遠端與倉庫模組視圖以符合極簡奢華風。
72 lines
2.5 KiB
PHP
72 lines
2.5 KiB
PHP
{{--
|
||
頁面標題區塊 (x-page-header)
|
||
鎖定所有頁面的 h1 標題 + 副標題 + 右側 Action 區樣式。
|
||
|
||
Props:
|
||
- $title (string) 必填 — 頁面主標題（建議使用 __('key') 翻譯）
|
||
- $subtitle (string) 選填 — 副標題描述文字
|
||
|
||
Slot:
|
||
- $slot — 選填，右側 Action 按鈕區（btn-luxury-primary 等）
|
||
|
||
用法：
|
||
════════════════════════════════════
|
||
1. 無 Action 按鈕（純標題）：
|
||
<x-page-header
|
||
:title="__('Machine List')"
|
||
:subtitle="__('Manage your machine fleet')"
|
||
/>
|
||
|
||
2. 帶右側 Action 按鈕：
|
||
<x-page-header
|
||
:title="__('Warehouse Overview')"
|
||
:subtitle="__('Manage your warehouses')"
|
||
>
|
||
<button @click="openCreateModal()" class="btn-luxury-primary flex items-center gap-2">
|
||
<svg class="w-4 h-4" ...>...</svg>
|
||
<span class="text-sm sm:text-base">{{ __('Add') }}</span>
|
||
</button>
|
||
</x-page-header>
|
||
|
||
3. 帶 Alpine 動態 Action（如 Tab 控制的按鈕）：
|
||
<x-page-header :title="__('Product Management')" :subtitle="__('...')">
|
||
<template x-if="activeTab === 'products'">
|
||
<a href="..." class="btn-luxury-primary ...">...</a>
|
||
</template>
|
||
</x-page-header>
|
||
════════════════════════════════════
|
||
--}}
|
||
|
||
@props([
|
||
'title' => '',
|
||
'subtitle' => '',
|
||
])
|
||
|
||
<div class="flex items-center justify-between gap-4">
|
||
{{-- 左側：標題 + 副標題 --}}
|
||
<div class="flex items-center gap-4 min-w-0">
|
||
@if(isset($back))
|
||
<div class="shrink-0">
|
||
{{ $back }}
|
||
</div>
|
||
@endif
|
||
<div class="min-w-0">
|
||
<h1 class="text-2xl sm:text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display transition-all duration-300 truncate">
|
||
{{ $title }}
|
||
</h1>
|
||
@if($subtitle)
|
||
<p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest truncate">
|
||
{{ $subtitle }}
|
||
</p>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 右側：Action 按鈕（透過 slot 傳入，無傳入則不渲染） --}}
|
||
@if($slot->isNotEmpty())
|
||
<div class="flex items-center gap-3 shrink-0">
|
||
{{ $slot }}
|
||
</div>
|
||
@endif
|
||
</div>
|