Lõi cung cấp toàn bộ style cho màn hình quản trị. Nhà phát triển mô-đun chỉ cần viết markup đúng quy ước là có giao diện giống màn hình quản trị của lõi, và khi lõi thay đổi thiết kế, màn hình mô-đun cũng thay đổi theo.

Nguyên tắc cơ bản

• Màu sắc·khoảng cách·phông chữ của màn hình quản trị do design token của lõi (biến CSS --zm-*) quyết định. Đừng gán cứng giá trị màu trong mô-đun, hãy tham chiếu token.
• Các lớp x_* kế thừa từ XE trước đây vẫn được dùng nguyên. Vì lõi giữ nguyên lớp và chỉ khoác style mới, nên mô-đun cũ không cần sửa vẫn được áp dụng thiết kế mới.
• Nếu cần UI riêng của mô-đun, hãy tạo tiền tố riêng cho mô-đun. Cách ghi đè lớp của lõi sẽ bị hỏng ở lần cập nhật lõi tiếp theo.

Design token

Đây là các biến CSS dùng được trên toàn bộ màn hình quản trị. Cả giá trị sáng/tối đều đã được định nghĩa, nên chỉ cần dùng token là chế độ tối tự hoạt động.

/* 모듈 관리자 화면 예 */
.mymod-note {
	padding: 12px 16px;
	border: 1px solid var(--zm-line);
	border-radius: var(--zm-radius-sm);
	background: var(--zm-surface-2);
	color: var(--zm-ink-soft);
}

Thành phần x_*

Đây là các bộ phận cơ bản của markup quản trị. Kết hợp các lớp dưới đây là có màn hình giống lõi mà không cần CSS riêng.

• Biểu mẫu: .x_form-horizontal > .x_control-group > .x_control-label + .x_controls
• Nút: .x_btn, nhấn mạnh là .x_btn.x_btn-primary, thao tác nguy hiểm là .x_btn-danger, kích thước là -large -small -mini
• Bảng: .x_table, cần phân cách hàng thì .x_table-striped, hover thì .x_table-hover
• Cảnh báo: .x_alert và các biến thể -info -success -error
• Huy hiệu: .x_badge và các biến thể trạng thái, trợ giúp: .x_help-block .x_help-inline
• Tab: .x_nav.x_nav-tabs > li > a, mục đang chọn là li.x_active

<form class="x_form-horizontal" method="post" action="./">
	<div class="x_control-group">
		<label class="x_control-label">{$lang->title}</label>
		<div class="x_controls">
			<input type="text" name="title" value="{$config->title}" />
			<p class="x_help-block">{$lang->about_title}</p>
		</div>
	</div>
	<div class="x_clearfix" style="text-align:right">
		<button type="submit" class="x_btn x_btn-primary">{$lang->cmd_save}</button>
	</div>
</form>

Các lớp bootstrap không có tiền tố như .btn .table kiểu cũ cũng được xử lý giống x_* bên trong màn hình quản trị, nhưng trong mã mới hãy dùng x_*.

Màn hình riêng của mô-đun và tiền tố

Những màn hình khó biểu diễn bằng bộ phận x_* như thẻ danh sách hay bảng tổng quan thì bạn tự làm với tiền tố của mô-đun. Đây cũng là cách các mô-đun lõi đang dùng.

• Mỗi mô-đun thống nhất một tiền tố. Ví dụ: quản trị cửa hàng là zmst-, mô-đun thanh toán là zpay-
• Ngay trong tiền tố, màu sắc·khoảng cách vẫn tham chiếu token --zm-*. Nhờ vậy mô-đun theo được chế độ tối và các lần thiết kế lại sau này mà không tốn công.
• Tránh cách ghi đè quy tắc của lõi bằng bộ chọn phần tử cha (.x .something). Khi độ ưu tiên của CSS lõi thay đổi, nó sẽ hỏng theo.

Vị trí và đăng ký template quản trị

Mô-đun theo cấu trúc hiện đại đặt template quản trị ở views/admin/*.blade.php (template v2).

modules/mymodule/
├── views/admin/
│   ├── _tabs.blade.php   ← 탭 공통 조각
│   ├── config.blade.php
│   └── list.blade.php
└── controllers/Admin.php

• Nếu có nhiều màn hình, hãy tạo mảnh tab (_tabs.blade.php) và @include ở từng màn hình.
• Việc đăng ký menu quản trị được thực hiện bằng thuộc tính menu_name trong khai báo action của module.xml. Xem chi tiết ở tài liệu Xây dựng mô-đun.
• Trên màn hình quản trị không có mid, nên liên kết đến màn hình khác được tạo theo dạng getUrl('', 'module', 'admin', 'act', ...). Nếu không để trống đối số đầu tiên, mọi biến của request hiện tại sẽ bị gắn theo.

Những điều không nên làm

• Gán cứng màu. Đặc biệt nếu viết trực tiếp nền trắng (#fff) thì sẽ hỏng ở chế độ tối. Hãy dùng token như var(--zm-card).
• Tải framework CSS bên ngoài như bootstrap vào màn hình quản trị. Nó sẽ xung đột với style của lõi.
• Ghi đè màn hình quản trị của mô-đun khác bằng CSS. Nếu đó là cải tiến cần thiết, hãy đề xuất cho lõi.
• Lạm dụng script nội tuyến. Lõi đang mở rộng việc áp dụng CSP cho màn hình quản trị, nên tách script ra tệp js riêng sẽ an toàn hơn.