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>

frontend/src/views/CourseDetailView.vue

@@ -125,7 +125,31 @@ async function submitBooking() {
         ← 返回課程列表
       </RouterLink>
 
-      <div class="bg-ocean-700 rounded-2xl h-56 flex items-center justify-center text-white text-7xl mb-6">🤿</div>
+      <!-- 封面大圖 -->
+      <div class="rounded-2xl h-64 overflow-hidden mb-4">
+        <img
+          v-if="offer.cover_image_url"
+          :src="offer.cover_image_url"
+          :alt="offer.title"
+          class="w-full h-full object-cover"
+        />
+        <div v-else class="bg-gradient-to-br from-ocean-700 to-ocean-500 h-full flex items-center justify-center text-white text-7xl">
+          🤿
+        </div>
+      </div>
+
+      <!-- 相簿縮圖列 -->
+      <div v-if="offer.images && offer.images.length > 0" class="flex gap-2 mb-6">
+        <a
+          v-for="img in offer.images"
+          :key="img.id"
+          :href="img.url"
+          target="_blank"
+          class="w-24 h-20 rounded-xl overflow-hidden shrink-0 border-2 border-transparent hover:border-ocean-400 transition"
+        >
+          <img :src="img.url" class="w-full h-full object-cover" />
+        </a>
+      </div>
 
       <div class="flex flex-wrap gap-2 mb-3">
         <span

frontend/src/views/coach/OfferFormView.vue

@@ -2,6 +2,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import coachApi from '../../api/coachAxios'
+import { uploadCover, deleteCover, uploadImage, deleteImage } from '../../api/courseImageApi'
 
 const route  = useRoute()
 const router = useRouter()
@@ -25,6 +26,12 @@ const form = ref({
   description: '',
 })
 
+// 圖片管理
+const coverUrl    = ref(null)
+const galleryImgs = ref([])
+const imgUploading = ref(false)
+const imgError     = ref('')
+
 onMounted(async () => {
   if (!isEdit.value) return
   loading.value = true
@@ -41,6 +48,8 @@ onMounted(async () => {
       badges:      Array.isArray(o.badges) ? o.badges.join(', ') : (o.badges || ''),
       description: o.description || '',
     }
+    coverUrl.value    = o.cover_image_url || null
+    galleryImgs.value = o.images || []
   } catch (e) {
     error.value = e.response?.data?.message || '無法載入課程資料'
   } finally {
@@ -48,6 +57,49 @@ onMounted(async () => {
   }
 })
 
+async function onCoverChange(e) {
+  const file = e.target.files[0]
+  if (!file) return
+  imgUploading.value = true
+  imgError.value = ''
+  try {
+    const res = await uploadCover(route.params.id, file)
+    coverUrl.value = res.data.cover_image_url
+  } catch (e) {
+    imgError.value = e.response?.data?.message || '封面上傳失敗'
+  } finally {
+    imgUploading.value = false
+    e.target.value = ''
+  }
+}
+
+async function onDeleteCover() {
+  if (!confirm('確定刪除封面？')) return
+  await deleteCover(route.params.id)
+  coverUrl.value = null
+}
+
+async function onGalleryChange(e) {
+  const file = e.target.files[0]
+  if (!file) return
+  imgUploading.value = true
+  imgError.value = ''
+  try {
+    const res = await uploadImage(route.params.id, file)
+    galleryImgs.value.push(res.data.data)
+  } catch (e) {
+    imgError.value = e.response?.data?.message || '圖片上傳失敗'
+  } finally {
+    imgUploading.value = false
+    e.target.value = ''
+  }
+}
+
+async function onDeleteImage(img) {
+  await deleteImage(img.id)
+  galleryImgs.value = galleryImgs.value.filter(i => i.id !== img.id)
+}
+
 async function submit() {
   errors.value = {}
   error.value  = ''
@@ -161,6 +213,51 @@ async function submit() {
           class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 resize-none" />
       </div>
 
+      <!-- 圖片管理（僅編輯模式） -->
+      <div v-if="isEdit" class="border border-gray-200 rounded-xl p-5 space-y-5">
+        <h3 class="text-sm font-semibold text-gray-700">課程圖片</h3>
+        <p v-if="imgError" class="text-red-500 text-xs">{{ imgError }}</p>
+
+        <!-- 封面 -->
+        <div>
+          <label class="block text-xs text-gray-500 mb-2">封面圖片（1 張）</label>
+          <div class="flex items-center gap-4">
+            <div class="w-32 h-24 rounded-lg overflow-hidden bg-gray-100 shrink-0">
+              <img v-if="coverUrl" :src="coverUrl" class="w-full h-full object-cover" />
+              <div v-else class="w-full h-full flex items-center justify-center text-gray-400 text-2xl">🤿</div>
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="cursor-pointer text-xs bg-gray-900 text-white px-3 py-1.5 rounded-lg hover:bg-gray-700 transition text-center">
+                {{ coverUrl ? '更換封面' : '上傳封面' }}
+                <input type="file" accept="image/jpeg,image/png,image/webp" class="hidden" @change="onCoverChange" :disabled="imgUploading" />
+              </label>
+              <button v-if="coverUrl" @click="onDeleteCover" type="button"
+                class="text-xs text-red-500 hover:text-red-700 underline">刪除封面</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 相簿 -->
+        <div>
+          <label class="block text-xs text-gray-500 mb-2">相簿圖片（最多 3 張）</label>
+          <div class="flex gap-3 flex-wrap">
+            <div v-for="img in galleryImgs" :key="img.id" class="relative w-24 h-20 rounded-lg overflow-hidden">
+              <img :src="img.url" class="w-full h-full object-cover" />
+              <button @click="onDeleteImage(img)" type="button"
+                class="absolute top-1 right-1 bg-black/60 text-white rounded-full w-5 h-5 text-xs flex items-center justify-center hover:bg-black/80">
+                ✕
+              </button>
+            </div>
+            <label v-if="galleryImgs.length < 3"
+              class="w-24 h-20 rounded-lg border-2 border-dashed border-gray-300 flex items-center justify-center cursor-pointer hover:border-ocean-400 transition text-gray-400 text-xl">
+              +
+              <input type="file" accept="image/jpeg,image/png,image/webp" class="hidden" @change="onGalleryChange" :disabled="imgUploading" />
+            </label>
+          </div>
+          <p v-if="imgUploading" class="text-xs text-gray-400 mt-1">上傳中...</p>
+        </div>
+      </div>
+
       <div class="flex gap-3 justify-end pt-2">
         <RouterLink to="/coach/dashboard"
           class="px-5 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition">