FabricSampleQRModal

Với bối cảnh thực tế của ngành dệt may B2B, mình sẽ không cố gắng nhồi nhiều thông tin lên tem, mà ưu tiên nguyên tắc: Tem mẫu chỉ nên chứa những thông tin giúp khách hàng nhận diện mẫu ngay trong 2–3 giây. Các thông tin kỹ thuật chi tiết nên để sau QR Code.

Mình hoàn toàn đồng ý, việc sử dụng chung logic (Single Source of Truth) giữa React và Canvas là cách tốt nhất để tránh sai lệch dữ liệu hiển thị.

1. Tạo hàm dùng chung (fabric-sample-qr.utils.ts):
   • Đã tách hàm buildFabricLabelSpecs(catalog). Hàm này chịu trách nhiệm lấy dữ liệu từ catalog và trả về một object đồng nhất: { code, name, specs, footer }.
2. Cập nhật component QRFabricLabel:
   • Thay vì nhận các prop lắt nhắt như composition, width, gsm, component này giờ chỉ cần nhận chuỗi specs đã được định dạng sẵn và footer.
3. Cập nhật hàm vẽ Canvas (drawTagToCanvas):
   • Xóa bỏ logic tự tính toán specsParts bên trong Canvas.
   • Thay vào đó gọi buildFabricLabelSpecs(catalog) và vẽ dựa trên các trường của object trả về.
4. Kết nối tại Modal (FabricSampleQRModal):
   • Gọi const labelData = buildFabricLabelSpecs(catalog) một lần duy nhất.
   • Dữ liệu này được truyền chung cho QRFabricLabel (hiển thị trên màn hình in) và đồng thời hàm drawTagToCanvas cũng chạy cùng một logic (khi nhấn Tải Ảnh).

Sự thay đổi này đảm bảo trong tương lai, nếu cần bổ sung hoặc thay đổi thông tin in trên tem (ví dụ: thêm màu sắc, ID cuộn), bạn chỉ cần sửa ở duy nhất hàm buildFabricLabelSpecs, cả giao diện xem trước và ảnh tải về đều sẽ tự động đồng bộ.