Chaque projet de back-office reconstruit la même couche : connexion, mise en page, tableaux, arborescences, notifications, réglages, états vides et états d’erreur. Les couleurs, les espacements et les détails d’interaction divergent ensuite, et maintenir la cohérence coûte plus cher à chaque page ajoutée.

Nous avons rassemblé cette couche en une base réutilisable et l’avons publiée sous licence MIT : admin-design, la conception et l’implémentation d’un back-office standard extraites du frontend de la plateforme Runlume.

Ce qu’elle couvre

  • Thème et jetons sémantiques : la couleur passe uniquement par des classes utilitaires sémantiques, six palettes prédéfinies se combinent avec une couleur de base et une couleur de thème, et les modes clair et sombre suivent automatiquement.
  • Trois coques de mise en page : barre latérale, en-tête plus barre latérale, et navigation supérieure. Largeur de la barre latérale, arrondi, transitions de page et ordre des actions d’en-tête sont réglables.
  • Neuf pages de composants : contrôles de base, formulaires et sélecteurs, affichage de données, retours et superpositions, navigation et parcours, indicateurs et graphiques, icônes, thème et réglages, pages standard. La galerie sert à la fois de documentation et de surface de recette.
  • Types de pages standard : tableau de bord, liste, détail, réglages, centre de notifications, connexion, inscription et récupération de mot de passe.
  • Chinois et anglais d’origine, accès au clavier et réglages d’accessibilité, ainsi que la même recherche par palette de commandes que la documentation.

Trois points d’entrée

Pour qui, et où se situe la limite

Pour les équipes qui construisent leur propre back-office et ne veulent pas réécrire l’interface une seconde fois : copiez le dépôt, changez le nom dans package.json, remplacez le menu et les ressources de marque, puis branchez les données d’exemple sur votre API.

La base ne contient que la couche de design et d’interaction : ni API métier, ni implémentation d’authentification, ni modèle de permissions, ni règles métier. Les données d’exemple vivent en mémoire et sont réinitialisées au rechargement. Identité, envoi de fichiers, glisser-déposer dans les arborescences ou chargement différé sont injectés via des props : brancher un service réel revient à remplacer le rappel, sans modifier le composant.