feat: Implement My Courses page with course cards, filtering, and certificate download functionality.

2026-01-30 14:34:45 +07:00 · 2026-01-30 14:34:45 +07:00 · c4f68eb927
commit c4f68eb927
parent 9ed2347843
4 changed files with 107 additions and 157 deletions
--- a/Frontend-Learner/คู่มืออธิบาย/dev.md
+++ b/Frontend-Learner/คู่มืออธิบาย/dev.md
@ -1,101 +0,0 @@
-# 📚 ระบบห้องเรียน (Classroom Module)
-
-> **Location:** `pages/classroom/`
-
-โมดูลนี้เป็นหัวใจหลักของระบบ e-Learning ทำหน้าที่จัดการประสบการณ์การเรียนรู้ทั้งหมด ตั้งแต่การรับชมวิดีโอ การทำแบบฝึกหัด ไปจนถึงการวัดผลสอบ ออกแบบโดยเน้น **"ผู้เรียนเป็นศูนย์กลาง" (Learner-Centric)** และมีความปลอดภัยสูง
-
---
-
-## 🗺️ User Flow (เส้นทางการเรียนรู้)
-
-1.  **เข้าคลาสเรียน**: ผู้ใช้เลือกคอร์สจาก "คอร์สของฉัน" ระบบจะพาเข้าสู่หน้า `learning.vue`
-2.  **เรียนรู้เนื้อหา**:
-    - ระบบเช็คสิทธิ์ (Locked/Unlocked) อัตโนมัติ
-    - ดูวิดีโอ (Video Player) พร้อมระบบจำเวลาเดิม (Resume)
-    - ดาวน์โหลดเอกสารประกอบ (Attachments)
-3.  **บันทึกผล**: เมื่อดูจบหรือทำ Progress ระบบจะบันทึกให้อัตโนมัติแบบ Real-time
-4.  **วัดผลสอบ**: เมื่อเรียนครบ เข้าสู่หน้า `quiz.vue` เพื่อทำข้อสอบจับเวลา
-5.  **ประเมินผล**: ทราบผลสอบทันที (Pass/Fail) พร้อมเฉลยคะแนน
-
---
-
-## 1. 📺 หน้าเรียน (`learning.vue`)
-
-**หน้าที่:** พื้นที่หลักสำหรับการเรียนรู้ รองรับ Video Streaming และเอกสารการสอน
-
-### 🎨 การออกแบบ (Design Concept)
-
- **Focus Mode**: ใช้ Layout พิเศษ (`layout: false`) ตัดเมนูรบกวนออก ให้พื้นที่วิดีโอใหญ่ที่สุด
- **Smart Sidebar**: แถบเมนูบทเรียนทางซ้าย
-  - _Desktop_: กางออกเสมอ เพื่อให้เห็นภาพรวมเนื้อหา
-  - _Mobile_: ซ่อนอัตโนมัติ (Drawer) เรียกดูได้เมื่อต้องการ
- **Responsive Player**: เครื่องเล่นวิดีโอที่ปรับขนาดตามหน้าจอ และมี Custom Controls ที่สวยงาม
-
-### ⚙️ ระบบเบื้องหลัง (Technical Logic)
-
- **Video Resume**: จำวินาทีล่าสุดที่ดูค้างไว้ กลับมาดูต่อได้ทันที (ดึงจาก Hybrid Storage)
- **Hybrid Saving System**:
-  1.  **Local Save**: บันทึกทุก 5 วินาทีลงเครื่องผู้ใช้ (กันเน็ตหลุด)
-  2.  **Server Save**: บันทึกทุก 15 วินาทีลงฐานข้อมูล (Sync ข้ามอุปกรณ์)
-  3.  **Anti-Cheat**: ระบบป้องกันการลากข้าม (Seek Forward) ไปยังจุดที่ยังดูไม่ถึง
-
---
-
-## 2. 📝 หน้าสอบ (`quiz.vue`)
-
-**หน้าที่:** ระบบสอบวัดผลมาตรฐาน พร้อมตัวจับเวลาและการคำนวณคะแนน
-
-### <20> รูปแบบการทำงาน (State Machine)
-
-หน้าจอนี้ทำงานแบบ **Single Page Application** เปลี่ยนสถานะโดยไม่ต้องโหลดหน้าใหม่ แบ่งเป็น 3 States:
-
-1.  **🟢 Start**: หน้าเตรียมตัว บอกกฎกติกา จำนวนข้อ และเวลาที่ให้
-2.  **🟡 Taking**: หน้าทำข้อสอบ
-    - มี **Countdown Timer** นับถอยหลัง
-    - โจทย์ 1 ข้อต่อ 1 หน้า (Pagination) เพื่อโฟกัสทีละข้อ
-3.  **🔴 Result**: หน้าสรุปผล แจ้งคะแนนและสถานะ (ผ่าน/ไม่ผ่าน) ทันที
-
-### 🛡️ ความปลอดภัย (Security)
-
- **Randomization**: สุ่มลำดับข้อ (Shuffle Questions) และสลับตัวเลือก (Shuffle Choices) ทุกครั้งที่สอบ
- **Backend Grading**: ส่งคำตอบไปตรวจที่ Server เท่านั้น ไม่มีการเฉลยค้างไว้ใน Code ฝั่งหน้าบ้าน (ป้องกันการแอบดูเฉลย)
-
---
-
-## 🛠️ โครงสร้างทางเทคนิค (Technical Stack)
-
-การทำงานของระบบขับเคลื่อนด้วยการเชื่อมต่อข้อมูลและ Component ที่ทันสมัย:
-
-### 📥 1. แหล่งข้อมูล (Data Sources & Composables)
-
- **`useCourse` (Core Logic)**:
-  - `fetchCourseLearningInfo`: ดึงผังบทเรียน
-  - `fetchLessonContent`: ดึงวิดีโอ/โจทย์
-  - `saveVideoProgress`: บันทึกเวลาเรียน
-  - `submitQuiz`: ส่งคำตอบสอบ
- **`useAuth`**: ระบุตัวตนผู้เรียนเพื่อบันทึกข้อมูลได้ถูกต้อง
- **`useMediaPrefs`**: ระบบจำค่าเสียง (Volume Memory) ไม่ต้องปรับเสียงใหม่ทุกครั้งที่เปลี่ยนบท
-
-### 🧩 2. ชิ้นส่วนหน้าจอ (Quasar Components)
-
- **Layout**: `q-layout`, `q-header`, `q-drawer` (จัดโครงสร้าง Responsive)
- **Interaction**: `q-btn` (ปุ่ม), `q-dialog` (Popup แจ้งเตือน)
- **Feedback**: `q-spinner` (โหลด), `q-icon` (สัญลักษณ์สถานะ)
- **Data**: `q-list`, `q-item` (รายการบทเรียน)
-
---
-
-## ✨ จุดเด่นสำหรับนำเสนอ (Key Highlights)
-
-1.  **Seamless Experience**: เรียนต่อได้ทันทีไม่ต้องจำว่าถึงไหน (Resume Playback)
-2.  **Robust Data Saving**: เน็ตหลุดวิก็ไม่หาย ด้วยระบบบันทึก 2 ชั้น (Hybrid Save)
-3.  **Modern & Clean UI**: ดีไซน์สบายตา ลดสิ่งรบกวน เหมาะกับการเรียนรู้นานๆ
-4.  **Secure Testing**: ระบบสอบที่เชื่อถือได้ ป้องกันการลอกและแอบดูเฉลย
-
---
-
-## 🚀 แผนพัฒนาต่อยอด (Future Roadmap)
-
- [ ] **Comment & Q&A**: ระบบถาม-ตอบ ใต้คลิปวิดีโอ
- [ ] **Video Bookmarks**: ปักหมุดช่วงเวลาสำคัญในวิดีโอ
- [ ] **Interactive Video**: คำถามเด้งขึ้นมาระหว่างดูวิดีโอ (Pop-up Quiz)