Một chủ đề giao diện mới cho teacher.flyer.us, mượn ngôn ngữ thiết kế của bảng điều khiển Cloudflare — mật độ thông tin dày, đường viền mảnh, chữ nhỏ và rõ — nhưng thay toàn bộ màu cam Cloudflare bằng màu tím thương hiệu FLYER. Biểu tượng, cấu trúc điều hướng và vị trí từng chức năng giữ nguyên như bản đang chạy.
Đề xuất thiết kế — chờ duyệt trước khi đưa lên môi trường thậtGiao diện hiện tại của teacher.flyer.us được thiết kế theo hướng thân thiện với người dùng phổ thông: khoảng trắng rộng, thẻ lớn, bo góc mềm. Cách trình bày này phù hợp với người mới, nhưng lại bất lợi với nhóm sử dụng nhiều nhất — quản lý trung tâm và giáo viên phụ trách hàng trăm học sinh. Với họ, mỗi màn hình chỉ hiển thị được ít dòng, và một thao tác quen thuộc phải cuộn nhiều lần mới hoàn tất.
Bảng điều khiển của Cloudflare giải quyết đúng bài toán đó: cùng một diện tích màn hình nhưng hiển thị được nhiều dữ liệu hơn, phân cấp thông tin rõ ràng, và người dùng thành thạo thao tác rất nhanh. Cloud Theme mượn nguyên tắc trình bày này, giữ nguyên cấu trúc chức năng của FLYER, và thay hệ màu cam đặc trưng của Cloudflare bằng màu tím thương hiệu.
| Thành phần | Quy ước |
|---|---|
| Thanh điều hướng trái | Nền trắng, rộng 292px, viền phải mảnh một pixel. Các mục được gom nhóm, tên nhóm viết hoa cỡ 11px. Mục đang mở có nền tím nhạt và chữ tím đậm thay vì thanh màu đặc. |
| Thẻ nội dung | Nền trắng, viền #e4e4e7, bo góc 10px, không đổ bóng. Tiêu đề thẻ nhỏ và đậm; số liệu chính đặt ngay dưới. |
| Bảng dữ liệu | Hàng tiêu đề nền xám nhạt, chữ viết hoa cỡ 12px. Đường kẻ ngang mảnh, không kẻ dọc. Mỗi hàng cao 44px để hiển thị được nhiều học sinh hơn trên một màn. |
| Nhãn trạng thái | Nhãn bo góc nhỏ với bốn màu quy ước: xanh lá cho tốt, vàng cho cần chú ý, đỏ cho cảnh báo, tím cho thông tin thương hiệu. |
| Nút | Nút chính nền tím chữ trắng; nút phụ nền trắng viền xám. Chiều cao thống nhất, bo góc 8px. |
| Mật độ | Cỡ chữ nền 13.5px, khoảng đệm trong thẻ 16–20px. Mục tiêu là hiển thị được nhiều hơn khoảng một phần ba số dòng so với bản hiện tại trên cùng một màn hình. |
Chủ đề dùng đúng năm sắc độ tím đã khai báo trong mã nguồn, cộng thêm bộ màu trung tính của giao diện quản trị. Màu cam của Cloudflare và màu xanh nút mặc định được thay hoàn toàn.
Kiểu chữ: Inter, các mức đậm 400 / 450 / 500 / 600 / 650 / 700. Cỡ chữ nền 13.5px, tiêu đề trang 26px với độ đậm 650 và giãn chữ âm nhẹ — đúng cách Cloudflare xử lý tiêu đề.
Bốn màn dưới đây là bản thiết kế nhúng trực tiếp, không phải ảnh chụp — có thể phóng to trang để xem chi tiết. Trên điện thoại, các màn sẽ bị thu nhỏ; nên xem trên máy tính hoặc mở từng màn ở chế độ toàn màn hình.
Bốn ô số liệu, biểu đồ hoạt động theo ngày và nhật ký thao tác gần đây, xếp theo lưới ba cột.
Bảng phẳng có ô chọn nhiều, nhãn lớp và nhãn trạng thái học tập. Cùng chiều cao màn hình, bảng này hiển thị được nhiều học sinh hơn bản hiện tại.
Đường dẫn phân cấp, các thẻ chuyển mục, nội dung chính bên trái và cột thông tin phụ bên phải — bố cục quen thuộc của trang chi tiết trong bảng điều khiển quản trị.
Hộp thoại chọn hình thức giao bài theo kiểu thẻ lựa chọn, mô phỏng cách Cloudflare trình bày các bước cấu hình.
Cloud Theme được thêm vào đúng nơi giáo viên đã quen đổi màu giao diện, không tạo thêm màn cài đặt mới.
/vi/settings?page=theme)./vi/settings?page=theme/cloud-theme): bản xem trước thu nhỏ, bốn điểm khác biệt chính, năm sắc độ màu và nút áp dụng.Chủ đề được cài thêm vào hệ thống chủ đề màu sẵn có, không dựng một nhánh giao diện song song. Nhờ vậy phần lớn hiệu ứng có được mà không phải sửa từng màn.
| Tệp | Thay đổi |
|---|---|
src/types/theme.ts | Thêm giá trị CLOUD vào danh sách chủ đề màu, thành giá trị thứ mười. |
src/providers/settings.tsx | Khai báo năm sắc độ tím cho chủ đề mới, cùng bộ biến giao diện riêng chỉ áp dụng khi chủ đề đang bật. |
src/providers/ThemeProvider.tsx | Gắn hoặc gỡ lớp theme-cloud ở thẻ gốc của trang. |
src/styles/cloud-theme.css | Toàn bộ phần khác biệt về hình thức, đặt trong phạm vi lớp theme-cloud nên không rò rỉ sang chủ đề khác. |
src/views/settings/SettingThemeCloudDetail.tsx | Trang giới thiệu riêng của chủ đề, mở từ đường dẫn theme/cloud-theme. |
src/views/settings/SettingTheme.tsx | Khung giới thiệu và nút dẫn sang trang chi tiết. |
src/locales/vi · en | Bổ sung 19 chuỗi hiển thị cho mỗi ngôn ngữ. |
theme-cloud được gắn đúng, biến màu chính trả về #6A309B, phông chữ Inter tải thành công, mục điều hướng đang mở hiển thị nền tím nhạt, và bảng điều khiển của trình duyệt không báo lỗi nào.| Hạng mục | Trạng thái | Ghi chú |
|---|---|---|
| Bản thiết kế bốn màn | Xong | Xem mục 4 hoặc bản thiết kế gốc trên khung vẽ. |
| Mã nguồn trên nhánh riêng | Xong | Nhánh feat/cloud-theme, đã đẩy lên kho mã riêng. |
| Chạy thử trên máy phát triển | Xong | Bật, tắt và chuyển qua lại giữa các chủ đề đều hoạt động. |
| Rà soát toàn bộ 123 màn | Chưa | Mới kiểm tra các màn chính. Cần rà phần in ấn, biểu đồ và các hộp thoại ít dùng. |
| Đưa lên môi trường thật | Chưa | Chờ duyệt thiết kế, sau đó bật cho một nhóm nhỏ trước. |
Bản thiết kế gốc trên khung vẽ: Cloud Theme — canvas bốn màn. Mã nguồn nằm ở nhánh feat/cloud-theme của kho partner-web.