ActivityPane
Mẫu chuẩnBa băng theo đúng thứ tự Pipedrive: thanh hành động cộng nội dung hành động đang chọn, rồi Focus, rồi History. Không biết một hoạt động là gì -- host truyền mọi nội dung. Không host sản phẩm nào import composite này trực tiếp cho dữ liệu nghiệp vụ, nó chỉ cấp hình dạng.
Playground
Đổi "Trạng thái" để xem cả bốn trạng thái của Focus và History; đổi bề rộng khung để xem thanh hành động cuộn ngang trong hộp của nó ở khổ hẹp thay vì làm cả trang cuộn.
Trạng thái: "data".
import { ActivityPane } from "@nexobox/ui";
<ActivityPane
actions={[
{ id: "note", label: "Ghi chú", icon: <Icon icon={Note01Icon} small />, content: <NoteComposer /> },
{ id: "call", label: "Gọi", icon: <Icon icon={SmartPhone01Icon} small />, content: <CallComposer /> },
]}
focusTitle="Focus"
focus={<NextTask />}
historyTitle="History"
historyFilters={<FilterTabs ... />}
history={<ActivityList items={...} aria-label="Lịch sử hoạt động" />}
/>Bài toán
Người, doanh nghiệp và deal đều cần cùng một vùng phải: ghi hoạt động mới, xem việc cần làm tiếp theo, rồi lịch sử. Trộn cả ba khối vào một cột tự do thì mỗi màn CRM lắp lại theo một thứ tự khác nhau. ActivityPane cố định thứ tự đúng ảnh Pipedrive và chỉ nhận nội dung từ host.
Khi nào sử dụng
Nên dùng
Vùng main của một RecordShell khi màn cần ghi hoạt động mới cộng lịch sử, đúng hình dạng người/doanh nghiệp/deal trong Pipedrive.
Khi nào không dùng
Tránh dùng
| Không dùng cho | Dùng thay |
|---|---|
| Một danh sách hoạt động đơn thuần, không có thanh hành động hay Focus | ActivityList một mình |
| Cột rail bên trái của màn bản ghi | RecordShell |
Dựng từ
| Primitive tầng 1 | Vai trong composite |
|---|---|
| Tabs | Chọn một hành động, hiện nội dung của nó; cuộn ngang trong hộp riêng ở khổ hẹp |
| Accordion | Focus và History gập/mở độc lập nhau, không viết lại |
| ActivityPane thêm gì |
|---|
| Ba băng cố định đúng thứ tự: thanh hành động, Focus, History |
| Khe filter cạnh tiêu đề History |
Anatomy
| # | Phần | Ghi chú |
|---|---|---|
| 1 | Thanh hành động | actions: mảng { id, label, icon?, content }. Chọn một hành động hiện nội dung của nó ngay dưới thanh. |
| 2 | Focus | focusTitle + focus. Đứng trên History vì việc sắp tới cấp bách hơn việc đã qua. |
| 3 | History | historyTitle + historyFilters? + history. |
States
| State | Hành vi |
|---|---|
| Có dữ liệu | Focus hiện một dòng việc cần làm, History hiện ActivityList. Xem playground ở "Có dữ liệu". |
| Rỗng | Empty cộng một hành động tiếp theo ở cả Focus lẫn History -- xem playground ở "Rỗng". |
| Đang tải | Skeleton đúng số dòng của nội dung thật, không spinner. |
| Lỗi | Alert nội tuyến trong đúng băng bị lỗi -- lỗi ở History không làm hỏng Focus hay thanh hành động, và ngược lại. |
Bàn phím & trợ năng
Seam — host sở hữu gì
Composite không biết một hoạt động là gì -- không có khái niệm "ghi chú", "cuộc gọi" hay "email" ở tầng này, chỉ có id/label/content. Host sở hữu toàn bộ chữ nghĩa, dữ liệu, và hành động nào mặc định chọn (defaultActionId, mặc định là hành động đầu tiên).
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| actions | — | Bắt buộc. Mảng { id, label, icon?, content }. |
| defaultActionId | actions[0].id | Id hành động chọn sẵn. |
| focusTitle | — | Bắt buộc. |
| focus | — | Bắt buộc. Nội dung băng Focus. |
| historyTitle | — | Bắt buộc. |
| historyFilters | undefined | Control đặt cạnh tiêu đề History. |
| history | — | Bắt buộc. Nội dung băng History. |
Design tokens
--nf-foundation-space-6 (giữa ba băng), --nf-foundation-space-3 (trong thanh hành động), --nf-foundation-space-2 (giữa icon và nhãn hành động, giữa tiêu đề History và filters). Qua Tabs: --nf-component-tabs-*. Qua Accordion: --nf-component-accordion-*.
Do / Don't
Nên dùng
Giữ đúng thứ tự ba băng. Thiết kế cả bốn trạng thái cho Focus và History riêng, vì chúng tải độc lập nhau.
Tránh dùng
Gõ chữ nghiệp vụ ("ghi chú", "cuộc gọi") vào bên trong composite. Để một băng lỗi kéo cả hai băng còn lại mất tác dụng.