Bỏ qua tới nội dung
Pattern / 001 / NEXOFRAME

Review & confirm

Mẫu chuẩn

Giúp người có thẩm quyền hiểu thay đổi, cân nhắc tác động và đưa ra quyết định trước một hành động quan trọng.

Xem xét & xác nhậnCross-product patternVí dụ: NexoCrew

Ngữ cảnh & mục tiêu

Dùng khi hành động cần sự đồng ý có chủ đích: duyệt đề xuất của Human AI, xác nhận thay đổi dữ liệu hoặc chấp thuận một yêu cầu. Người dùng phải biết ai đề xuất, điều gì thay đổi, đối tượng nào chịu tác động và kết quả sẽ được xác nhận thế nào.

Phù hợp

Có thay đổi cụ thể để xem xét, có quyền quyết định rõ ràng và có bằng chứng đủ để đánh giá.

Không phù hợp

Thao tác đơn giản, dễ hoàn tác như đổi bộ lọc. Không dùng xác nhận để che một quy trình không rõ quyền.

INTERACTIVE SCENARIO

Thử một quyết định

Human Sale đề xuất giảm giá cho một báo giá. Toàn bộ tình huống bên dưới dùng dữ liệu mẫu và không gửi yêu cầu ra hệ thống thật.

ĐỀ XUẤT TỪ HUMAN SALE

Duyệt mức giảm giá 5%

Chờ xem xét
BÁO GIÁQ-2026-0142
KHÁCH HÀNG MẪUCông ty An Nhiên
NGƯỜI QUYẾT ĐỊNHBạn · Sales Manager
Giá trị báo giá20.000.000 ₫19.000.000 ₫
Chiết khấu0%5% · 1.000.000 ₫
Căn cứ đề xuất

Khách hàng cam kết hợp đồng 12 tháng. Mức đề xuất nằm trong ngưỡng 5% cần Sales Manager duyệt trong tình huống mẫu này.

Phạm vi: phê duyệt mức giá cho báo giá này. Việc gửi báo giá cho khách hàng là một bước riêng.

Để thử nhánh khác, chọn “Đặt lại mẫu” rồi đổi kết quả mô phỏng. Nhánh lỗi thử lại vẫn giữ kết quả lỗi đã chọn; đổi kịch bản bằng cách đặt lại.

Anatomy của quyết định

01

Ngữ cảnh

Đối tượng, người đề xuất, mã tham chiếu.

02

Thay đổi

Trước / sau, phạm vi và tác động.

03

Bằng chứng

Lý do, nguồn và các điều kiện liên quan.

04

Quyết định

Hành động đúng quyền và nhãn nêu rõ tác động.

05

Kết quả

Trạng thái được xác nhận, mã truy vết, bước tiếp theo.

State model & phục hồi

StateNgười dùng thấyChuyển trạng thái
ReviewĐầy đủ thay đổi, căn cứ, quyền và điều kiện.Xác nhận đã xem → gửi quyết định; hoặc từ chối kèm lý do.
PendingHành động đang xử lý; khóa gửi lặp.Chờ kết quả từ dịch vụ; không dùng timeout như success.
ConfirmedĐối tượng, thay đổi đã ghi nhận và bước tiếp theo.Chỉ thành công khi dịch vụ xác nhận kết quả.
Error — known not appliedLỗi cụ thể, dữ liệu giữ lại.Cho thử lại với idempotency key và kiểm tra quyền mới.
UnknownChưa xác định kết quả; hiển thị mã truy vết.Kiểm tra trạng thái; đối soát trước khi cân nhắc gửi lại.
RejectedLý do từ chối và tình trạng không thay đổi.Ghi nhận quyết định; trở về đối tượng liên quan.
“Người dùng đã đồng ý” và “hệ thống đã thực hiện” là hai sự kiện khác nhau. Một thao tác phê duyệt không tự mở rộng quyền của Human AI.

Hợp đồng triển khai

Pattern nhận đối tượng và các hành động đã được dịch vụ kiểm tra quyền. Backend phải kiểm tra lại quyền, phiên bản dữ liệu và idempotency khi ghi nhận quyết định.

TYPESCRIPT / INTEGRATION CONTRACT

type ReviewRequest = {
  objectId: string;          // đối tượng bất biến trong phiên review
  revision: string;          // ngăn duyệt dữ liệu đã cũ
  changes: { before: unknown; after: unknown };
  evidence: Evidence[];
  allowedActions: ('approve' | 'reject')[];
};

type Decision = {
  objectId: string;
  revision: string;
  action: 'approve' | 'reject';
  reason?: string;           // bắt buộc khi reject
  idempotencyKey: string;    // giữ nguyên khi retry cùng quyết định
};

type DecisionResult =
  | { status: 'confirmed'; decisionId: string }
  | { status: 'not_applied'; message: string; retryable: boolean }
  | { status: 'unknown'; requestId: string };
Trách nhiệm UITrách nhiệm sản phẩm / dịch vụ
Trình bày phạm vi, diff, bằng chứng và trạng thái.Kiểm tra quyền, hạn mức, dữ liệu mới nhất và chính sách.
Chặn thao tác lặp khi chờ; giữ nội dung khi lỗi.Idempotency, audit log và xác nhận kết quả thực tế.
Tách trạng thái unknown, cung cấp cách kiểm tra.Endpoint đối soát theo requestId; không suy luận từ timeout.

Responsive, accessibility & nội dung

Desktop: đối chiếu trước / sau cùng một hàng. Mobile: xếp dọc theo từng thuộc tính để giữ ngữ cảnh.
Khi nội dung dài, cho cuộn phần review; không để footer che khuất bằng chứng.
Không chuyển focus đột ngột trong lúc đang xem. Sau kết quả, chuyển focus tới vùng thông báo rõ ràng.
Dialog từ chối có tiêu đề, nhãn, lỗi liên kết với trường nhập; Escape đóng và trả focus về trigger.
Không chỉ dùng đỏ/xanh để thể hiện thay đổi. Dùng nhãn, số và dấu chỉ hướng.
Nhãn hành động mô tả hệ quả: “Phê duyệt giảm 5%”. Không dùng “OK” để thay quyết định.
Với tiền tệ, hiển thị đơn vị, định dạng địa phương và cả giá trị trước / sau.

Pattern tái sử dụng Button, surface, border, spacing, typography và status token. Màu status nhất quán giữa các brand; không đổi màu thành công theo màu thương hiệu.

Quy chuẩn cho pattern tiếp theo

Tải template tài liệu pattern · Markdown
Phần bắt buộcNội dung cần cung cấp
Context & goalAi đang làm gì, vì sao; khi dùng và khi không dùng.
Interactive scenarioDữ liệu mẫu, trạng thái thường gặp và nhánh phục hồi.
Anatomy & state modelCấu trúc, chuyển trạng thái, quyền và tác động.
Integration contractInput/output, trách nhiệm UI và dịch vụ, lưu vết.
Accessibility & contentBàn phím, focus, đọc trạng thái, nội dung và responsive.
Release checklistKiểm tra happy path, lỗi, unknown, thiếu quyền, dữ liệu thay đổi và tác vụ lặp.
1.0 · Prototype

Tình huống NexoCrew là ví dụ áp dụng quy tắc của kit. Hạn mức 5%, khách hàng và báo giá đều là dữ liệu minh họa, không phải chính sách sản phẩm đã phê duyệt.