Skip to content

Concepteur de vues

Le concepteur de vues de Doggy est un outil de mise en page visuelle, avec prise en charge de la conception par glisser-déposer, de la liaison de sources de données, de l'aperçu en temps réel, de l'amélioration IA et de la gestion de versions.

Aperçu

Le système de vues est construit sur les entités suivantes (src/Entity/Platform/) :

  • View.php : définition de vue (configuration de disposition, source de données, informations de version)
  • ViewField.php : configuration de chaque champ de la vue

Le point d'entrée de gestion se trouve dans App\Controller\Admin\Platform\ViewEditorController, et le point d'entrée API dans ViewEditorApiController.

Structure d'une vue

View
├── 布局配置(栅格行/列)
├── 字段绑定(ViewField)
│   ├── 数据表格
│   ├── 表单
│   ├── 统计卡片
│   └── 文本内容
├── 数据源配置
└── 版本目录(1_0/, 2_0/...)

Utilisation

  1. Accédez à Plateforme low-code → Gestion des vues (/admin/platform/view)
  2. Cliquez sur Nouvelle vue
  3. Éditez la disposition de la vue (editor.html.twig)
  4. Configurez les propriétés des composants et la source de données
  5. Prévisualisez le résultat (editor_section_properties.html.twig)
  6. Enregistrez et publiez

Amélioration IA

L'éditeur de vues est profondément intégré à l'Assistant IA :

  • Panneau IA flottant : s'ouvre via le bouton flottant en bas à droite de toutes les pages
  • Enregistrement de contexte : l'éditeur enregistre automatiquement le contexte view_editor
  • Opérations en langage naturel : « transforme ce texte en style de titre »
  • Appel d'outils : view.getInfo, view.updateSectionConfig, view.updateFieldConfig, view.listEntityFields
  • Identification d'intention + sous-agents : génération en un clic de vues de scénarios (formulaires, rapports, pages d'atterrissage, etc. — voir Amélioration de vue IA)

Prise en charge également de l'assistance de disposition Tailwind CSS (basée sur le runtime Twind) :

  • Disposition rapide : classes utilitaires flex/grid/espacement/largeur-hauteur, etc.
  • Coexistence avec les styles inline existants, sans conflit
  • Chargement à la demande dans le frontend de production, aucune étape de build

Liaison de sources de données

La source de données d'une vue est configurée via l'entité DataSource.php, avec prise en charge de :

  • Source de données entité : liaison aux données des modèles dynamiques
  • Source de données API : appel d'une API personnalisée
  • Source de données statique : données fixes

Génération de code

Après l'enregistrement d'une vue, le système génère les fichiers de modèles Twig correspondants dans le répertoire templates/views/ :

templates/views/
├── hello/
│   └── 1_0/
│       ├── hello.html.twig
│       └── hello.design.twig
└── 组织架构/
    └── post_management/
        └── 1_0/
            ├── post_management.html.twig
            └── post_management.design.twig

Les modèles générés peuvent être utilisés directement ou faire l'objet de développements secondaires.

Gestion de versions

Les vues prennent en charge la gestion multi-versions (chaque version correspond à un ensemble indépendant de fichiers Twig) :

  • Bascule de version : activer une version comme version courante
  • Nouvelle version : copie depuis la version courante ou création d'une version vide
  • La suppression d'une vue la déplace vers la corbeille (restauration possible)
  • L'éditeur travaille par version, avec possibilité de spécifier explicitement ?version=...

Services associés

  • FormFieldBuilderService.php : construction des champs de formulaire
  • ViewFolderType.php, ViewType.php : définitions des types de formulaires
  • AiChatController.php : interface de conversation IA
  • ViewAiTaskApiController.php : interface des tâches d'amélioration IA

Open source sous licence MIT | Copyright © 2026 Doggy