feat:實作課程圖片上傳 — 封面 + 相簿管理

後端： - Migration：diving_offers 新增 cover_image 欄位、新增 course_images 表（含索引） - CourseImage Model（CREATED_AT、url accessor） - DivingOffer：cover_image_url accessor、hasMany courseImages、static::deleting() 孤兒清理 - CourseImageController：封面上傳/刪除、相簿上傳（max 3）/刪除，統一 mimes+size 驗證 - DivingOfferController：index/show 回傳加入 cover_image_url 與 images 陣列 - 修正 APP_URL 加入 port（:8080），Storage::url() 才能產生正確圖片連結前端： - courseImageApi.js：uploadCover/deleteCover/uploadImage/deleteImage - CourseCard：有封面顯示 <img>，無封面顯示漸層佔位 - CourseDetailView：封面大圖 + 相簿縮圖橫列（點擊開新分頁） - OfferFormView（編輯模式）：封面預覽/更換/刪除、相簿縮圖管理（達 3 張隱藏上傳按鈕）基礎設施： - docker-entrypoint.sh：加入 storage:link --force - docker-compose.yml：移除 storage-data named volume（改用 bind mount，避免 Nginx 讀不到圖片）測試： - CourseImageTest.php：14 個 Feature Test 全部 PASS（Storage::fake）涵蓋：上傳成功/格式驗證/大小驗證/所有權、刪除/無封面不報錯、相簿上限/sort_order 遞增、孤兒清理 OpenSpec： - course-images change 歸檔至 archive/2026-05-12-course-images - 新增 specs/course-image-upload 主規格（含 bind mount 持久化說明） Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
2026-05-12 03:54:45 +08:00
parent 81a9f84b26
commit 4baa4cb52b
20 changed files with 1048 additions and 11 deletions
@@ -0,0 +1,99 @@
+<?php
+
+namespace App\Http\Controllers\API;
+
+use App\Http\Controllers\Controller;
+use App\Models\CourseImage;
+use App\Models\DivingOffer;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
+
+class CourseImageController extends Controller
+{
+    private function validateImage(Request $request): void
+    {
+        $request->validate([
+            'image' => 'required|image|mimes:jpg,jpeg,png,webp|max:2048',
+        ]);
+    }
+
+    private function authorizeOffer(Request $request, DivingOffer $offer): void
+    {
+        if ($offer->provider_id !== $request->user()->id) {
+            abort(403, '無權操作此課程');
+        }
+    }
+
+    public function uploadCover(Request $request, int $offerId)
+    {
+        $offer = DivingOffer::findOrFail($offerId);
+        $this->authorizeOffer($request, $offer);
+        $this->validateImage($request);
+
+        if ($offer->cover_image) {
+            Storage::disk('public')->delete($offer->cover_image);
+        }
+
+        $path = $request->file('image')->store("offers/{$offerId}/cover", 'public');
+        $offer->update(['cover_image' => $path]);
+
+        return response()->json([
+            'status'          => true,
+            'message'         => '封面已上傳',
+            'cover_image_url' => $offer->cover_image_url,
+        ]);
+    }
+
+    public function deleteCover(Request $request, int $offerId)
+    {
+        $offer = DivingOffer::findOrFail($offerId);
+        $this->authorizeOffer($request, $offer);
+
+        if ($offer->cover_image) {
+            Storage::disk('public')->delete($offer->cover_image);
+            $offer->update(['cover_image' => null]);
+        }
+
+        return response()->json(['status' => true, 'message' => '封面已刪除']);
+    }
+
+    public function uploadImage(Request $request, int $offerId)
+    {
+        $offer = DivingOffer::findOrFail($offerId);
+        $this->authorizeOffer($request, $offer);
+        $this->validateImage($request);
+
+        if ($offer->courseImages()->count() >= 3) {
+            return response()->json(['status' => false, 'message' => '相簿最多 3 張圖片'], 422);
+        }
+
+        $path       = $request->file('image')->store("offers/{$offerId}/gallery", 'public');
+        $sortOrder  = ($offer->courseImages()->max('sort_order') ?? 0) + 1;
+
+        $image = CourseImage::create([
+            'diving_offer_id' => $offerId,
+            'image_path'      => $path,
+            'sort_order'      => $sortOrder,
+        ]);
+
+        return response()->json([
+            'status'  => true,
+            'message' => '圖片已上傳',
+            'data'    => ['id' => $image->id, 'url' => $image->url, 'sort_order' => $image->sort_order],
+        ], 201);
+    }
+
+    public function deleteImage(Request $request, int $imageId)
+    {
+        $image = CourseImage::with('divingOffer')->findOrFail($imageId);
+
+        if ($image->divingOffer->provider_id !== $request->user()->id) {
+            return response()->json(['status' => false, 'message' => '無權刪除此圖片'], 403);
+        }
+
+        Storage::disk('public')->delete($image->image_path);
+        $image->delete();
+
+        return response()->json(['status' => true, 'message' => '圖片已刪除']);
+    }
+}
@@ -32,9 +32,11 @@ class DivingOfferController extends Controller

        $paginated = $query->paginate($perPage);

+        $items = collect($paginated->items())->map(fn($o) => $this->formatOffer($o, false));
+
        return response()->json([
            'status' => true,
-            'data'   => $paginated->items(),
+            'data'   => $items,
            'meta'   => [
                'total'        => $paginated->total(),
                'per_page'     => $paginated->perPage(),
@@ -46,18 +48,29 @@ class DivingOfferController extends Controller

    public function show(int $id)
    {
-        $offer = DivingOffer::find($id);
+        $offer = DivingOffer::with('courseImages')->find($id);

        if (!$offer) {
-            return response()->json([
-                'status'  => false,
-                'message' => '課程不存在',
-            ], 404);
+            return response()->json(['status' => false, 'message' => '課程不存在'], 404);
        }

-        return response()->json([
-            'status' => true,
-            'data'   => $offer,
+        return response()->json(['status' => true, 'data' => $this->formatOffer($offer, true)]);
+    }
+
+    private function formatOffer(DivingOffer $offer, bool $withImages): array
+    {
+        $data = array_merge($offer->toArray(), [
+            'cover_image_url' => $offer->cover_image_url,
        ]);
+
+        if ($withImages) {
+            $data['images'] = $offer->courseImages->map(fn($img) => [
+                'id'         => $img->id,
+                'url'        => $img->url,
+                'sort_order' => $img->sort_order,
+            ])->values();
+        }
+
+        return $data;
    }
 }
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Facades\Storage;
+
+class CourseImage extends Model
+{
+    public $timestamps = false;
+    const CREATED_AT = 'created_at';
+
+    protected $fillable = [
+        'diving_offer_id',
+        'image_path',
+        'sort_order',
+    ];
+
+    protected $casts = [
+        'sort_order' => 'integer',
+        'created_at' => 'datetime',
+    ];
+
+    public function divingOffer()
+    {
+        return $this->belongsTo(DivingOffer::class);
+    }
+
+    public function getUrlAttribute(): string
+    {
+        return Storage::disk('public')->url($this->image_path);
+    }
+}
@@ -3,6 +3,7 @@
 namespace App\Models;

 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Facades\Storage;

 class DivingOffer extends Model
 {
@@ -22,6 +23,7 @@ class DivingOffer extends Model
        'description',
        'tag',
        'region',
+        'cover_image',
    ];

    protected $casts = [
@@ -31,11 +33,30 @@ class DivingOffer extends Model
        'reviews'=> 'integer',
    ];

+    protected static function booted(): void
+    {
+        static::deleting(function ($offer) {
+            Storage::disk('public')->deleteDirectory("offers/{$offer->id}");
+        });
+    }
+
+    public function getCoverImageUrlAttribute(): ?string
+    {
+        return $this->cover_image
+            ? Storage::disk('public')->url($this->cover_image)
+            : null;
+    }
+
    public function schedules()
    {
        return $this->hasMany(CourseSchedule::class, 'diving_offer_id');
    }

+    public function courseImages()
+    {
+        return $this->hasMany(CourseImage::class)->orderBy('sort_order');
+    }
+
    public function reviews()
    {
        return $this->hasMany(Review::class);