Giao diện
@digiforce-nc/plugin-block-workbench
Plugin tạo bảng điều khiển hành động (Action Panel) - hiển thị lưới các nút action trực quan, hỗ trợ popup, link, quét QR code và custom request - tối ưu cho giao diện mobile.
Plugin này làm gì?
Trong ứng dụng mobile-first hoặc dashboard, người dùng cần truy cập nhanh các hành động thường dùng: mở form, chuyển trang, quét mã QR, gọi API. Workbench block tạo một bảng action panel với bốn loại action, hiển thị dạng grid hoặc list.
Ba nhiệm vụ chính
| # | Nhiệm vụ | Chi tiết |
|---|---|---|
| 1 | Action panel | Hiển thị lưới các nút action với icon và label |
| 2 | Bốn loại action | Popup, link, QR scan, custom request |
| 3 | Mobile-optimized | Layout grid/list tối ưu cho thiết bị di động |
Kiến trúc
Tổng quan
Plugin hoạt động hoàn toàn ở client - không có server component hay database riêng. Action panel được cấu hình qua UI schema.
Bốn loại action
| Loại | Icon | Mô tả | Khi click |
|---|---|---|---|
| Popup | Dialog icon | Mở popup chứa form hoặc nội dung | Hiển thị modal/drawer |
| Link | Arrow icon | Chuyển đến URL hoặc route nội bộ | Navigate to URL |
| QR Scan | Camera icon | Mở camera quét mã QR/Barcode | Mở scanner overlay |
| Custom Request | API icon | Gọi API endpoint tùy chỉnh | POST/GET request |
Layout modes
| Mode | Mô tả | Phù hợp cho |
|---|---|---|
| Grid | Lưới các icon action, nhiều cột | Mobile home screen |
| List | Danh sách action theo hàng ngang | Desktop sidebar |
Luồng QR Scanner
Luồng Custom Request
Tính năng
| Tính năng | Mô tả |
|---|---|
| Popup action | Mở modal/drawer chứa form hoặc block tùy chỉnh |
| Link action | Chuyển hướng đến URL nội bộ hoặc bên ngoài |
| QR Scanner | Quét mã QR/Barcode bằng camera thiết bị |
| Custom request | Gọi API endpoint với method và body tùy chỉnh |
| Grid layout | Lưới icon dạng app launcher, cấu hình số cột |
| List layout | Danh sách hàng ngang, phù hợp desktop |
| Icon & color | Tùy chỉnh icon và màu cho từng action |
| Mobile-first | Tối ưu UX cho thiết bị di động |
| Badge | Hiển thị badge count trên action (thông báo) |
Thành phần client
| Thành phần | Mô tả |
|---|---|
ActionPanelBlockWidget | Widget chính đăng ký Workbench block |
WorkbenchBlock | Component container render action grid/list |
WorkbenchAction | Component cho từng action (popup/link/qr/custom) |
QRCodeScanner | Component quét QR sử dụng html5-qrcode |
WorkbenchBlockInitializer | Đăng ký vào menu "Add block" |
WorkbenchDesigner | Designer: thêm/xóa/sắp xếp actions, layout mode |
WorkbenchActionSettings | Settings panel cho từng action type |
Cấu hình block
| Setting | Mô tả | Mặc định |
|---|---|---|
| Layout | Grid hoặc List | Grid |
| Columns | Số cột (chỉ grid mode) | 4 |
| Icon size | Kích thước icon action | Medium |
| Show label | Hiển thị label dưới icon | true |
Dependencies
| Package | Vai trò |
|---|---|
@digiforce-nc/client | Client framework (peer) |
@digiforce-nc/server | Server framework - chỉ dùng khi build (peer) |
html5-qrcode | Thư viện quét QR/Barcode qua camera |
antd-mobile | UI components tối ưu cho mobile |