Cấu hình chi tiết — Mobile

Collection mobileRoutes

Tất cả route mobile được lưu trong collection mobileRoutes:

Trường	Kiểu	Mô tả
id	bigInt (PK)	ID tự tăng
type	string	Loại route: tab, page, link
title	string	Tiêu đề hiển thị (hỗ trợ dịch đa ngôn ngữ)
icon	string	Icon từ Ant Design Icons
schemaUid	string	Reference đến UI schema (nội dung trang)
parentId	bigInt (FK)	Route cha (hỗ trợ navigation lồng nhau)
sort	integer	Thứ tự hiển thị
hidden	boolean	Ẩn/hiện route
enableTabs	boolean	Bật/tắt tab con bên trong route

Quan hệ với Roles

Route và Role có quan hệ nhiều-nhiều thông qua bảng trung gian rolesMobileRoutes:

Tab Bar

Giới hạn và quy tắc

Quy tắc	Giá trị
Số tab tối đa	5
Icon set	Ant Design Icons (5.x)
Badge	Hỗ trợ hiển thị số đếm trên icon (ví dụ: thông báo mới)
Tab con	Route có enableTabs = true sẽ hiển thị tab con khi được chọn

Ẩn/hiện tab con

Khi route cha thay đổi enableTabs, plugin tự động cập nhật hidden cho tất cả route con:

Phân quyền chi tiết

ACL Snippets

Snippet	Actions	Mô tả
ui.mobile	mobileRoutes:create, update, move, destroy	Quản trị route mobile
pm.mobile	mobileRoutes:list, roles.mobileRoutes:*	Cấu hình hệ thống mobile

Action listAccessible

Action đặc biệt lọc route theo role hiện tại:

• User root: Trả về tất cả route (không lọc)
• User thường: Lọc route dựa trên role → roles.mobileRoutes association

Auto-assign route cho role

Khi tạo route mới (mobileRoutes.afterCreate):

1. Plugin tìm tất cả role có allowNewMobileMenu = true
2. Tự động thêm route vào mobileRoutes.roles cho các role đó
3. Mặc định, admin và member có allowNewMobileMenu = true

Khi thêm/xoá route khỏi role (rolesMobileRoutes.afterBulkCreate/Destroy):

• Plugin tự động đồng bộ các tab con ẩn (hidden = true) theo route cha

Responsive Breakpoints

Breakpoint	Kích thước	Giao diện
Mobile	< 768px	Giao diện mobile (antd-mobile)
Tablet	768–1024px	Giao diện mobile (antd-mobile)
Desktop	> 1024px	Giao diện desktop (antd)

Plugin sử dụng react-device-detect để phát hiện thiết bị. Trên desktop, bạn có thể truy cập trực tiếp /m để xem bản preview mobile.

Đa ngôn ngữ (Localization)

Plugin đăng ký source mobile-routes với plugin Localization:

Thuộc tính	Giá trị
Source name	mobile-routes
Namespace	lm-mobile-routes
Collection	mobileRoutes
Trường đồng bộ	title

Khi admin tạo/sửa tiêu đề route, tiêu đề tự động được đồng bộ vào bảng dịch. Quản lý bản dịch tại Settings → Localization.

API Reference

Lấy danh sách route cho user hiện tại

const response = await api.resource('mobileRoutes').listAccessible();
// Trả về: tree structure của routes user có quyền truy cập

Tạo route mới (admin)

await api.resource('mobileRoutes').create({
  values: {
    type: 'tab',
    title: 'Báo cáo',
    icon: 'BarChartOutlined',
    schemaUid: 'report-page-schema',
    sort: 3,
  },
});

Cập nhật route

await api.resource('mobileRoutes').update({
  filterByTk: routeId,
  values: {
    title: 'Trang chủ',
    icon: 'HomeOutlined',
  },
});

Sắp xếp route

await api.resource('mobileRoutes').move({
  sourceId: 5,
  targetId: 3,
  sortField: 'sort',
});