mama/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] 修復 WebP 轉換 Palette 錯誤並優化照片獨立槽位上傳 UI
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 1m1s
Details

Browse Source
This commit is contained in:
sky121113
2026-03-18 16:25:58 +08:00
parent c767fe4849
commit fe9c9e0c4a
2 changed files with 83 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
resources/views/admin/basic-settings/machines/edit.blade.php
View File

@@ -1,7 +1,14 @@
@extends('layouts.admin')
@section('content')
<div class="space-y-10 pb-20" x-data="{ selectedFileCount: 0, handleFileChange(e) { this.selectedFileCount = e.target.files.length; } }">
<div class="space-y-10 pb-20" x-data="{
selectedFiles: [null, null, null],
handleFileChange(e, index) {
if (e.target.files.length > 0) {
this.selectedFiles[index] = URL.createObjectURL(e.target.files[0]);
}
}
}">
<!-- Header -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
<div class="flex items-center gap-4">
@@ -227,45 +234,43 @@
</div>
<div class="space-y-6">
@if(!empty($machine->image_urls))
<div class="grid grid-cols-3 gap-3">
@foreach($machine->image_urls as $url)
<div class="relative aspect-square rounded-2xl overflow-hidden border border-slate-100 dark:border-slate-800 shadow-sm group">
<img src="{{ $url }}" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
</div>
@endforeach
</div>
@else
<div class="p-6 rounded-2xl border border-dashed border-slate-200 dark:border-slate-800 text-center">
<p class="text-xs font-bold text-slate-400 capitalize">{{ __('No images uploaded') }}</p>
</div>
@endif
<div class="grid grid-cols-3 gap-4">
@for($i = 0; $i < 3; $i++)
<div class="relative group">
<label class="relative flex flex-col items-center justify-center aspect-square border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-3xl cursor-pointer bg-slate-50/50 dark:bg-slate-900/50 hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-all overflow-hidden">
<!-- Current Image or Preview -->
<div class="absolute inset-0 w-full h-full">
@if(isset($machine->image_urls[$i]))
<img src="{{ $machine->image_urls[$i] }}" class="w-full h-full object-cover" x-show="!selectedFiles[{{ $i }}]">
@endif
<template x-if="selectedFiles[{{ $i }}]">
<img :src="selectedFiles[{{ $i }}]" class="w-full h-full object-cover">
</template>
</div>
<div>
<label class="block text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-2">{{ __('Upload New Images') }} ({{ __('Max 3') }})</label>
<label class="relative flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-3xl cursor-pointer bg-slate-50/50 dark:bg-slate-900/50 hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-all group">
<template x-if="selectedFileCount === 0">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<svg class="w-8 h-8 mb-3 text-slate-400 group-hover:text-cyan-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
<!-- Overlay for Empty/Hover -->
<div class="relative z-10 flex flex-col items-center justify-center p-4 bg-white/60 dark:bg-black/40 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity w-full h-full"
:class="{'opacity-100': !selectedFiles[{{ $i }}] && !@json(isset($machine->image_urls[$i]))}">
<svg class="w-6 h-6 mb-1 text-slate-500 dark:text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4" />
</svg>
<p class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">{{ __('Click to upload') }}</p>
<span class="text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-200">
{{ isset($machine->image_urls[$i]) || false ? __('Change') : __('Upload') }}
</span>
</div>
</template>
<template x-if="selectedFileCount > 0">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<div class="w-10 h-10 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-500 mb-2">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="text-xs font-black text-emerald-500 uppercase tracking-widest" x-text="`${selectedFileCount} {{ __('files selected') }}`"></p>
</div>
</template>
<input type="file" name="images[]" multiple accept="image/*" class="hidden" @change="handleFileChange">
</label>
<p class="text-[10px] text-slate-400 mt-2 font-bold uppercase tracking-widest">* {{ __('Uploading new images will replace all existing images.') }}</p>
<input type="file" name="images[{{ $i }}]" accept="image/*" class="hidden" @change="handleFileChange($event, {{ $i }})">
</label>
<div class="mt-2 text-center">
<span class="text-[9px] font-black text-slate-400 uppercase tracking-[0.2em]">{{ __('Slot') }} {{ $i + 1 }}</span>
</div>
</div>
@endfor
</div>
<p class="text-[10px] text-slate-400 mt-4 font-bold uppercase tracking-widest leading-relaxed">
* {{ __('You can upload images one by one. Supporting up to 3 slots.') }}<br>
* {{ __('Click any slot to select or replace a photo.') }}
</p>
</div>
</div>
</div>