Chuyển tới nội dung chính

v0.4.0 — Trang quản trị, phân quyền và hạ tầng production ⭐

· 4 phút để đọc

Thời gian: 2026-01-24 → 2026-01-31

:::tip Kỷ lục cập nhật 34 commits trong một ngày duy nhất (27/01/2026) — đây là giai đoạn bận rộn nhất của dự án, khi MangaM chuyển từ bản thử nghiệm sang một nền tảng hoàn chỉnh hơn cho người dùng và quản trị viên. :::

Tính năng mới​

Trang quản trị đầy đủ​

  • Dashboard thống kê: tổng manga, chương, người dùng, daily stats tracking.
  • Quản lý manga: xem, chỉnh sửa, xóa manga; upload ảnh bìa từ admin.
  • Quản lý user: xem danh sách, phân quyền role, quản lý ban/unban.
  • Quản lý comments: kiểm duyệt bình luận, xóa vi phạm.
  • Reports: xem và xử lý báo cáo vi phạm từ người dùng.
  • Audit logs: ghi lại mọi thao tác admin; decode action và thêm bộ lọc.
  • Admin shell: hiển thị avatar admin trong sidebar; account controls trong footer sidebar.

Phân quyền rõ ràng​

  • Thay thế hệ thống RBAC động bằng kiểm tra permission tĩnh — đơn giản, dễ audit.
  • Seed default roles và permissions vào database khi khởi tạo.
  • Cập nhật permission fetch action và services dùng static checks.
  • Thêm migration đồng bộ UserRoleEnum với schema.

Lưu avatar tự động​

Profile:

  • Upload avatar với optimistic UI — hiển thị ngay trước khi server xác nhận.
  • Action updateAvatarAction xử lý upload và cập nhật URL.
  • Hiển thị nhất quán avatar URL sau khi lưu.

Nhóm dịch:

  • uploadGroupAvatarAction: xóa ảnh cũ trước khi upload ảnh mới (atomic replacement).
  • Instant preview avatar nhóm sau khi upload.

Khung avatar​

  • Hệ thống avatar frames triển khai trên toàn nền tảng.
  • Người dùng có thể chọn frame trang trí cho avatar.

Tự động triển khai​

  • Pipeline GitHub Actions tự động:
    1. Verify WASM artifacts
    2. Build Docker image
    3. Push lên Docker Hub
    4. Trigger deploy webhook
  • Dockerfile hỗ trợ nhiều package managers và Next.js standalone output.

Thiết lập production bằng Docker​

  • Docker Compose production đầy đủ: Postgres, Redis, App, Nginx.
  • Nginx reverse proxy: SSL termination, gzip compression, real IP forwarding.
  • Cấu hình health checks và networking giữa các services.
  • Thêm script deploy và setup server environment.
  • PM2 để quản lý Next.js process trên VM.

Lưu trữ ảnh an toàn​

  • Implement avatar storage trên Cloudflare R2.
  • Storage router phân loại intent (group assets, user avatars, chapter images).
  • Thêm auth login action và storage router tổng quát.

Đăng nhập bằng passkey​

  • Thêm hỗ trợ xác thực passkey (WebAuthn) cho tài khoản người dùng.

Thông báo đẩy (PWA)​

  • Nền tảng Web Push Notifications với VAPID keys.
  • Người dùng có thể subscribe/unsubscribe nhận thông báo.

Chỉnh tiêu đề chương​

  • Chỉnh sửa tiêu đề chương trực tiếp trong trang upload (không cần mở dialog riêng).

Chọn ngày giờ​

  • Component chọn ngày giờ mới dùng shadcn/ui, dùng trong form thông báo và lên lịch.

Hiển thị nhắc tên​

  • @mention người dùng trong bình luận hiển thị dạng link có thể click.
  • Tính năng comment counting trong profile stats.

Tối ưu GIF sang WebP​

  • Tối ưu upload GIF: tự động convert sang animated WebP để giảm dung lượng.

Kéo-thả ảnh chương​

  • Cải thiện dropzone upload chương responsive trên mọi màn hình.
  • Khôi phục drag-and-drop cho chapter images.

Kiểm tra môi trường và công cụ​

  • Script kiểm tra biến môi trường (validate-env.ts).
  • RBAC migration và security audit scripts.
  • Admin CLI (pnpm cli) với nhiều lệnh quản trị.
  • Smoke test cho services layer.

Cải tiến​

  • Cải thiện manga card visuals và 3D card transforms.
  • Format và tối ưu auth forms, input components.
  • Normalize line endings (CRLF → LF) toàn codebase.
  • User profile: hiển thị scanlation group roles trong header.

Sửa lỗi​

  • Khắc phục user comment count trong profile stats hiển thị sai.
  • Đảm bảo avatar URL nhóm nhất quán sau khi lưu lần đầu.
  • Fix card hover animation trên Firefox.
  • Fix mention links điều hướng đúng.

Commits nổi bật (ngày 27/01/2026 — 34 commits)​

NhómMô tả
DockerNginx config, SSL, gzip, Docker Compose production
CI/CDGitHub Actions pipeline build + push Docker Hub
AvatarAuto-save avatar profile + nhóm, optimistic UI
StorageR2 storage router, intent detection
PerformanceGIF → animated WebP optimization
UICard 3D transforms, dropzone full-width, auth forms
DocsMention rendering QA report