--- title: "งานออกแบบประสบการณ์ผู้ใช้ (User Flow, Wireframe, Prototype)" titleEn: "UX Deliverables: User Flow, Wireframe and Prototype" clauses: ["4.3.1", "4.3.2", "4.3.3", "7.1.3"] phase: 1 category: "ออกแบบ" generated: false --- # งานออกแบบประสบการณ์ผู้ใช้ (UX Deliverables) **อ้างอิง TOR:** ข้อ 4.3.1 (ออกแบบ Layout/UX/UI), ข้อ 4.3.2 (Prototype หน้าจอหลัก), ข้อ 4.3.3 (อัตลักษณ์ มมร./Dhammaverse และ Responsive), ข้อ 7.1.3 (เอกสารส่งมอบงวดที่ 1) ประกอบภาคผนวก ก ข้อ 3.1–3.8 **ฉบับ:** 1.0 — วันที่ 3 ตุลาคม พ.ศ. 2569 > **Prototype:** ระบบสาธิตใช้ **หน้าจอที่ทำงานได้จริง** เป็น Prototype (ไม่ได้จัดทำไฟล์ Figma) ผู้ตรวจสามารถทดลองทุกหน้าได้ด้วยบัญชีสาธิต (`seed/users.json`) Wireframe ในเอกสารนี้เป็นภาพ ASCII ที่วาดจากโครงสร้าง component จริง (`src/components/*`) ภาพหน้าจอจริงสร้างได้ด้วย Playwright ตามขนาดหน้าจอในหัวข้อ 6 > **อัตลักษณ์:** `https://dhammaverse.mbu.ac.th` ยัง resolve DNS ไม่ได้ ณ วันที่พัฒนา จึงยึดอัตลักษณ์ของ `https://www.mbu.ac.th` (โลโก้ สี ฟอนต์) — ข้อ 4.3.3 และ ก.3.1.2 จึงมีสถานะ partial ใน `/tor` และจะปรับให้สอดคล้องกับ Dhammaverse เมื่อเว็บไซต์ดังกล่าวเผยแพร่ --- ## 1. หลักการออกแบบ 1. **บรรณารักษ์ที่น่าเชื่อถือ:** แสดงแหล่งอ้างอิงก่อนบทสรุป ทุกย่อหน้าผูก citation ที่คลิกตรวจสอบเนื้อหาเต็มได้ (ก.3.6.2, ก.3.6.3) 2. **ซื่อตรงต่อข้อจำกัด:** ข้อความเตือนใต้กล่องคำถามและท้ายคำตอบ การปฏิเสธแสดงเหตุผลเป็นการ์ดแยก (ก.3.6.1, ก.4.5.3) 3. **อัตลักษณ์ มมร.:** ใช้ตราสัญลักษณ์ สีแสด–น้ำตาล–ทอง และฟอนต์ Kanit/Prompt ตามเว็บไซต์มหาวิทยาลัยอย่างสม่ำเสมอทั้งฝั่งผู้ใช้และ Admin Portal 4. **เข้าถึงได้ทุกกลุ่ม:** สองภาษา ธีมมืด/สว่าง contrast ตาม WCAG ลิงก์ข้ามไปเนื้อหา ใช้งานบนมือถือได้ (2.5, ก.3.1, ก.3.2) 5. **ไม่ hard-code:** สีผ่าน CSS variables เท่านั้น ข้อความผ่าน `messages/{th,en}/*.json` ## 2. Design Tokens (จาก `src/styles/tokens.ts`) สีอ้างอิงจากเว็บไซต์ www.mbu.ac.th: **สีแสด `#F3690E`** เป็นสีประจำมหาวิทยาลัย แต่ contrast กับพื้นขาวเพียง 3.07:1 จึงใช้กับเส้น/ไอคอน/ตกแต่งเท่านั้น และใช้ **โทนเข้ม `#B34A06`** กับปุ่มและลิงก์เพื่อให้ผ่าน 4.5:1 ค่าเดียวกันประกาศเป็น CSS variables ใน `src/app/globals.css` (`:root` และ `.dark`) | Token | ค่า | CSS variable | ใช้กับ | |---|---|---|---| | `primary` | `#B34A06` | `--color-primary` | ปุ่มหลัก ลิงก์ แถบเมนูหลัก (light) | | `primaryBright` | `#F3690E` | `--color-primary-bright` | เส้นขอบ Footer ไอคอน การ์ด | | `primaryDark` | `#5A2805` | `--color-primary-dark` | แถบบนสุด (top bar) Sidebar ผู้ดูแล | | `primarySoft` | `#FDE8D7` | `--color-primary-soft` | พื้นหลัง hero/กล่องแจ้ง | | `gold` | `#E0B54A` | `--color-gold` | Citation chip, accent ใน Admin (ทองของตราพระมหามงกุฎ) | | `goldInk` | `#2A1A0E` | `--color-gold-ink` | ตัวอักษรบนพื้นทอง | | `earth` / `sand` | `#815637` / `#CCC2B7` | `--color-earth` | โทนน้ำตาล/ครีมของเว็บไซต์มหาวิทยาลัย | | `cream` | `#FBF6EC` | `--color-bg` | พื้นหลังหน้า (light) | | `surface` | `#FFFFFF` | `--color-surface` | การ์ด/แผง | | `ink` / `muted` | `#313131` / `#6B5E52` | `--color-ink` / `--color-muted` | ตัวอักษรหลัก/รอง | | `border` | `#E7DCCB` | `--color-border` | เส้นขอบ | | `darkBg` / `darkSurface` | `#171311` / `#241D19` | `.dark` → `--color-bg` / `--color-surface` | ธีมมืด | | `darkInk` / `darkMuted` | `#F3EBDD` / `#C8BBA9` | `.dark` → `--color-ink` / `--color-muted` | ตัวอักษรธีมมืด | | `darkPrimary` / `darkPrimarySoft` | `#FF8A3D` / `#3A2616` | `.dark` → `--color-primary` / `--color-primary-soft` | ปุ่ม/ลิงก์ธีมมืด | | `success` / `warning` / `danger` / `info` | `#2E7D32` / `#B26A00` / `#B3261E` / `#1E5AA8` | `--color-success` ฯลฯ | สถานะ | **ฟอนต์** (`next/font/google` ใน `src/app/[locale]/layout.tsx`, `display: swap`): | บทบาท | ฟอนต์ | variable | |---|---|---| | หัวข้อ | Kanit (400–700) | `--font-heading` | | เนื้อหา | Prompt (300–600) | `--font-sans` | | ข้อความคัมภีร์ใน Citation Modal | Noto Serif Thai (400, 600) | `--font-serif-thai` | ## 3. ตราสัญลักษณ์และตำแหน่งวางโลโก้ ไฟล์ดาวน์โหลดจาก www.mbu.ac.th: `public/assets/mbu-logo.png`, `public/assets/mbu-logo-wordmark.png`, `public/icons/favicon-32.png`, `public/icons/apple-touch-icon.png` component `src/components/brand/Logo.tsx` (alt “ตราสัญลักษณ์มหาวิทยาลัยมหามกุฏราชวิทยาลัย”) | ตำแหน่ง | รายละเอียด | |---|---| | Header ทุกหน้า | มุมซ้ายในวงกลมพื้นขาว ขนาด 36px (มือถือ 28px) คู่ข้อความ “มมร. \| MBU Buddhist AI” | | หน้า `/login`, `/register` | กึ่งกลางเหนือฟอร์ม (`AuthShell`) | | Admin Sidebar | ด้านบนคู่ชื่อ Admin Portal และ role (สีทอง) | | Footer | คอลัมน์แรกคู่ชื่อหน่วยงานและที่อยู่ | | Favicon / Apple touch icon | `metadata.icons` | | หน้า `/unavailable` และหน้า 404 (`not-found.tsx`) | แสดงโลโก้ (หน้า `error.tsx` แสดงข้อความผิดพลาดโดยไม่มีโลโก้) | ## 4. User Flow ### 4.1 ผู้ใช้ทั่วไป ```mermaid flowchart TD A["หน้าแรก / (hero + 3 การ์ด + สถิติคลังความรู้ + disclaimer)"] --> B{"เข้าสู่ระบบแล้ว?"} B -- ยัง --> C["/login"] C --> C1["อีเมล + รหัสผ่าน"] C --> C2["Gmail / Facebook (โหมดสาธิต → /mock-oauth/authorize)"] C --> C3["/register (ยินยอมนโยบาย)"] --> C B -- แล้ว --> D["/chat"] C1 --> D C2 --> D D --> E["พิมพ์คำถาม หรือเลือกคำถามตัวอย่าง"] E --> F{"ผลลัพธ์"} F -- ปฏิเสธ --> F1["การ์ดปฏิเสธ + เหตุผล"] F -- ตอบ --> G["รายการอ้างอิง (3 + Expand All)"] --> H["บทสรุป streaming + citation chip"] H --> I["Citation Modal: เนื้อหาเต็ม + คัดลอกอ้างอิง"] H --> J["👍 / 👎"] H --> K["RAG Trace"] D --> L["/chat/history"] --> D D --> M["/privacy (สำเนา / ลบ / ถอนยินยอม)"] ``` ### 4.2 Dhamma Talk ```mermaid flowchart LR A["/chat/dhamma-talk"] --> B{"มีสิทธิ์?"} B -- ไม่ --> N["ข้อความแนะนำให้ขอสิทธิ์จากผู้ดูแล"] B -- มี --> C["กล่องสนทนา: พิมพ์หัวข้อ"] --> D["Response Modal: artifact (แท็บแก้ไข/ตัวอย่าง)"] D --> E["แก้ไข → บันทึกฉบับแก้ไข"] --> F["คำสั่งถัดไปใช้ฉบับที่แก้"] --> D D --> G["ดาวน์โหลด .md"] ``` ### 4.3 ผู้ดูแลระบบ ```mermaid flowchart TD L["/login (ADMIN/SUPER_ADMIN, IP ใน allowlist)"] --> D["/admin/dashboard"] D --> O["ภาพรวม: Dashboard, Alerts"] D --> U["ผู้ใช้: Users, Privacy Requests, Audit Log"] D --> A["AI: AI Config, Prompts, Guardrails, Unavailable, Pricing"] D --> K["ความรู้: Knowledge Base, Jobs"] D --> E["ประเมินผล: Evaluation, Datasets, Compare, Security Report"] D --> P["ปฏิบัติการ: Defect Log, SLA Report, Backup*, Data Destruction*"] ``` \* แสดงผลสำหรับ SUPER_ADMIN (API ปฏิเสธบทบาทอื่น) ## 5. Wireframes (ASCII) ### 5.1 โครงหน้า (Header/Footer) และหน้าแรก `/` ``` ┌──────────────────────────────────────────────────────────────────────────┐ │ มหาวิทยาลัยมหามกุฏราชวิทยาลัย · ระบบสาธิต เว็บไซต์มหาวิทยาลัย ติดต่อ │ ← top bar (primaryDark) ├──────────────────────────────────────────────────────────────────────────┤ │ (โลโก้) มมร. | MBU Buddhist AI หน้าแรก ถาม-ตอบ Dhamma Talk ประวัติ │ ← header (primary) sticky │ เอกสาร TOR [☾/☀] [TH|EN] [เข้าสู่ระบบ] │ มือถือ: [☰] ├──────────────────────────────────────────────────────────────────────────┤ │ [แบนเนอร์ Unavailable — แสดงเมื่อเปิดโหมด] │ │ │ │ ระบบแชตบอตปัญญาประดิษฐ์เฉพาะทางพระพุทธศาสนา │ ← hero (primarySoft→bg) │ ถาม-ตอบพระไตรปิฎก อรรถกถา หลักธรรม พร้อมอ้างอิงตรวจสอบได้ │ │ [ เริ่มถาม-ตอบ ] [ ดูเอกสาร ] │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ ← 3 การ์ด (md: 3 คอลัมน์) │ │ ถาม-ตอบ │ │ Dhamma Talk │ │ เอกสาร │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ ┌──────────────────────────────────────────────────────────────────┐ │ │ │ คลังความรู้: N เอกสาร / M ข้อความอ้างอิง · บุคลิกบรรณารักษ์ │ │ │ └──────────────────────────────────────────────────────────────────┘ │ │ [ ข้อความปฏิเสธความรับผิด (disclaimer) ] │ ├──────────────────────────────────────────────────────────────────────────┤ │ (โลโก้) ที่อยู่ มมร. ตาม TOR ข้อ 17 │ นโยบายความเป็นส่วนตัว /privacy │ ระบบสาธิต │ ← footer 3 คอลัมน์ │ โทร. 02 444 6000 │ /help /tor /documents │ เวอร์ชัน │ │ │ │ prompt ver. │ └──────────────────────────────────────────────────────────────────────────┘ [แบนเนอร์คุกกี้: ยอมรับ / ปฏิเสธ] ← ล่างจอ จนกว่าผู้ใช้เลือก ``` ### 5.2 เข้าสู่ระบบ `/login` (และ `/register`) ``` ┌─────────────────────────────────────┐ │ (โลโก้ มมร.) │ │ เข้าสู่ระบบ │ │ อีเมล [______________________] │ │ รหัสผ่าน [______________________] │ │ [ข้อความผิดพลาด / บัญชีถูกล็อก] │ │ [ เข้าสู่ระบบ ] │ │ ───────────── หรือ ───────────── │ │ [ G เข้าสู่ระบบด้วย Gmail ] │ ← ป้าย “โหมดสาธิต” เมื่อใช้ Mock Provider │ [ f เข้าสู่ระบบด้วย Facebook ] │ │ ยังไม่มีบัญชี? สมัครสมาชิก │ └─────────────────────────────────────┘ /register: อีเมล, รหัสผ่าน (≥8 ตัว มีตัวอักษรและตัวเลข), ชื่อแสดง, [✓] ยินยอมตามนโยบายความเป็นส่วนตัว (ลิงก์) [สมัครสมาชิก] ``` ### 5.3 ถาม-ตอบ `/chat` ``` ┌───────────────────┬────────────────────────────────────────────────────────┐ │ [+ บทสนทนาใหม่] │ ถาม-ตอบ [บทสนทนา] (มือถือ) │ │ บทสนทนา │ ┌─────────────────┐ │ │ • มงคลสูตร… 3 ต.ค.│ │ คำถามของผู้ใช้ │ │ ← user bubble │ • อริยสัจ… 2 ต.ค.│ └─────────────────┘ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ (ซ่อนในจอ < lg, │ │ รายการอ้างอิง · 7 รายการ [แสดงผลทั้งหมด ▾] │ │ ← ส่วนที่ 1 (≤10, แสดง 3) │ เปิดเป็น overlay) │ │ 1. ขุ.ขุ. (ไทย) 25/5/3 — มงคลสูตร “…snippet…” │ │ │ │ │ 2. ขุ.ขุ.อ. (มมร.) 25/5 — อรรถกถามงคลสูตร │ │ │ │ │ 3. … │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ บทสรุป │ ← ส่วนที่ 2 (streaming) │ │ จากการค้นคว้าพบว่า … [ขุ.ขุ. (ไทย) 25/5/3] … │ ← citation chip สีทอง │ │ … (ไม่มีอ้างอิง — โปรดตรวจสอบ) │ │ │ ⚠ คำตอบนี้เป็นการสรุปจากแหล่งอ้างอิง ไม่ใช่การชี้ขาด… │ ← คำเตือนท้ายคำตอบ │ │ [👍] [👎] [RAG Trace] │ │ │ ┌ RAG Trace ────────────────────────────────────────┐ │ │ │ │ 1 checkAvailability 3ms · 2 inputGuardrail 4ms │ │ │ │ │ 3 rewriteQuery · 4 hybridSearch · 5 rerank │ │ │ │ │ 6 generate (model, prompt v, tokens, TTFT) │ │ │ │ │ 7 outputGuardrail · 8 persist │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ ┌ การ์ดปฏิเสธ (เมื่อถูกปฏิเสธ) — เหตุผล + ข้อความสุภาพ ┐ │ │ ├────────────────────────────────────────────────────────┤ │ │ [พิมพ์คำถามเกี่ยวกับพระไตรปิฎก… ] [ส่ง] │ ← sticky ล่าง │ │ คำเตือน: ระบบ AI อาจผิดพลาด โปรดตรวจสอบกับต้นฉบับ… │ ← ก.3.6.1 └───────────────────┴────────────────────────────────────────────────────────┘ Citation Modal (คลิก chip หรือรายการอ้างอิง) ┌──────────────────────────────────────────────────┐ │ ขุ.ขุ. (ไทย) 25/5/3 [✕] │ │ มงคลสูตร · ขุททกนิกาย ขุททกปาฐะ · เล่ม 25 ข้อ 5 │ │ หน้า 3 · พระไตรปิฎก · ฉบับ ไทย │ │ ─────────────────────────────────────────────── │ │ เนื้อหาเต็มของข้อ (ฟอนต์ Noto Serif Thai) │ │ … │ │ [ คัดลอกอ้างอิง ] │ └──────────────────────────────────────────────────┘ ``` ### 5.4 Dhamma Talk `/chat/dhamma-talk` ``` ┌──────────────────────────────┬─────────────────────────────────────────┐ │ Dhamma Talk [+ ใหม่] │ Response Modal (artifact) │ │ ┌──────────────────────────┐ │ [ แก้ไข ] [ ตัวอย่าง ] [ดาวน์โหลด .md]│ │ │ ผู้ใช้: ขอบทธรรมบรรยาย… │ │ ┌─────────────────────────────────────┐ │ │ │ AI: สร้างฉบับร่างแล้ว │ │ │ # หัวเรื่องบทธรรมบรรยาย │ │ │ │ [เปิด artifact] │ │ │ ## บทนำ … │ │ │ │ ผู้ใช้: ปรับให้สั้นลง… │ │ │ … [ขุ.ขุ. (ไทย) 25/5/3] │ │ │ └──────────────────────────┘ │ │ (textarea markdown เมื่ออยู่แท็บแก้ไข) │ │ │ [พิมพ์คำสั่ง… ] [ส่ง] │ └─────────────────────────────────────┘ │ │ │ [ บันทึกฉบับแก้ไข ] │ │ │ ⚠ ข้อความเตือนโหมด Dhamma Talk (ก.3.7.4) │ └──────────────────────────────┴─────────────────────────────────────────┘ มือถือ: Response Modal แสดงเป็น overlay เต็มจอ ไม่มีสิทธิ์: การ์ดอธิบาย “ฟีเจอร์นี้ต้องได้รับสิทธิ์จากผู้ดูแลระบบ” ``` ### 5.5 โครง Admin Portal `/admin/*` ``` ┌──────────────────────┬──────────────────────────────────────────────────┐ │ (โลโก้) Admin Portal │ หัวข้อหน้า [ปุ่มการกระทำ] │ │ SUPER_ADMIN │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ ← KPI cards │ ภาพรวม │ │ KPI │ │ KPI │ │ KPI │ │ KPI │ │ │ ▌Dashboard │ └──────┘ └──────┘ └──────┘ └──────┘ │ │ Alerts │ ┌ Panel ───────────────────────────────────────┐ │ │ ผู้ใช้ │ │ ตัวกรอง [ค้นหา…] [สถานะ ▾] [ช่วงเวลา ▾] │ │ │ Users │ │ ┌ TableWrap (เลื่อนแนวนอนเฉพาะตาราง) ───────┐ │ │ │ Privacy Requests │ │ │ คอลัมน์ … │ … │ Badge │ [แก้ไข] [ลบ] │ │ │ │ Audit Log │ │ └──────────────────────────────────────────┘ │ │ │ AI │ │ ‹ ก่อนหน้า หน้า 1/5 ถัดไป › │ │ │ AI Config … │ └──────────────────────────────────────────────┘ │ │ ความรู้ · ประเมินผล │ [Modal ยืนยัน / ฟอร์มแก้ไข] │ │ ปฏิบัติการ │ │ └──────────────────────┴──────────────────────────────────────────────────┘ Sidebar พื้น primaryDark ตัวอักษรขาว accent ทอง (เส้นซ้ายของเมนูที่เลือก) จอ < lg: Sidebar ยุบเป็นแถบบนสุดพร้อมปุ่ม [เมนู] ``` ## 6. Responsive ทดสอบอัตโนมัติด้วย Playwright 3 projects (`playwright.config.ts`) และตรวจว่าไม่มี horizontal scroll ของหน้า (E2E-01, E2E-14) | ขนาด | อุปกรณ์อ้างอิง | พฤติกรรม | |---|---|---| | 390 × 844 (mobile, touch) | มือถือ | เมนู header ยุบเป็น hamburger, รายการบทสนทนาเป็น overlay (ปุ่ม “บทสนทนา”), Response Modal ของ Dhamma Talk เต็มจอ, การ์ดหน้าแรกเรียงแนวตั้ง, Admin sidebar ยุบเป็นปุ่มเมนู, ตารางกว้างเลื่อนภายใน `TableWrap` | | 768 × 1024 | แท็บเล็ต | การ์ดหน้าแรก 3 คอลัมน์ (`md:`), แชตยังซ่อนรายการบทสนทนา | | 1280 × 800 | เดสก์ท็อป | แชต 2 คอลัมน์ (รายการบทสนทนา 288px + เนื้อหา), Admin sidebar คงที่ 256px | ## 7. ธีมมืด/สว่าง และภาษา - ปุ่มสลับธีม (`ThemeToggle`, `next-themes` แบบ class) และสลับภาษา TH|EN (`LanguageSwitcher`) อยู่ใน header ทุกหน้า รวมหน้า admin, login, documents, tor — ค่าคงอยู่หลังโหลดใหม่ (E2E-01) - ธีมมืดแทนค่า CSS variables ใต้ `.dark` (หัวข้อ 2) component ทุกตัวใช้ `var(--color-*)` จึงเปลี่ยนตามอัตโนมัติ - วันที่แสดงเป็นพุทธศักราชเมื่อ locale = th ## 8. ผลการตรวจ Contrast ค่าด้านล่างคำนวณด้วยสูตร WCAG 2.x (`contrastRatio()` ใน `src/styles/tokens.ts`) จากคู่สีที่ใช้จริง (`contrastPairs`) และ `tests/unit/contrast.test.ts` บังคับทุกคู่ ≥4.5:1 (ข้อความปกติ) พร้อมตรวจว่าค่าใน `globals.css` ตรงกับ tokens | คู่สี | ตัวอักษร | พื้นหลัง | อัตราส่วน | |---|---|---|---| | ink on cream | `#313131` | `#FBF6EC` | 12.08:1 | | ink on surface | `#313131` | `#FFFFFF` | 13.01:1 | | muted on cream | `#6B5E52` | `#FBF6EC` | 5.82:1 | | muted on surface | `#6B5E52` | `#FFFFFF` | 6.27:1 | | white on primary (ปุ่ม) | `#FFFFFF` | `#B34A06` | 5.39:1 | | primary link on cream | `#B34A06` | `#FBF6EC` | 5.00:1 | | primary link on surface | `#B34A06` | `#FFFFFF` | 5.39:1 | | primary on primarySoft | `#B34A06` | `#FDE8D7` | 4.54:1 | | white on primaryDark (top bar / admin sidebar) | `#FFFFFF` | `#5A2805` | 12.07:1 | | gold on primaryDark (admin accent) | `#E0B54A` | `#5A2805` | 6.25:1 | | goldInk on gold (citation chip) | `#2A1A0E` | `#E0B54A` | 8.68:1 | | earth on cream | `#815637` | `#FBF6EC` | 5.87:1 | | darkInk on darkBg | `#F3EBDD` | `#171311` | 15.59:1 | | darkInk on darkSurface | `#F3EBDD` | `#241D19` | 14.02:1 | | darkMuted on darkSurface | `#C8BBA9` | `#241D19` | 8.81:1 | | darkPrimary on darkBg | `#FF8A3D` | `#171311` | 7.87:1 | | darkPrimary on darkSurface | `#FF8A3D` | `#241D19` | 7.08:1 | | goldInk on darkPrimary (ปุ่มธีมมืด) | `#2A1A0E` | `#FF8A3D` | 7.15:1 | | darkInk on darkPrimarySoft | `#F3EBDD` | `#3A2616` | 12.08:1 | | white on danger | `#FFFFFF` | `#B3261E` | 6.54:1 | | white on success | `#FFFFFF` | `#2E7D32` | 5.13:1 | ข้อสังเกต: สีแสดประจำมหาวิทยาลัย `#F3690E` บนพื้นขาวได้ 3.07:1 จึงไม่ใช้กับข้อความ (ใช้เป็นเส้น/ไอคอนเท่านั้น) ## 9. รายการหน้าจอ (Prototype ที่ใช้งานได้จริง) | กลุ่ม | หน้า | |---|---| | สาธารณะ | `/`, `/login`, `/register`, `/help`, `/privacy-policy`, `/unavailable`, `/tor`, `/documents`, `/documents/[slug]`, `/mock-oauth/authorize` | | ผู้ใช้ที่เข้าสู่ระบบ | `/chat`, `/chat/dhamma-talk`, `/chat/history`, `/privacy` | | ผู้ดูแล | `/admin` (= dashboard), `/admin/dashboard`, `/admin/alerts`, `/admin/users`, `/admin/users/[id]`, `/admin/privacy-requests`, `/admin/audit-log`, `/admin/ai-config`, `/admin/prompts`, `/admin/guardrails`, `/admin/unavailable`, `/admin/pricing`, `/admin/knowledge-base`, `/admin/knowledge-base/[id]`, `/admin/knowledge-base/jobs`, `/admin/evaluation` (+ datasets, runs, compare, security-report), `/admin/defect-log`, `/admin/sla-report`, `/admin/backup`, `/admin/data-destruction` | รายการ route ทั้งหมดเป็น single source of truth ใน `src/data/routes.ts` ## 10. การเก็บความเห็นและปรับปรุง 1. นำเสนอหน้าจอจริงต่อคณะกรรมการในการประชุมงวดที่ 1 และบันทึกความเห็นใน Defect Log (โมดูล UX/UI) 2. ทดสอบกับกลุ่มผู้ใช้จริง (นักศึกษา พระภิกษุ บุคลากร) ระหว่าง UAT งวดที่ 2 3. ปรับสี/ฟอนต์ให้สอดคล้อง Dhammaverse เมื่อเว็บไซต์เผยแพร่ โดยแก้เพียง `src/styles/tokens.ts` และ `src/app/globals.css` (contrast test จะยืนยันซ้ำอัตโนมัติ)