diff --git a/Frontend-Learner/คู่มืออธิบาย/ED.md b/Frontend-Learner/คู่มืออธิบาย/ED.md deleted file mode 100644 index 5727dde2..00000000 --- a/Frontend-Learner/คู่มืออธิบาย/ED.md +++ /dev/null @@ -1,71 +0,0 @@ -วันที่บันทึกปฏิบัติงาน \* -18/02/2026 - -องค์ความรู้ที่ได้รับ \* - -- การใช้งาน Nuxt 3 Routing (useRoute, useRouter) ในการจัดการ Query Parameters -- การเชื่อมโยง State กับ URL เพื่อสร้าง Deep Linking ให้แชร์ลิงก์หมวดหมู่ได้ -- การใช้งาน Vue 3 Composition API (Script Setup) แทน Options API เพื่อความเป็นระเบียบและลดความซับซ้อน -- การตกแต่ง UI ด้วย Tailwind CSS ขั้นสูง (Gradients, Glow Effects, Backdrop Filters) เพื่อให้ได้ธีม Premium/Clean -- การจัดการ Event Listener ใน Vue Component (onMounted, onUnmounted) เพื่อป้องกัน Memory Leak - -รายละเอียด \* - -- พัฒนาระบบ Filter หมวดหมู่คอร์สเรียน เชื่อมโยงหน้าแรก (Home) กับหน้าค้นหา (Browse) -- ปรับแก้โครงสร้าง Code ในหน้า `index.vue` ให้ใช้ Script Setup ทั้งหมดเพื่อลดความซับซ้อนและแก้ปัญหาการเรียกใช้ตัวแปร -- ปรับดีไซน์ส่วน Call to Action (CTA) ในหน้า `browse/index.vue` และ `browse/recommended.vue` ให้ดูสว่างและทันสมัยขึ้นโดยใช้แสงและเงา (Blue Glow) - -ปัญหาและอุปสรรค \* - -- พบปัญหาการทำงานร่วมกันระหว่าง Options API และ Script Setup ในไฟล์ `index.vue` ทำให้ฟังก์ชันบางตัวเรียกใช้ไม่ได้ -- ระบบ Filter เดิมไม่ทำงานเมื่อกดย้อนกลับ (Back Button) เนื่องจากไม่ได้ Watch การเปลี่ยนแปลงของ URL Query -- การดึงข้อมูลคอร์สเริ่มต้นได้ไม่ครบเนื่องจาก API มีการกำหนด Limit ไว้ - -รายละเอียด \* - -- แก้ไขโดยการยุบรวม Code ทั้งหมดให้เป็นรูปแบบ Script Setup มาตรฐานเดียว -- เพิ่ม `watch(() => route.query.category)` ในหน้า Browse เพื่อให้อัปเดตข้อมูลทุกครั้งที่ URL เปลี่ยน -- เพิ่มพารามิเตอร์ `limit: 1000` ในการเรียก API เพื่อดึงข้อมูลคอร์สทั้งหมดมาแสดง - -หลักฐานการปฏิบัติงาน (เฉพาะไฟล์ JPG, JPEG, PNG, PDF.) - -- แก้ไขไฟล์ `pages/index.vue` (เพิ่ม goBrowse, ย้าย Logic) -- แก้ไขไฟล์ `pages/browse/index.vue` (เพิ่ม Query Watcher, ปรับ UI) -- แก้ไขไฟล์ `pages/browse/recommended.vue` (ปรับ UI ส่วน CTA) -- แก้ไขไฟล์ `components/layout/LandingHeader.vue` (แก้ Memory Leak) - ---- - -วันที่บันทึกปฏิบัติงาน \* -19/02/2026 - -องค์ความรู้ที่ได้รับ \* - -- การออกแบบ Dashboard Layout แบบ Modern Grid (SkillLane Style/Reference Style) -- การใช้ `q-carousel` (Quasar) ทำ Image Slider แบนเนอร์ประชาสัมพันธ์ -- การจัดการแสดงผลข้อมูล Course Card แยกตามสถานะ (Enrolled/Recommended/Free) -- การปรับแต่ง Menu Navigation (`useNavItems`) เพื่อลดความซ้ำซ้อนใน Sidebar - -รายละเอียด \* - -- ออกแบบและพัฒนาหน้า Dashboard ใหม่ (`pages/dashboard/index.vue`) - 1. เพิ่ม Banner Slide ขนาดใหญ่ด้านบน - 2. แสดงรายการ "คอร์สที่คุณกำลังเรียน" (In Progress Courses) พร้อม Progress Bar - 3. แสดงรายการ "คอร์สแนะนำ" (Recommended Courses) - 4. เพิ่มหมวด "คอร์สฟรี" (Free Courses) -- ปรับแต่ง Sidebar Navigation (`composables/useNavItems.ts`) ลบเมนูที่ไม่จำเป็นออก (Online Courses, Recommended, Announcements) ให้เหลือเฉพาะเมนูหลัก - -ปัญหาและอุปสรรค \* - -- การแสดงผล Carousel มีปุ่ม Arrows เกะกะสายตาบนแบนเนอร์ -- ต้องการแยกข้อมูลคอร์สฟรีออกจากคอร์สทั่วไป แต่ API ยังไม่มี Filter โดยตรง - -รายละเอียด \* - -- แก้ไข Property ของ `q-carousel` โดยลบ `arrows` ออก เพื่อให้เหลือเฉพาะ Navigation Dots ด้านล่าง -- เขียน Logic กรองข้อมูลฝั่ง Client (Client-side filtering) สำหรับคอร์สฟรี โดยตรวจสอบจาก `price === 0` หรือ `is_free: true` - -หลักฐานการปฏิบัติงาน (เฉพาะไฟล์ JPG, JPEG, PNG, PDF.) - -- แก้ไขไฟล์ `pages/dashboard/index.vue` (New Dashboard UI) -- แก้ไขไฟล์ `composables/useNavItems.ts` (Clean Sidebar)