Frontend Web Client — Trợ Lý AI CXK (Accessibility-First)

Công nghệ: Vue 3 | Vite | Pinia | WCAG 2.2 Level AA
Giao diện web được thiết kế đặc thù cho người cao tuổi Việt Nam: cỡ chữ lớn, độ tương phản cao, thao tác tối giản, hỗ trợ giọng nói.

1. Cấu Trúc Mã Nguồn

• public/: Assets tĩnh và index.html.
• src/:
• App.vue: Giao diện chính của ứng dụng.
• components/:
  • ChatWindow.vue: Màn hình hội thoại chính.
  • MessageBubble.vue: Khung hiển thị câu hỏi và phản hồi rõ ràng.
  • VoiceInput.vue: Nút bấm micro lớn cho phép nói thay vì gõ phím.
  • CitationCard.vue: Khối hiển thị nguồn y khoa minh bạch có thể bấm xem chi tiết.
  • EmergencyBanner.vue: Banner cảnh báo cờ đỏ khẩn cấp màu nổi bật.
  • FontSizer.vue: Nút chỉnh tăng/giảm kích thước chữ tức thì.
  • SafetyDisclaimer.vue: Tuyên bố miễn trừ trách nhiệm y tế hiển thị thường trực.
• styles/:
  • accessibility.css: Các biến CSS và chuẩn tuân thủ WCAG 2.2.
  • elderly-theme.css: Giao diện thân thiện người cao tuổi (nút bấm lớn, khoảng cách thoáng).
  • high-contrast.css: Chế độ tương phản cao cho người thị lực suy giảm.

2. Phát Triển & Build

npm install
npm run dev
npm run build

Kết quả build trong thư mục dist/ sẽ được IIS trực tiếp phân phối dưới dạng static files.