Giao diện
@digiforce-nc/plugin-text-copy
Plugin nút copy text — thêm nút sao chép nhanh bên cạnh field, cho phép copy giá trị vào clipboard chỉ với một click. Plugin chỉ có phần client, không có server-side logic.
Plugin này làm gì?
Khi cần copy mã đơn hàng, số điện thoại, mã tracking, API key... người dùng phải select text rồi Ctrl+C — thao tác nhỏ nhưng lặp đi lặp lại hàng trăm lần. Plugin bổ sung nút copy icon ngay bên cạnh field, click một lần để sao chép giá trị vào clipboard với feedback "Đã sao chép".
Cơ chế hoạt động
Tính năng chính
| # | Nhiệm vụ | Chi tiết |
|---|---|---|
| 1 | One-click copy | Sao chép giá trị field bằng một click — không cần select text |
| 2 | Visual feedback | Icon checkmark + toast "Đã sao chép" — user biết đã copy thành công |
| 3 | Field decorator | Dùng addonAfter của Input component, tự thêm nút copy khi được bật |
Kiến trúc client-only
Plugin hoạt động hoàn toàn phía client — server-side plugin rỗng (không có logic):
Dependencies
| Package | Vai trò |
|---|---|
@digiforce-nc/client | Client UI framework — schema settings, designable |
@formily/core | Field state management |
@formily/react | React bindings cho Formily |
antd | Typography.Text với prop copyable |
lodash | Utility để set/unset nested schema props |
Lưu ý triển khai
- HTTPS bắt buộc: Clipboard API chỉ hoạt động trên HTTPS hoặc localhost
- Client-only: Server plugin rỗng — không ảnh hưởng hiệu năng server
- Read-pretty mode: Nút copy chỉ hiển thị khi hover trong chế độ đọc