# Sistema de design Arco Design ## Prévia da interface do sistema de design Arco Design Pesquise, selecione, inclua ou remova seções do relatório e, em seguida, prepare um esboço local independente. ## Referência de design do sistema de design Arco Design Fonte original do Arco React. As constantes Less são indicadas com @; as variáveis CSS em tempo de execução usam --. O espaçamento da prévia e o layout dos painéis são escolhas originais da aplicação, baseadas nessas escalas. ### Dimensões e espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | @size-mini | 24px | Alias para a altura compacta do componente. | | @size-small | 28px | Altura pequena do componente. | | @size-default | 32px | Altura padrão do componente. | | @size-large | 36px | Altura grande do componente. | | @spacing-1 … @spacing-6 | 2, 4, 6, 8, 10, 12px | Pequenos intervalos de espaçamento. | | @spacing-7 … @spacing-10 | 16, 20, 24, 32px | Intervalos para agrupamento. | | @border-radius-small | 2px | Cantos pequenos. | | @border-radius-medium | 4px | Cantos médios. | | @border-radius-large | 8px | Cantos grandes. | ### Tipografia e movimento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | @font-size-body | 14px | Tamanho global do texto do corpo. | | @line-height-base | 1.5715 | Caixa de linha de aproximadamente 22px para 14px. | | @font-family | Inter, system and CJK fallbacks | O nome Inter não faz o download da fonte. | | @code-family | Consolas, Menlo | Pilha tipográfica voltada para código. | | @transition-duration-1 / 2 / 3 | 0.1s / 0.2s / 0.3s | As três primeiras constantes de duração. | | @transition-timing-function-standard | cubic-bezier(.34,.69,.1,1) | Curva padrão publicada. | ### Referências da paleta | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | @arcoblue-6 | #165dff | Referência do azul do Arco. | | @gray-1 | #f7f8fa | Neutro claro. | | @gray-2 | #f2f3f5 | Neutro para preenchimento secundário. | | @gray-3 | #e5e6eb | Neutro para bordas. | | @gray-8 | #4e5969 | Neutro para texto secundário. | | @gray-10 | #1d2129 | Neutro para texto principal. | | @red-6 | #f53f3f | Referência do vermelho; não presuma contraste adequado para textos pequenos. | | @green-6 | #00b42a | Referência do verde. | ### Convenções de variáveis em tempo de execução | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --color-text-1 | Primary text role | O prefixo padrão das variáveis não é arco. | | --color-fill-2 | Secondary fill role | Use no lugar de um cinza fixo em áreas que se adaptam ao tema. | | --border-radius-medium | Medium corner role | Disponibilizado em tempo de execução. | | body[arco-theme="dark"] | Dark theme selector | Defina ou remova o atributo do body. | | --color-bg-2 | Container surface | Tem um valor diferente no modo escuro. | ### Estado e eventos de Transfer | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | dataSource | {key:string,value:string,disabled?:boolean}[] | Chaves estáveis identificam as seções. | | targetKeys | string[] | Associação à coluna de destino. | | selectedKeys | string[] | Seleção da caixa de seleção, não associação ao destino. | | onChange | (newTargetKeys,direction,moveKeys) | Confirme o novo array de associações. | | onSelectChange | (leftSelectedKeys,rightSelectedKeys) | Combine ambos para controlar selectedKeys. | | filterOption | (inputValue,item) => boolean | O comportamento padrão original diferencia maiúsculas de minúsculas e procura correspondências parciais. | | showSearch | Boolean or per-list configuration | O exemplo ativa a pesquisa nas duas colunas. | | oneWay | Boolean | Use somente quando não quiser permitir a remoção de itens do destino. | | simple | Boolean or retainSelectedItems options | Pode mover itens ao selecioná-los; não equivale a ações explícitas de transferência. | ## Guia completo do sistema de design Arco Design 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. ## No sistema de design Arco Design, Transfer representa associação, não apenas uma lista de caixas de seleção ### Escolha as seções do relatório com atenção > O Arco Transfer é útil quando um operador precisa comparar dois conjuntos: seções disponíveis e seções incluídas em um relatório. Marcar uma linha a seleciona para uma operação posterior; isso não move a seção imediatamente, a menos que o modo simples esteja ativado. O exemplo mantém a ação explícita em duas etapas. O usuário seleciona Canais de aquisição, ativa Incluir e, em seguida, prepara um esboço. Esse esboço é uma captura separada; por isso, alterações posteriores no editor não modificam silenciosamente a versão preparada. Consulte a especificação de apoio ## Sistema de design Arco Design: use a escala de tamanhos e a escala de espaçamento separadamente ### O mesmo número pode representar dimensões diferentes As constantes de tamanho do Arco avançam em incrementos de quatro pixels, enquanto a escala de espaçamento começa com 2, 4, 6, 8, 10 e 12, antes de passar a incrementos maiores. O tamanho padrão do componente corresponde a 32px. Presumir que todo sufixo de tamanho ou espaçamento representa a mesma medida levaria a controles inconsistentes. Neste layout original, os dois painéis de transferência têm cantos com raio médio e margem de página de 24px. Caixas de seleção pequenas e divisórias entre linhas dão suporte à tarefa densa de seleção; áreas maiores da página criam separação sem substituir conteúdo útil por cartões grandes demais. Consulte a especificação de apoio ## Sistema de design Arco Design: mantenha os papéis semânticos na estilização da aplicação ### CSS As variáveis têm um contrato de nomenclatura próprio O tema padrão exporta variáveis como --color-text-1 e --color-fill-2, sem o prefixo arco. Compilações personalizadas podem alterar esse prefixo; por isso, inspecione o tema compilado ao integrá-lo a uma aplicação com namespace. As variáveis da paleta principal contêm canais RGB; quem as consumir deve usar rgb(var(--primary-6)), em vez de tratá-las como uma cor hexadecimal completa. A prévia usa o tom de azul do Arco verificado como referência para a ação principal e as linhas selecionadas. Uma seção restrita usa uma caixa de seleção desativada e um texto explicativo, em vez de vermelho, que poderia sugerir um erro que o operador pode corrigir. Consulte a especificação de apoio ## Sistema de design Arco Design: dê suporte a rótulos compactos e nomes longos de seções ### Uma escala prática para o texto do corpo O tamanho padrão do texto do corpo é 14px, com multiplicador de altura de linha de 1.5715. A família publicada começa com Inter e inclui alternativas de sistema e para CJK. Esta é uma pilha CSS, não uma prova de que um arquivo de fonte Inter foi carregado. O rótulo de uma seção do relatório pode ser mais longo que o exemplo. A versão offline quebra o texto das linhas e empilha os painéis em telas pequenas, mantendo legíveis os rótulos Incluir e Remover. Ela não reduz o componente de transferência inteiro até tornar o texto ilegível. Consulte a especificação de apoio ## Sistema de design Arco Design: dois arrays controlados evitam comportamentos ambíguos ### Pertencimento e seleção têm significados diferentes targetKeys indica quais itens fazem parte do relatório. selectedKeys indica quais caixas de seleção estão ativas no momento nas duas listas. onSelectChange fornece arrays para a esquerda e para a direita; concatene-os ao controlar selectedKeys. onChange fornece o novo pertencimento, a direção e as chaves movidas. 1. Mantenha estável a chave de cada item de origem, mesmo quando o rótulo exibido mudar. 2. Combine os arrays de seleção da esquerda e da direita em onSelectChange. 3. Substitua targetKeys pelo novo array recebido em onChange. 4. Limpe a seleção temporária após uma movimentação e informe seu efeito local. Consulte a especificação de apoio ## Sistema de design Arco Design: a pesquisa deve restringir a visualização sem excluir itens do conjunto ### Deixe explícita a regra de correspondência O filtro padrão da origem compara a consulta com o valor do item usando uma busca de substring que diferencia maiúsculas de minúsculas. O exemplo fornecido substitui esse comportamento por uma busca que converte o texto para minúsculas. Pesquisar uma linha selecionada que esteja oculta não deve sugerir que ela deixou de fazer parte do relatório. Para esta lista pequena, paginação e virtualização agregam pouco valor. O Arco oferece essas opções para conjuntos maiores, mas a aplicação continua responsável pelas chaves estáveis, pelo conjunto completo de destino e pelas regras de seleção de itens em visualizações filtradas. - As listas de itens disponíveis e incluídos têm campos de pesquisa com nomes distintos. - Uma mensagem de nenhum resultado descreve a visualização filtrada, não um conjunto de dados vazio. - A preparação de um esboço usa targetKeys, não apenas as linhas visíveis no momento. Consulte a especificação de apoio ## Sistema de design Arco Design: o modo escuro altera as superfícies e também o texto ### Defina o seletor publicado O Arco publica suas substituições para o modo escuro sob a tag de tema com arco-theme="dark". Na compilação padrão, a tag é body. Remover esse atributo restaura as regras normais; adicionar uma classe sem relação chamada dark não é o mesmo API. Se adicionar uma prévia do modo escuro, ajuste em conjunto os papéis do contêiner e do texto. O exemplo offline permanece intencionalmente claro, enquanto o exemplo nativo pode usar o tema CSS já importado. Não inverta miniaturas de relatórios nem ilustrações com um filtro aplicado indiscriminadamente. ``` document.body.setAttribute('arco-theme', 'dark'); // Restore default: document.body.removeAttribute('arco-theme'); ``` Referência de código Consulte a especificação de apoio ## Sistema de design Arco Design: pacote, folha de estilos e limites reais ### Um esboço de relatório não exporta dados do relatório O pacote React é @arco-design/web-react e sua entrada completa de CSS é dist/css/arco.css. O exemplo importa Transfer e Button da raiz do pacote e usa estado controlado, em vez de inventar uma API para criação de relatórios. A prévia independente reproduz o comportamento de seleção com caixas de seleção e botões nativos para funcionar offline. Ela valida a lógica de interação e a composição responsiva; não comprova que o pacote nativo foi compilado em um projeto consumidor. Um exportador de produção precisaria de um backend e de verificações de permissão, além de uma linha de exemplo desativada. Consulte a especificação de apoio ## Arco Design Exemplos de componentes do sistema de design ### Exemplo interativo completo e independente Salve o documento completo como index.html e abra-o em um navegador. HTML independente do comportamento do Arco Transfer e de referências de tema verificadas; exemplo nativo de React fornecido separadamente. ``` Arco report section transfer
Report studio

Choose report sections

Build an outline from the sections available to this workspace.

Available sections

Included in report

Select a section, then choose Include or Remove.

Prepared outline

No outline prepared yet.

HTML interpretation of Arco Transfer · Original sample sections · Local outline only, no analytics data exported

``` Referência de código - A seção restrita do relatório não pode ser movida. As linhas selecionadas e as seções incluídas são estados separados, de acordo com a distinção explicada para o Transfer nativo. ### Transferência controlada de seções do relatório O Transfer gerencia o pertencimento aos conjuntos de origem e destino, enquanto o estado da aplicação armazena um esboço preparado separadamente. Uma linha restrita demonstra uma opção desativada sem fingir impor autorização no servidor. ``` // npm install @arco-design/web-react react react-dom import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {Transfer,Button} from '@arco-design/web-react'; import '@arco-design/web-react/dist/css/arco.css'; const data = [ {key:'overview',value:'Executive overview'}, {key:'traffic',value:'Acquisition channels'}, {key:'retention',value:'Retention cohorts'}, {key:'revenue',value:'Revenue breakdown'}, {key:'raw',value:'Raw event export (restricted)',disabled:true} ]; function ReportBuilder(){ const [target,setTarget]=useState(['overview']); const [selected,setSelected]=useState([]); const [snapshot,setSnapshot]=useState([]); const [status,setStatus]=useState('Choose sections for a local report.'); return

Report sections

item.value.toLowerCase().includes(query.toLowerCase())} onSelectChange={(left,right)=>setSelected([...left,...right])} onChange={(keys,direction,moved)=>{ setTarget(keys);setSelected([]); setStatus(`${moved.length} section(s) moved to ${direction}. Draft only.`); }} />

{status}

Prepared outline

{snapshot.length ?
    {snapshot.map(key=>
  1. {data.find(item=>item.key===key).value}
    2. )}
:

No outline prepared yet.

}
; } createRoot(document.getElementById('root')).render(); ``` Referência de código - A seleção das caixas de seleção e o pertencimento ao relatório são arrays diferentes. - O filtro personalizado não diferencia maiúsculas de minúsculas. - Os dados de exemplo são originais; nenhum dado de análise é carregado ou exportado. A compilação nativa continua sendo uma verificação de integração separada. ## Configuração do agente para o sistema de design Arco Design ### Ponto de partida para implementação Importe a folha de estilos completa arco.css uma única vez e monte o exemplo React em um elemento raiz. Não misture este pacote React com importações do Arco Vue. ``` npm install @arco-design/web-react react react-dom ``` ### Um prompt para seu projeto ``` Use o Transfer do Arco React com chaves estáveis em dataSource e targetKeys e selectedKeys controlados separadamente. Forneça um filtro que ignore diferenças entre maiúsculas e minúsculas, ações explícitas de Incluir/Remover e uma captura preparada da estrutura em árvore. Preserve a sintaxe de variáveis do Arco CSS e identifique com clareza a interpretação offline. ``` ## Fontes e escopo do sistema de design Arco Design Referência independente de OpenDesign. Dados originais do relatório e pré-visualização somente local; linhas desativadas não constituem uma barreira de autorização. - Pacote React Instalação e entrada da folha de estilos. - Tokens globais Dimensões, espaçamento e mapeamentos semânticos. - Tema padrão Tipografia e movimento. - Paleta Referências de cores verificadas. - Variáveis CSS Nomes em tempo de execução e seletor de tema escuro. - Transfer API Estado controlado e assinaturas de retorno de chamada. ## Recursos relacionados ao sistema de design Arco Design ### Atlassian sistema de design Crie um quadro de planejamento de tarefas com tokens semânticos da Atlassian, uma escala de espaçamento de oito pixels, APIs reais de Button, Lozenge e Toggle, além da configuração necessária de estilos Compiled. Inspecione uma tarefa, filtre o quadro e mova um item de trabalho local sem confundir seleção com status. ### AWS Cloudscape Um guia de configuração do Cloudscape com tokens reais de atualização visual, espaçamento adaptado à densidade, APIs controladas para formulários e um assistente funcional de recursos em duas etapas. ### Backbase sistema de design Crie um fluxo de revisão bancária com identidade visual usando os módulos Angular da Backbase, a exportação semântica do tema e estados de revisão explícitos. Compare as APIs web com dimensões nativas documentadas separadamente. - [Referência de implementação](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Fonte](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Fonte](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Fonte](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less) - [Fonte](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Fonte](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Referência de código](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md) - [Referência de código](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Pacote React Instalação e entrada da folha de estilos.](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md) - [Tokens globais Dimensões, espaçamento e mapeamentos semânticos.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Tema padrão Tipografia e movimento.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Paleta Referências de cores verificadas.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less) - [Variáveis CSS Nomes em tempo de execução e seletor de tema escuro.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Transfer API Estado controlado e assinaturas de retorno de chamada.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)