EmployeeCard
Mẫu chuẩnHồ sơ nhân viên của một nhân viên AI: tên, vai trò, giai đoạn trong vòng đời tuyển dụng, những gì Linh đã học và đã thoả thuận, trong một thẻ. Thẻ điền dần khi từng phần tuyển dụng xong.
Playground
Giai đoạn: Đã đào tạo.
import { EmployeeCard } from "@nexobox/ui";
<EmployeeCard
name="Linh"
role="Trợ lý AI tư vấn bán hàng"
initials="L"
lifecycle={{ label: "Đang thử việc", tone: "information" }}
facts={[{ term: "Vai trò", detail: "Tư vấn & chốt đơn" }]}
/>Tất cả trạng thái
Mọi trạng thái của composite, dựng thật từ @nexobox/ui, theo theme và brand đang chọn ở Playground.
Linh
Trợ lý AI tư vấn bán hàng
- Vai trò
- Tư vấn & chốt đơn
Linh
Trợ lý AI tư vấn bán hàng
- Vai trò
- Tư vấn & chốt đơn
- Đã học
- 124 sản phẩm, 3 bảng giá, 18 câu hỏi thường gặp. 6 sản phẩm chưa có giá.
- Phỏng vấn
- Đạt 9/12 câu, 3 câu chưa thử
Linh trả lời khách trên Page Shop Hoa cả ngày; mọi tin nhắn qua chị Mai duyệt.
Linh
Trợ lý AI tư vấn bán hàng
Bài toán
Chủ shop quen tuyển người, không quen cấu hình bot. Một hồ sơ nhân viên điền dần cho thấy ngay Linh là ai, đã học gì, đã được thoả thuận gì, và đang ở giai đoạn nào, bằng ngôn ngữ của việc tuyển dụng.
Khi nào sử dụng
Nên dùng
Cột xem trước khi tuyển, đầu trang hồ sơ nhân viên, bước bắt đầu thử việc, thẻ nhân viên gọn trong thanh shell.
Khi nào không dùng
Tránh dùng
| Không dùng cho | Dùng thay |
|---|---|
| Thước thẩm quyền | AuthorityMeter |
| Danh sách nhiều nhân viên dạng bảng | DataTable |
| Trạng thái một cuộc trò chuyện | HolderBar |
Dựng từ
| Primitive | Vai trong composite |
|---|---|
| Card | Khung thẻ |
| Avatar | Chữ cái hoặc nhân vật minh hoạ (AvatarIllustration) |
| Badge | Giai đoạn vòng đời |
| DescriptionList | Các dòng hồ sơ |
Anatomy
| # | Phần | Ghi chú |
|---|---|---|
| 1 | Đầu thẻ | Avatar (chữ cái hoặc nhân vật minh hoạ), tên, dòng vai trò, huy hiệu giai đoạn |
| 2 | Huy hiệu giai đoạn | Đổi nhãn thì vào lại bằng opacity và scale 0.9 sang 1, duration-standard; khoảnh khắc ăn mừng duy nhất, tiết chế |
| 3 | Hồ sơ | Danh sách thuật ngữ theo từng mục đã xong |
| 4 | Câu tóm tắt | Một câu dễ đọc, nền brand-soft |
| 5 | Hành động | Hàng nút của host, ví dụ Cho Linh bắt đầu thử việc |
Variants
| Variant | Hiển thị |
|---|---|
file | Đủ đầu thẻ, hồ sơ, tóm tắt, hành động |
compact | Chỉ đầu thẻ, cho danh sách và shell |
States
| State | Hành vi | Trợ năng |
|---|---|---|
| Chưa có facts | Chỉ đầu thẻ và dòng vai trò | Thẻ có aria-label Hồ sơ + tên |
| Điền dần | Host thêm facts khi từng phần xong; không animation cho dòng mới | — |
| Đổi giai đoạn | Huy hiệu vào lại một nhịp | Không có live region; host thông báo bằng toaster |
| Reduced motion | Duration 0ms nên đổi tức thì | — |
Bàn phím & trợ năng
Seam — host sở hữu gì
Composite không biết giai đoạn nào đang đúng: host truyền lifecycle, facts, summary từ dữ liệu thật.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| name / role / initials | — | Bắt buộc. |
| character | undefined | "a" đến "f": một trong sáu nhân vật minh hoạ của AvatarIllustration thay cho chữ cái. Bỏ trống thì hiện initials. |
| lifecycle | undefined | { label, tone? } với tone neutral, information, success, warning. |
| facts | undefined | Mảng { term, detail } của DescriptionList. |
| summary | undefined | Một câu tóm tắt. |
| actions | undefined | Hàng nút. |
| variant | "file" | "file" | "compact". |
Design tokens
--nf-semantic-brand-soft, --nf-semantic-brand-on-soft, --nf-component-card-*, --nf-foundation-motion-duration-standard, --nf-foundation-motion-easing-enter, --nf-foundation-space-*.
Do / Don't
Nên dùng
Điền hồ sơ bằng dữ liệu thật, từng mục một. Giai đoạn bằng từ của việc tuyển dụng. Một nhịp scale-in khi bắt đầu thử việc.
Tránh dùng
Pháo giấy hay hiệu ứng lớn. Giai đoạn do composite tự suy ra. Dùng từ kỹ thuật như agent, model, prompt.