# Sistema de diseño TDesign
## Vista previa de la interfaz del sistema de diseño TDesign
Valida una regla, revisa su efecto local y elimínala. No se implementa ninguna política.
## Referencia de diseño del sistema de diseño TDesign
TDesign React con el tema actual de la rama pública develop y las fuentes de los componentes. Los valores del tema son instantáneas de las fuentes, no una garantía de compatibilidad con una versión fija del paquete. La vista previa independiente es una interpretación en HTML; el ejemplo de React usa el paquete real API.
### Roles del tema claro
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --td-brand-color | #0052d9 | Acción principal, resuelta a partir del nivel 7 de la marca. |
| --td-brand-color-hover | #366ef4 | Estado al pasar el cursor de la acción principal. |
| --td-brand-color-active | #003cab | Acción al presionar. |
| --td-brand-color-light | #f2f3ff | Superficie seleccionada sutil. |
| --td-bg-color-page | #eee | Lienzo exterior. |
| --td-bg-color-container | #fff | Paneles del editor y de la tabla. |
| --td-text-color-primary | rgba(0,0,0,.9) | Texto principal. |
| --td-text-color-secondary | rgba(0,0,0,.6) | Texto complementario. |
| --td-border-level-1-color | #e8e8e8 | Separadores. |
| --td-border-level-2-color | #ddd | Bordes de controles. |
| --td-error-color | #d54941 | Rol de error del campo. |
| --td-success-color | #2ba471 | Rol positivo; no deduzcas el contraste solo a partir del color. |
### Roles tipográficos
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --td-font-family | PingFang SC, Microsoft YaHei, Arial Regular | Pila orientada al sistema; esta declaración no descarga las fuentes. |
| --td-font-body-small | 12px / 20px | Etiquetas secundarias compactas. |
| --td-font-body-medium | 14px / 22px | Texto del cuerpo de la consola. |
| --td-font-body-large | 16px / 24px | Texto de lectura más grande. |
| --td-font-title-medium | 600 16px / 24px | Título del panel. |
| --td-font-headline-small | 600 24px / 32px | Título de página. |
| --td-font-display-medium | 600 48px / 56px | Rol de presentación, no necesario en un editor de políticas. |
### Tamaño y espaciado semántico
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --td-size-1 … --td-size-8 | 2, 4, 6, 8, 12, 16, 20, 24px | Escala base no lineal. |
| --td-size-9 … --td-size-16 | 28, 32, 36, 40, 48, 56, 64, 72px | Valores de escala más grandes. |
| --td-comp-size-m | 32px | Alias de altura media del componente. |
| --td-comp-paddingLR-m | 12px | Alias de relleno horizontal mediano. |
| --td-comp-paddingTB-l | 16px | Alias de relleno vertical grande. |
| --td-comp-margin-xl | 20px | El alias de espaciado es distinto de padding xl. |
| --td-pop-padding-xxl | 16px | Alias de relleno de ventana emergente. |
### Estilo de esquinas
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --td-radius-small | 2px | Radio pequeño. |
| --td-radius-default | 3px | Radio predeterminado. |
| --td-radius-medium | 6px | Radio mediano. |
| --td-radius-large | 9px | Radio grande. |
| --td-radius-extraLarge | 12px | Radio extragrande. |
| --td-radius-round | 999px | Estilo de píldora. |
| --td-radius-circle | 50% | La forma circular requiere dimensiones iguales. |
### Contratos de formularios y tablas
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Form.useForm() | [form] | Pasa la instancia a Form. |
| FormItem name | Registered field key | Debe coincidir con los campos enviados y con los errores de setFields. |
| Form onSubmit | event.validateResult === true | Realiza las actualizaciones de la aplicación solo si la validación se completa correctamente. |
| form.setFields | name + status + validateMessage | Establece un error concreto para el campo. |
| FormItem for | Input association | El ejemplo oficial de Switch usa for="status". |
### Configuración de la tabla de datos
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| rowKey | Stable unique data property | El ejemplo genera un id por regla. |
| columns[].colKey | Data key or custom cell key | Usa una columna específica para las acciones. |
| columns[].cell | ({row,col,rowIndex,colIndex}) | Representa controles específicos para cada fila. |
| tableLayout | fixed by default; auto available | Decide el ancho de las columnas para las rutas de recursos largas. |
| disableDataPage | false by default | Table gestiona la paginación local, salvo que se desactive explícitamente. |
## Guía completa del sistema de diseño de TDesign
Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.
Orientación completa, un punto de partida para la implementación y enlaces al código fuente.
## Sistema de diseño TDesign: un sistema de consola con familias de implementación explícitas
### Elige la implementación de React
> TDesign tiene implementaciones independientes para cada framework. Este ejemplo usa tdesign-react intencionadamente, no un paquete de Vue con un nombre similar ni el conjunto de componentes para móviles. La hoja de estilos global forma parte de la integración: importar un componente por sí solo no proporciona el diseño ni las reglas del tema que se muestran.
La unidad práctica es un Form registrado junto a una Table estructurada. El nombre, la ruta del recurso y el estado habilitado son campos de datos; eliminar una fila es una acción de tabla. Afirmar que ahora se protege un API en toda la página sería falso, ya que este ejemplo no tiene un backend de autorización.
Consulta la especificación complementaria
## Sistema de diseño de TDesign: colores semánticos con diferencias reales entre modos claro y oscuro
### El paso siete de marca no es universal en todos los modos
El tema claro resuelve el rol de marca mediante el paso siete, mientras que el tema oscuro lo hace mediante el paso ocho. Conserva la variable semántica en el CSS de la aplicación en lugar de copiar el azul claro en cada componente. El fondo oscuro es #181818 y su contenedor es #242424; corresponden a superficies distintas.
La vista previa permanece intencionadamente en modo claro. En una implementación nativa, establece theme-mode="dark" en el elemento raíz del documento para seleccionar las reglas oscuras publicadas; aplica cualquier política de ilustración personalizada por separado en lugar de recolorear todas las imágenes con un filtro.
```
document.documentElement.setAttribute('theme-mode', 'dark');
// Restore the published light theme:
document.documentElement.setAttribute('theme-mode', 'light');
```
Referencia de código
Consulta la especificación complementaria
## Sistema de diseño de TDesign: tipografía densa sin perder el significado de los campos
### Usa los roles tipográficos completos
El estilo de texto mediano para el cuerpo usa un tamaño de 14px y una altura de línea de 22px. El estilo de título mediano añade un peso de 600 con tamaño y altura de línea de 16/24; el encabezado pequeño usa 24/32. Son funciones distintas: los datos de la tabla, las etiquetas del panel y el título de la página no deberían convertirse todos en texto de cuerpo en negrita.
La familia tipográfica de origen especifica nombres de fuentes del sistema. Añade una alternativa sans-serif adecuada a la tipografía propia de la aplicación y verifica al mismo tiempo los textos en chino y en caracteres latinos. Puedes usar un estilo monoespaciado de la aplicación para una ruta de recurso sin afirmar que sea un token tipográfico de TDesign.
Consulta la especificación complementaria
## Sistema de diseño de TDesign: asigna los alias de tamaño a la región correspondiente
### Los nombres de espaciado no son intercambiables
El relleno horizontal mediano del componente se resuelve en 12px, pero el margen extragrande del componente se resuelve en 20px. No conviertas todos los sufijos semánticos usando una única escala supuesta. El editor usa un relleno exterior de 24px y menos espacio entre campos para mantener agrupados los controles.
En la vista previa independiente, el editor se muestra encima de la lista de reglas en pantallas estrechas. Ese punto de ruptura es una decisión de la aplicación, no una garantía del framework. Las rutas largas de API se ajustan en la lista en lugar de ensanchar toda la página más allá de la ventana gráfica.
Consulta la especificación complementaria
## Sistema de diseño de TDesign: registra, valida y luego añade una regla
### Asocia el error del campo a su clave
La instancia de Form se pasa al componente Form; cada FormItem proporciona el nombre del campo. El controlador de envío comprueba primero validateResult y luego lee los campos recopilados. Las comprobaciones de la aplicación normalizan las cadenas y rechazan las rutas duplicadas, para que dos etiquetas no puedan configurar inadvertidamente el mismo endpoint de ejemplo.
1. Registra name, path y enabled mediante las claves de FormItem.
2. Rechaza los nombres vacíos y las rutas que no empiezan por / antes de añadir los datos.
3. Usa setFields con la misma clave del campo para mostrar el error y mantener los valores introducidos disponibles para corregirlos.
4. Añade un id estable solo después de superar las comprobaciones; indica que el resultado es local.
Consulta la especificación complementaria
## Sistema de diseño de TDesign: conserva la identidad de las filas al editarlas y eliminarlas
### Separa los datos visibles de las celdas de acción
La tabla obtiene el campo id mediante rowKey. La columna enabled convierte un valor Boolean en texto legible, en lugar de mostrar un punto de color sin etiqueta. La columna de acciones representa un botón con el nombre de la fila, para evitar que las tecnologías de asistencia encuentren tres controles Remove indistinguibles.
En un conjunto pequeño de reglas, la tabla completa puede mostrarse sin paginación. Si añades paginación, distingue el fragmentado local integrado de los datos gestionados por el servidor antes de establecer disableDataPage. Reutilizar las posiciones de una matriz como identificadores no es seguro, ya que al eliminar elementos cambia su orden.
- name es la etiqueta visible para las personas; path identifica el recurso.
- enabled es un dato de la aplicación que se representa con texto explícito.
- actions es una columna personalizada y no necesita una propiedad almacenada equivalente.
Consulta la especificación complementaria
## Sistema de diseño TDesign: el estado local no es una política implementada
### Prueba el editor de políticas como un editor
La vista previa sin conexión usa controles nativos con etiquetas, una región de estado dinámico y un foco visible al navegar con el teclado. Al enviar un nombre vacío o una ruta duplicada, el formulario debe permanecer abierto e indicar el problema concreto. Eliminar una regla solo modifica la lista local.
Un servicio de producción sigue necesitando validación en el servidor, autorización, gestión de conflictos, registro de auditoría y recuperación ante un guardado rechazado. Estas funciones deben diseñarse en torno al editor, no simularse con una notificación de éxito que afirme que se ha implementado la política.
Consulta la especificación complementaria
## Sistema de diseño de TDesign: integra el paquete y presenta el ejemplo con honestidad
### Usa el ejemplo nativo para el código de la aplicación
El ejemplo de React importa componentes reales de TDesign: Form, Input, Switch, Button y Table. La vista previa integrada es una interpretación autónoma de HTML/CSS, para que funcione sin descargar paquetes ni acceder a la red. Sus comprobaciones de interacción no demuestran que se hayan compilado todas las dependencias de la biblioteca en tu proyecto.
Los archivos de tema enlazados son fuentes de desarrollo actuales. Consulta la versión instalada en un archivo de bloqueo y compara sus tokens antes de copiar personalizaciones. Esta página documenta intencionadamente los nombres de roles y la procedencia de las fuentes, para poder evaluar un cambio de tema posterior en lugar de ocultarlo tras una paleta ilustrativa.
Consulta la especificación complementaria
## Ejemplos de componentes del sistema de diseño TDesign
### Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente de HTML/CSS de los tokens claros de TDesign y de la composición de Form/Table; no es el entorno de ejecución nativo 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.
```
Referencia de código
- Las reglas solo existen en la colección de muestras visible. El registro nativo de Form, las funciones de validación y la representación de Table se muestran por separado en React.
### Editor de reglas registradas y eliminación específica por fila
Form recopila el nombre, la ruta del recurso y el estado de activación. La validación de la aplicación detecta nombres vacíos, rutas con formato incorrecto y recursos duplicados antes de añadir una fila local a Table.
```
// 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();
```
Referencia de código
- Los contratos de columnas y rowKey de Table están enlazados en la especificación anterior.
- Este ejemplo solo modifica el estado local de React; una etiqueta de activación no constituye una decisión de autorización.
- El ejemplo de instalación/API se verificó con la fuente oficial; la compilación del paquete es independiente de la vista previa sin conexión probada.
## Configuración del agente de IA del sistema de diseño TDesign
### Punto de partida para la implementación
Usa el ejemplo completo de entrada del cliente anterior con un elemento raíz HTML. Importa tdesign-react/es/style/index.css una sola vez. Fija las versiones y prueba con tu herramienta de compilación antes de publicar.
```
npm install tdesign-react react react-dom
```
### Una instrucción para tu proyecto
```
Usa Form y Table de tdesign-react para crear un editor de reglas API. Conserva los roles semánticos --td-*, las claves de campo registradas, los identificadores de fila estables, la validación explícita y los mensajes veraces sobre el estado local.
```
## Fuentes y alcance del sistema de diseño TDesign
Referencia independiente de OpenDesign. La vista previa es una interpretación sin conexión, no es software de Tencent ni un servicio de autorización desplegado.
- TDesign React Instalación del paquete y familia de implementación.
- Tema claro Asignaciones semánticas de colores claros.
- Tema oscuro Selector de raíz oscuro y asignaciones de roles.
- Tipografía Definiciones de fuentes, tamaños e interlineado.
- Tokens de tamaño Alias de espaciado base y semántico.
- Radios Valores de esquinas publicados.
- Ejemplo de Form API de registro, envío y errores de campo.
- Tipos de Table Contratos de identidad de fila y representación de columnas.
## Recursos relacionados con el sistema de diseño TDesign
### Thumbtack Thumbprint
Crea una interfaz de descubrimiento de servicios con las primitivas documentadas de Thumbprint v2: tarjetas compactas de proveedores, detalles comparativos fáciles de leer, estados de selección claros y una lista de preselección persistente.
### Twilio Paste
Redacta una notificación con el tema y los contratos de botones de Paste, una escala de espaciado verificada y una distinción clara entre editar, revisar y enviar un mensaje.
### Visa Product sistema de diseño
Usa Nova CSS de Visa para crear una preferencia clara de formato de extracto, con controles de opción nativos, un encabezado de color alternativo y un resumen para revisar. Examina los valores exactos del tema 1.6.5, el espaciado escalable y la integración completa de la hoja de estilos.
- [Referencia de implementación](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Fuente](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_light.less)
- [Fuente](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Fuente](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Fuente](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_radius.less)
- [Fuente](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Fuente](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)
- [Consulta la especificación complementaria](https://github.com/Tencent/tdesign-react)
- [Referencia de código](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Consulta la especificación complementaria](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Consulta la especificación complementaria](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Consulta la especificación complementaria](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Consulta la especificación complementaria](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Consulta la especificación complementaria](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)
- [Referencia de código](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [TDesign React Instalación del paquete y familia de implementación.](https://github.com/Tencent/tdesign-react)
- [Tema claro Asignaciones semánticas de colores claros.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_light.less)
- [Tema oscuro Selector de raíz oscuro y asignaciones de roles.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Tipografía Definiciones de fuentes, tamaños e interlineado.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Tokens de tamaño Alias de espaciado base y semántico.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Radios Valores de esquinas publicados.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_radius.less)
- [Ejemplo de Form API de registro, envío y errores de campo.](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Tipos de Table Contratos de identidad de fila y representación de columnas.](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)