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>
2026-05-12 02:46:54 +08:00
parent 88c0c09ccb
commit 8ef293332a
35 changed files with 1781 additions and 8 deletions
@@ -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>
@@ -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>