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

73
app/Http/Controllers/Admin/BasicSettings/MachineSettingController.php
View File

@@ -148,20 +148,30 @@ class MachineSettingController extends AdminController
'updater_id' => auth()->id(), 'updater_id' => auth()->id(),
])); ]));
// 處理圖片更新 (若有上傳新圖片，則替換或附加，這裡採簡單邏輯：若有傳 images 則全換) // 處理圖片更新 (支援 3 個獨立槽位)
if ($request->hasFile('images')) { if ($request->hasFile('images')) {
// 刪除舊圖 $currentImages = $machine->images ?? [];
if (!empty($machine->images)) { $newImages = $request->file('images');
foreach ($machine->images as $oldPath) { $updated = false;
Storage::disk('public')->delete($oldPath);
foreach ($newImages as $index => $file) {
// 限制 3 個槽位 (0, 1, 2)
if ($index < 0 || $index > 2) continue;
// 刪除該槽位的舊圖
if (isset($currentImages[$index]) && !empty($currentImages[$index])) {
\Illuminate\Support\Facades\Storage::disk('public')->delete($currentImages[$index]);
} }
// 處理並儲存新圖
$currentImages[$index] = $this->processAndStoreImage($file);
$updated = true;
} }
$imagePaths = []; if ($updated) {
foreach (array_slice($request->file('images'), 0, 3) as $image) { ksort($currentImages);
$imagePaths[] = $this->processAndStoreImage($image); $machine->update(['images' => array_values($currentImages)]);
} }
$machine->update(['images' => $imagePaths]);
} }
return redirect()->route('admin.basic-settings.machines.index') return redirect()->route('admin.basic-settings.machines.index')
@@ -169,46 +179,47 @@ class MachineSettingController extends AdminController
} }
/** /**
* 處理圖片並轉換為 WebP * 處理並儲存圖片 (轉換為 WebP 並調整大小)
*/ */
private function processAndStoreImage($file): string protected function processAndStoreImage($file)
{ {
$filename = Str::random(40) . '.webp'; $path = 'machines/' . \Illuminate\Support\Str::random(40) . '.webp';
$path = 'machines/' . $filename;
// 建立圖資源
$image = null;
$extension = strtolower($file->getClientOriginalExtension());
switch ($extension) { // 載入原圖
case 'jpeg': $imageInfo = getimagesize($file->getRealPath());
case 'jpg': $mime = $imageInfo['mime'];
switch ($mime) {
case 'image/jpeg':
$image = imagecreatefromjpeg($file->getRealPath()); $image = imagecreatefromjpeg($file->getRealPath());
break; break;
case 'png': case 'image/png':
$image = imagecreatefrompng($file->getRealPath()); $image = imagecreatefrompng($file->getRealPath());
break; break;
case 'gif': case 'image/gif':
$image = imagecreatefromgif($file->getRealPath()); $image = imagecreatefromgif($file->getRealPath());
break; break;
case 'webp': default:
$image = imagecreatefromwebp($file->getRealPath()); return $file->store('machines', 'public');
break;
} }
if ($image) { if ($image) {
// 確保目錄存在 // [修正] imagewebp(): Palette image not supported by webp
Storage::disk('public')->makeDirectory('machines'); // 若為 Palette 圖片 (例如 GIF)，轉換為 Truecolor
$fullPath = Storage::disk('public')->path($path); if (!imageistruecolor($image)) {
imagepalettetotruecolor($image);
}
\Illuminate\Support\Facades\Storage::disk('public')->makeDirectory('machines');
$fullPath = \Illuminate\Support\Facades\Storage::disk('public')->path($path);
// 轉換並儲存 // 轉換並儲存 (品質 80)
imagewebp($image, $fullPath, 80); // 品質 80 imagewebp($image, $fullPath, 80);
imagedestroy($image); imagedestroy($image);
return $path; return $path;
} }
// Fallback to standard store if GD fails
return $file->store('machines', 'public'); return $file->store('machines', 'public');
} }
} }

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

@@ -1,7 +1,14 @@
@extends('layouts.admin') @extends('layouts.admin')
@section('content') @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 --> <!-- Header -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6"> <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
@@ -227,45 +234,43 @@
</div> </div>
<div class="space-y-6"> <div class="space-y-6">
@if(!empty($machine->image_urls)) <div class="grid grid-cols-3 gap-4">
<div class="grid grid-cols-3 gap-3"> @for($i = 0; $i < 3; $i++)
@foreach($machine->image_urls as $url) <div class="relative group">
<div class="relative aspect-square rounded-2xl overflow-hidden border border-slate-100 dark:border-slate-800 shadow-sm 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">
<img src="{{ $url }}" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> <!-- Current Image or Preview -->
</div> <div class="absolute inset-0 w-full h-full">
@endforeach @if(isset($machine->image_urls[$i]))
</div> <img src="{{ $machine->image_urls[$i] }}" class="w-full h-full object-cover" x-show="!selectedFiles[{{ $i }}]">
@else @endif
<div class="p-6 rounded-2xl border border-dashed border-slate-200 dark:border-slate-800 text-center"> <template x-if="selectedFiles[{{ $i }}]">
<p class="text-xs font-bold text-slate-400 capitalize">{{ __('No images uploaded') }}</p> <img :src="selectedFiles[{{ $i }}]" class="w-full h-full object-cover">
</div> </template>
@endif </div>
<div> <!-- Overlay for Empty/Hover -->
<label class="block text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-2">{{ __('Upload New Images') }} ({{ __('Max 3') }})</label> <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"
<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"> :class="{'opacity-100': !selectedFiles[{{ $i }}] && !@json(isset($machine->image_urls[$i]))}">
<template x-if="selectedFileCount === 0"> <svg class="w-6 h-6 mb-1 text-slate-500 dark:text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-col items-center justify-center pt-5 pb-6"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4" />
<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" />
</svg> </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> </div>
</template>
<template x-if="selectedFileCount > 0"> <input type="file" name="images[{{ $i }}]" accept="image/*" class="hidden" @change="handleFileChange($event, {{ $i }})">
<div class="flex flex-col items-center justify-center pt-5 pb-6"> </label>
<div class="w-10 h-10 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-500 mb-2"> <div class="mt-2 text-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <span class="text-[9px] font-black text-slate-400 uppercase tracking-[0.2em]">{{ __('Slot') }} {{ $i + 1 }}</span>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" /> </div>
</svg> </div>
</div> @endfor
<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>
</div> </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> </div>
</div> </div>