elearning/Frontend-Learner/pages/dashboard/announcements.vue

<script setup lang="ts">
/**
 * @file announcements.vue
 * @description หน้าแสดงประกาศระบบและข่าวสารเกี่ยวกับคอร์สเรียน (Page displaying system and course-related announcements.)
 * ใช้เลย์เอาต์เริ่มต้นและต้องตรวจสอบสิทธิ์ (Uses the default layout and requires authentication.)
 */

// ข้อมูล metadata ของหน้า: ใช้เลย์เอาต์ 'default' และระบบตรวจสอบสิทธิ์ 'auth' (Define page metadata: usage of 'default' layout and 'auth' middleware)
definePageMeta({
  layout: 'default',
  middleware: 'auth'
})

// กำหนดชื่อหัวหน้าเว็บสำหรับ SEO (Set page title for SEO)
useHead({
  title: 'ประกาศ - e-Learning'
})
</script>

<template>
  <div class="page-container">
    <!-- ส่วนหัวหน้าเว็บ (Page Header) -->
    <h1 class="text-3xl font-black mb-10 text-slate-900 dark:text-white">ประกาศ</h1>

    <!-- 
      โครงสร้างหลัก: กริด 12 คอลัมน์ (Main Layout: 12-column Grid)
      - คอลัมน์ซ้าย (span-8): เนื้อหาประกาศหลัก (Left Column: Main announcements content)
      - คอลัมน์ขวา (span-4): แถบหมวดหมู่/ตัวกรอง (Right Column: Categories/Filter sidebar)
    -->
    <div class="grid-12">
      
      <!-- ==========================================
           พื้นที่เนื้อหาหลัก (ด้านซ้าย) (MAIN CONTENT AREA (Left))
      ========================================== -->
      <div class="col-span-8">
        
        <!-- หน้าที่ 1: ประกาศระบบสำคัญ (Feature 1: Critical System Announcement) -->
        <div class="card mb-6">
          <div class="flex items-center gap-2 mb-2">
            <span class="status-pill status-warning">สำคัญ</span>
            <span class="text-sm text-slate-600 dark:text-slate-400">24 ธ.ค. 2024</span>
          </div>
          <h2 class="text-xl font-bold mb-4 text-slate-900 dark:text-white">แจ้งปิดปรับปรุงระบบ</h2>
          <p class="mb-4">เราจะทำการปิดปรับปรุงระบบในวันที่ 25 ธ.ค. เวลา 02:00 - 04:00 น. ขออภัยในความไม่สะดวก</p>
          <!-- ส่วนแนบไฟล์ (Attachment Block) -->
          <div class="flex items-center gap-2 p-3 rounded" style="background: var(--neutral-50); border: 1px solid var(--border-color); width: fit-content;">
            <span>📎</span> <span class="text-sm font-bold">ตารางการปิดปรับปรุง.pdf</span>
          </div>
        </div>

        <!-- ประกาศ: อัปเดตคอร์ส UX/UI (Announcement: UX/UI Course Update) -->
        <div class="card mb-4" style="border-left: 4px solid var(--primary);">
          <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
            <div>
              <span class="status-pill status-neutral mb-2">เบื้องต้นการออกแบบ UX/UI</span>
              <h3 class="font-bold text-slate-900 dark:text-white">เริ่มเปิดหลักสูตรเดือนมกราคมแล้ว!</h3>
            </div>
            <span class="text-sm text-slate-600 dark:text-slate-400">23 ธ.ค. 2024</span>
          </div>
          <p class="text-slate-700 dark:text-slate-300 mb-2">นักเรียนที่ลงทะเบียนไว้ สามารถเริ่มเข้าเรียนบทนำได้ตั้งแต่วันนี้เป็นต้นไป...</p>
          <NuxtLink to="/browse/discovery" class="text-sm" style="color: var(--primary);">ดูรายละเอียดคอร์ส</NuxtLink>
        </div>

        <!-- ประกาศ: เอกสารประกอบการเรียนด้านการเข้าถึงเว็บ (WCAG) (Announcement: Accessibility (WCAG) Material) -->
        <div class="card mb-4" style="border-left: 4px solid var(--success);">
          <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
            <div>
              <span class="status-pill status-neutral mb-2">การเข้าถึงเว็บ (WCAG)</span>
              <h3 class="font-bold text-slate-900 dark:text-white">ดาวน์โหลดเอกสารประกอบการเรียนได้แล้ว</h3>
            </div>
            <span class="text-sm text-slate-600 dark:text-slate-400">22 ธ.ค. 2024</span>
          </div>
          <p class="text-slate-700 dark:text-slate-300 mb-2">เราได้เพิ่มไฟล์ PDF สรุปเกณฑ์ WCAG 2.2 ในส่วนของเอกสารประกอบการเรียนแล้ว...</p>
          <!-- ไฟล์แนบแบบเล็ก (Small Attachment) -->
          <div class="flex items-center gap-2 p-2 rounded mt-2" style="background: var(--neutral-50); border: 1px dotted var(--border-color); width: fit-content;">
            <span>📄</span> <span class="text-xs">WCAG_2.2_Summary.pdf</span>
          </div>
        </div>

        <!-- ประกาศ: อัปเดตคอร์ส React (Announcement: React Course Update) -->
        <div class="card mb-4" style="border-left: 4px solid var(--warning);">
          <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
            <div>
              <span class="status-pill status-neutral mb-2">รูปแบบ React ขั้นสูง</span>
              <h3 class="font-bold text-slate-900 dark:text-white">อัปเดตบทเรียนใหม่: React Server Components</h3>
            </div>
            <span class="text-sm text-slate-600 dark:text-slate-400">21 ธ.ค. 2024</span>
          </div>
          <p class="text-slate-700 dark:text-slate-300 mb-2">เพิ่มเนื้อหาการใช้งาน RSC และการจัดการ State ใน Next.js 14...</p>
          <NuxtLink to="/classroom/learning" class="btn btn-secondary text-sm" style="width: fit-content;">เข้าสู่บทเรียน</NuxtLink>
        </div>

        <!-- ประกาศ: คอร์สใหม่ทั่วไป (Announcement: General New Course) -->
        <div class="card mb-4">
          <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
            <h3 class="font-bold text-slate-900 dark:text-white">คอร์สใหม่: Advanced Python</h3>
            <span class="text-sm text-slate-600 dark:text-slate-400">20 ธ.ค. 2024</span>
          </div>
          <p class="text-slate-700 dark:text-slate-300 mb-2">พบกับคอร์สใหม่ล่าสุด เรียนรู้โครงสร้างข้อมูล Python...</p>
          <a href="#" class="text-sm" style="color: var(--primary);">อ่านเพิ่มเติม</a>
        </div>

        <!-- ประกาศ: อัปเดตแพลตฟอร์ม (Announcement: Platform Update) -->
        <div class="card mb-4">
          <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
            <h3 class="font-bold text-slate-900 dark:text-white">ยินดีต้อนรับสู่ดีไซน์ใหม่!</h3>
            <span class="text-sm text-slate-600 dark:text-slate-400">15 ธ.ค. 2024</span>
          </div>
          <p class="text-slate-700 dark:text-slate-300 mb-2">เราปรับโฉมใหม่ไฉไลกว่าเดิม เพื่อการใช้งานที่ดียิ่งขึ้น...</p>
          <a href="#" class="text-sm" style="color: var(--primary);">อ่านเพิ่มเติม</a>
        </div>
      </div>

      <!-- ==========================================
           แถบด้านข้าง (ด้านขวา) (SIDEBAR (Right))
           ตัวกรองหมวดหมู่ (Category Filters)
      ========================================== -->
      <div class="col-span-4">
        <div class="card">
          <h3 class="font-bold mb-4 text-slate-900 dark:text-white">หมวดหมู่</h3>
          <ul class="flex flex-col gap-2">
            <!-- ตัวเลือกตัวกรอง: ทั้งหมด (Filter Option: All) -->
            <li class="flex justify-between items-center p-2 rounded cursor-pointer" style="background: var(--neutral-50);">
              <span>ทั้งหมด</span>
              <span class="text-muted">15</span>
            </li>
            <!-- ตัวเลือกตัวกรอง: อัปเดตระบบ (Filter Option: System Updates) -->
            <li class="flex justify-between items-center p-2 rounded cursor-pointer">
              <span>อัปเดตระบบ</span>
              <span class="text-muted">3</span>
            </li>
            <!-- ตัวเลือกตัวกรอง: ข่าวสารคอร์ส (Filter Option: Course News) -->
            <li class="flex justify-between items-center p-2 rounded cursor-pointer">
              <span>ข่าวสารคอร์ส</span>
              <span class="text-muted">11</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>