feat: Scaffold new Nuxt.js application with initial pages, layouts, composables, and middleware.
This commit is contained in:
supalerk-ar66
parent
ab3124628c
commit
9bfb852ad0
8 changed files with 113 additions and 48 deletions
|
|
@ -1,6 +1,9 @@
|
|||
<script setup>
|
||||
// ดึงฟังก์ชันจัดการ Authentication
|
||||
const { fetchUserProfile, isAuthenticated } = useAuth()
|
||||
|
||||
// เมื่อ App เริ่มทำงาน (Mounted)
|
||||
// หากผู้ใช้ Login ค้างไว้ (มี Token) ให้ดึงข้อมูล Profile ล่าสุดทันที
|
||||
onMounted(() => {
|
||||
if (isAuthenticated.value) {
|
||||
fetchUserProfile()
|
||||
|
|
@ -9,8 +12,12 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<!-- แสดง Loader ระหว่างเปลี่ยนหน้า หรือโหลดข้อมูล -->
|
||||
<GlobalLoader />
|
||||
|
||||
<!-- NuxtLayout: แสดง Layout ที่กำหนดในแต่ละเพจ (default: layouts/default.vue) -->
|
||||
<NuxtLayout>
|
||||
<!-- NuxtPage: แสดงเนื้อหาของเพจปัจจุบัน (ตาม URL routng) -->
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
|
||||
// Interface สำหรับข้อมูลผู้ใช้งาน (User)
|
||||
interface User {
|
||||
id: number
|
||||
username: string
|
||||
|
|
@ -6,7 +7,7 @@ interface User {
|
|||
created_at?: string
|
||||
updated_at?: string
|
||||
role: {
|
||||
code: string
|
||||
code: string // เช่น 'STUDENT', 'INSTRUCTOR', 'ADMIN'
|
||||
name: { th: string; en: string }
|
||||
}
|
||||
profile?: {
|
||||
|
|
@ -18,6 +19,7 @@ interface User {
|
|||
}
|
||||
}
|
||||
|
||||
// Interface สำหรับข้อมูลตอบกลับตอน Login
|
||||
interface loginResponse {
|
||||
token: string
|
||||
refreshToken: string
|
||||
|
|
@ -25,6 +27,7 @@ interface loginResponse {
|
|||
profile: User['profile']
|
||||
}
|
||||
|
||||
// Interface สำหรับข้อมูลที่ใช้ลงทะเบียน
|
||||
interface RegisterPayload {
|
||||
username: string
|
||||
email: string
|
||||
|
|
@ -35,32 +38,44 @@ interface RegisterPayload {
|
|||
phone: string
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// Composable: useAuth
|
||||
// หน้าที่: จัดการระบบ Authentication และ Authorization
|
||||
// - จัดการ Login/Logout/Register
|
||||
// - จัดการ Token (Access Token & Refresh Token)
|
||||
// - เก็บ State ของผู้ใช้ปัจจุบัน (User State)
|
||||
// ==========================================
|
||||
export const useAuth = () => {
|
||||
const config = useRuntimeConfig()
|
||||
const API_BASE_URL = config.public.apiBase as string
|
||||
|
||||
// Cookie สำหรับเก็บ Access Token (หมดอายุ 1 วัน)
|
||||
const token = useCookie('auth_token', {
|
||||
maxAge: 60 * 60 * 24, // 1 day
|
||||
sameSite: 'lax',
|
||||
secure: false // Set to true in production with HTTPS
|
||||
secure: false // ควรเป็น true ใน production (HTTPS)
|
||||
})
|
||||
|
||||
// Cookie สำหรับเก็บข้อมูล User (หมดอายุ 7 วัน)
|
||||
const user = useCookie<User | null>('auth_user_data', {
|
||||
maxAge: 60 * 60 * 24 * 7, // 1 week
|
||||
sameSite: 'lax',
|
||||
secure: false
|
||||
})
|
||||
|
||||
// Computed property เช็คว่า Login อยู่หรือไม่
|
||||
const isAuthenticated = computed(() => !!token.value)
|
||||
|
||||
// Refresh Token Logic
|
||||
// Cookie สำหรับเก็บ Refresh Token (หมดอายุ 7 วัน)
|
||||
const refreshToken = useCookie('auth_refresh_token', {
|
||||
maxAge: 60 * 60 * 24 * 7, // 7 days (matching API likely)
|
||||
maxAge: 60 * 60 * 24 * 7, // 7 days (ตรงกับ API)
|
||||
sameSite: 'lax',
|
||||
secure: false
|
||||
})
|
||||
|
||||
|
||||
|
||||
// ฟังก์ชันเข้าสู่ระบบ (Login)
|
||||
const login = async (credentials: { email: string; password: string }) => {
|
||||
try {
|
||||
const data = await $fetch<loginResponse>(`${API_BASE_URL}/auth/login`, {
|
||||
|
|
@ -69,15 +84,15 @@ export const useAuth = () => {
|
|||
})
|
||||
|
||||
if (data) {
|
||||
// Validation: Only allow STUDENT role to login
|
||||
// Validation: อนุญาตเฉพาะ Role 'STUDENT' เท่านั้น
|
||||
if (data.user.role.code !== 'STUDENT') {
|
||||
return { success: false, error: 'Email ไม่ถูกต้อง' }
|
||||
}
|
||||
|
||||
token.value = data.token
|
||||
refreshToken.value = data.refreshToken // Save refresh token
|
||||
refreshToken.value = data.refreshToken // บันทึก Refresh Token
|
||||
|
||||
// The API returns the profile nested inside the user object
|
||||
// API ส่งข้อมูล profile มาใน user object
|
||||
user.value = data.user
|
||||
|
||||
return { success: true }
|
||||
|
|
@ -92,6 +107,7 @@ export const useAuth = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// ฟังก์ชันลงทะเบียน (Register)
|
||||
const register = async (payload: RegisterPayload) => {
|
||||
try {
|
||||
const data = await $fetch(`${API_BASE_URL}/auth/register-learner`, {
|
||||
|
|
@ -110,6 +126,7 @@ export const useAuth = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// ฟังก์ชันดึงข้อมูลโปรไฟล์ผู้ใช้ล่าสุด
|
||||
const fetchUserProfile = async () => {
|
||||
if (!token.value) return
|
||||
|
||||
|
|
@ -124,11 +141,12 @@ export const useAuth = () => {
|
|||
user.value = data
|
||||
}
|
||||
} catch (error: any) {
|
||||
// กรณี Token หมดอายุ (401)
|
||||
if (error.statusCode === 401) {
|
||||
// Try to refresh token
|
||||
// พยายามขอ Token ใหม่ (Refresh Token)
|
||||
const refreshed = await refreshAccessToken()
|
||||
if (refreshed) {
|
||||
// Retry fetch with new token
|
||||
// ถ้าได้ Token ใหม่ ให้ลองดึงข้อมูลอีกครั้ง
|
||||
try {
|
||||
const retryData = await $fetch<User>(`${API_BASE_URL}/user/me`, {
|
||||
headers: {
|
||||
|
|
@ -144,6 +162,7 @@ export const useAuth = () => {
|
|||
console.error('Failed to fetch user profile after refresh:', retryErr)
|
||||
}
|
||||
} else {
|
||||
// ถ้า Refresh ไม่ผ่าน ให้ Logout
|
||||
logout()
|
||||
}
|
||||
} else {
|
||||
|
|
@ -152,6 +171,7 @@ export const useAuth = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// ฟังก์ชันอัปเดตข้อมูลโปรไฟล์
|
||||
const updateUserProfile = async (payload: {
|
||||
first_name: string
|
||||
last_name: string
|
||||
|
|
@ -169,7 +189,7 @@ export const useAuth = () => {
|
|||
body: payload
|
||||
})
|
||||
|
||||
// If successful, refresh the local user data
|
||||
// หากสำเร็จ ให้ดึงข้อมูลโปรไฟล์ล่าสุดมาอัปเดตใน State
|
||||
await fetchUserProfile()
|
||||
|
||||
return { success: true }
|
||||
|
|
@ -223,6 +243,7 @@ export const useAuth = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// ฟังก์ชันขอ Access Token ใหม่ด้วย Refresh Token
|
||||
const refreshAccessToken = async () => {
|
||||
if (!refreshToken.value) return false
|
||||
|
||||
|
|
@ -238,16 +259,17 @@ export const useAuth = () => {
|
|||
return true
|
||||
}
|
||||
} catch (err) {
|
||||
// Refresh failed, force logout
|
||||
// Refresh failed (เช่น Refresh Token หมดอายุ) ให้ Force Logout
|
||||
logout()
|
||||
return false
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// ฟังก์ชันออกจากระบบ (Logout)
|
||||
const logout = () => {
|
||||
token.value = null
|
||||
refreshToken.value = null // Clear refresh token
|
||||
refreshToken.value = null // ลบ Refresh Token
|
||||
user.value = null
|
||||
const router = useRouter()
|
||||
router.push('/auth/login')
|
||||
|
|
@ -260,6 +282,7 @@ export const useAuth = () => {
|
|||
currentUser: computed(() => {
|
||||
if (!user.value) return null
|
||||
|
||||
// Helper ในการดึงข้อมูล user ที่อาจซ้อนกันอยู่หลายชั้น
|
||||
const prefix = user.value.profile?.prefix?.th || ''
|
||||
const firstName = user.value.profile?.first_name || user.value.username
|
||||
const lastName = user.value.profile?.last_name || ''
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
|
||||
// Interface สำหรับข้อมูลหมวดหมู่ (Category)
|
||||
export interface Category {
|
||||
id: number
|
||||
name: {
|
||||
|
|
@ -24,17 +24,20 @@ export interface CategoryData {
|
|||
categories: Category[]
|
||||
}
|
||||
|
||||
export interface CategoryResponse {
|
||||
interface CategoryResponse {
|
||||
code: number
|
||||
message: string
|
||||
data: CategoryData
|
||||
}
|
||||
|
||||
// Composable สำหรับจัดการข้อมูลหมวดหมู่
|
||||
export const useCategory = () => {
|
||||
const config = useRuntimeConfig()
|
||||
const API_BASE_URL = config.public.apiBase as string
|
||||
const { token } = useAuth()
|
||||
|
||||
// ฟังก์ชันดึงข้อมูลหมวดหมู่ทั้งหมด
|
||||
// Endpoint: GET /categories
|
||||
const fetchCategories = async () => {
|
||||
try {
|
||||
const response = await $fetch<CategoryResponse>(`${API_BASE_URL}/categories`, {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
// Interface สำหรับข้อมูลคอร์สเรียน (Public Course Data)
|
||||
export interface Course {
|
||||
id: number
|
||||
title: string | { th: string; en: string }
|
||||
title: string | { th: string; en: string } // รองรับ 2 ภาษา
|
||||
slug: string
|
||||
description: string | { th: string; en: string }
|
||||
thumbnail_url: string
|
||||
price: string
|
||||
is_free: boolean
|
||||
have_certificate: boolean
|
||||
status: string
|
||||
status: string // DRAFT, PUBLISHED
|
||||
category_id: number
|
||||
created_at?: string
|
||||
updated_at?: string
|
||||
|
|
@ -20,8 +21,9 @@ export interface Course {
|
|||
|
||||
rating?: string
|
||||
lessons?: number | string
|
||||
levelType?: 'neutral' | 'warning' | 'success'
|
||||
levelType?: 'neutral' | 'warning' | 'success' // ใช้สำหรับการแสดงผล Badge ระดับความยาก (Frontend Logic)
|
||||
|
||||
// โครงสร้างบทเรียน (Chapters & Lessons)
|
||||
chapters?: {
|
||||
id: number
|
||||
title: string | { th: string; en: string }
|
||||
|
|
@ -41,6 +43,7 @@ interface CourseResponse {
|
|||
total: number
|
||||
}
|
||||
|
||||
// Interface สำหรับคอร์สที่ผู้ใช้ลงทะเบียนเรียนแล้ว (My Course)
|
||||
export interface EnrolledCourse {
|
||||
id: number
|
||||
course_id: number
|
||||
|
|
@ -75,11 +78,13 @@ export const useCourse = () => {
|
|||
const { token } = useAuth()
|
||||
|
||||
// ฟังก์ชันดึงรายชื่อคอร์สทั้งหมด (Catalog)
|
||||
// ใช้สำหรับหน้า Discover/Browse
|
||||
// Endpoint: GET /courses
|
||||
const fetchCourses = async () => {
|
||||
try {
|
||||
const data = await $fetch<CourseResponse>(`${API_BASE_URL}/courses`, {
|
||||
method: 'GET',
|
||||
// ส่ง Token ไปด้วยถ้ามี (เผื่อ Logic ในอนาคตที่ต้องเช็คสิทธิ์)
|
||||
headers: token.value ? {
|
||||
Authorization: `Bearer ${token.value}`
|
||||
} : {}
|
||||
|
|
@ -110,15 +115,14 @@ export const useCourse = () => {
|
|||
} : {}
|
||||
})
|
||||
|
||||
// API might return an array (list) or single object
|
||||
// Logic จัดการข้อมูลที่ได้รับ (API อาจส่งกลับมาเป็น Array หรือ Object)
|
||||
let courseData: any = null
|
||||
|
||||
if (Array.isArray(data.data)) {
|
||||
// Try to find the matching course ID in the array
|
||||
// ถ้าเป็น Array ให้หาอันที่ ID ตรงกัน
|
||||
courseData = data.data.find((c: any) => c.id == id)
|
||||
|
||||
// Fallback: If not found, and array has length 1, it might be the one (if ID mismatch isn't the issue)
|
||||
// But generally, we should expect a match. If not match, maybe the API returned a generic list.
|
||||
// Fallback: ถ้าหาไม่เจอ แต่มีข้อมูลตัวเดียว อาจจะเป็นตัวนั้น
|
||||
if (!courseData && data.data.length === 1) {
|
||||
courseData = data.data[0]
|
||||
}
|
||||
|
|
@ -141,7 +145,7 @@ export const useCourse = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// ฟังก์ชันลงทะเบียนเรียน
|
||||
// ฟังก์ชันลงทะเบียนเรียน (Enroll)
|
||||
// Endpoint: POST /students/courses/:id/enroll
|
||||
const enrollCourse = async (courseId: number) => {
|
||||
try {
|
||||
|
|
@ -160,8 +164,7 @@ export const useCourse = () => {
|
|||
} catch (err: any) {
|
||||
console.error('Enroll course failed:', err)
|
||||
|
||||
// Check for 409 Conflict (Already Enrolled)
|
||||
// ofetch/h3 error properties might vary, check common ones
|
||||
// เช็ค Error 409 Conflict (กรณีลงทะเบียนไปแล้ว)
|
||||
const status = err.statusCode || err.status || err.response?.status
|
||||
|
||||
if (status === 409) {
|
||||
|
|
@ -180,6 +183,8 @@ export const useCourse = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// ฟังก์ชันดึงคอร์สที่ฉันลงทะเบียนเรียน (My Courses)
|
||||
// รองรับ Pagination และการกรอง Status (ENROLLED, IN_PROGRESS, COMPLETED)
|
||||
const fetchEnrolledCourses = async (params: { page?: number; limit?: number; status?: string } = {}) => {
|
||||
try {
|
||||
const queryParams = new URLSearchParams()
|
||||
|
|
@ -262,6 +267,9 @@ export const useCourse = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// ฟังก์ชันเช็คสิทธิ์การเข้าถึงบทเรียน (Access Control)
|
||||
// ต้อง Enrolled ก่อนถึงจะเข้าได้ และต้องผ่านเงื่อนไข Prerequisites (ถ้ามี)
|
||||
// Endpoint: GET /students/courses/:cid/lessons/:lid/access-check
|
||||
const checkLessonAccess = async (courseId: number, lessonId: number) => {
|
||||
try {
|
||||
const data = await $fetch<{ code: number; message: string; data: any }>(`${API_BASE_URL}/students/courses/${courseId}/lessons/${lessonId}/access-check`, {
|
||||
|
|
@ -315,6 +323,8 @@ export const useCourse = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// ฟังก์ชันดึง Video Progress ปัจจุบันของบทเรียน
|
||||
// Endpoint: GET /students/lessons/:id/progress
|
||||
const fetchVideoProgress = async (lessonId: number) => {
|
||||
try {
|
||||
const data = await $fetch<{ code: number; message: string; data: any }>(`${API_BASE_URL}/students/lessons/${lessonId}/progress`, {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file default.vue
|
||||
* @description Default application layout for authenticated users.
|
||||
* Includes the AppHeader and MobileNav.
|
||||
* @description Layout หลักสำหรับหน้าเว็บของผู้ใช้ (Authenticated Users)
|
||||
* ประกอบด้วย Header (Navbar) และ Mobile Navigation
|
||||
*/
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- App Shell: Main container with global background and text color -->
|
||||
<!-- App Shell: คอนเทนเนอร์หลักของแอปพลิเคชัน -->
|
||||
<div class="app-shell min-h-screen transition-colors duration-200">
|
||||
<!-- Header -->
|
||||
<!-- Header: แถบเมนูด้านบน -->
|
||||
<AppHeader />
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<!-- Main Content Area: ส่วนแสดงเนื้อหาหลัก -->
|
||||
<main class="app-main">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<!-- Mobile Bottom Navigation (Visible only on small screens) -->
|
||||
<!-- Mobile Bottom Navigation: แถบเมนูด้านล่าง (แสดงเฉพาะมือถือ) -->
|
||||
<MobileNav />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
// Middleware สำหรับตรวจสอบสิทธิ์การเข้าถึงหน้าเว็บ (Authentication Guard)
|
||||
export default defineNuxtRouteMiddleware((to) => {
|
||||
const { isAuthenticated, user } = useAuth()
|
||||
|
||||
// Pages that are accessible only when NOT logged in (Auth pages)
|
||||
// รายชื่อหน้าสำหรับ Guest (ห้าม User ที่ Login แล้วเข้า)
|
||||
// เช่น หน้า Login, Register
|
||||
const authPages = [
|
||||
'/auth/login',
|
||||
'/auth/register',
|
||||
|
|
@ -9,13 +11,11 @@ export default defineNuxtRouteMiddleware((to) => {
|
|||
'/auth/reset-password'
|
||||
]
|
||||
|
||||
// Pages that are accessible as public landing
|
||||
// Note: /courses and /discovery (now in browse/) might be public depending on logic,
|
||||
// but let's assume browse pages are public or handled separately.
|
||||
// For now, we list the root.
|
||||
// รายชื่อหน้าที่เข้าถึงได้โดยไม่ต้อง Login (Public Pages)
|
||||
const publicPages = ['/', '/courses', '/browse', '/browse/discovery']
|
||||
|
||||
// 1. If user is authenticated and tries to access login/register (Keep landing page accessible)
|
||||
// กรณีที่ 1: ผู้ใช้ Login แล้ว แต่พยายามเข้าหน้า Login/Register
|
||||
// ระบบจะดีดกลับไปหน้า Dashboard ตาม Role ของผู้ใช้
|
||||
if (isAuthenticated.value && authPages.includes(to.path)) {
|
||||
const role = user.value?.role?.code
|
||||
if (role === 'ADMIN') return navigateTo('/admin', { replace: true })
|
||||
|
|
@ -23,8 +23,8 @@ export default defineNuxtRouteMiddleware((to) => {
|
|||
return navigateTo('/dashboard', { replace: true })
|
||||
}
|
||||
|
||||
// 2. If user is NOT authenticated and tries to access a page that has this middleware applied
|
||||
// and is NOT one of the public or auth pages.
|
||||
// กรณีที่ 2: ผู้ใช้ยังไม่ Login แต่พยายามเข้าหน้าที่ต้อง Login (Protected Pages)
|
||||
// (หน้าอื่น ๆ ที่ไม่ได้อยู่ใน publicPages และ authPages)
|
||||
if (!isAuthenticated.value && !authPages.includes(to.path) && !publicPages.includes(to.path)) {
|
||||
return navigateTo('/auth/login', { replace: true })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
// Nuxt 3 + Quasar + Tailwind + TypeScript
|
||||
// Configuration for E-Learning Platform
|
||||
// ไฟล์ตั้งค่าหลักของ Nuxt.js ใช้สำหรับกำหนด Modules, Plugins, CSS และ Environment Variables
|
||||
export default defineNuxtConfig({
|
||||
// Modules ที่ใช้ในโปรเจกต์
|
||||
// - nuxt-quasar-ui: สำหรับ UI Component Library (Quasar)
|
||||
// - @nuxtjs/tailwindcss: สำหรับ Utility-first CSS Framework
|
||||
// - @nuxtjs/i18n: สำหรับระบบหลายภาษา (Internationalization)
|
||||
modules: ["nuxt-quasar-ui", "@nuxtjs/tailwindcss", "@nuxtjs/i18n"],
|
||||
|
||||
// i18n Configuration
|
||||
// การตั้งค่า i18n (ระบบภาษา)
|
||||
i18n: {
|
||||
strategy: 'no_prefix',
|
||||
defaultLocale: 'th',
|
||||
langDir: 'locales',
|
||||
strategy: 'no_prefix', // ไม่ใส่ prefix URL สำหรับภาษา default
|
||||
defaultLocale: 'th', // ภาษาเริ่มต้นเป็นภาษาไทย
|
||||
langDir: 'locales', // โฟลเดอร์เก็บไฟล์แปลภาษา
|
||||
locales: [
|
||||
{ code: 'th', name: 'ไทย', iso: 'th-TH', file: 'th.json' },
|
||||
{ code: 'en', name: 'English', iso: 'en-US', file: 'en.json' }
|
||||
|
|
@ -18,14 +23,19 @@ export default defineNuxtConfig({
|
|||
redirectOn: 'root'
|
||||
}
|
||||
},
|
||||
|
||||
// ไฟล์ CSS หลักของโปรเจกต์
|
||||
css: ["~/assets/css/main.css"],
|
||||
|
||||
typescript: {
|
||||
strict: true,
|
||||
},
|
||||
|
||||
// การตั้งค่า Quasar Framework
|
||||
quasar: {
|
||||
plugins: ["Notify"],
|
||||
plugins: ["Notify"], // เปิดใช้ Plugin Notify
|
||||
config: {
|
||||
brand: {
|
||||
brand: { // กำหนดชุดสีหลัก (Theme Colors)
|
||||
primary: "#4b82f7",
|
||||
secondary: "#2f5ed7",
|
||||
accent: "#44d4a8",
|
||||
|
|
@ -33,12 +43,16 @@ export default defineNuxtConfig({
|
|||
},
|
||||
},
|
||||
},
|
||||
|
||||
// กำหนดให้ Nuxt สแกน Components ในโฟลเดอร์ ~/components โดยอัตโนมัติ
|
||||
components: [
|
||||
{
|
||||
path: "~/components",
|
||||
pathPrefix: false,
|
||||
pathPrefix: false, // เรียกใช้ Component ได้โดยไม่ต้องมี prefix ชื่อโฟลเดอร์
|
||||
},
|
||||
],
|
||||
|
||||
// การตั้งค่า HTML Head (Meta tags, Google Fonts)
|
||||
app: {
|
||||
head: {
|
||||
htmlAttrs: {
|
||||
|
|
@ -51,11 +65,14 @@ export default defineNuxtConfig({
|
|||
link: [
|
||||
{
|
||||
rel: "stylesheet",
|
||||
// โหลด Font: Inter, Prompt, Sarabun
|
||||
href: "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Prompt:wght@300;400;500;600;700;800;900&family=Sarabun:wght@300;400;500;600;700;800&display=swap",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
// Environment Variables ที่ใช้ในโปรเจกต์ (เข้าถึงได้ทั้ง Server และ Client)
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
apiBase: process.env.NUXT_PUBLIC_API_BASE || 'http://localhost:4000/api'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file index.vue
|
||||
* @description หน้า Landing Page (หน้าแรกของเว็บสำหรับ Guest)
|
||||
* ใช้ Layout: 'landing' (ไม่มี Sidebar / Navbar แบบ Dashboard)
|
||||
*/
|
||||
definePageMeta({
|
||||
layout: 'landing',
|
||||
middleware: 'auth'
|
||||
middleware: 'auth' // ใช้ auth middleware เพื่อเช็ค: ถ้า Login แล้วให้ดีดไป Dashboard
|
||||
})
|
||||
|
||||
useHead({
|
||||
|
|
@ -18,7 +23,7 @@ useHead({
|
|||
<div class="absolute bottom-[-20%] left-[-10%] w-[60%] h-[60%] rounded-full bg-indigo-600/10 blur-[140px] animate-pulse-slow" style="animation-delay: 3s;"/>
|
||||
</div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<!-- Hero Section: ส่วนหัวของหน้าเว็บ แสดงข้อความต้อนรับและปุ่ม CTA -->
|
||||
<section class="hero-section min-h-[95vh] flex items-center relative overflow-hidden pt-32 pb-20">
|
||||
<div class="container relative z-10 w-full">
|
||||
<div class="grid-hero items-center">
|
||||
|
|
@ -135,7 +140,7 @@ useHead({
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Platform Info Section -->
|
||||
<!-- Platform Info Section: ส่วนแสดงจุดเด่นของแพลตฟอร์ม (Features) -->
|
||||
<section class="info-section py-40 bg-slate-900 relative transition-colors">
|
||||
<!-- Background detail -->
|
||||
<div class="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue