Padrões de tela

Toda tela parte do mesmo Modelo de página: trilha, título, ações e blocos empilhados, com o espaço vindo do design system, nunca da tela. Depois, toda tela passa pelos mesmos momentos: carrega, às vezes fica vazia, às vezes dá erro, pede confirmação antes de apagar algo e avisa quando deu certo. Cada padrão abaixo diz quando usar, quais componentes usar, que texto escrever, o que fazer e não fazer, e traz um exemplo em Vue.

• Modelo de página
• Carregando
• Vazio
• Erro
• Sem permissão
• Confirmar ação destrutiva
• Sucesso e retorno
• Login e sessão expirada
• Formulários
• Listas e tabelas
• Detalhe de registro
• Navegação

Telas de referência

As telas do P19 (Gestão de Obras, Contratos e Serviços) e do P20 (Cadastro Técnico Imobiliário), no repositório construction-and-property, servem de referência: cada padrão aponta o arquivo que já o usa. As duas estão sendo construídas agora, então parte dos padrões ainda aparece como "em construção". O repositório é privado; o link abre para quem tem acesso à organização.

Padrão	P19	P20
Modelo de página	Moldura do AppLayout e todas as telas do protótipo	Em construção
Carregando	Detalhe da obra e lista de obras	Em construção
Vazio	Lista de obras, planilhas e equipe do contrato	Em construção
Erro	Detalhe da obra (tela), lista de obras (aviso), equipe do contrato (no formulário)	Em construção
Sem permissão	Em construção	Em construção
Confirmar ação destrutiva	Equipe do contrato	Em construção
Sucesso e retorno	Salvamento pelo useSaving	Em construção
Login e sessão expirada	Login; sessão expirada em construção	Em construção
Formulários	Novo contrato, obra, ordem de serviço	Em construção
Listas e tabelas	Lista de obras	Em construção
Detalhe de registro	Detalhe da obra e do contrato	Em construção
Navegação	Moldura do AppLayout	Em construção

Esta tabela mostra o que estava na main do repositório em 28/10/2026.