Utiliser Studio

Studio est un espace de travail de composants dans le navigateur : arborescence de fichiers à gauche, éditeur et double aperçu au centre, conversation IA et terminal à droite. Aucun environnement local n'est nécessaire : ouvrez la page web pour écrire un composant de zéro et le publier.

Accéder à Studio

Deux façons :

• ouvrir directement l'adresse de Studio (en production studio.comphub.cn) ;
• cliquer sur « Ouvrir dans Studio » depuis la page de détail d'un composant de la plateforme pour importer un composant en ligne sous forme d'espace de travail.

À la première ouverture, vous arrivez sur la page de sélection de l'espace de travail : elle liste les espaces de travail déjà présents dans ce navigateur ; vous pouvez en reprendre un ou en créer un nouveau.

Les données restent dans le navigateur

Les espaces de travail, fichiers et historiques de conversation sont enregistrés dans l'IndexedDB du navigateur local ; ils ne sont pas synchronisés automatiquement vers d'autres appareils ou navigateurs.

Présentation de l'interface

Zone	Contenu
Colonne de gauche	Arborescence : créer/supprimer des fichiers, glisser-déposer, changer de composant
Colonne centrale	Éditeur de code + panneaux d'aperçu (mini en petite fenêtre / full en plein écran)
Colonne de droite	Conversation IA et terminal (bascule verticale dans la même colonne)

Les séparateurs entre panneaux sont déplaçables ; le panneau d'aperçu peut être agrandi pour examiner les détails.

Créer un composant

Cliquez sur « Nouveau », puis choisissez un onglet dans la boîte de dialogue « Créer un composant » :

Création par modèle

Champ	Description
Framework	Vue / React / Web Component
Version	Version majeure de Vue ou React (par exemple Vue 3, React 18)
Nom	Nom du composant, conforme aux conventions de nommage
Balise	Uniquement pour Web Component : nom de balise de l'élément personnalisé, par exemple my-element

Après la création, Studio génère le fichier d'entrée, le README et comp.json, et installe automatiquement le runtime correspondant. La progression de l'installation s'affiche dans le panneau du terminal.

Import local

Faites glisser un dossier de composant existant dans la boîte de dialogue, ou choisissez un fichier local. Pratique pour reprendre un ancien composant du projet et le modifier.

Éditer et prévisualiser

• Après l'enregistrement d'un fichier, l'aperçu se rafraîchit automatiquement.
• Les fichiers .vue n'ont pas de mise à jour à chaud au niveau module : après l'enregistrement, la page est rechargée entièrement (anti-rebond d'environ 300 ms).
• L'aperçu comporte deux panneaux, mini et full, correspondant à l'affichage dans les cartes de liste et dans la page de détail de la plateforme.
• L'entrée d'aperçu peut être définie dans l'arborescence ; à défaut, l'entrée par défaut de la spécification est utilisée (demo/index.vue / demo/full.vue).

Aperçu vide : vérifiez d'abord les dépendances

Les paquets utilisés par le composant doivent d'abord être installés. En cas de dépendance manquante, la barre supérieure l'indique et le terminal précise le paquet manquant.

Conversation IA

La zone de conversation à droite permet de demander à l'IA de modifier le code en langage naturel. Deux sources de modèles :

Source	Configuration	Quota
Intégrée à la plateforme	Aucune configuration : choisissez un modèle après connexion	Quota illimité pour les utilisateurs connectés ; quota par ID + IP pour les anonymes
Clé personnelle	Dans « Paramètres », choisissez un fournisseur, saisissez la clé API et sélectionnez le modèle par défaut	Défini par le fournisseur

Les clés saisies manuellement ne sont conservées que dans le navigateur local et ne sont jamais téléversées. Les paramètres permettent de partager ou non la même configuration entre plusieurs espaces de travail.

Chaque modification de l'IA est présentée sous forme de carte d'action : écriture, suppression, exécution de commande, etc. Lorsqu'une action implique une suppression ou nécessite votre choix, une carte de confirmation s'affiche d'abord ; l'action n'est exécutée qu'après confirmation. En cas d'échec, la raison est affichée, sans faire semblant que l'action a réussi.

Terminal

Le terminal sert à installer des dépendances :

npm install echarts

Seules les commandes d'installation telles que npm install / npm i / npm add sont autorisées ; les autres sont bloquées avec un message. La source npmmirror est utilisée par défaut ; vous pouvez revenir à npmjs depuis le panneau du terminal.

L'installation s'effectue dans un environnement virtuel au sein du navigateur et n'affecte pas votre projet local.

Instantanés et restauration

Studio enregistre automatiquement des instantanés de l'espace de travail dans IndexedDB :

• les fichiers et conversations sont restaurés automatiquement après un rafraîchissement de la page ;
• un anti-rebond protège les changements lors du changement d'onglet ou de la fermeture de la page ;
• la suppression d'un espace de travail efface également l'instantané correspondant.

Si le répertoire semble vide après un rafraîchissement, vérifiez d'abord si une suppression importante vient d'être effectuée ; si nécessaire, reprenez un espace de travail historique dans la liste.

Publier dans la bibliothèque de composants

Sélectionnez le répertoire racine du composant dans l'arborescence, puis cliquez sur publier. Le processus comporte trois phases :

1. Autorisation de connexion

Si vous n'êtes pas connecté, un point d'entrée d'autorisation est proposé ; confirmez dans le navigateur, puis revenez dans Studio. Une seule autorisation suffit.

2. Renseigner les informations de publication

Champ	Description
Nom	Nom du composant, figé après la première publication
Version	Versionnage sémantique ; lors d'une mise à jour, elle doit être supérieure à la version en ligne
Description	Une phrase expliquant l'usage
Étiquettes	5 au maximum, pour faciliter la recherche
Note de mise à niveau	Lors d'une mise à jour, indiquez ce qui a changé

3. Attendre la fin des phases de publication

Studio effectue successivement la capture d'écran, la collecte des fichiers, la pré-vérification, la précompilation des dépendances et la soumission ; la progression de chaque phase est affichée. À la fin, le résultat est présenté avec un lien vers la page de détail du composant.

Le bouton de publication détermine automatiquement s'il s'agit d'une « publication » ou d'une « mise à jour » : il affiche mise à jour lorsque l'espace de travail provient d'un composant en ligne dont vous êtes toujours l'auteur (ou un contributeur), sinon publication.

Une entrée d'aperçu manquante bloque la publication

Si l'entrée d'aperçu mini ou full n'existe pas, la publication demande de la compléter. Placez demo/index.vue et demo/full.vue conformément à la Spécification des composants.

Choisir entre Studio et CLI

Scénario	Recommandation
Écrire un composant de zéro en voyant le résultat	Studio
Première publication avec aperçu et description	Studio ou page de téléversement
Modifier le code d'un composant existant et publier rapidement	comphub upload
Ne changer que la description, les étiquettes ou la configuration d'aperçu	Page de mise à jour de la plateforme

Questions fréquentes

L'aperçu reste blanc

Vérifiez d'abord si le terminal installe encore des dépendances, puis assurez-vous que l'entrée du composant a un default export. Pour un Web Component, vérifiez que le HTML d'aperçu contient un script de module dans <body>.

L'IA ne répond pas

Vérifiez la source du modèle actuel : le modèle intégré nécessite une connexion ; pour une clé personnelle, vérifiez que la clé est valide et que le modèle est disponible.

La publication indique que vous n'êtes pas connecté

Repassez par le point d'entrée d'autorisation. La page d'autorisation ne sert qu'à confirmer votre identité ; elle ne copie pas votre session de connexion du navigateur vers Studio.

Les fichiers ont disparu après un rafraîchissement

Vérifiez que vous n'avez pas supprimé l'espace de travail ; les instantanés sont isolés par espace de travail, et changer d'espace affiche un autre jeu de fichiers.

Prochaines étapes

• Écriture et contraintes des composants : Spécification des composants
• Gestion des versions après publication : Mise à jour et versions