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,27 @@
+import coachApi from './coachAxios'
+
+function toFormData(file) {
+  const fd = new FormData()
+  fd.append('image', file)
+  return fd
+}
+
+export function uploadCover(offerId, file) {
+  return coachApi.post(`/provider/offers/${offerId}/cover`, toFormData(file), {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  })
+}
+
+export function deleteCover(offerId) {
+  return coachApi.delete(`/provider/offers/${offerId}/cover`)
+}
+
+export function uploadImage(offerId, file) {
+  return coachApi.post(`/provider/offers/${offerId}/images`, toFormData(file), {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  })
+}
+
+export function deleteImage(imageId) {
+  return coachApi.delete(`/provider/images/${imageId}`)
+}
@@ -9,7 +9,17 @@ defineProps({
    :to="`/courses/${offer.id}`"
    class="bg-white rounded-2xl shadow hover:shadow-lg transition overflow-hidden flex flex-col"
  >
-    <div class="bg-ocean-700 h-40 flex items-center justify-center text-white text-5xl">🤿</div>
+    <div class="h-40 overflow-hidden">
+      <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-5xl">
+        🤿
+      </div>
+    </div>

    <div class="p-4 flex flex-col gap-2 flex-1">
      <div class="flex gap-2 flex-wrap">
@@ -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
@@ -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">