管理画面のプロジェクトでは、ログイン、レイアウト、テーブル、ツリー、通知、設定、空状態、エラー状態を毎回作り直すことになります。しかも色や余白、操作の細部はそれぞれ異なり、画面が増えるほど保守の負担も増えていきます。

私たちはその共通部分を再利用できる一つの基線にまとめ、MIT ライセンスで公開しました。admin-design は Runlume プラットフォームのフロントエンドから抽出した標準的な管理画面の設計と実装です。

含まれるもの

  • テーマと意味づけされた Token：色は意味を持つユーティリティクラス経由のみで指定し、六つのプリセット配色にベースカラーとテーマカラーを重ねられます。明暗モードは自動で切り替わります。
  • 三つのレイアウトシェル：サイドバー、トップ + サイドバー、トップナビゲーション。サイドバー幅、角丸、ページ遷移、ヘッダー操作の順序を調整できます。
  • 九種類のコンポーネントページ：基本コントロール、フォームと選択、データ表示、フィードバックとオーバーレイ、ナビゲーションとフロー、指標とグラフ、アイコン、テーマと設定、標準ページ。コンポーネント一覧は資料であり、同時に受け入れ面でもあります。
  • 標準ページ：ダッシュボード、一覧、詳細、設定、通知センター、ログイン、新規登録、パスワード再設定。
  • 中国語と英語の二か国語、キーボード操作とアクセシビリティ設定、ドキュメントサイトと同じコマンドパレット検索。

三つの入口

向いているチームと境界

管理画面を自前で作る必要があり、画面をゼロから二度書きしたくないチームに向いています。リポジトリを複製し、package.json の名前を変え、メニューとブランド素材を差し替え、サンプルデータを自社の API に向けるところから始められます。

含まれるのは設計と操作の層だけです。業務 API、認証の実装、権限モデル、業務ルールは含みません。サンプルデータはメモリ上にあり、再読み込みで初期化されます。ID、アップロード、ツリーのドラッグ、遅延読み込みといった機能は props で注入するため、実サービスへの接続はコールバックの差し替えで完結します。