Tasco Framework

Giao diện

Primitive — gọi theo kiểu lệnh ​

Thông báo gọi bằng hàm, không đặt trong template.

ts
import { message, notification } from '@tasco/ui'

message — thông báo ngắn ​

ts
message.success('Đã lưu đơn hàng.')
message.info('Không có thay đổi nào để lưu.')
message.warning('Nhập tên đăng nhập trước khi gửi mã.')
message.error('Không xoá được đơn hàng.')

Dùng cho phản hồi thành công hoặc thông tin ngắn sau một thao tác của người dùng. Hiện giữa màn hình trên cùng, tự biến mất.

notification — thông báo có tiêu đề ​

ts
notification.error({
  message: 'Lỗi hệ thống',
  description: 'Dịch vụ tồn kho không phản hồi. Thử lại sau ít phút.',
})

Dùng cho việc người dùng cần đọc kỹ hoặc không do họ vừa bấm (lỗi hệ thống, việc chạy nền xong).

Lỗi thì để handler chung lo ​

Đừng tự toast lỗi

Lỗi API đã có quy tắc hiển thị thống nhất: 401 điều hướng, 422 im lặng cho form, 5xx dùng notification, còn lại dùng message, kèm chống lặp 3 giây. Gọi $tascoError(caught) thay vì tự gọi message.error.

ts
const { $tascoError } = useNuxtApp()

try {
  await removeOrder(id)
  message.success('Đã xoá đơn hàng.')   // thành công: message là đúng
} catch (caught) {
  $tascoError(caught)                    // lỗi: để handler chung
}

Xem Hiển thị lỗi.

Viết nội dung ​

  • Thành công nói việc đã xong: "Đã tạo đơn hàng." — không phải "Thành công!".
  • Có đối tượng cụ thể thì nêu tên: "Đã xoá DH-0001."
  • Một câu, không dấu chấm than, không viết hoa toàn bộ.
  • Không đưa mã lỗi kỹ thuật, tên hàm hay stack vào thông báo cho người dùng.

Lưu ý ​

  • Cả hai API này khởi tạo ngoài cây component nên mất theme khi chạy trên server. Route bật SSR thì dùng App.useApp() của antdv — xem Chế độ render.
  • Đừng dùng message cho việc cần người dùng đọc kỹ: nó tự tắt sau vài giây.
  • Xác nhận trước khi hành động là useConfirm, không phải message.

Liên quan ​