Cloud theme · Báo cáo rà soát giao diện

1Phạm vi và nguồn chuẩn

Cloud là hệ thống thiết kế do FLYER công bố tại roadmap.flyer.vn/cloudtheme, đặt làm giao diện mặc định của Trường Số CRM. Đặc tả quy định năm sắc độ tím, bộ màu trung tính, bốn màu trạng thái, mật độ hiển thị và hình dạng của các thành phần cơ bản. Nguyên tắc bắt buộc được nêu ngay trong đặc tả: chủ đề chỉ thay đổi cách trình bày, giữ nguyên biểu tượng, thứ tự điều hướng, tên gọi chức năng và luồng thao tác.

Đặc tả mô tả đầy đủ thanh bên, thẻ, bảng, nút, nhãn trạng thái, tab và hộp thoại. Một số thành phần không được nêu: menu thả xuống, thông báo nổi, chú giải, ngăn kéo, bảng lệnh tìm nhanh, công tắc, thanh tiến trình, khung ghi chú. Với những thành phần này, tài liệu lấy ứng dụng enterprise.flyer.vn/app làm tham chiếu, vì đây là sản phẩm đang vận hành trên cùng hệ thống thiết kế.

2Sai lệch đã phát hiện

Đợt đầu tiên áp dụng Cloud ở tầng token và tầng các thành phần dùng chung. Cách làm này phủ được phần khung của sản phẩm, nhưng phần lớn giao diện nghiệp vụ được viết trực tiếp bằng lớp tiện ích của Tailwind nên không nhận được token của chủ đề. Thống kê trên mã nguồn cho thấy 2.010 lượt dùng lớp màu cố định, trong đó 1.423 lượt thuộc dải slate — một dải xám ngả xanh không có trong hệ thống Cloud.

3Cách xử lý

Sửa trực tiếp 2.010 lượt dùng trên khoảng sáu mươi tệp là phương án tốn công và dễ bỏ sót. Tailwind phiên bản 4 phân giải mọi lớp màu qua biến --color-<dải>-<mức>, nên phương án được chọn là định nghĩa lại chính các biến đó trong phạm vi chủ đề Cloud. Mã giao diện giữ nguyên; màu sắc được chuyển hướng ở tầng token.

Các lớp có kèm độ trong suốt được Tailwind nội suy thẳng thành giá trị màu thay vì đọc qua biến, nên những lớp loại này mà mã nguồn có dùng được khai báo lại riêng bằng color-mix. Toàn bộ quy tắc nằm trong phạm vi html.cloud, vì vậy các theme khác không chịu ảnh hưởng.

4Đối chiếu token

Cột “đo được” lấy bằng getComputedStyle trên bản dựng. Cột “kết quả” phân biệt phần đã có trên môi trường dev với phần còn nằm trong PR #66.

5Sáu màn hình trước và sau

Ảnh chụp ở chiều rộng 1440 px, cùng một bộ dữ liệu mẫu, cùng một công cụ. Ảnh “trước” dựng từ đúng commit đang chạy trên môi trường dev; ảnh “sau” dựng từ nhánh feat/cloud-theme-ui.

Dashboard

/vi/dashboard/cloudtheme

TrướcSau

• Bảng xếp hạng Top Sales trước đây liệt kê từ người thấp nhất, do trục phân loại của thư viện biểu đồ xếp từ dưới lên; nay đảo lại để hạng nhất đứng đầu, dùng dải tím đậm dần thay cho ba màu huy chương.
• Hai ô “Giá trị Pipeline” và “Deal đang mở” trước đây là hộp xám lồng trong thẻ, nhãn viết hoa 10 px; nay dùng đúng khuôn ô chỉ số của năm ô phía trên.
• Nhãn “Dữ liệu mẫu” lặp lại chín lần trên từng thẻ, khiến nhãn chỉ số bị gãy hai dòng; nay ghi một lần dưới tiêu đề trang.
• Đường biểu diễn thắng và thua chuyển sang màu trạng thái của hệ thống; trục biểu đồ phễu làm tròn lên mốc chẵn thay vì dừng ở giá trị lẻ chạm nhãn kế bên.
• Trỏ chuột lên dòng danh sách chuyển nền xám; nền tím được giữ lại cho trạng thái đang chọn.
• Chữ trong biểu đồ trước đây hiển thị bằng phông mặc định của trình duyệt: biểu đồ vẽ trên canvas, nơi ctx.font không có cơ chế kế thừa nên giá trị inherit bị bỏ qua. Nay bộ phông của chủ đề được truyền thẳng vào biểu đồ. Lỗi này dễ nhận ra nhất khi trỏ chuột, vì chú giải là phần tử HTML nên vẫn đúng phông, đứng ngay cạnh nhãn trục sai phông.
• Thanh bên đổi tên thành School OS · Trường Số, kèm logo chính thức.

Danh sách khách hàng

/vi/crm/customers

TrướcSau

• Dải xám ngả xanh chuyển về bộ trung tính của hệ thống trên toàn bộ chữ phụ, đường viền và nền.
• Nhãn trạng thái chuyển từ hình viên thuốc sang hình chữ nhật bo 6 px, dùng đúng bốn màu quy ước.

Chi tiết khách hàng

/vi/crm/customers/<id>

TrướcSau

• Trường nhập liệu chuyển sang nền trắng, viền #d4d4d8, cao 36 px, viền tím kèm quầng sáng khi lấy tiêu điểm.
• Ô hiển thị giá trị cơ hội chuyển từ nền xanh lá sang nền tím nhạt của thương hiệu; xanh lá chỉ dành cho trạng thái tốt.
• Các nhãn loại hoạt động bo 6 px và dùng đúng bốn màu quy ước; dải giai đoạn phẳng một màu, bỏ chuyển sắc và đổ bóng.

Hộp thoại xuất dữ liệu

Danh sách khách hàng · Xuất dữ liệu

TrướcSau

• Bo 14 px, chân hộp thoại nền #fafafa ngăn bằng một đường kẻ, nút Huỷ dạng phẳng đặt sát mép trái, nhóm nút tác vụ đặt bên phải.
• Lớp phủ dùng đúng rgba(24,24,27,.45) và không làm mờ nền phía sau.

Bảng lệnh tìm nhanh

Phím tắt Command K

TrướcSau

• Hộp rộng 620 px, ô nhập cao 50 px không viền ngăn cách bằng một đường kẻ, danh sách kết quả lót 6 px với từng dòng bo 8 px.

Thông báo sau thao tác

/vi/account

TrướcSau

• Thông báo dùng một kiểu duy nhất cho mọi loại: nền #1b1b1f, chữ trắng, bo 10 px, hiện ở góc dưới bên phải.
• Dải tiêu đề trang tài khoản bỏ chuyển sắc và đổ bóng, chuyển thành một màu phẳng.

6Quy tắc theo từng thành phần

Bảng dưới đây là phần bổ sung cho đặc tả: với mỗi thành phần mà đặc tả chưa nêu, tài liệu ghi lại giá trị đã áp dụng để những lần xây dựng sau có căn cứ thống nhất.

7Kiểm chứng và các mục còn để ngỏ

Kết quả kiểm chứng: biến xám phân giải đúng #71717a; nhãn trạng thái đo được 6 px; không còn phần tử nào mang đổ bóng từ lớp tiện ích; lớp phủ không còn hiệu ứng làm mờ; menu bo 10 px; thông báo nền #1b1b1f; toàn bộ trường nhập trong ngăn kéo cao 36 px nền trắng viền #d4d4d8. Các bước kiểm tra kiểu, kiểm tra quy tắc mã nguồn và dựng bản phát hành đều không phát sinh lỗi mới.