# Système de design Naive UI ## Aperçu de l’interface du système de design Naive UI Recherchez des dossiers, développez le contexte d’examen, sélectionnez des lignes sur plusieurs pages et marquez un lot local comme examiné. ## Référence de conception du système de design Naive UI Objet de thème clair commun Naive UI 2.45.3, inspecté dans le package installé. Ces propriétés en camelCase sont des substitutions de thème, et non une convention publique de nommage des variables --token CSS. Les substitutions communes personnalisées de l’aperçu sont présentées séparément. ### Couleurs communes par défaut | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | primaryColor | #18a058 | Vert principal par défaut. | | primaryColorHover | #36ad6a | Variante au survol. | | primaryColorPressed | #0c7a43 | Variante à l’appui. | | primaryColorSuppl | #36ad6a | Couleur principale complémentaire. | | infoColor | #2080f0 | Rôle d’information. | | successColor | #18a058 | Rôle de réussite. | | warningColor | #f0a020 | Rôle d’avertissement. | | errorColor | #d03050 | Rôle d’erreur. | | textColor1 | rgb(31, 34, 37) | Texte accentué. | | textColor2 | rgb(51, 54, 57) | Texte normal. | | textColor3 | rgb(118, 124, 130) | Texte secondaire. | | borderColor | rgb(224, 224, 230) | Bordure par défaut. | | dividerColor | rgb(239, 239, 245) | Séparateurs discrets. | | tableHeaderColor | rgb(250, 250, 252) | Arrière-plan de l’en-tête du tableau. | ### Typographie et géométrie des commandes | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | fontFamily | v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | Pile de polices d’interface privilégiée ; v-sans n’est pas téléchargée automatiquement. | | fontSize | 14px | Taille de texte par défaut de 14px. | | fontSizeMini | 12px | Taille du texte miniature. | | fontSizeSmall | 14px | Texte des petites commandes. | | fontSizeMedium | 14px | Texte des commandes moyennes. | | fontSizeLarge | 15px | Texte des grandes commandes. | | fontSizeHuge | 16px | Texte des commandes très grandes. | | lineHeight | 1.6 | Rythme du texte par défaut. | | heightTiny | 22px | Hauteur des commandes minuscules. | | heightSmall | 28px | Petite hauteur de contrôle. | | heightMedium | 34px | Hauteur des commandes moyennes. | | heightLarge | 40px | Grande hauteur de contrôle. | | heightHuge | 46px | Hauteur des commandes très grandes. | | borderRadius | 3px | Rayon par défaut de 3px. | | borderRadiusSmall | 2px | Petit rayon par défaut de 2px. | ### Remplacements réels du thème de prévisualisation | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | common.primaryColor | #176b57 | Couleur principale vert foncé d’origine pour l’action. | | common.primaryColorHover | #238a71 | Valeur de survol coordonnée d’origine. | | common.primaryColorPressed | #115340 | Valeur d’activation coordonnée d’origine. | | common.borderRadius | 6px | Remplacement de rayon d’origine ; la valeur par défaut est 3px. | | Layout spacing | 32px outer / 24px section gaps / 16px toolbar gap | Espacement de page d’origine, qui ne prétend pas définir une échelle d’espacement globale de Naive. | ## Naive UI Guide complet du système de design Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Naive UI : système de design — un objet de thème JavaScript, pas une chaîne de traitement Sass ### Un objet de thème JavaScript, pas une chaîne de compilation Sass > Naive UI est une bibliothèque de composants Vue 3 dont la personnalisation du thème s’exprime au moyen d’un objet JavaScript. La file d’attente de révision transmet themeOverrides à NConfigProvider. Sa section common remplace primaryColor, primaryColorHover, primaryColorPressed et borderRadius, tandis que les autres valeurs par défaut des composants restent accessibles via le fournisseur. Le tableau de référence indique les valeurs réelles du thème clair common installé en version 2.45.3. Il ne fabrique pas de noms de variables CSS à partir de ces clés camelCase. La couleur principale par défaut est #18a058 et le rayon de bordure par défaut est de trois pixels ; le vert plus foncé et le rayon de six pixels de cet exemple sont explicitement des remplacements d’origine. Consultez la spécification associée ## Système de design Naive UI : typographie dense et hauteurs des contrôles ### Typographie dense et hauteurs des contrôles Le thème courant utilise un texte de quatorze pixels avec une hauteur de ligne de 1,6. Les tailles de texte petite et moyenne sont toutes deux de quatorze pixels, mais la hauteur de leurs contrôles diffère. heightSmall mesure vingt-huit pixels et heightMedium trente-quatre pixels ; les noms de taille décrivent donc la géométrie des composants, et pas seulement une progression de la taille de police. La pile de polices recommandée commence par v-sans, mais la bibliothèque n’impose pas de télécharger cette police pour afficher cet exemple. La page qui l’entoure utilise system-ui, un titre de 34px et des titres de section secondaires de 18px. Ces styles de page sont d’origine. Lorsqu’il adopte la bibliothèque, un concepteur doit distinguer l’échelle des contrôles du thème de la hiérarchie éditoriale plus ample d’une page d’accueil. Consultez la spécification associée ## Système de design Naive UI : les définitions de colonnes déterminent le comportement ### Les définitions de colonnes portent leur comportement NDataTable reçoit un tableau columns et un tableau records. L’exemple commence par une colonne de sélection, suivie d’une colonne d’expansion, puis de colonnes de données nommées. La colonne Reference affiche un nom en gras et un identifiant stable de taille inférieure. Entries utilise un comparateur numérique, tandis que la colonne du nom utilise le tri par défaut. Review affiche un NTag natif en fonction du statut de l’enregistrement. Cette configuration décrit un comportement réel, et non une capture d’écran avec des en-têtes de tableau décoratifs. Le tri de la colonne Entries compare des nombres, pas des chaînes mises en forme. Le contenu développé présente la question de révision propre à chaque enregistrement. Le tableau contrôle l’affichage des lignes ; l’application, elle, définit la signification de ces enregistrements. Consultez la spécification associée ## Système de design Naive UI : préserver la sélection lors du réordonnancement ### La sélection doit être conservée lors du réordonnancement La fonction row-key renvoie l’identifiant stable de chaque enregistrement. checked-row-keys et update:checked-row-keys maintiennent la sélection sous le contrôle de l’état Vue. Le tri ou la pagination peuvent modifier l’emplacement d’un enregistrement sans changer l’identité utilisée par l’action groupée. Utiliser des index de tableau à la place fragiliserait cette relation lorsque l’ordre des lignes change. La colonne de sélection désactive les enregistrements archivés. Ils restent visibles pour conserver le contexte historique, mais ne peuvent pas être ajoutés au lot de révision. Lors de l’exécution de l’action, l’application vérifie aussi le statut, afin que la modification des données respecte la restriction affichée. Dans un système réel, le serveur devrait tout de même appliquer les autorisations ; une case à cocher désactivée ne constitue pas une frontière de sécurité. 1. Sélectionnez un enregistrement révisable sur la première page. 2. Passez à la page suivante et vérifiez que le nombre d’éléments sélectionnés est conservé. 3. Appliquez l’action groupée et vérifiez que le statut de l’enregistrement sélectionné change sans toucher à un enregistrement archivé. Consultez la spécification associée ## Système de design Naive UI : filtrage et pagination ont des états distincts ### Le filtrage et la pagination ont des états distincts Le champ de recherche cherche parmi les noms de référence et les propriétaires. Toute modification de sa valeur ramène à la première page, afin qu’un résultat filtré ne reste pas sur une page ultérieure désormais vide. La pagination utilise une taille de page de quatre et un gestionnaire onChange ; les six enregistrements permettent d’observer les changements de page dans cet exemple local. La sélection est volontairement distincte du tableau filtré et peut s’étendre sur plusieurs pages. Le nombre indiqué dans la barre d’outils rend cette portée visible. Une opération groupée en production devrait suivre une règle définie pour conserver ou effacer les sélections masquées ; cet exemple les conserve. Un filtre ne modifie jamais les enregistrements de révision sous-jacents. Consultez la spécification associée ## Système de design Naive UI : développez les lignes avant de prendre une décision groupée ### Développez les lignes avant de prendre une décision groupée Chaque ligne développée inclut une tâche concrète, par exemple vérifier le déplacement au clavier dans la navigation ou comparer différentes significations pour les états vides. Le contenu développé fournit ainsi des éléments utiles à la décision de révision, plutôt qu’une nouvelle description générique répétée. La colonne d’expansion utilise renderExpand pour afficher un contenu ordinaire sous l’enregistrement correspondant. Le tableau conserve la structure de ses colonnes sur les écrans étroits et reçoit scroll-x=640. La zone native du tableau peut ainsi défiler horizontalement, tandis que la page reste dans les limites de la fenêtre. La barre d’outils s’empile sur mobile, mais aucune donnée n’est supprimée en douce pour embellir la capture d’écran. Consultez la spécification associée ## Système de design Naive UI : la révision groupée transforme les données locales ### L’examen groupé est une transformation locale des données Le bouton « Marquer comme révisés » est désactivé lorsque le tableau de clés contrôlé est vide. Lorsqu’on l’active, la fonction parcourt les enregistrements et ne modifie que ceux qui sont sélectionnés et non archivés, en leur attribuant le statut Reviewed. La sélection est ensuite effacée et une alerte de réussite native décrit précisément l’opération locale. Le compteur d’enregistrements révisés dans l’en-tête de la carte est calculé à partir des enregistrements, au lieu d’être incrémenté séparément. Aucun dépôt, service de révision ni document externe n’est modifié. Une implémentation asynchrone réelle devrait gérer le chargement, les rejets et les échecs partiels. Elle ne devrait pas effacer la sélection avant de connaître les mises à jour réussies. Cet exemple garde l’opération synchrone et explicitement locale, afin que le message de réussite corresponde au code. - Le bouton d’action groupée reflète la présence d’éléments sélectionnés. - Le nombre d’éléments révisés est calculé à partir des mêmes enregistrements que ceux affichés dans le tableau. - Le message de résultat précise qu’aucun dépôt n’a été modifié. Consultez la spécification associée ## Système de design Naive UI : un composant Vue sans import obligatoire de CSS ### Un composant Vue sans import CSS obligatoire Installez naive-ui@2.45.3 dans un projet Vue 3 et importez les composants utilisés par App.vue. Naive UI fournit le style de ses composants à l’exécution ; contrairement à de nombreuses bibliothèques axées sur CSS, il ne nécessite pas d’importation globale de feuille de style du package pour ces composants. Le fichier style.css fourni contient uniquement la mise en page d’origine de l’espace de travail. NConfigProvider reçoit les paramètres régionaux anglais des composants et des dates, ainsi que la surcharge de thème commune. Le SFC complet peut être compilé avec le plug-in Vue standard de Vite. L’exemple autonome intègre le composant compilé, ce qui permet de conserver les composants natifs et le comportement de l’application sans requêtes réseau. Consultez la spécification associée ## Le thème du système de design Naive UI et les limites des données restent vérifiables ### Les limites du thème et des données restent vérifiables L’espace de travail est une petite bibliothèque de référence, et non un tableau de bord d’administration généraliste aux indicateurs inventés. Chaque ligne est un exemple de contenu, chaque statut a une signification explicite et le texte de développement fournit une raison concrète de l’examiner. Le tableau du thème et le SFC complet permettent de reproduire le style et le comportement. Lorsque vous intégrez Naive UI à un système plus vaste, coordonnez les surcharges globales communes avec celles des composants. Examinez ensemble les couleurs par défaut, de survol et d’activation de l’élément principal. Si le fournisseur propose une interface de thème prise en charge, évitez de faire du style des éléments internes générés votre première méthode de personnalisation. Consultez la spécification associée ## Exemples de composants du système de design Naive UI ### File complète de vérification Vue Configuration des colonnes de DataTable, clés de ligne stables, sélection, développement et pagination contrôlée. ``` ``` Référence du code - La sélection repose sur des identifiants de référence stables. - Les lignes archivées sont désactivées par le prédicat de la colonne de sélection. - La surcharge de thème commune est fournie par NConfigProvider. ### Mise en page d’origine de l’espace de travail Typographie de la page et espacement adaptatif autour du tableau de données natif. ``` *{box-sizing:border-box}body{margin:0;background:#f5f7f6;color:#1f2225;font-family:system-ui,sans-serif;font-size:14px;line-height:1.6}.review-desk{max-width:1120px;margin:auto;padding:32px}header{max-width:720px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#426258}.toolbar{display:flex;align-items:center;gap:16px}.toolbar .n-input{max-width:360px}.selection-note,.row-id{font-size:12px;color:#767c82}.row-id{margin-top:4px}.row-note{padding:12px 16px;max-width:65ch;color:#335547}.notice{margin-top:20px}.notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.notes section{border-top:2px solid #c8d7cf;padding:18px 0}.notes h2{font-size:18px;margin:0 0 10px}.notes p{margin:0}footer{font-size:12px;color:#767c82;margin-top:20px}@media(max-width:700px){.review-desk{padding:20px 16px}h1{font-size:28px}.toolbar{align-items:stretch;flex-direction:column}.toolbar .n-input{max-width:none}.notes{grid-template-columns:1fr}.n-card>.n-card__content{padding:16px!important}} ``` Référence du code - Naive UI injecte les styles des composants ; cette feuille de style ne contient que la mise en page de l’application. ## Configuration de l’agent IA pour le système de design Naive UI ### Point de départ de l’implémentation Vérifié avec Vue 3 et Naive UI 2.45.3. Utilise la compilation SFC standard. Tous les enregistrements de référence sont locaux. ``` // Create the project first: // npm create vite@latest naive-ui-specimen -- --template vue // cd naive-ui-specimen && npm install // In a Vite Vue 3 project: // npm install naive-ui@2.45.3 // Save the complete component above as App.vue and layout as style.css. import {createApp} from 'vue'; import App from './App.vue'; import './style.css'; createApp(App).mount('#app'); // index.html contains
. // NConfigProvider, locales, themeOverrides and component imports are in App.vue. // No Naive UI global CSS import is required for these components. // Keep the template index.html and replace its entry with the code above. // npm run dev ``` ### Un prompt pour votre projet ``` Utilisez la file de vérification des références Naive UI 2.45.3 avec NConfigProvider et les colonnes natives de NDataTable, le développement, le tri, la pagination et la sélection. Conservez les clés de référence stables lors du filtrage ou du changement de page, et veillez à ce que l’action groupée s’applique aux enregistrements sélectionnés, et non aux seules lignes visibles. Faites dépendre les états vides et les actions désactivées de la collection réelle. Conservez themeOverrides, la surcharge fournie, comme surcharge de l’application distincte des valeurs par défaut du package, ainsi que la mise en page d’origine complète. Cette file sert à la vérification locale des références, et non à l’importation de jeux de données. ``` ## Sources et portée du système de design Naive UI Naive UI 2.45.3. Les valeurs par défaut du thème et les surcharges d’origine sont identifiées séparément. Les enregistrements de vérification et les modifications groupées restent locaux. - Dépôt officiel Vue 3, styles d’exécution et personnalisation du thème. - Exemples de DataTable Modèles de tableaux de données natifs et exemples API. - Thème clair commun Palette par défaut réelle et rôles dérivés. - Géométrie commune Tailles de police, hauteurs des commandes et rayons. - Fournisseur de configuration Configuration du thème du fournisseur. ## Ressources associées au système de design Naive UI ### Nuxt UI Créez un compositeur de briefs Nuxt UI 4.11.3 complet, avec de véritables composants Vue, des références sémantiques au thème, la validation des champs et un comportement explicite pour les brouillons locaux. ### Oruga UI Un éditeur de catalogue Oruga natif avec des étiquettes de sujet consultables et supprimables, des limites de vocabulaire appliquées, les véritables tokens d’un thème facultatif et une carte dynamique reflétant les étiquettes sélectionnées. ### Pico CSS Pico CSS applique des styles sémantiques à HTML avec une échelle typographique adaptative fondée sur les rem et des variables de thème. Ses versions standard, sans classes et conditionnelle ont des périmètres d’intégration différents ; ce guide utilise la version standard pour un formulaire de préférences de lecture avec des éléments natifs dépliables et des boîtes de dialogue. - [Référence de mise en œuvre](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Source](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts) - [Source](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider) - [Consultez la spécification associée](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts) - [Consultez la spécification associée](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Consultez la spécification associée](https://github.com/tusen-ai/naive-ui) - [Consultez la spécification associée](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider) - [Référence du code](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Référence du code](https://github.com/tusen-ai/naive-ui) - [Dépôt officiel Vue 3, styles d’exécution et personnalisation du thème.](https://github.com/tusen-ai/naive-ui) - [Exemples de DataTable Modèles de tableaux de données natifs et exemples API.](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Thème clair commun Palette par défaut réelle et rôles dérivés.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts) - [Géométrie commune Tailles de police, hauteurs des commandes et rayons.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/_common.ts) - [Fournisseur de configuration Configuration du thème du fournisseur.](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider)