[STYLE] 調整商品管理與遠端控制頁面之 UI 佈局與格式

1. 修正商品管理頁面 (Products Index) 中多處語系標籤的換行問題。
2. 調整遠端控制頁面 (Remote Index) 中 Slot No 標籤的顯示格式。
3. 優化 UI 組件的 HTML 縮排與可讀性。
4. 補齊同步商品機制相關之繁體中文翻譯 (Connection error, Failed to send command)。
This commit is contained in:
sky121113 2026-05-14 10:31:46 +08:00
parent 9ff9abef89
commit a9d44de98b
3 changed files with 24 additions and 47 deletions

View File

@ -1954,6 +1954,8 @@
"Uploading...": "上傳中...",
"Upload failed, please try again": "上傳失敗,請重試",
"Sync to All Machines": "同步到所有機台",
"Connection error": "連線錯誤",
"Failed to send command": "發送指令失敗",
"Sync Products": "同步商品資料",
"Reason for this sync...": "此次同步的原因...",
"Select Target Company": "選擇目標公司",

View File

@ -284,22 +284,19 @@ hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-be
</template>
<section class="space-y-4 animate-luxury-in" style="animation-delay: 100ms">
<h3 class="text-xs font-black text-cyan-500 uppercase tracking-[0.3em]">{{ __('Identity
& Codes') }}</h3>
<h3 class="text-xs font-black text-cyan-500 uppercase tracking-[0.3em]">{{ __('Identity & Codes') }}</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
<span
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
__('Barcode') }}</span>
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Barcode') }}</span>
<div class="text-[15px] font-mono font-bold text-slate-700 dark:text-slate-200"
x-text="selectedProduct?.barcode || '-'"></div>
</div>
<div
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
<span
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
__('Specification') }}</span>
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Specification') }}</span>
<div class="text-[15px] font-bold text-slate-700 dark:text-slate-200"
x-text="selectedProduct?.spec || '-'"></div>
</div>
@ -307,8 +304,7 @@ hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-be
<div
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
<span
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
__('Material Code') }}</span>
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Material Code') }}</span>
<div class="text-[15px] font-mono font-bold text-slate-700 dark:text-slate-200"
x-text="selectedProduct?.metadata?.material_code"></div>
</div>
@ -316,8 +312,7 @@ hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-be
<div
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
<span
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
__('Manufacturer') }}</span>
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Manufacturer') }}</span>
<div class="text-[15px] font-bold text-slate-700 dark:text-slate-200"
x-text="selectedProduct?.manufacturer || '-'"></div>
</div>
@ -325,8 +320,7 @@ hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-be
<div
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
<span
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
__('Company') }}</span>
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Company') }}</span>
<div class="text-[15px] font-bold text-slate-700 dark:text-slate-200"
x-text="selectedProduct?.company?.name"></div>
</div>
@ -336,8 +330,7 @@ hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-be
<!-- Pricing Section -->
<section class="space-y-4 animate-luxury-in" style="animation-delay: 200ms">
<h3 class="text-xs font-black text-emerald-500 uppercase tracking-[0.3em]">{{
__('Pricing Information') }}</h3>
<h3 class="text-xs font-black text-emerald-500 uppercase tracking-[0.3em]">{{ __('Pricing Information') }}</h3>
<div
class="luxury-card divide-y divide-slate-50 dark:divide-white/5 overflow-hidden border border-slate-100 dark:border-white/5 shadow-sm">
<div
@ -348,8 +341,7 @@ hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-be
</div>
<div
class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
<span class="text-[15px] font-bold text-slate-500">{{ __('Member Price')
}}</span>
<span class="text-[15px] font-bold text-slate-500">{{ __('Member Price') }}</span>
<span class="text-lg font-black text-emerald-500">$<span
x-text="formatNumber(selectedProduct?.member_price)"></span></span>
</div>
@ -364,21 +356,18 @@ hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-be
<!-- Storage & Limits -->
<section class="space-y-4 animate-luxury-in" style="animation-delay: 300ms">
<h3 class="text-xs font-black text-indigo-500 uppercase tracking-[0.3em]">{{ __('Channel
Limits Configuration') }}</h3>
<h3 class="text-xs font-black text-indigo-500 uppercase tracking-[0.3em]">{{ __('Channel Limits Configuration') }}</h3>
<div
class="luxury-card p-6 border border-slate-100 dark:border-white/5 space-y-6 shadow-sm">
<div class="flex items-center justify-between">
<div class="space-y-1">
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{
__('Track Limit') }}</p>
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ __('Track Limit') }}</p>
<p class="text-3xl font-black text-indigo-500 tracking-tighter"
x-text="selectedProduct?.track_limit || '0'"></p>
</div>
<div class="h-10 w-px bg-slate-100 dark:bg-white/10"></div>
<div class="space-y-1 text-right">
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{
__('Spring Limit') }}</p>
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ __('Spring Limit') }}</p>
<p class="text-3xl font-black text-amber-500 tracking-tighter"
x-text="selectedProduct?.spring_limit || '0'"></p>
</div>
@ -388,30 +377,26 @@ hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-be
<!-- Loyalty Points -->
<section class="space-y-4 animate-luxury-in" style="animation-delay: 400ms">
<h3 class="text-xs font-black text-rose-500 uppercase tracking-[0.3em]">{{ __('Loyalty &
Features') }}</h3>
<h3 class="text-xs font-black text-rose-500 uppercase tracking-[0.3em]">{{ __('Loyalty & Features') }}</h3>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
<div
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
<span
class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{
__('Full Points') }}</span>
class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Full Points') }}</span>
<div class="text-lg font-black text-rose-500 font-mono"
x-text="selectedProduct?.metadata?.points_full || '0'"></div>
</div>
<div
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
<span
class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{
__('Half Points') }}</span>
class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Half Points') }}</span>
<div class="text-lg font-black text-indigo-500 font-mono"
x-text="selectedProduct?.metadata?.points_half || '0'"></div>
</div>
<div
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
<span
class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{
__('Half Points Amount') }}</span>
class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Half Points Amount') }}</span>
<div class="text-lg font-black text-emerald-500 font-mono"
x-text="selectedProduct?.metadata?.points_half_amount || '0'"></div>
</div>
@ -424,8 +409,7 @@ hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-be
<div
class="p-6 border-t border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
<button @click="isDetailOpen = false" class="w-full btn-luxury-ghost">{{ __('Close Panel')
}}</button>
<button @click="isDetailOpen = false" class="w-full btn-luxury-ghost">{{ __('Close Panel') }}</button>
</div>
</div>
</div>
@ -499,8 +483,7 @@ hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-be
</svg>
</div>
<div>
<h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight uppercase">{{
__('Command Confirmation') }}</h3>
<h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight uppercase">{{ __('Command Confirmation') }}</h3>
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest mt-0.5">{{ __('Please confirm the details below') }}</p>
</div>
</div>
@ -531,8 +514,7 @@ hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-be
<div class="space-y-2 px-1 pt-3 border-t border-slate-200/50 dark:border-slate-800/50">
<label
class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-[0.2em] ml-1">{{
__('Operation Note') }}</label>
class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-[0.2em] ml-1">{{ __('Operation Note') }}</label>
<textarea x-model="confirmModal.note"
class="luxury-input w-full min-h-[100px] text-sm py-3 px-4 bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 focus:border-cyan-500/50"
placeholder="{{ __('Reason for this sync...') }}"></textarea>

View File

@ -810,9 +810,7 @@
</div>
<div class="space-y-6">
<div class="space-y-2">
<label
class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-[0.2em] ml-1">{{
__('Select Target Slot') }}</label>
class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-[0.2em] ml-1">{{ __('Select Target Slot') }}</label>
<div id="slot-select-wrapper" class="relative min-h-[60px]">
<!-- Content Injected Dynamically by Alpine.js -->
</div>
@ -942,8 +940,7 @@
</svg>
</div>
<div>
<h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight uppercase">{{
__('Command Confirmation') }}</h3>
<h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight uppercase">{{ __('Command Confirmation') }}</h3>
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest mt-0.5">{{ __('Please confirm the details below') }}</p>
</div>
</div>
@ -960,10 +957,7 @@
<span class="text-sm font-black text-slate-800 dark:text-slate-200"
x-text="selectedMachine ? selectedMachine.name : ''"></span>
</div>
<div class="space-y-2 px-1 pt-3 border-t border-slate-200/50 dark:border-slate-800/50">
<label
class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-[0.2em] ml-1">{{
__('Operation Note') }}</label>
class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-[0.2em] ml-1">{{ __('Operation Note') }}</label>
<textarea x-model="note"
class="luxury-input w-full min-h-[100px] text-sm py-3 px-4 bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 focus:border-cyan-500/50"
placeholder="{{ __('Reason for this command...') }}"></textarea>
@ -980,8 +974,7 @@
<template x-if="confirmModal.params.slot_no">
<div
class="flex justify-between items-center pt-3 border-t border-slate-200/50 dark:border-slate-800/50">
<span class="text-[10px] font-black text-violet-500 uppercase tracking-widest">{{
__('Slot No') }}</span>
<span class="text-[10px] font-black text-violet-500 uppercase tracking-widest">{{ __('Slot No') }}</span>
<span class="text-sm font-black text-slate-800 dark:text-slate-200"
x-text="confirmModal.params.slot_no"></span>
</div>