# Sistema de design Naive UI ## Prévia de interface do sistema de design Naive UI Pesquise registros, expanda o contexto de revisão, selecione linhas em várias páginas e marque um lote como revisado localmente. ## Referência de design do sistema de design Naive UI Objeto common do tema claro do Naive UI 2.45.3, inspecionado no pacote instalado. Essas propriedades camelCase são substituições do tema, não um esquema público de nomes de variáveis CSS --token. As substituições personalizadas de common da prévia são listadas separadamente. ### Cores comuns padrão | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | primaryColor | #18a058 | Verde primário padrão. | | primaryColorHover | #36ad6a | Variação para foco por mouse. | | primaryColorPressed | #0c7a43 | Variação para pressionado. | | primaryColorSuppl | #36ad6a | Cor primária complementar. | | infoColor | #2080f0 | Função informativa. | | successColor | #18a058 | Função de sucesso. | | warningColor | #f0a020 | Função de aviso. | | errorColor | #d03050 | Função de erro. | | textColor1 | rgb(31, 34, 37) | Texto forte. | | textColor2 | rgb(51, 54, 57) | Texto normal. | | textColor3 | rgb(118, 124, 130) | Texto secundário. | | borderColor | rgb(224, 224, 230) | Borda padrão. | | dividerColor | rgb(239, 239, 245) | Separadores sutis. | | tableHeaderColor | rgb(250, 250, 252) | Plano de fundo do cabeçalho da tabela. | ### Tipografia e geometria dos controles | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | fontFamily | v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | Pilha de fontes preferencial da interface; v-sans não é baixada automaticamente. | | fontSize | 14px | Tamanho de texto padrão de 14px. | | fontSizeMini | 12px | Tamanho de texto mínimo. | | fontSizeSmall | 14px | Texto pequeno dos controles. | | fontSizeMedium | 14px | Texto médio dos controles. | | fontSizeLarge | 15px | Texto grande dos controles. | | fontSizeHuge | 16px | Texto enorme dos controles. | | lineHeight | 1.6 | Ritmo padrão do texto. | | heightTiny | 22px | Altura mínima dos controles. | | heightSmall | 28px | Altura pequena de controle. | | heightMedium | 34px | Altura média dos controles. | | heightLarge | 40px | Altura grande de controle. | | heightHuge | 46px | Altura máxima dos controles. | | borderRadius | 3px | Raio padrão de 3px. | | borderRadiusSmall | 2px | Raio pequeno padrão de 2px. | ### Substituições reais do tema da prévia | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | common.primaryColor | #176b57 | Cor original mais escura da ação primária. | | common.primaryColorHover | #238a71 | Valor original coordenado para foco por mouse. | | common.primaryColorPressed | #115340 | Valor original coordenado para pressionado. | | common.borderRadius | 6px | Substituição original do raio; o padrão é 3px. | | Layout spacing | 32px outer / 24px section gaps / 16px toolbar gap | Espaçamento original da página, não uma escala global de espaçamento atribuída ao Naive. | ## Naive UI Guia completo do sistema de 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. ## Naive UI Um objeto de tema do sistema de design JavaScript, não um pipeline Sass ### Um objeto de tema JavaScript, não um fluxo Sass > Naive UI é uma biblioteca de componentes Vue 3 cuja personalização de tema é expressa por meio de um objeto JavaScript. A fila de revisão passa themeOverrides para NConfigProvider. Sua seção common substitui primaryColor, primaryColorHover, primaryColorPressed e borderRadius, enquanto os demais padrões dos componentes continuam disponíveis pelo provider. A tabela de referência apresenta valores reais do tema claro comum da versão instalada 2.45.3. Ela não inventa nomes de variáveis CSS a partir dessas chaves camelCase. A cor primária padrão é #18a058 e o raio padrão da borda é de três pixels; o verde mais escuro e o raio de seis pixels deste exemplo são explicitamente substituições originais. Consulte a especificação de apoio ## Naive UI Tipografia e alturas de controles para interfaces densas no sistema de design ### Tipografia e alturas de controles para interfaces densas O tema common usa texto de quatorze pixels com altura de linha de 1.6. Os tamanhos de texto pequeno e médio são ambos de quatorze pixels, mas as alturas dos controles são diferentes. heightSmall tem vinte e oito pixels e heightMedium tem trinta e quatro pixels; portanto, os nomes dos tamanhos descrevem a geometria dos componentes, não apenas uma progressão do tamanho da fonte. A pilha de fontes preferencial começa com v-sans, mas a biblioteca não exige que essa fonte seja baixada para renderizar este exemplo. A página ao redor usa system-ui, um título de 34px e títulos de seção de apoio de 18px. Esses estilos da página são originais. Ao adotar a biblioteca, o designer deve distinguir a escala dos controles do tema da hierarquia editorial maior de uma página inicial. Consulte a especificação de apoio ## Naive UI As definições de colunas do sistema de design incluem comportamento ### As definições das colunas determinam o comportamento NDataTable recebe um array de colunas e um array de registros. O exemplo começa com uma coluna de seleção, seguida por uma coluna expansível e, depois, colunas de dados nomeadas. A coluna Reference exibe um nome em destaque e um ID estável menor. Entries usa um comparador numérico, enquanto a coluna de nome usa o classificador padrão. Review renderiza um NTag nativo de acordo com o status do registro. Essa configuração define comportamento real, em vez de uma captura de tela com títulos de tabela decorativos. A ordenação da coluna Entries compara quantidades numéricas, não strings formatadas. O conteúdo expandido mostra a pergunta específica de revisão de cada registro. A tabela de dados controla a exibição das linhas, enquanto a aplicação define o significado desses registros. Consulte a especificação de apoio ## Naive UI A seleção no sistema de design deve persistir após a reordenação ### A seleção deve ser preservada ao reordenar A função row-key retorna o ID estável de cada registro. checked-row-keys e update:checked-row-keys mantêm a seleção controlada no estado do Vue. A ordenação ou a paginação pode alterar a posição de exibição de um registro sem mudar a identidade usada pela ação em lote. Usar índices do array no lugar disso tornaria essa relação frágil quando a ordem das linhas mudasse. A coluna de seleção desativa os registros Arquivados. Eles continuam visíveis para oferecer contexto histórico, mas não podem ser adicionados ao lote de revisão. A aplicação também verifica o status ao executar a ação, mantendo a alteração dos dados consistente com a restrição visível. Em um sistema real, o servidor ainda precisaria aplicar as regras de autorização; uma caixa de seleção desativada não é uma barreira de permissão. 1. Selecione um registro que possa ser revisado na primeira página. 2. Avance para a próxima página e confira se a contagem da seleção foi preservada. 3. Execute a ação em lote e confirme que o status do registro selecionado foi alterado sem afetar nenhum registro arquivado. Consulte a especificação de apoio ## Naive UI No sistema de design, filtragem e paginação têm estados separados ### Filtragem e paginação têm estados separados O campo de busca procura nomes de referência e responsáveis. Quando o valor muda, a página atual volta para um, para que os resultados filtrados não permaneçam em uma página posterior que agora esteja vazia. A paginação usa um tamanho de página de quatro e um manipulador onChange; os seis registros permitem observar as mudanças de página no exemplo local. A seleção é intencionalmente independente do array filtrado e pode abranger várias páginas. A contagem na barra de ferramentas comunica esse escopo. Uma operação em lote de produção deve preservar ou limpar as seleções ocultas conforme uma regra deliberada; este exemplo as preserva. Um filtro nunca é tratado como uma alteração dos registros de revisão subjacentes. Consulte a especificação de apoio ## Naive UI Expanda as linhas do sistema de design antes de decidir sobre uma ação em lote ### Expanda as linhas antes de tomar uma decisão em lote Cada linha expansível inclui uma tarefa concreta, como verificar a navegação pelo teclado ou comparar diferentes significados para estados vazios. Assim, a área expandida fornece informações úteis para uma decisão de revisão, em vez de repetir outra descrição genérica. A coluna expansível usa renderExpand para gerar conteúdo comum abaixo do registro correspondente. A tabela mantém a estrutura das colunas em telas estreitas e recebe scroll-x=640. Assim, a região nativa da tabela pode rolar horizontalmente enquanto a página permanece dentro da janela de visualização. A barra de ferramentas se empilha em dispositivos móveis, mas os dados não são removidos silenciosamente para deixar a captura de tela mais limpa. Consulte a especificação de apoio ## Naive UI A revisão em lote do sistema de design é uma transformação local dos dados ### A revisão em lote é uma transformação local dos dados O botão Mark selected reviewed fica desativado quando o array controlado de chaves está vazio. Quando acionado, ele percorre os registros e altera para Reviewed apenas os itens selecionados que não estejam arquivados. Em seguida, a seleção é limpa e um alerta de sucesso nativo informa exatamente a operação local realizada. A contagem de itens revisados no cabeçalho do cartão é derivada dos registros, em vez de ser incrementada separadamente. Nenhum repositório, serviço de revisão ou documento externo é alterado. Uma implementação assíncrona real precisaria tratar carregamento, rejeição e falhas parciais. A seleção não deve ser limpa antes de se saber quais atualizações foram concluídas com sucesso. Este exemplo mantém a operação síncrona e explicitamente local, para que a mensagem de sucesso corresponda ao código. - O botão em lote indica se há alguma chave selecionada. - A contagem de itens revisados é derivada dos mesmos registros exibidos na tabela. - O aviso de resultado informa que nenhum repositório foi alterado. Consulte a especificação de apoio ## Naive UI Um componente Vue do sistema de design sem necessidade de importação de CSS ### Um componente Vue sem importação obrigatória de CSS Instale naive-ui@2.45.3 em um projeto Vue 3 e importe os componentes usados por App.vue. Naive UI fornece os estilos dos componentes em tempo de execução; ao contrário de muitas bibliotecas que priorizam CSS, ela não exige a importação de uma folha de estilos global do pacote para esses componentes. O style.css fornecido contém apenas o layout original da área de trabalho. NConfigProvider recebe as localidades em inglês para os componentes e as datas, além da substituição do tema common. O SFC completo pode ser compilado com o plugin padrão do Vue para Vite. O exemplo independente inclui esse componente compilado, mantendo os componentes nativos e o comportamento da aplicação disponíveis sem solicitações de rede. Consulte a especificação de apoio ## Naive UI Os limites entre tema e dados do sistema de design podem ser inspecionados ### Os limites entre tema e dados continuam inspecionáveis A área de trabalho é uma pequena biblioteca de referência, não um painel administrativo genérico com métricas inventadas. Cada linha contém dados de exemplo, cada status tem um significado explícito e o texto expandido oferece um motivo concreto para inspecioná-la. A tabela do tema e o SFC completo tornam reproduzíveis tanto os estilos quanto o comportamento. Ao adotar Naive UI em um sistema maior, mantenha coordenadas as substituições globais de common e as substituições no nível dos componentes. As cores padrão, de foco por mouse e de pressionado da cor primária devem ser avaliadas em conjunto. Evite usar estilos em elementos internos gerados como primeira estratégia de personalização quando o provider oferece uma superfície de tema compatível. Consulte a especificação de apoio ## Naive UI Exemplos de componentes do sistema de design ### Fila de revisão completa em Vue Configuração das colunas de DataTable, chaves de linha estáveis, seleção, expansão e paginação controlada. ``` ``` Referência de código - A seleção usa IDs de referência estáveis como chaves. - As linhas arquivadas são desativadas pelo predicado da coluna de seleção. - A substituição do tema common é fornecida por meio de NConfigProvider. ### Layout original da área de trabalho Tipografia da página e espaçamento responsivo ao redor da tabela de dados nativa. ``` *{box-sizing:border-box}body{margin:0;background:#f5f7f6;color:#1f2225;font-family:system-ui,sans-serif;font-size:14px;line-height:1.6}.review-desk{max-width:1120px;margin:auto;padding:32px}header{max-width:720px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#426258}.toolbar{display:flex;align-items:center;gap:16px}.toolbar .n-input{max-width:360px}.selection-note,.row-id{font-size:12px;color:#767c82}.row-id{margin-top:4px}.row-note{padding:12px 16px;max-width:65ch;color:#335547}.notice{margin-top:20px}.notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.notes section{border-top:2px solid #c8d7cf;padding:18px 0}.notes h2{font-size:18px;margin:0 0 10px}.notes p{margin:0}footer{font-size:12px;color:#767c82;margin-top:20px}@media(max-width:700px){.review-desk{padding:20px 16px}h1{font-size:28px}.toolbar{align-items:stretch;flex-direction:column}.toolbar .n-input{max-width:none}.notes{grid-template-columns:1fr}.n-card>.n-card__content{padding:16px!important}} ``` Referência de código - Naive UI injeta os estilos dos componentes; esta folha de estilos contém apenas o layout da aplicação. ## Configuração do agente sistema de design Naive UI ### Ponto de partida para implementação Verificado com Vue 3 e Naive UI 2.45.3. Usa a compilação padrão de SFC. Todos os registros de referência são locais. ``` // Create the project first: // npm create vite@latest naive-ui-specimen -- --template vue // cd naive-ui-specimen && npm install // In a Vite Vue 3 project: // npm install naive-ui@2.45.3 // Save the complete component above as App.vue and layout as style.css. import {createApp} from 'vue'; import App from './App.vue'; import './style.css'; createApp(App).mount('#app'); // index.html contains
. // NConfigProvider, locales, themeOverrides and component imports are in App.vue. // No Naive UI global CSS import is required for these components. // Keep the template index.html and replace its entry with the code above. // npm run dev ``` ### Um prompt para seu projeto ``` Use a fila de revisão de referências do Naive UI 2.45.3 com NConfigProvider e colunas nativas de NDataTable, expansão, ordenação, paginação e seleção. Preserve as chaves de referência estáveis ao filtrar ou mudar de página e faça com que a ação em lote opere sobre os registros selecionados, não apenas sobre as linhas visíveis. Vincule os estados vazio e de ação desabilitada à coleção real. Mantenha o themeOverrides fornecido como substituições da aplicação, distintas dos padrões do pacote, com o layout original completo. A fila é para revisão local de referências, não um serviço de importação de conjuntos de dados. ``` ## Fontes e escopo do sistema de design Naive UI Naive UI 2.45.3. Os padrões do tema e as substituições originais são identificados separadamente. Os registros de revisão e as alterações em lote permanecem locais. - Repositório oficial Vue 3, estilos em tempo de execução e personalização do tema. - Exemplos de DataTable Padrões nativos de tabela de dados e exemplos de API. - Tema claro comum Paleta padrão real e funções derivadas. - Geometria comum Tamanhos de fonte, alturas de controles e raios. - Provedor de configuração Configuração do tema do provedor. ## Recursos relacionados ao sistema de design Naive UI ### Nuxt UI Crie um compositor de brief completo com Nuxt UI 4.11.3, componentes Vue reais, referências semânticas de tema, validação de entrada e comportamento explícito para rascunhos locais. ### Oruga UI Um editor de catálogo nativo do Oruga, com tags de tópicos pesquisáveis e removíveis, limites de vocabulário aplicados, tokens reais de um tema opcional e um cartão dinâmico que reflete os rótulos selecionados. ### Pico CSS Pico CSS aplica estilos a HTML semântico com uma escala tipográfica responsiva baseada em rem e variáveis de tema. Suas distribuições padrão, sem classes e condicionais têm escopos de integração diferentes; este guia usa a compilação padrão em um formulário de preferências de leitura, com comportamentos nativos de expansão e diálogo. - [Referência de implementação](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Fonte](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts) - [Fonte](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider) - [Consulte a especificação de apoio](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts) - [Consulte a especificação de apoio](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Consulte a especificação de apoio](https://github.com/tusen-ai/naive-ui) - [Consulte a especificação de apoio](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider) - [Referência de código](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Referência de código](https://github.com/tusen-ai/naive-ui) - [Repositório oficial Vue 3, estilos em tempo de execução e personalização do tema.](https://github.com/tusen-ai/naive-ui) - [Exemplos de DataTable Padrões nativos de tabela de dados e exemplos de API.](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Tema claro comum Paleta padrão real e funções derivadas.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts) - [Geometria comum Tamanhos de fonte, alturas de controles e raios.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/_common.ts) - [Provedor de configuração Configuração do tema do provedor.](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider)