Crie um editor compacto de políticas API com TDesign React: funções concretas do tema, escala de tamanhos de dois pixels, registro de campos do Form e composição tipada de Table.
Interpretação independente de HTML/CSS dos tokens claros de TDesign e da composição de Form/Table; não é o ambiente de execução nativo de React. · Referência de implementação
02
Referência de design do sistema de design TDesign
TDesign React com os temas e componentes atuais da ramificação pública develop. Os valores do tema são instantâneos do código-fonte, não uma garantia de compatibilidade com uma versão específica do pacote. A visualização independente é uma interpretação em HTML; o exemplo de React usa o pacote real API.
Sistema de design TDesign: um sistema de console com famílias de implementação explícitas
Escolha a implementação de React
TDesign tem implementações distintas para cada framework. Este exemplo usa intencionalmente tdesign-react, não um pacote Vue de nome semelhante nem o conjunto de componentes para dispositivos móveis. A folha de estilos global faz parte da integração: importar apenas um componente não fornece as regras de layout e tema mostradas.
A unidade funcional é um Form registrado ao lado de uma Table estruturada. Nome, caminho do recurso e estado de ativação são campos de dados; remover uma linha é uma ação da tabela. Seria falso afirmar que um API agora está protegido em toda a página, pois este exemplo não tem um sistema de autorização no backend.
Sistema de design TDesign: cores semânticas, incluindo diferenças reais do modo escuro
A etapa sete da marca não é universal em todos os modos
No tema claro, o papel da marca é definido pela etapa sete; no tema escuro, pela etapa oito. Preserve a variável semântica no CSS da aplicação, em vez de copiar o azul claro para cada componente. O plano de fundo escuro é #181818 e o contêiner é #242424; são superfícies distintas.
A visualização permanece intencionalmente no modo claro. Em uma implementação nativa, defina theme-mode="dark" no elemento raiz do documento para usar as regras publicadas para o modo escuro; aplique o escopo de qualquer ilustração de política personalizada separadamente, em vez de recolorir todas as imagens com um filtro.
js
document.documentElement.setAttribute('theme-mode', 'dark');
// Restore the published light theme:
document.documentElement.setAttribute('theme-mode', 'light');
Sistema de design TDesign: tipografia compacta sem perder o significado dos campos
Use os papéis tipográficos completos
O estilo Body medium define tamanho de 14px e altura de linha de 22px. Title medium acrescenta peso 600 em 16/24; o título pequeno usa 24/32. Cada estilo tem uma função distinta: dados da tabela, rótulos dos painéis e título da página não devem virar todos texto principal em negrito.
Os nomes das famílias de fontes do código-fonte correspondem a fontes do sistema. Acrescente um fallback sans-serif adequado à tipografia da aplicação e confira textos em chinês e latim ao mesmo tempo. Um caminho de recurso pode usar o estilo monoespaçado da aplicação sem que isso implique que seja um token tipográfico de TDesign.
Sistema de design TDesign: associe os aliases de tamanho à região correspondente
Os nomes dos espaçamentos não são intercambiáveis
O preenchimento horizontal médio do componente corresponde a 12px, mas a margem extragrande do componente corresponde a 20px. Não converta todos os sufixos semânticos com base em uma única escala presumida. O editor usa preenchimento externo de 24px e espaçamento menor entre campos para manter os controles agrupados.
Na visualização independente, em telas estreitas, o editor fica acima da lista de regras. Esse ponto de quebra é uma decisão da aplicação, não uma garantia do framework. Caminhos longos de API quebram linha na lista, sem forçar a página inteira a ficar mais larga que a janela de visualização.
Sistema de design TDesign: registre, valide e então adicione uma regra
Associe o erro do campo à respectiva chave
A instância de Form é passada ao componente Form; cada FormItem fornece o nome do campo. O manipulador de envio primeiro verifica validateResult e, em seguida, lê os campos coletados. As verificações da aplicação normalizam as strings e rejeitam caminhos duplicados, para que dois rótulos não configurem silenciosamente o mesmo endpoint de exemplo.
Registre name, path e enabled usando as chaves de FormItem.
Rejeite nomes ausentes e caminhos que não comecem com / antes de adicionar dados.
Use setFields com a mesma chave de campo para exibir o erro e manter os valores digitados disponíveis para correção.
Adicione um id estável somente após as verificações; informe que o resultado é local.
Sistema de design TDesign: preserve a identidade das linhas ao editar e remover
Separe os dados exibidos das células de ação
A tabela recebe seu campo id por meio de rowKey. A coluna enabled converte um valor Boolean em texto legível, em vez de mostrar um ponto colorido sem rótulo. A coluna de ações renderiza um botão com o nome da linha, evitando que tecnologias assistivas encontrem três controles Remover indistinguíveis.
Para um conjunto pequeno de regras, a tabela completa pode permanecer sem paginação. Se a paginação for adicionada, diferencie o recorte local integrado dos dados controlados pelo servidor antes de definir disableDataPage. Reutilizar posições do array como identidade não é seguro, pois a remoção altera a ordem dos itens.
name é o rótulo apresentado ao usuário; path é a identidade do recurso.
enabled é um dado da aplicação e é exibido com texto explícito.
actions é uma coluna personalizada e não precisa corresponder a uma propriedade armazenada.
Sistema de design TDesign: o estado local não é uma política implantada
Teste o editor de políticas como um editor
A visualização offline usa controles nativos rotulados, uma região de status dinâmica e foco visível ao navegar pelo teclado. Ao enviar um nome vazio ou um caminho duplicado, o formulário deve permanecer aberto e indicar o problema específico. Remover uma regra altera apenas a lista local.
Um serviço de produção ainda precisa de validação no servidor, autorização, tratamento de conflitos, registro de auditoria e recuperação após uma rejeição de salvamento. Esses aspectos devem ser planejados em torno deste editor, não simulados com uma notificação de sucesso que afirme que a implantação foi concluída.
Sistema de design TDesign: integre o pacote e mantenha o exemplo fiel à realidade
Use o exemplo nativo no código da aplicação
O exemplo de React importa os componentes reais Form, Input, Switch, Button e Table de TDesign. A visualização incorporada é uma interpretação independente em HTML/CSS, para funcionar sem baixar o pacote nem acessar a rede. As verificações de interação não comprovam que todas as dependências da biblioteca foram compiladas no seu projeto.
Os arquivos de tema vinculados são fontes atuais da ramificação de desenvolvimento. Confira a versão instalada no arquivo de lock e compare seus tokens antes de copiar substituições personalizadas. Esta página documenta intencionalmente os nomes dos papéis e a procedência do código-fonte para que mudanças futuras no tema possam ser avaliadas, em vez de ficarem ocultas atrás de uma paleta ilustrativa.
Exemplos de componentes do sistema de design TDesign
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação independente de HTML/CSS dos tokens claros de TDesign e da composição de Form/Table; não é o ambiente de execução 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>
As regras existem apenas na coleção de exemplo visível. O registro nativo de Form, os callbacks de validação e a renderização de Table são demonstrados separadamente em React.
Editor de regras registradas e remoção específica por linha
Form coleta o nome, o caminho do recurso e o estado de ativação. A validação da aplicação detecta nomes vazios, caminhos malformados e recursos duplicados antes de adicionar uma linha à Table local.
Os contratos das colunas de Table e de rowKey estão vinculados na especificação acima.
Este exemplo altera apenas o estado local de React; um rótulo de ativação não é uma decisão de autorização.
O exemplo de instalação/API foi conferido com a fonte oficial; a compilação do pacote é independente da prévia offline testada.
04
Configuração do agente de IA do sistema de design TDesign
Ponto de partida para implementação
Use o exemplo completo de entrada do cliente acima com um elemento raiz HTML. Importe tdesign-react/es/style/index.css uma única vez. Fixe as versões e teste com sua ferramenta de build antes de publicar.
bash
npm install tdesign-react react react-dom
Um prompt para seu projeto
Prompt para agente de IA
Use Form e Table de tdesign-react para um editor de regras API. Preserve os papéis semânticos --td-*, as chaves de campo registradas, os IDs estáveis das linhas, a validação explícita e mensagens que descrevam com precisão o estado local.
05
Fontes e escopo do sistema de design TDesign
Referência independente de OpenDesign. A prévia é uma interpretação offline, não é um software da Tencent nem um serviço de autorização implantado.
