Crea un editor compacto de políticas de API con TDesign React: roles de tema concretos, su escala de tamaños de dos píxeles, registro de campos Form y una composición tipada de Table.
Interpretación independiente en HTML/CSS de los tokens claros y la composición Form/Table de TDesign; no es el entorno de ejecución nativo de React. · Referencia de implementación
02
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.
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.
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.
js
document.documentElement.setAttribute('theme-mode', 'dark');
// Restore the published light theme:
document.documentElement.setAttribute('theme-mode', 'light');
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.
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.
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.
Registra name, path y enabled mediante las claves de FormItem.
Rechaza los nombres vacíos y las rutas que no empiezan por / antes de añadir los datos.
Usa setFields con la misma clave del campo para mostrar el error y mantener los valores introducidos disponibles para corregirlos.
Añade un id estable solo después de superar las comprobaciones; indica que el resultado es local.
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.
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.
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.
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.
HTML
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>TDesign API rule editor</title><style>
*{box-sizing:border-box}body{margin:0;background:#eee;color:rgba(0,0,0,.9);font:14px/22px Arial,sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#fff;border-bottom:1px solid #ddd}.mark{font-weight:700;color:#0052d9;font-size:20px}.tag{background:#f2f3ff;color:#003cab;padding:4px 8px;border-radius:3px}main{padding:24px;max-width:1100px;margin:auto}h1{font-size:24px;line-height:32px;margin:0 0 8px}h2{font-size:16px;line-height:24px;margin:0 0 20px}.sub{color:rgba(0,0,0,.6);margin:0 0 24px}.layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:16px}.panel{background:white;border:1px solid #e8e8e8;border-radius:6px;padding:24px}label{display:block;margin-bottom:6px}input[type=text]{width:100%;height:36px;border:1px solid #ddd;border-radius:3px;padding:0 12px;font:inherit;margin-bottom:4px}input:focus,button:focus-visible{outline:2px solid #0052d9;outline-offset:3px}.hint{font-size:12px;color:#666;margin:0 0 20px}.toggle{display:flex;gap:8px;align-items:center;margin:18px 0 24px}.toggle input{accent-color:#0052d9;width:18px;height:18px}.toggle label{margin:0}button{font:inherit;border:1px solid #ddd;border-radius:3px;padding:5px 12px;background:white;color:#0052d9;cursor:pointer}button:hover{background:#f2f3ff}.primary{background:#0052d9;color:white;border-color:#0052d9;width:100%;margin-top:8px}.primary:hover{background:#366ef4}.error{color:#ad352f;min-height:22px;margin:0}.listhead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e8e8e8;padding-bottom:16px;margin-bottom:0}.listhead h2{margin:0}.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:20px 0;border-bottom:1px solid #e8e8e8}.row strong{display:block;font-weight:600}.path{display:block;overflow-wrap:anywhere;font:12px/20px monospace;color:#666}.state{font-size:12px;color:#003cab}.row button{align-self:center;font-size:12px}.diagram{margin-top:24px;padding:16px;background:#f2f3ff;border-radius:3px;display:flex;align-items:center;gap:12px}.node{padding:8px 12px;background:white;border:1px solid #b5c7ff;border-radius:3px}.diagram span{color:#0052d9}.status{font-size:12px;color:#555;min-height:20px;margin:20px 0 0}.foot{font-size:12px;color:#666;margin:20px 0 0}#empty{padding:24px 0;color:#666}@media(max-width:680px){header{padding:16px}.layout{grid-template-columns:1fr}main{padding:20px 16px}.panel{padding:20px}.diagram{flex-wrap:wrap}.tag{font-size:12px}}
</style><header><span class="mark">T / Console</span><span class="tag">Local policy workspace</span></header><main><h1>API access rules</h1><p class="sub">Define which resources belong in your draft policy.</p><div class="layout"><section class="panel"><h2>Create a rule</h2><form id="editor" novalidate><label for="name">Rule name</label><input type="text" id="name" aria-describedby="error"><p class="hint">A short label your team can recognize.</p><label for="path">Resource path</label><input type="text" id="path" placeholder="/reports" aria-describedby="path-help error"><p class="hint" id="path-help">Start with /. Each path must be unique.</p><div class="toggle"><input id="enabled" type="checkbox" checked><label for="enabled">Enabled in this draft</label></div><p class="error" id="error" role="alert"></p><button class="primary">Add local rule</button></form><p class="foot">This editor does not connect to an API gateway.</p></section><section class="panel"><div class="listhead"><h2>Policy rules</h2><span id="count" class="tag"></span></div><div id="rules"></div><div class="diagram" aria-label="Illustrative policy flow"><div class="node">Client</div><span aria-hidden="true">→</span><div class="node">Policy draft</div><span aria-hidden="true">→</span><div class="node">Resource</div></div><p class="status" id="status" role="status">Two example rules are loaded locally.</p></section></div><p class="foot">HTML interpretation of TDesign light theme roles · Native React integration is provided in the guide.</p></main><script>
const $=id=>document.getElementById(id);let rules=[{id:1,name:'Reports read access',path:'/reports',enabled:true},{id:2,name:'Billing export',path:'/billing/export',enabled:false}];let next=3;
function render(){const host=$('rules');host.replaceChildren();$('count').textContent=rules.length+' rules';if(!rules.length){const p=document.createElement('p');p.id='empty';p.textContent='No rules in this draft. Add a resource to begin.';host.append(p)}for(const rule of rules){const row=document.createElement('div');row.className='row';const copy=document.createElement('div'),name=document.createElement('strong'),path=document.createElement('code'),state=document.createElement('span'),remove=document.createElement('button');name.textContent=rule.name;path.textContent=rule.path;path.className='path';state.textContent=rule.enabled?'Enabled':'Disabled';state.className='state';copy.append(name,path,state);remove.textContent='Remove';remove.setAttribute('aria-label','Remove '+rule.name);remove.onclick=()=>{rules=rules.filter(x=>x.id!==rule.id);render();$('status').textContent='Removed '+rule.name+' from this local draft.';$('name').focus()};row.append(copy,remove);host.append(row)}}
$('editor').onsubmit=e=>{e.preventDefault();$('error').textContent='';for(const id of ['name','path'])$(id).removeAttribute('aria-invalid');const name=$('name').value.trim(),path=$('path').value.trim();const fail=!name?['name','Enter a rule name.']:!path.startsWith('/')?['path','Start the resource path with /.']:rules.some(r=>r.path===path)?['path','This path already has a rule.']:null;if(fail){$('error').textContent=fail[1];$(fail[0]).setAttribute('aria-invalid','true');$(fail[0]).focus();return}rules.push({id:next++,name,path,enabled:$('enabled').checked});render();$('status').textContent='Added '+name+' locally. No policy was deployed.';$('name').value='';$('path').value='';$('name').focus()};render();
</script></html>
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.
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.
04
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.
bash
npm install tdesign-react react react-dom
Una instrucción para tu proyecto
Instrucción para el agente
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.
05
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.
