feat: Implement initial UI design system, theming, and classroom learning page.

2026-01-27 11:31:08 +07:00 · 2026-01-27 11:31:08 +07:00 · 90d50dc84a
commit 90d50dc84a
parent 8b403f906a
4 changed files with 78 additions and 21 deletions
--- a/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
+++ b/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
@ -127,7 +127,49 @@

 ---

-## 🆕 4. Recent Updates (บันทึกการอัปเดตล่าสุด)
+## 🎨 4. Theme & Styling Guide (แนวทางการออกแบบ)
+
+เพื่อให้การพัฒนาในอนาคตเป็นระเบียบและส่งต่อได้ง่าย ระบบมีการจัดการ CSS ดังนี้:
+
+### 4.1 การจัดการ Dark Mode
+
+ระบบใช้การสลับคลาส `.dark` ที่ `<html>` tag โดยอ้างอิงตัวแปรจาก `assets/css/main.css`:
+
+- **Main Background (`--bg-body`):**
+  - Light: `#f8fafc` (Slate 50)
+  - Dark: `#0f172a` (Slate 900)
+- **Surface/Card Background (`--bg-surface`):**
+  - Light: `#ffffff`
+  - Dark: `#1e293b` (Slate 800)
+- **Text Primary (`--text-main`):**
+  - Light: `#0f172a` (Slate 900)
+  - Dark: `#f8fafc` (Slate 50)
+- **Border Color (`--border-color`):**
+  - Light: `#e2e8f0` (Slate 200)
+  - Dark: `#334155` (Slate 700)
+
+### 4.2 มาตรฐานการเขียน CSS
+
+1. **ใช้ Tailwind `dark:` เสมอ:** เมื่อต้องการกำหนดสไตล์เฉพาะโหมดมืด (เช่น `dark:bg-slate-800`).
+2. **ใช้ CSS Variables:** สำหรับค่าสเตติกที่ใช้ทั้งเว็บ (เช่น `color: var(--primary)`).
+3. **ฟอนต์:** ระบบใช้ **"Prompt"** สำหรับหัวข้อและตัวเน้น และ **"Sarabun"** สำหรับเนื้อหาภาษาไทยเพื่อให้พรีเมียมและอ่านง่าย.
+
+---
+
+## ⚡ 5. Performance & Caching (ระบบจัดการความเร็ว)
+
+เพื่อป้องกันปัญหา **429 Too Many Requests** และเพิ่มความเร็ว ระบบมีการทำ **Client-side Caching** ในระดับ Composables:
+
+- **State Management:** ใช้ `useState()` ของ Nuxt เพื่อเก็บข้อมูลในหน่วยความจำ (Shared Memory).
+- **Cached Endpoints:**
+  - `fetchUserProfile`: โหลดเพียงครั้งเดียวเมื่อแอปเริ่มต้น (หรือเมื่อสั่ง Force Refresh).
+  - `fetchCategories`: โหลดครั้งเดียวและแชร์ใช้ข้ามหน้า.
+  - `fetchCourses`: เก็บรายชื่อคอร์สทั้งหมดเพื่อลดภาระ Server ในการเปลี่ยนหน้าไปมา.
+- **Request Deduping:** มีระบบเช็คสถานะ Loading เพื่อป้องกันการยิง API ตัวเดียวกันซ้ำซ้อนพร้อมกันหลายที่.
+
+---
+
+## 🆕 6. Recent Updates (บันทึกการอัปเดตล่าสุด)

 ### ✅ Phase 1: Authentication & UI Refactor

@ -158,7 +200,7 @@

 ---

-## 🔍 5. Status & Missing Integrations (ส่วนที่ต้องพัฒนาต่อ)
+## 🔍 7. Status & Missing Integrations (ส่วนที่ต้องพัฒนาต่อ)

 จากการตรวจสอบล่าสุด รายการดังต่อไปนี้ยังเป็นส่วนที่รอการพัฒนา (Pending):