feat:實作 Member Portal MVP 前端與後端整合

後端：
- 新增 DivingOffer Model / DivingOfferController（列表+詳情 API，支援搜尋/篩選/分頁）
- 修正 Google OAuth callback 改為 redirect 至前端（SocialAuthController）
- 新增 config/cors.php 允許前端 origin
- .gitignore 新增 frontend/ 排除規則

前端（frontend/）：
- Vue 3 + Vite + Tailwind CSS + Pinia + Vue Router
- 頁面：首頁、課程列表、課程詳情、登入、註冊、個人資料、OAuth callback
- 整合至 Docker（multi-stage build，nginx 靜態服務於 port 5173）

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

frontend/src/views/AuthCallbackView.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+import api from '../api/axios'
+
+const router = useRouter()
+const route  = useRoute()
+const auth   = useAuthStore()
+
+onMounted(async () => {
+  const token = route.query.token
+  const error = route.query.error
+
+  if (error || !token) {
+    router.push('/login?error=oauth_failed')
+    return
+  }
+
+  // 存 token 先，再拉 profile
+  localStorage.setItem('token', token)
+  try {
+    const res = await api.get('/member/profile')
+    auth.setAuth(res.data.data, token)
+  } catch {
+    auth.setAuth(null, token)
+  }
+
+  // 清除 URL 上的 token
+  history.replaceState({}, '', '/auth/callback')
+  router.push('/courses')
+})
+</script>
+
+<template>
+  <main class="min-h-[80vh] flex items-center justify-center text-gray-400">
+    正在完成登入，請稍候...
+  </main>
+</template>

frontend/src/views/CourseDetailView.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import api from '../api/axios'
+
+const route  = useRoute()
+const router = useRouter()
+
+const offer   = ref(null)
+const loading = ref(true)
+const notFound = ref(false)
+
+onMounted(async () => {
+  try {
+    const res = await api.get(`/diving-offers/${route.params.id}`)
+    offer.value = res.data.data
+  } catch (e) {
+    notFound.value = true
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <main class="max-w-4xl mx-auto px-4 py-10">
+
+    <div v-if="loading" class="text-center text-gray-400 py-20">載入中...</div>
+
+    <div v-else-if="notFound" class="text-center py-20">
+      <p class="text-5xl mb-4">🌊</p>
+      <p class="text-gray-500 text-lg mb-6">課程不存在或已下架</p>
+      <RouterLink to="/courses" class="text-ocean-600 hover:underline">← 返回課程列表</RouterLink>
+    </div>
+
+    <template v-else-if="offer">
+      <RouterLink to="/courses" class="text-ocean-600 hover:underline text-sm mb-6 inline-block">
+        ← 返回課程列表
+      </RouterLink>
+
+      <div class="bg-ocean-700 rounded-2xl h-56 flex items-center justify-center text-white text-7xl mb-6">🤿</div>
+
+      <div class="flex flex-wrap gap-2 mb-3">
+        <span
+          v-for="badge in (offer.badges || [])"
+          :key="badge"
+          class="text-sm bg-ocean-100 text-ocean-700 px-3 py-1 rounded-full"
+        >
+          {{ badge }}
+        </span>
+        <span v-if="offer.tag" class="text-sm bg-gray-100 text-gray-600 px-3 py-1 rounded-full">
+          {{ offer.tag }}
+        </span>
+      </div>
+
+      <h1 class="text-3xl font-bold text-gray-800 mb-2">{{ offer.title }}</h1>
+
+      <div class="flex flex-wrap gap-6 text-sm text-gray-500 mb-6">
+        <span>📍 {{ offer.location }}・{{ offer.spot }}</span>
+        <span>🗺️ {{ offer.region }}</span>
+        <span>★ {{ offer.rating }} （{{ offer.reviews }} 則評論）</span>
+      </div>
+
+      <div class="bg-white rounded-2xl shadow p-6 mb-6">
+        <p class="text-gray-700 leading-relaxed whitespace-pre-wrap">{{ offer.description || '暫無課程說明。' }}</p>
+      </div>
+
+      <div class="flex items-center justify-between bg-ocean-50 rounded-2xl p-6">
+        <div>
+          <p class="text-sm text-gray-500">課程費用</p>
+          <p class="text-3xl font-bold text-ocean-800">NT$ {{ offer.price.toLocaleString() }}</p>
+        </div>
+        <button class="bg-ocean-700 hover:bg-ocean-600 text-white font-semibold px-8 py-3 rounded-full transition">
+          立即洽詢
+        </button>
+      </div>
+    </template>
+
+  </main>
+</template>

frontend/src/views/CoursesView.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import api from '../api/axios'
+import CourseCard from '../components/CourseCard.vue'
+
+const offers  = ref([])
+const meta    = ref(null)
+const loading = ref(false)
+const error   = ref('')
+
+const search = ref('')
+const region = ref('')
+
+const REGIONS = ['北部', '中部', '南部', '東部', '離島']
+
+async function fetchOffers(page = 1) {
+  loading.value = true
+  error.value   = ''
+  try {
+    const params = { page, per_page: 12 }
+    if (search.value) params.q      = search.value
+    if (region.value) params.region = region.value
+
+    const res  = await api.get('/diving-offers', { params })
+    offers.value = res.data.data
+    meta.value   = res.data.meta
+  } catch {
+    error.value = '無法載入課程，請稍後再試。'
+  } finally {
+    loading.value = false
+  }
+}
+
+function onSearch() { fetchOffers(1) }
+function onRegion() { fetchOffers(1) }
+
+onMounted(() => fetchOffers())
+</script>
+
+<template>
+  <main class="max-w-6xl mx-auto px-4 py-10">
+    <h1 class="text-3xl font-bold text-gray-800 mb-6">探索潛水課程</h1>
+
+    <div class="flex flex-col sm:flex-row gap-3 mb-8">
+      <input
+        v-model="search"
+        @keyup.enter="onSearch"
+        type="text"
+        placeholder="搜尋課程名稱、地點..."
+        class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+      />
+      <button
+        @click="onSearch"
+        class="bg-ocean-700 text-white px-6 py-2 rounded-lg hover:bg-ocean-600 transition"
+      >
+        搜尋
+      </button>
+      <select
+        v-model="region"
+        @change="onRegion"
+        class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+      >
+        <option value="">所有地區</option>
+        <option v-for="r in REGIONS" :key="r" :value="r">{{ r }}</option>
+      </select>
+    </div>
+
+    <div v-if="loading" class="text-center text-gray-400 py-20">載入中...</div>
+
+    <div v-else-if="error" class="text-center text-red-500 py-20">{{ error }}</div>
+
+    <div v-else-if="offers.length === 0" class="text-center text-gray-400 py-20">
+      😢 找不到符合的課程，試試其他關鍵字
+    </div>
+
+    <div v-else class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      <CourseCard v-for="offer in offers" :key="offer.id" :offer="offer" />
+    </div>
+
+    <div v-if="meta && meta.last_page > 1" class="flex justify-center gap-2 mt-10">
+      <button
+        v-for="p in meta.last_page"
+        :key="p"
+        @click="fetchOffers(p)"
+        :class="[
+          'px-3 py-1 rounded-lg border transition',
+          p === meta.current_page
+            ? 'bg-ocean-700 text-white border-ocean-700'
+            : 'border-gray-300 text-gray-600 hover:bg-gray-100'
+        ]"
+      >
+        {{ p }}
+      </button>
+    </div>
+  </main>
+</template>

frontend/src/views/HomeView.vue

@@ -0,0 +1,37 @@
+<template>
+  <main>
+    <section class="bg-gradient-to-br from-ocean-900 to-ocean-600 text-white py-28 px-4 text-center">
+      <p class="text-ocean-100 text-sm uppercase tracking-widest mb-4">探索台灣最美的海底世界</p>
+      <h1 class="text-5xl font-bold mb-6 leading-tight">
+        找到你的<br class="sm:hidden" />完美潛水課程
+      </h1>
+      <p class="text-ocean-100 text-lg max-w-xl mx-auto mb-10">
+        連結優質潛水教練與愛好者，無論初學者還是進階玩家，都能找到最適合的課程體驗。
+      </p>
+      <RouterLink
+        to="/courses"
+        class="inline-block bg-white text-ocean-800 font-semibold px-8 py-3 rounded-full text-lg hover:bg-ocean-50 transition shadow-lg"
+      >
+        探索課程 →
+      </RouterLink>
+    </section>
+
+    <section class="max-w-6xl mx-auto px-4 py-16 grid sm:grid-cols-3 gap-8 text-center">
+      <div class="p-6 bg-white rounded-2xl shadow">
+        <div class="text-4xl mb-3">🏅</div>
+        <h3 class="font-semibold text-gray-800 mb-1">認證教練</h3>
+        <p class="text-sm text-gray-500">所有教練皆具備 PADI / SSI 國際認證</p>
+      </div>
+      <div class="p-6 bg-white rounded-2xl shadow">
+        <div class="text-4xl mb-3">🗺️</div>
+        <h3 class="font-semibold text-gray-800 mb-1">全台潛點</h3>
+        <p class="text-sm text-gray-500">墾丁、小琉球、綠島、蘭嶼等多地課程</p>
+      </div>
+      <div class="p-6 bg-white rounded-2xl shadow">
+        <div class="text-4xl mb-3">🛡️</div>
+        <h3 class="font-semibold text-gray-800 mb-1">安心保障</h3>
+        <p class="text-sm text-gray-500">完整保險與安全設備，讓你無後顧之憂</p>
+      </div>
+    </section>
+  </main>
+</template>

frontend/src/views/LoginView.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import api from '../api/axios'
+import { useAuthStore } from '../stores/auth'
+
+const router = useRouter()
+const route  = useRoute()
+const auth   = useAuthStore()
+
+const email    = ref('')
+const password = ref('')
+const error    = ref('')
+const loading  = ref(false)
+
+const oauthError = route.query.error === 'oauth_failed'
+  ? 'Google 登入失敗，請重試。'
+  : ''
+
+const successMsg = route.query.registered ? '註冊成功，請登入。' : ''
+
+async function submit() {
+  error.value   = ''
+  loading.value = true
+  try {
+    const res = await api.post('/member/login', {
+      email:    email.value,
+      password: password.value,
+    })
+    auth.setAuth(res.data.data.user, res.data.data.token)
+    router.push('/courses')
+  } catch (e) {
+    error.value = e.response?.data?.message || '帳號或密碼錯誤'
+  } finally {
+    loading.value = false
+  }
+}
+
+function loginWithGoogle() {
+  window.location.href = import.meta.env.VITE_API_URL + '/api/auth/google/redirect'
+}
+</script>
+
+<template>
+  <main class="min-h-[80vh] flex items-center justify-center px-4">
+    <div class="bg-white rounded-2xl shadow-lg w-full max-w-md p-8">
+      <h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">會員登入</h1>
+
+      <div v-if="successMsg" class="bg-green-50 text-green-700 text-sm rounded-lg px-4 py-3 mb-4">
+        {{ successMsg }}
+      </div>
+      <div v-if="oauthError || error" class="bg-red-50 text-red-600 text-sm rounded-lg px-4 py-3 mb-4">
+        {{ oauthError || error }}
+      </div>
+
+      <form @submit.prevent="submit" class="flex flex-col gap-4">
+        <div>
+          <label class="block text-sm text-gray-600 mb-1">Email</label>
+          <input
+            v-model="email"
+            type="email"
+            required
+            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+          />
+        </div>
+        <div>
+          <label class="block text-sm text-gray-600 mb-1">密碼</label>
+          <input
+            v-model="password"
+            type="password"
+            required
+            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+          />
+        </div>
+
+        <button
+          type="submit"
+          :disabled="loading"
+          class="bg-ocean-700 hover:bg-ocean-600 text-white font-semibold py-2.5 rounded-lg transition disabled:opacity-60"
+        >
+          {{ loading ? '登入中...' : '登入' }}
+        </button>
+      </form>
+
+      <div class="relative my-5 flex items-center">
+        <div class="flex-1 border-t border-gray-200"></div>
+        <span class="mx-3 text-sm text-gray-400">或</span>
+        <div class="flex-1 border-t border-gray-200"></div>
+      </div>
+
+      <button
+        @click="loginWithGoogle"
+        class="w-full flex items-center justify-center gap-3 border border-gray-300 rounded-lg py-2.5 hover:bg-gray-50 transition text-sm font-medium text-gray-700"
+      >
+        <svg class="w-5 h-5" viewBox="0 0 48 48">
+          <path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9 3.2l6.7-6.7C35.8 2.5 30.2 0 24 0 14.6 0 6.6 5.4 2.5 13.3l7.8 6C12.3 13.1 17.7 9.5 24 9.5z"/>
+          <path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-3.2-.4-4.7H24v9h12.7c-.6 3-2.3 5.5-4.8 7.2l7.6 5.9C43.8 37.6 46.5 31.5 46.5 24.5z"/>
+          <path fill="#FBBC05" d="M10.3 28.7A14.7 14.7 0 0 1 9.5 24c0-1.6.3-3.2.8-4.7l-7.8-6A23.9 23.9 0 0 0 0 24c0 3.9.9 7.5 2.5 10.7l7.8-6z"/>
+          <path fill="#34A853" d="M24 48c6.2 0 11.4-2 15.2-5.5l-7.6-5.9c-2 1.4-4.7 2.2-7.6 2.2-6.3 0-11.7-3.6-13.7-9.1l-7.8 6C6.6 42.6 14.6 48 24 48z"/>
+        </svg>
+        以 Google 帳號登入
+      </button>
+
+      <p class="text-center text-sm text-gray-500 mt-6">
+        還沒有帳號？
+        <RouterLink to="/register" class="text-ocean-600 hover:underline">立即註冊</RouterLink>
+      </p>
+    </div>
+  </main>
+</template>

frontend/src/views/ProfileView.vue

@@ -0,0 +1,138 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import api from '../api/axios'
+import { useAuthStore } from '../stores/auth'
+
+const auth    = useAuthStore()
+const loading = ref(true)
+const saving  = ref(false)
+const success = ref(false)
+const error   = ref('')
+
+const form = ref({
+  name:               '',
+  birthday:           '',
+  gender:             '',
+  address:            '',
+  emergency_contact:  '',
+  emergency_phone:    '',
+})
+
+onMounted(async () => {
+  try {
+    const res = await api.get('/member/profile')
+    const d   = res.data.data
+    form.value.name              = d.name  || ''
+    form.value.birthday          = d.profile?.birthday         || ''
+    form.value.gender            = d.profile?.gender           || ''
+    form.value.address           = d.profile?.address          || ''
+    form.value.emergency_contact = d.profile?.emergency_contact|| ''
+    form.value.emergency_phone   = d.profile?.emergency_phone  || ''
+  } catch {
+    error.value = '無法載入個人資料'
+  } finally {
+    loading.value = false
+  }
+})
+
+async function save() {
+  saving.value  = true
+  success.value = false
+  error.value   = ''
+  try {
+    await api.put('/member/profile', form.value)
+    auth.user = { ...auth.user, name: form.value.name }
+    success.value = true
+    setTimeout(() => (success.value = false), 3000)
+  } catch (e) {
+    error.value = e.response?.data?.message || '儲存失敗，請稍後再試'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <main class="max-w-2xl mx-auto px-4 py-10">
+    <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>
+
+    <form v-else @submit.prevent="save" class="bg-white rounded-2xl shadow p-6 flex flex-col gap-5">
+
+      <div v-if="success" class="bg-green-50 text-green-700 text-sm rounded-lg px-4 py-3">
+        ✅ 資料已更新
+      </div>
+      <div v-if="error" class="bg-red-50 text-red-600 text-sm rounded-lg px-4 py-3">
+        {{ error }}
+      </div>
+
+      <div>
+        <label class="block text-sm text-gray-600 mb-1">姓名</label>
+        <input
+          v-model="form.name"
+          type="text"
+          class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+        />
+      </div>
+
+      <div>
+        <label class="block text-sm text-gray-600 mb-1">生日</label>
+        <input
+          v-model="form.birthday"
+          type="date"
+          class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+        />
+      </div>
+
+      <div>
+        <label class="block text-sm text-gray-600 mb-1">性別</label>
+        <select
+          v-model="form.gender"
+          class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+        >
+          <option value="">請選擇</option>
+          <option value="male">男</option>
+          <option value="female">女</option>
+          <option value="other">其他</option>
+        </select>
+      </div>
+
+      <div>
+        <label class="block text-sm text-gray-600 mb-1">地址</label>
+        <input
+          v-model="form.address"
+          type="text"
+          class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+        />
+      </div>
+
+      <div class="grid grid-cols-2 gap-4">
+        <div>
+          <label class="block text-sm text-gray-600 mb-1">緊急聯絡人</label>
+          <input
+            v-model="form.emergency_contact"
+            type="text"
+            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+          />
+        </div>
+        <div>
+          <label class="block text-sm text-gray-600 mb-1">緊急聯絡電話</label>
+          <input
+            v-model="form.emergency_phone"
+            type="tel"
+            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+          />
+        </div>
+      </div>
+
+      <button
+        type="submit"
+        :disabled="saving"
+        class="bg-ocean-700 hover:bg-ocean-600 text-white font-semibold py-2.5 rounded-lg transition disabled:opacity-60"
+      >
+        {{ saving ? '儲存中...' : '儲存變更' }}
+      </button>
+    </form>
+  </main>
+</template>

frontend/src/views/RegisterView.vue

@@ -0,0 +1,101 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import api from '../api/axios'
+
+const router = useRouter()
+
+const name     = ref('')
+const email    = ref('')
+const password = ref('')
+const confirm  = ref('')
+const error    = ref('')
+const loading  = ref(false)
+
+async function submit() {
+  error.value   = ''
+  if (password.value !== confirm.value) {
+    error.value = '兩次密碼輸入不一致'
+    return
+  }
+  loading.value = true
+  try {
+    await api.post('/member/register', {
+      name:                  name.value,
+      email:                 email.value,
+      password:              password.value,
+      password_confirmation: confirm.value,
+    })
+    router.push('/login?registered=1')
+  } catch (e) {
+    error.value = e.response?.data?.message || '註冊失敗，請稍後再試'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <main class="min-h-[80vh] flex items-center justify-center px-4">
+    <div class="bg-white rounded-2xl shadow-lg w-full max-w-md p-8">
+      <h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">建立帳號</h1>
+
+      <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-gray-600 mb-1">姓名</label>
+          <input
+            v-model="name"
+            type="text"
+            required
+            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+          />
+        </div>
+        <div>
+          <label class="block text-sm text-gray-600 mb-1">Email</label>
+          <input
+            v-model="email"
+            type="email"
+            required
+            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+          />
+        </div>
+        <div>
+          <label class="block text-sm text-gray-600 mb-1">密碼</label>
+          <input
+            v-model="password"
+            type="password"
+            required
+            minlength="8"
+            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+          />
+        </div>
+        <div>
+          <label class="block text-sm text-gray-600 mb-1">確認密碼</label>
+          <input
+            v-model="confirm"
+            type="password"
+            required
+            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
+          />
+        </div>
+
+        <button
+          type="submit"
+          :disabled="loading"
+          class="bg-ocean-700 hover:bg-ocean-600 text-white font-semibold py-2.5 rounded-lg transition disabled:opacity-60"
+        >
+          {{ loading ? '處理中...' : '建立帳號' }}
+        </button>
+      </form>
+
+      <p class="text-center text-sm text-gray-500 mt-6">
+        已有帳號？
+        <RouterLink to="/login" class="text-ocean-600 hover:underline">立即登入</RouterLink>
+      </p>
+    </div>
+  </main>
+</template>