# Système de design TDesign
## Aperçu de l’interface du système de design TDesign
Validez une règle, examinez son effet local et supprimez-la. Aucune règle n’est déployée.
## Référence de conception du système de design TDesign
TDesign React avec le thème public actuel de la branche develop et les sources des composants. Les valeurs du thème sont des instantanés des sources, et non une garantie de compatibilité avec une version précise du package. L’aperçu autonome est une interprétation HTML ; l’exemple React utilise le package réel API.
### Rôles du thème clair
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --td-brand-color | #0052d9 | Action principale, définie à partir du niveau 7 de la marque. |
| --td-brand-color-hover | #366ef4 | Survol de l’action principale. |
| --td-brand-color-active | #003cab | Action enfoncée. |
| --td-brand-color-light | #f2f3ff | Surface sélectionnée discrète. |
| --td-bg-color-page | #eee | Zone de fond extérieure. |
| --td-bg-color-container | #fff | Panneaux de l’éditeur et du tableau. |
| --td-text-color-primary | rgba(0,0,0,.9) | Texte principal. |
| --td-text-color-secondary | rgba(0,0,0,.6) | Texte secondaire. |
| --td-border-level-1-color | #e8e8e8 | Séparateurs. |
| --td-border-level-2-color | #ddd | Bordures des contrôles. |
| --td-error-color | #d54941 | Rôle d’erreur de champ. |
| --td-success-color | #2ba471 | Rôle positif ; ne déduisez pas le contraste de la couleur seule. |
### Rôles typographiques
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --td-font-family | PingFang SC, Microsoft YaHei, Arial Regular | Pile de polices orientée système ; cette déclaration ne télécharge aucune police. |
| --td-font-body-small | 12px / 20px | Libellés secondaires compacts. |
| --td-font-body-medium | 14px / 22px | Texte courant de la console. |
| --td-font-body-large | 16px / 24px | Texte de lecture plus grand. |
| --td-font-title-medium | 600 16px / 24px | Titre du panneau. |
| --td-font-headline-small | 600 24px / 32px | Titre de page. |
| --td-font-display-medium | 600 48px / 56px | Rôle d’affichage, inutile dans un éditeur de règles. |
### Tailles et espacements sémantiques
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --td-size-1 … --td-size-8 | 2, 4, 6, 8, 12, 16, 20, 24px | Échelle de base non linéaire. |
| --td-size-9 … --td-size-16 | 28, 32, 36, 40, 48, 56, 64, 72px | Valeurs d’échelle plus grandes. |
| --td-comp-size-m | 32px | Alias de hauteur moyenne pour les composants. |
| --td-comp-paddingLR-m | 12px | Alias de marge intérieure horizontale moyenne. |
| --td-comp-paddingTB-l | 16px | Alias de marge intérieure verticale large. |
| --td-comp-margin-xl | 20px | L’alias d’espacement diffère de celui de la marge intérieure xl. |
| --td-pop-padding-xxl | 16px | Alias de marge intérieure des fenêtres contextuelles. |
### Traitement des angles
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --td-radius-small | 2px | Petit rayon. |
| --td-radius-default | 3px | Rayon par défaut. |
| --td-radius-medium | 6px | Rayon moyen. |
| --td-radius-large | 9px | Grand rayon. |
| --td-radius-extraLarge | 12px | Très grand rayon. |
| --td-radius-round | 999px | Style en forme de pilule. |
| --td-radius-circle | 50% | Un traitement circulaire exige des dimensions égales. |
### Contrats de Form et Table
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| Form.useForm() | [form] | Transmettez l’instance à Form. |
| FormItem name | Registered field key | Doit correspondre aux champs soumis et aux erreurs définies par setFields. |
| Form onSubmit | event.validateResult === true | Ne mettez à jour l’application qu’après validation réussie. |
| form.setFields | name + status + validateMessage | Définissez une erreur de champ explicite. |
| FormItem for | Input association | L’exemple officiel de Switch utilise for="status". |
### Configuration du tableau de données
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| rowKey | Stable unique data property | L’exemple génère un id une seule fois par règle. |
| columns[].colKey | Data key or custom cell key | Utilisez une colonne dédiée aux actions. |
| columns[].cell | ({row,col,rowIndex,colIndex}) | Affichez des contrôles propres à chaque ligne. |
| tableLayout | fixed by default; auto available | Définissez la largeur des colonnes en tenant compte des chemins de ressources longs. |
| disableDataPage | false by default | Table gère la pagination locale, sauf si celle-ci est explicitement désactivée. |
## Guide complet du système de design TDesign
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.
## Système de design TDesign : un système de console avec des implémentations distinctes
### Choisir l’implémentation React
> TDesign propose des implémentations distinctes selon le framework. Cet exemple utilise délibérément tdesign-react, et non un package Vue au nom similaire ni la bibliothèque de composants mobiles. La feuille de style globale fait partie de l’intégration : importer un composant seul ne fournit pas les règles de mise en page et de thème présentées ici.
L’unité fonctionnelle est un Form enregistré à côté d’un Table structuré. Le nom, le chemin de ressource et l’état activé sont des champs de données ; la suppression d’une ligne est une action du tableau. Affirmer à l’échelle de la page qu’un API est désormais protégé serait inexact, car cet exemple ne comporte aucun serveur d’autorisation.
Consultez la spécification associée
## Système de design TDesign : couleurs sémantiques et véritables différences entre les modes clair et sombre
### Le niveau 7 de la marque n’est pas universel d’un mode à l’autre
Dans le thème clair, le rôle de marque correspond au niveau 7, tandis que dans le thème sombre, il correspond au niveau 8. Dans le CSS de l’application, conservez la variable sémantique au lieu de copier le bleu clair dans chaque composant. Le fond sombre est #181818 et son conteneur est #242424 ; ces rôles correspondent à des surfaces distinctes.
L’aperçu reste volontairement en mode clair. Dans une implémentation native, définissez theme-mode="dark" sur la racine du document pour appliquer les règles sombres publiées ; appliquez séparément toute illustration personnalisée de politique plutôt que de recolorer chaque image à l’aide d’un filtre.
```
document.documentElement.setAttribute('theme-mode', 'dark');
// Restore the published light theme:
document.documentElement.setAttribute('theme-mode', 'light');
```
Référence du code
Consultez la spécification associée
## Système de design TDesign : une typographie dense sans perdre le sens des champs
### Utiliser les rôles typographiques complets
Le style moyen du texte courant définit une taille de 14px et une hauteur de ligne de 22px. Le titre moyen ajoute une graisse de 600 au format 16/24 ; le petit titre utilise le format 24/32. Ces styles remplissent des fonctions distinctes : les données du tableau, les libellés des panneaux et le titre de la page ne doivent pas tous devenir du texte courant en gras.
Les noms de familles de polices utilisés dans les sources désignent des polices système disponibles. Ajoutez une solution de repli sans empattement adaptée à la typographie de l’application et vérifiez simultanément les chaînes chinoises et latines. Un chemin de ressource peut utiliser le style à chasse fixe de l’application sans pour autant être présenté comme un jeton typographique de TDesign.
Consultez la spécification associée
## Système de design TDesign : associer les alias de taille à la zone réelle
### Les noms des espacements ne sont pas interchangeables
La marge intérieure horizontale moyenne d’un composant correspond à 12px, tandis que la marge extérieure extra-large d’un composant correspond à 20px. Ne faites pas correspondre tous les suffixes sémantiques à une échelle unique supposée. L’éditeur utilise une marge extérieure de 24px et un espacement plus réduit entre les champs pour garder les contrôles groupés.
À faible largeur, l’aperçu autonome place l’éditeur au-dessus de la liste des règles. Ce point de rupture relève d’un choix de l’application et n’est pas garanti par le framework. Les chemins API longs passent à la ligne dans la liste au lieu d’élargir toute la page au-delà de la fenêtre d’affichage.
Consultez la spécification associée
## Système de design TDesign : enregistrer, valider, puis ajouter une règle
### Associer l’erreur du champ à sa clé
L’instance Form est transmise au composant Form ; chaque FormItem fournit le nom du champ. Le gestionnaire de soumission vérifie d’abord validateResult, puis récupère les champs collectés. Les vérifications de l’application normalisent les chaînes et rejettent les chemins en double, afin que deux libellés ne puissent pas configurer silencieusement le même point de terminaison d’exemple.
1. Enregistrez le nom, le chemin et l’état activé à l’aide des clés FormItem.
2. Avant d’ajouter des données, rejetez les noms manquants et les chemins qui ne commencent pas par /.
3. Utilisez setFields avec la même clé de champ pour afficher l’erreur tout en conservant les valeurs saisies afin de pouvoir les corriger.
4. Ajoutez un id stable uniquement après la réussite des vérifications ; indiquez que le résultat est local.
Consultez la spécification associée
## Système de design TDesign : préserver l’identité des lignes lors des modifications et de la suppression
### Séparer les données affichées des cellules d’action
Le tableau récupère son champ id au moyen de rowKey. La colonne d’état activé convertit une valeur booléenne en texte lisible au lieu d’afficher un point de couleur sans libellé. La colonne d’action affiche un bouton avec le nom de la ligne, évitant ainsi que les technologies d’assistance rencontrent trois commandes « Supprimer » impossibles à distinguer.
Pour un petit ensemble de règles, le tableau complet peut rester sans pagination. Si une pagination est ajoutée, distinguez le découpage local intégré des données pilotées par le serveur avant de définir disableDataPage. Réutiliser les positions du tableau comme identifiants n’est pas sûr, car leur ordre change lorsqu’une ligne est supprimée.
- name est le libellé destiné à l’utilisateur ; path est l’identifiant de la ressource.
- enabled est une donnée de l’application, affichée avec un libellé explicite.
- actions est une colonne personnalisée qui n’a pas besoin d’une propriété stockée correspondante.
Consultez la spécification associée
## Système de design TDesign : l’état local n’est pas une politique déployée
### Tester l’éditeur de politiques comme un éditeur
L’aperçu hors ligne utilise des contrôles natifs avec libellés, une région de statut dynamique et un focus visible au clavier. Si le nom est vide ou si le chemin existe déjà, l’envoi doit laisser le formulaire ouvert et signaler précisément le problème. La suppression d’une règle ne modifie que la liste locale.
Un service de production nécessite toujours une validation côté serveur, une autorisation, une gestion des conflits, une journalisation d’audit et une procédure de récupération après un refus d’enregistrement. Ces aspects doivent être conçus autour de cet éditeur, et non simulés par une notification de réussite prétendant que la politique a été déployée.
Consultez la spécification associée
## Système de design TDesign : intégrer le package et présenter l’exemple fidèlement
### Utiliser l’exemple natif dans le code de l’application
L’exemple React importe les composants réels TDesign Form, Input, Switch, Button et Table. L’aperçu intégré est une interprétation autonome en HTML/CSS, conçue pour fonctionner sans téléchargement de package ni accès au réseau. Ses vérifications d’interaction ne garantissent pas que toutes les dépendances de la bibliothèque ont été compilées dans votre projet.
Les fichiers de thème liés sont les sources de développement actuelles. Vérifiez la version installée dans un fichier de verrouillage et comparez ses jetons avant de copier des personnalisations. Cette page documente délibérément les noms des rôles et la provenance des sources afin de pouvoir évaluer les changements de thème ultérieurs, plutôt que de les masquer derrière une palette illustrative.
Consultez la spécification associée
## Exemples de composants du système de design TDesign
### Exemple interactif autonome complet
Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation autonome en HTML/CSS des jetons clairs de TDesign et de la composition Form/Table ; il ne s’agit pas de l’environnement d’exécution natif de React.
```
TDesign API rule editorT / ConsoleLocal policy workspace
API access rules
Define which resources belong in your draft policy.
Create a rule
This editor does not connect to an API gateway.
Policy rules
Client
→
Policy draft
→
Resource
Two example rules are loaded locally.
HTML interpretation of TDesign light theme roles · Native React integration is provided in the guide.
```
Référence du code
- Les règles n’existent que dans la collection affichée en exemple. L’enregistrement natif de Form, les fonctions de rappel de validation et le rendu de Table sont présentés séparément dans React.
### Éditeur de règles avec champs enregistrés et suppression par ligne
Form collecte le nom, le chemin de la ressource et son état d’activation. La validation de l’application détecte les noms vides, les chemins mal formés et les ressources en double avant d’ajouter une ligne à la Table locale.
```
// npm install tdesign-react react react-dom
// main.jsx — a client-side React entry point
import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Button, Form, Input, Switch, Table} from 'tdesign-react';
import 'tdesign-react/es/style/index.css';
const {FormItem} = Form;
function AccessRules() {
const [form] = Form.useForm();
const [rules, setRules] = useState([]);
const [notice, setNotice] = useState('No local rules yet.');
const addRule = ({validateResult, fields}) => {
if (validateResult !== true) return;
const name = String(fields.name || '').trim();
const path = String(fields.path || '').trim();
const invalid = !name ? ['name','Enter a rule name.'] :
!path.startsWith('/') ? ['path','Start the resource path with /.'] :
rules.some(rule => rule.path === path) ? ['path','This path already has a rule.'] : null;
if (invalid) {
form.setFields([{name:invalid[0],status:'error',validateMessage:{type:'error',message:invalid[1]}}]);
setNotice(invalid[1]); return;
}
setRules(previous => [...previous, {id:crypto.randomUUID(),name,path,enabled:!!fields.enabled}]);
setNotice(`Added ${name} to this browser session. No access policy was deployed.`);
};
const columns = [
{colKey:'name', title:'Rule'}, {colKey:'path', title:'Resource'},
{colKey:'enabled', title:'State', cell:({row}) => row.enabled ? 'Enabled' : 'Disabled'},
{colKey:'actions', title:'Action', cell:({row}) => }
];
return
API access rules
{notice}
;
}
createRoot(document.getElementById('root')).render();
```
Référence du code
- Les contrats des colonnes de Table et de rowKey sont détaillés dans la spécification ci-dessus.
- Cet exemple ne modifie que l’état local de React ; un libellé « activé » ne constitue pas une décision d’autorisation.
- L’exemple d’installation/API a été vérifié à partir des sources officielles ; la compilation du package est distincte de l’aperçu hors ligne testé.
## Configuration de l’agent pour le système de design TDesign
### Point de départ de l’implémentation
Utilisez l’exemple complet du point d’entrée client ci-dessus avec un élément racine HTML. Importez tdesign-react/es/style/index.css une seule fois. Verrouillez les versions et effectuez des tests avec votre outil de build avant la mise en production.
```
npm install tdesign-react react react-dom
```
### Un prompt pour votre projet
```
Utilisez Form et Table de tdesign-react pour créer un éditeur de règles API. Préservez les rôles sémantiques --td-*, les clés de champs enregistrées, les identifiants de ligne stables, une validation explicite et des messages fidèles à l’état local.
```
## Sources et portée du système de design TDesign
Référence indépendante de OpenDesign. L’aperçu est une interprétation hors ligne, et non un logiciel Tencent ni un service d’autorisation déployé.
- TDesign React Installation du package et famille d’implémentations.
- Thème clair Correspondances des couleurs claires sémantiques.
- Thème sombre Sélecteur de racine sombre et correspondances des rôles.
- Typographie Définitions des polices, des tailles et des hauteurs de ligne.
- Jetons de taille Alias d’espacement de base et sémantiques.
- Rayons Valeurs d’arrondi publiées.
- Exemple Form API d’enregistrement, d’envoi et d’erreur de champ.
- Types de Table Contrats d’identification des lignes et de rendu des colonnes.
## Ressources associées au système de design TDesign
### Thumbtack Thumbprint
Créez une interface de découverte de services avec les primitives documentées de Thumbprint v2 : des cartes de prestataires compactes, des détails de comparaison faciles à lire, des états de sélection clairs et une présélection toujours accessible.
### Twilio Paste
Rédigez une notification avec le thème et les conventions de boutons de Paste, une échelle d’espacement vérifiée et une distinction claire entre la modification, la révision et l’envoi effectif d’un message.
### Visa Product système de design
Utilisez Visa Nova CSS pour créer un choix clair de format de relevé, avec des boutons radio natifs, un en-tête dans une couleur différente et un récapitulatif de révision. Examinez les valeurs exactes du thème 1.6.5, l’espacement évolutif et l’intégration complète de la feuille de style.
- [Référence de mise en œuvre](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Source](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_light.less)
- [Source](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Source](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Source](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_radius.less)
- [Source](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Source](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)
- [Consultez la spécification associée](https://github.com/Tencent/tdesign-react)
- [Référence du code](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Consultez la spécification associée](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Consultez la spécification associée](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Consultez la spécification associée](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Consultez la spécification associée](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Consultez la spécification associée](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)
- [Référence du code](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [TDesign React Installation du package et famille d’implémentations.](https://github.com/Tencent/tdesign-react)
- [Thème clair Correspondances des couleurs claires sémantiques.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_light.less)
- [Thème sombre Sélecteur de racine sombre et correspondances des rôles.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Typographie Définitions des polices, des tailles et des hauteurs de ligne.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Jetons de taille Alias d’espacement de base et sémantiques.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Rayons Valeurs d’arrondi publiées.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_radius.less)
- [Exemple Form API d’enregistrement, d’envoi et d’erreur de champ.](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Types de Table Contrats d’identification des lignes et de rendu des colonnes.](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)