[STYLE] 改善 APK 版本新增頁面 UI 與提示統一化
1. 版本代碼欄位改為 ±1 Stepper 風格（`type="text" inputmode="numeric"`），移除瀏覽器原生上下箭頭 2. 機台風味下拉選單改為 `x-searchable-select` 搜尋式選單，支援關鍵字篩選並統一 UI 風格 3. 移除 index 頁面的 session success 畫面提示框，改由全域 toast 統一處理 4. 移除 create 頁面的 $errors 畫面錯誤列表，改由全域 toast 統一顯示錯誤訊息
This commit is contained in:
sky121113
parent
62f54499ce
commit
72f166eb14
@ -24,6 +24,13 @@
|
||||
fileName: '',
|
||||
isDragging: false,
|
||||
isForced: false,
|
||||
versionCode: '{{ old('version_code', '') }}',
|
||||
|
||||
adjustVersionCode(delta) {
|
||||
const current = parseInt(this.versionCode) || 0;
|
||||
const next = Math.max(1, current + delta);
|
||||
this.versionCode = next.toString();
|
||||
},
|
||||
|
||||
submitForm() {
|
||||
const form = this.$el;
|
||||
@ -90,23 +97,6 @@
|
||||
novalidate>
|
||||
@csrf
|
||||
|
||||
{{-- 錯誤提示 --}}
|
||||
@if ($errors->any())
|
||||
<div class="p-5 bg-rose-500/10 border border-rose-500/20 text-rose-600 dark:text-rose-400 rounded-2xl flex items-start gap-4 animate-luxury-in font-bold">
|
||||
<div class="w-8 h-8 bg-rose-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm tracking-wide">{{ __('Please check the following errors:') }}</p>
|
||||
<ul class="mt-1 text-xs list-disc list-inside opacity-80">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
{{-- 左欄：版本基本資訊 --}}
|
||||
<div class="lg:col-span-7 space-y-6">
|
||||
@ -132,7 +122,21 @@
|
||||
{{-- 版本代碼 --}}
|
||||
<div>
|
||||
<label class="block text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-2">{{ __('Version Code') }} <span class="text-rose-500">*</span></label>
|
||||
<input type="number" name="version_code" value="{{ old('version_code') }}" required min="1" class="luxury-input w-full" placeholder="{{ __('e.g., 100806') }}">
|
||||
<div class="flex items-center h-12 rounded-2xl border border-slate-200/50 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-900/50 overflow-hidden focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all">
|
||||
<button type="button" @click="adjustVersionCode(-1)"
|
||||
class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="h-6 w-px bg-slate-200 dark:bg-slate-700/50"></div>
|
||||
<input type="text" inputmode="numeric" name="version_code" x-model="versionCode" required
|
||||
class="flex-1 min-w-0 h-full bg-transparent border-none text-center text-lg font-black text-slate-800 dark:text-white focus:ring-0 px-3"
|
||||
placeholder="{{ __('e.g., 100806') }}">
|
||||
<div class="h-6 w-px bg-slate-200 dark:bg-slate-700/50"></div>
|
||||
<button type="button" @click="adjustVersionCode(1)"
|
||||
class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 5v14M5 12h14"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="mt-1.5 text-[10px] font-bold text-slate-400/70 dark:text-slate-500/70 tracking-wide">{{ __('Must be strictly greater than previous version') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -140,10 +144,16 @@
|
||||
{{-- 機台風味 --}}
|
||||
<div>
|
||||
<label class="block text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-2">{{ __('Machine Flavor') }} <span class="text-rose-500">*</span></label>
|
||||
<select name="flavor" required class="luxury-input w-full">
|
||||
<option value="" disabled {{ old('flavor') ? '' : 'selected' }}>{{ __('Select flavor...') }}</option>
|
||||
<option value="S_12_XY_U_Standard_" {{ old('flavor') == 'S_12_XY_U_Standard_' ? 'selected' : '' }}>S_12_XY_U_Standard_ (S號 / Android 12 / XY主板)</option>
|
||||
</select>
|
||||
<x-searchable-select name="flavor" id="apk-flavor-select"
|
||||
:placeholder="__('Select flavor...')"
|
||||
:selected="old('flavor')"
|
||||
:hasSearch="true"
|
||||
required>
|
||||
{{-- S號 / Android 12 / XY主板 × 客戶專案 --}}
|
||||
<option value="S_12_XY_U_Chengwai" data-title="S_12_XY_U_Chengwai （晟崴客製 / S12 / XY主板）">S_12_XY_U_Chengwai （晟崴客製 / S12 / XY主板）</option>
|
||||
<option value="S_12_XY_U_General" data-title="S_12_XY_U_General （通用主幹 / S12 / XY主板）">S_12_XY_U_General （通用主幹 / S12 / XY主板）</option>
|
||||
<option value="S_12_XY_U_Cmuh" data-title="S_12_XY_U_Cmuh （中國醫客製 / S12 / XY主板）">S_12_XY_U_Cmuh （中國醫客製 / S12 / XY主板）</option>
|
||||
</x-searchable-select>
|
||||
<p class="mt-1.5 text-[10px] font-bold text-slate-400/70 dark:text-slate-500/70 tracking-wide">{{ __('Target hardware flavor for this APK') }}</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -135,13 +135,6 @@
|
||||
<p class="text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.4em] animate-pulse">{{ __('Loading Data') }}...</p>
|
||||
</div>
|
||||
|
||||
@if(session('success'))
|
||||
<div class="p-4 mb-6 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 font-extrabold flex items-center gap-3">
|
||||
<svg class="w-5 h-5 shrink-0 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span>{{ session('success') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Main Card -->
|
||||
<div class="luxury-card rounded-3xl p-8 animate-luxury-in">
|
||||
<div class="overflow-x-auto">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user