Operação

Exemplos Visuais de Uso da Versão

📍 Onde Adicionar a Versão

Posição: Rodapé, centralizado, bem discreto

┌─────────────────────────────────────┐
│                                     │
│          ╔═══════════╗              │
│          ║  [Logo]   ║              │
│          ╚═══════════╝              │
│                                     │
│       Bem-vindo de volta            │
│      Faça login para continuar      │
│                                     │
│   ┌─────────────────────────────┐   │
│   │ Email                       │   │
│   └─────────────────────────────┘   │
│                                     │
│   ┌─────────────────────────────┐   │
│   │ Senha                       │   │
│   └─────────────────────────────┘   │
│                                     │
│   ┌─────────────────────────────┐   │
│   │        ENTRAR               │   │
│   └─────────────────────────────┘   │
│                                     │
│                                     │
│         v1.2.3 • DEV ← VERSÃO       │
│                                     │
└─────────────────────────────────────┘

Código:

<template>
  <div class="login-page">
    <div class="login-card">
      <!-- ... form de login ... -->
    </div>

    <!-- Versão no rodapé -->
    <footer class="login-footer">
      <VersionDisplay variant="minimal" />
    </footer>
  </div>
</template>

<style scoped>
.login-footer {
  @apply absolute -bottom-12 left-1/2 -translate-x-1/2;
  @apply text-center opacity-60 hover:opacity-100;
  @apply transition-opacity;
}
</style>

Resultado:

Discreto
Não interfere no design
Útil para debug e suporte
Aparece apenas ao passar mouse (opcional)

2. Menu do Usuário

Posição: Item "Sobre" no dropdown do menu

┌────────────────────┐
│  João Silva    [▼] │
└────────────────────┘
        │
        ▼
┌────────────────────┐
│ 👤 Meu Perfil      │
│ ⚙️  Configurações   │
├────────────────────┤
│ ℹ️  Sobre o Sistema│ ← VERSÃO AQUI
├────────────────────┤
│ 🚪 Sair            │
└────────────────────┘

Código:

<template>
  <div class="user-menu">
    <button @click="toggleMenu">
      {{ user.name }} ▼
    </button>

    <div v-if="menuOpen" class="dropdown">
      <a href="/profile">Meu Perfil</a>
      <a href="/settings">Configurações</a>
      <hr>
      <button @click="showAbout = true">
        Sobre o Sistema
      </button>
      <hr>
      <button @click="logout">Sair</button>
    </div>
  </div>

  <!-- Modal com versão detalhada -->
  <AboutModal v-model="showAbout" />
</template>

Ao clicar em "Sobre", abre um modal bonito com:

Logo do AgrSis
Versão completa
Data do build
Branch/Commit
Informações de contato

3. Rodapé do Layout Principal (Opcional)

Posição: Canto inferior direito ou esquerdo

┌──────────────────────────────────────┐
│  Header / Navbar                     │
├──────────────────────────────────────┤
│                                      │
│  Conteúdo da Página                  │
│                                      │
│                                      │
├──────────────────────────────────────┤
│ v1.2.3         © 2025 AgrSis         │
│   ↑                                  │
│ VERSÃO                               │
└──────────────────────────────────────┘

🎨 Variantes do Componente

<VersionDisplay variant="minimal" />

Resultado:

v1.2.3 • DEV

Super discreto
1 linha
Cor cinza claro
Ideal para login e rodapés

Compact (Tooltips e Dropdowns)

<VersionDisplay variant="compact" />

Resultado:

v1.2.3 (a1b2c3d)
main

2 linhas
Mostra versão + hash do commit
Mostra branch
Ideal para dropdowns e tooltips

<VersionDisplay variant="detailed" />

Resultado:

╔═══════════════════════════════════╗
║  Informações do Sistema           ║
╠═══════════════════════════════════╣
║  Versão:      v1.2.3              ║
║  Commit:      a1b2c3d             ║
║  Branch:      main                ║
║  Build:       13/01/2025 16:30    ║
║  Ambiente:    production          ║
║                                   ║
║  Último commit:                   ║
║  feat: adicionar dashboard        ║
╚═══════════════════════════════════╝

Todas as informações
Grid organizado
Ideal para modal "Sobre"

🧪 Testar Localmente AGORA

1. Gerar Versão Local

cd apps/producer
node ../../scripts/generate-version.js public/version.json

Resultado:

✅ Arquivo de versão gerado com sucesso!
📍 Versão: v0.0.0 (2ce9e3ec)
🌿 Branch: feature/backend-licitacoes-abertas-fechadas
📅 Build: 2026-01-13T19:07:18.128Z

2. Ver o Arquivo Gerado

cat apps/producer/public/version.json

{
  "version": "v0.0.0",
  "commitHash": "2ce9e3ec",
  "branch": "feature/backend-licitacoes-abertas-fechadas",
  "lastCommitDate": "2026-01-13 13:10:39 -0300",
  "lastCommitMessage": "debug: adicionar console.log...",
  "buildDate": "2026-01-13T19:07:18.128Z",
  "environment": "development",
  "displayVersion": "v0.0.0 (2ce9e3ec)",
  "fullInfo": "v0.0.0 @ feature/... (2ce9e3ec)"
}

<!-- apps/producer/pages/login.vue -->
<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50 p-4">
    <div class="relative w-full max-w-md">
      <!-- Card de Login -->
      <div class="bg-white rounded-xl shadow-lg p-8">
        <h1>Login</h1>
        <!-- ... resto do form ... -->
      </div>

      <!-- ADICIONAR AQUI -->
      <footer class="absolute -bottom-12 left-1/2 -translate-x-1/2">
        <VersionDisplay variant="minimal" />
      </footer>
    </div>
  </div>
</template>

4. Iniciar Dev Server

cd apps/producer
npm run dev

5. Abrir no Navegador

http://localhost:3000/login

Você verá:

┌────────────────────────┐
│  [Card de Login]       │
│                        │
└────────────────────────┘

   v0.0.0 (2ce9e3ec) • DEV

🎯 Comparar Versões (Local vs Produção)

Ver Versão Local

curl http://localhost:3000/version.json | jq

{
  "version": "v0.0.0",
  "commitHash": "2ce9e3ec",
  "branch": "feature/backend-licitacoes-abertas-fechadas",
  "environment": "development"
}

Ver Versão de Produção

curl https://producer.agrsis.com/version.json | jq

{
  "version": "v1.2.3",
  "commitHash": "f7g8h9i0",
  "branch": "main",
  "environment": "production"
}

Diferença clara:

Local: v0.0.0 em feature/... (dev)
Produção: v1.2.3 na main (prod)

Você saberá exatamente qual versão o usuário está usando!

🏷️ Criar Primeira Versão Oficial

Para sair do v0.0.0 e ter uma versão real:

# 1. Fazer merge da feature na main
git checkout main
git merge feature/backend-licitacoes-abertas-fechadas

# 2. Criar tag de versão
git tag -a v1.0.0 -m "feat: release inicial do AgrSis v1

- Sistema de cotações
- Portais Producer e Supplier
- Integração com banco Inter
- Sistema de versão automático
"

# 3. Enviar para o repositório
git push origin main
git push origin v1.0.0

# 4. Próximo build vai detectar v1.0.0 automaticamente!

Depois do próximo deploy, verá:

v1.0.0 (f7g8h9i) @ main

📱 Responsivo

O componente é responsivo por padrão:

Desktop:

v1.2.3 (a1b2c3d) @ main • DEV

Mobile:

v1.2.3
DEV

🎨 Customização de Estilo

Alterar Cor

<style scoped>
.login-footer {
  @apply text-green-600;  /* Verde ao invés de cinza */
}
</style>

Alterar Tamanho

<style scoped>
.login-footer {
  @apply text-xs;  /* Menor */
  /* ou */
  @apply text-sm;  /* Normal (padrão) */
}
</style>

Sempre Visível (sem hover)

<style scoped>
.login-footer {
  @apply opacity-100;  /* Sempre 100% visível */
}
</style>

Com Fundo

<style scoped>
.login-footer {
  @apply bg-white px-3 py-1 rounded-full shadow-sm;
}
</style>

🔍 Debug

Ver Versão no DevTools

// Abrir DevTools (F12)
fetch('/version.json').then(r => r.json()).then(console.table)

Resultado:

┌─────────────────┬────────────────────────────────────────┐
│ (index)         │ Values                                 │
├─────────────────┼────────────────────────────────────────┤
│ version         │ 'v1.0.0'                               │
│ commitHash      │ 'a1b2c3d'                              │
│ branch          │ 'main'                                 │
│ buildDate       │ '2025-01-13T19:07:18.128Z'             │
│ environment     │ 'production'                           │
└─────────────────┴────────────────────────────────────────┘

✅ Checklist de Implementação

Frontend Producer

Adicionar <VersionDisplay variant="minimal" /> no login
Adicionar item "Sobre" no menu do usuário
Adicionar <AboutModal v-model="showAbout" /> no layout
Testar localmente

Frontend Supplier

Adicionar <VersionDisplay variant="minimal" /> no login
Adicionar item "Sobre" no menu do usuário
Adicionar <AboutModal v-model="showAbout" /> no layout
Testar localmente

Git

Criar tag v1.0.0 na main
Push da tag para o repositório

Produção

Deploy com nova versão
Verificar https://producer.agrsis.com/version.json
Verificar se aparece na página de login

Próximo: Vou criar branch específica e fazer merge?

Edit this pageorReport an issue

Sistema de Controle de Versão Automático

Referência Histórica

Materiais históricos e registros de evolução.