Dropzones & Drag Patterns F71

HybReport Design Language System — Mẫu kéo thả và vùng nhận dữ liệu

Trạng thái trống
Kéo chỉ tiêu vào đây để thêm
border: 1px dashed #cbd5e1 · bg: #f8fafc · radius: 4px · padding: 5px
Trạng thái kéo qua (drag-over)
Thả để thêm chỉ tiêu
bg: #eff6ff · border-color: #3b82f6 · highlight xanh dương
Trạng thái đã có dữ liệu
Doanh thu
Chi phí
Lợi nhuận gộp
Số lượng
Trường lỗi
Viền trái: đỏ = chỉ tiêu · xanh lá = công thức · vàng = không hợp lệ
Nhiều vùng nhận — Cột & Hàng
CỘT (Columns)
Tháng
Quý
HÀNG (Rows)
Thả chiều dữ liệu vào đây
GIÁ TRỊ (Values)
Kéo chỉ tiêu đo lường
Danh sách sắp xếp — Đang kéo thả (Reordering)
TRƯỚC KHI SẮP XẾP
Doanh thu thuần
Chỉ tiêu · SUM
Tỷ suất lợi nhuận
Công thức · %
Phòng ban
Chiều · Dimension
Chi phí vận hành
Chỉ tiêu · SUM
ĐANG SẮP XẾP LẠI
Doanh thu thuần
Chỉ tiêu · SUM
Phòng ban
Chiều · Dimension
Tỷ suất lợi nhuận
Công thức · %
Chi phí vận hành
Chỉ tiêu · SUM
Thông số kỹ thuật (Design Tokens)
Thành phần Thuộc tính Giá trị Ghi chú
Dropzone trống border 1px dashed #cbd5e1 Viền nét đứt
background #f8fafc
border-radius 4px
padding 5px
placeholder color #94a3b8
Drag-over background #eff6ff Highlight xanh nhạt
border-color #3b82f6 Blue-500
Chip — Chỉ tiêu border-left 3px solid #ef4444 Đỏ — metric
Chip — Công thức border-left 3px solid #10b981 Xanh lá — formula
Chip — Không hợp lệ border-left 3px solid #f59e0b Vàng — invalid
Drop indicator line 2px solid #2563eb Đường chỉ vị trí thả
dot size 8px Hai đầu đường kẻ
Card section border-radius 14px Bo góc lớn
Body background #f6f8fb
font-family Inter
HybReport DLS · F71 Dropzones & Drag · OPUS-4.6 · 2026-05-17