feat:實作評價系統 — 匿名評價、有幫助投票、手動完成預約

後端：
- 新增 reviews / review_edits / review_votes migration（含索引）
- Review / ReviewEdit / ReviewVote Model
- ReviewController：評價 CRUD、資格驗證（completed booking）、rating 即時重算
- toggleHelpful：Member 限定、GREATEST 原子防負、DB transaction 同步
- AdminReviewController：全量列表、刪除（含重算）
- AdminBookingController：全量列表、手動標記 completed
- ProviderBookingController 新增 complete 方法（教練手動完成預約）
- DevelopmentSeeder：快速重建測試資料（admin/coach/member + offers + bookings）
- EnsureAdmin middleware 正式納入 bootstrap/app.php
- Nginx server_name 加入 cfdive.local

前端：
- 課程詳情頁加入評價區塊（星等分布、排序切換、撰寫/修改/刪除、有幫助 Toggle）
- Coach Portal 新增「課程評價」頁（只讀，依課程分組）
- Coach 預約管理加入「完成」按鈕
- Admin 新增「預約管理」頁（標記完成）、「評價管理」頁（刪除）
- Admin / Coach Navbar 新增對應連結

OpenSpec：
- review-system change 歸檔至 archive/2026-05-12-review-system
- 新增 specs/review-lifecycle 與 specs/review-voting 主規格
- review-voting spec 補充 Member 限定與 GREATEST 原子更新說明

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

frontend/src/api/coachBookingApi.js

@@ -15,3 +15,7 @@ export function rejectBooking(id) {
 export function cancelBooking(id) {
   return coachApi.put(`/provider/bookings/${id}/cancel`)
 }
+
+export function completeBooking(id) {
+  return coachApi.put(`/provider/bookings/${id}/complete`)
+}

frontend/src/api/reviewApi.js

@@ -0,0 +1,27 @@
+import api from './axios'
+import axios from 'axios'
+
+const publicApi = axios.create({
+  baseURL: import.meta.env.VITE_API_URL + '/api',
+  headers: { Accept: 'application/json' },
+})
+
+export function getReviews(offerId, sort = 'helpful') {
+  return publicApi.get(`/diving-offers/${offerId}/reviews`, { params: { sort } })
+}
+
+export function createReview(payload) {
+  return api.post('/member/reviews', payload)
+}
+
+export function updateReview(id, payload) {
+  return api.put(`/member/reviews/${id}`, payload)
+}
+
+export function deleteReview(id) {
+  return api.delete(`/member/reviews/${id}`)
+}
+
+export function toggleHelpful(reviewId) {
+  return api.post(`/reviews/${reviewId}/helpful`)
+}

frontend/src/components/AdminNavBar.vue

@@ -20,6 +20,8 @@ async function handleLogout() {
         <RouterLink to="/admin/members"   class="text-sm hover:text-slate-300 transition">會員管理</RouterLink>
         <RouterLink to="/admin/providers" class="text-sm hover:text-slate-300 transition">教練管理</RouterLink>
         <RouterLink to="/admin/offers"    class="text-sm hover:text-slate-300 transition">課程管理</RouterLink>
+        <RouterLink to="/admin/bookings"  class="text-sm hover:text-slate-300 transition">預約管理</RouterLink>
+        <RouterLink to="/admin/reviews"   class="text-sm hover:text-slate-300 transition">評價管理</RouterLink>
       </div>
       <div class="flex items-center gap-4 text-sm">
         <span class="text-slate-400">{{ adminAuth.user?.name }}</span>

frontend/src/components/CoachNavBar.vue

@@ -21,6 +21,7 @@ async function handleLogout() {
         <RouterLink to="/coach/dashboard"  class="text-sm hover:text-gray-300 transition">我的課程</RouterLink>
         <RouterLink to="/coach/schedules"  class="text-sm hover:text-gray-300 transition">時段管理</RouterLink>
         <RouterLink to="/coach/bookings"   class="text-sm hover:text-gray-300 transition">預約管理</RouterLink>
+        <RouterLink to="/coach/reviews"    class="text-sm hover:text-gray-300 transition">課程評價</RouterLink>
         <RouterLink to="/coach/profile"    class="text-sm hover:text-gray-300 transition">個人資料</RouterLink>
       </div>
 

frontend/src/router/index.js

@@ -29,6 +29,7 @@ const routes = [
       { path: 'profile',         component: () => import('../views/coach/ProfileView.vue') },
       { path: 'schedules',       component: () => import('../views/coach/ScheduleManagerView.vue') },
       { path: 'bookings',        component: () => import('../views/coach/BookingManagerView.vue') },
+      { path: 'reviews',         component: () => import('../views/coach/ReviewsView.vue') },
     ],
   },
 
@@ -44,6 +45,8 @@ const routes = [
       { path: 'members',   component: () => import('../views/admin/MembersView.vue') },
       { path: 'providers', component: () => import('../views/admin/ProvidersView.vue') },
       { path: 'offers',    component: () => import('../views/admin/OffersView.vue') },
+      { path: 'bookings',  component: () => import('../views/admin/BookingsView.vue') },
+      { path: 'reviews',   component: () => import('../views/admin/ReviewsView.vue') },
     ],
   },
 ]

frontend/src/views/CourseDetailView.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import api from '../api/axios'
 import { getSchedulesByOffer } from '../api/scheduleApi'
 import { createBooking } from '../api/bookingApi'
+import { getReviews, createReview, updateReview, deleteReview, toggleHelpful } from '../api/reviewApi'
 import { useAuthStore } from '../stores/auth'
 
 const route  = useRoute()
@@ -18,12 +19,24 @@ const selected  = ref(null)
 const participants = ref(1)
 const booking   = ref({ loading: false, success: false, error: '' })
 
+// 評價相關
+const reviewSort    = ref('helpful')
+const reviewSummary = ref(null)
+const reviews       = ref([])
+const myReview      = ref(null)
+const reviewForm    = ref({ show: false, rating: 5, comment: '', saving: false, error: '' })
+const editTarget    = ref(null)
+
 onMounted(async () => {
   try {
     const res = await api.get(`/diving-offers/${route.params.id}`)
     offer.value = res.data.data
-    const sRes = await getSchedulesByOffer(route.params.id)
+    const [sRes, rRes] = await Promise.all([
+      getSchedulesByOffer(route.params.id),
+      getReviews(route.params.id, reviewSort.value),
+    ])
     schedules.value = sRes.data.data
+    applyReviewData(rRes.data.data)
   } catch (e) {
     notFound.value = true
   } finally {
@@ -31,6 +44,57 @@ onMounted(async () => {
   }
 })
 
+function applyReviewData(data) {
+  reviewSummary.value = data.summary
+  reviews.value       = data.reviews
+  myReview.value      = data.reviews.find(r => r.is_mine) || null
+}
+
+async function switchSort(sort) {
+  reviewSort.value = sort
+  const res = await getReviews(route.params.id, sort)
+  applyReviewData(res.data.data)
+}
+
+async function submitReview() {
+  reviewForm.value.saving = true
+  reviewForm.value.error  = ''
+  try {
+    if (editTarget.value) {
+      await updateReview(editTarget.value.id, { rating: reviewForm.value.rating, comment: reviewForm.value.comment })
+    } else {
+      await createReview({ diving_offer_id: offer.value.id, rating: reviewForm.value.rating, comment: reviewForm.value.comment })
+    }
+    reviewForm.value.show = false
+    editTarget.value = null
+    const res = await getReviews(route.params.id, reviewSort.value)
+    applyReviewData(res.data.data)
+  } catch (e) {
+    reviewForm.value.error = e.response?.data?.message || '送出失敗'
+  } finally {
+    reviewForm.value.saving = false
+  }
+}
+
+function openEdit(review) {
+  editTarget.value = review
+  reviewForm.value = { show: true, rating: review.rating, comment: review.comment, saving: false, error: '' }
+}
+
+async function doDeleteReview(review) {
+  if (!confirm('確定要刪除此評價？')) return
+  await deleteReview(review.id)
+  const res = await getReviews(route.params.id, reviewSort.value)
+  applyReviewData(res.data.data)
+}
+
+async function doToggleHelpful(review) {
+  if (!auth.isLoggedIn) return
+  const res = await toggleHelpful(review.id)
+  review.helpful_count = res.data.data.helpful_count
+  review.has_voted     = res.data.data.has_voted
+}
+
 async function submitBooking() {
   if (!selected.value) return
   booking.value = { loading: true, success: false, error: '' }
@@ -154,6 +218,102 @@ async function submitBooking() {
           </button>
         </div>
       </div>
+
+      <!-- 評價區塊 -->
+      <div class="bg-white rounded-2xl shadow p-6 mb-6">
+        <!-- 標題 + 排序 -->
+        <div class="flex items-center justify-between mb-5 flex-wrap gap-3">
+          <div>
+            <h2 class="text-lg font-semibold text-gray-800">課程評價</h2>
+            <p v-if="reviewSummary" class="text-sm text-gray-500 mt-0.5">
+              ★ {{ reviewSummary.average }} · {{ reviewSummary.total }} 則評價
+            </p>
+          </div>
+          <div class="flex gap-2 text-sm">
+            <button v-for="s in [['helpful','最多幫助'],['rating','最高分'],['newest','最新']]" :key="s[0]"
+              @click="switchSort(s[0])"
+              :class="reviewSort === s[0]
+                ? 'bg-ocean-700 text-white px-3 py-1 rounded-full'
+                : 'bg-gray-100 text-gray-600 hover:bg-gray-200 px-3 py-1 rounded-full transition'">
+              {{ s[1] }}
+            </button>
+          </div>
+        </div>
+
+        <!-- 星等分布條 -->
+        <div v-if="reviewSummary?.total > 0" class="space-y-1 mb-6">
+          <div v-for="star in [5,4,3,2,1]" :key="star" class="flex items-center gap-2 text-sm">
+            <span class="w-8 text-right text-gray-500">{{ star }}★</span>
+            <div class="flex-1 bg-gray-100 rounded-full h-2">
+              <div class="bg-yellow-400 h-2 rounded-full transition-all"
+                :style="`width:${reviewSummary.total > 0 ? (reviewSummary.distribution[star] / reviewSummary.total * 100) : 0}%`">
+              </div>
+            </div>
+            <span class="w-6 text-gray-400 text-xs">{{ reviewSummary.distribution[star] }}</span>
+          </div>
+        </div>
+
+        <!-- 我的評價 / 新增表單 -->
+        <div v-if="auth.isLoggedIn" class="mb-5">
+          <div v-if="!myReview && !reviewForm.show">
+            <button @click="reviewForm = { show: true, rating: 5, comment: '', saving: false, error: '' }; editTarget = null"
+              class="text-sm text-ocean-600 hover:underline">
+              + 撰寫評價
+            </button>
+          </div>
+          <div v-if="reviewForm.show" class="border border-ocean-200 rounded-xl p-4 bg-ocean-50">
+            <p class="text-sm font-medium text-gray-700 mb-3">{{ editTarget ? '修改評價' : '撰寫評價' }}</p>
+            <!-- 星等選擇 -->
+            <div class="flex gap-1 mb-3">
+              <button v-for="n in [1,2,3,4,5]" :key="n" @click="reviewForm.rating = n"
+                :class="n <= reviewForm.rating ? 'text-yellow-400' : 'text-gray-300'"
+                class="text-2xl transition">★</button>
+            </div>
+            <textarea v-model="reviewForm.comment" rows="3" placeholder="分享你的課程體驗..."
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ocean-400" />
+            <p v-if="reviewForm.error" class="text-red-500 text-xs mt-1">{{ reviewForm.error }}</p>
+            <div class="flex gap-2 mt-3">
+              <button @click="submitReview" :disabled="reviewForm.saving"
+                class="bg-ocean-700 text-white text-sm px-4 py-1.5 rounded-full hover:bg-ocean-600 transition disabled:opacity-60">
+                {{ reviewForm.saving ? '送出中...' : '送出' }}
+              </button>
+              <button @click="reviewForm.show = false; editTarget = null"
+                class="text-sm text-gray-500 hover:text-gray-700 px-4 py-1.5">取消</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 評價列表 -->
+        <div v-if="reviews.length === 0" class="text-gray-400 text-sm py-4 text-center">尚無評價</div>
+        <div v-else class="space-y-4">
+          <div v-for="r in reviews" :key="r.id"
+            class="pb-4 border-b border-gray-100 last:border-0">
+            <div class="flex items-start justify-between">
+              <div>
+                <div class="flex items-center gap-2">
+                  <span class="text-yellow-400 text-sm">{{ '★'.repeat(r.rating) }}{{ '☆'.repeat(5 - r.rating) }}</span>
+                  <span class="text-xs text-gray-400">{{ r.reviewer_name }}</span>
+                  <span v-if="r.is_edited" class="text-xs text-gray-400">（已修改）</span>
+                </div>
+                <p class="text-sm text-gray-700 mt-1 leading-relaxed">{{ r.comment }}</p>
+                <p class="text-xs text-gray-400 mt-1">{{ new Date(r.created_at).toLocaleDateString('zh-TW') }}</p>
+              </div>
+              <!-- 本人操作 -->
+              <div v-if="r.is_mine" class="flex gap-2 text-xs ml-3 shrink-0">
+                <button @click="openEdit(r)" class="text-ocean-600 hover:underline">修改</button>
+                <button @click="doDeleteReview(r)" class="text-red-400 hover:underline">刪除</button>
+              </div>
+            </div>
+            <!-- 有幫助 -->
+            <button @click="doToggleHelpful(r)"
+              :class="r.has_voted ? 'text-ocean-600' : 'text-gray-400 hover:text-gray-600'"
+              class="mt-2 text-xs flex items-center gap-1 transition"
+              :disabled="!auth.isLoggedIn">
+              👍 有幫助 {{ r.helpful_count > 0 ? `(${r.helpful_count})` : '' }}
+            </button>
+          </div>
+        </div>
+      </div>
     </template>
 
   </main>

frontend/src/views/admin/BookingsView.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import adminApi from '../../api/adminAxios'
+
+const bookings = ref([])
+const loading  = ref(true)
+
+const STATUS_LABEL = {
+  pending:            { text: '待確認',   color: 'bg-yellow-100 text-yellow-700' },
+  confirmed:          { text: '已確認',   color: 'bg-green-100 text-green-700' },
+  completed:          { text: '已完成',   color: 'bg-gray-100 text-gray-600' },
+  rejected:           { text: '已拒絕',   color: 'bg-red-100 text-red-600' },
+  expired:            { text: '已過期',   color: 'bg-gray-100 text-gray-400' },
+  member_cancelled:   { text: '學員取消', color: 'bg-gray-100 text-gray-500' },
+  provider_cancelled: { text: '教練取消', color: 'bg-orange-100 text-orange-600' },
+}
+
+onMounted(async () => {
+  try {
+    const res = await adminApi.get('/admin/bookings')
+    bookings.value = res.data.data
+  } finally {
+    loading.value = false
+  }
+})
+
+async function doComplete(booking) {
+  if (!confirm(`確定要將「${booking.member_name}」的預約標記為完成？`)) return
+  try {
+    await adminApi.put(`/admin/bookings/${booking.id}/complete`)
+    booking.status = 'completed'
+  } catch (e) {
+    alert(e.response?.data?.message || '操作失敗')
+  }
+}
+</script>
+
+<template>
+  <div class="p-6 max-w-6xl mx-auto">
+    <h1 class="text-2xl font-bold text-gray-800 mb-6">預約管理</h1>
+
+    <div v-if="loading" class="text-center text-gray-400 py-20">載入中...</div>
+    <div v-else-if="bookings.length === 0" class="text-center text-gray-400 py-20">目前沒有預約</div>
+
+    <div v-else class="bg-white rounded-2xl shadow overflow-hidden">
+      <table class="w-full text-sm">
+        <thead class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wide">
+          <tr>
+            <th class="px-5 py-3 text-left">課程</th>
+            <th class="px-5 py-3 text-left">學員</th>
+            <th class="px-5 py-3 text-left">日期</th>
+            <th class="px-5 py-3 text-center">人數</th>
+            <th class="px-5 py-3 text-right">金額</th>
+            <th class="px-5 py-3 text-center">狀態</th>
+            <th class="px-5 py-3 text-center">操作</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100">
+          <tr v-for="b in bookings" :key="b.id" class="hover:bg-gray-50">
+            <td class="px-5 py-3 font-medium text-gray-800 max-w-[140px] truncate">{{ b.offer_title }}</td>
+            <td class="px-5 py-3 text-gray-500 text-xs">
+              <p>{{ b.member_name }}</p>
+              <p class="text-gray-400">{{ b.member_email }}</p>
+            </td>
+            <td class="px-5 py-3 text-gray-500 text-xs">{{ b.scheduled_date }} {{ b.start_time }}</td>
+            <td class="px-5 py-3 text-center text-gray-600">{{ b.participants }}</td>
+            <td class="px-5 py-3 text-right text-gray-700">NT$ {{ b.total_price?.toLocaleString() }}</td>
+            <td class="px-5 py-3 text-center">
+              <span class="text-xs px-2 py-1 rounded-full font-medium" :class="STATUS_LABEL[b.status]?.color">
+                {{ STATUS_LABEL[b.status]?.text || b.status }}
+              </span>
+            </td>
+            <td class="px-5 py-3 text-center">
+              <button v-if="b.status === 'confirmed'" @click="doComplete(b)"
+                class="text-xs bg-blue-600 hover:bg-blue-500 text-white px-3 py-1 rounded-full transition">
+                標記完成
+              </button>
+              <span v-else class="text-gray-300 text-xs">—</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

frontend/src/views/admin/ReviewsView.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import adminApi from '../../api/adminAxios'
+
+const reviews = ref([])
+const loading = ref(true)
+
+onMounted(fetchReviews)
+
+async function fetchReviews() {
+  loading.value = true
+  try {
+    const res = await adminApi.get('/admin/reviews')
+    reviews.value = res.data.data
+  } finally {
+    loading.value = false
+  }
+}
+
+async function doDelete(review) {
+  if (!confirm(`確定要刪除「${review.offer_title}」的這則評價？`)) return
+  await adminApi.delete(`/admin/reviews/${review.id}`)
+  reviews.value = reviews.value.filter(r => r.id !== review.id)
+}
+</script>
+
+<template>
+  <div class="p-6 max-w-5xl mx-auto">
+    <h1 class="text-2xl font-bold text-gray-800 mb-6">評價管理</h1>
+
+    <div v-if="loading" class="text-center text-gray-400 py-20">載入中...</div>
+    <div v-else-if="reviews.length === 0" class="text-center text-gray-400 py-20">目前沒有評價</div>
+
+    <div v-else class="bg-white rounded-2xl shadow overflow-hidden">
+      <table class="w-full text-sm">
+        <thead class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wide">
+          <tr>
+            <th class="px-5 py-3 text-left">課程</th>
+            <th class="px-5 py-3 text-left">會員</th>
+            <th class="px-5 py-3 text-center">星等</th>
+            <th class="px-5 py-3 text-left">內容</th>
+            <th class="px-5 py-3 text-center">幫助</th>
+            <th class="px-5 py-3 text-center">操作</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100">
+          <tr v-for="r in reviews" :key="r.id" class="hover:bg-gray-50">
+            <td class="px-5 py-3 font-medium text-gray-800 max-w-[140px] truncate">{{ r.offer_title }}</td>
+            <td class="px-5 py-3 text-gray-500 text-xs">{{ r.member_email }}</td>
+            <td class="px-5 py-3 text-center">
+              <span class="text-yellow-400">{{ '★'.repeat(r.rating) }}</span>
+              <span v-if="r.is_edited" class="text-gray-400 text-xs ml-1">（改）</span>
+            </td>
+            <td class="px-5 py-3 text-gray-600 max-w-[240px] truncate">{{ r.comment }}</td>
+            <td class="px-5 py-3 text-center text-gray-400 text-xs">{{ r.helpful_count }}</td>
+            <td class="px-5 py-3 text-center">
+              <button @click="doDelete(r)"
+                class="text-xs bg-red-50 hover:bg-red-100 text-red-600 px-3 py-1 rounded-lg transition">
+                刪除
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

frontend/src/views/coach/BookingManagerView.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue'
-import { getProviderBookings, confirmBooking, rejectBooking, cancelBooking } from '../../api/coachBookingApi'
+import { getProviderBookings, confirmBooking, rejectBooking, cancelBooking, completeBooking } from '../../api/coachBookingApi'
 
 const bookings = ref([])
 const loading  = ref(true)
@@ -48,9 +48,10 @@ async function doAction(booking, action) {
   const labels = { confirm: '確認', reject: '拒絕', cancel: '取消' }
   if (!confirm(`確定要${labels[action]}此預約？`)) return
   try {
-    if (action === 'confirm') await confirmBooking(booking.id)
-    if (action === 'reject')  await rejectBooking(booking.id)
-    if (action === 'cancel')  await cancelBooking(booking.id)
+    if (action === 'confirm')  await confirmBooking(booking.id)
+    if (action === 'reject')   await rejectBooking(booking.id)
+    if (action === 'cancel')   await cancelBooking(booking.id)
+    if (action === 'complete') await completeBooking(booking.id)
     await fetchBookings()
   } catch (e) {
     alert(e.response?.data?.message || '操作失敗')
@@ -115,6 +116,10 @@ async function doAction(booking, action) {
                   class="text-xs bg-red-500 hover:bg-red-400 text-white px-3 py-1 rounded-full transition">
                   拒絕
                 </button>
+                <button v-if="b.status === 'confirmed'" @click="doAction(b, 'complete')"
+                  class="text-xs bg-blue-600 hover:bg-blue-500 text-white px-3 py-1 rounded-full transition">
+                  完成
+                </button>
                 <button v-if="b.status === 'confirmed'" @click="doAction(b, 'cancel')"
                   class="text-xs text-orange-500 hover:text-orange-700 underline">
                   取消

frontend/src/views/coach/ReviewsView.vue

@@ -0,0 +1,101 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import coachApi from '../../api/coachAxios'
+import axios from 'axios'
+
+const publicApi = axios.create({
+  baseURL: import.meta.env.VITE_API_URL + '/api',
+  headers: { Accept: 'application/json' },
+})
+
+const offers   = ref([])
+const reviews  = ref([])   // [{ offer, reviews, summary }]
+const loading  = ref(true)
+
+onMounted(async () => {
+  try {
+    const offersRes = await coachApi.get('/provider/offers')
+    offers.value = offersRes.data.data
+
+    const results = await Promise.all(
+      offers.value.map(async (offer) => {
+        const res = await publicApi.get(`/diving-offers/${offer.id}/reviews`)
+        return { offer, ...res.data.data }
+      })
+    )
+    // 只顯示有評價的課程
+    reviews.value = results.filter(r => r.summary.total > 0)
+  } finally {
+    loading.value = false
+  }
+})
+
+function stars(n) {
+  return '★'.repeat(n) + '☆'.repeat(5 - n)
+}
+</script>
+
+<template>
+  <div class="p-6 max-w-4xl mx-auto">
+    <h1 class="text-2xl font-bold text-gray-800 mb-2">課程評價</h1>
+    <p class="text-sm text-gray-500 mb-6">學員對你課程的回饋（評價人已匿名）</p>
+
+    <div v-if="loading" class="text-center text-gray-400 py-20">載入中...</div>
+
+    <div v-else-if="reviews.length === 0" class="text-center text-gray-400 py-20">
+      目前沒有學員評價
+    </div>
+
+    <div v-else class="space-y-8">
+      <div v-for="group in reviews" :key="group.offer.id" class="bg-white rounded-2xl shadow p-6">
+
+        <!-- 課程標題與統計 -->
+        <div class="flex items-start justify-between mb-4 flex-wrap gap-3">
+          <div>
+            <h2 class="text-lg font-semibold text-gray-800">{{ group.offer.title }}</h2>
+            <p class="text-sm text-gray-500 mt-0.5">
+              ★ {{ group.summary.average }} · {{ group.summary.total }} 則評價
+            </p>
+          </div>
+          <!-- 評分分布 -->
+          <div class="space-y-0.5 min-w-[160px]">
+            <div v-for="star in [5,4,3,2,1]" :key="star" class="flex items-center gap-1.5 text-xs">
+              <span class="text-gray-400 w-4">{{ star }}★</span>
+              <div class="flex-1 bg-gray-100 rounded-full h-1.5">
+                <div class="bg-yellow-400 h-1.5 rounded-full"
+                  :style="`width:${group.summary.total > 0 ? (group.summary.distribution[star] / group.summary.total * 100) : 0}%`">
+                </div>
+              </div>
+              <span class="text-gray-400 w-3 text-right">{{ group.summary.distribution[star] }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 評價列表 -->
+        <div class="divide-y divide-gray-100">
+          <div v-for="r in group.reviews" :key="r.id" class="py-4 first:pt-0">
+            <div class="flex items-start gap-3">
+              <div class="w-8 h-8 rounded-full bg-ocean-100 flex items-center justify-center text-ocean-600 text-sm font-bold shrink-0">
+                匿
+              </div>
+              <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-2 mb-1">
+                  <span class="text-yellow-400 text-sm">{{ stars(r.rating) }}</span>
+                  <span class="text-xs text-gray-400">{{ r.reviewer_name }}</span>
+                  <span v-if="r.is_edited" class="text-xs text-gray-400">（已修改）</span>
+                  <span class="text-xs text-gray-400 ml-auto">
+                    {{ new Date(r.created_at).toLocaleDateString('zh-TW') }}
+                  </span>
+                </div>
+                <p class="text-sm text-gray-700 leading-relaxed">{{ r.comment }}</p>
+                <p class="text-xs text-gray-400 mt-1.5">
+                  👍 {{ r.helpful_count }} 人覺得有幫助
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>