feat:實作 Admin Panel — 平台管理後台

後端：
- AdminStatsController：總會員/教練/課程數統計 API
- AdminUserController：會員與教練列表、詳情、啟用/停用、教練驗證（toggle 反轉語意）
- AdminOfferController：全平台課程列表與刪除
- routes/api.php：新增 /api/admin/stats、members、providers、offers 等路由

前端（frontend/）：
- adminAuth store、adminAxios（第三套獨立認證）
- /admin/* 路由群組 + requiresAdmin guard
- AdminNavBar、AdminLayout
- App.vue：isCoachPage → isBackofficePage（/coach/* 和 /admin/* 皆隱藏會員 NavBar）
- LoginView、DashboardView（統計卡片）
- MembersView、ProvidersView（含驗證操作）、OffersView（含刪除確認）

OpenSpec：
- 新增 specs：admin-auth / admin-user-management / admin-offer-management / admin-stats / admin-panel-ui
- 歸檔：openspec/changes/archive/2026-05-10-admin-panel

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

frontend/src/App.vue

@@ -2,24 +2,29 @@
 import { computed, onMounted } from 'vue'
 import { useAuthStore } from './stores/auth'
 import { useCoachAuthStore } from './stores/coachAuth'
+import { useAdminAuthStore } from './stores/adminAuth'
 import { useRoute } from 'vue-router'
 import NavBar from './components/NavBar.vue'
 
 const auth      = useAuthStore()
 const coachAuth = useCoachAuthStore()
+const adminAuth = useAdminAuthStore()
 const route     = useRoute()
 
 onMounted(() => {
   auth.init()
   coachAuth.init()
+  adminAuth.init()
 })
 
-const isCoachPage = computed(() => route.path.startsWith('/coach'))
+const isBackofficePage = computed(() =>
+  route.path.startsWith('/coach') || route.path.startsWith('/admin')
+)
 </script>
 
 <template>
   <div class="min-h-screen bg-gray-50">
-    <NavBar v-if="!isCoachPage" />
+    <NavBar v-if="!isBackofficePage" />
     <RouterView />
   </div>
 </template>

frontend/src/api/adminAxios.js

@@ -0,0 +1,16 @@
+import axios from 'axios'
+
+const adminApi = axios.create({
+  baseURL: import.meta.env.VITE_API_URL + '/api',
+  headers: { Accept: 'application/json' },
+})
+
+adminApi.interceptors.request.use((config) => {
+  const token = localStorage.getItem('admin_token')
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+})
+
+export default adminApi

frontend/src/components/AdminNavBar.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { useAdminAuthStore } from '../stores/adminAuth'
+import { useRouter } from 'vue-router'
+
+const adminAuth = useAdminAuthStore()
+const router    = useRouter()
+
+async function handleLogout() {
+  await adminAuth.logout()
+  router.push('/admin/login')
+}
+</script>
+
+<template>
+  <nav class="bg-slate-800 text-white shadow-md">
+    <div class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
+      <div class="flex items-center gap-6">
+        <span class="text-lg font-bold tracking-wide">⚙️ Admin Panel</span>
+        <RouterLink to="/admin/dashboard" class="text-sm hover:text-slate-300 transition">儀表板</RouterLink>
+        <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>
+      </div>
+      <div class="flex items-center gap-4 text-sm">
+        <span class="text-slate-400">{{ adminAuth.user?.name }}</span>
+        <button @click="handleLogout"
+          class="bg-slate-600 hover:bg-slate-500 px-4 py-1.5 rounded-full transition">
+          登出
+        </button>
+      </div>
+    </div>
+  </nav>
+</template>

frontend/src/layouts/AdminLayout.vue

@@ -0,0 +1,10 @@
+<script setup>
+import AdminNavBar from '../components/AdminNavBar.vue'
+</script>
+
+<template>
+  <div class="min-h-screen bg-slate-50">
+    <AdminNavBar />
+    <RouterView />
+  </div>
+</template>

frontend/src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
 import { useCoachAuthStore } from '../stores/coachAuth'
+import { useAdminAuthStore } from '../stores/adminAuth'
 
 const routes = [
   // Member
@@ -15,7 +16,7 @@ const routes = [
   // Coach (public)
   { path: '/coach/login',    component: () => import('../views/coach/LoginView.vue') },
   { path: '/coach/register', component: () => import('../views/coach/RegisterView.vue') },
-  // Coach (protected) — wrapped in CoachLayout
+  // Coach (protected)
   {
     path: '/coach',
     component: () => import('../layouts/CoachLayout.vue'),
@@ -27,6 +28,21 @@ const routes = [
       { path: 'profile',         component: () => import('../views/coach/ProfileView.vue') },
     ],
   },
+
+  // Admin (public)
+  { path: '/admin/login', component: () => import('../views/admin/LoginView.vue') },
+  // Admin (protected)
+  {
+    path: '/admin',
+    component: () => import('../layouts/AdminLayout.vue'),
+    meta: { requiresAdmin: true },
+    children: [
+      { path: 'dashboard', component: () => import('../views/admin/DashboardView.vue') },
+      { path: 'members',   component: () => import('../views/admin/MembersView.vue') },
+      { path: 'providers', component: () => import('../views/admin/ProvidersView.vue') },
+      { path: 'offers',    component: () => import('../views/admin/OffersView.vue') },
+    ],
+  },
 ]
 
 const router = createRouter({
@@ -37,13 +53,11 @@ const router = createRouter({
 router.beforeEach((to) => {
   const auth      = useAuthStore()
   const coachAuth = useCoachAuthStore()
+  const adminAuth = useAdminAuthStore()
 
-  if (to.meta.requiresAuth && !auth.isLoggedIn) {
-    return { path: '/login' }
-  }
-  if (to.meta.requiresCoach && !coachAuth.isLoggedIn) {
-    return { path: '/coach/login' }
-  }
+  if (to.meta.requiresAuth  && !auth.isLoggedIn)      return { path: '/login' }
+  if (to.meta.requiresCoach && !coachAuth.isLoggedIn) return { path: '/coach/login' }
+  if (to.meta.requiresAdmin && !adminAuth.isLoggedIn) return { path: '/admin/login' }
 })
 
 export default router

frontend/src/stores/adminAuth.js

@@ -0,0 +1,38 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import adminApi from '../api/adminAxios'
+
+export const useAdminAuthStore = defineStore('adminAuth', () => {
+  const user  = ref(null)
+  const token = ref(null)
+
+  const isLoggedIn = computed(() => !!token.value)
+
+  function init() {
+    const savedToken = localStorage.getItem('admin_token')
+    const savedUser  = localStorage.getItem('admin_user')
+    if (savedToken) {
+      token.value = savedToken
+      user.value  = savedUser ? JSON.parse(savedUser) : null
+    }
+  }
+
+  function setAuth(userData, tokenValue) {
+    user.value  = userData
+    token.value = tokenValue
+    localStorage.setItem('admin_token', tokenValue)
+    localStorage.setItem('admin_user', JSON.stringify(userData))
+  }
+
+  async function logout() {
+    try {
+      await adminApi.post('/admin/logout')
+    } catch {}
+    user.value  = null
+    token.value = null
+    localStorage.removeItem('admin_token')
+    localStorage.removeItem('admin_user')
+  }
+
+  return { user, token, isLoggedIn, init, setAuth, logout }
+})

frontend/src/views/admin/DashboardView.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import adminApi from '../../api/adminAxios'
+
+const stats   = ref(null)
+const loading = ref(true)
+
+onMounted(async () => {
+  try {
+    const res = await adminApi.get('/admin/stats')
+    stats.value = res.data.data
+  } finally {
+    loading.value = false
+  }
+})
+
+const cards = [
+  { key: 'total_members',   label: '總會員數', icon: '👤', color: 'bg-blue-50 text-blue-700' },
+  { key: 'total_providers', label: '總教練數', icon: '🤿', color: 'bg-teal-50 text-teal-700' },
+  { key: 'total_offers',    label: '總課程數', icon: '📋', color: 'bg-purple-50 text-purple-700' },
+]
+</script>
+
+<template>
+  <main class="max-w-5xl mx-auto px-4 py-10">
+    <h1 class="text-2xl font-bold text-slate-800 mb-8">平台總覽</h1>
+
+    <div v-if="loading" class="text-center text-slate-400 py-20">載入中...</div>
+
+    <div v-else class="grid sm:grid-cols-3 gap-6">
+      <div v-for="card in cards" :key="card.key"
+        class="bg-white rounded-2xl shadow p-6 flex items-center gap-4">
+        <div :class="['text-3xl w-14 h-14 rounded-xl flex items-center justify-center', card.color]">
+          {{ card.icon }}
+        </div>
+        <div>
+          <p class="text-sm text-slate-500">{{ card.label }}</p>
+          <p class="text-3xl font-bold text-slate-800">{{ stats?.[card.key] ?? '-' }}</p>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>

frontend/src/views/admin/LoginView.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import adminApi from '../../api/adminAxios'
+import { useAdminAuthStore } from '../../stores/adminAuth'
+
+const router    = useRouter()
+const adminAuth = useAdminAuthStore()
+
+const email    = ref('')
+const password = ref('')
+const error    = ref('')
+const loading  = ref(false)
+
+async function submit() {
+  error.value   = ''
+  loading.value = true
+  try {
+    const res = await adminApi.post('/admin/login', { email: email.value, password: password.value })
+    adminAuth.setAuth(res.data.data.user, res.data.data.token)
+    router.push('/admin/dashboard')
+  } catch (e) {
+    error.value = e.response?.data?.message || '帳號或密碼錯誤'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <main class="min-h-screen bg-slate-100 flex items-center justify-center px-4">
+    <div class="bg-white rounded-2xl shadow-lg w-full max-w-sm p-8">
+      <div class="text-center mb-8">
+        <p class="text-slate-400 text-sm mb-1">CFDive</p>
+        <h1 class="text-2xl font-bold text-slate-800">管理員登入</h1>
+      </div>
+      <div v-if="error" class="bg-red-50 text-red-600 text-sm rounded-lg px-4 py-3 mb-4">{{ error }}</div>
+      <form @submit.prevent="submit" class="flex flex-col gap-4">
+        <div>
+          <label class="block text-sm text-slate-600 mb-1">Email</label>
+          <input v-model="email" type="email" required
+            class="w-full border border-slate-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-slate-400" />
+        </div>
+        <div>
+          <label class="block text-sm text-slate-600 mb-1">密碼</label>
+          <input v-model="password" type="password" required
+            class="w-full border border-slate-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-slate-400" />
+        </div>
+        <button type="submit" :disabled="loading"
+          class="bg-slate-800 hover:bg-slate-700 text-white font-semibold py-2.5 rounded-lg transition disabled:opacity-60">
+          {{ loading ? '登入中...' : '登入' }}
+        </button>
+      </form>
+    </div>
+  </main>
+</template>

frontend/src/views/admin/MembersView.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import adminApi from '../../api/adminAxios'
+
+const members = ref([])
+const loading = ref(true)
+const search  = ref('')
+
+async function fetchMembers() {
+  loading.value = true
+  try {
+    const params = {}
+    if (search.value) params.q = search.value
+    const res = await adminApi.get('/admin/members', { params })
+    members.value = res.data.data
+  } finally {
+    loading.value = false
+  }
+}
+
+async function toggleActive(member) {
+  try {
+    const res = await adminApi.put(`/admin/members/${member.id}/toggle-active`)
+    member.is_active = res.data.data.is_active
+  } catch (e) {
+    alert(e.response?.data?.message || '操作失敗')
+  }
+}
+
+onMounted(fetchMembers)
+</script>
+
+<template>
+  <main class="max-w-6xl mx-auto px-4 py-10">
+    <h1 class="text-2xl font-bold text-slate-800 mb-6">會員管理</h1>
+
+    <div class="flex gap-3 mb-6">
+      <input v-model="search" @keyup.enter="fetchMembers" type="text" placeholder="搜尋姓名或 Email..."
+        class="flex-1 border border-slate-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-400" />
+      <button @click="fetchMembers"
+        class="bg-slate-800 text-white px-5 py-2 rounded-lg text-sm hover:bg-slate-700 transition">搜尋</button>
+    </div>
+
+    <div v-if="loading" class="text-center text-slate-400 py-20">載入中...</div>
+
+    <div v-else class="bg-white rounded-2xl shadow overflow-hidden">
+      <table class="w-full text-sm">
+        <thead class="bg-slate-50 text-slate-500 text-xs uppercase tracking-wide">
+          <tr>
+            <th class="px-6 py-3 text-left">姓名</th>
+            <th class="px-6 py-3 text-left">Email</th>
+            <th class="px-6 py-3 text-left">註冊時間</th>
+            <th class="px-6 py-3 text-center">狀態</th>
+            <th class="px-6 py-3 text-center">操作</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-100">
+          <tr v-for="m in members" :key="m.id" class="hover:bg-slate-50">
+            <td class="px-6 py-4 font-medium text-slate-800">{{ m.name }}</td>
+            <td class="px-6 py-4 text-slate-500">{{ m.email }}</td>
+            <td class="px-6 py-4 text-slate-400 text-xs">{{ m.created_at?.slice(0,10) }}</td>
+            <td class="px-6 py-4 text-center">
+              <span :class="m.is_active
+                ? 'bg-green-100 text-green-700'
+                : 'bg-red-100 text-red-600'"
+                class="text-xs px-2 py-1 rounded-full font-medium">
+                {{ m.is_active ? '啟用' : '停用' }}
+              </span>
+            </td>
+            <td class="px-6 py-4 text-center">
+              <button @click="toggleActive(m)"
+                :class="m.is_active
+                  ? 'bg-red-50 text-red-600 hover:bg-red-100'
+                  : 'bg-green-50 text-green-700 hover:bg-green-100'"
+                class="text-xs px-3 py-1 rounded-lg transition">
+                {{ m.is_active ? '停用' : '啟用' }}
+              </button>
+            </td>
+          </tr>
+          <tr v-if="members.length === 0">
+            <td colspan="5" class="px-6 py-10 text-center text-slate-400">無符合的會員</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+</template>

frontend/src/views/admin/OffersView.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import adminApi from '../../api/adminAxios'
+
+const offers    = ref([])
+const loading   = ref(true)
+const search    = ref('')
+const confirmId = ref(null)
+
+async function fetchOffers() {
+  loading.value = true
+  try {
+    const params = {}
+    if (search.value) params.q = search.value
+    const res = await adminApi.get('/admin/offers', { params })
+    offers.value = res.data.data
+  } finally {
+    loading.value = false
+  }
+}
+
+async function deleteOffer(id) {
+  try {
+    await adminApi.delete(`/admin/offers/${id}`)
+    confirmId.value = null
+    await fetchOffers()
+  } catch (e) { alert(e.response?.data?.message || '刪除失敗') }
+}
+
+onMounted(fetchOffers)
+</script>
+
+<template>
+  <main class="max-w-6xl mx-auto px-4 py-10">
+    <h1 class="text-2xl font-bold text-slate-800 mb-6">課程管理</h1>
+
+    <div class="flex gap-3 mb-6">
+      <input v-model="search" @keyup.enter="fetchOffers" type="text" placeholder="搜尋課程名稱或地點..."
+        class="flex-1 border border-slate-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-400" />
+      <button @click="fetchOffers"
+        class="bg-slate-800 text-white px-5 py-2 rounded-lg text-sm hover:bg-slate-700 transition">搜尋</button>
+    </div>
+
+    <div v-if="loading" class="text-center text-slate-400 py-20">載入中...</div>
+
+    <div v-else class="bg-white rounded-2xl shadow overflow-hidden">
+      <table class="w-full text-sm">
+        <thead class="bg-slate-50 text-slate-500 text-xs uppercase tracking-wide">
+          <tr>
+            <th class="px-6 py-3 text-left">課程名稱</th>
+            <th class="px-6 py-3 text-left">地點</th>
+            <th class="px-6 py-3 text-left">地區</th>
+            <th class="px-6 py-3 text-right">價格</th>
+            <th class="px-6 py-3 text-center">教練 ID</th>
+            <th class="px-6 py-3 text-center">操作</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-100">
+          <tr v-for="offer in offers" :key="offer.id" class="hover:bg-slate-50">
+            <td class="px-6 py-4 font-medium text-slate-800">{{ offer.title }}</td>
+            <td class="px-6 py-4 text-slate-500">{{ offer.location }}</td>
+            <td class="px-6 py-4 text-slate-500">{{ offer.region }}</td>
+            <td class="px-6 py-4 text-right">NT$ {{ offer.price?.toLocaleString() }}</td>
+            <td class="px-6 py-4 text-center text-slate-400">{{ offer.provider_id ?? '-' }}</td>
+            <td class="px-6 py-4 text-center">
+              <button @click="confirmId = offer.id"
+                class="text-xs bg-red-50 hover:bg-red-100 text-red-600 px-3 py-1 rounded-lg transition">
+                刪除
+              </button>
+            </td>
+          </tr>
+          <tr v-if="offers.length === 0">
+            <td colspan="6" class="px-6 py-10 text-center text-slate-400">無符合的課程</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 刪除確認 dialog -->
+    <div v-if="confirmId" class="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+      <div class="bg-white rounded-2xl shadow-xl p-6 w-80">
+        <p class="font-semibold text-slate-800 mb-2">確定要刪除此課程？</p>
+        <p class="text-sm text-slate-500 mb-6">此操作無法復原。</p>
+        <div class="flex gap-3 justify-end">
+          <button @click="confirmId = null"
+            class="px-4 py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition">取消</button>
+          <button @click="deleteOffer(confirmId)"
+            class="px-4 py-2 text-sm bg-red-600 hover:bg-red-500 text-white rounded-lg transition">確定刪除</button>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>

frontend/src/views/admin/ProvidersView.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import adminApi from '../../api/adminAxios'
+
+const providers = ref([])
+const loading   = ref(true)
+const search    = ref('')
+
+async function fetchProviders() {
+  loading.value = true
+  try {
+    const params = {}
+    if (search.value) params.q = search.value
+    const res = await adminApi.get('/admin/providers', { params })
+    providers.value = res.data.data
+  } finally {
+    loading.value = false
+  }
+}
+
+async function toggleActive(p) {
+  try {
+    const res = await adminApi.put(`/admin/providers/${p.id}/toggle-active`)
+    p.is_active = res.data.data.is_active
+  } catch (e) { alert(e.response?.data?.message || '操作失敗') }
+}
+
+async function toggleVerified(p) {
+  try {
+    const res = await adminApi.put(`/admin/providers/${p.id}/toggle-verified`)
+    if (p.provider_profile) p.provider_profile.is_verified = res.data.data.is_verified
+  } catch (e) { alert(e.response?.data?.message || '操作失敗') }
+}
+
+onMounted(fetchProviders)
+</script>
+
+<template>
+  <main class="max-w-6xl mx-auto px-4 py-10">
+    <h1 class="text-2xl font-bold text-slate-800 mb-6">教練管理</h1>
+
+    <div class="flex gap-3 mb-6">
+      <input v-model="search" @keyup.enter="fetchProviders" type="text" placeholder="搜尋姓名或 Email..."
+        class="flex-1 border border-slate-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-400" />
+      <button @click="fetchProviders"
+        class="bg-slate-800 text-white px-5 py-2 rounded-lg text-sm hover:bg-slate-700 transition">搜尋</button>
+    </div>
+
+    <div v-if="loading" class="text-center text-slate-400 py-20">載入中...</div>
+
+    <div v-else class="bg-white rounded-2xl shadow overflow-hidden">
+      <table class="w-full text-sm">
+        <thead class="bg-slate-50 text-slate-500 text-xs uppercase tracking-wide">
+          <tr>
+            <th class="px-6 py-3 text-left">姓名</th>
+            <th class="px-6 py-3 text-left">工作室</th>
+            <th class="px-6 py-3 text-center">驗證</th>
+            <th class="px-6 py-3 text-center">狀態</th>
+            <th class="px-6 py-3 text-center">操作</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-100">
+          <tr v-for="p in providers" :key="p.id" class="hover:bg-slate-50">
+            <td class="px-6 py-4">
+              <p class="font-medium text-slate-800">{{ p.name }}</p>
+              <p class="text-xs text-slate-400">{{ p.email }}</p>
+            </td>
+            <td class="px-6 py-4 text-slate-500">{{ p.provider_profile?.business_name || '-' }}</td>
+            <td class="px-6 py-4 text-center">
+              <span :class="p.provider_profile?.is_verified ? 'bg-teal-100 text-teal-700' : 'bg-slate-100 text-slate-500'"
+                class="text-xs px-2 py-1 rounded-full font-medium">
+                {{ p.provider_profile?.is_verified ? '已驗證' : '未驗證' }}
+              </span>
+            </td>
+            <td class="px-6 py-4 text-center">
+              <span :class="p.is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-600'"
+                class="text-xs px-2 py-1 rounded-full font-medium">
+                {{ p.is_active ? '啟用' : '停用' }}
+              </span>
+            </td>
+            <td class="px-6 py-4 text-center">
+              <div class="flex justify-center gap-2">
+                <button @click="toggleVerified(p)"
+                  :class="p.provider_profile?.is_verified ? 'bg-slate-100 text-slate-600' : 'bg-teal-50 text-teal-700'"
+                  class="text-xs px-3 py-1 rounded-lg hover:opacity-80 transition">
+                  {{ p.provider_profile?.is_verified ? '取消驗證' : '驗證' }}
+                </button>
+                <button @click="toggleActive(p)"
+                  :class="p.is_active ? 'bg-red-50 text-red-600' : 'bg-green-50 text-green-700'"
+                  class="text-xs px-3 py-1 rounded-lg hover:opacity-80 transition">
+                  {{ p.is_active ? '停用' : '啟用' }}
+                </button>
+              </div>
+            </td>
+          </tr>
+          <tr v-if="providers.length === 0">
+            <td colspan="5" class="px-6 py-10 text-center text-slate-400">無符合的教練</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+</template>