# Sistema de design TDesign
## Visualização da interface do sistema de design TDesign
Valide uma regra, examine seu efeito local e remova-a. Nenhuma política é implantada.
## 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.
### Papéis do tema claro
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --td-brand-color | #0052d9 | Ação primária, definida a partir da etapa 7 da marca. |
| --td-brand-color-hover | #366ef4 | Estado de foco da ação primária. |
| --td-brand-color-active | #003cab | Ação pressionada. |
| --td-brand-color-light | #f2f3ff | Superfície sutil de seleção. |
| --td-bg-color-page | #eee | Plano de fundo externo. |
| --td-bg-color-container | #fff | Painéis do editor e da tabela. |
| --td-text-color-primary | rgba(0,0,0,.9) | Texto principal. |
| --td-text-color-secondary | rgba(0,0,0,.6) | Texto complementar. |
| --td-border-level-1-color | #e8e8e8 | Divisórias. |
| --td-border-level-2-color | #ddd | Bordas dos controles. |
| --td-error-color | #d54941 | Papel do erro no campo. |
| --td-success-color | #2ba471 | Papel positivo; não deduza o contraste apenas pela cor. |
### Papéis tipográficos
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --td-font-family | PingFang SC, Microsoft YaHei, Arial Regular | Pilha voltada para o sistema; esta declaração não baixa fontes. |
| --td-font-body-small | 12px / 20px | Rótulos secundários compactos. |
| --td-font-body-medium | 14px / 22px | Texto principal do console. |
| --td-font-body-large | 16px / 24px | Texto de leitura maior. |
| --td-font-title-medium | 600 16px / 24px | Título do painel. |
| --td-font-headline-small | 600 24px / 32px | Título da página. |
| --td-font-display-medium | 600 48px / 56px | Papel de destaque, desnecessário em um editor de políticas. |
### Tamanhos e espaçamento semântico
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --td-size-1 … --td-size-8 | 2, 4, 6, 8, 12, 16, 20, 24px | Escala base não linear. |
| --td-size-9 … --td-size-16 | 28, 32, 36, 40, 48, 56, 64, 72px | Valores maiores da escala. |
| --td-comp-size-m | 32px | Alias de altura média do componente. |
| --td-comp-paddingLR-m | 12px | Alias de preenchimento horizontal médio. |
| --td-comp-paddingTB-l | 16px | Alias de preenchimento vertical grande. |
| --td-comp-margin-xl | 20px | O alias de espaçamento é diferente de padding xl. |
| --td-pop-padding-xxl | 16px | Alias de preenchimento de pop-up. |
### Tratamento dos cantos
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --td-radius-small | 2px | Raio pequeno. |
| --td-radius-default | 3px | Raio padrão. |
| --td-radius-medium | 6px | Raio médio. |
| --td-radius-large | 9px | Raio grande. |
| --td-radius-extraLarge | 12px | Raio extragrande. |
| --td-radius-round | 999px | Estilo em formato de pílula. |
| --td-radius-circle | 50% | O tratamento circular exige dimensões iguais. |
### Contratos de Form e Table
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Form.useForm() | [form] | Passe a instância para Form. |
| FormItem name | Registered field key | Deve corresponder aos campos enviados e aos erros definidos por setFields. |
| Form onSubmit | event.validateResult === true | Só atualize a aplicação após a validação bem-sucedida. |
| form.setFields | name + status + validateMessage | Defina um erro concreto para o campo. |
| FormItem for | Input association | O exemplo oficial de Switch usa for="status". |
### Configuração da tabela de dados
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| rowKey | Stable unique data property | O exemplo gera um id uma única vez por regra. |
| columns[].colKey | Data key or custom cell key | Use uma coluna de ações dedicada. |
| columns[].cell | ({row,col,rowIndex,colIndex}) | Renderize controles específicos para cada linha. |
| tableLayout | fixed by default; auto available | Defina larguras de coluna adequadas a caminhos longos de recursos. |
| disableDataPage | false by default | A Table cuida da paginação local, a menos que ela seja explicitamente desativada. |
## Guia completo do sistema de design TDesign
Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.
Orientações completas, um ponto de partida para a implementação e links para o código-fonte.
## 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.
Consulte a especificação de apoio
## 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.
```
document.documentElement.setAttribute('theme-mode', 'dark');
// Restore the published light theme:
document.documentElement.setAttribute('theme-mode', 'light');
```
Referência de código
Consulte a especificação de apoio
## 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.
Consulte a especificação de apoio
## 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.
Consulte a especificação de apoio
## 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.
1. Registre name, path e enabled usando as chaves de FormItem.
2. Rejeite nomes ausentes e caminhos que não comecem com / antes de adicionar dados.
3. Use setFields com a mesma chave de campo para exibir o erro e manter os valores digitados disponíveis para correção.
4. Adicione um id estável somente após as verificações; informe que o resultado é local.
Consulte a especificação de apoio
## 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.
Consulte a especificação de apoio
## 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.
Consulte a especificação de apoio
## 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.
Consulte a especificação de apoio
## 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.
```
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.
```
Referência de código
- 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.
```
// 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();
```
Referência de código
- 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.
## 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.
```
npm install tdesign-react react react-dom
```
### Um prompt para seu projeto
```
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.
```
## 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.
- TDesign React Instalação do pacote e família de implementação.
- Tema claro Mapeamentos semânticos de cores para o tema claro.
- Tema escuro Seletor da raiz do tema escuro e mapeamentos de papéis.
- Tipografia Definições de fonte, tamanho e altura da linha.
- Tokens de tamanho Aliases de espaçamento básico e semântico.
- Arredondamentos Valores de cantos publicados.
- Exemplo de formulário APIs para registro, envio e erros de campo.
- Tipos de Table Contratos de identidade das linhas e renderização de colunas.
## Recursos relacionados ao sistema de design TDesign
### Thumbtack Thumbprint
Crie uma interface de descoberta de serviços com os elementos primitivos documentados da v2 do Thumbprint: cartões compactos de prestadores, detalhes de comparação fáceis de ler, estados de seleção claros e uma lista de favoritos persistente.
### Twilio Paste
Crie um rascunho de notificação com o tema e os contratos de botões do Paste, uma escala de espaçamento verificada e uma distinção clara entre editar, revisar e realmente enviar uma mensagem.
### Visa Product sistema de design
Use o Nova CSS da Visa para criar uma opção clara de formato de extrato, com controles de opção nativos, cabeçalho em cor alternativa e resumo para revisão. Confira os valores exatos do tema 1.6.5, o espaçamento escalável e a integração completa da folha de estilos.
- [Referência de implementação](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Fonte](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_light.less)
- [Fonte](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Fonte](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Fonte](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_radius.less)
- [Fonte](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Fonte](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)
- [Consulte a especificação de apoio](https://github.com/Tencent/tdesign-react)
- [Referência de código](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Consulte a especificação de apoio](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Consulte a especificação de apoio](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Consulte a especificação de apoio](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Consulte a especificação de apoio](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Consulte a especificação de apoio](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)
- [Referência de código](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [TDesign React Instalação do pacote e família de implementação.](https://github.com/Tencent/tdesign-react)
- [Tema claro Mapeamentos semânticos de cores para o tema claro.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_light.less)
- [Tema escuro Seletor da raiz do tema escuro e mapeamentos de papéis.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Tipografia Definições de fonte, tamanho e altura da linha.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Tokens de tamanho Aliases de espaçamento básico e semântico.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Arredondamentos Valores de cantos publicados.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_radius.less)
- [Exemplo de formulário APIs para registro, envio e erros de campo.](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Tipos de Table Contratos de identidade das linhas e renderização de colunas.](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)