# Système de design Arco Design ## Système de design Arco Design — aperçu de l’interface Recherchez, sélectionnez, incluez ou supprimez des sections du rapport, puis préparez un plan local indépendant. ## Système de design Arco Design — référence de conception Source amont d’Arco React. Les constantes Less sont préfixées par @ ; les variables CSS à l’exécution utilisent --. Les espacements de l’aperçu et la disposition des panneaux sont des choix originaux pour l’application, fondés sur ces échelles. ### Dimensions et espacements | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | @size-mini | 24px | Alias de hauteur compacte du composant. | | @size-small | 28px | Hauteur réduite du composant. | | @size-default | 32px | Hauteur par défaut du composant. | | @size-large | 36px | Grande hauteur du composant. | | @spacing-1 … @spacing-6 | 2, 4, 6, 8, 10, 12px | Petits intervalles d’espacement. | | @spacing-7 … @spacing-10 | 16, 20, 24, 32px | Intervalles de regroupement. | | @border-radius-small | 2px | Petits arrondis. | | @border-radius-medium | 4px | Arrondis moyens. | | @border-radius-large | 8px | Grands arrondis. | ### Typographie et mouvement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | @font-size-body | 14px | Taille globale du texte courant. | | @line-height-base | 1.5715 | Boîte de ligne d’environ 22 px pour un texte de 14 px. | | @font-family | Inter, system and CJK fallbacks | Mentionner Inter ne le télécharge pas. | | @code-family | Consolas, Menlo | Pile orientée code. | | @transition-duration-1 / 2 / 3 | 0.1s / 0.2s / 0.3s | Trois premières constantes de durée. | | @transition-timing-function-standard | cubic-bezier(.34,.69,.1,1) | Courbe standard publiée. | ### Repères de la palette | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | @arcoblue-6 | #165dff | Repère du bleu Arco. | | @gray-1 | #f7f8fa | Neutre clair. | | @gray-2 | #f2f3f5 | Neutre pour le remplissage secondaire. | | @gray-3 | #e5e6eb | Neutre pour les bordures. | | @gray-8 | #4e5969 | Neutre pour le texte secondaire. | | @gray-10 | #1d2129 | Neutre pour le texte principal. | | @red-6 | #f53f3f | Repère du rouge ; ne présumez pas qu’il offre un contraste suffisant pour les petits caractères. | | @green-6 | #00b42a | Repère du vert. | ### Conventions des variables à l’exécution | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --color-text-1 | Primary text role | Par défaut, le préfixe des variables n’est pas arco. | | --color-fill-2 | Secondary fill role | À utiliser à la place d’un gris codé en dur dans les zones adaptées au thème. | | --border-radius-medium | Medium corner role | Exposé à l’exécution. | | body[arco-theme="dark"] | Dark theme selector | Définissez ou supprimez l’attribut du body. | | --color-bg-2 | Container surface | Sa valeur diffère en mode sombre. | ### Transmettre l’état et les événements | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | dataSource | {key:string,value:string,disabled?:boolean}[] | Des clés stables identifient les sections. | | targetKeys | string[] | Appartenance à la colonne cible. | | selectedKeys | string[] | Sélection par case à cocher, et non appartenance à la cible. | | onChange | (newTargetKeys,direction,moveKeys) | Validez le nouveau tableau d’appartenance. | | onSelectChange | (leftSelectedKeys,rightSelectedKeys) | Combinez les deux tableaux pour contrôler selectedKeys. | | filterOption | (inputValue,item) => boolean | Par défaut, la recherche utilise une correspondance partielle sensible à la casse. | | showSearch | Boolean or per-list configuration | L’exemple active la recherche dans les deux colonnes. | | oneWay | Boolean | À utiliser uniquement si le retrait de la cible n’est pas souhaité. | | simple | Boolean or retainSelectedItems options | La sélection peut déclencher le déplacement ; ce comportement n’équivaut pas à des actions de transfert explicites. | ## Arco Design 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. ## Arco Design Dans le système de design, Transfer représente l’appartenance, pas simplement une liste de cases à cocher ### Choisissez soigneusement les sections du rapport > Arco Transfer est utile lorsqu’un opérateur doit comparer deux ensembles : les sections disponibles et celles incluses dans un rapport. Cocher une ligne la marque pour une opération ultérieure ; la section n’est pas déplacée immédiatement, sauf si le mode simple est activé. L’exemple conserve l’action explicite en deux étapes. L’utilisateur sélectionne « Canaux d’acquisition », active « Inclure », puis prépare un plan. Ce plan constitue un instantané distinct : les modifications ultérieures dans l’éditeur ne modifient pas silencieusement la version préparée. Consultez la spécification associée ## Arco Design Dans le système de design, utilisez séparément les échelles de tailles et d’espacements ### Une même valeur peut désigner des dimensions différentes Les constantes de taille d’Arco augmentent par incréments de quatre pixels, tandis que l’échelle d’espacement commence par 2, 4, 6, 8, 10 et 12, avant de passer à des incréments plus grands. La taille par défaut du composant correspond à 32 px. Supposer que chaque suffixe de taille ou d’espacement désigne la même valeur entraînerait des contrôles incohérents. Dans cette composition d’origine, les deux panneaux de transfert ont des coins moyennement arrondis et la marge de page est de 24 px. Les petites cases à cocher et les séparateurs de ligne facilitent les sélections denses ; les grandes zones de la page assurent une séparation sans remplacer le contenu utile par des cartes surdimensionnées. Consultez la spécification associée ## Système de design Arco Design Conservez les rôles sémantiques dans le style de l’application ### Les variables CSS ont leurs propres conventions de nommage Le thème par défaut expose des variables telles que --color-text-1 et --color-fill-2, sans préfixe arco. Les compilations personnalisées peuvent modifier ce préfixe ; vérifiez donc le thème compilé lors de son intégration dans une application utilisant son propre espace de noms. Les variables de la palette principale contiennent des canaux RVB : il faut utiliser rgb(var(--primary-6)) plutôt que de les traiter comme une couleur hexadécimale complète. L’aperçu utilise le repère bleu Arco vérifié pour l’action principale et les lignes sélectionnées. Pour une section restreinte, une case à cocher désactivée et un texte explicatif sont préférables à une couleur rouge, qui pourrait laisser croire à une erreur que l’opérateur peut corriger. Consultez la spécification associée ## Système de design Arco Design Prévoyez les libellés denses et les noms de section longs ### Une échelle pratique pour le texte courant La taille par défaut du texte courant est de 14 px, avec un interligne de 1.5715. La famille publiée commence par Inter et comprend des polices de remplacement système et CJK. Il s’agit d’une pile CSS, et non de la preuve qu’un fichier de police Inter a été chargé. Le libellé d’une section de rapport peut être plus long que l’exemple. La version hors ligne répartit le texte des lignes sur plusieurs lignes et empile les panneaux sur les petits écrans, afin que les libellés « Inclure » et « Retirer » restent lisibles. Elle ne réduit pas l’ensemble du composant de transfert au point de rendre le texte illisible. Consultez la spécification associée ## Système de design Arco Design Deux tableaux contrôlés évitent les comportements ambigus ### L’appartenance et la sélection ont des sens différents targetKeys indique quels éléments figurent dans le rapport. selectedKeys indique quelles cases à cocher sont actuellement activées dans les deux listes. onSelectChange fournit les tableaux de gauche et de droite ; concaténez-les pour contrôler selectedKeys. onChange fournit la nouvelle appartenance, la direction et les clés déplacées. 1. Conservez une clé stable pour chaque élément source, même si son libellé change. 2. Combinez les tableaux de sélection de gauche et de droite dans onSelectChange. 3. Remplacez targetKeys par le nouveau tableau fourni par onChange. 4. Effacez la sélection temporaire après un déplacement et indiquez son effet local. Consultez la spécification associée ## Système de design Arco Design La recherche doit filtrer l’affichage sans modifier l’appartenance ### Précisez la règle de correspondance Par défaut, le filtre source compare la requête à la valeur de l’élément au moyen d’une recherche partielle sensible à la casse. L’exemple fourni remplace ce comportement par une recherche sans distinction de casse. La recherche d’une ligne sélectionnée masquée ne doit pas laisser croire qu’elle a été retirée du rapport. Pour cette petite liste, la pagination et la virtualisation apportent peu. Arco propose ces options pour les grands volumes de données, mais l’application reste responsable des clés stables, de l’ensemble complet des éléments cibles et des règles de sélection dans les vues filtrées. - Les listes des éléments disponibles et inclus disposent chacune de leur propre champ de recherche. - Le message indiquant qu’aucun résultat ne correspond décrit la vue filtrée, pas un jeu de données vide. - La préparation d’un plan utilise targetKeys, et non les seules lignes actuellement visibles. Consultez la spécification associée ## Système de design Arco Design Le mode sombre modifie les surfaces autant que le texte ### Définissez le sélecteur publié Arco publie ses règles de remplacement pour le mode sombre sous la balise du thème, avec arco-theme="dark". Dans la compilation par défaut, cette balise est body. Supprimer cet attribut rétablit les règles normales ; ajouter une classe sans rapport appelée dark ne revient pas au même API. Pour ajouter un aperçu sombre, adaptez ensemble le conteneur et les rôles du texte. L’exemple hors ligne reste volontairement clair, tandis que l’exemple natif peut utiliser le thème CSS déjà importé. N’inversez pas les vignettes de rapport ni les illustrations au moyen d’un filtre global. ``` document.body.setAttribute('arco-theme', 'dark'); // Restore default: document.body.removeAttribute('arco-theme'); ``` Référence du code Consultez la spécification associée ## Système de design Arco Design Package, feuille de style et limites réelles ### Un plan de rapport n’exporte pas les données du rapport Le package React est @arco-design/web-react et sa feuille de style complète CSS est dist/css/arco.css. L’exemple importe Transfer et Button depuis la racine du package et utilise un état contrôlé, plutôt que d’inventer une API de création de rapports. L’aperçu autonome interprète le comportement de sélection à l’aide de cases à cocher et de boutons natifs, afin de fonctionner hors ligne. Il valide la logique d’interaction et la composition adaptative ; il ne prouve pas que le package natif a été compilé dans un projet utilisateur. Un exportateur destiné à la production nécessiterait un backend et des vérifications des autorisations allant au-delà d’une ligne d’exemple désactivée. Consultez la spécification associée ## Arco Design Exemples de composants du système de design ### Exemple interactif autonome complet Enregistrez le document complet sous le nom index.html, puis ouvrez-le dans un navigateur. Interprétation autonome HTML du comportement d’Arco Transfer et repères de thème vérifiés ; exemple natif React fourni séparément. ``` Arco report section transfer
Report studio

Choose report sections

Build an outline from the sections available to this workspace.

Available sections

Included in report

Select a section, then choose Include or Remove.

Prepared outline

No outline prepared yet.

HTML interpretation of Arco Transfer · Original sample sections · Local outline only, no analytics data exported

``` Référence du code - La section restreinte du rapport ne peut pas être déplacée. Les lignes sélectionnées et les sections incluses correspondent à des états distincts, conformément à la distinction expliquée pour Transfer natif. ### Transfert contrôlé des sections du rapport Transfer gère les éléments présents dans les listes source et cible, tandis que l’état de l’application stocke un plan préparé séparément. Une ligne restreinte illustre une option désactivée sans prétendre imposer une autorisation côté serveur. ``` // npm install @arco-design/web-react react react-dom import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {Transfer,Button} from '@arco-design/web-react'; import '@arco-design/web-react/dist/css/arco.css'; const data = [ {key:'overview',value:'Executive overview'}, {key:'traffic',value:'Acquisition channels'}, {key:'retention',value:'Retention cohorts'}, {key:'revenue',value:'Revenue breakdown'}, {key:'raw',value:'Raw event export (restricted)',disabled:true} ]; function ReportBuilder(){ const [target,setTarget]=useState(['overview']); const [selected,setSelected]=useState([]); const [snapshot,setSnapshot]=useState([]); const [status,setStatus]=useState('Choose sections for a local report.'); return

Report sections

item.value.toLowerCase().includes(query.toLowerCase())} onSelectChange={(left,right)=>setSelected([...left,...right])} onChange={(keys,direction,moved)=>{ setTarget(keys);setSelected([]); setStatus(`${moved.length} section(s) moved to ${direction}. Draft only.`); }} />

{status}

Prepared outline

{snapshot.length ?
    {snapshot.map(key=>
  1. {data.find(item=>item.key===key).value}
    2. )}
:

No outline prepared yet.

}
; } createRoot(document.getElementById('root')).render(); ``` Référence du code - La sélection des cases à cocher et l’appartenance au rapport sont gérées dans des tableaux distincts. - Le filtre personnalisé ne tient pas compte de la casse. - Les données d’exemple sont originales ; aucune donnée analytique n’est chargée ni exportée. La compilation native reste une vérification d’intégration distincte. ## Arco Design Configuration de l’agent du système de design ### Point de départ de l’implémentation Importez une seule fois la feuille de style complète arco.css et montez l’exemple React dans un élément racine. Ne mélangez pas ce package React avec les imports d’Arco Vue. ``` npm install @arco-design/web-react react react-dom ``` ### Un prompt pour votre projet ``` Utilisez Arco React Transfer avec des clés stables dans dataSource, ainsi que targetKeys et selectedKeys contrôlés séparément. Fournissez un filtre insensible à la casse, des actions explicites Inclure/Retirer et un instantané du plan préparé. Respectez la syntaxe des variables CSS d’Arco et indiquez clairement qu’il s’agit d’une interprétation hors ligne. ``` ## Arco Design Sources et périmètre du système de design Référence OpenDesign indépendante. Données de rapport originales et aperçu local uniquement ; les lignes désactivées ne constituent pas une limite d’autorisation. - Package React Installation et entrée de la feuille de style. - Jetons globaux Dimensions, espacements et correspondances sémantiques. - Thème par défaut Typographie et animations. - Palette Repères de couleur vérifiés. - Variables CSS Noms d’exécution et sélecteur sombre. - Transfer API État contrôlé et signatures des fonctions de rappel. ## Arco Design Ressources associées au système de design ### Atlassian système de design Créez un tableau de planification des tickets avec les jetons sémantiques Atlassian, une échelle d’espacement de huit pixels, les véritables API de Button, Lozenge et Toggle, ainsi que la configuration de style Compiled requise. Consultez un ticket, filtrez le tableau et déplacez un élément de travail local sans confondre sélection et statut. ### AWS Cloudscape Un guide de configuration Cloudscape avec de véritables jetons de mise à jour visuelle, un espacement adapté à la densité, des API de formulaire contrôlées et un assistant fonctionnel en deux étapes pour la création de ressources. ### Backbase système de design Créez un parcours de validation bancaire aux couleurs de la marque avec les modules Angular de Backbase, l’export du thème sémantique et des états de révision explicites. Comparez les API Web aux dimensions natives documentées séparément. - [Référence de mise en œuvre](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Source](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Source](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Source](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less) - [Source](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Source](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Consultez la spécification associée](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Consultez la spécification associée](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Consultez la spécification associée](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Consultez la spécification associée](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Référence du code](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Consultez la spécification associée](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md) - [Référence du code](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Package React Installation et entrée de la feuille de style.](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md) - [Jetons globaux Dimensions, espacements et correspondances sémantiques.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Thème par défaut Typographie et animations.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Palette Repères de couleur vérifiés.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less) - [Variables CSS Noms d’exécution et sélecteur sombre.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Transfer API État contrôlé et signatures des fonctions de rappel.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)