管理画面の制作

管理画面のスタイルはすべてコアが提供します。モジュール開発者は規約に沿ったマークアップを書くだけでコアの管理画面と同じ見た目になり、コアがデザインを変えてもモジュールの画面が一緒に追従します。

基本原則

管理画面の色・間隔・書体は、コアのデザイントークン（--zm-* CSS 変数）が決めます。モジュールで色の値を直接書き込まず、トークンを参照してください。
昔の XE から受け継がれている x_* クラスはそのまま使います。クラスはそのままにコアがスタイルだけを新しく当てているため、既存のモジュールは修正しなくても新しいデザインが適用されます。
モジュール固有の UI が必要なら、モジュール専用の接頭辞を作って使ってください。コアのクラスを上書きする方法は、次のコアアップデートで壊れます。

デザイントークン

管理画面全体で使える CSS 変数です。ライト/ダークの値がすべて定義されているので、トークンだけを使えばダークモードに自動で対応します。

トークン	用途
`--zm-brand` `--zm-brand-dark` `--zm-brand-soft`	ポイントカラー（既定 #2677e3）、濃い変形、淡い背景
`--zm-ink` `--zm-ink-soft` `--zm-ink-faint`	本文の文字、補助の文字、薄い文字
`--zm-bg` `--zm-card` `--zm-surface` `--zm-surface-2`	ページの地、カード、サーフェスの段階
`--zm-line` `--zm-line-soft` `--zm-input-border`	区切り線、淡い区切り線、入力欄の枠線
`--zm-ok` `--zm-warn` `--zm-error`	状態色（成功/注意/エラー）
`--zm-radius` `--zm-radius-sm`	角の丸み（12px / 8px）
`--zm-hover` `--zm-solid` `--zm-solid-fg`	ホバー背景、強調ボタンの面と文字
`--zm-shadow` `--zm-font`	カードの影、書体スタック

/* 모듈 관리자 화면 예 */
.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 ファイルに分けるのが安全です。