Ciclo de vida base de uma entidade no me. — listagem, criação, edição e leitura. Estrutura, princípios e hierarquia de containers para cada etapa.
Cada etapa usa componentes e padrões específicos. Consulte as pages individuais de cada ação.
Use este pattern quando a experiência envolver o gerenciamento de uma entidade ao longo do seu ciclo de vida. Também se aplica quando apenas parte do ciclo estiver presente, desde que a entidade siga lógica de gestão estruturada.
Não use como referência principal quando a interação não envolver uma entidade gerenciável ou quando a ação for apenas pontual. Recorra ao pattern específico da interação.
O CRUD representa a jornada base de uma entidade dentro do sistema.
Permite adicionar uma nova entidade ao produto.
Permite visualizar, consultar ou compreender uma entidade já existente.
Permite modificar informações de uma entidade existente.
Permite remover, descontinuar ou excluir uma entidade.
As etapas do CRUD não devem ser tratadas como telas isoladas. Cada uma influencia a experiência da outra:
Princípios de consistência que devem orientar todas as etapas do ciclo.
O usuário deve entender com facilidade:
As ações devem aparecer no nível exato da entidade à qual pertencem.
Evite ações genéricas fora de contexto.
O fluxo deve ter o mesmo nível de profundidade da tarefa.
Na view, todo documento abre em modo modal e pode ser expandido para tela dedicada.
O sistema deve informar claramente, com toasts, alerts, etc:
Sempre que possível, a experiência deve reduzir risco e permitir recuperação.
A forma como cada etapa do CRUD é apresentada deve refletir a complexidade da tarefa e a necessidade de contexto.
Use quando a ação for simples, rápida e de baixa complexidade.
Indicado para
Use quando o usuário precisar manter o contexto da tela anterior.
Indicado para
Use quando a entidade ou tarefa exigir maior profundidade.
Indicado para
Cada etapa do CRUD deve respeitar a hierarquia da interface e a relevância da ação no contexto da tela.
Use quando a ação for central para o objetivo da tela.
Use quando a ação funcionar como apoio ao fluxo principal.
Use com tratamento visual e comportamental específico. Não devem competir visualmente com primárias.
Cada etapa do CRUD deve considerar seus estados como parte da experiência — e não como exceção.
Nem todos os usuários terão acesso às quatro operações do CRUD. A experiência deve considerar:
A gestão de permissões deve ser previsível e consistente entre entidades semelhantes.
A nomenclatura das ações deve ser clara, específica e consistente ao longo do produto — formato verbo + entidade.
Quando o contexto não deixar claro o que está sendo manipulado.
Passo a passo para montar um fluxo de CRUD no Nuxt / EletroDS, consistente com este guide — dos entry points aos componentes reais e ao aceite pela DoD.
Uma entidade pode contemplar criação + leitura + edição, mas não necessariamente exclusão para todos os perfis.
Evitar soluções desconectadas entre etapas.
Decida o container antes de montar.
Não dependa só da tela ideal — trate todos os estados no componente.
Hierarquia: EletroDS → Nuxt UI → Vue puro. Não recriar o que já existe.
O CRUD se conecta diretamente com outros patterns do Design Guide. Considere-os em conjunto na construção da solução.
