Quản lý Menu
Module Quản lý Menu cho phép quản trị viên cấu hình cây menu sidebar của ứng dụng. Menu được tổ chức dạng cây phân cấp (tree structure) với khả năng gán quyền truy cập theo vai trò.
Cây menu (Tree Structure)
Menu sidebar hiển thị dưới dạng cây nhiều cấp:
📁 Dashboard
📁 Quản trị hệ thống
├── 👤 Người dùng
├── 🔑 Vai trò
├── 📋 Menu
└── ⚙️ Cài đặt
📁 Nhân sự
├── 📋 Danh sách nhân viên
└── 📊 Chấm công
Truy cập Admin → Menu để xem và quản lý toàn bộ cây menu.
Giao diện quản lý menu hiển thị dạng cây có thể mở rộng/thu gọn. Hỗ trợ kéo-thả để sắp xếp lại thứ tự các mục menu.
Thêm mục menu
- Nhấn nút Thêm menu trên thanh công cụ.
- Điền thông tin trong hộp thoại:
| Trường | Bắt buộc | Mô tả |
|---|---|---|
| Tên menu | ✅ | Tên hiển thị trên sidebar |
| Icon | ❌ | Biểu tượng (chọn từ thư viện icon) |
| Route path | ✅ | Đường dẫn URL (VD: /admin/users) |
| Thứ tự | ✅ | Số thứ tự sắp xếp (số nhỏ hiển thị trước) |
| Menu cha | ❌ | Chọn menu cha nếu là menu con |
| Trạng thái | ✅ | Hiển thị hoặc Ẩn |
- Nhấn Lưu để thêm mục menu.
Để thêm nhanh menu con, nhấn biểu tượng + trên dòng menu cha trong cây menu. Hệ thống sẽ tự động thiết lập quan hệ cha-con.
Sửa / xóa mục menu
Sửa mục menu
- Nhấn vào mục menu cần sửa trong cây menu.
- Cập nhật thông tin trong hộp thoại chỉnh sửa.
- Nhấn Lưu để áp dụng thay đổi.
Xóa mục menu
- Nhấn biểu tượng 🗑️ Xóa trên dòng mục menu.
- Xác nhận trong hộp thoại.
Khi xóa menu cha, toàn bộ menu con bên trong cũng sẽ bị xóa. Hãy di chuyển các menu con sang vị trí khác trước khi xóa menu cha nếu cần giữ lại.
Menu cha-con (Nested Menus)
Hệ thống hỗ trợ menu lồng nhau không giới hạn cấp, tuy nhiên khuyến nghị tối đa 3 cấp để đảm bảo trải nghiệm người dùng.
Cách tạo menu con:
- Khi thêm mới: chọn trường Menu cha trong hộp thoại thêm menu.
- Kéo-thả: kéo mục menu và thả vào mục menu cha mong muốn trong cây menu.
| Cấp | Hiển thị | Ví dụ |
|---|---|---|
| Cấp 1 | Nhóm chính trên sidebar | Quản trị hệ thống |
| Cấp 2 | Mục con mở rộng khi nhấn | Người dùng, Vai trò |
| Cấp 3 | Mục con lồng sâu hơn | Lịch sử đăng nhập |
Menu cấp 1 thường chỉ đóng vai trò nhóm (không có route path). Chỉ menu cấp 2 trở xuống mới nên gán đường dẫn cụ thể.
Gán quyền truy cập menu theo vai trò
Mỗi mục menu có thể được giới hạn hiển thị theo vai trò:
- Mở hộp thoại chỉnh sửa mục menu.
- Tại mục Vai trò được phép, chọn một hoặc nhiều vai trò.
- Nhấn Lưu.
Quy tắc hiển thị:
- Nếu không gán vai trò: menu hiển thị cho tất cả người dùng đã đăng nhập.
- Nếu có gán vai trò: chỉ người dùng thuộc vai trò được chọn mới thấy menu.
- Menu cha tự động ẩn nếu người dùng không có quyền truy cập bất kỳ menu con nào.
Quyền truy cập menu hoạt động độc lập với quyền hạn API. Ẩn menu chỉ ẩn trên giao diện — hãy đảm bảo API cũng được bảo vệ bằng hệ thống phân quyền RBAC.
Sắp xếp thứ tự menu
Có hai cách sắp xếp thứ tự hiển thị:
- Kéo-thả: kéo mục menu lên/xuống trong cây menu.
- Nhập thủ công: chỉnh sửa trường Thứ tự (order) trong hộp thoại. Giá trị nhỏ hơn hiển thị trước.
Thay đổi thứ tự được áp dụng ngay lập tức sau khi lưu.