管理畫面的樣式全部由核心提供。模組開發者只要撰寫符合慣例的標記，就能呈現與核心管理畫面相同的外觀；即使核心變更設計，模組畫面也會跟著一起改變。

基本原則

• 管理畫面的顏色・間距・字體由核心的設計權杖（--zm-* CSS 變數）決定。請勿在模組中直接寫死色碼，而是參照權杖。
• 沿用自 XE 時代的 x_* 類別照常使用。核心保留這些類別並只重新套用樣式，因此既有模組不需修改也能套用新設計。
• 若需要模組專屬的 UI，請建立模組專用的前綴來使用。覆寫核心類別的做法會在下次核心更新時失效。

設計權杖

這些是整個管理畫面都能使用的 CSS 變數。淺色/深色的值都已定義，只要使用權杖就會自動支援深色模式。

/* 모듈 관리자 화면 예 */
.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);
}

x_* 元件

這些是管理畫面標記的基本零件。組合以下類別，不需額外 CSS 就能呈現與核心相同的畫面。

• 表單：.x_form-horizontal > .x_control-group > .x_control-label + .x_controls
• 按鈕：.x_btn，強調用 .x_btn.x_btn-primary，危險操作用 .x_btn-danger，尺寸用 -large -small -mini
• 表格：.x_table，需要區分列時用 .x_table-striped，懸停效果用 .x_table-hover
• 提示：.x_alert 與 -info -success -error 變化
• 徽章：.x_badge 與狀態變化，說明文字：.x_help-block .x_help-inline
• 分頁：.x_nav.x_nav-tabs > li > a，目前項目為 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>

舊版 .btn .table 等沒有前綴的 Bootstrap 類別，在管理畫面中也會與 x_* 同樣處理，但新程式碼請使用 x_*。

模組專屬畫面與前綴

像列表卡片、儀表板這類難以用 x_* 零件呈現的畫面，請訂定模組前綴自行製作。這與核心模組所用的方式相同。

• 每個模組統一使用一個前綴。例：商店管理員為 zmst-，金流模組為 zpay-
• 即使在前綴內，顏色・間距也要參照 --zm-* 權杖。這樣才能免費跟上深色模式與日後的改版設計。
• 請避免以上層元素選擇器（.x .something）覆寫核心規則的做法。核心 CSS 的優先順序一變就會跟著失效。

管理範本的位置與註冊

現代結構的模組將管理範本放在 views/admin/*.blade.php（範本 v2）。

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

• 若有多個畫面，請製作分頁片段（_tabs.blade.php）並在各畫面中 @include。
• 管理選單的註冊是透過 module.xml 動作宣告的 menu_name 屬性。詳情請參閱 模組製作 文件。
• 管理畫面中沒有 mid，因此前往其他畫面的連結請以 getUrl('', 'module', 'admin', 'act', ...) 的形式建立。若第一個參數不留空，目前請求的所有變數都會一起附加。

不該做的事

• 寫死顏色。尤其直接使用白色背景（#fff）會在深色模式中出錯。請使用 var(--zm-card) 之類的權杖。
• 在管理畫面載入 Bootstrap 等外部 CSS 框架。會與核心樣式衝突。
• 以 CSS 覆寫其他模組的管理畫面。若是必要的改善，請向核心提出建議。
• 濫用行內腳本。核心正逐步擴大管理畫面的 CSP 套用範圍，因此將腳本拆分為獨立的 js 檔案較為安全。