Aller au contenu

Vue · Administration

Paramètres / Administration

Disponible

Patron d'administration master-détail : SideNav de sous-sections à gauche, Tabs de catégories, Form/FormGroup (Select, Input, Toggle, Switch) et une barre d'enregistrement (ButtonGroup). Un seul NodeSpec → rendu identique en Svelte, React, Vue et Angular.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular. Le rendu et le code copié reflètent le framework sélectionné.

Paramètres : espace de travail (données mock)

Général

Espace : Sent Tech
Langue, fuseau horaire et format de date de l'espace.
Localisation

Appliqué à tous les membres de l'espace.

Identité de l'espace
Un changement nécessite une nouvelle vérification DNS.
Comportements
Modifications non enregistrées
Voir le code (Svelte) 
<div class="st-shell">
  <aside class="st-aside">
    <h3 class="st-aside-title">Paramètres</h3>
    <SideNav items={[{"label":"Général","href":"#","active":true},{"label":"Profil","href":"#"},{"label":"Sécurité","href":"#"},{"label":"Notifications","href":"#"},{"label":"Facturation","href":"#"},{"label":"Membres","href":"#"},{"label":"API","href":"#"}]} />
  </aside>
  <main class="st-main">
    <div class="st-main-head">
      <h2 class="st-main-title">Général</h2>
      <Badge tone="info">Espace : Sent Tech</Badge>
    </div>
    <Tabs items={[{"id":"preferences","label":"Préférences","content":"Langue, fuseau horaire et format de date de l'espace."},{"id":"features","label":"Fonctionnalités","content":"Activation des modules optionnels."},{"id":"advanced","label":"Avancé","content":"Réglages réservés aux administrateurs."}]} />
    <Form status="idle">
      <FormGroup
        legend="Localisation"
        helperText="Appliqué à tous les membres de l'espace."
      >
        <Select
          label="Langue de l'interface"
          value="fr"
          options={[{"value":"fr","label":"Français"},{"value":"en","label":"English"},{"value":"es","label":"Español"}]}
        />
        <Select
          label="Fuseau horaire"
          value="america-montreal"
          options={[{"value":"america-montreal","label":"America/Montreal (UTC−5)"},{"value":"europe-paris","label":"Europe/Paris (UTC+1)"},{"value":"utc","label":"UTC"}]}
        />
        <Select
          label="Format de date"
          value="iso"
          options={[{"value":"iso","label":"AAAA-MM-JJ"},{"value":"fr","label":"JJ/MM/AAAA"},{"value":"us","label":"MM/JJ/AAAA"}]}
        />
      </FormGroup>
      <FormGroup legend="Identité de l'espace">
        <Input label="Nom de l'espace" value="Sent Tech" />
        <Input
          label="Domaine personnalisé"
          value="app.sent-tech.ca"
          helperText="Un changement nécessite une nouvelle vérification DNS."
        />
      </FormGroup>
      <FormGroup legend="Comportements">
        <Toggle label="Mode sombre par défaut" />
        <Switch
          label="Sauvegarde automatique"
          checked
          helperText="Enregistre les modifications toutes les 30 secondes."
        />
        <Switch label="Journal d'audit" checked />
      </FormGroup>
    </Form>
    <div class="st-savebar">
      <span class="st-savebar-hint">Modifications non enregistrées</span>
      <ButtonGroup label="Actions d'enregistrement">
        <Button variant="ghost" size="sm">Annuler</Button>
        <Button variant="primary" size="sm">Enregistrer</Button>
      </ButtonGroup>
    </div>
  </main>
</div>

Composants DS utilisés