Đặc tả màn — Phân hệ Bảng tin
Pair với mockup: ui-mockups/longdo-erp/web/nhat-ky-cong-viec.html · them-nhat-ky.html · trang-ca-nhan-nguoi-khac.html
Mục đích: feed nhật ký công việc toàn công ty — xem, đăng/sửa bài, tương tác (thích · bình luận · chia sẻ) và xem trang cá nhân người khác.
Quyền xem: mọi nhân viên; mỗi bài chỉ hiện với người nằm trong phạm vi hiển thị do người đăng đặt.
Loại màn: danh sách/feed + form nhập liệu.
Nháp sinh từ mockup — chờ BA rà
Trang này mô tả giao diện 3 màn Bảng tin để bàn giao Dev. Ràng buộc nghiệp vụ
(mã FR-BT / BR-BT, phạm vi hiển thị, nguồn số liệu báo cáo…) nằm ở tài liệu
nghiệp vụ tai-lieu-nghiep-vu/bang-tin.md. Nguồn dữ liệu (API/entity) ở đây là dự
kiến — BA & Dev chốt khi hiện thực.
Vào phân hệ
- Rail điều hướng (thanh icon trái, lặp ở mọi trang): mục Bảng tin (icon feed) ở
đầu rail, ngay dưới avatar → mở
nhat-ky-cong-viec.html. Sáng (active) khi đang ở một
trong các màn Bảng tin.
- Màn Đăng bài (
them-nhat-ky.html) mở theo ngữ cảnh nguồn — xem Luồng chuyển màn.
Màn 1 — Bảng tin toàn công ty (nhat-ky-cong-viec.html)
Feed dọc, một cột, gộp bài nhật ký công việc của toàn công ty theo thời gian mới nhất.
| Thành phần |
Kiểu |
Bắt buộc |
Nguồn / Tùy chọn |
Ràng buộc / Hành vi |
| Ô tìm kiếm |
text |
– |
– |
tìm theo nội dung bài & tên người; khi đang tìm thì ẩn ô soạn bài |
| Lọc theo dự án |
multi-select |
– |
danh sách dự án |
mặc định "Tất cả dự án"; chọn ≥ 1 → badge đếm số dự án; lọc feed theo dự án đã chọn |
| Chuông thông báo |
hành động |
– |
– |
chấm đỏ khi có thông báo chưa đọc |
Ô soạn bài & danh sách bài
| Thành phần |
Kiểu |
Bắt buộc |
Nguồn |
Ràng buộc / Hành vi |
| Ô soạn bài nhanh |
hành động |
– |
– |
bấm → mở popup soạn bài (compose-modal.js); ẩn khi đang tìm kiếm |
| Bài đăng (article) |
list |
✔ |
GET /feed (dự kiến) |
mỗi bài: avatar + tên người đăng, thời gian, phạm vi hiển thị (🌐 Công khai…), nội dung, thẻ dự án (nếu có), ảnh/video |
| Số liệu tương tác |
int |
– |
theo bài |
số ❤️ thích · số bình luận · số chia sẻ |
| Menu ⋯ (bài của mình) |
hành động |
– |
– |
chỉ hiện ở bài của người đang đăng nhập: Sửa bài · Xóa bài |
| Menu ⋯ (bài người khác) |
hành động |
– |
– |
ở bài của người khác: Ẩn bài viết (kèm Hoàn tác) — theo tai-lieu-nghiep-vu/bang-tin.md §1.1.3 · FR-BT-07 / BR-BT-07 |
| Trạng thái cuối feed |
– |
– |
– |
"Bạn đã xem hết bài mới" khi hết dữ liệu |
Hành động trên mỗi bài
| Nút |
Điều kiện |
Kết quả |
| Thích |
– |
đổi 🤍↔❤️, cập nhật số đếm |
| Bình luận |
– |
mở khu bình luận dưới bài; nhập + Gửi |
| Chia sẻ |
– |
mở popup Chia sẻ — chọn người/nhóm (có ô tìm), gửi vào đoạn chat |
| Bấm tên/avatar người đăng |
– |
mở trang cá nhân người đó (Màn 3) hoặc trang của mình |
Trạng thái màn
| Trạng thái |
Hiển thị |
| Đang tải |
khung xương (skeleton) các thẻ bài đầu feed |
| Rỗng (không có bài trong bộ lọc) |
khối "empty state" — không có bài phù hợp |
| Lỗi tải |
thông báo lỗi + nút "Thử lại" |
| Đang tìm kiếm |
ẩn ô soạn bài, chỉ hiện kết quả khớp |
Màn 2 — Đăng / sửa bài (them-nhat-ky.html)
Form nhập liệu chiếm cả trang để soạn một bài nhật ký công việc.
| Thành phần |
Kiểu |
Bắt buộc |
Nguồn / Tùy chọn |
Ràng buộc / Hành vi |
| Người đăng |
hiển thị |
✔ |
người đăng nhập |
avatar + tên, không sửa |
| Phạm vi hiển thị |
enum |
✔ |
Công khai · Chỉ hiển thị với… · Không hiển thị với… · Chỉ mình tôi |
mặc định Công khai; 2 lựa chọn "…với…" mở bộ chọn người/nhóm |
| Lập báo cáo theo dự án |
select (có tìm) |
– |
danh sách dự án |
để trống = bài thường (hiện ô "Bạn đang nghĩ gì?"); chọn dự án = hiện bảng báo cáo công việc |
| Bảng báo cáo công việc |
bảng động |
– |
người dùng nhập |
cột: Vị trí/Lý trình · Nội dung công việc / Tiêu hao · Đơn vị · Khối lượng (Kế hoạch/Định mức · Thực tế) · Tỷ lệ hoàn thành (tự tính). Dòng tiêu hao con (vật tư/nhân công/ca máy): bỏ trống Vị trí, gõ tên vào cột Nội dung công việc / Tiêu hao (thụt dưới hạng mục), chỉ có Đơn vị · Thực tế — không có Kế hoạch, không đánh số, không tính tỷ lệ. Dòng trống tự bỏ khi đăng |
| Ô "Bạn đang nghĩ gì?" |
textarea |
– |
– |
chỉ hiện khi không chọn dự án |
| Ảnh / video đính kèm |
file[] |
– |
– |
lưới media + ô ＋; nhận ảnh & video, nhiều tệp |
Hành động
| Nút |
Điều kiện |
Kết quả |
| Đăng bài |
có nội dung báo cáo hoặc status |
lưu bài → quay về nguồn mở màn (xem Luồng chuyển màn) |
| Hủy |
– |
bỏ, quay về nguồn mở màn |
| Mũi tên quay lại (header) |
– |
quay về nguồn mở màn |
Trạng thái màn
| Trạng thái |
Hiển thị |
| Đang lưu |
nút Đăng bài chuyển trạng thái chờ, khóa thao tác |
| Thiếu dự án (bài có báo cáo) |
chặn đăng + cảnh báo "Bài có báo cáo — vui lòng chọn dự án", mở bộ chọn dự án (theo tai-lieu-nghiep-vu/bang-tin.md) |
| Lỗi lưu |
giữ nội dung đã nhập + thông báo lỗi, cho thử lại |
Màn 3 — Xem trang người khác (trang-ca-nhan-nguoi-khac.html)
Trang cá nhân của một người khác, mở từ tên/avatar trong feed.
| Thành phần |
Kiểu |
Bắt buộc |
Nguồn |
Ràng buộc / Hành vi |
| Thẻ hồ sơ |
hiển thị |
✔ |
GET /users/{id} (dự kiến) |
avatar lớn, họ tên, badge trạng thái (vd "Chính thức"), chức vụ · phòng ban · mã NV |
| Nút Nhắn tin |
hành động |
✔ |
– |
→ mở khung chat (chat.html) với người này |
| Tab Bài viết |
tab |
✔ |
– |
mặc định chọn; liệt kê bài của người này mà mình được phép xem |
| Tab Ảnh |
tab |
– |
– |
lưới ảnh trích từ các bài của người này |
| Tab Thông tin |
tab |
– |
– |
bảng Thông tin công khai (xem dưới) |
| Bài (tab Bài viết) |
list |
✔ |
theo người |
như bài ở Màn 1 nhưng không có menu Sửa/Xóa (không phải bài của mình) |
Tab Thông tin — Thông tin công khai (chỉ các trường công khai):
| Trường |
Ví dụ |
| Họ và tên |
Trần Văn Bình |
| Mã nhân viên |
NV-0207 |
| Chức vụ |
Kỹ sư điện |
| Phòng ban |
Phòng Kỹ thuật điện |
| Nơi làm việc |
Công trường Điện lực Linh Đàm – Hà Nội |
| Ngày vào làm |
08/09/2022 |
| Email công việc |
binh.tv@longdo.vn |
- Ghi chú quyền xem hiển thị đầu tab Bài viết: "Chỉ hiển thị bài bạn được phép xem."
- Tab Thông tin không hiện người quản lý, số điện thoại đầy đủ hay chữ ký cá nhân
(theo
tai-lieu-nghiep-vu/bang-tin.md §1.8.2 · BR-BT-14).
- Tương tác (Thích · Bình luận · Chia sẻ) giống Màn 1.
Trạng thái màn
| Trạng thái |
Hiển thị |
| Đang tải |
khung xương (skeleton) thẻ hồ sơ + danh sách bài |
| Rỗng (chưa có bài được phép xem) |
"empty state" — chưa có bài nào bạn được phép xem |
| Không đủ quyền |
vẫn hiện thẻ hồ sơ + tab Thông tin; danh sách bài rỗng theo phạm vi hiển thị |
Luồng chuyển màn
Rail "Bảng tin" (mọi trang)
│
▼
┌──────────────────────────────┐ ô soạn bài
│ Màn 1 — Bảng tin (feed) │───────────────► popup soạn bài (compose-modal.js)
│ │
│ tên/avatar người đăng ──────┼──► Màn 3 — Trang người khác ──► Nhắn tin (chat.html)
└──────────────────────────────┘
Trang cá nhân (mục Nhật ký) ──"Sửa bài"──► Màn 2 — Đăng/sửa bài ──Đăng/Hủy──► về nguồn
(Màn 2 linh hoạt theo nguồn: vào từ Trang cá nhân → về Trang cá nhân;
vào từ Bảng tin (?from=bang-tin) → về Bảng tin)
- Màn 2 điều hướng linh hoạt theo nguồn: đọc
?from= trên URL (ca-nhan | bang-tin),
dự phòng theo document.referrer; mặc định Trang cá nhân (hiện chỉ Trang cá nhân mở
màn này — feed dùng popup soạn bài). Nhánh ?from=bang-tin để sẵn cho luồng Bảng tin.
Ghi chú nghiệp vụ
- Bài trên Nhật ký cá nhân của Trang cá nhân cũng là nguồn cho Bảng tin — cùng một bài nhật ký.
- Phạm vi hiển thị người đăng đặt quyết định ai thấy bài trong feed và trên trang cá nhân.
- Số liệu bảng báo cáo công việc (khối lượng, tiêu hao) — công thức & nguồn do BA chốt ở
tai-lieu-nghiep-vu/bang-tin.md.
- Bản web dùng giao diện sáng (Modern SaaS); nút đổi sáng/tối ở header là dự phòng.