103 lines
9.4 KiB
Markdown
103 lines
9.4 KiB
Markdown
# 🛠️ Web Development Details: e-Learning Platform (Learner Frontend)
|
|
|
|
เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และการทำงานของระบบเพื่อความสะดวกในการพัฒนาต่อและส่งมอบงาน
|
|
|
|
## 🚀 Tech Stack
|
|
|
|
- **Framework:** Nuxt 3 (Vue 3 Composition API)
|
|
- **Language:** TypeScript
|
|
- **Styling:**
|
|
- Tailwind CSS (Utility-first)
|
|
- Vanilla CSS Variables (Design Tokens & Theming)
|
|
- Custom CSS Animations (ใน `assets/css/main.css`)
|
|
- **State Management:** Vue `ref`, `reactive`, `computed` (Local State) & Composables (Global State)
|
|
- **UI Component:**
|
|
- Custom Premium Components (สร้างเองเพื่อให้ได้ Design ที่เฉพาะตัว)
|
|
- Quasar UI (ใช้บางส่วนสำหรับ Notifications และ Layout พื้นฐาน)
|
|
- **Icons:** SVG Icons (Inline เพื่อ Performance สูงสุด)
|
|
|
|
---
|
|
|
|
## 📂 โครงสร้างโฟลเดอร์และหน้าที่ของไฟล์ (Project Structure)
|
|
|
|
### `pages/` (Routes)
|
|
|
|
กำหนดเส้นทาง (Routes) ของเว็บไซต์:
|
|
|
|
| ไฟล์ | Path URL | หน้าที่และความสำคัญ |
|
|
| :------------------------ | :----------------- | :------------------------------------------------------------------------------------------- |
|
|
| `index.vue` | `/` | **Main Landing Page:** หน้าแรกบุคคลทั่วไป มีเอฟเฟกต์พื้นหลัง Hero Section และข้อมูลแพลตฟอร์ม |
|
|
| **`auth/`** | | **Authentication Module:** รวมหน้าที่เกี่ยวกับการยืนยันตัวตนทั้งหมด |
|
|
| ├── `login.vue` | `/auth/login` | หน้าเข้าสู่ระบบ |
|
|
| ├── `register.vue` | `/auth/register` | หน้าสมัครสมาชิกใหม่ |
|
|
| ├── `forgot-password.vue` | `/auth/forgot..` | หน้าขอรหัสผ่านใหม่ |
|
|
| └── `reset-password.vue` | `/auth/reset..` | หน้าตั้งรหัสผ่านใหม่ |
|
|
| **`dashboard/`** | | **User Dashboard Module:** ส่วนพื้นที่ส่วนตัวของผู้ใช้ |
|
|
| ├── `index.vue` | `/dashboard` | **Main Dashboard:** หน้าหลักแสดงความคืบหน้าการเรียนล่าสุด และคอร์สแนะนำ |
|
|
| ├── `my-courses.vue` | `/dashboard/my..` | **User Knowledge Base:** รวมคอร์สที่ผู้ใช้งานลงทะเบียนเรียนแล้ว |
|
|
| ├── `profile.vue` | `/dashboard/pro..` | **User Settings:** หน้าจัดการข้อมูลส่วนตัว |
|
|
| ├── `announcements.vue` | `/dashboard/ann..` | **Platform News:** หน้ารวมประกาศข่าวสาร |
|
|
| **`browse/`** | | **Browsing Module:** ส่วนค้นหาคอร์สเรียน |
|
|
| ├── `index.vue` | `/browse` | **Public Catalog:** หน้ารวมคอร์สสำหรับผู้เยี่ยมชมทั่วไป (Clean Card UI) |
|
|
| ├── `discovery.vue` | `/browse/disc..` | **Course Catalog:** หน้าค้นหาคอร์ส พร้อมระบบ Filter Accordion และ Expandable Categories |
|
|
| ├── `opencovery.vue` | `/browse/open..` | **Public Detail:** หน้ารายละเอียดคอร์สแบบสาธารณะ |
|
|
| **`classroom/`** | | **Learning Module:** ส่วนการเรียนการสอน |
|
|
| ├── `learning.vue` | `/classroom/lea..` | **Classroom Experience:** ห้องเรียนออนไลน์เต็มรูปแบบ (Video Player, Sidebar) |
|
|
| ├── `quiz.vue` | `/classroom/quiz` | **Assessment Module:** ระบบสอบวัดผล 4 ขั้นตอน |
|
|
|
|
### `components/` (Reusable UI)
|
|
|
|
ส่วนประกอบที่นำไปใช้ซ้ำในหน้าต่างๆ:
|
|
|
|
- **Layout & Navigation:**
|
|
- `AppHeader.vue` / `AppSidebar.vue`: ส่วนหัวและเมนูข้างสำหรับผู้ใช้ที่ล็อกอินแล้ว
|
|
- `LandingHeader.vue` / `LandingFooter.vue`: ส่วนหัวและท้ายสำหรับหน้า Landing Page
|
|
- `MobileNav.vue`: เมนูนำทางด้านล่างสำหรับหน้าจอมือถือ
|
|
- `UserMenu.vue`: เมนู Dropdown จัดการบัญชีผู้ใช้
|
|
- **Cards & Display:**
|
|
- `CourseCard.vue`: การ์ดแสดงข้อมูลคอร์ส (Updated: Clean Design, No Badge)
|
|
- `UserAvatar.vue`: แสดงรูปโปรไฟล์ผู้ใช้ พร้อม Fallback
|
|
- **Forms & Feedback:**
|
|
- `FormInput.vue`, `LoadingSpinner.vue`, `LoadingSkeleton.vue`
|
|
|
|
---
|
|
|
|
## 🔐 ระบบรักษาความปลอดภัยและ Logic พิเศษ (Core Logic)
|
|
|
|
| ส่วนงาน | ไฟล์ | คำอธิบาย |
|
|
| :-------------- | :----------------------------------- | :-------------------------------------------------------------- |
|
|
| **Route Guard** | `middleware/auth.ts` | Middleware ดักจับการเข้าถึง เช็กสถานะการล็อกอิน |
|
|
| **Auth State** | `composables/useAuth.ts` | Centralized Logic สำหรับ Login/Logout เก็บ state ผู้ใช้ปัจจุบัน |
|
|
| **No-Cache** | `server/middleware/cache-control.ts` | ป้องกันการ Cache หน้าสำคัญด้วย Headers |
|
|
|
|
---
|
|
|
|
## 🎨 Design System & Theming
|
|
|
|
- **Global Styles:** `assets/css/main.css`
|
|
- **Strict Dark Palette:** ใช้ระบบ CSS Variables ใหม่ (`--bg-body`, `--bg-surface`, `--text-main`, etc.) เพื่อคุมธีม Dark Mode ให้แม่นยำ (`Slate-900` base)
|
|
- **Dynamic Colors:** เปลี่ยนการใช้ Hardcoded HEX เป็น Tailwind Utilities (`text-slate-900 dark:text-white`) เพื่อรองรับทั้ง Light/Dark Mode สมบูรณ์แบบ
|
|
- **Font Configuration:** ใช้ **Inter** (English) และ **Prompt/Sarabun** (Thai)
|
|
|
|
---
|
|
|
|
## 🆕 อัปเดตล่าสุด (Recent Major Updates)
|
|
|
|
### 1. **Authentication Refactor**
|
|
|
|
- ย้ายไฟล์ที่เกี่ยวข้องกับ Auth (`login`, `register`, etc.) ไปไว้ในโฟลเดอร์ `pages/auth/` เพื่อความเป็นระเบียบและง่ายต่อการจัดการ
|
|
|
|
### 2. **UI/UX Refinements (Discovery & Courses)**
|
|
|
|
- **Discovery Page:**
|
|
- **Accordion Filters:** ปรับปรุง Filter หมวดหมู่ให้สามารถ ย่อ/ขยาย ได้ (`v-show`)
|
|
- **Show More Logic:** เพิ่มปุ่ม "แสดงเพิ่มเติม/แสดงน้อยลง" สำหรับรายการหมวดหมู่ที่ยาว
|
|
- **Cleaner UI:** ลบไอคอน Chevron ที่ซ้ำซ้อนในแต่ละรายการออก
|
|
- **Courses Page (Public):**
|
|
- **Simplified Cards:** ลบ Badge ระดับความยาก (Level) ออกเพื่อให้การ์ดดูสะอาดตาขึ้น
|
|
- **Data Cleanup:** ลบข้อมูล Level ที่ไม่จำเป็นออกจาก Mock Data
|
|
|
|
### 3. **Dashboard (Home) Update**
|
|
|
|
- **New Layout:** ปรับปรุงหน้า Dashboard ให้แสดง "คอร์สที่เรียนล่าสุด" และ "คอร์สแนะนำ" อย่างชัดเจน
|
|
- **Progress Tracking:** แสดง Progress Bar ที่สวยงามสำหรับการเรียนปัจจุบัน
|