feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.

2026-02-27 10:05:33 +07:00 · 2026-02-27 10:05:33 +07:00 · ad11c6b7c5
commit ad11c6b7c5
parent aceeb80d9a
44 changed files with 720 additions and 578 deletions
--- a/Frontend-Learner/composables/useThemeMode.ts
+++ b/Frontend-Learner/composables/useThemeMode.ts
@ -1,26 +1,41 @@
 import { useQuasar } from 'quasar'

+/**
+ * @composable useThemeMode
+ * @description จัดการระบบโหมดสว่าง/มืด (Light/Dark Theme) ของแพลตฟอร์ม
+ * ครอบคลุมการสั่งบันทึกการตั้งค่า, เปลี่ยนคลาส Tailwind และ Sync ซิงก์กับ Quasar UI
+ */
 export const useThemeMode = () => {
  const $q = useQuasar()

-  // deterministic on SSR: default = light
+  // สถานะเริ่มต้นของโหมดมืด (สำหรับการทำ SSR ถูกเซ็ตเป็น false (สว่าง) ไว้ก่อน)
  const isDark = useState<boolean>('theme:isDark', () => false)

+  // ฟังก์ชันใช้คลาสกับ Tag <html> เพื่อให้ Tailwind หรือ CSS รันโหมดมืด
  const applyTheme = (value: boolean) => {
-    if (!process.client) return
+    if (!process.client) return // หากทำงานฝั่งเซิร์ฟเวอร์ จะไม่สั่งให้รัน DOM
+    
+    // สลับคลาส 'dark' หรือปิด
    document.documentElement.classList.toggle('dark', value)
+    
+    // สั่งให้ Quasar (UI Framework) ปรับโหมดสีให้ตรงกัน (มืด/สว่าง)
    $q.dark.set(value)
+    
+    // บันทึกการตั้งค่าลงเครื่องระยะยาวเบราว์เซอร์
    localStorage.setItem('theme', value ? 'dark' : 'light')
  }



+  // จับตาดูเมื่อตัวแปรเปลี่ยนค่าค่อยทำการเปลี่ยนโหมดบนหน้าจอ
  watch(isDark, (v) => applyTheme(v))

+  // ฟังก์ชันสั่งสลับโหมด ไปมา (Toggle)
  const toggle = () => {
    isDark.value = !isDark.value
  }

+  // ฟังก์ชันสำหรับกำหนดตั้งค่าโหมดแบบเจาะจง
  const set = (v: boolean) => {
    isDark.value = v
  }