Giao diện
@digiforce-nc/plugin-theme-editor
Plugin chỉnh sửa theme giao diện — tùy biến màu sắc, typography, spacing qua antd design tokens, quản lý nhiều theme và chuyển đổi nhanh.
Plugin này làm gì?
Plugin cho phép admin tạo và quản lý nhiều theme (bộ giao diện). Mỗi theme là một tập hợp antd design tokens — quyết định màu sắc, font, border, spacing của toàn bộ ứng dụng. User chuyển đổi theme theo sở thích.
Ba nhiệm vụ chính
| # | Nhiệm vụ | Chi tiết |
|---|---|---|
| 1 | Quản lý themes | CRUD themes với JSON config (antd design tokens), built-in themes |
| 2 | Theme Editor | Giao diện trực quan: color picker, token previewer |
| 3 | User preference | Mỗi user chọn theme riêng, lưu vào systemSettings.themeId |
Kiến trúc
Database — collection themeConfig
| Field | Mô tả |
|---|---|
config | JSON chứa antd tokens (colorPrimary, fontSize, borderRadius...) |
isBuiltIn | Theme hệ thống cung cấp sẵn (không xóa được) |
default | Theme mặc định cho user mới |
Built-in themes
Khi cài đặt plugin lần đầu, 4 theme mặc định được tạo:
| Theme | Mô tả |
|---|---|
| Default Light | Theme sáng mặc định |
| Dark | Theme tối — giảm mỏi mắt |
| Compact | Theme gọn — spacing nhỏ hơn |
| Compact Dark | Kết hợp compact + dark |
ACL — Phân quyền
| ACL rule | Quyền | Mô tả |
|---|---|---|
themeConfig:list | public | Ai cũng xem được danh sách themes |
users:updateTheme | loggedIn | User đã đăng nhập tự đổi theme |
themeConfig:* | Admin (snippet) | Chỉ admin tạo/sửa/xóa theme |
Dependencies
| Package | Vai trò |
|---|---|
react-colorful | Color picker component |
vanilla-jsoneditor | JSON editor cho cấu hình nâng cao |
@digiforce-nc/server | Server framework |
@digiforce-nc/database | Database ORM |
@digiforce-nc/client | Client framework — antd integration |