Tối ưu UI sunstech — trước / sau

Kết quả

Flow mới ui-do-phan-giai (15 màn × 9 hồ sơ, kiểm cứng): trước 0/9 đạt → sau 9/9 đạt.
Thanh trên phân hệ 64px trong khi Portal 56px (chế độ compact ≥1280px) → chuyển Portal ↔ phân hệ nhảy 8px: lỗi ở 5/5 hồ sơ desktop, 13 màn mỗi hồ sơ → hết.
Điện thoại 390 / 360px: avatar Tài khoản tràn mép phải ở 10 màn phân hệ → hết (thu logo / khoảng cách, không ẩn nút nào).
Đổi cỡ cửa sổ không tải lại (vd kéo Chrome sang màn khác): mật độ giữ theo lúc nạp trang (comfortable ở 1600 / 1920px) → tự đổi theo cỡ cửa sổ.
Chữ < 12px: 11 tab Workplace (5–13 đoạn / màn), Tích hợp, Quản trị → 0.
Tải trang: bundle chính 3 590 305 B gửi không nén → route Caddy ws thêm nén: zstd 1 084 966 B (−70%) — đo bằng Caddy 2.6.4 chạy thử; có hiệu lực sau khi deploy CP + đồng bộ route.

Đã sửa (không đổi nghiệp vụ / API)

ws 4924b77f — packages/ui AppLayout dùng token --suns-topbar-h / --suns-sider-w / --suns-nav-item-h / --suns-dur-panel; watchDensity + app.tsx; nấc ≤480px thanh trên; chữ tối thiểu 12px (Workplace, Chat, Quản trị, Tích hợp, chuyển ứng dụng); chiều cao 100dvh − N theo token; prefers-reduced-motion; vùng nội dung scrollbar-gutter: stable.
cp c8879fc — route Caddy ws: handler encode zstd / gzip cho nhánh file tĩnh (không bọc /api vì SSE).
ws 51d8bda6 — bộ test: --cdp, --dist, bước viewport, cờ soft, step khung.*, flow ui-do-phan-giai, hồ sơ có DPR + fhd150.
hub c883a8e — profile/web (dpr, fhd150), docs/testcases/ui-do-phan-giai.md; kit fd649fe — luật doc/convention/ui-test.md.

Chạy lại

WS_AUTO_LOGIN=1 wsctl e2e flow ui-do-phan-giai --cdp MG1 --profile fhd,fhd125,fhd150,hd,laptop
WS_AUTO_LOGIN=1 wsctl e2e flow ui-do-phan-giai --cdp MG2 --profile tablet-ngang,tablet,mobile,mobile-hep
# ảnh "sau" trước khi deploy: thêm --dist <bản sao apps/web/dist>

Chưa làm / cần quyết

Deploy ws 6c994344..70c98ed8 + cp c8879fc chưa làm: quyền deploy bị chặn ở công cụ của agent, cần người chạy mgctl deploy cp --yes rồi mgctl deploy ws --allow-dirty --yes (+ 2 migration chat chỉ thêm cột). CP reload tự đẩy lại route ws có nén.
Backlog work/request/backlog/2026-11-08-ui-toi-uu-con-lai.md. Bundle chính vẫn 3,6 MB trước nén: @minigate/ui re-export toàn bộ antd + icon + recharts bằng require nên không tree-shake. Sửa = đổi sang ESM re-export có tên — ảnh hưởng mọi module, đề xuất request riêng.
extensions/_ui-kit/AppShell (submodule repo khác) vẫn ghi cứng 64 / 248px — module extension có khung riêng sẽ còn lệch 8px ở compact.
Submodule extensions: runtime đang ở commit nhánh fix/mg59…, platform ở main 6a1d112 — deploy ws sẽ đổi theo platform.
Rà 82 màn (laptop / tablet): chữ < 12px 110 → 2 / 60 → 0; còn 1 badge 9,5px ở Workplace tab Bảng tin và Nhóm (laptop) — chưa sửa.
Cảnh báo thẩm mỹ (dải trống dọc ở sidebar / màn ít dữ liệu) chỉ để xem, không chặn; tuỳ dữ liệu.
Ảnh ra-soat-ui tablet: trước chụp @1x, sau @2x (hồ sơ mới có DPR) — bố cục CSS như nhau, ảnh sau nét hơn.

Rà soát store / thương hiệu / license: không thấy rủi ro (chỉ CSS / JS nội bộ, không thêm thư viện, không đổi quyền / dữ liệu).

Độ phân giải (15 màn) · `fhd` 1920×1080 @1x

Chỉ số	Trước	Sau
Kết quả flow	FAIL	PASS
Màn tràn ngang	0	0
Đoạn chữ < 12px (tổng)	27	0
Kiểm khung lỗi	14	0
cảnh báo: chữ < 12px	3	0
cảnh báo: khối ít nội dung	4	0

Khung lỗi (trước): eval = ["thanh trên cao 64px, token --suns-topbar-h 56px"], cần [] · eval = ["thanh trên cao 64px, token --suns-topbar-h 56px"], cần [] · eval = ["thanh trên cao 64px, token --suns-topbar-h 56px"], cần [] · eval = ["thanh trên cao 64px, token --suns-topbar-h 56px"], cần [] · eval = ["thanh trên cao 64px, token --suns-topbar-h 56px"], cần [] · eval = ["thanh trên cao 64px, token --suns-topbar-h 56px"], cần []

Flow lỗi (trước): 18 bước kiểm lỗi — #12 khung: tràn / cắt mép / thanh trên / mật độ: eval = ["thanh trên cao 64px, token --suns-topbar-h 56px"], cần [] | #17 khung: tràn / cắt mép / thanh trên / mật độ: eval = ["thanh trên cao 64px, token --suns-topbar-h 56px"], cần [] | #22 khung: tràn / cắt mép

Ảnh trước / sau (19 màn)

Trước: admin tab members — admin tab members

Sau: admin tab members — admin tab members

Trước: hrm nav employee — hrm nav employee

Sau: hrm nav employee — hrm nav employee

Trước: workflow nav inbox — workflow nav inbox

Sau: workflow nav inbox — workflow nav inbox

Trước: workplace tab home — workplace tab home

Sau: workplace tab home — workplace tab home

Trước: workplace tab chat — workplace tab chat

Sau: workplace tab chat — workplace tab chat

Trước: workplace tab calendar — workplace tab calendar

Sau: workplace tab calendar — workplace tab calendar

Trước: org nav org chart — org nav org chart

Sau: org nav org chart — org nav org chart

Trước: account setting — account setting

Trước: workspace settings — workspace settings

Sau: workspace settings — workspace settings

Trước: customs nav declaration — customs nav declaration

Sau: customs nav declaration — customs nav declaration

Trước: transport nav vehicles — transport nav vehicles

Sau: transport nav vehicles — transport nav vehicles

Độ phân giải (15 màn) · `fhd125` 1536×864 @1.25x

Chỉ số	Trước	Sau
Kết quả flow	FAIL	PASS
Màn tràn ngang	0	0
Đoạn chữ < 12px (tổng)	27	0
Kiểm khung lỗi	14	0
cảnh báo: chữ < 12px	3	0
cảnh báo: khối ít nội dung	4	0

Ảnh trước / sau (19 màn)

Độ phân giải (15 màn) · `fhd150` 1280×720 @1.5x

Chỉ số	Trước	Sau
Kết quả flow	FAIL	PASS
Màn tràn ngang	0	0
Đoạn chữ < 12px (tổng)	27	0
Kiểm khung lỗi	14	0
cảnh báo: chữ < 12px	3	0
cảnh báo: khối ít nội dung	2	0

Flow lỗi (trước): 17 bước kiểm lỗi — #12 khung: tràn / cắt mép / thanh trên / mật độ: eval = ["thanh trên cao 64px, token --suns-topbar-h 56px"], cần [] | #17 khung: tràn / cắt mép / thanh trên / mật độ: eval = ["thanh trên cao 64px, token --suns-topbar-h 56px"], cần [] | #22 khung: tràn / cắt mép

Ảnh trước / sau (19 màn)

Độ phân giải (15 màn) · `hd` 1440×900 @2x

Chỉ số	Trước	Sau
Kết quả flow	FAIL	PASS
Màn tràn ngang	0	0
Đoạn chữ < 12px (tổng)	27	0
Kiểm khung lỗi	14	0
cảnh báo: chữ < 12px	3	0
cảnh báo: khối ít nội dung	4	0

Ảnh trước / sau (19 màn)

Độ phân giải (15 màn) · `laptop` 1366×768 @1x

Chỉ số	Trước	Sau
Kết quả flow	FAIL	PASS
Màn tràn ngang	0	0
Đoạn chữ < 12px (tổng)	27	0
Kiểm khung lỗi	14	0
cảnh báo: chữ < 12px	3	0
cảnh báo: khối ít nội dung	3	0

Ảnh trước / sau (19 màn)

Độ phân giải (15 màn) · `tablet-ngang` 1024×768 @2x

Chỉ số	Trước	Sau
Kết quả flow	FAIL	PASS
Màn tràn ngang	0	0
Đoạn chữ < 12px (tổng)	24	0
Kiểm khung lỗi	3	0
cảnh báo: chữ < 12px	3	0
cảnh báo: khối ít nội dung	1	0

Khung lỗi (trước): eval = ["mật độ comfortable, cỡ cửa sổ 1600px cần compact"], cần [] · eval = ["bị cắt mép: Tài khoản"], cần [] · eval = ["mật độ comfortable, cỡ cửa sổ 1920px cần compact"], cần []

Flow lỗi (trước): 7 bước kiểm lỗi — #31 đo /workflow?nav=inbox: block:mainInner__ chỉ 11.9% nội dung | #36 đo /workplace?tab=home: 8 đoạn chữ < 12px | #41 đo /workplace?tab=chat: 8 đoạn chữ < 12px | …

Ảnh trước / sau (19 màn)

Độ phân giải (15 màn) · `tablet` 768×1024 @2x

Chỉ số	Trước	Sau
Kết quả flow	FAIL	PASS
Màn tràn ngang	0	0
Đoạn chữ < 12px (tổng)	15	0
Kiểm khung lỗi	3	0
cảnh báo: chữ < 12px	3	0
cảnh báo: khối ít nội dung	2	0

Flow lỗi (trước): 7 bước kiểm lỗi — #31 đo /workflow?nav=inbox: block:mainInner__ chỉ 10.6% nội dung · block:wrap__ chỉ 11.4% nội dung | #36 đo /workplace?tab=home: 5 đoạn chữ < 12px | #41 đo /workplace?tab=chat: 5 đoạn chữ < 12px | …

Ảnh trước / sau (19 màn)

Độ phân giải (15 màn) · `mobile` 390×844 @3x

Chỉ số	Trước	Sau
Kết quả flow	FAIL	PASS
Màn tràn ngang	0	0
Đoạn chữ < 12px (tổng)	15	0
Kiểm khung lỗi	14	0
cảnh báo: chữ < 12px	3	0

Khung lỗi (trước): eval = ["bị cắt mép: Tài khoản"], cần [] · eval = ["bị cắt mép: Tài khoản"], cần [] · eval = ["bị cắt mép: Tài khoản"], cần [] · eval = ["bị cắt mép: Tài khoản"], cần [] · eval = ["bị cắt mép: Tài khoản"], cần [] · eval = ["bị cắt mép: Tài khoản"], cần []

Flow lỗi (trước): 17 bước kiểm lỗi — #12 khung: tràn / cắt mép / thanh trên / mật độ: eval = ["bị cắt mép: Tài khoản"], cần [] | #17 khung: tràn / cắt mép / thanh trên / mật độ: eval = ["bị cắt mép: Tài khoản"], cần [] | #22 khung: tràn / cắt mép / thanh trên / mật độ: eval = ["bị cắt mép: Tà

Ảnh trước / sau (19 màn)

Độ phân giải (15 màn) · `mobile-hep` 360×800 @2.625x

Chỉ số	Trước	Sau
Kết quả flow	FAIL	PASS
Màn tràn ngang	0	0
Đoạn chữ < 12px (tổng)	15	0
Kiểm khung lỗi	14	0
cảnh báo: chữ < 12px	3	0

Ảnh trước / sau (19 màn)

Rà soát 82 màn · `laptop` 1366×768 @1x

Chỉ số	Trước	Sau
Kết quả flow	PASS	PASS
Màn tràn ngang	0	0
Đoạn chữ < 12px (tổng)	110	2
cảnh báo: chữ < 12px	12	2
cảnh báo: dải trống dọc	98	104
cảnh báo: khối ít nội dung	16	16
cảnh báo: lề trống	3	3

Ảnh trước / sau (83 màn)

Trước: admin tab modules — admin tab modules

Sau: admin tab modules — admin tab modules

Trước: admin tab custom fields — admin tab custom fields

Sau: admin tab custom fields — admin tab custom fields

Trước: admin tab integrations — admin tab integrations

Sau: admin tab integrations — admin tab integrations

Trước: crm nav dashboard — crm nav dashboard

Sau: crm nav dashboard — crm nav dashboard

Trước: crm nav opportunity — crm nav opportunity

Sau: crm nav opportunity — crm nav opportunity

Trước: crm nav customer — crm nav customer

Sau: crm nav customer — crm nav customer

Trước: crm nav activity — crm nav activity

Sau: crm nav activity — crm nav activity

Trước: crm nav supplier — crm nav supplier

Sau: crm nav supplier — crm nav supplier

Trước: customs nav manifest — customs nav manifest

Sau: customs nav manifest — customs nav manifest

Trước: customs nav bill of lading — customs nav bill of lading

Sau: customs nav bill of lading — customs nav bill of lading

Trước: customs nav certificate — customs nav certificate

Sau: customs nav certificate — customs nav certificate

Trước: customs nav hs code — customs nav hs code

Sau: customs nav hs code — customs nav hs code

Trước: khong ton tai trang thu — khong ton tai trang thu

Sau: khong ton tai trang thu — khong ton tai trang thu

Trước: hrm nav contract — hrm nav contract

Sau: hrm nav contract — hrm nav contract

Trước: hrm nav attendance — hrm nav attendance

Sau: hrm nav attendance — hrm nav attendance

Trước: hrm nav job position — hrm nav job position

Sau: hrm nav job position — hrm nav job position

Trước: hrm nav program — hrm nav program

Trước: hrm nav kpi okr — hrm nav kpi okr

Trước: hrm nav appraisal — hrm nav appraisal

Sau: hrm nav appraisal — hrm nav appraisal

Trước: teacher nav teachers — teacher nav teachers

Sau: teacher nav teachers — teacher nav teachers

Trước: vehicle nav vehicles — vehicle nav vehicles

Sau: vehicle nav vehicles — vehicle nav vehicles

Trước: transport nav maintenance — transport nav maintenance

Sau: transport nav maintenance — transport nav maintenance

Trước: transport nav routes — transport nav routes

Sau: transport nav routes — transport nav routes

Trước: transport nav drivers — transport nav drivers

Sau: transport nav drivers — transport nav drivers

Trước: transport nav dispatch — transport nav dispatch

Sau: transport nav dispatch — transport nav dispatch

Trước: transport nav cargo — transport nav cargo

Sau: transport nav cargo — transport nav cargo

Trước: workflow nav workflows — workflow nav workflows

Sau: workflow nav workflows — workflow nav workflows

Trước: workflow nav connectors — workflow nav connectors

Sau: workflow nav connectors — workflow nav connectors

Trước: workflow nav dashboard — workflow nav dashboard

Sau: workflow nav dashboard — workflow nav dashboard

Trước: workflow nav related — workflow nav related

Sau: workflow nav related — workflow nav related

Trước: workflow nav templates — workflow nav templates

Sau: workflow nav templates — workflow nav templates

Trước: workflow nav all tickets — workflow nav all tickets

Sau: workflow nav all tickets — workflow nav all tickets

Trước: workflow nav reports — workflow nav reports

Sau: workflow nav reports — workflow nav reports

Trước: workplace tab feed — workplace tab feed

Sau: workplace tab feed — workplace tab feed

Trước: workplace tab announcements — workplace tab announcements

Sau: workplace tab announcements — workplace tab announcements

Trước: workplace tab directory — workplace tab directory

Sau: workplace tab directory — workplace tab directory

Trước: workplace tab groups — workplace tab groups

Sau: workplace tab groups — workplace tab groups

Trước: workplace tab library — workplace tab library

Sau: workplace tab library — workplace tab library

Trước: workplace tab mailbox — workplace tab mailbox

Sau: workplace tab mailbox — workplace tab mailbox

Trước: workplace tab attendance — workplace tab attendance

Sau: workplace tab attendance — workplace tab attendance

Trước: workplace tab requests — workplace tab requests

Sau: workplace tab requests — workplace tab requests

Trước: org nav position — org nav position

Sau: org nav position — org nav position

Trước: account setting tab security — account setting tab security

Sau: account setting tab security — account setting tab security

Trước: account setting tab tokens — account setting tab tokens

Sau: account setting tab tokens — account setting tab tokens

Trước: account setting tab notifications — account setting tab notifications

Sau: account setting tab notifications — account setting tab notifications

Trước: app settings tab store — app settings tab store

Sau: app settings tab store — app settings tab store

Rà soát 82 màn · `tablet` 768×1024 @2x

Chỉ số	Trước	Sau
Kết quả flow	PASS	PASS
Màn tràn ngang	0	0
Đoạn chữ < 12px (tổng)	60	0
cảnh báo: chữ < 12px	12	0
cảnh báo: dải trống dọc	110	110
cảnh báo: khối ít nội dung	13	13
cảnh báo: lề trống	2	2