Nút
Hover: nền tối hơn một bậc (--ds-color-brand-primary-hover). Focus: viền 2px --ds-color-focus-ring. Chiều cao 36px desktop / 44px mobile.
Field
Tìm kiếm
Công tắc
Bộ đếm số lượng (dùng cho F01 — CartItem): nút "−" disable khi giá trị = ngưỡng dưới (theo OQ-028, chưa chốt hành vi); ô nhập giữa cho nhập tay.
Ảnh (thumbnail) và Card — dùng cho ProductCard/CartItem
ảnh
Shop mẫu
Tên sản phẩm
Biến thể (VD Size M, Đỏ)
100.000 ₫
Ảnh lỗi tải hoặc chưa có: ô xám .ds-thumb (theo UICONV §1 "ô xám mặc định").
Bảng (desktop) → Card (mobile)
| Mã ▲ | Tên | Trạng thái | Số tiền | |
|---|---|---|---|---|
| STR-001 | Cửa hàng A | Nháp | 1.234.567 ₫ | Chi tiết |
| STR-002 | Cửa hàng B | Đã duyệt | 890.000 ₫ | Chi tiết |
| STR-003 | Cửa hàng C | Từ chối | — | Chi tiết |
STR-001Nháp
Cửa hàng A
30/08/2026
Mặc địnhThông tinThành côngCảnh báoLỗi
Ánh xạ trạng thái nghiệp vụ (CART/ORDER_SELLER/PAYMENT) → biến thể badge: xem DS_e-commerce_v1.0.md §3.
Tất cảNhápĐã duyệt
1 / 7
Trạng thái chuẩn (UICONV §6) — hai trạng thái rỗng phải trông khác nhau
Đang tải
Lỗi tải (banner trong vùng)
Rỗng — chưa có dữ liệu (minh hoạ + nút chính)
Giỏ hàng trống
Rỗng — bộ lọc không khớp (không minh hoạ + nút phụ)
Không tìm thấy kết quả phù hợp với bộ lọc.
Đã lưu cửa hàng STR-004.
Không lưu được. Thử lại sau.
Modal xác nhận (UICONV §5) — nút chính bên phải, hành động nguy hiểm dùng nút nguy hiểm
Xoá sản phẩm khỏi giỏ hàng?
Sản phẩm sẽ được xoá khỏi giỏ hàng của bạn.